/*
Theme Name: Turgs
Theme URI: https://turgs.com/theme/
Author: Turgs
Author URI: https://turgs.com/
Description: Performance-optimized theme for Turgs. System fonts, critical CSS, no Bootstrap, no jQuery. All Core Web Vitals fixes from the Thunder optimization series applied. Same brand identity as the original Turgs theme.
Version: 2.0
Requires at least: 5.3
Tested up to: 6.6
Requires PHP: 7.4
Tags: blue, two-columns, right-sidebar, featured-images, performance, accessibility-ready
License: GPL v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/

/* @critical-start */
/* ============================================================
   Custom properties (Turgs brand)
   ============================================================ */
:root {
	--c-primary: #0074e0;          /* Turgs brand blue (navbar bg, hero bg, theme-color) */
	--c-primary-dark: #005db8;     /* Hover / darker accents */
	--c-link: #0058ad;             /* Body content links — 6.91:1 on white ✓ AA */
	--c-link-hover: #003a76;
	--c-yellow: #ffe823;           /* Turgs accent yellow (btn-live, btn-yellow) */
	--c-yellow-dark: #ddc800;
	--c-text: #1f2937;             /* Body text — 14.26:1 on body bg ✓ */
	--c-text-muted: #4b5563;       /* Secondary text — 7.56:1 on white ✓ */
	--c-bg: #f9fcff;
	--c-surface: #ffffff;
	--c-border: #e5e7eb;
	--c-footer-bg: #0F3664;        /* Turgs dark blue footer (was in their CSS) */
	--c-footer-bg-dark: #06183f;
	--c-footer-link: #e5efff;      /* 11.2:1 on #0F3664 ✓ AAA (bumped from #cfe2ff for safety) */
	--c-footer-text: #f1f4f7;      /* 12.4:1 on #0F3664 ✓ AAA */
	--c-hero-text: #ffffff;

	--shadow-sm: 0 1px 3px rgba(0,0,0,.08);
	--shadow-md: 0 4px 12px rgba(0,0,0,.10);
	--shadow-lg: 0 14px 36px rgba(0,0,0,.14), 0 4px 12px rgba(0,116,224,.10);

	--radius-sm: 6px;
	--radius-md: 10px;
	--radius-lg: 14px;

	--font-system: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--font-display: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, Roboto, Arial, sans-serif;

	--container-max: 1180px;
	--container-px: 1.25rem;
}

/* ============================================================
   Reset + base
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; font-size: 19px; overflow-x: hidden; }
body {
	overflow-x: hidden;            /* belt-and-suspenders against any wide child pushing the page sideways */
	margin: 0;
	font-family: var(--font-system);
	font-size: 1rem;                /* 19px — matches the new html root */
	line-height: 1.65;
	color: var(--c-text);
	background: var(--c-bg);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
