/* ==========================================================================
   Qcall.ai Brand Skin for Kadence — DESIGN.md compliant
   Default theme: dark obsidian. Ivory paper appears only as deliberate moments.
   Token source: DESIGN.md §2–§7. No hardcoded hex outside :root.
   ========================================================================== */

:root {
	color-scheme: dark;

	/* ---- Primitives — Obsidian (backgrounds & depth) ----
	   NOTE: Lifted ~50% lighter than DESIGN.md spec at user request
	   ("theme looks too darkish, make it a little lesser"). Iris/plum
	   undertone preserved so the visual character stays the same. */
	--obsidian-0: #15111F;
	--obsidian-1: #1A1626;
	--obsidian-2: #1F1B2D;
	--obsidian-3: #272332;
	--obsidian-4: #302B3D;
	--obsidian-5: #3A3349;

	/* ---- Iris (primary brand) ---- */
	--iris-50:  #F4EFFF;
	--iris-100: #E5DBFF;
	--iris-200: #C8B4FE;
	--iris-300: #A788FC;
	--iris-400: #8A63F8;
	--iris-500: #6E3CF0;
	--iris-600: #5A27D8;
	--iris-700: #4518AE;
	--iris-800: #311280;
	--iris-900: #1E0B52;

	/* ---- Plum (warm violet glow) ---- */
	--plum-300: #E39CFF;
	--plum-400: #C471FF;
	--plum-500: #A647F6;

	/* ---- Ember (warm "human moment") ---- */
	--ember-300: #FFC8A8;
	--ember-400: #FFA073;
	--ember-500: #F57F4A;

	/* ---- Ivory (foreground & light surfaces) ---- */
	--ivory-0: #FFFFFF;
	--ivory-1: #FBF7F1;
	--ivory-2: #F1EBE0;
	--ivory-3: #E4DDCF;
	--ivory-4: #C9C1B1;

	/* ---- Fog (cool muted text on dark) ---- */
	--fog-300: #B8AFC8;
	--fog-400: #8C8299;
	--fog-500: #5F5770;
	--fog-600: #3E3750;

	/* ---- Signal ---- */
	--signal-success: #38D399;
	--signal-warning: #F5B544;
	--signal-danger:  #F0556A;
	--signal-info:    #63A6FF;

	/* ---- Semantic aliases (use these in component CSS) ---- */
	--bg:          var(--obsidian-0);
	--bg-elev-1:   var(--obsidian-1);
	--bg-elev-2:   var(--obsidian-2);
	--bg-card:     var(--obsidian-3);
	--bg-card-hi:  var(--obsidian-4);
	--hairline:    rgba(255, 255, 255, 0.06);
	--hairline-hi: rgba(255, 255, 255, 0.10);

	--fg:         var(--ivory-1);
	--fg-muted:   var(--fog-300);
	--fg-subtle:  var(--fog-400);
	--fg-inverse: var(--obsidian-0);

	--brand:    var(--iris-500);
	--brand-hi: var(--iris-400);
	--brand-lo: var(--iris-600);
	--brand-fg: var(--ivory-0);

	--accent-warm: var(--ember-400);
	--accent-glow: var(--plum-400);

	/* ---- Gradients ---- */
	--grad-aurora:    radial-gradient(120% 90% at 10% 0%, #4518AE 0%, #1E0B52 35%, #15111F 70%);
	--grad-iris:      linear-gradient(135deg, #8A63F8 0%, #6E3CF0 50%, #4518AE 100%);
	--grad-warm-iris: linear-gradient(135deg, #FFA073 0%, #A647F6 45%, #6E3CF0 100%);
	--grad-halo:      radial-gradient(circle at 50% 50%, rgba(138, 99, 248, 0.45) 0%, rgba(138, 99, 248, 0) 60%);
	--grad-paper:     linear-gradient(180deg, #FBF7F1 0%, #F1EBE0 100%);

	/* ---- Spacing (4px base) ---- */
	--sp-1:  4px;
	--sp-2:  8px;
	--sp-3:  12px;
	--sp-4:  16px;
	--sp-5:  24px;
	--sp-6:  32px;
	--sp-7:  48px;
	--sp-8:  64px;
	--sp-9:  96px;
	--sp-10: 128px;

	/* ---- Radius ---- */
	--r-xs:   4px;
	--r-sm:   8px;
	--r-md:   12px;
	--r-lg:   18px;
	--r-xl:   28px;
	--r-2xl:  40px;
	--r-pill: 999px;

	/* ---- Shadow ---- */
	--shadow-sm:        0 1px 2px rgba(0, 0, 0, 0.4);
	--shadow-md:        0 8px 24px rgba(0, 0, 0, 0.35), 0 2px 6px rgba(0, 0, 0, 0.25);
	--shadow-lg:        0 24px 60px rgba(0, 0, 0, 0.55), 0 6px 16px rgba(0, 0, 0, 0.35);
	--shadow-glow:      0 0 0 1px rgba(138, 99, 248, 0.35), 0 20px 60px rgba(110, 60, 240, 0.35);
	--shadow-inset-top: inset 0 1px 0 rgba(255, 255, 255, 0.08);

	/* ---- Motion ---- */
	--dur-fast: 120ms;
	--dur-base: 220ms;
	--dur-slow: 420ms;
	--ease-out:    cubic-bezier(0.2, 0.7, 0.2, 1);
	--ease-in-out: cubic-bezier(0.65, 0.05, 0.35, 1);

	/* ---- Type families ---- */
	--font-display: "Instrument Serif", "Times New Roman", serif;
	--font-sans:    "Inter Tight", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
	--font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

	/* ---- Type scale ---- */
	--fs-xs:   12px;
	--fs-sm:   14px;
	--fs-base: 16px;
	--fs-md:   18px;
	--fs-lg:   22px;
	--fs-xl:   28px;
	--fs-2xl:  36px;
	--fs-3xl:  48px;
	--fs-4xl:  64px;
	--fs-5xl:  84px;
	--fs-6xl:  112px;

	--lh-tight:  1.05;
	--lh-snug:   1.20;
	--lh-normal: 1.45;
	--lh-loose:  1.60;

	--tr-tight:  -0.03em;
	--tr-snug:   -0.015em;
	--tr-normal: 0;
	--tr-wide:   0.04em;
	--tr-caps:   0.14em;

	/* ---- Map onto Kadence's palette tokens (dark theme) ---- */
	--global-palette1: var(--iris-500);
	--global-palette2: var(--iris-400);
	--global-palette3: var(--ivory-1);
	--global-palette4: var(--ivory-1);
	--global-palette5: var(--fog-300);
	--global-palette6: var(--fog-400);
	--global-palette7: var(--hairline-hi);
	--global-palette8: var(--obsidian-2);
	--global-palette9: var(--obsidian-0);

	/* Kadence Blocks color variables */
	--global-kb-color-1: var(--iris-500);
	--global-kb-color-2: var(--iris-400);
	--global-kb-color-3: var(--ivory-1);
	--global-kb-color-4: var(--ivory-1);
	--global-kb-color-5: var(--fog-300);
	--global-kb-color-6: var(--fog-400);
	--global-kb-color-7: var(--hairline-hi);
	--global-kb-color-8: var(--obsidian-2);
	--global-kb-color-9: var(--obsidian-0);

	--global-body-font-family:    var(--font-sans);
	--global-heading-font-family: var(--font-display);
}

/* ==========================================================================
   Base / page surfaces
   ========================================================================== */

html {
	background-color: var(--bg);
}

body {
	background-color: var(--bg);
	color: var(--fg);
	font-family: var(--font-sans);
	font-size: var(--fs-md);
	line-height: var(--lh-loose);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	background-image:
		radial-gradient(60% 50% at 12% -8%, rgba(110, 60, 240, 0.22) 0%, rgba(110, 60, 240, 0) 60%),
		radial-gradient(40% 40% at 88% 6%, rgba(196, 113, 255, 0.12) 0%, rgba(196, 113, 255, 0) 65%),
		radial-gradient(35% 35% at 50% 100%, rgba(255, 160, 115, 0.06) 0%, rgba(255, 160, 115, 0) 70%);
	background-attachment: fixed;
	background-repeat: no-repeat;
}

/* Force Kadence content wrappers to be transparent so body ambient shows through */
.site,
.site-container,
.content-container,
.entry-content-wrap,
.content-area,
.content-bg,
#main-content,
main.site-main {
	background-color: transparent !important;
	color: var(--fg);
}

/* ==========================================================================
   Typography
   ========================================================================== */

body, button, input, select, textarea, optgroup {
	font-family: var(--font-sans) !important;
	color: var(--fg);
}

h1, h2, h3, h4, h5, h6,
.site-title, .entry-title,
.wp-block-heading,
.kt-title, .kb-adv-heading {
	color: var(--fg);
	font-weight: 400;
	letter-spacing: var(--tr-tight);
	line-height: var(--lh-tight);
	margin: 0 0 var(--sp-4);
}

h1, h2, .entry-title, .kb-adv-heading.kt-title-h1, .kb-adv-heading.kt-title-h2 {
	font-family: var(--font-display) !important;
}

h1, .entry-title {
	font-size: clamp(40px, 5vw, 72px);
	letter-spacing: -0.03em;
	line-height: 1.05;
}

h2 {
	font-size: clamp(32px, 4vw, 56px);
	letter-spacing: -0.025em;
	line-height: 1.10;
}

h3 {
	font-family: var(--font-sans) !important;
	font-weight: 500;
	font-size: clamp(22px, 2.4vw, 28px);
	letter-spacing: -0.015em;
	line-height: 1.20;
}

h4 {
	font-family: var(--font-sans) !important;
	font-weight: 500;
	font-size: var(--fs-lg);
	line-height: var(--lh-snug);
	letter-spacing: var(--tr-snug);
}

h5, h6 {
	font-family: var(--font-sans) !important;
	font-weight: 600;
	font-size: var(--fs-base);
	line-height: var(--lh-snug);
}

/* qcall.ai signature: italic Instrument Serif accent inside headings */
h1 em, h2 em, .entry-title em,
.serif-italic, .t-serif-italic {
	font-family: var(--font-display) !important;
	font-style: italic;
	color: var(--iris-300);
}

/* Body / paragraph */
.entry-content p,
.entry-summary p,
.kb-adv-text p {
	font-size: var(--fs-md);
	line-height: var(--lh-loose);
	color: var(--fg);
	margin: 0 0 var(--sp-5);
}

/* Lead paragraph */
.entry-content > p:first-of-type {
	font-size: var(--fs-lg);
	line-height: 1.5;
	color: var(--fg);
}

/* Mono */
code, pre, kbd, samp,
.wp-block-code, .wp-block-preformatted {
	font-family: var(--font-mono) !important;
}

/* ==========================================================================
   Header — glass-morphic obsidian
   ========================================================================== */

.site-header,
.site-header-wrap,
.site-main-header-wrap,
.site-main-header-inner-wrap,
.site-top-header-wrap,
.site-bottom-header-wrap,
.site-header-inner-wrap,
#main-header {
	background-color: rgba(21, 17, 31, 0.72) !important;
	backdrop-filter: blur(18px) saturate(160%);
	-webkit-backdrop-filter: blur(18px) saturate(160%);
	border-bottom: 1px solid var(--hairline);
}

.site-header .site-title,
.site-header .site-description,
.site-header a,
.site-header .header-menu-container .menu > li > a,
.site-header .header-navigation a,
.site-header .header-button,
.site-header .site-branding a {
	color: var(--ivory-1) !important;
	font-family: var(--font-sans) !important;
	font-weight: 500;
	letter-spacing: 0.005em;
	transition: color var(--dur-fast) var(--ease-out);
}

.site-header a:hover,
.site-header .header-menu-container .menu > li > a:hover {
	color: var(--iris-200) !important;
}

.site-header .header-menu-container .menu > li.current-menu-item > a {
	color: var(--iris-200) !important;
}

.site-header .header-menu-container .sub-menu {
	background-color: var(--bg-elev-2) !important;
	border: 1px solid var(--hairline-hi);
	border-radius: var(--r-md);
	box-shadow: var(--shadow-md);
	padding: var(--sp-2);
	min-width: 220px;
}

.site-header .header-menu-container .sub-menu a {
	color: var(--ivory-1) !important;
	border-radius: var(--r-sm);
	padding: var(--sp-2) var(--sp-3) !important;
}

.site-header .header-menu-container .sub-menu a:hover {
	background-color: var(--bg-card) !important;
	color: var(--iris-200) !important;
}

.site-branding .site-title {
	font-family: var(--font-display) !important;
	font-weight: 400;
}

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer,
.site-footer-wrap,
.site-top-footer-wrap,
.site-middle-footer-wrap,
.site-bottom-footer-wrap {
	background-color: var(--obsidian-1) !important;
	color: var(--fg-muted);
	border-top: 1px solid var(--hairline);
}

.site-footer a,
.site-footer .widget-title,
.site-footer h1, .site-footer h2, .site-footer h3, .site-footer h4 {
	color: var(--fg) !important;
	font-family: var(--font-sans) !important;
}

.site-footer .widget-title {
	font-size: var(--fs-xs);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: var(--tr-caps);
	color: var(--iris-300) !important;
}

.site-footer a:hover { color: var(--iris-200) !important; }

/* ==========================================================================
   Loop / cards — varied hierarchy (DESIGN.md §15 anti-uniform-card)
   ========================================================================== */

.loop-entry,
.entry.loop-entry,
.kt-blocks-post-grid-item,
.kadence-blocks-post-grid .entry,
.search .loop-entry, .archive .loop-entry {
	background-color: var(--bg-card);
	border: 1px solid var(--hairline);
	border-radius: var(--r-xl);
	box-shadow: var(--shadow-inset-top);
	overflow: hidden;
	transition:
		transform var(--dur-base) var(--ease-out),
		box-shadow var(--dur-base) var(--ease-out),
		border-color var(--dur-base) var(--ease-out),
		background-color var(--dur-base) var(--ease-out);
}

.loop-entry:hover,
.kt-blocks-post-grid-item:hover {
	background-color: var(--bg-card-hi);
	border-color: rgba(138, 99, 248, 0.35);
	box-shadow: var(--shadow-glow);
	transform: translateY(-3px);
}

/* First card in loop = featured emphasis */
.loop-entry:first-child {
	border-color: rgba(138, 99, 248, 0.18);
	background:
		radial-gradient(120% 80% at 100% 0%, rgba(110, 60, 240, 0.10), transparent 60%),
		var(--bg-card);
}

.loop-entry .entry-content-wrap,
.loop-entry-content-wrap {
	padding: var(--sp-5);
}

.loop-entry .entry-title,
.loop-entry .entry-title a {
	font-family: var(--font-display) !important;
	color: var(--fg) !important;
	font-size: clamp(22px, 2.2vw, 30px);
	line-height: 1.15;
	letter-spacing: -0.02em;
	font-weight: 400;
	transition: color var(--dur-fast) var(--ease-out);
}

.loop-entry .entry-title a:hover { color: var(--iris-200) !important; }

.loop-entry .entry-summary,
.loop-entry .entry-summary p {
	color: var(--fg-muted);
	font-size: var(--fs-base);
	line-height: var(--lh-normal);
}

.loop-entry .entry-meta,
.loop-entry .entry-meta a,
.loop-entry .entry-taxonomies,
.entry-meta {
	font-family: var(--font-mono);
	font-size: var(--fs-xs);
	color: var(--fg-subtle);
	letter-spacing: 0.04em;
}

.loop-entry .post-thumbnail img,
.kt-blocks-post-grid-item img,
.loop-entry .post-thumbnail {
	transition: transform var(--dur-slow) var(--ease-out);
}

.loop-entry:hover .post-thumbnail img {
	transform: scale(1.04);
}

/* ==========================================================================
   Body links
   ========================================================================== */

.entry-content a,
.entry-summary a,
.comment-content a {
	color: var(--iris-300);
	text-decoration-color: rgba(167, 136, 252, 0.35);
	text-underline-offset: 3px;
	transition: color var(--dur-fast) var(--ease-out), text-decoration-color var(--dur-fast) var(--ease-out);
}

.entry-content a:hover,
.entry-summary a:hover,
.comment-content a:hover {
	color: var(--iris-200);
	text-decoration-color: var(--iris-300);
}

/* ==========================================================================
   Buttons — primary uses iris gradient + glow
   ========================================================================== */

.button,
.wp-block-button__link,
button.wp-block-button__link,
.kb-button,
.kb-button.kb-btn-global-inherit,
.kt-btn,
input[type="submit"],
.search-submit {
	background: var(--grad-iris) !important;
	color: var(--brand-fg) !important;
	border: none !important;
	border-radius: var(--r-md) !important;
	font-family: var(--font-sans) !important;
	font-weight: 600;
	font-size: var(--fs-base);
	letter-spacing: 0.005em;
	padding: 12px var(--sp-5) !important;
	min-height: 44px;
	box-shadow: var(--shadow-md);
	transition:
		transform var(--dur-fast) var(--ease-out),
		box-shadow var(--dur-base) var(--ease-out),
		filter var(--dur-fast) var(--ease-out);
	cursor: pointer;
	text-decoration: none !important;
}

.button:hover,
.wp-block-button__link:hover,
.kb-button:hover, .kt-btn:hover,
input[type="submit"]:hover, .search-submit:hover {
	box-shadow: var(--shadow-glow);
	transform: translateY(-1px);
	filter: brightness(1.05);
}

.button:active, .wp-block-button__link:active,
.kb-button:active, .kt-btn:active {
	transform: translateY(0);
	filter: brightness(0.95);
}

/* Outline / secondary */
.wp-block-button.is-style-outline .wp-block-button__link {
	background: var(--bg-card) !important;
	color: var(--fg) !important;
	border: 1px solid var(--hairline-hi) !important;
	box-shadow: var(--shadow-inset-top);
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
	background: var(--bg-card-hi) !important;
	color: var(--iris-200) !important;
	border-color: rgba(138, 99, 248, 0.35) !important;
	box-shadow: var(--shadow-md);
}

/* ==========================================================================
   Form fields
   ========================================================================== */

input[type="text"], input[type="email"], input[type="url"],
input[type="search"], input[type="number"], input[type="tel"],
input[type="password"], textarea, select {
	background-color: var(--bg-elev-2) !important;
	border: 1px solid var(--hairline-hi) !important;
	border-radius: var(--r-sm) !important;
	color: var(--fg) !important;
	font-family: var(--font-sans) !important;
	font-size: var(--fs-base);
	padding: 10px var(--sp-3);
	min-height: 44px;
	transition:
		border-color var(--dur-fast) var(--ease-out),
		box-shadow var(--dur-fast) var(--ease-out);
}

input::placeholder, textarea::placeholder {
	color: var(--fg-subtle);
}

input:focus, textarea:focus, select:focus {
	border-color: var(--brand-hi) !important;
	box-shadow: 0 0 0 2px rgba(110, 60, 240, 0.4) !important;
	outline: none !important;
}

label {
	color: var(--fg-muted);
	font-size: var(--fs-sm);
	font-family: var(--font-sans);
	font-weight: 500;
}

/* ==========================================================================
   Single post — long-form reading with hero halo
   ========================================================================== */

.single .entry-header,
.single .entry-hero,
.page .entry-header {
	padding: var(--sp-9) 0 var(--sp-7);
	position: relative;
}

.single .entry-header::before,
.page .entry-header::before {
	content: '';
	position: absolute;
	inset: -10% 10% auto 10%;
	height: 60%;
	background: var(--grad-halo);
	opacity: 0.6;
	pointer-events: none;
	z-index: 0;
	filter: blur(20px);
}

.single .entry-header > *,
.page .entry-header > * { position: relative; z-index: 1; }

.single .entry-title,
.page .entry-title {
	font-size: clamp(36px, 5.5vw, 84px);
	line-height: 1.05;
	letter-spacing: -0.03em;
	font-weight: 400;
	font-family: var(--font-display) !important;
}

/* Featured image */
.post-thumbnail img,
.entry-header .post-thumbnail img {
	border-radius: var(--r-xl);
	overflow: hidden;
	box-shadow: var(--shadow-lg);
}

/* Content rhythm */
.entry-content > * + * { margin-top: var(--sp-4); }
.entry-content > h2 { margin-top: var(--sp-7); margin-bottom: var(--sp-3); }
.entry-content > h3 { margin-top: var(--sp-6); margin-bottom: var(--sp-3); }
.entry-content > h4 { margin-top: var(--sp-5); margin-bottom: var(--sp-2); }

/* Blockquote */
.entry-content blockquote,
.wp-block-quote {
	border-left: 3px solid var(--iris-500);
	background: var(--bg-elev-1);
	padding: var(--sp-5) var(--sp-6);
	border-radius: 0 var(--r-md) var(--r-md) 0;
	font-family: var(--font-display);
	font-style: italic;
	font-size: var(--fs-lg);
	line-height: 1.45;
	color: var(--fg);
	margin: var(--sp-6) 0;
	position: relative;
	box-shadow: var(--shadow-inset-top);
}

.entry-content blockquote::after {
	content: '"';
	position: absolute;
	top: -10px;
	right: var(--sp-5);
	font-size: 80px;
	font-family: var(--font-display);
	color: var(--iris-500);
	opacity: 0.25;
	line-height: 1;
	pointer-events: none;
}

/* Inline code */
.entry-content code:not(pre code) {
	background: var(--bg-elev-2);
	color: var(--iris-200);
	padding: 0.15em 0.45em;
	border-radius: var(--r-xs);
	font-size: 0.92em;
	border: 1px solid var(--hairline);
}

/* Code block */
.wp-block-code, pre.wp-block-preformatted, pre {
	background: var(--bg-elev-2);
	color: var(--ivory-1);
	padding: var(--sp-5) var(--sp-6);
	border-radius: var(--r-md);
	border: 1px solid var(--hairline-hi);
	box-shadow: var(--shadow-inset-top);
	overflow-x: auto;
	line-height: 1.55;
	font-size: var(--fs-sm);
}

/* Lists */
.entry-content ul,
.entry-content ol {
	padding-left: 1.4em;
}

.entry-content li {
	margin-bottom: var(--sp-2);
	line-height: 1.55;
	color: var(--fg);
}

.entry-content ul li::marker { color: var(--iris-400); }
.entry-content ol li::marker {
	color: var(--iris-300);
	font-family: var(--font-mono);
	font-weight: 500;
}

/* Images */
.entry-content img,
.wp-block-image img {
	border-radius: var(--r-lg);
	max-width: 100%;
	height: auto;
}

.wp-block-image figcaption {
	color: var(--fg-subtle);
	font-size: var(--fs-sm);
	margin-top: var(--sp-3);
	text-align: center;
	font-family: var(--font-sans);
}

/* Tables */
.entry-content table {
	border-collapse: separate;
	border-spacing: 0;
	border-radius: var(--r-md);
	overflow: hidden;
	border: 1px solid var(--hairline-hi);
	width: 100%;
	margin: var(--sp-5) 0;
	background: var(--bg-card);
}

.entry-content th {
	background: var(--bg-elev-2);
	color: var(--fg);
	font-family: var(--font-sans);
	font-weight: 600;
	text-align: left;
	padding: var(--sp-3) var(--sp-4);
	border-bottom: 1px solid var(--hairline-hi);
	font-size: var(--fs-sm);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.entry-content td {
	padding: var(--sp-3) var(--sp-4);
	border-bottom: 1px solid var(--hairline);
	color: var(--fg);
}

.entry-content tr:last-child td { border-bottom: none; }
.entry-content tr:hover td { background: var(--bg-card-hi); }

/* Separator */
hr, .wp-block-separator {
	border: 0;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--hairline-hi), transparent);
	margin: var(--sp-7) 0;
}

.wp-block-separator.is-style-wide {
	background: linear-gradient(90deg, transparent, var(--iris-400), transparent);
}

/* ==========================================================================
   Pagination & post navigation
   ========================================================================== */

.pagination, .post-navigation, .nav-links, .navigation.posts-navigation {
	margin-top: var(--sp-8);
}

.pagination .page-numbers,
.nav-links a, .nav-links span,
.posts-navigation a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0 var(--sp-3);
	border-radius: var(--r-md);
	border: 1px solid var(--hairline-hi);
	background: var(--bg-card);
	color: var(--fg);
	font-family: var(--font-sans);
	font-weight: 500;
	text-decoration: none;
	transition: all var(--dur-fast) var(--ease-out);
	margin: 0 var(--sp-1);
}

.pagination .page-numbers.current {
	background: var(--grad-iris) !important;
	border-color: transparent !important;
	color: var(--brand-fg) !important;
	box-shadow: var(--shadow-md);
}

.pagination .page-numbers:not(.current):hover,
.nav-links a:hover,
.posts-navigation a:hover {
	background: var(--bg-card-hi);
	border-color: rgba(138, 99, 248, 0.35);
	color: var(--iris-200);
	transform: translateY(-1px);
}

/* ==========================================================================
   Tags / taxonomies — iris pill chips
   ========================================================================== */

.entry-taxonomies a,
.entry-meta a.term,
.tagcloud a,
.cat-links a,
.tags-links a {
	display: inline-flex;
	align-items: center;
	background: rgba(110, 60, 240, 0.12);
	color: var(--iris-200) !important;
	padding: 4px var(--sp-3) !important;
	border-radius: var(--r-pill) !important;
	font-family: var(--font-sans) !important;
	font-size: var(--fs-xs) !important;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	text-decoration: none !important;
	border: 1px solid rgba(138, 99, 248, 0.2);
	transition: all var(--dur-fast) var(--ease-out);
	margin: 0 var(--sp-1) var(--sp-1) 0;
	line-height: 1.4;
}

.entry-taxonomies a:hover,
.tagcloud a:hover,
.cat-links a:hover,
.tags-links a:hover {
	background: var(--iris-500) !important;
	color: var(--brand-fg) !important;
	border-color: var(--iris-400);
	box-shadow: 0 4px 12px rgba(110, 60, 240, 0.4);
}

/* ==========================================================================
   Sidebar / widgets
   ========================================================================== */

.widget-area .widget,
.sidebar .widget,
#secondary .widget {
	background: var(--bg-card);
	border: 1px solid var(--hairline);
	border-radius: var(--r-lg);
	padding: var(--sp-5);
	margin-bottom: var(--sp-5);
	box-shadow: var(--shadow-inset-top);
}