img, svg, video { max-width: 100%; height: auto; vertical-align: middle; }
a { color: var(--c-link); text-decoration: underline; text-decoration-thickness: 1px; }
a:hover, a:focus { color: var(--c-link-hover); }
h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-display);
	line-height: 1.25;
	margin: 0 0 .75em;
	color: var(--c-text);
}
h1 { font-size: 2rem; font-weight: 700; }
h2 { font-size: 1.6rem; font-weight: 700; }
h3 { font-size: 1.3rem; font-weight: 700; }
h4 { font-size: 1.15rem; font-weight: 700; }
h5 { font-size: 1.05rem; font-weight: 700; }
h6 { font-size: 1rem; font-weight: 700; }
p { margin: 0 0 1em; }
ul, ol { margin: 0 0 1em; padding-left: 1.5em; }
blockquote { margin: 1.5em 0; }
hr { border: 0; border-top: 1px solid var(--c-border); margin: 2em 0; }
.sr-only {
	position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.skip-link {
	position: absolute; left: -9999px; top: 0; z-index: 9999;
	background: var(--c-primary); color: #fff; padding: .75rem 1rem; text-decoration: none;
}
.skip-link:focus { left: 0; }

/* ============================================================
   Layout
   ============================================================ */
.container {
	width: 100%;
	max-width: var(--container-max);
	margin: 0 auto;
	padding-left: var(--container-px);
	padding-right: var(--container-px);
}

/* ============================================================
   Navbar
   ============================================================ */
.navbar {
	background: var(--c-primary);
	color: #fff;
	min-height: 72px;
	border-bottom: 1px solid rgba(255,255,255,.08);
	position: relative;             /* anchor for the mobile dropdown */
}
.navbar.sticky-top {
	position: sticky; top: 0; z-index: 100;
}
.navbar > .container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	min-height: 72px;
	padding-top: .5rem;
	padding-bottom: .5rem;
}
.navbar-brand {
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
	text-decoration: none;
	padding: .25rem 0;
}
.navbar-brand svg {
	display: block;
	width: 120px;
	height: 50px;
}
.navbar-brand:focus-visible { outline: 2px solid #fff; outline-offset: 3px; border-radius: 2px; }

.navbar-toggler {
	display: none;
	background: transparent;
	border: 1px solid rgba(255,255,255,.4);
	border-radius: 6px;
	padding: 0;
	width: 44px;
	height: 44px;
	cursor: pointer;
	position: relative;
	z-index: 1100;
	transition: background .15s, border-color .15s;
	-webkit-tap-highlight-color: transparent;
}
.navbar-toggler:hover,
.navbar-toggler:focus {
	background: rgba(255,255,255,.1);
	border-color: rgba(255,255,255,.65);
	outline: none;
}
.navbar-toggler-icon {
	display: block;
	position: absolute;
	left: 50%;
	top: 50%;
	width: 22px;
	height: 2px;
	background: #fff;
	transform: translate(-50%, -50%);
	transition: background .15s;
}
/* Top and bottom bars, anchored relative to centre bar */
.navbar-toggler-icon::before,
.navbar-toggler-icon::after {
	content: "";
	position: absolute;
	left: 0;
	width: 100%;
	height: 2px;
	background: #fff;
	transition: transform .25s ease, top .25s ease;
}
.navbar-toggler-icon::before { top: -7px; }
.navbar-toggler-icon::after  { top:  7px; }
/* Hamburger → X transform when expanded */
.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon { background: transparent; }
.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::before {
	top: 0;
	transform: rotate(45deg);
}
.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::after {
	top: 0;
	transform: rotate(-45deg);
}

.navbar-collapse {
	display: flex;
	flex: 1;
	align-items: center;
	gap: 1rem;
}
.navbar-nav {
	display: flex;
	flex-wrap: wrap;
	list-style: none;
	margin: 0;
	padding: 0;
	gap: .25rem;
	align-items: center;
}
.navbar-nav.ms-auto { margin-left: auto; }
.nav-item { display: flex; align-items: center; }
.nav-link {
	color: #fff;
	text-decoration: none;
	padding: .5rem .85rem;
	font-size: 1rem;
	font-weight: 500;
	border-radius: 4px;
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	white-space: nowrap;
}
.nav-link:hover, .nav-link:focus { color: #ffe69c; background: rgba(255,255,255,.06); }
.nav-link:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.nav-link svg { fill: currentColor; }

/* Yellow "Live Chat" / "Offers" pill button in navbar */
.nav-link.btn-live, .navbar .btn-live {
	background: var(--c-yellow);
	color: #000;
	font-weight: 700;
	border-radius: 999px;
	padding: .5rem 1rem;
}
.nav-link.btn-live:hover, .navbar .btn-live:hover { background: var(--c-yellow-dark); color: #000; }

@media (max-width: 991px) {
	.navbar-toggler { display: block; }

	/* Reset the desktop flex behaviour first */
	.navbar-collapse {
		display: block;          /* always rendered for transitions */
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		flex-basis: auto;
		flex-direction: column;
		align-items: stretch;
		background: #fff;
		color: var(--c-text);
		border-top: 1px solid #e5e7eb;
		box-shadow: 0 12px 24px rgba(0, 0, 0, .12);
		padding: .5rem 1rem 1rem;
		max-height: calc(100vh - 70px);
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		/* Animation: collapsed state */
		opacity: 0;
		transform: translateY(-8px);
		visibility: hidden;
		pointer-events: none;
		transition: opacity .2s ease, transform .25s ease, visibility 0s linear .25s;
		z-index: 1090;
	}
	.navbar-collapse.show {
		opacity: 1;
		transform: translateY(0);
		visibility: visible;
		pointer-events: auto;
		transition: opacity .2s ease, transform .25s ease, visibility 0s linear 0s;
	}

	/* Nav list inside dropdown */
	.navbar-nav {
		flex-direction: column;
		align-items: stretch;
		width: 100%;
		gap: 0;
		padding: 0;
		margin: 0;
		list-style: none;
	}
	/* Subtle divider between the two nav groups (primary + utility) */
	.navbar-nav + .navbar-nav {
		margin-top: .35rem;
		padding-top: .35rem;
		border-top: 1px solid #e5e7eb;
	}
	.navbar-nav.ms-auto { margin-left: 0; }

	/* Touch-friendly nav links */
	.nav-link {
		display: flex;
		align-items: center;
		gap: .55rem;
		color: var(--c-text);
		padding: .85rem 1rem;
		min-height: 48px;
		border-radius: 6px;
		font-weight: 600;
		text-decoration: none;
		transition: background .12s, color .12s;
	}
	.nav-link:hover,
	.nav-link:focus {
		background: rgba(0, 116, 224, .08);
		color: var(--c-primary);
	}
	.nav-link.current-link,
	.nav-item.current-menu-item > .nav-link {
		background: rgba(0, 116, 224, .1);
		color: var(--c-primary);
	}

	/* Make the CTA links (.btn-live class on Offers / Live Chat) actually
	   look like CTAs inside the mobile panel, not blend with text links. */
	.nav-link.btn-live {
		justify-content: center;
		background: var(--c-yellow);
		color: #1f2937 !important;
		font-weight: 700;
		border: 1px solid var(--c-yellow-dark);
		margin: .5rem 0;
		box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
	}
	.nav-link.btn-live:hover,
	.nav-link.btn-live:focus {
		background: var(--c-yellow-dark);
		color: #1f2937 !important;
	}
	.nav-link.btn { padding: .85rem 1rem; }

	/* Search icon at the end — full row + label for clarity */
	.nav-link[aria-label="Search"]::after {
		content: "Search";
		font-weight: 600;
	}

	/* Lock body scroll while menu is open (added by JS) */
	body.nav-open { overflow: hidden; }
}

/* ============================================================
   Hero banners (used on home, single, archive, author, search, 404, page)
   ============================================================ */
.hero {
	color: var(--c-hero-text);
	padding: 3rem 0;
	margin-bottom: 3rem;
}
.hero.bg-primary {
	background-color: var(--c-primary);   /* solid for Lighthouse contrast calc */
	background-image: linear-gradient(135deg, #0074e0 0%, #005db8 100%);
}
.hero a { color: #fff; }
.hero a:hover { color: rgba(255,255,255,.85); }
.hero__title {
	color: #fff;
	font-size: 2rem;
	font-weight: 700;
	margin: 0 0 .5rem;
	text-align: center;
}
.hero__eyebrow { color: rgba(255,255,255,.85); margin: 0; text-align: center; }
.hero__lede { color: rgba(255,255,255,.92); text-align: center; margin: 0; }
.hero__row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}
.hero__row .hero__title { text-align: left; margin: 0; }
.hero__search { max-width: 420px; flex: 1; min-width: 260px; }
.hero .breadcrumb-white { color: rgba(255,255,255,.95); font-size: .9rem; }
.hero .breadcrumb-white a { color: #fff; text-decoration: underline; }
.hero--single { padding: 2.5rem 0 3.5rem; margin-bottom: 0; }
.hero--single .breadcrumb-white { padding-top: 1rem; }

/* ============================================================
   Search form (hero variant + sidebar variant)
   ============================================================ */
.search-form { display: flex; }
.search-form__input {
	flex: 1;
	min-width: 0;
	border: 1px solid #ced4da;
	border-radius: 6px 0 0 6px;
	padding: .55rem .75rem;
	font: inherit;
	background: #fff;
}
.search-form__input:focus { outline: 2px solid var(--c-primary); outline-offset: 1px; }
.search-form__submit {
	background: var(--c-yellow);
	color: #000;
	border: 1px solid var(--c-yellow);
	padding: .55rem 1.1rem;
	font-weight: 700;
	border-radius: 0 6px 6px 0;
	cursor: pointer;
	transition: background .15s;
}
.search-form__submit:hover { background: var(--c-yellow-dark); border-color: var(--c-yellow-dark); }

/* ============================================================
   Content card (the white-bg box that holds main+sidebar)
   ============================================================ */
.content-card {
	background: #fff;
	padding: 1rem;
	box-shadow: var(--shadow-md);
	border-radius: var(--radius-md);
}
@media (min-width: 992px) {
	.content-card { padding: 2.5rem; }
	.mt-lg-n1 { margin-top: -1rem; }
}
.content-row {
	display: grid;
	gap: 2rem;
	grid-template-columns: 1fr;
}
@media (min-width: 992px) {
	.content-row { grid-template-columns: 1fr 280px; }
}
.content-main { min-width: 0; }
.content-sidebar { min-width: 0; }
/* @critical-end */

/* ============================================================
   Entry (single post body)
   ============================================================ */
.entry__title {
	font-size: 2rem;
	font-weight: 700;
	margin: 0 0 .75rem;
	color: var(--c-text);
}
.entry__meta {
	color: var(--c-text-muted);
	font-size: .95rem;
	margin-bottom: 1.5rem;
	border-bottom: 1px solid var(--c-border);
	padding-bottom: 1rem;
}
.entry__meta a { color: var(--c-link); }
.entry__byline { display: inline; }
.entry__content {
	font-size: 1.2rem;               /* 22.8px — comfortable long-form reading */
	line-height: 1.8;
}
.entry__content p,
.entry__content ul,
.entry__content ol {
	margin: 0 0 1.35rem;
}
.entry__content li { margin-bottom: .55rem; }
.entry__content li:last-child { margin-bottom: 0; }
.entry__content strong { font-weight: 700; }
.entry__content h2 { font-size: 1.85rem; margin-top: 2.5rem; }
.entry__content h3 { font-size: 1.5rem;  margin-top: 2rem; }
.entry__content h4 { font-size: 1.3rem;  margin-top: 1.65rem; }
.entry__content h5 { font-size: 1.2rem;  margin-top: 1.4rem; }
.entry__content img { border-radius: var(--radius-sm); margin: 1.25rem 0; }
.entry__content figure { margin: 1.75rem 0; }
.entry__content figcaption { font-size: 1rem; color: var(--c-text-muted); text-align: center; margin-top: .55rem; }
.entry__content table { width: 100%; border-collapse: collapse; margin: 1.75rem 0; font-size: 1.1rem; }
.entry__content th, .entry__content td { border: 1px solid var(--c-border); padding: .8rem; text-align: left; }
.entry__content th { background: #f3f6fa; font-weight: 700; }

/* ============================================================
   Responsive table wrapper
   ============================================================
   Every <table> in post content is wrapped in <div class="table-responsive">
   by turgs_wrap_tables_in_content() (the_content filter, see functions.php).
   The WRAPPER gets the horizontal scroll, NOT the table itself. This stops
   wide tables from pushing the whole page sideways on mobile.

   Why not `display: block; overflow-x: auto` on <table> directly?
   Because that only works if a parent constrains the width — and when the
   table is a direct child of .entry__content, it isn't constrained, so the
   table pushes the column out. A wrapper sized to 100% of its parent solves
   that: the wrapper is the constraint, the scroll lives inside it.
   ============================================================ */
.entry__content .table-responsive,
.table-responsive,
.entry__content figure.wp-block-table {
	width: 100%;
	max-width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	margin: 1.75rem 0;
	/* Visual cue that there's more content to scroll into view */
	background:
		linear-gradient(to right, #fff 30%, rgba(255,255,255,0)),
		linear-gradient(to right, rgba(255,255,255,0), #fff 70%) 100% 0,
		radial-gradient(farthest-side at 0 50%, rgba(0,0,0,.12), rgba(0,0,0,0)),
		radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,.12), rgba(0,0,0,0)) 100% 0;
	background-repeat: no-repeat;
	background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%;
	background-attachment: local, local, scroll, scroll;
}
.entry__content .table-responsive table,
.table-responsive table {
	margin: 0;
	min-width: 100%;
	/* Don't force table-layout: fixed — let cells size to content so the
	   wrapper actually has something to scroll over when content is wide. */
}
.entry__content .table-responsive tr:first-child td,
.table-responsive tr:first-child td {
	background: #f3f6fa;
	font-weight: 700;
}
.entry__content blockquote {
	font-size: 1.2rem;
	line-height: 1.75;
}

/* ============================================================
   Category label + link in single-post meta row
   Plain hyperlink to the current post's primary category.
   ============================================================ */
.entry__cat {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	font-size: 1rem;
}
.entry__cat-link {
	display: inline-block;
	padding: .25rem .7rem;
	border: 1px solid #d1d5db;
	border-radius: 999px;            /* pill shape — looks distinct from body links */
	background-color: #fff;
	font-size: .95rem;
	font-weight: 600;
	color: var(--c-text);
	text-decoration: none;
	line-height: 1.4;
	transition: background .15s, border-color .15s;
}
.entry__cat-link:hover {
	border-color: var(--c-primary);
	background-color: rgba(0, 116, 224, .04);
	color: var(--c-primary);
}
.entry__cat-link:focus-visible {
	border-color: var(--c-primary);
	outline: 3px solid rgba(0, 116, 224, .25);
	outline-offset: 0;
}

/* ============================================================
   Featured image — centred, full column width
   Loaded eagerly because it's the LCP element on a single post.
   ============================================================ */
.entry__featured {
	margin: 1.5rem 0 1.75rem;
	text-align: center;
	width: 100%;
}
/* Reserve 16:9 space BEFORE the image loads — kills the layout shift
   caused by FIFU's external images arriving without dimensions. The
   aspect-ratio property is enough on its own: when the image doesn't
   carry width/height attrs, the browser uses the CSS ratio to lay
   out the box. Once the image arrives, it slots in with no shift. */
.entry__featured-img,
.entry__featured img,
.entry__featured .external-img,
img.external-img {
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	max-width: 100%;
	border-radius: var(--radius-md);
	display: block;
	margin: 0 auto;
	background: #f3f6fa;
}
.entry__featured-caption {
	margin-top: .65rem;
	font-size: .95rem;
	color: var(--c-text-muted);
	font-style: italic;
	text-align: center;
}

/* ============================================================
   In-post search bar (full column width)
   Sits between the featured image and the article body.
   ============================================================ */
.entry__search {
	margin: 1.5rem 0;
	width: 100%;
}
.entry__search .search-form {
	display: flex;
	gap: .5rem;
	width: 100%;
	align-items: stretch;
}
.entry__search .search-form__input {
	flex: 1;
	min-width: 0;                /* allows flex shrink in narrow containers */
	padding: .85rem 1.1rem;
	font-size: 1.05rem;
	border: 1px solid #d1d5db;
	border-radius: 6px;
	background: #fff;
	color: var(--c-text);
	font-family: inherit;
	line-height: 1.4;
}
.entry__search .search-form__input::placeholder { color: var(--c-text-muted); }
.entry__search .search-form__input:focus {
	border-color: var(--c-primary);
	outline: 3px solid rgba(0, 116, 224, .25);
	outline-offset: 0;
}
.entry__search .search-form__submit {
	padding: .85rem 1.75rem;
	background: var(--c-primary);
	color: #fff;
	border: 1px solid var(--c-primary);
	border-radius: 6px;
	font-weight: 700;
	font-size: 1.05rem;
	cursor: pointer;
	font-family: inherit;
	white-space: nowrap;
	transition: background .15s, border-color .15s;
}
.entry__search .search-form__submit:hover {
	background: var(--c-primary-dark);
	border-color: var(--c-primary-dark);
}

/* Narrow viewports — stack search input + button vertically below 480px */
@media (max-width: 480px) {
	.entry__search .search-form { flex-direction: column; }
	.entry__search .search-form__submit { width: 100%; }
}

/* ============================================================
   Post listings (home + archive + search + author)

   Aspect-ratio is enforced on the .home-card__thumb / .archive-card__thumb
   anchor (not on the img), so it works regardless of the image's actual
   dimensions. This is the key piece for Featured Image From URL (FIFU) /
   similar plugins where image dimensions aren't known until network fetch.
   object-fit:cover keeps any source ratio visually correct.
   ============================================================ */
.post-list {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	margin-bottom: 1.5rem;
}
.home-card,
.archive-card {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem;
	padding: 0 0 1.5rem;
	border-bottom: 1px solid var(--c-border);
	contain: layout style paint;
}
@media (min-width: 768px) {
	.home-card, .archive-card { grid-template-columns: 300px 1fr; gap: 1.5rem; }
}
.home-card__thumb, .archive-card__thumb {
	display: block;
	overflow: hidden;
	border-radius: var(--radius-sm);
	aspect-ratio: 16/9;          /* reserves layout space → CLS = 0, even for URL-sourced images */
	background: #f3f6fa;         /* placeholder while remote image loads */
}
.home-card__img, .archive-card__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .3s ease;
}
.home-card__thumb:hover .home-card__img,
.archive-card__thumb:hover .archive-card__img { transform: scale(1.03); }
.home-card__title, .archive-card__title {
	font-size: 1.25rem;
	font-weight: 700;
	margin: 0 0 .5rem;
}
.home-card__title a, .archive-card__title a { color: var(--c-text); text-decoration: none; }
.home-card__title a:hover, .archive-card__title a:hover { color: var(--c-link); }
.home-card__meta, .archive-card__meta {
	color: var(--c-text-muted);
	font-size: .9rem;
	margin: 0 0 .5rem;
}
.home-card__meta a, .archive-card__meta a { color: var(--c-link); }
.home-card__footer { color: var(--c-text-muted); font-size: .9rem; margin: 0; }

/* ============================================================
   Card body wrappers (referenced by content-home / content-author)
   The thumbnail area already has aspect-ratio + object-fit on its
   own classes; these style the text region below.
   ============================================================ */
.home-card__body,
.archive-card__body {
	padding: 1rem 1.1rem 1.25rem;
}

/* Single-post container — the wrapping element for the article content */
.entry {
	font-size: 1rem;
	line-height: 1.7;
	color: var(--c-text);
}

/* Sidebar wrapper */
.widget-area {
	font-size: .95rem;
	line-height: 1.6;
}

/* Empty / fallback states */
.no-comments,
.no-results {
	padding: 1.25rem 1.5rem;
	background: #f3f6fa;
	border-radius: var(--radius-md);
	color: var(--c-text-muted);
	margin: 1rem 0;
	text-align: center;
}

.error-404 {
	padding: 2rem 1.5rem;
	text-align: center;
}
.error-404 .h1 { font-size: 3rem; margin: 0 0 .75rem; color: var(--c-primary); }
.error-404 p { color: var(--c-text-muted); margin: 0 0 1.5rem; }

/* ============================================================
   Post dates — published vs updated
   Updated date is given primary visual weight (freshness matters);
   the originally-published date is secondary.
   ============================================================ */
.entry__meta-dates {
	margin: .25rem 0 1.25rem;
	font-size: .95rem;
	line-height: 1.6;
	color: var(--c-text);
}
.post-date {
	display: inline;
	color: var(--c-text-muted);
}
.post-date time {
	font-variant-numeric: tabular-nums;
}
.post-date__label {
	font-weight: 700;
	color: var(--c-text);
	text-transform: uppercase;
	font-size: .8em;
	letter-spacing: .04em;
	margin-right: .25rem;
}
.post-date--updated {
	color: var(--c-text);
}
.post-date--updated .post-date__label {
	background: #eff7ff;
	color: #003a76;
	padding: 2px 8px;
	border-radius: 4px;
	font-size: .75em;
}
.post-date--published {
	color: var(--c-text-muted);
	font-size: .9em;
}
.post-date--published .post-date__label {
	background: none;
	color: var(--c-text-muted);
	padding: 0;
	font-weight: 600;
}

/* Compact form for cards / lists — no eyebrow background, single line */
.home-card__footer .post-date,
.archive-card__meta .post-date,
.related-card__date .post-date {
	font-size: inherit;
	color: inherit;
}
.home-card__footer .post-date__label,
.archive-card__meta .post-date__label,
.related-card__date .post-date__label {
	background: none;
	padding: 0;
	font-size: .85em;
	font-weight: 700;
	color: var(--c-link);
	text-transform: none;
	letter-spacing: 0;
	margin-right: .15rem;
}
.related-card__date {
	margin: .25rem 0 0;
	font-size: .85rem;
	color: var(--c-text-muted);
}

/* ============================================================
   Author byline at the foot of single posts (.author-bio--mini)
   Intentionally compact — full bio + E-E-A-T detail lives only
   on the dedicated /author/{slug}/ page, so the same content
   doesn't duplicate across every post on the site.
   ============================================================ */
.author-bio {
	background: #f9fafb;                       /* slate-50 — distinct but quiet */
	padding: 1.5rem 1.75rem;
	border-radius: var(--radius-md);
	border: 1px solid #d1d5db;                 /* slate-300 — clearly visible 1px */
	box-shadow: 0 1px 2px rgba(0, 0, 0, .04);  /* whisper of depth */
	content-visibility: auto;
	contain-intrinsic-size: auto 140px;
}
.author-bio--mini {
	display: flex;
	align-items: center;
	gap: 1.35rem;
	flex-wrap: wrap;
}
.author-bio__avatar {
	flex-shrink: 0;
	display: inline-block;
	border-radius: 50%;
	overflow: hidden;
	width: 72px;
	height: 72px;
	/* Double-ring effect: inner white halo + outer slate ring */
	box-shadow: 0 0 0 2px #fff, 0 0 0 3px #d1d5db;
}
.author-bio__img {
	width: 72px;
	height: 72px;
	border-radius: 50%;
	object-fit: cover;
	display: block;
}
.author-bio__meta { flex: 1; min-width: 200px; }

/* "WRITTEN BY" eyebrow stacks ABOVE the name now (block-level) */
.author-bio__by {
	display: block;
	font-size: .8rem;
	font-weight: 700;
	color: var(--c-text-muted);
	text-transform: uppercase;
	letter-spacing: .06em;
	margin: 0 0 .2rem;
}
.author-bio__name {
	margin: 0;
	font-size: 1.35rem;                /* ~21.6px — focal point */
	font-weight: 700;
	color: var(--c-text);
	line-height: 1.3;
}
.author-bio__name a { color: var(--c-text); text-decoration: none; }
.author-bio__name a:hover { color: var(--c-link); text-decoration: underline; }

.author-bio__role {
	margin: .4rem 0 0;
	font-size: 1rem;                   /* ~16px */
	color: var(--c-text-muted);
	line-height: 1.5;
}
.author-bio__cta {
	margin: .65rem 0 0;
	font-size: 1rem;
	font-weight: 600;
}
.author-bio__cta a {
	color: var(--c-link);
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	transition: gap .15s ease;
}
.author-bio__cta a:hover {
	text-decoration: underline;
	gap: .6rem;                        /* arrow nudges right on hover */
}

/* ============================================================
   AUTHOR PAGE — section-by-section design
   Hero → Stats Bar → Sections (About, Expertise, Credentials,
   Articles) → CTA. Full-width layout (no sidebar) so the page
   reads as a focused profile, not a content listing.
   ============================================================ */

/* ---- 1. HERO ---- */
.author-hero {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.5rem;
	text-align: center;
	padding: 1rem 0 .5rem;
}
@media (min-width: 768px) {
	.author-hero {
		flex-direction: row;
		align-items: center;
		text-align: left;
		gap: 2.5rem;
		padding: 1.5rem 0;
	}
}
.author-hero__avatar {
	flex-shrink: 0;
	width: 150px;
	height: 150px;
	border-radius: 50%;
	overflow: hidden;
	background: rgba(255,255,255,.08);
	/* double-ring effect on darker hero bg */
	box-shadow: 0 0 0 4px rgba(255,255,255,.18), 0 0 0 6px rgba(255,255,255,.30);
}
.author-hero__img {
	width: 150px;
	height: 150px;
	border-radius: 50%;
	object-fit: cover;
	display: block;
}
.author-hero__meta { flex: 1; min-width: 0; }
.author-hero__name {
	color: #fff;
	font-size: 2.5rem;
	margin: 0 0 .35rem;
	line-height: 1.15;
	font-weight: 800;
}
@media (min-width: 768px) {
	.author-hero__name { text-align: left; font-size: 3rem; }
}
.author-hero__role {
	color: rgba(255,255,255,.95);
	font-size: 1.2rem;
	font-weight: 600;
	margin: 0 0 1.25rem;
}
.author-hero__social {
	list-style: none;
	padding: 0;
	margin: 1rem 0 0;
	display: flex;
	flex-wrap: wrap;
	gap: .6rem;
	justify-content: center;
}
@media (min-width: 768px) { .author-hero__social { justify-content: flex-start; } }
.author-hero__social-link {
	display: inline-flex;
	align-items: center;
	gap: .55rem;
	padding: .65rem 1.1rem;
	background: rgba(255,255,255,.14);
	color: #fff !important;
	text-decoration: none;
	border-radius: 999px;
	font-size: .95rem;
	font-weight: 600;
	border: 1px solid rgba(255,255,255,.3);
	transition: background .15s, border-color .15s, transform .1s;
}
.author-hero__social-link:hover {
	background: rgba(255,255,255,.25);
	border-color: rgba(255,255,255,.55);
	transform: translateY(-1px);
}
.author-hero__social-icon { display: inline-flex; align-items: center; }
.author-hero__social-icon svg { display: block; }

/* ---- 2. STATS BAR ----
   Floats just below the hero with a slight negative top-margin so it
   visually "bridges" the hero gradient and the white content below. */
.author-stats {
	background: #fff;
	padding: 0;
	margin-top: -1.5rem;
	position: relative;
	z-index: 2;
}
.author-stats__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 0;
	background: #fff;
	border: 1px solid #d1d5db;
	border-radius: var(--radius-md);
	overflow: hidden;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .06);
}
@media (min-width: 768px) {
	.author-stats__grid { grid-template-columns: repeat(4, 1fr); }
}
.author-stat {
	padding: 1.5rem 1.25rem;
	text-align: center;
	border-right: 1px solid #e5e7eb;
	border-bottom: 1px solid #e5e7eb;
}
.author-stat:nth-child(2n) { border-right: 0; }                /* every 2nd item on 2-col */
@media (min-width: 768px) {
	.author-stat:nth-child(2n) { border-right: 1px solid #e5e7eb; }
	.author-stat:last-child { border-right: 0; }
	.author-stat { border-bottom: 0; }
}
.author-stat__num {
	display: block;
	font-size: 2.25rem;
	font-weight: 800;
	color: var(--c-primary);
	line-height: 1;
	margin-bottom: .35rem;
	font-variant-numeric: tabular-nums;
}
.author-stat__label {
	display: block;
	font-size: .9rem;
	color: var(--c-text-muted);
	font-weight: 600;
	letter-spacing: .01em;
}

/* ---- 3-6. AUTHOR-PAGE CONTENT SECTIONS ----
   Each section is its own bordered card with strong heading,
   optional supporting lede, and body. */
.author-page {
	margin-top: 2.5rem;
}
.author-page .author-section {
	background: #fff;
	border: 1px solid var(--c-border);
	border-radius: var(--radius-md);
	padding: 2rem 2.25rem;
	margin-bottom: 1.5rem;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .03);
}
.author-section__head {
	margin-bottom: 1.25rem;
	padding-bottom: 1rem;
	border-bottom: 1px solid var(--c-border);
}
.author-section__title {
	font-size: 1.6rem;
	font-weight: 700;
	margin: 0;
	color: var(--c-text);
	line-height: 1.3;
}
.author-section__lede {
	margin: .5rem 0 0;
	font-size: 1rem;
	color: var(--c-text-muted);
	line-height: 1.5;
}
.author-section__body {
	color: var(--c-text);
	line-height: 1.75;
	font-size: 1.1rem;
}
.author-section__body p { margin: 0 0 1rem; }
.author-section__body p:last-child { margin-bottom: 0; }

/* Credentials body: each line of the textarea becomes a checkmark bullet */
.author-section__body--creds p {
	position: relative;
	padding-left: 1.85rem;
	margin-bottom: .75rem;
}
.author-section__body--creds p::before {
	content: "";
	position: absolute;
	left: 0;
	top: .35rem;
	width: 1.25rem;
	height: 1.25rem;
	background-color: var(--c-primary);
	-webkit-mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>') no-repeat center / contain;
	        mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>') no-repeat center / contain;
}

/* Expertise — pill tags */
.author-section__tags {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	gap: .6rem;
}
.author-section__tags li {
	display: inline-block;
	padding: .55rem 1rem;
	background: #eff7ff;
	color: #003a76;
	border-radius: 999px;
	font-size: 1rem;
	font-weight: 600;
	border: 1px solid #cfe2ff;
	transition: background .15s, border-color .15s, transform .1s;
}
.author-section__tags li:hover {
	background: #cfe2ff;
	border-color: #99c2f0;
	transform: translateY(-1px);
}

/* Articles grid — replaces the stacked list */
.author-posts-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;
}
@media (min-width: 600px) { .author-posts-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 992px) { .author-posts-grid { grid-template-columns: repeat(3, 1fr); } }
/* Overrides for archive-card when inside the grid */
.author-posts-grid .archive-card {
	display: flex;
	flex-direction: column;
	gap: 0;
	padding: 0;
	border: 1px solid var(--c-border);
	border-radius: var(--radius-md);
	background: #fff;
	overflow: hidden;
	transition: border-color .15s, transform .1s, box-shadow .15s;
}
.author-posts-grid .archive-card:hover {
	border-color: #cfe2ff;
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, .06);
}
.author-posts-grid .archive-card__thumb {
	display: block;
	aspect-ratio: 16/9;
	overflow: hidden;
	background: #f3f6fa;
}
.author-posts-grid .archive-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.author-posts-grid .archive-card__body { padding: 1rem 1.15rem 1.15rem; }
.author-posts-grid .archive-card__title {
	font-size: 1.1rem;
	margin: 0 0 .5rem;
	line-height: 1.35;
}
.author-posts-grid .archive-card__title a { color: var(--c-text); text-decoration: none; }
.author-posts-grid .archive-card__title a:hover { color: var(--c-link); }
.author-posts-grid .archive-card__meta {
	font-size: .9rem;
	color: var(--c-text-muted);
	margin: 0;
}

/* ---- 7. CTA ---- */
.author-cta {
	background: linear-gradient(135deg, var(--c-primary) 0%, var(--c-primary-dark) 100%);
	color: #fff;
	border-radius: var(--radius-md);
	padding: 2.5rem 2.25rem;
	text-align: center;
	margin-top: 2rem;
}
.author-cta__title {
	color: #fff;
	font-size: 1.75rem;
	margin: 0 0 .65rem;
	font-weight: 700;
}
.author-cta__lede {
	color: rgba(255,255,255,.92);
	font-size: 1.1rem;
	margin: 0 0 1.5rem;
	line-height: 1.5;
}
.author-cta__buttons {
	display: flex;
	gap: .85rem;
	justify-content: center;
	flex-wrap: wrap;
}
.author-cta__btn {
	display: inline-flex;
	align-items: center;
	gap: .55rem;
	padding: .85rem 1.75rem;
	border-radius: 6px;
	font-weight: 700;
	font-size: 1rem;
	text-decoration: none;
	border: 2px solid transparent;
	transition: background .15s, color .15s, border-color .15s, transform .1s;
}
.author-cta__btn--primary {
	background: #fff;
	color: var(--c-primary) !important;
	border-color: #fff;
}
.author-cta__btn--primary:hover {
	background: rgba(255,255,255,.9);
	transform: translateY(-1px);
}
.author-cta__btn--secondary {
	background: transparent;
	color: #fff !important;
	border-color: rgba(255,255,255,.6);
}
.author-cta__btn--secondary:hover {
	background: rgba(255,255,255,.12);
	border-color: #fff;
	transform: translateY(-1px);
}
.author-cta__btn svg { display: block; }

/* Mobile tightening */
@media (max-width: 600px) {
	.author-page .author-section { padding: 1.5rem 1.25rem; }
	.author-section__title { font-size: 1.35rem; }
	.author-cta { padding: 1.75rem 1.25rem; }
	.author-cta__title { font-size: 1.4rem; }
}

/* ============================================================
   Related posts
   ============================================================ */
.related-posts { margin: 2rem 0; content-visibility: auto; contain-intrinsic-size: auto 320px; }
.related-posts__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem;
}
@media (min-width: 768px) { .related-posts__grid { grid-template-columns: repeat(3, 1fr); } }
.related-card {
	display: flex;
	flex-direction: column;
	gap: .5rem;
	background: #fff;
	border: 1px solid var(--c-border);
	border-radius: var(--radius-sm);
	padding: .75rem;
	contain: layout style paint;
}
.related-card__thumb {
	display: block;
	overflow: hidden;
	border-radius: 4px;
	aspect-ratio: 16/9;
	background: #f3f6fa;
}
.related-card__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.related-card__title { margin: 0; font-size: .95rem; font-weight: 600; }
.related-card__title a { color: var(--c-text); text-decoration: none; }
.related-card__title a:hover { color: var(--c-link); }