.widget-title {
	font-family: var(--font-sans) !important;
	font-size: var(--fs-xs);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: var(--tr-caps);
	color: var(--iris-300);
	margin-bottom: var(--sp-4);
	padding-bottom: var(--sp-3);
	border-bottom: 1px solid var(--hairline);
}

.widget a { color: var(--fg); transition: color var(--dur-fast) var(--ease-out); }
.widget a:hover { color: var(--iris-200); }

.widget ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

.widget ul li {
	padding: var(--sp-2) 0;
	border-bottom: 1px solid var(--hairline);
	color: var(--fg-muted);
	font-size: var(--fs-sm);
}

.widget ul li:last-child { border-bottom: none; }

/* ==========================================================================
   Comments
   ========================================================================== */

.comments-area {
	background: var(--bg-elev-1);
	border-radius: var(--r-xl);
	padding: var(--sp-6);
	margin-top: var(--sp-8);
	border: 1px solid var(--hairline);
	box-shadow: var(--shadow-inset-top);
}

.comments-title, .comment-reply-title {
	font-family: var(--font-display) !important;
	color: var(--fg);
}

.comment {
	border-radius: var(--r-md);
	padding: var(--sp-4);
	background: var(--bg-card);
	margin-bottom: var(--sp-4);
	border: 1px solid var(--hairline);
}

.comment-author { color: var(--fg); font-weight: 600; }
.comment-meta { color: var(--fg-subtle); font-size: var(--fs-sm); }

/* ==========================================================================
   Selection
   ========================================================================== */

::selection { background: var(--iris-500); color: var(--ivory-0); }
::-moz-selection { background: var(--iris-500); color: var(--ivory-0); }

/* ==========================================================================
   Scrollbar (subtle, dark)
   ========================================================================== */

* { scrollbar-color: var(--obsidian-4) var(--obsidian-0); scrollbar-width: thin; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--obsidian-0); }
::-webkit-scrollbar-thumb {
	background: var(--obsidian-4);
	border-radius: var(--r-pill);
	border: 2px solid var(--obsidian-0);
}
::-webkit-scrollbar-thumb:hover { background: var(--iris-700); }

/* ==========================================================================
   Focus visible — accessibility (DESIGN.md §11)
   ========================================================================== */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible,
[tabindex]:focus-visible {
	outline: 2px solid var(--ivory-0);
	outline-offset: 2px;
	border-radius: var(--r-sm);
}

/* ==========================================================================
   Reduced motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
	body { background-attachment: scroll; }
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1024px) {
	body { font-size: var(--fs-base); }
	.single .entry-header, .page .entry-header { padding: var(--sp-7) 0 var(--sp-6); }
	.entry-content blockquote { padding: var(--sp-4) var(--sp-5); font-size: var(--fs-base); }
	.comments-area { padding: var(--sp-5); }
}

@media (max-width: 640px) {
	.single .entry-header, .page .entry-header { padding: var(--sp-7) 0 var(--sp-5); }
	.loop-entry .entry-content-wrap, .loop-entry-content-wrap { padding: var(--sp-4); }
	.widget-area .widget, .sidebar .widget { padding: var(--sp-4); }
	.entry-content blockquote { padding: var(--sp-3) var(--sp-4); }
	.wp-block-code, pre { padding: var(--sp-4); }
	.entry-content { font-size: var(--fs-base); }
	.comments-area { padding: var(--sp-4); }
}

/* ==========================================================================
   Kadence Pro Post Grid block (homepage list)
   The block injects per-instance inline CSS that nukes padding & radius;
   we override at higher specificity so cards breathe.
   ========================================================================== */