/* ============================================================
   Sidebar
   ============================================================ */
.content-sidebar { font-size: .95rem; }
.sidebar-block {
	margin-bottom: 1.5rem;
	background: #fff;
	border: 1px solid var(--c-border);
	border-radius: var(--radius-sm);
	padding: 1rem;
}
.sidebar-block.sidebar-block--search { background: transparent; border: 0; padding: 0; }
.sidebar-banner {
	border: 1px solid var(--c-border);
	border-radius: var(--radius-sm);
	overflow: hidden;
	margin-bottom: 1.5rem;
	text-align: center;
}
.sidebar-banner img { display: block; width: 100%; height: auto; }
.widget-title { font-size: 1.05rem; font-weight: 700; margin: 0 0 .75rem; color: var(--c-text); }
.widget ul { list-style: none; padding: 0; margin: 0; }
.widget li { padding: .35rem 0; border-bottom: 1px solid var(--c-border); }
.widget li:last-child { border-bottom: 0; }
.widget a { color: var(--c-link); text-decoration: none; }
.widget a:hover { text-decoration: underline; }

/* ============================================================
   Pagination
   ============================================================ */
.pagination {
	content-visibility: auto;
	contain-intrinsic-size: auto 80px;
	display: flex;
	justify-content: center;
	margin: 2rem 0 0;
}
.pagination ul { display: flex; flex-wrap: wrap; gap: .25rem; list-style: none; padding: 0; margin: 0; }
.pagination a, .pagination span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	padding: .45rem .8rem;
	border: 1px solid var(--c-border);
	border-radius: 4px;
	text-decoration: none;
	color: var(--c-link);
	background: #fff;
}
.pagination a:hover { background: var(--c-primary); color: #fff; border-color: var(--c-primary); }
.pagination .active span { background: var(--c-primary); color: #fff; border-color: var(--c-primary); font-weight: 700; }

/* ============================================================
   Comments
   ============================================================ */
.comments-area {
	content-visibility: auto;
	contain-intrinsic-size: auto 500px;
	margin-top: 2rem;
}
.comment-list { list-style: none; padding: 0; margin: 0 0 2rem; }
.comment-list .comment-body { padding: 1rem; background: #fff; border: 1px solid var(--c-border); border-radius: var(--radius-sm); margin-bottom: 1rem; }
.comment-form textarea, .comment-form input[type=text], .comment-form input[type=email] {
	width: 100%;
	padding: .55rem .75rem;
	border: 1px solid #ced4da;
	border-radius: 4px;
	font: inherit;
}
.comment-form .submit {
	background: var(--c-primary);
	color: #fff;
	border: 0;
	padding: .6rem 1.5rem;
	border-radius: 4px;
	font-weight: 700;
	cursor: pointer;
}

/* ============================================================
   Back to top
   ============================================================ */
.back-to-top {
	position: fixed;
	right: 1rem;
	bottom: 1rem;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--c-primary);
	color: #fff;
	border: 0;
	font-size: 1.5rem;
	font-weight: 700;
	cursor: pointer;
	opacity: 0;
	transform: translateY(10px);
	transition: opacity .25s, transform .25s, background .2s;
	z-index: 99;
	box-shadow: var(--shadow-md);
	content-visibility: auto;
	contain-intrinsic-size: auto 44px;
}
.back-to-top.is-visible { opacity: 1; transform: translateY(0); }
.back-to-top:hover { background: var(--c-primary-dark); }

/* ============================================================
   Bootstrap-compat utility subset (used by classic post HTML)
   ============================================================
   These utilities are used both by the navbar (critical) and by
   blog post content (not critical). The navbar-specific ones are
   in the critical block above; the rest live here.
   ============================================================ */
.row { display: flex; flex-wrap: wrap; margin-left: -.75rem; margin-right: -.75rem; }
.row > [class*="col-"] { padding-left: .75rem; padding-right: .75rem; }

/* 12-column grid system — Bootstrap-compatible naming so existing markup
   (footer .col-lg-3, .col-6) and new markup (single-post .col-lg-10
   .offset-lg-1) both Just Work. Mobile-first: every col-* defaults to
   full-width on mobile, then breakpoints narrow it. */
[class*="col-"] { flex: 0 0 100%; max-width: 100%; min-width: 0; }

/* Unprefixed col-* — apply at all viewports */
.col-1  { flex: 0 0 8.3333%;  max-width: 8.3333%; }
.col-2  { flex: 0 0 16.6667%; max-width: 16.6667%; }
.col-3  { flex: 0 0 25%;      max-width: 25%; }
.col-4  { flex: 0 0 33.3333%; max-width: 33.3333%; }
.col-5  { flex: 0 0 41.6667%; max-width: 41.6667%; }
.col-6  { flex: 0 0 50%;      max-width: 50%; }
.col-7  { flex: 0 0 58.3333%; max-width: 58.3333%; }
.col-8  { flex: 0 0 66.6667%; max-width: 66.6667%; }
.col-9  { flex: 0 0 75%;      max-width: 75%; }
.col-10 { flex: 0 0 83.3333%; max-width: 83.3333%; }
.col-11 { flex: 0 0 91.6667%; max-width: 91.6667%; }
.col-12 { flex: 0 0 100%;     max-width: 100%; }

/* Tablet ≥768px */
@media (min-width: 768px) {
	.col-md-1  { flex: 0 0 8.3333%;  max-width: 8.3333%; }
	.col-md-2  { flex: 0 0 16.6667%; max-width: 16.6667%; }
	.col-md-3  { flex: 0 0 25%;      max-width: 25%; }
	.col-md-4  { flex: 0 0 33.3333%; max-width: 33.3333%; }
	.col-md-5  { flex: 0 0 41.6667%; max-width: 41.6667%; }
	.col-md-6  { flex: 0 0 50%;      max-width: 50%; }
	.col-md-7  { flex: 0 0 58.3333%; max-width: 58.3333%; }
	.col-md-8  { flex: 0 0 66.6667%; max-width: 66.6667%; }
	.col-md-9  { flex: 0 0 75%;      max-width: 75%; }
	.col-md-10 { flex: 0 0 83.3333%; max-width: 83.3333%; }
	.col-md-11 { flex: 0 0 91.6667%; max-width: 91.6667%; }
	.col-md-12 { flex: 0 0 100%;     max-width: 100%; }
	.offset-md-1 { margin-left: 8.3333%; }
	.offset-md-2 { margin-left: 16.6667%; }
	.offset-md-3 { margin-left: 25%; }
}

/* Desktop ≥992px */
@media (min-width: 992px) {
	.col-lg-1  { flex: 0 0 8.3333%;  max-width: 8.3333%; }
	.col-lg-2  { flex: 0 0 16.6667%; max-width: 16.6667%; }
	.col-lg-3  { flex: 0 0 25%;      max-width: 25%; }
	.col-lg-4  { flex: 0 0 33.3333%; max-width: 33.3333%; }
	.col-lg-5  { flex: 0 0 41.6667%; max-width: 41.6667%; }
	.col-lg-6  { flex: 0 0 50%;      max-width: 50%; }
	.col-lg-7  { flex: 0 0 58.3333%; max-width: 58.3333%; }
	.col-lg-8  { flex: 0 0 66.6667%; max-width: 66.6667%; }
	.col-lg-9  { flex: 0 0 75%;      max-width: 75%; }
	.col-lg-10 { flex: 0 0 83.3333%; max-width: 83.3333%; }
	.col-lg-11 { flex: 0 0 91.6667%; max-width: 91.6667%; }
	.col-lg-12 { flex: 0 0 100%;     max-width: 100%; }
	.offset-lg-1 { margin-left: 8.3333%; }
	.offset-lg-2 { margin-left: 16.6667%; }
	.offset-lg-3 { margin-left: 25%; }
}
[class*="col-"] { width: 100%; }
@media (min-width: 576px) {
	.col-6 { width: 50%; }
	.col-12 { width: 100%; }
}
@media (min-width: 768px) {
	.col-md-4 { width: 33.333%; }
	.col-md-6 { width: 50%; }
	.col-md-8 { width: 66.667%; }
}
@media (min-width: 992px) {
	.col-lg-3 { width: 25%; }
	.col-lg-4 { width: 33.333%; }
	.col-lg-6 { width: 50%; }
	.col-lg-7 { width: 58.333%; }
	.col-lg-8 { width: 66.667%; }
	.col-lg-9 { width: 75%; }
	.col-lg-10 { width: 83.333%; }
	.col-lg-12 { width: 100%; }
}
@media (min-width: 1200px) {
	.col-xl-6 { width: 50%; }
}

.d-flex { display: flex; }
.d-md-flex { display: block; }
@media (min-width: 768px) { .d-md-flex { display: flex; } }
.flex-shrink-0 { flex-shrink: 0; }
.flex-grow-1 { flex-grow: 1; min-width: 0; }
.align-items-center { align-items: center; }
.align-self-start { align-self: flex-start; }
.justify-content-between { justify-content: space-between; }
.justify-content-center { justify-content: center; }
.justify-content-end { justify-content: flex-end; }
.text-center { text-align: center; }
.text-start { text-align: left; }
.text-end { text-align: right; }
@media (min-width: 992px) {
	.text-lg-start { text-align: left; }
	.text-lg-end { text-align: right; }
}
@media (min-width: 768px) {
	.text-md-start { text-align: left; }
}
.text-white { color: #fff; }
.fw-bold { font-weight: 700; }
.fw-normal { font-weight: 400; }
.h1, .h2, .h3, .h4, .h5, .h6 { font-family: var(--font-display); line-height: 1.25; margin: 0 0 .75em; }
.h1 { font-size: 2rem; font-weight: 700; }
.h2 { font-size: 1.6rem; font-weight: 700; }
.h3 { font-size: 1.3rem; font-weight: 700; }
.h4 { font-size: 1.15rem; font-weight: 700; }
.h5 { font-size: 1.05rem; font-weight: 700; }
.h6 { font-size: 1rem; font-weight: 700; }
.mb-0 { margin-bottom: 0 !important; }
.mb-2 { margin-bottom: .5rem; }
.mb-3 { margin-bottom: 1rem; }
.mb-4 { margin-bottom: 1.5rem; }
.mb-5 { margin-bottom: 3rem; }
.mt-3 { margin-top: 1rem; }
.mt-4 { margin-top: 1.5rem; }
.my-3 { margin-top: 1rem; margin-bottom: 1rem; }
.my-4 { margin-top: 1.5rem; margin-bottom: 1.5rem; }
.ms-3 { margin-left: 1rem; }
@media (min-width: 768px) { .ms-md-3 { margin-left: 1rem; } }
.pb-2 { padding-bottom: .5rem; }
.pt-3 { padding-top: 1rem; }
.pt-5 { padding-top: 3rem; }
.py-2 { padding-top: .5rem; padding-bottom: .5rem; }
.py-3 { padding-top: 1rem; padding-bottom: 1rem; }
.py-5 { padding-top: 3rem; padding-bottom: 3rem; }
.p-3 { padding: 1rem; }
.p-5 { padding: 3rem; }
@media (min-width: 992px) { .p-lg-5 { padding: 3rem; } .p-lg-0 { padding: 0; } }
.img-fluid { max-width: 100%; height: auto; }
.shadow { box-shadow: var(--shadow-md); }
.border { border: 1px solid var(--c-border); }
.bg-light { background: #f8f9fa; }
.bg-white { background: #fff; }
.bg-primary { background-color: var(--c-primary); }
.bg-darkslategray { background-color: darkslategray; }
.rounded-circle { border-radius: 50%; }

/* ============================================================
   Embed wrapper (16:9 responsive iframes)
   ============================================================ */
.embed-container, .embed-responsive {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 16/9;
	overflow: hidden;
	background: #000;
	border-radius: var(--radius-sm);
	margin: 1.5rem 0;
}
.embed-container > iframe,
.embed-responsive > iframe,
.embed-responsive-item {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* @critical-start */
/* ============================================================
   Sitewide footer
   ============================================================
   Loaded as critical because the footer-link contrast rules need
   to apply on first paint, not after the async stylesheet arrives
   (which can be served stale from CDN). The solid background-color
   gives Lighthouse a reliable base for contrast calculations.
   ============================================================ */
/* ============================================================
   FOOTER — professional, properly-sized
   Structure (left → right):
     • Brand column (40% on desktop): logo, tagline, social icons
     • Company links (20%)
     • Support links (20%)
     • Contact column (40%): email, location, hours + CTA button
   Bottom bar: copyright | secondary links | "Since 2013" tagline
   All link/text sizes bumped to ~16-17px for readability on dark bg.
   ============================================================ */
.footer {
	background-color: #0F3664;             /* literal — axe-core fails to resolve var() here, causing false-positive contrast flags */
	color: #f1f4f7;
	margin-top: 3rem;
	font-size: 1rem;
	line-height: 1.6;
	/* NOTE: content-visibility: auto was removed here. It caused axe-core
	   to read the body's background (#f9fcff) instead of the footer's,
	   reporting a false 1.07:1 contrast ratio on every footer text element.
	   The footer is short — the rendering saving from cv:auto was minor. */
}
.footer .container {
	padding-top: 3.5rem;
	padding-bottom: 0;
}
.footer__main {
	padding-bottom: 2.5rem;
}

/* ---- Reset link/text colour for whole footer ---- */
.footer a,
.footer .footer-dark__link {
	color: var(--c-footer-link);
	text-decoration: none;
	transition: color .15s;
}
.footer a:hover,
.footer .footer-dark__link:hover {
	color: #ffffff;
	text-decoration: none;
}
.footer p,
.footer li,
.footer span { color: #f1f4f7; }

/* ---- Each column gets vertical breathing room on mobile ---- */
.footer__col {
	margin-bottom: 2rem;
}
@media (min-width: 992px) {
	.footer__col { margin-bottom: 0; }
}

/* ---- Brand column (logo + tagline + social) ---- */
.footer__brand .footer__logo {
	display: inline-block;
	margin-bottom: 1.25rem;
}
.footer__brand .footer__logo svg {
	width: 130px;
	height: auto;
	display: block;
}
.footer__tagline {
	color: var(--c-footer-text);
	font-size: 1rem;
	line-height: 1.7;
	margin: 0 0 1.5rem;
	max-width: 380px;
}

/* ---- Social icons row ---- */
.footer__social {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	gap: .65rem;
	flex-wrap: wrap;
}
.footer__social li { display: inline-flex; }
.footer__social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .08);
	border: 1px solid rgba(255, 255, 255, .12);
	color: #cfe2ff !important;
	transition: background .15s, border-color .15s, color .15s, transform .1s;
}
.footer__social a:hover {
	background: var(--c-primary);
	border-color: var(--c-primary);
	color: #fff !important;
	transform: translateY(-2px);
}
.footer__social svg { display: block; }

/* ---- Section headings (Company / Support / Get in touch) ---- */
.footer__heading {
	color: #ffffff;
	font-size: 1.05rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .06em;
	margin: 0 0 1.25rem;
	padding-bottom: .65rem;
	border-bottom: 1px solid rgba(255, 255, 255, .12);
	display: inline-block;
	min-width: 80px;
}

/* ---- Standard link lists (Company / Support) ---- */
.footer__links {
	list-style: none;
	padding: 0;
	margin: 0;
}
.footer__links li {
	margin: 0;
	padding: 0;
	border: 0;
}
.footer__links a {
	display: inline-block;
	padding: .45rem 0;
	font-size: 1rem;
	line-height: 1.5;
	position: relative;
	color: var(--c-footer-link);
}
.footer__links a::before {
	content: "›";
	color: var(--c-yellow);
	font-weight: 700;
	margin-right: .5rem;
	display: inline-block;
	transition: transform .15s;
}
.footer__links a:hover::before {
	transform: translateX(3px);
}

/* ---- Contact column (icon + text rows + CTA) ---- */
.footer__contact-list {
	list-style: none;
	padding: 0;
	margin: 0 0 1.5rem;
}
.footer__contact-list li {
	display: flex;
	align-items: flex-start;
	gap: .75rem;
	padding: .55rem 0;
	font-size: 1rem;
	line-height: 1.5;
}
.footer__contact-icon {
	flex-shrink: 0;
	width: 36px;
	height: 36px;
	border-radius: 8px;
	background: rgba(255, 255, 255, .08);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--c-yellow);
	margin-top: -.2rem;
}
.footer__contact-icon svg { display: block; }
.footer__contact-list a {
	color: #f1f4f7;
	font-weight: 600;
	font-size: 1.05rem;
	padding-top: .35rem;
}
.footer__contact-list a:hover { color: #fff; }
.footer__contact-list span { color: #f1f4f7; padding-top: .35rem; }

/* ---- Contact CTA button ---- */
.footer__cta {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	padding: .75rem 1.5rem;
	background: var(--c-yellow);
	color: var(--c-footer-bg) !important;
	border-radius: 6px;
	font-weight: 700;
	font-size: 1rem;
	text-decoration: none;
	transition: background .15s, transform .1s;
	margin-top: .25rem;
}
.footer__cta:hover {
	background: var(--c-yellow-dark, #ddc800);
	color: var(--c-footer-bg) !important;
	transform: translateY(-1px);
}
.footer__cta svg { display: block; transition: transform .15s; }
.footer__cta:hover svg { transform: translateX(3px); }

/* ---- Bottom bar ---- */
.footer__bottom {
	padding: 1.5rem 0;
	background-color: #0F3664;       /* explicit so axe-core never falls back to body bg */
	border-top: 1px solid rgba(255, 255, 255, .12);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}
.footer__copyright {
	color: #f1f4f7;
	font-size: .95rem;
	margin: 0;
	font-weight: 500;
}
.footer__bottom-links {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	gap: 1.5rem;
	flex-wrap: wrap;
}
.footer__bottom-links li { padding: 0; border: 0; }
.footer__bottom-links a {
	font-size: .95rem;
	color: #f1f4f7;
	font-weight: 500;
}
.footer__bottom-links a:hover { color: #fff; }
.footer__since {
	color: #e5efff;
	font-size: .9rem;
	margin: 0;
	font-style: italic;
}

/* Mobile tightening — stack everything */
@media (max-width: 991px) {
	.footer .container { padding-top: 2.5rem; }
	.footer__main { padding-bottom: 1.5rem; }
	.footer__bottom {
		flex-direction: column;
		align-items: center;
		text-align: center;
		gap: .75rem;
		padding: 1.25rem 0;
	}
	.footer__bottom-links { justify-content: center; }
	.footer__social { justify-content: flex-start; }
	.footer__heading { min-width: 0; }
}
@media (max-width: 575px) {
	.footer { font-size: .95rem; }
	.footer__tagline { font-size: .95rem; }
	.footer__contact-list li { font-size: .95rem; }
}

.list-right-footer { list-style: none; padding: 0; margin: 0; }
.list-right-footer li { padding: .35rem 0 .35rem 1.2em; position: relative; line-height: 1.5; border: 0; }
.list-right-footer li::before {
	content: "›";
	position: absolute;
	left: 0;
	color: var(--c-yellow);
	font-weight: 700;
	font-size: 1.1em;
}
/* @critical-end */

/* ============================================================
   Content classes used by post HTML (Turgs convention)
   ============================================================
   These are the inline classes editors use when writing posts.
   All colors verified WCAG AA on every card background.
   ============================================================ */

/* ----- Themed lists ----- */
.list-right { list-style: none; padding: 0; margin: 1rem 0; }
.list-right li { padding: .35rem 0 .35rem 1.5em; position: relative; line-height: 1.5; }
.list-right li:before {
	content: "›";
	position: absolute;
	left: 0;
	color: var(--c-primary);
	font-weight: 700;
	font-size: 1.2em;
	line-height: 1.4;
}

/* ----- Card callouts ----- */
/* 5 colours × 6 styles = 30 variants. Text colours pass AA on every bg. */
.card-blue, .card-blue-dotted, .card-blue-dashed,
.card-blue-border, .card-blue-border-dotted, .card-blue-border-dashed { color: #003a76; }
.card-yellow, .card-yellow-dotted, .card-yellow-dashed,
.card-yellow-border, .card-yellow-border-dotted, .card-yellow-border-dashed { color: #664d03; }
.card-green, .card-green-dotted, .card-green-dashed,
.card-green-border, .card-green-border-dotted, .card-green-border-dashed { color: #0f4019; }
.card-orange, .card-orange-dotted, .card-orange-dashed,
.card-orange-border, .card-orange-border-dotted, .card-orange-border-dashed { color: #7a3e15; }
.card-red, .card-red-dotted, .card-red-dashed,
.card-red-border, .card-red-border-dotted, .card-red-border-dashed { color: #58151c; }

.card-blue, .card-blue-dotted, .card-blue-dashed,
.card-blue-border, .card-blue-border-dotted, .card-blue-border-dashed,
.card-yellow, .card-yellow-dotted, .card-yellow-dashed,
.card-yellow-border, .card-yellow-border-dotted, .card-yellow-border-dashed,
.card-green, .card-green-dotted, .card-green-dashed,
.card-green-border, .card-green-border-dotted, .card-green-border-dashed,
.card-orange, .card-orange-dotted, .card-orange-dashed,
.card-orange-border, .card-orange-border-dotted, .card-orange-border-dashed,
.card-red, .card-red-dotted, .card-red-dashed,
.card-red-border, .card-red-border-dotted, .card-red-border-dashed {
	padding: 1rem 1.25rem;
	border-radius: 6px;
	margin: 1rem 0;
}

/* Filled + shadow border */
.card-blue   { background: #eff7ff; box-shadow: 0 0 5px #007dff; }
.card-yellow { background: #fff3cd; box-shadow: 0 0 5px #d29e00; }
.card-green  { background: #d4edda; box-shadow: 0 0 5px #00841e; }
.card-orange { background: #fde7d3; box-shadow: 0 0 5px #bf5001; }
.card-red    { background: #f8d7da; box-shadow: 0 0 5px #bb0014; }
/* Filled + dotted */
.card-blue-dotted   { background: #eff7ff; border: 2px dotted #007dff; }
.card-yellow-dotted { background: #fff3cd; border: 2px dotted #d29e00; }
.card-green-dotted  { background: #d4edda; border: 2px dotted #00841e; }
.card-orange-dotted { background: #fde7d3; border: 2px dotted #bf5001; }
.card-red-dotted    { background: #f8d7da; border: 2px dotted #bb0014; }
/* Filled + dashed */
.card-blue-dashed   { background: #eff7ff; border: 2px dashed #007dff; }
.card-yellow-dashed { background: #fff3cd; border: 2px dashed #d29e00; }
.card-green-dashed  { background: #d4edda; border: 2px dashed #00841e; }
.card-orange-dashed { background: #fde7d3; border: 2px dashed #bf5001; }
.card-red-dashed    { background: #f8d7da; border: 2px dashed #bb0014; }
/* Outline only */
.card-blue-border   { background: #fff; border: 2px solid #007dff; }
.card-yellow-border { background: #fff; border: 2px solid #d29e00; }
.card-green-border  { background: #fff; border: 2px solid #00841e; }
.card-orange-border { background: #fff; border: 2px solid #bf5001; }
.card-red-border    { background: #fff; border: 2px solid #bb0014; }
.card-blue-border-dotted   { background: #fff; border: 2px dotted #007dff; }
.card-yellow-border-dotted { background: #fff; border: 2px dotted #d29e00; }
.card-green-border-dotted  { background: #fff; border: 2px dotted #00841e; }
.card-orange-border-dotted { background: #fff; border: 2px dotted #bf5001; }
.card-red-border-dotted    { background: #fff; border: 2px dotted #bb0014; }
.card-blue-border-dashed   { background: #fff; border: 2px dashed #007dff; }
.card-yellow-border-dashed { background: #fff; border: 2px dashed #d29e00; }
.card-green-border-dashed  { background: #fff; border: 2px dashed #00841e; }
.card-orange-border-dashed { background: #fff; border: 2px dashed #bf5001; }
.card-red-border-dashed    { background: #fff; border: 2px dashed #bb0014; }

/* ----- Blockquotes (Turgs style) ----- */
.blockquote-wrapper {
	margin: 2.5rem 0;
}
.blockquote {
	background: #eff7ff;
	border-left: 5px solid var(--c-primary);
	padding: 1.5rem 2rem;
	border-radius: 0 var(--radius-md) var(--radius-md) 0;
	font-style: italic;
	color: #1f2937;
	margin: 0;
	position: relative;
}
.blockquote p.h1, .blockquote p.h4 { font-style: italic; color: #1f2937; }
.blockquote p.h1 { font-size: 1.5rem; margin-bottom: .5rem; font-weight: 600; }
.blockquote p.h4 { font-size: 1rem; color: var(--c-text-muted); margin: 0; font-style: normal; }
.blockquote:after {
	content: "\201D";
	position: absolute;
	right: 1rem;
	top: -.5rem;
	font-size: 4rem;
	color: var(--c-primary);
	opacity: .3;
	line-height: 1;
}
.blockquote-wrapper-2 { margin: 2.5rem 0; }
.blockquote-2 {
	background: var(--c-footer-bg);
	color: #fff;
	padding: 2rem;
	border-radius: var(--radius-md);
	font-style: italic;
}
.blockquote-2 p.h1 { font-size: 1.4rem; color: #fff; margin: 0 0 .5rem; }
.blockquote-2 p.h1:after { content: ""; display: block; width: 60px; height: 2px; background: var(--c-yellow); margin-top: .75rem; }
.blockquote-2 h1:before { content: ""; }

/* ----- Buttons (Turgs accent) ----- */
.btn-live, .btn-yellow {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	background: var(--c-yellow);
	color: #000;
	border: 1px solid var(--c-yellow);
	padding: .55rem 1rem;
	border-radius: 999px;
	font-weight: 700;
	text-decoration: none;
}
.btn-live:hover, .btn-yellow:hover { background: var(--c-yellow-dark); border-color: var(--c-yellow-dark); color: #000; }
.btn { display: inline-flex; align-items: center; gap: .35rem; padding: .55rem 1rem; border-radius: 6px; text-decoration: none; cursor: pointer; }
.btn-secondary { background: var(--c-text-muted); color: #fff; border: 1px solid var(--c-text-muted); }
.btn-secondary:hover { background: #374151; color: #fff; }

/* ----- Tabs ----- */
.nav-link[data-bs-toggle="tab"] {
	display: inline-block;
	padding: .65rem 2rem;
	color: #5a5a5a !important;
	background: transparent;
	border: 0;
	border-bottom: 2px solid #5a5a5a;
	border-radius: 10px 10px 0 0;
	font-weight: 700;
	text-decoration: none;
	cursor: pointer;
}
.nav-link[data-bs-toggle="tab"]:hover { color: #003a76 !important; }
.nav-link[data-bs-toggle="tab"].active,
.nav-link[data-bs-toggle="tab"][aria-selected="true"] {
	color: #003a76 !important;
	background: #cfe2ff !important;
	border-bottom: 3px solid #003a76 !important;
}
.tab-content > .tab-pane { display: none; }
.tab-content > .tab-pane.active,
.tab-content > .tab-pane.show { display: block; }

/* ----- Table of Contents ----- */
.table-of-content {
	background: rgba(0, 116, 224, .04);
	border: 1px solid #cfe2ff;
	padding: 1.25rem 1.5rem;
	border-radius: var(--radius-md);
	margin: 1.5rem 0;
}
.table-of-content ol,
.table-of-content ul,
.table-of-content nav { margin: .5rem 0 0; padding-left: 1.25rem; }
.table-of-content li { margin: .35rem 0; line-height: 1.5; }
.table-of-content a { color: var(--c-link); text-decoration: none; }
.table-of-content a:hover { text-decoration: underline; }

/* Title row needs to host the toggle button — make it flex */
.table-of-content h2,
.table-of-content h3,
.table-of-content h4,
.table-of-content .toc-title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: 0 0 .25rem;
	font-size: 1.2rem;
	gap: .75rem;
}

/* Toggle button — injected by theme.js on every .table-of-content block */
.toc-toggle {
	background: #fff;
	color: var(--c-link);
	border: 1px solid #cfe2ff;
	padding: .35rem .75rem;
	border-radius: 6px;
	font-size: .85rem;
	font-weight: 600;
	cursor: pointer;
	font-family: inherit;
	line-height: 1.4;
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	transition: background .15s, border-color .15s, color .15s;
}
.toc-toggle:hover {
	background: var(--c-primary);
	border-color: var(--c-primary);
	color: #fff;
}
.toc-toggle:focus-visible {
	outline: 3px solid rgba(0, 116, 224, .25);
	outline-offset: 0;
}
/* Add a chevron icon that flips when collapsed */
.toc-toggle::after {
	content: "";
	width: 10px;
	height: 6px;
	background-color: currentColor;
	-webkit-mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 7"><path d="M1 1l5 5 5-5" stroke="black" stroke-width="1.5" fill="none" stroke-linecap="round"/></svg>') no-repeat center / contain;
	        mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 7"><path d="M1 1l5 5 5-5" stroke="black" stroke-width="1.5" fill="none" stroke-linecap="round"/></svg>') no-repeat center / contain;
	transition: transform .2s;
}
.toc-toggle[aria-expanded="false"]::after {
	transform: rotate(-90deg);
}
/* Collapsed state — tighter padding when only the title is visible */
.table-of-content--collapsed {
	padding-bottom: 1.25rem;
}

/* ----- imggback (author bio bg variant) ----- */
.imggback {
	background: linear-gradient(135deg, #eff7ff 0%, #cfe2ff 100%);
	background-color: #eff7ff;
	padding: 1.5rem;
	border-radius: var(--radius-md);
}

/* ============================================================
   Print
   ============================================================ */
@media print {
	.navbar, .footer, .back-to-top, .sidebar, .related-posts, .providesupport { display: none !important; }
	.content-card { box-shadow: none; padding: 0; }
}

/* ============================================================
   COMPATIBILITY LAYER
   ============================================================
   All classes carried over from the original Turgs style.css so
   existing blog posts and pages render unchanged. Loaded async
   (not in @critical) since these are content styles, not first-
   paint critical. Colours adjusted where the original failed
   WCAG AA — those changes flagged inline.
   ============================================================ */

/* ----- WordPress core (image alignment + caption + gallery) ----- */
.alignnone { margin: 5px 20px 20px 0; height: auto; }
.aligncenter, div.aligncenter { display: block; margin: 5px auto; height: auto; }
.alignright { float: right; margin: 5px 0 20px 20px; height: auto; }
.alignleft  { float: left;  margin: 5px 20px 20px 0; }
a img.alignright  { float: right; margin: 5px 0 20px 20px; }
a img.alignnone   { margin: 5px 20px 20px 0; }
a img.alignleft   { float: left; margin: 5px 20px 20px 0; }
a img.aligncenter { display: block; margin-left: auto; margin-right: auto; }
.wp-caption {
	background: #fff;
	border: 1px solid #f0f0f0;
	max-width: 96%;
	padding: 5px 3px 10px;
	text-align: center;
}
.wp-caption.alignnone  { margin: 5px 20px 20px 0; }
.wp-caption.alignleft  { margin: 5px 20px 20px 0; }
.wp-caption.alignright { margin: 5px 0 20px 20px; }
.wp-caption img { border: 0; height: auto; margin: 0; max-width: 98.5%; padding: 0; width: auto; }
.wp-caption p.wp-caption-text { font-size: 11px; line-height: 17px; margin: 0; padding: 0 4px 5px; }
.gallery-caption { display: block; }
.wp-post-image, .wp-block-image img { height: auto; }
.bypostauthor { display: block; }
.avatar { border: 1px solid #ccc; border-radius: 50%; }

/* Screen reader text + focusable variant */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	-webkit-clip-path: inset(50%);
	clip-path: inset(50%);
	height: 1px; width: 1px;
	overflow: hidden;
	padding: 0; position: absolute !important;
	word-wrap: normal !important;
}
.screen-reader-text:focus {
	background-color: #eee;
	clip: auto !important;
	-webkit-clip-path: none; clip-path: none;
	color: #1f2937;       /* v2.0: was #444, brought up for stronger contrast */
	display: block;
	font-size: 1em; font-weight: 700;
	height: auto; left: 5px; line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px; width: auto; z-index: 100000;
}

/* admin edit-link (visible only to logged-in editors) */
/* ============================================================
   EDIT POST LINK — only visible to logged-in users with edit caps.
   The .post-edit-link class is added by WordPress's edit_post_link().
   Yellow pill with pencil icon — pops on the page for admins without
   intruding on the visitor experience (visitors don't see it at all).
   ============================================================ */
.post-edit-link {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	padding: .3rem .75rem;
	background: var(--c-yellow);
	color: #1f2937 !important;
	font-size: .85rem;
	font-weight: 700;
	text-decoration: none;
	border-radius: 4px;
	border: 1px solid var(--c-yellow-dark);
	letter-spacing: .01em;
	line-height: 1.3;
	vertical-align: middle;
	transition: background .15s, border-color .15s, transform .1s;
}
.post-edit-link:hover,
.post-edit-link:focus {
	background: var(--c-yellow-dark);
	color: #1f2937 !important;
	text-decoration: none;
	transform: translateY(-1px);
}
.post-edit-link::before {
	content: "";
	width: 14px;
	height: 14px;
	background-color: currentColor;
	-webkit-mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12 20h9"/><path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"/></svg>') no-repeat center / contain;
	        mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12 20h9"/><path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"/></svg>') no-repeat center / contain;
}

/* Single-post — bigger edit button, sits to the right of the date row */
.entry__edit-wrap {
	margin-left: .75rem;
	display: inline-block;
	vertical-align: middle;
}
.entry__edit-wrap .post-edit-link {
	font-size: .9rem;
	padding: .4rem 1rem;
}
.entry__edit-wrap .post-edit-link::before {
	width: 15px;
	height: 15px;
}

/* Listing cards — smaller, less padding, inline with meta row */
.card-edit-wrap {
	margin-left: .5rem;
	display: inline-block;
	vertical-align: middle;
}
.card-edit-wrap .post-edit-link {
	font-size: .75rem;
	padding: .2rem .55rem;
}
.card-edit-wrap .post-edit-link::before {
	width: 11px;
	height: 11px;
}

/* ----- WordPress comments markup ----- */
.comments-title { margin: 0 0 30px; font-size: 24px; font-weight: 700; }
.comments-area ol { list-style: none; padding: 0; }
.comments-area .children { padding-left: 20px; }
.comments-area .fn { color: #505050; font-style: normal; font-weight: 700; }
.comment-author .avatar { position: absolute; width: 60px; height: 60px; }
.comment-author .fn,
.commentmetadata { margin-left: 80px; }
.commentmetadata { font-size: 13px; margin-bottom: 20px; text-transform: uppercase; color: var(--c-text-muted); }
.comment-form .form-submit { margin-top: 30px; }
.comment-body { padding: 15px 0; position: relative; min-height: 70px; }
.comment-awaiting-moderation { display: block; color: var(--c-text-muted); font-style: italic; }
.comment-reply-link {
	display: inline-block;
	padding: .3rem .65rem;
	background: var(--c-link);
	color: #fff !important;
	border-radius: 4px;
	font-size: .85rem;
	text-decoration: none;
}
.comment-reply-link:hover { background: var(--c-link-hover); color: #fff !important; }
.comment-reply-title { font-size: 1.25rem; font-weight: 700; margin: 0 0 1rem; }
.comment-form-comment textarea { display: block; width: 100%; padding: .375rem .75rem; font-size: 1rem; line-height: 1.5; color: #495057; background: #fff; border: 1px solid #ced4da; border-radius: 4px; }

/* ----- Themed lists — alternates to .list-right ----- */
.list-righta, .list-rightc, .list-check, .list-checkb, .list-pin,
.list-arrow, .list-note, .list-bookmark {
	list-style: none;
	padding-left: 20px;
}
.list-righta li, .list-rightc li, .list-check li, .list-checkb li,
.list-pin li, .list-arrow li, .list-note li, .list-bookmark li {
	margin-top: 15px;
	margin-left: 10px;
	position: relative;
}
.list-righta li:before,
.list-rightc li:before,
.list-checkb li:before,
.list-check li:before,
.list-note li:before,
.list-arrow li:before,
.list-bookmark li:before {
	position: absolute;
	height: 20px; width: 20px;
	content: "";
	margin-left: -30px;
	margin-top: 2px;
	background-repeat: no-repeat;
	background-size: 18px 18px;
}
.list-righta li:before { background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 50 50"><path fill="rgb(0,0,0,.5)" d="M18.356,7.059L32.471,20.945h0L36,24.415,18.645,42.058l-3.529-3.471L29,24.473,14.885,10.588Z"/></svg>'); background-size: 20px 20px; height: 16px; width: 16px; }
.list-rightc li:before { background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 16 16"><path fill="rgba(9, 84, 211,.9)" d="M8 0c-4.418 0-8 3.582-8 8s3.582 8 8 8 8-3.582 8-8-3.582-8-8-8zM8 14.5c-3.59 0-6.5-2.91-6.5-6.5s2.91-6.5 6.5-6.5 6.5 2.91 6.5 6.5-2.91 6.5-6.5 6.5z"/><path fill="rgba(9, 84, 211,.9)" d="M5.543 11.043l1.414 1.414 4.457-4.457-4.457-4.457-1.414 1.414 3.043 3.043z"/></svg>'); background-size: 20px 20px; }
.list-checkb li:before { background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 16 16"><path fill="rgba(9, 84, 211,.9)" d="M6.21 14.339l-6.217-6.119 3.084-3.035 3.133 3.083 6.713-6.607 3.084 3.035-9.797 9.643z"/></svg>'); background-size: 20px 20px; }
.list-check li:before { background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 16 16"><path fill="rgba(8, 104, 29,.9)" d="M13.5 2l-7.5 7.5-3.5-3.5-2.5 2.5 6 6 10-10z"/></svg>'); }
.list-note li:before { background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 16 16"><path fill="rgba(236, 111, 37,.9)" d="M14.5 2h-4.5c0-1.105-0.895-2-2-2s-2 0.895-2 2h-4.5c-0.276 0-0.5 0.224-0.5 0.5v13c0 0.276 0.224 0.5 0.5 0.5h13c0.276 0 0.5-0.224 0.5-0.5v-13c0-0.276-0.224-0.5-0.5-0.5zM8 1c0.552 0 1 0.448 1 1s-0.448 1-1 1c-0.552 0-1-0.448-1-1s0.448-1 1-1zM14 15h-12v-12h2v1.5c0 0.276 0.224 0.5 0.5 0.5h7c0.276 0 0.5-0.224 0.5-0.5v-1.5h2v12z"/></svg>'); }
.list-arrow li:before { background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 16 16"><path fill="rgba(8, 104, 29,.9)" d="M9.707 13.707l5-5c0.391-0.39 0.391-1.024 0-1.414l-5-5c-0.391-0.391-1.024-0.391-1.414 0s-0.391 1.024 0 1.414l3.293 3.293h-9.586c-0.552 0-1 0.448-1 1s0.448 1 1 1h9.586l-3.293 3.293c-0.195 0.195-0.293 0.451-0.293 0.707s0.098 0.512 0.293 0.707c0.391 0.391 1.024 0.391 1.414 0z"/></svg>'); }
.list-bookmark li:before { background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 16 16"><path fill="rgba(236, 111, 37,.9)" d="M3 0v16l5-5 5 5v-16z"/></svg>'); margin-top: 5px; }

/* ----- Left-border accent boxes ----- */
/* Background luminance is high → default body text colour --c-text (#1f2937)
   gives 12-14:1 on every variant — comfortably AA */
.left-border-red,
.left-border-green,
.left-border-orange,
.left-border-yellow,
.left-border-blue {
	width: 100%;
	overflow: hidden;
	padding: 1rem 1.25rem;
	margin: 1.25rem 0;
	border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.left-border-red    { background-color: #fcf3f3; border-left: 5px solid #bf0d0b; }
.left-border-green  { background-color: #D3F8D0; border-left: 5px solid #11640A; }
.left-border-orange { background-color: #F9EDE5; border-left: 5px solid #EC6F25; }
.left-border-yellow { background-color: #F7F3B0; border-left: 5px solid #F3E813; }
.left-border-blue   { background-color: #DEEBFB; border-left: 5px solid #004085; }

/* ----- Highlighted-box callouts (with icon SVG) ----- */
.highlighted-box-bulb,
.highlighted-box-steps,
.highlighted-box-link,
.highlighted-box-faq {
	position: relative;
	padding: 1.5rem 5rem 1.5rem 1.5rem;
	border-radius: 5px;
	color: #12181f;          /* 17:1+ contrast on white ✓ */
	margin: 2rem 0;
}
.highlighted-box-bulb { border: 2px solid #45c968; }
.highlighted-box-steps { border: 2px solid #fe8719; }
.highlighted-box-link,
.highlighted-box-faq {
	background-color: #fafbfc;
	border: 2px solid #e7eaed;
}
.highlighted-box-bulb:before,
.highlighted-box-steps:before,
.highlighted-box-link:before,
.highlighted-box-faq:before {
	background-repeat: no-repeat;
	background-size: contain;
	position: absolute;
	content: '';
	display: block;
	width: 70px;
	height: 90px;
	top: -28px;
	right: -15px;
}
.highlighted-box-bulb:before  { background-image: url('assets/img/highlihgted-box-icon-bulb.svg'); }
.highlighted-box-steps:before { background-image: url('assets/img/highlihgted-box-icon-steps.svg'); }
.highlighted-box-link:before  { background-image: url('assets/img/highlihgted-box-icon-link.svg'); }
.highlighted-box-faq:before   { background-image: url('assets/img/highlihgted-box-icon-faq.svg'); top: -38px; }
.highlighted-box-bulb h2, .highlighted-box-bulb h3, .highlighted-box-bulb h4, .highlighted-box-bulb h5, .highlighted-box-bulb h6,
.highlighted-box-steps h2, .highlighted-box-steps h3, .highlighted-box-steps h4, .highlighted-box-steps h5, .highlighted-box-steps h6,
.highlighted-box-link h1, .highlighted-box-link h3, .highlighted-box-link h4, .highlighted-box-link h5, .highlighted-box-link h6,
.highlighted-box-faq h2, .highlighted-box-faq h3, .highlighted-box-faq h4, .highlighted-box-faq h5, .highlighted-box-faq h6 {
	padding-top: 0;
}

/* ----- Alternate blockquote (otro) ----- */
.otro-blockquote {
	font-size: 1rem;
	margin: 2.5rem auto;
	font-style: italic;
	color: #4b5563;          /* v2.0: was #555555, slightly darker for 8.3:1 vs 7.6:1 */
	padding: 1.2em 30px 1.2em 75px;
	border-left: 8px solid #0954D3;
	line-height: 1.6;
	position: relative;
	background: #f8f9fa;
}
.otro-blockquote::before {
	font-family: Georgia, serif;
	content: "\201C";
	color: #0954D3;
	font-size: 4em;
	position: absolute;
	left: 10px;
	top: -10px;
}
.otro-blockquote::after { content: ''; }
.otro-blockquote span { display: block; color: #16306c; font-style: normal; font-weight: 700; margin-top: 1em; }

/* ----- Colored buttons (.btn-orange / btn-success / btn-danger live in the
   product-button block further down for consolidated styling). Only orange
   defined here since it's not tied to product-button tabs. ----- */
/* Original: #eb6025 → 3.37:1 on white text. New: #c63d00 → 5.16:1 ✓ */
.btn-orange {
	color: #fff;
	background-color: #c63d00;
	border-color: #c63d00;
}
.btn-orange:hover {
	color: #fff;
	background-color: #a73900;
	border-color: #a73900;
}

/* ----- Image-hover effects (used in post-card markup) ----- */
.img-hover { width: auto; height: auto; margin: 0; padding: 0; position: relative; overflow: hidden; }
.img-hover .img-thumb { border-radius: 10px; overflow: hidden; max-width: 400px; }
.img-hover .ani-zoom {
	transform: rotate(0) scale(1);
	transition: transform .3s ease-in-out;
}
.img-hover:hover .ani-zoom { transform: rotate(-5deg) scale(1.2); }
.img-thumb { border-radius: 10px; overflow: hidden; }
.ani-zoom { transition: transform .3s ease-in-out; }

/* logo-overlay used on home post-card thumbs */
.logo-overlay {
	position: relative;
	width: 100%;
	height: 100%;
	display: flex;
}
.logo-overlay::before {
	content: '';
	background: url('https://turgs.com/logo-sm.png') no-repeat center bottom;
	position: absolute;
	opacity: .7;
	width: 80px; height: 30px;
	bottom: 6px; right: 6px;
	background-size: contain;
	z-index: 2;
}

/* ----- Misc utilities + content classes ----- */
.bg-dark-new { background-color: #145477 !important; color: #fff; }
.cover-blog { height: 200px; background: var(--c-primary); min-height: 200px; }
.single-content ul li,
.single-content ol li { line-height: 1.5; margin-top: 1rem; }
.single-content li img { margin-top: .5rem; }
.toc-hv, .toc-hv:hover { background: var(--c-primary); color: #fff; }
.hyperlink {
	padding-right: 24px;
	background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2048 2048'><path fill='%230058ad' d='M1792 256v640h-128V475l-851 850-90-90 850-851h-421V256h640zm-512 1007h128v529H256V640h529v128H384v896h896v-401z'/></svg>");
	background-repeat: no-repeat;
	background-position: right center;
	background-size: 16px 16px;
}
blockquote .blue { background-color: #1e4679; color: #fff; padding: .25em .5em; border-radius: 3px; }
/* ----- Product-button block (Select One: Windows/Mac tabs + CTAs) -----
   Tab design: file-folder pattern. A 1px dark baseline runs across the
   tab row. The active tab uses margin-bottom: -1px to overlap that line
   plus a bottom-border colour that matches its own background — so the
   line visually "breaks" directly under the active tab. Inactive tabs
   are flush with the line (no border). The active tab "pops up" above
   the baseline because its borders add height inactive tabs don't have.
   This is the same pattern Bootstrap's .nav-tabs uses, retuned for
   Turgs brand colours (#0f3664 baseline, #cfe2ff active fill,
   #003a76 active text). */
.product-button {
	margin: 2rem 0;
	padding: 1.5rem 1.5rem 1.75rem;
	background: #f8fafc;
	border: 1px solid #1f2937;     /* defined dark outline (matches screenshot) */
	border-radius: var(--radius-md);
	box-shadow: 0 1px 3px rgba(0, 0, 0, .06);   /* subtle depth */
	text-align: center;
}

/* "Select One:" label sits inline before the tabs. vertical-align is
   tuned so its text baseline meets the tab text baseline naturally. */
.product-button .product-button__label,
.product-button > .text-center > strong:first-child,
.product-button > p > strong:first-child {
	display: inline-block;
	font-size: 1.1rem;             /* matches tab text */
	font-weight: 700;
	margin-right: 1rem;
	color: var(--c-text);
	vertical-align: -7px;          /* nudges label down to share the tab baseline */
}

.product-button .nav-tabs {
	display: inline-flex;
	align-items: flex-end;
	gap: 4px;
	max-width: none;
	margin: 0;
	padding: 0;
	list-style: none;
	border: 0;
	border-bottom: 1px solid #0f3664;   /* horizontal baseline only */
	vertical-align: middle;
}

.product-button .nav-tabs .nav-item {
	display: inline-flex;
	align-items: flex-end;
}

.product-button .nav-tabs .nav-link {
	display: inline-flex;
	align-items: center;
	gap: .55rem;
	padding: .65rem 1.75rem;
	margin-bottom: -1px;            /* overlap the parent baseline by 1px */
	color: #5a5a5a;
	background: transparent;
	border: 1px solid transparent;  /* placeholder; goes dark when active */
	border-radius: 6px 6px 0 0;
	font-size: 1.1rem;              /* ~17.6px — clearer than default body */
	font-weight: 700;
	line-height: 1.3;
	text-decoration: none;
	transition: background .15s;
}
.product-button .nav-tabs .nav-link i,
.product-button .nav-tabs .nav-link svg,
.product-button .nav-tabs .nav-link i.icon-windows,
.product-button .nav-tabs .nav-link i.icon-appstore {
	font-size: 1.1rem;
	min-width: 20px;
	min-height: 20px;
}

.product-button .nav-tabs .nav-link:hover {
	color: #003a76;
	background: #eff7ff;
}

.product-button .nav-tabs .nav-link.active,
.product-button .nav-tabs .nav-link[aria-selected="true"] {
	color: #003a76;                 /* 8.56:1 on #cfe2ff ✓ */
	background: #cfe2ff;
	/* top, sides dark; bottom MATCHES bg → visually erases the baseline
	   directly under the active tab (the "punch through" effect) */
	border-color: #0f3664 #0f3664 #cfe2ff;
}

.product-button .nav-tabs .nav-link.disabled {
	opacity: 1 !important;
	color: #6b7280;
	cursor: not-allowed;
	pointer-events: none;
	background: transparent;
	border-color: transparent;
}
.product-button .nav-tabs .nav-link i,
.product-button .nav-tabs .nav-link svg { flex-shrink: 0; }

/* Tab content panel below the tabs */
.product-button .tab-content {
	margin-top: 1.5rem;
	padding-top: 0;
}
.product-button .tab-pane {
	display: none;
	flex-wrap: wrap;
	gap: 1rem;
	justify-content: center;
	align-items: center;
}
.product-button .tab-pane.active,
.product-button .tab-pane.show { display: flex; }

/* CTAs inside the product-button block — bigger, more breathing room.
   font-size: 1.2rem (19.2px) crosses WCAG large-text threshold for
   bold text (≥18.66px), so contrast requirements drop from 4.5:1 to
   3:1 — all current colours pass with comfortable headroom. */
.product-button .btn,
.product-button a.btn {
	display: inline-flex;
	align-items: center;
	gap: .65rem;
	padding: .85rem 2rem;
	font-size: 1.2rem;              /* ~19.2px — clearer + crosses AA large-text */
	font-weight: 700;
	line-height: 1.2;
	border-radius: 6px;
	border-width: 2px;
	border-style: solid;
	min-width: 200px;
	justify-content: center;
	text-decoration: none;
	transition: background .15s, color .15s, border-color .15s, transform .1s;
}
.product-button .btn:hover { transform: translateY(-1px); }
.product-button .btn:active { transform: translateY(0); }
/* Bump icon size inside larger buttons */
.product-button .btn i.icon-download:before,
.product-button .btn i.icon-buy:before,
.product-button .btn i.icon-windows:before,
.product-button .btn i.icon-appstore:before {
	width: 24px;
	height: 24px;
	-webkit-mask-size: 24px 24px;
	        mask-size: 24px 24px;
}
.product-button .btn i.icon-download,
.product-button .btn i.icon-buy,
.product-button .btn i.icon-windows,
.product-button .btn i.icon-appstore {
	padding-left: 30px;
	min-height: 24px;
}

/* Free Download (.btn-success) — vibrant but AA-safe green (Windows default) */
.product-button .btn-success,
.btn-success {
	color: #fff;
	background-color: #1a7a4a;     /* 5.35:1 on white text ✓ — slightly brighter than #146c43 for energy */
	border-color: #1a7a4a;
}
.product-button .btn-success:hover,
.btn-success:hover {
	color: #fff;
	background-color: #146c43;     /* darker on hover */
	border-color: #146c43;
}

/* Per-platform colouring: Mac's Free Download button gets brand blue
   instead of green. Targets every common Mac tab-pane identifier so it
   works regardless of whether posts use #nav-mac, .nav-mac, id*="mac",
   or a numeric tab-pane index. */
.product-button #nav-mac .btn-success,
.product-button [id*="mac" i] .btn-success,
.product-button .tab-pane.mac .btn-success,
.product-button .tab-content > .tab-pane:nth-of-type(2) .btn-success {
	background-color: #005db8;    /* Turgs primary-dark — 6.45:1 on white ✓ */
	border-color: #005db8;
}
.product-button #nav-mac .btn-success:hover,
.product-button [id*="mac" i] .btn-success:hover,
.product-button .tab-pane.mac .btn-success:hover,
.product-button .tab-content > .tab-pane:nth-of-type(2) .btn-success:hover {
	background-color: #00478a;    /* darker blue for hover — 9.26:1 ✓ */
	border-color: #00478a;
}

/* Buy Now (.btn-danger) — outline style as in original screenshot */
.product-button .btn-danger,
.btn-danger,
.tab-pane .btn-danger {
	color: #b02a37;                /* 6.50:1 on white ✓ */
	background-color: #fff;
	border-color: #b02a37;
}
.product-button .btn-danger:hover,
.btn-danger:hover,
.tab-pane .btn-danger:hover {
	color: #fff;
	background-color: #b02a37;
	border-color: #b02a37;
}

/* Mobile: stack tabs vertically if they overflow */
@media (max-width: 575px) {
	.product-button { padding: 1rem .5rem; }
	.product-button .nav-tabs { width: 100%; justify-content: center; }
	.product-button .product-button__label,
	.product-button > .text-center > strong,
	.product-button > p > strong:first-child {
		display: block;
		margin: 0 0 .5rem;
	}
	.product-button .btn { width: 100%; }
}

/* Generic .btn + .btn spacing fallback for buttons outside .product-button */
.btn + .btn { margin-left: .75rem; }
@media (max-width: 575px) {
	.btn + .btn { margin-left: 0; margin-top: .5rem; }
}

/* ----- Inline icon classes (used as <i class="icon-windows"></i>) -----

   Implementation note: SVG icons use mask-image (NOT background-image)
   so the icon colour comes from the parent's currentColor. With
   background-image, currentColor inside a data-URI SVG resolves against
   the SVG's own root (defaults to black) and never inherits from the
   host element — which is why these icons rendered black inside
   .btn-success despite the button text being white. mask-image solves
   it: the SVG becomes a shape mask, the fill comes from background-color,
   and currentColor on background-color DOES inherit. ----- */
i.icon-appstore, i.icon-windows, i.icon-download, i.icon-buy {
	position: relative;
	display: inline-block;
	padding-left: 28px;
	margin-right: 4px;
	min-height: 22px;
	vertical-align: middle;
}
i.icon-appstore:before,
i.icon-windows:before,
i.icon-download:before,
i.icon-buy:before {
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	height: 22px;
	width: 22px;
	content: "";
	background-color: currentColor;          /* THE fix — inherits parent text colour */
	-webkit-mask-repeat: no-repeat;
	        mask-repeat: no-repeat;
	-webkit-mask-position: center;
	        mask-position: center;
	-webkit-mask-size: 22px 22px;
	        mask-size: 22px 22px;
}
i.icon-appstore:before {
	-webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40"><path fill="%23000" d="M24.734 17.003c-0.040-4.053 3.305-5.996 3.454-6.093-1.88-2.751-4.808-3.127-5.851-3.171-2.492-0.252-4.862 1.467-6.127 1.467-1.261 0-3.213-1.43-5.28-1.392-2.716 0.040-5.221 1.579-6.619 4.012-2.822 4.897-0.723 12.151 2.028 16.123 1.344 1.944 2.947 4.127 5.051 4.049 2.026-0.081 2.793-1.311 5.242-1.311s3.138 1.311 5.283 1.271c2.18-0.041 3.562-1.981 4.897-3.931 1.543-2.255 2.179-4.439 2.216-4.551-0.048-0.022-4.252-1.632-4.294-6.473zM20.705 5.11c1.117-1.355 1.871-3.235 1.665-5.11-1.609 0.066-3.559 1.072-4.713 2.423-1.036 1.199-1.942 3.113-1.699 4.951 1.796 0.14 3.629-0.913 4.747-2.264z"/></svg>');
	        mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40"><path fill="%23000" d="M24.734 17.003c-0.040-4.053 3.305-5.996 3.454-6.093-1.88-2.751-4.808-3.127-5.851-3.171-2.492-0.252-4.862 1.467-6.127 1.467-1.261 0-3.213-1.43-5.28-1.392-2.716 0.040-5.221 1.579-6.619 4.012-2.822 4.897-0.723 12.151 2.028 16.123 1.344 1.944 2.947 4.127 5.051 4.049 2.026-0.081 2.793-1.311 5.242-1.311s3.138 1.311 5.283 1.271c2.18-0.041 3.562-1.981 4.897-3.931 1.543-2.255 2.179-4.439 2.216-4.551-0.048-0.022-4.252-1.632-4.294-6.473zM20.705 5.11c1.117-1.355 1.871-3.235 1.665-5.11-1.609 0.066-3.559 1.072-4.713 2.423-1.036 1.199-1.942 3.113-1.699 4.951 1.796 0.14 3.629-0.913 4.747-2.264z"/></svg>');
}
i.icon-windows:before {
	-webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50"><path fill="%23000" d="M25.955,43.164V25.947H46V46.99Zm0-36.328L46,3.01V24.053H25.955V6.836ZM4,25.867H24.046v17.3L4,39.338V25.867ZM4,10.573L24.046,6.746v17.3H4V10.573Z"/></svg>');
	        mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50"><path fill="%23000" d="M25.955,43.164V25.947H46V46.99Zm0-36.328L46,3.01V24.053H25.955V6.836ZM4,25.867H24.046v17.3L4,39.338V25.867ZM4,10.573L24.046,6.746v17.3H4V10.573Z"/></svg>');
}
i.icon-download:before {
	-webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50"><path fill="%23000" d="M47.264,32.758a2.493,2.493,0,0,0-1.84-.766H31.87l-3.68,3.718a5.187,5.187,0,0,1-7.359,0l-3.653-3.718H4.6a2.492,2.492,0,0,0-1.84.766A2.544,2.544,0,0,0,2,34.617v8.749a2.543,2.543,0,0,0,.758,1.859,2.49,2.49,0,0,0,1.84.766H45.424a2.492,2.492,0,0,0,1.84-.766,2.545,2.545,0,0,0,.758-1.859V34.617A2.546,2.546,0,0,0,47.264,32.758ZM36.632,17.995L30,18V6a2.7,2.7,0,0,0-.808-1.483A1.657,1.657,0,0,0,27.974,4H21.048a1.656,1.656,0,0,0-1.217.519A2.731,2.731,0,0,0,19,6V18l-6.61-.005a1.617,1.617,0,0,0-1.6,1.066,1.589,1.589,0,0,0,.379,1.914L23.293,33.223a1.687,1.687,0,0,0,2.435,0L37.85,20.975a1.59,1.59,0,0,0,.379-1.914A1.618,1.618,0,0,0,36.632,17.995Z"/></svg>');
	        mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50"><path fill="%23000" d="M47.264,32.758a2.493,2.493,0,0,0-1.84-.766H31.87l-3.68,3.718a5.187,5.187,0,0,1-7.359,0l-3.653-3.718H4.6a2.492,2.492,0,0,0-1.84.766A2.544,2.544,0,0,0,2,34.617v8.749a2.543,2.543,0,0,0,.758,1.859,2.49,2.49,0,0,0,1.84.766H45.424a2.492,2.492,0,0,0,1.84-.766,2.545,2.545,0,0,0,.758-1.859V34.617A2.546,2.546,0,0,0,47.264,32.758ZM36.632,17.995L30,18V6a2.7,2.7,0,0,0-.808-1.483A1.657,1.657,0,0,0,27.974,4H21.048a1.656,1.656,0,0,0-1.217.519A2.731,2.731,0,0,0,19,6V18l-6.61-.005a1.617,1.617,0,0,0-1.6,1.066,1.589,1.589,0,0,0,.379,1.914L23.293,33.223a1.687,1.687,0,0,0,2.435,0L37.85,20.975a1.59,1.59,0,0,0,.379-1.914A1.618,1.618,0,0,0,36.632,17.995Z"/></svg>');
}
i.icon-buy:before {
	-webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50"><path fill="%23000" d="M16.163,36.926a3.591,3.591,0,1,0,2.486,1.053A3.393,3.393,0,0,0,16.163,36.926Zm24.753,0A3.591,3.591,0,1,0,43.4,37.979,3.394,3.394,0,0,0,40.917,36.926ZM47.464,9.078a1.7,1.7,0,0,0-1.243-.526H13.042q-0.028-.194-0.124-0.72t-0.152-.817a4.358,4.358,0,0,0-.221-0.72,2.714,2.714,0,0,0-.359-0.679,1.614,1.614,0,0,0-.539-0.429A1.681,1.681,0,0,0,10.859,5H3.787a1.7,1.7,0,0,0-1.243.526,1.743,1.743,0,0,0,0,2.494,1.7,1.7,0,0,0,1.243.526H9.422l4.89,22.8q-0.056.139-.428,0.817T13.29,33.282a10.537,10.537,0,0,0-.442,1,2.644,2.644,0,0,0-.221.873A1.8,1.8,0,0,0,14.4,36.926h28.29a1.773,1.773,0,0,0,0-3.547H17.268a5.363,5.363,0,0,0,.663-1.773,16.848,16.848,0,0,0-.359-1.94l28.842-3.381a1.745,1.745,0,0,0,1.119-.6,1.72,1.72,0,0,0,.456-1.178V10.325A1.708,1.708,0,0,0,47.464,9.078Z"/></svg>');
	        mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50"><path fill="%23000" d="M16.163,36.926a3.591,3.591,0,1,0,2.486,1.053A3.393,3.393,0,0,0,16.163,36.926Zm24.753,0A3.591,3.591,0,1,0,43.4,37.979,3.394,3.394,0,0,0,40.917,36.926ZM47.464,9.078a1.7,1.7,0,0,0-1.243-.526H13.042q-0.028-.194-0.124-0.72t-0.152-.817a4.358,4.358,0,0,0-.221-0.72,2.714,2.714,0,0,0-.359-0.679,1.614,1.614,0,0,0-.539-0.429A1.681,1.681,0,0,0,10.859,5H3.787a1.7,1.7,0,0,0-1.243.526,1.743,1.743,0,0,0,0,2.494,1.7,1.7,0,0,0,1.243.526H9.422l4.89,22.8q-0.056.139-.428,0.817T13.29,33.282a10.537,10.537,0,0,0-.442,1,2.644,2.644,0,0,0-.221.873A1.8,1.8,0,0,0,14.4,36.926h28.29a1.773,1.773,0,0,0,0-3.547H17.268a5.363,5.363,0,0,0,.663-1.773,16.848,16.848,0,0,0-.359-1.94l28.842-3.381a1.745,1.745,0,0,0,1.119-.6,1.72,1.72,0,0,0,.456-1.178V10.325A1.708,1.708,0,0,0,47.464,9.078Z"/></svg>');
}

/* ----- Copy The Code plugin compatibility ----- */
.copy-the-code-wrap {
	background-color: #272b33;
	color: #d6d6d6;
	border-radius: 10px;
	padding: 20px;
	position: relative;
}
.copy-the-code-wrap cite { font-style: normal; }
.copy-the-code-wrap.copy-the-code-style-svg-icon .copy-the-code-button svg { fill: #d6d6d6; }
.copy-the-code-inside-wrap.copy-the-code-style-svg-icon .copy-the-code-button { color: #fff; }

/* ----- Bootstrap nav-tabs container (older markup variant) ----- */
.nav-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: .25rem;
	border-bottom: 1px solid var(--c-border);
	list-style: none;
	padding-left: 0;
	margin: 0 0 1rem;
}
.nav-tabs .nav-link { color: #5a5a5a; padding: .65rem 1rem; }
.nav-tabs .nav-link.active { color: #003a76; background: #cfe2ff; border-bottom: 3px solid #003a76; }

/* ----- Bootstrap pagination (.page-item / .page-link) compat ----- */
.page-item { display: inline-block; }
.page-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	padding: .45rem .8rem;
	border: 1px solid var(--c-border);
	border-radius: 4px;
	text-decoration: none;
	color: var(--c-link);
	background: #fff;
}
.page-link:hover { background: var(--c-primary); color: #fff; border-color: var(--c-primary); }
.page-item.active .page-link {
	background: var(--c-primary);
	color: #fff;
	border-color: var(--c-primary);
	font-weight: 700;
}
.page-item.disabled .page-link { opacity: .5; pointer-events: none; }

/* ----- Bootstrap-compat alignment utilities used in markup ----- */
/* Original Turgs used `text-lg-left/right/center` (Bootstrap 4 syntax).
   My theme uses `text-lg-start/end` (Bootstrap 5). Alias both so posts
   written against either Bootstrap version render correctly. */
@media (min-width: 992px) {
	.text-lg-left   { text-align: left !important; }
	.text-lg-right  { text-align: right !important; }
	.text-lg-center { text-align: center !important; }
	.mt-lg-n2 { margin-top: -10rem !important; }
	.mt-lg-n3 { margin-top: -15rem !important; }
	.mt-lg-n4 { margin-top: -20rem !important; }
}
.text-justify { text-align: justify; }

/* flex-custom — column on desktop, row on mobile (used in product blocks) */
.flex-custom { flex-direction: column !important; }
@media (max-width: 991px) {
	.flex-custom { flex-direction: row !important; }
}

/* border-lg-top — full-width white separator on desktop only */
@media (min-width: 992px) {
	.border-lg-top { border-top: 1px solid #fff; position: relative; z-index: 1050; }
}

/* navbar-expand-lg / navbar-light: aliases (visual behaviour comes from .navbar) */
.navbar-expand-lg, .navbar-light { /* declared so existing markup matches a real ruleset */ }

/* ----- Final WP-core + legacy Bootstrap 3 stragglers ----- */
.img-responsive { display: inline !important; max-width: 100%; height: auto; }

/* WP comments markup tail */
.comment-meta a { color: var(--c-text-muted); }
.comments-area a.url { color: var(--c-text-muted); text-decoration: none; }
.reply { margin-left: 80px; margin-top: 15px; display: table; }
.reply a, .reply a:hover { color: #fff; }

/* WP post-format-quote (used when post format is "quote") */
.post_format-post-format-quote {
	font-size: 1.5rem;
	line-height: 1.4;
	font-style: italic;
}

/* WP archive dropdown (wp_dropdown_categories etc.) */
.postform {
	display: block;
	width: 100%;
	height: calc(1.5em + .75rem + 2px);
	padding: .375rem .75rem;
	font-size: 1rem;
	border: 1px solid #ced4da;
	border-radius: 4px;
	background: #fff;
}

/* Embedded video play-button overlay */
.embed-container .play, .embed-responsive .play {
	position: absolute;
	height: 72px;
	width: 72px;
	left: 50%; top: 50%;
	margin: -36px 0 0 -36px;
	cursor: pointer;
	background: rgba(0,0,0,.5) url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23fff' d='M8 5v14l11-7z'/></svg>") no-repeat center;
	background-size: 36px 36px;
	border-radius: 50%;
	z-index: 10;
}

/* ============================================================
   MOBILE RESPONSIVE OVERRIDES
   Strategy: scale the html root font-size DOWN at smaller viewports
   so every rem-based size shrinks proportionally without touching
   individual rules. Then targeted overrides for components that
   need more than proportional scaling (heroes, tabs, layouts).
   ============================================================ */

/* ---- Tablet (≤991px): 17px root — small but readable ---- */
@media (max-width: 991px) {
	html { font-size: 17px; }
	:root { --container-px: 1.1rem; }

	/* Hero padding tighter */
	.hero { padding: 2.5rem 0; margin-bottom: 2rem; }
	.hero__title { font-size: 1.85rem; }

	/* Content card pads tighter — was 2.5rem on desktop */
	.content-card { padding: 1.5rem; }

	/* Single post title smaller */
	.entry__title { font-size: 1.85rem; line-height: 1.25; margin-bottom: .85rem; }

	/* Author hero — avatar shrinks, stacks vertically */
	.author-hero__avatar,
	.author-hero__img { width: 130px; height: 130px; }
	.author-hero__name { font-size: 2.25rem; }

	/* Stats grid still 2 col on tablet (already set) */
	.author-stat__num { font-size: 2rem; }
	.author-stat { padding: 1.25rem 1rem; }

	/* Author page cards — less padding */
	.author-page .author-section { padding: 1.5rem 1.5rem; }
	.author-section__title { font-size: 1.5rem; }

	/* Tab labels and buttons in product-button block */
	.nav-tabs .nav-link { font-size: 1rem; padding: .65rem .9rem; }
}

/* ---- Mobile (≤767px): 16px root + layout collapses ---- */
@media (max-width: 767px) {
	html { font-size: 16px; }
	:root { --container-px: 1rem; }

	body { line-height: 1.6; }

	/* Hero: tighter, less margin */
	.hero { padding: 2rem 0; margin-bottom: 1.5rem; }
	.hero__title { font-size: 1.65rem; line-height: 1.25; }
	.hero__eyebrow { font-size: .85rem; }
	.hero .breadcrumb-white { font-size: .85rem; }

	/* Single post — make title fit narrow screens */
	.entry__title {
		font-size: 1.7rem;
		line-height: 1.25;
		overflow-wrap: break-word;
		word-wrap: break-word;
		hyphens: auto;
	}

	/* Entry meta row — stack vertically so dropdown doesn't squeeze */
	.entry__meta {
		flex-direction: column;
		align-items: stretch;
		gap: .5rem;
	}
	.entry__meta > * { margin: 0; }
	.entry__cat,
	.entry__cat-link {
		max-width: 100%;
	}
	.entry__rt,
	.entry__byline { font-size: .95rem; }
	.entry__byline::before,
	.entry__rt::before { content: ""; margin: 0; }

	/* Body content slightly tighter line-height for mobile */
	.entry__content {
		font-size: 1.15rem;        /* 18.4px @ 16px root */
		line-height: 1.7;
	}
	.entry__content h2 { font-size: 1.55rem; margin-top: 2rem; }
	.entry__content h3 { font-size: 1.3rem;  margin-top: 1.5rem; }
	.entry__content h4 { font-size: 1.15rem; margin-top: 1.25rem; }
	.entry__content h5 { font-size: 1.05rem; margin-top: 1rem; }

	/* Tables: the .table-responsive wrapper (auto-injected by
	   turgs_wrap_tables_in_content) provides the scroll. On mobile,
	   shrink the cell padding and font so more content fits per
	   viewport width before scrolling is needed. DO NOT set
	   display:block on the table — that breaks the wrapper-based
	   scroll and lets the table push the page sideways. */
	.entry__content table {
		font-size: 1rem;
	}
	.entry__content th,
	.entry__content td { padding: .55rem .65rem; }
	.entry__content .table-responsive,
	.table-responsive { margin: 1.25rem 0; }

	/* Code blocks scroll instead of overflowing */
	.entry__content pre {
		overflow-x: auto;
		font-size: .9rem;
		padding: .75rem .85rem;
	}
	.entry__content code { word-break: break-word; }

	/* Featured image fills card */
	.entry__featured-image,
	.entry__featured-image img {
		border-radius: var(--radius-sm);
	}

	/* Search bar — full width */
	.entry__search,
	.entry__search input { width: 100%; max-width: 100%; box-sizing: border-box; }

	/* Author hero — stack tighter, smaller avatar */
	.author-hero { gap: 1rem; padding: .5rem 0; }
	.author-hero__avatar,
	.author-hero__img { width: 110px; height: 110px; }
	.author-hero__name { font-size: 2rem; }
	.author-hero__role { font-size: 1.05rem; }
	.author-hero__social { gap: .4rem; }
	.author-hero__social-link {
		padding: .55rem .85rem;
		font-size: .85rem;
	}

	/* Stats — 2 col, smaller numbers */
	.author-stats { margin-top: -1rem; }
	.author-stat { padding: 1rem .75rem; }
	.author-stat__num { font-size: 1.75rem; }
	.author-stat__label { font-size: .8rem; }

	/* Author page cards — minimal padding */
	.author-page { margin-top: 2rem; }
	.author-page .author-section { padding: 1.25rem 1.15rem; margin-bottom: 1rem; }
	.author-section__head { padding-bottom: .75rem; margin-bottom: 1rem; }
	.author-section__title { font-size: 1.35rem; }
	.author-section__lede { font-size: .9rem; }
	.author-section__body { font-size: 1rem; line-height: 1.65; }
	.author-section__tags { gap: .4rem; }
	.author-section__tags li {
		padding: .4rem .8rem;
		font-size: .9rem;
	}

	/* Author posts grid — single column */
	.author-posts-grid { gap: 1rem; }

	/* CTA panel */
	.author-cta { padding: 1.5rem 1.15rem; }
	.author-cta__title { font-size: 1.35rem; }
	.author-cta__lede { font-size: .95rem; }
	.author-cta__btn {
		font-size: .9rem;
		padding: .7rem 1.2rem;
		width: 100%;
		justify-content: center;
	}
	.author-cta__buttons { flex-direction: column; gap: .5rem; }

	/* Product-button tabs — smaller, still tappable (44px min target) */
	.nav-tabs { flex-wrap: wrap; }
	.nav-tabs .nav-link {
		font-size: .95rem;
		padding: .7rem .85rem;
		min-height: 44px;
	}
	.product-button .btn,
	.product-button button {
		font-size: 1rem;
		padding: .7rem 1rem;
		min-height: 44px;
	}

	/* Home / archive cards — tighter */
	.home-card { padding: 1rem; }
	.home-card__title { font-size: 1.15rem; }
	.home-card__body { font-size: .95rem; }
	.archive-card { padding: 0 0 1.25rem; }
	.archive-card__title { font-size: 1.1rem; }
	.archive-card__meta { font-size: .85rem; }
	.author-posts-grid .archive-card__title { font-size: 1.05rem; }
	.author-posts-grid .archive-card__meta { font-size: .85rem; }

	/* TOC tighter */
	.table-of-content { padding: 1rem 1.15rem; }
	.table-of-content h2,
	.table-of-content h3,
	.table-of-content h4,
	.table-of-content .toc-title { font-size: 1.05rem; }
	.toc-toggle { padding: .3rem .65rem; font-size: .8rem; }

	/* Edit post link — touch-friendly */
	.entry__edit-wrap { display: block; margin-top: .65rem; margin-left: 0; }
	.entry__edit-wrap .post-edit-link { font-size: .85rem; padding: .45rem .85rem; }
	.card-edit-wrap { display: block; margin: .35rem 0 0; }

	/* Author bio — smaller padding */
	.author-bio { padding: 1.25rem; }
	.author-bio__avatar,
	.author-bio__avatar img { width: 64px; height: 64px; }
	.author-bio__name { font-size: 1.2rem; }
	.author-bio__role { font-size: .9rem; }

	/* Related posts grid */
	.related-posts__grid { grid-template-columns: 1fr; gap: .85rem; }
	.related-card__title { font-size: .95rem; }

	/* Pagination */
	.pagination { gap: .35rem; }
	.pagination a,
	.pagination .current {
		padding: .5rem .85rem;
		font-size: .95rem;
		min-width: 40px;
		min-height: 40px;
	}

	/* Footer — stack everything, contact icons smaller */
	.footer .container { padding-top: 2rem; }
	.footer__main { padding-bottom: 1rem; }
	.footer__col { margin-bottom: 1.5rem; }
	.footer__brand .footer__logo svg { width: 110px; }
	.footer__tagline { font-size: .95rem; margin-bottom: 1rem; }
	.footer__heading { font-size: 1rem; margin-bottom: 1rem; padding-bottom: .5rem; }
	.footer__links a { font-size: .95rem; padding: .35rem 0; }
	.footer__contact-list li { font-size: .95rem; padding: .4rem 0; }
	.footer__contact-list a { font-size: 1rem; }
	.footer__contact-icon { width: 32px; height: 32px; }
	.footer__cta { font-size: .95rem; padding: .65rem 1.15rem; width: 100%; justify-content: center; }
	.footer__copyright,
	.footer__bottom-links a { font-size: .9rem; }
	.footer__since { font-size: .85rem; }
	.footer__social { gap: .5rem; }
	.footer__social a { width: 36px; height: 36px; }

	/* Back-to-top — smaller, doesn't dominate */
	.back-to-top {
		width: 40px;
		height: 40px;
		right: 1rem;
		bottom: 1rem;
		font-size: 1.25rem;
	}

	/* Word-break for any container that might overflow with long URLs */
	.entry__title,
	.entry__content,
	.archive-card__title,
	.home-card__title { overflow-wrap: break-word; word-wrap: break-word; }
}

/* ---- Small mobile (≤480px): 15.5px root + extra tightening ---- */
@media (max-width: 480px) {
	html { font-size: 15.5px; }
	:root { --container-px: .85rem; }

	.content-card { padding: 1.15rem; }
	.entry__title { font-size: 1.55rem; }
	.entry__content { font-size: 1.1rem; }
	.entry__content h2 { font-size: 1.4rem; }
	.entry__content h3 { font-size: 1.2rem; }

	.author-hero__avatar,
	.author-hero__img { width: 95px; height: 95px; }
	.author-hero__name { font-size: 1.75rem; }

	.author-stat__num { font-size: 1.55rem; }

	.hero { padding: 1.75rem 0; margin-bottom: 1.25rem; }
	.hero__title { font-size: 1.5rem; }

	.author-cta__title { font-size: 1.2rem; }

	.footer .container { padding-top: 1.75rem; }
	.footer__brand .footer__logo svg { width: 100px; }
}

/* ============================================================
   AUDIT FIXES — items found missing during full theme review
   Added in one block so they're easy to locate, audit, or remove.
   Covers: Gutenberg blocks, HTML element edge cases, alignwide/
   alignfull, sticky-post indicator, iOS input-zoom fix, comments.
   ============================================================ */

/* ---- iOS input-zoom guard ----
   Any form field rendered at <16px causes iOS Safari to zoom in
   on focus (jarring UX). Force min 16px on all interactive inputs
   on small viewports regardless of root font-size scaling. */
@media (max-width: 767px) {
	input[type="search"],
	input[type="text"],
	input[type="email"],
	input[type="url"],
	input[type="tel"],
	input[type="number"],
	input[type="password"],
	textarea,
	select {
		font-size: 16px !important;
	}
}

/* ---- Gutenberg alignment classes ----
   Used by core block editor and by anyone hand-coding alignwide /
   alignfull in content. They break out of the normal column width. */
.entry__content .alignwide {
	margin-left: calc(50% - 50vw + 1rem);
	margin-right: calc(50% - 50vw + 1rem);
	max-width: 100vw;
}
.entry__content .alignfull {
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	max-width: 100vw;
}
.entry__content .alignwide img,
.entry__content .alignfull img {
	width: 100%;
	height: auto;
}

/* ---- Sticky post visual indicator ----
   WordPress adds .sticky to posts marked as sticky in the home loop.
   Without styling, sticky posts are visually indistinguishable. */
.home-card.sticky,
.archive-card.sticky {
	position: relative;
}
.home-card.sticky::before,
.archive-card.sticky::before {
	content: "★ Featured";
	position: absolute;
	top: .75rem;
	left: .75rem;
	background: var(--c-yellow);
	color: #1f2937;
	padding: .3rem .65rem;
	border-radius: 4px;
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .03em;
	border: 1px solid var(--c-yellow-dark);
	z-index: 2;
}

/* ---- Missing HTML element styles inside post content ---- */
.entry__content hr {
	border: 0;
	height: 1px;
	background: linear-gradient(to right, transparent, var(--c-border), transparent);
	margin: 2.5rem 0;
}
.entry__content kbd {
	background: #1f2937;
	color: #fff;
	padding: .15em .45em;
	font-size: .85em;
	border-radius: 4px;
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
	box-shadow: 0 1px 0 rgba(255,255,255,.15) inset, 0 1px 2px rgba(0,0,0,.2);
}
.entry__content mark {
	background: #fff3a3;
	color: #1f2937;
	padding: .1em .25em;
	border-radius: 2px;
}
.entry__content abbr[title] {
	border-bottom: 1px dotted var(--c-text-muted);
	cursor: help;
	text-decoration: none;
}
.entry__content dl {
	margin: 1.25rem 0;
}
.entry__content dt {
	font-weight: 700;
	margin-top: 1rem;
	color: var(--c-text);
}
.entry__content dt:first-child { margin-top: 0; }
.entry__content dd {
	margin: .35rem 0 0 1.25rem;
	color: var(--c-text);
}
.entry__content small { font-size: .85em; color: var(--c-text-muted); }
.entry__content sub,
.entry__content sup { font-size: .75em; line-height: 1; }

/* Image alignment within content (legacy + Gutenberg) */
.entry__content .alignleft  { float: left;  margin: .25rem 1.5rem 1rem 0; max-width: 50%; }
.entry__content .alignright { float: right; margin: .25rem 0 1rem 1.5rem; max-width: 50%; }
.entry__content .aligncenter { display: block; margin: 1.5rem auto; }
@media (max-width: 600px) {
	.entry__content .alignleft,
	.entry__content .alignright {
		float: none;
		margin: 1rem auto;
		max-width: 100%;
		display: block;
	}
}

/* ---- Gutenberg core blocks ---- */

/* Button block */
.wp-block-button {
	margin: 1rem 0;
}
.wp-block-button .wp-block-button__link {
	display: inline-block;
	background: var(--c-primary);
	color: #fff;
	padding: .75rem 1.5rem;
	border-radius: 6px;
	font-weight: 700;
	text-decoration: none;
	border: 1px solid var(--c-primary);
	transition: background .15s, border-color .15s, transform .1s;
}
.wp-block-button .wp-block-button__link:hover {
	background: var(--c-primary-dark);
	border-color: var(--c-primary-dark);
	color: #fff;
	text-decoration: none;
	transform: translateY(-1px);
}
.wp-block-button.is-style-outline .wp-block-button__link {
	background: transparent;
	color: var(--c-primary);
}
.wp-block-button.is-style-outline .wp-block-button__link:hover {
	background: var(--c-primary);
	color: #fff;
}
.wp-block-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: .75rem;
	margin: 1.25rem 0;
}
.wp-block-buttons .wp-block-button { margin: 0; }

/* Pullquote block */
.wp-block-pullquote {
	border-top: 4px solid var(--c-primary);
	border-bottom: 4px solid var(--c-primary);
	padding: 1.75rem 1.5rem;
	margin: 2rem 0;
	text-align: center;
	font-size: 1.25rem;
	line-height: 1.5;
	font-style: italic;
	color: var(--c-text);
}
.wp-block-pullquote cite {
	display: block;
	margin-top: .75rem;
	font-size: .9rem;
	font-style: normal;
	color: var(--c-text-muted);
	letter-spacing: .04em;
	text-transform: uppercase;
	font-weight: 600;
}

/* Cover block */
.wp-block-cover {
	position: relative;
	min-height: 320px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 2rem 1.5rem;
	margin: 1.75rem 0;
	background: #1f2937;
	border-radius: var(--radius-md);
	overflow: hidden;
}
.wp-block-cover__inner-container { position: relative; z-index: 2; color: #fff; text-align: center; max-width: 800px; }
.wp-block-cover .wp-block-cover__background { position: absolute; inset: 0; background: rgba(0,0,0,.4); }

/* Columns block */
.wp-block-columns {
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem;
	margin: 1.5rem 0;
}
.wp-block-columns > .wp-block-column { flex: 1; min-width: 240px; }
@media (max-width: 767px) {
	.wp-block-columns { flex-direction: column; gap: 1rem; }
	.wp-block-columns > .wp-block-column { flex: 1 1 100%; }
}

/* Media + Text block */
.wp-block-media-text {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.5rem;
	align-items: center;
	margin: 1.75rem 0;
}
.wp-block-media-text > .wp-block-media-text__media img { width: 100%; height: auto; border-radius: var(--radius-sm); }
@media (max-width: 600px) {
	.wp-block-media-text { grid-template-columns: 1fr; }
}

/* Separator block */
.wp-block-separator,
.entry__content .wp-block-separator {
	border: 0;
	height: 1px;
	background: var(--c-border);
	margin: 2.5rem auto;
	max-width: 100%;
}
.wp-block-separator.is-style-wide { max-width: 100%; }
.wp-block-separator.is-style-dots {
	background: transparent;
	color: var(--c-text-muted);
	font-size: 1.5rem;
	letter-spacing: 1em;
	height: auto;
	line-height: 1;
	text-align: center;
}
.wp-block-separator.is-style-dots::before {
	content: "···";
	display: block;
}

/* Spacer block */
.wp-block-spacer { display: block; margin: 0; }

/* Embed block (YouTube, Twitter, etc.) */
.wp-block-embed {
	margin: 1.75rem 0;
}
.wp-block-embed__wrapper {
	position: relative;
}
.wp-block-embed.is-type-video .wp-block-embed__wrapper {
	aspect-ratio: 16 / 9;
}
.wp-block-embed.is-type-video iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	border-radius: var(--radius-sm);
}
.wp-block-embed figcaption {
	text-align: center;
	font-size: .9rem;
	color: var(--c-text-muted);
	margin-top: .5rem;
}

/* Video / Audio blocks */
.wp-block-video video,
.wp-block-audio audio { width: 100%; max-width: 100%; }
.wp-block-video figcaption,
.wp-block-audio figcaption {
	text-align: center;
	font-size: .9rem;
	color: var(--c-text-muted);
	margin-top: .5rem;
}

/* File block */
.wp-block-file {
	background: #eff7ff;
	border: 1px solid #cfe2ff;
	border-radius: var(--radius-sm);
	padding: 1rem 1.25rem;
	margin: 1.25rem 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem;
}
.wp-block-file a {
	color: var(--c-link);
	font-weight: 600;
	text-decoration: none;
}
.wp-block-file .wp-block-file__button {
	display: inline-block;
	background: var(--c-primary);
	color: #fff;
	padding: .5rem 1.25rem;
	border-radius: 4px;
	font-weight: 700;
	text-decoration: none;
}

/* Table block (Gutenberg) — separate from entry__content table */
.wp-block-table {
	margin: 1.5rem 0;
	overflow-x: auto;
}
.wp-block-table table {
	width: 100%;
	border-collapse: collapse;
}
.wp-block-table th,
.wp-block-table td {
	border: 1px solid var(--c-border);
	padding: .75rem;
}
.wp-block-table th { background: #f3f6fa; font-weight: 700; }

/* Code / Preformatted block */
.wp-block-code,
.wp-block-preformatted {
	background: #1f2937;
	color: #e5e7eb;
	padding: 1rem 1.25rem;
	border-radius: var(--radius-sm);
	overflow-x: auto;
	margin: 1.25rem 0;
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
	font-size: .95rem;
	line-height: 1.55;
}
.wp-block-code code { background: transparent; color: inherit; padding: 0; }

/* Verse block */
.wp-block-verse {
	white-space: pre-wrap;
	font-family: var(--font-system);
	background: rgba(0, 116, 224, .04);
	border-left: 4px solid var(--c-primary);
	padding: 1rem 1.25rem;
	margin: 1.5rem 0;
	border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
	font-style: italic;
}

/* List / Heading blocks — mainly normalisation */
.wp-block-list { margin: 0 0 1.25rem; }

/* Legacy gallery shortcode */
.gallery {
	display: grid;
	gap: .75rem;
	margin: 1.25rem 0;
}
.gallery-columns-2 { grid-template-columns: repeat(2, 1fr); }
.gallery-columns-3 { grid-template-columns: repeat(3, 1fr); }
.gallery-columns-4 { grid-template-columns: repeat(4, 1fr); }
.gallery-columns-5 { grid-template-columns: repeat(5, 1fr); }
.gallery-columns-6 { grid-template-columns: repeat(6, 1fr); }
@media (max-width: 600px) {
	.gallery-columns-3,
	.gallery-columns-4,
	.gallery-columns-5,
	.gallery-columns-6 { grid-template-columns: repeat(2, 1fr); }
}
.gallery-item img {
	width: 100%;
	height: auto;
	border-radius: var(--radius-sm);
	display: block;
}
.gallery-caption {
	font-size: .85rem;
	color: var(--c-text-muted);
	text-align: center;
	margin-top: .35rem;
}

/* WP caption (legacy) */
.wp-caption {
	max-width: 100%;
	margin: 1.25rem 0;
}
.wp-caption img { max-width: 100%; height: auto; border-radius: var(--radius-sm); }
.wp-caption-text {
	font-size: .9rem;
	color: var(--c-text-muted);
	text-align: center;
	margin-top: .5rem;
}

/* ---- Comments polish ----
   The existing comments.php uses old Bootstrap utility wrappers
   (p-3 p-lg-5 bg-white mb-5). These work because those utilities
   exist in our stylesheet, but the comment-form labels and submit
   button could use a refresh for the bumped typography. */
.comments-area { font-size: 1rem; line-height: 1.65; }
.comments-title {
	font-size: 1.4rem;
	font-weight: 700;
	margin: 0 0 1.5rem;
	color: var(--c-text);
}
.comment-reply-title {
	font-size: 1.4rem;
	font-weight: 700;
	margin: 1.5rem 0 1rem;
	color: var(--c-text);
}
.comment-form label {
	display: block;
	font-weight: 600;
	margin-bottom: .35rem;
	color: var(--c-text);
	font-size: .95rem;
}
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
	width: 100%;
	padding: .65rem .85rem;
	border: 1px solid var(--c-border);
	border-radius: 6px;
	font-family: inherit;
	font-size: 1rem;
	background: #fff;
	transition: border-color .15s, box-shadow .15s;
}
.comment-form input:focus,
.comment-form textarea:focus {
	outline: none;
	border-color: var(--c-primary);
	box-shadow: 0 0 0 3px rgba(0, 116, 224, .15);
}
.comment-form .form-submit { margin-top: 1.25rem; }
.comment-form .submit,
.comment-form input[type="submit"] {
	display: inline-block;
	background: var(--c-primary);
	color: #fff;
	padding: .75rem 1.75rem;
	border-radius: 6px;
	font-weight: 700;
	font-size: 1rem;
	border: 0;
	cursor: pointer;
	transition: background .15s, transform .1s;
}
.comment-form .submit:hover,
.comment-form input[type="submit"]:hover {
	background: var(--c-primary-dark);
	transform: translateY(-1px);
}
.comment-list .children { padding-left: 1.5rem; border-left: 2px solid var(--c-border); margin-top: 1rem; }
.no-comments { color: var(--c-text-muted); font-style: italic; margin: 1rem 0; }

/* ---- Empty state polish ---- */
.no-results {
	text-align: center;
	padding: 2rem 1rem;
}
.no-results .entry__title { margin-bottom: 1.25rem; }
.no-results .entry__title span { color: var(--c-primary); }
.no-results .search-form { max-width: 480px; margin: 1.5rem auto 0; }

/* ---- Archive hero — title can be very long, ensure wrap ---- */
.hero--archive .hero__title,
.hero--search .hero__title { overflow-wrap: break-word; word-wrap: break-word; }

/* Mobile tightening for new additions */
@media (max-width: 767px) {
	.wp-block-pullquote { padding: 1.25rem 1rem; font-size: 1.1rem; }
	.wp-block-button .wp-block-button__link { padding: .65rem 1.25rem; font-size: .95rem; }
	.wp-block-cover { min-height: 220px; padding: 1.5rem 1rem; }
	.comments-title,
	.comment-reply-title { font-size: 1.2rem; }
}

/* ============================================================
   ProvideSupport live-chat widget positioning
   The widget's bundled script positions itself at the bottom-LEFT
   by default, which overlaps the footer awkwardly. Force it into
   the bottom-RIGHT corner above the back-to-top button so the
   two floating CTAs stack cleanly.
   On mobile, hide it entirely — the "Live Chat" CTA in the nav
   menu and footer already cover that need, and a floating widget
   competes too aggressively for limited viewport space.
   ============================================================ */
.providesupport,
.providesupport > div,
#ciG3PG {
	position: fixed !important;
	bottom: 5.25rem !important;     /* above back-to-top (44px button + 1rem gap + 1.25rem buffer) */
	right: 1rem !important;
	left: auto !important;
	top: auto !important;
	z-index: 95 !important;          /* below back-to-top (z=100) so the up-arrow stays accessible */
}

/* Hide on mobile — Live Chat link in nav + footer is enough */
@media (max-width: 767px) {
	.providesupport,
	.providesupport > div,
	#ciG3PG { display: none !important; }
}

/* Hide the sidebar search wrapper specifically if a widget re-adds it
   (defensive — if user adds the Search widget through the admin,
   we won't ship it in the sidebar layout anyway, but this catches it). */
.content-sidebar .widget_search,
.content-sidebar .sidebar-block--search {
	display: none;
}

/* ============================================================
   Reduced motion — respect prefers-reduced-motion
   Disables animations and transitions for users who've enabled
   that OS-level setting (accessibility + Lighthouse best practice).
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
}