[class*="kt-post-loop"] .kt-post-grid-wrap,
.kt-blocks-post-grid .kt-post-grid-wrap {
	gap: var(--sp-6) var(--sp-6) !important;
	display: grid !important;
}

article.kt-blocks-post-grid-item {
	background-color: var(--bg-card) !important;
	border: 1px solid var(--hairline) !important;
	border-radius: var(--r-xl) !important;
	overflow: hidden !important;
	box-shadow: var(--shadow-inset-top), var(--shadow-md);
	transition:
		transform var(--dur-base) var(--ease-out),
		box-shadow var(--dur-base) var(--ease-out),
		border-color var(--dur-base) var(--ease-out),
		background-color var(--dur-base) var(--ease-out);
}

article.kt-blocks-post-grid-item:hover {
	background-color: var(--bg-card-hi) !important;
	border-color: rgba(138, 99, 248, 0.35) !important;
	box-shadow: var(--shadow-glow);
	transform: translateY(-3px);
}

article.kt-blocks-post-grid-item .kt-blocks-post-grid-item-inner-wrap {
	height: 100%;
}

article.kt-blocks-post-grid-item .kt-blocks-post-grid-item-inner {
	padding: var(--sp-6) !important;
	display: flex !important;
	flex-direction: column;
	gap: var(--sp-3);
	height: 100%;
}

article.kt-blocks-post-grid-item header {
	padding: 0 0 var(--sp-2) 0 !important;
	margin: 0 !important;
}

article.kt-blocks-post-grid-item .entry-title {
	padding: 0 !important;
	margin: 0 0 var(--sp-3) 0 !important;
	font-family: var(--font-display) !important;
	font-size: clamp(20px, 2vw, 26px) !important;
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: -0.015em;
}

article.kt-blocks-post-grid-item .entry-title a {
	color: var(--fg) !important;
	text-decoration: none !important;
	transition: color var(--dur-fast) var(--ease-out);
}

article.kt-blocks-post-grid-item .entry-title a:hover {
	color: var(--iris-200) !important;
}

article.kt-blocks-post-grid-item .kt-blocks-post-top-meta,
article.kt-blocks-post-grid-item .kt-reading-time-wrap,
article.kt-blocks-post-grid-item .kt-reading-time {
	font-family: var(--font-mono) !important;
	font-size: var(--fs-xs) !important;
	color: var(--fg-subtle) !important;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

article.kt-blocks-post-grid-item .kt-reading-time-label {
	color: var(--iris-300) !important;
	font-weight: 500;
	margin-right: 4px;
}

article.kt-blocks-post-grid-item .kt-blocks-post-footer {
	margin-top: auto;
	padding-top: var(--sp-3);
	border-top: 1px solid var(--hairline);
}

/* ==========================================================================
   Related posts section on single posts — DISTINCT visual treatment
   Was rendering dark-on-dark with no separation. Now: hairline divider on top,
   inset iris glow, cards on bg-elev-2 to differentiate from the page surface.
   ========================================================================== */

.entry-related,
.entry-related.alignfull,
.entry-related-style-wide,
.entry-related-style-narrow {
	background-color: transparent !important;
	background-image:
		radial-gradient(50% 60% at 50% 0%, rgba(110, 60, 240, 0.12) 0%, rgba(110, 60, 240, 0) 70%);
	border-top: 1px solid var(--hairline-hi);
	padding: var(--sp-9) 0 var(--sp-9) !important;
	margin-top: var(--sp-9);
	position: relative;
}

.entry-related-inner {
	padding-left: var(--sp-6);
	padding-right: var(--sp-6);
}

.entry-related .entry-related-title,
.entry-related h2,
.entry-related .related-posts-title {
	font-family: var(--font-display) !important;
	font-size: clamp(28px, 3vw, 42px) !important;
	font-weight: 400;
	color: var(--fg) !important;
	margin: 0 0 var(--sp-7) 0 !important;
	text-align: center;
	letter-spacing: -0.02em;
	line-height: 1.1;
}

.entry-related .splide__list.grid-cols,
.entry-related .grid-cols {
	gap: var(--sp-5) var(--sp-6) !important;
}

.entry-related .splide__slide,
.entry-related .carousel-item {
	height: auto;
}

.entry-related .loop-entry,
.entry-related article.loop-entry,
.entry-related .entry.loop-entry,
.entry-related .entry.content-bg.loop-entry {
	background-color: var(--bg-elev-2) !important;
	border: 1px solid var(--hairline) !important;
	border-radius: var(--r-lg) !important;
	overflow: hidden;
	box-shadow: var(--shadow-inset-top);
	transition:
		transform var(--dur-base) var(--ease-out),
		box-shadow var(--dur-base) var(--ease-out),
		border-color var(--dur-base) var(--ease-out),
		background-color var(--dur-base) var(--ease-out);
	height: 100%;
	display: flex;
	flex-direction: column;
}

.entry-related .loop-entry:hover,
.entry-related article.loop-entry:hover {
	background-color: var(--bg-card) !important;
	border-color: rgba(138, 99, 248, 0.35) !important;
	box-shadow: var(--shadow-glow);
	transform: translateY(-3px);
}

.entry-related .loop-entry .entry-content-wrap {
	padding: var(--sp-5) !important;
	display: flex;
	flex-direction: column;
	gap: var(--sp-3);
	flex: 1;
}

.entry-related .loop-entry .entry-header {
	display: flex;
	flex-direction: column;
	gap: var(--sp-2);
	margin: 0;
}

.entry-related .loop-entry .entry-title {
	font-family: var(--font-display) !important;
	font-size: clamp(18px, 1.6vw, 22px) !important;
	font-weight: 400;
	line-height: 1.25;
	letter-spacing: -0.015em;
	margin: var(--sp-1) 0 0 0 !important;
	color: var(--fg) !important;
	padding: 0 !important;
}

.entry-related .loop-entry .entry-title a {
	color: var(--fg) !important;
	text-decoration: none !important;
}

.entry-related .loop-entry .entry-title a:hover {
	color: var(--iris-200) !important;
}

.entry-related .loop-entry .entry-meta,
.entry-related .loop-entry .entry-meta a,
.entry-related .loop-entry .entry-meta span,
.entry-related .loop-entry .entry-meta time,
.entry-related .loop-entry .posted-by,
.entry-related .loop-entry .posted-on,
.entry-related .loop-entry .meta-label {
	font-family: var(--font-mono) !important;
	font-size: 11px !important;
	color: var(--fg-subtle) !important;
	letter-spacing: 0.04em;
}

.entry-related .loop-entry .entry-meta a {
	color: var(--fg-muted) !important;
	text-decoration: none;
}

.entry-related .loop-entry .entry-meta a:hover {
	color: var(--iris-200) !important;
}

.entry-related .loop-entry .entry-summary,
.entry-related .loop-entry .entry-summary p {
	color: var(--fg-muted) !important;
	font-size: var(--fs-sm) !important;
	line-height: 1.5;
	margin: 0 !important;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.entry-related .loop-entry .entry-footer {
	margin-top: auto;
	padding-top: var(--sp-3);
	border-top: 1px solid var(--hairline);
}

/* "Read More" link — used in related cards and homepage cards */
.loop-entry .post-more-link,
.entry-related .loop-entry .post-more-link,
.more-link-wrap a {
	color: var(--iris-300) !important;
	font-family: var(--font-sans) !important;
	font-size: var(--fs-sm) !important;
	font-weight: 500;
	text-decoration: none !important;
	display: inline-flex;
	align-items: center;
	gap: var(--sp-2);
	background: none !important;
	border: none !important;
	box-shadow: none !important;
	padding: 0 !important;
	min-height: auto !important;
	transform: none !important;
	transition: color var(--dur-fast) var(--ease-out), gap var(--dur-fast) var(--ease-out);
}

.loop-entry .post-more-link:hover,
.entry-related .loop-entry .post-more-link:hover {
	color: var(--iris-200) !important;
	gap: 12px;
	background: none !important;
	box-shadow: none !important;
	transform: none !important;
	filter: none !important;
}

.loop-entry .post-more-link svg,
.entry-related .loop-entry .post-more-link svg {
	width: 14px;
	height: 14px;
	color: currentColor;
	fill: currentColor;
}

/* ==========================================================================
   Splide carousel — arrows + dots in brand
   ========================================================================== */

.splide__arrow {
	background: var(--bg-card) !important;
	border: 1px solid var(--hairline-hi) !important;
	border-radius: var(--r-pill) !important;
	color: var(--fg) !important;
	width: 44px !important;
	height: 44px !important;
	box-shadow: var(--shadow-md);
	opacity: 1 !important;
	transition: all var(--dur-fast) var(--ease-out);
}

.splide__arrow:hover {
	background: var(--iris-500) !important;
	color: var(--brand-fg) !important;
	border-color: transparent !important;
	box-shadow: var(--shadow-glow);
}

.splide__arrow svg {
	fill: currentColor !important;
	width: 16px !important;
	height: 16px !important;
}

.splide__pagination {
	margin-top: var(--sp-5);
	gap: var(--sp-2);
}

.splide__pagination__page {
	background: var(--hairline-hi) !important;
	width: 8px !important;
	height: 8px !important;
	border-radius: var(--r-pill) !important;
	opacity: 1 !important;
	margin: 0 !important;
	transition: all var(--dur-fast) var(--ease-out);
}

.splide__pagination__page:hover {
	background: var(--iris-400) !important;
}

.splide__pagination__page.is-active {
	background: var(--iris-500) !important;
	transform: scale(1) !important;
	width: 24px !important;
}

/* ==========================================================================
   Boxed content style — single post / page article as elevated panel
   Body class .content-style-boxed signals this layout. Was flat & blending.
   ========================================================================== */

.content-style-boxed.single .content-bg.entry,
.content-style-boxed.single article.post.content-bg,
.content-style-boxed.page article.page.content-bg {
	background-color: var(--bg-elev-1) !important;
	border: 1px solid var(--hairline) !important;
	border-radius: var(--r-xl) !important;
	padding: clamp(var(--sp-6), 4vw, var(--sp-9)) !important;
	box-shadow: var(--shadow-inset-top), var(--shadow-md);
	margin-bottom: var(--sp-7);
	position: relative;
	overflow: hidden;
}

/* Subtle iris glow inside the boxed article — feels like qcall.ai surfaces */
.content-style-boxed.single .content-bg.entry::before,
.content-style-boxed.single article.post.content-bg::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 240px;
	background: radial-gradient(60% 100% at 50% 0%, rgba(110, 60, 240, 0.08), transparent 70%);
	pointer-events: none;
	z-index: 0;
}

.content-style-boxed.single .content-bg.entry > *,
.content-style-boxed.single article.post.content-bg > * {
	position: relative;
	z-index: 1;
}

/* Inside boxed article: tighten entry-header padding, drop the separate halo */
.content-style-boxed.single .entry-header {
	padding: 0 0 var(--sp-6) 0 !important;
	border-bottom: 1px solid var(--hairline);
	margin-bottom: var(--sp-6) !important;
}

.content-style-boxed.single .entry-header::before,
.content-style-boxed.page .entry-header::before {
	display: none;
}

/* ==========================================================================
   Post navigation (prev/next at bottom of single post)
   ========================================================================== */

.post-navigation,
.navigation.post-navigation {
	margin-top: var(--sp-7) !important;
	padding: var(--sp-5);
	background: var(--bg-elev-1);
	border: 1px solid var(--hairline);
	border-radius: var(--r-lg);
	box-shadow: var(--shadow-inset-top);
}

.post-navigation .nav-links {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--sp-4);
	margin-top: 0 !important;
}

.post-navigation .nav-previous,
.post-navigation .nav-next {
	margin: 0 !important;
}

.post-navigation .nav-previous a,
.post-navigation .nav-next a {
	display: block !important;
	padding: var(--sp-4) !important;
	border-radius: var(--r-md) !important;
	background: var(--bg-card) !important;
	border: 1px solid var(--hairline) !important;
	color: var(--fg) !important;
	text-decoration: none !important;
	transition: all var(--dur-fast) var(--ease-out);
	font-family: var(--font-sans) !important;
	min-height: auto !important;
	min-width: auto !important;
	margin: 0 !important;
	box-shadow: none !important;
	transform: none !important;
}

.post-navigation .nav-previous a:hover,
.post-navigation .nav-next a:hover {
	background: var(--bg-card-hi) !important;
	border-color: rgba(138, 99, 248, 0.35) !important;
	color: var(--iris-200) !important;
	transform: translateY(-1px) !important;
	box-shadow: var(--shadow-md) !important;
	filter: none !important;
}

.post-navigation-sub {
	display: block;
	font-family: var(--font-mono);
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--iris-300);
	margin-bottom: var(--sp-1);
}

.post-navigation .nav-next { text-align: right; }

/* ==========================================================================
   Author bio box
   ========================================================================== */

.author-info,
.author-bio,
.entry-author-style-normal,
.entry-author-style-center {
	background: var(--bg-elev-1);
	border: 1px solid var(--hairline);
	border-radius: var(--r-lg);
	padding: var(--sp-5);
	margin-top: var(--sp-7);
	box-shadow: var(--shadow-inset-top);
}

.author-info img.avatar,
.author-bio img.avatar,
.entry-author-style-normal img.avatar {
	border-radius: var(--r-pill);
	border: 2px solid var(--iris-500);
}

/* ==========================================================================
   Archive / category / tag / search page header
   ========================================================================== */

.page-header.entry-hero,
.archive .page-header,
.search .page-header,
.category .page-header,
.tag .page-header {
	padding: var(--sp-9) 0 var(--sp-7);
	position: relative;
	background-image: var(--grad-halo);
	background-size: 70% 50%;
	background-position: center top;
	background-repeat: no-repeat;
}

.page-header .page-title,
.archive-title,
.archive .page-title {
	font-family: var(--font-display) !important;
	font-size: clamp(36px, 5vw, 64px);
	font-weight: 400;
	letter-spacing: -0.025em;
	line-height: 1.1;
	color: var(--fg);
}

.page-header .archive-description,
.archive-description {
	color: var(--fg-muted);
	font-size: var(--fs-md);
	line-height: 1.5;
	margin-top: var(--sp-3);
	max-width: 60ch;
}

/* ==========================================================================
   Responsive — fixes for the new sections
   ========================================================================== */

@media (max-width: 1024px) {
	.entry-related,
	.entry-related.alignfull { padding: var(--sp-7) 0 !important; margin-top: var(--sp-7); }
	.entry-related-inner { padding-left: var(--sp-5); padding-right: var(--sp-5); }
	.content-style-boxed.single .content-bg.entry,
	.content-style-boxed.single article.post.content-bg,
	.content-style-boxed.page article.page.content-bg {
		padding: var(--sp-6) !important;
	}
	article.kt-blocks-post-grid-item .kt-blocks-post-grid-item-inner {
		padding: var(--sp-5) !important;
	}
}

@media (max-width: 640px) {
	.entry-related,
	.entry-related.alignfull { padding: var(--sp-6) 0 !important; margin-top: var(--sp-6); }
	.entry-related-inner { padding-left: var(--sp-4); padding-right: var(--sp-4); }
	.entry-related .splide__list.grid-cols { gap: var(--sp-4) !important; }
	[class*="kt-post-loop"] .kt-post-grid-wrap { gap: var(--sp-4) !important; }
	.content-style-boxed.single .content-bg.entry,
	.content-style-boxed.single article.post.content-bg,
	.content-style-boxed.page article.page.content-bg {
		padding: var(--sp-4) !important;
		border-radius: var(--r-lg) !important;
	}
	.post-navigation .nav-links { grid-template-columns: 1fr; }
	.post-navigation .nav-next { text-align: left; }
	article.kt-blocks-post-grid-item .kt-blocks-post-grid-item-inner {
		padding: var(--sp-4) !important;
	}
	.entry-related .loop-entry .entry-content-wrap { padding: var(--sp-4) !important; }
}

/* ==========================================================================
   HIDE the existing Elementor header
   The site's previous header was an Elementor section (data-elementor-id="35")
   with a black qcall logo + 2 duplicate "Main Website" buttons. Replaced
   below by the qcall.ai-matching <header class="qc-header"> we inject via
   wp_body_open in qcall-brand.php.
   ========================================================================== */

.elementor[data-elementor-id="35"],
body > .elementor.elementor-35,
.elementor-location-header {
	display: none !important;
}

/* ==========================================================================
   QC Header — replicates qcall.ai's nav (logo + dropdowns + sign in/up)
   Sticky, glass-morphic, fully accessible.
   ========================================================================== */

/* Hard reset inside the header to neutralize Kadence/Elementor button & list
   defaults. All buttons & anchors here start from a clean slate. */
.qc-header,
.qc-header *,
.qc-header *::before,
.qc-header *::after {
	box-sizing: border-box;
}

/* Reset wrapped in :where() so specificity = 0 — my specific .qc-* rules
   below win the cascade without needing !important on every property. */
.qc-header :where(a, button, summary) {
	background: transparent;
	border: 0;
	outline: 0;
	margin: 0;
	padding: 0;
	font: inherit;
	color: inherit;
	text-decoration: none;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	-webkit-tap-highlight-color: transparent;
}

.qc-header :where(ul, ol) {
	list-style: none;
	margin: 0;
	padding: 0;
}

.qc-header :where(li) { margin: 0; padding: 0; border: 0; background: transparent; }

.qc-header img, .qc-header svg { display: block; }

.qc-header {
	position: sticky;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1000;
	isolation: isolate;
	background: rgba(21, 17, 31, 0.72);
	backdrop-filter: blur(18px) saturate(160%);
	-webkit-backdrop-filter: blur(18px) saturate(160%);
	border-bottom: 1px solid var(--hairline);
	font-family: var(--font-sans);
	color: var(--ivory-1);
}

.qc-header-inner {
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 var(--sp-6);
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: nowrap;
	gap: var(--sp-5);
	min-height: 68px;
	width: 100%;
}

/* --- Brand --- */
.qc-brand {
	display: inline-flex;
	align-items: center;
	color: var(--ivory-1) !important;
	text-decoration: none !important;
	font-family: var(--font-display);
	font-weight: 400;
	font-size: 26px;
	letter-spacing: -0.015em;
	line-height: 1;
	white-space: nowrap;
	flex-shrink: 0;
	transition: color var(--dur-fast) var(--ease-out);
}

.qc-brand-mark { display: inline-flex; align-items: baseline; white-space: nowrap; }
.qc-brand-dot {
	color: var(--iris-400);
	margin: 0 1px;
}

/* Site Identity logo (replaces wordmark when set in Customizer) */
.qc-brand-img {
	display: block;
	height: 38px;
	width: auto;
	max-width: 200px;
	object-fit: contain;
	transition: opacity var(--dur-fast) var(--ease-out);
}

.qc-brand:hover .qc-brand-img { opacity: 0.85; }

@media (max-width: 1100px) {
	.qc-brand-img { height: 32px; max-width: 160px; }
}

.qc-brand:hover { color: var(--iris-200) !important; }

/* --- Desktop nav --- */
.qc-nav {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	justify-content: center;
}

.qc-menu {
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
	gap: 2px;
}

.qc-menu-item {
	position: relative;
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
}

.qc-menu-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 10px 12px !important;
	border-radius: var(--r-sm);
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	color: var(--ivory-1) !important;
	font-family: var(--font-sans) !important;
	font-size: 14px !important;
	font-weight: 500;
	letter-spacing: 0.005em;
	line-height: 1.2;
	text-decoration: none !important;
	white-space: nowrap;
	cursor: pointer;
	min-height: auto !important;
	min-width: auto !important;
	transform: none !important;
	transition: color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}

.qc-menu-link:hover,
.qc-menu-link:focus-visible {
	color: var(--iris-200) !important;
	background: rgba(138, 99, 248, 0.08) !important;
	box-shadow: none !important;
	filter: none !important;
	transform: none !important;
}

.qc-chev {
	transition: transform var(--dur-fast) var(--ease-out);
}

.qc-has-sub.qc-sub-open > .qc-menu-link .qc-chev,
.qc-has-sub:hover > .qc-menu-link .qc-chev {
	transform: rotate(180deg);
}

/* --- Submenus (CSS hover + JS click parity) --- */
.qc-submenu {
	position: absolute;
	top: 100%;
	left: 50%;
	margin-top: 8px;
	transform: translateX(-50%) translateY(-6px);
	min-width: 240px;
	max-width: calc(100vw - 32px);
	padding: var(--sp-2);
	background: rgba(31, 27, 45, 0.96);
	backdrop-filter: blur(20px) saturate(170%);
	-webkit-backdrop-filter: blur(20px) saturate(170%);
	border: 1px solid var(--hairline-hi);
	border-radius: var(--r-md);
	box-shadow: var(--shadow-lg);
	display: flex;
	flex-direction: column;
	gap: 2px;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition:
		opacity var(--dur-fast) var(--ease-out),
		transform var(--dur-fast) var(--ease-out),
		visibility 0s linear var(--dur-fast);
	z-index: 1001;
}

/* Hover-bridge so the cursor crossing the gap doesn't kill the dropdown. */
.qc-submenu::before {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	top: -10px;
	height: 10px;
}

.qc-submenu-wide {
	min-width: 480px;
	max-width: min(560px, calc(100vw - 32px));
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2px;
}

.qc-has-sub:hover > .qc-submenu,
.qc-has-sub:focus-within > .qc-submenu,
.qc-has-sub.qc-sub-open > .qc-submenu {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translateX(-50%) translateY(0);
	transition-delay: 0s;
}

.qc-submenu a {
	display: block;
	padding: 10px var(--sp-3) !important;
	border-radius: var(--r-sm);
	color: var(--ivory-1) !important;
	font-family: var(--font-sans) !important;
	font-size: 14px !important;
	font-weight: 500;
	text-decoration: none !important;
	white-space: nowrap;
	line-height: 1.3;
	transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}

.qc-submenu a:hover,
.qc-submenu a:focus-visible {
	background: rgba(138, 99, 248, 0.12);
	color: var(--iris-200) !important;
}

/* --- CTA cluster --- */
.qc-cta {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-3);
	flex-shrink: 0;
}

.qc-signin {
	color: var(--ivory-1) !important;
	font-family: var(--font-sans) !important;
	font-size: 14px !important;
	font-weight: 500;
	text-decoration: none !important;
	white-space: nowrap;
	padding: 8px 12px !important;
	border-radius: var(--r-sm);
	transition: color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	min-height: auto !important;
	transform: none !important;
}

.qc-signin:hover {
	color: var(--iris-200) !important;
	background: rgba(138, 99, 248, 0.08) !important;
	box-shadow: none !important;
	transform: none !important;
	filter: none !important;
}

.qc-signup {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 9px 18px !important;
	background: var(--grad-iris) !important;
	color: var(--brand-fg) !important;
	font-family: var(--font-sans) !important;
	font-size: 14px !important;
	font-weight: 600;
	text-decoration: none !important;
	white-space: nowrap;
	border-radius: var(--r-pill) !important;
	border: 0 !important;
	min-height: 38px !important;
	box-shadow: 0 8px 20px rgba(110, 60, 240, 0.35);
	transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), filter var(--dur-fast) var(--ease-out);
}

.qc-signup:hover {
	transform: translateY(-1px);
	box-shadow: 0 12px 28px rgba(110, 60, 240, 0.55);
	filter: brightness(1.05);
}

/* --- Mobile burger button --- */
.qc-burger {
	display: none;
	width: 44px;
	height: 44px;
	padding: 10px;
	background: transparent !important;
	border: 1px solid var(--hairline-hi) !important;
	border-radius: var(--r-sm) !important;
	color: var(--ivory-1) !important;
	cursor: pointer;
	box-shadow: none !important;
	min-height: auto !important;
	transform: none !important;
	align-items: center;
	justify-content: center;
}

.qc-burger:hover {
	background: rgba(138, 99, 248, 0.08) !important;
	border-color: rgba(138, 99, 248, 0.35) !important;
	transform: none !important;
	filter: none !important;
	box-shadow: none !important;
}

.qc-burger svg { display: block; }

.qc-burger-top, .qc-burger-mid, .qc-burger-bot {
	transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
	transform-origin: center;
}

.qc-open .qc-burger-top { transform: translateY(5px) rotate(45deg); }
.qc-open .qc-burger-mid { opacity: 0; }
.qc-open .qc-burger-bot { transform: translateY(-5px) rotate(-45deg); }

/* --- Mobile sheet --- */
.qc-mobile {
	display: none;
	position: fixed;
	top: 68px;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 999;
	background: rgba(21, 17, 31, 0.98);
	backdrop-filter: blur(24px);
	-webkit-backdrop-filter: blur(24px);
	overflow-y: auto;
	padding: var(--sp-4);
}

.qc-mobile nav {
	display: flex;
	flex-direction: column;
	gap: 4px;
	max-width: 480px;
	margin: 0 auto;
	padding-bottom: var(--sp-7);
}

.qc-mobile-group {
	border-bottom: 1px solid var(--hairline);
	padding: 4px 0;
}

.qc-mobile-group summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--sp-4) var(--sp-3);
	font-family: var(--font-sans);
	font-size: 16px;
	font-weight: 500;
	color: var(--ivory-1);
	cursor: pointer;
	list-style: none;
	border-radius: var(--r-sm);
	transition: background var(--dur-fast) var(--ease-out);
}

.qc-mobile-group summary::-webkit-details-marker { display: none; }

.qc-mobile-group summary:hover { background: rgba(138, 99, 248, 0.08); }

.qc-mobile-group[open] summary .qc-chev { transform: rotate(180deg); }
.qc-mobile-group[open] summary { color: var(--iris-200); }

.qc-mobile-children {
	display: flex;
	flex-direction: column;
	padding: var(--sp-1) 0 var(--sp-3) var(--sp-4);
	gap: 2px;
}

.qc-mobile-children a,
.qc-mobile-flat {
	display: block;
	padding: var(--sp-3);
	color: var(--ivory-1) !important;
	font-family: var(--font-sans);
	font-size: 15px;
	text-decoration: none !important;
	border-radius: var(--r-sm);
	transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}

.qc-mobile-flat {
	border-bottom: 1px solid var(--hairline);
	font-weight: 500;
	font-size: 16px;
	padding: var(--sp-4) var(--sp-3);
}

.qc-mobile-children a:hover,
.qc-mobile-flat:hover {
	background: rgba(138, 99, 248, 0.08);
	color: var(--iris-200) !important;
}

.qc-mobile-cta {
	display: flex;
	flex-direction: column;
	gap: var(--sp-3);
	padding: var(--sp-5) var(--sp-3) 0;
}

.qc-mobile-cta .qc-signin,
.qc-mobile-cta .qc-signup {
	width: 100%;
	justify-content: center;
	padding: 14px 20px !important;
	font-size: 15px !important;
	min-height: 48px !important;
	text-align: center;
}

.qc-mobile-cta .qc-signin {
	border: 1px solid var(--hairline-hi) !important;
	border-radius: var(--r-md) !important;
}

.qc-mobile-cta .qc-signup { border-radius: var(--r-pill) !important; }

/* --- Tablet/mobile breakpoints (collapse early — 7 nav items + brand + 2 CTAs
       won't fit on narrow desktops without crowding) --- */
@media (max-width: 1100px) {
	.qc-header-inner {
		padding: 0 var(--sp-5);
		min-height: 64px;
	}
	.qc-nav, .qc-cta { display: none !important; }
	.qc-burger { display: inline-flex !important; }
	.qc-mobile { top: 64px; }
}

@media (min-width: 1101px) {
	.qc-mobile { display: none !important; }
	.qc-burger { display: none !important; }
}

/* Firefox: kill the default disclosure marker */
.qc-mobile-group summary { list-style: none; }
.qc-mobile-group summary::marker { display: none; content: ""; }

/* ==========================================================================
   Kadence Widget Dock — was a white floating box overlapping content
   Now: compact, glass-morphic, anchored bottom-right, dismissible.
   ========================================================================== */

#kt-widget-dock {
	background: rgba(31, 27, 45, 0.92) !important;
	backdrop-filter: blur(18px) saturate(160%) !important;
	-webkit-backdrop-filter: blur(18px) saturate(160%) !important;
	border: 1px solid var(--hairline-hi) !important;
	border-radius: var(--r-lg) !important;
	box-shadow: var(--shadow-lg) !important;
	color: var(--ivory-1) !important;
	padding: var(--sp-4) var(--sp-4) var(--sp-3) !important;
	max-width: 320px !important;
	max-height: 60vh !important;
	overflow-y: auto !important;
	z-index: 980 !important; /* below qc-header (1000) */
	font-family: var(--font-sans);
	font-size: var(--fs-sm);
}

#kt-widget-dock.kt-widget-dock-position-left.kt-active-box {
	left: 16px !important;
	bottom: 16px !important;
}

#kt-widget-dock.kt-widget-dock-position-right.kt-active-box {
	right: 16px !important;
	bottom: 16px !important;
}

#kt-widget-dock.kt-widget-dock-position-center.kt-active-box {
	left: auto !important;
	right: 16px !important;
	bottom: 16px !important;
	transform: none !important;
}

#kt-widget-dock .widget,
#kt-widget-dock aside {
	background: transparent !important;
	border: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	box-shadow: none !important;
}

#kt-widget-dock .widget-title,
#kt-widget-dock h2,
#kt-widget-dock h3,
#kt-widget-dock h4 {
	color: var(--iris-300) !important;
	font-family: var(--font-sans) !important;
	font-size: var(--fs-xs) !important;
	font-weight: 600 !important;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	margin: 0 0 var(--sp-3) 0 !important;
	padding-right: var(--sp-5);
	border: 0 !important;
}

#kt-widget-dock ul,
#kt-widget-dock ol {
	list-style: none !important;
	padding: 0 !important;
	margin: 0 !important;
}

#kt-widget-dock li {
	padding: 0 !important;
	margin: 0 !important;
	border-bottom: 1px solid var(--hairline) !important;
	background: transparent !important;
}

#kt-widget-dock li:last-child { border-bottom: none !important; }

#kt-widget-dock a {
	color: var(--ivory-1) !important;
	text-decoration: none !important;
	display: block;
	padding: 8px 4px !important;
	font-size: 13px !important;
	line-height: 1.4 !important;
	transition: color var(--dur-fast) var(--ease-out);
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	min-height: auto !important;
	transform: none !important;
}

#kt-widget-dock a:hover {
	color: var(--iris-200) !important;
	background: transparent !important;
	transform: none !important;
	filter: none !important;
	box-shadow: none !important;
}

.kt-widget-dock-close {
	background: rgba(255, 255, 255, 0.06) !important;
	border-radius: var(--r-pill) !important;
	width: 24px !important;
	height: 24px !important;
	line-height: 24px !important;
	font-size: 12px !important;
	top: 8px !important;
	right: 8px !important;
	transition: background var(--dur-fast) var(--ease-out);
}

.kt-widget-dock-close:hover {
	background: var(--iris-500) !important;
}

.kt-widget-dock-close span.kt-widget-close {
	color: var(--ivory-1) !important;
}

.kt-widget-dock-close:hover span.kt-widget-close {
	color: var(--ivory-0) !important;
}

@media (max-width: 767px) {
	#kt-widget-dock {
		max-width: calc(100vw - 32px) !important;
		max-height: 50vh !important;
		left: 16px !important;
		right: 16px !important;
		bottom: 16px !important;
		width: auto !important;
	}
}

/* ==========================================================================
   Body padding-top compensation for sticky header (prevents content jump)
   ========================================================================== */

body {
	scroll-padding-top: 80px;
}

/* ==========================================================================
   Kadence row blocks — kill the dark "palette9" background panel
   The "Latest Articles" heading sits inside a Kadence Row block with the
   class `has-theme-palette9-background-color` (palette9 = obsidian-0 in our
   skin). On the dark theme this paints a flat black panel that floats
   awkwardly above the post grid. Make those rows transparent and tighten
   the spacing into the next row so the heading flows directly into cards.
   ========================================================================== */

.kb-row-layout-wrap.has-theme-palette9-background-color,
.kb-row-layout-wrap.has-theme-palette8-background-color,
.wp-block-kadence-rowlayout.has-theme-palette9-background-color,
.wp-block-kadence-rowlayout.has-theme-palette8-background-color {
	background-color: transparent !important;
	background-image: none !important;
}

/* If the row contains ONLY a heading (no cards/columns of substance),
   collapse its bottom padding so the gap to the next row disappears. */
.kb-row-layout-wrap.kt-row-has-bg .kt-inside-inner-col > h1:only-child,
.kb-row-layout-wrap.kt-row-has-bg .kt-inside-inner-col > h2:only-child,
.kb-row-layout-wrap.kt-row-has-bg .kt-inside-inner-col > h3:only-child,
.kb-row-layout-wrap .kt-inside-inner-col > .wp-block-kadence-advancedheading:only-child {
	margin: 0 !important;
}

/* Tighten the gap between a heading row and the immediately-following
   content row (post grid). Targets any row that follows a row whose only
   meaningful child is a Kadence advanced heading. */
.kb-row-layout-wrap:has(.kt-inside-inner-col > .wp-block-kadence-advancedheading:only-child) {
	padding-bottom: var(--sp-3) !important;
	padding-top: var(--sp-7) !important;
}

.kb-row-layout-wrap:has(.kt-inside-inner-col > .wp-block-kadence-advancedheading:only-child) + .kb-row-layout-wrap {
	padding-top: var(--sp-2) !important;
	margin-top: 0 !important;
}

/* Style the heading itself (Kadence advanced heading inside row) */
.wp-block-kadence-advancedheading,
.kt-inside-inner-col > h1.wp-block-kadence-advancedheading,
.kt-inside-inner-col > h2.wp-block-kadence-advancedheading,
.kt-inside-inner-col > h3.wp-block-kadence-advancedheading {
	font-family: var(--font-display) !important;
	font-weight: 400 !important;
	color: var(--fg) !important;
	letter-spacing: -0.025em !important;
	line-height: 1.1 !important;
	background: transparent !important;
}

.kt-inside-inner-col > h2.wp-block-kadence-advancedheading {
	font-size: clamp(32px, 4vw, 56px) !important;
}

/* ==========================================================================
   "On this page" TOC — LLM-Ready plugin (#llm-ready-toc)

   The plugin's JS computes a desktop floating position based on viewport
   width vs. content width. The math has too many edge cases (boxed article
   padding, scrollbar widths, browser chrome, devtools open) and lands on
   top of the article body in many real-world setups — including 1920px
   laptops where it should mathematically fit.

   Bulletproof fix: HIDE the desktop floating TOC at every viewport. Force
   the plugin's small floating mobile toggle (52px iris pill bottom-right)
   to show instead. Click to open a slide-up panel with the full TOC.
   The toggle is a corner button — it physically cannot overlap the
   article body. Same UX on 1920px and 320px screens.
   ========================================================================== */

#llm-ready-toc,
.llm-ready-toc-container {
	display: none !important;
	visibility: hidden !important;
}

.llm-ready-toc-mobile-toggle {
	display: flex !important;
	align-items: center;
	justify-content: center;
}

/* Keep the dark-theme styles for the desktop panel in case the user
   re-enables it server-side later. They're inert now (panel is hidden). */
#llm-ready-toc,
.llm-ready-toc-container {
	background: rgba(31, 27, 45, 0.94) !important;
	backdrop-filter: blur(18px) saturate(160%) !important;
	-webkit-backdrop-filter: blur(18px) saturate(160%) !important;
	border: 1px solid var(--hairline-hi) !important;
	border-radius: var(--r-lg) !important;
	box-shadow: var(--shadow-lg) !important;
	color: var(--ivory-1) !important;
	font-family: var(--font-sans) !important;
	padding: var(--sp-4) !important;
	width: 220px !important;
	z-index: 990 !important;
}

.llm-ready-toc-header {
	color: var(--iris-300) !important;
	font-family: var(--font-sans) !important;
	font-size: var(--fs-xs) !important;
	font-weight: 600 !important;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	margin-bottom: var(--sp-3) !important;
	padding-bottom: var(--sp-3) !important;
	border-bottom: 1px solid var(--hairline) !important;
}

.llm-ready-toc-header .toc-icon {
	color: var(--iris-300);
	width: 14px;
	height: 14px;
}

.llm-ready-toc-nav {
	display: flex !important;
	flex-direction: column;
	gap: 1px;
}

.llm-ready-toc-link {
	display: flex !important;
	align-items: flex-start;
	gap: 6px;
	padding: 7px 8px !important;
	color: var(--fg-muted) !important;
	font-family: var(--font-sans) !important;
	font-size: 13px !important;
	font-weight: 400;
	line-height: 1.4;
	text-decoration: none !important;
	border-radius: var(--r-sm) !important;
	border-left: 2px solid transparent;
	transition: color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}

.llm-ready-toc-link .toc-num {
	color: var(--fg-subtle) !important;
	font-family: var(--font-mono) !important;
	font-size: 11px !important;
	flex-shrink: 0;
	min-width: 18px;
}

.llm-ready-toc-link:hover {
	color: var(--ivory-1) !important;
	background: rgba(138, 99, 248, 0.08) !important;
}

.llm-ready-toc-link.active {
	color: var(--iris-200) !important;
	background: rgba(110, 60, 240, 0.12) !important;
	border-left-color: var(--iris-500);
	font-weight: 500;
}

.llm-ready-toc-link.active .toc-num { color: var(--iris-300) !important; }

.llm-ready-toc-link.toc-h3 { padding-left: var(--sp-4) !important; font-size: 12px !important; }
.llm-ready-toc-link.toc-h4 { padding-left: var(--sp-5) !important; font-size: 12px !important; }

/* --- Mobile floating toggle button --- */
.llm-ready-toc-mobile-toggle {
	position: fixed !important;
	bottom: 24px !important;
	right: 24px !important;
	width: 52px !important;
	height: 52px !important;
	padding: 0 !important;
	background: var(--grad-iris) !important;
	color: var(--ivory-0) !important;
	border: 0 !important;
	border-radius: var(--r-pill) !important;
	box-shadow: var(--shadow-glow) !important;
	cursor: pointer;
	z-index: 985 !important; /* below qc-header */
	transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), filter var(--dur-fast) var(--ease-out);
}

.llm-ready-toc-mobile-toggle:hover {
	transform: translateY(-2px) scale(1.04);
	filter: brightness(1.05);
}

.llm-ready-toc-mobile-toggle svg {
	width: 22px;
	height: 22px;
	stroke: currentColor;
}

/* --- Mobile slide-up panel --- */
.llm-ready-toc-mobile-panel {
	position: fixed !important;
	bottom: 0 !important;
	left: 0 !important;
	right: 0 !important;
	max-height: 70vh !important;
	background: var(--obsidian-1) !important;
	border-top: 1px solid var(--hairline-hi) !important;
	border-radius: var(--r-xl) var(--r-xl) 0 0 !important;
	box-shadow: var(--shadow-lg) !important;
	color: var(--ivory-1) !important;
	padding: var(--sp-5) !important;
	overflow-y: auto !important;
	z-index: 1100 !important;
	transform: translateY(100%);
	transition: transform var(--dur-base) var(--ease-out);
	font-family: var(--font-sans) !important;
}

.llm-ready-toc-mobile-panel.open {
	display: block !important;
	transform: translateY(0) !important;
}

.llm-ready-toc-mobile-panel .llm-ready-toc-header {
	display: flex !important;
	justify-content: space-between;
	align-items: center;
	color: var(--ivory-1) !important;
	font-family: var(--font-display) !important;
	font-size: var(--fs-lg) !important;
	font-weight: 400;
	letter-spacing: -0.015em;
	text-transform: none;
	letter-spacing: 0;
	border-bottom: 1px solid var(--hairline) !important;
	padding-bottom: var(--sp-3) !important;
	margin-bottom: var(--sp-3) !important;
}

.llm-ready-toc-mobile-close {
	background: rgba(255, 255, 255, 0.08) !important;
	border: 0 !important;
	color: var(--ivory-1) !important;
	width: 32px !important;
	height: 32px !important;
	border-radius: var(--r-pill) !important;
	font-size: 20px !important;
	line-height: 1 !important;
	cursor: pointer;
	transition: background var(--dur-fast) var(--ease-out);
}

.llm-ready-toc-mobile-close:hover {
	background: var(--iris-500) !important;
}

.llm-ready-toc-mobile-panel .llm-ready-toc-nav { gap: 2px; }
.llm-ready-toc-mobile-panel .llm-ready-toc-link {
	font-size: 14px !important;
	padding: 10px var(--sp-3) !important;
}

.llm-ready-toc-mobile-panel .llm-ready-toc-link.active {
	color: var(--iris-200) !important;
	background: rgba(110, 60, 240, 0.15) !important;
	border-left-color: var(--iris-500);
}

/* --- Backdrop --- */
.llm-ready-toc-backdrop {
	position: fixed !important;
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	background: rgba(10, 7, 17, 0.65) !important;
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	z-index: 1099 !important;
	display: none !important;
	opacity: 0;
	transition: opacity var(--dur-base) var(--ease-out);
}

.llm-ready-toc-backdrop.visible {
	display: block !important;
	opacity: 1;
}

/* On very small screens shrink the toggle slightly */
@media (max-width: 480px) {
	.llm-ready-toc-mobile-toggle {
		width: 48px !important;
		height: 48px !important;
		bottom: 16px !important;
		right: 16px !important;
	}
}