/* ============================================================
   ANC theme base — ported from the approved prototype's inline
   <style> (homev3) plus the Dim palette and WordPress essentials.
   Design tokens come from assets/css/ds/*. Keep this in sync with
   the prototype; do not redesign here.
   ============================================================ */

:root{
	--d-fast:150ms; --d-base:250ms; --d-slow:400ms;
	--e-standard:cubic-bezier(0.1,0.9,0.2,1);
	--e-exit:cubic-bezier(0.7,0,0.84,0);
}

html,body{ margin:0; padding:0; background:var(--bg-mica); }
*{ box-sizing:border-box; }
::selection{ background:var(--accent-default); color:var(--text-on-accent-primary); }

body{
	font-family:var(--font-family-base);
	color:var(--text-primary);
	background:var(--bg-mica);
	-webkit-font-smoothing:antialiased;
}
a{ color:inherit; }
img{ max-width:100%; }

/* ---- Dim mode: dark palette + the prototype's 8 overrides ---- */
:root[data-theme="dim"]{
	--accent-default:#5fb4f5;
	--accent-secondary:rgba(95,180,245,0.9);
	--text-primary:rgb(255,255,255);
	--text-secondary:rgba(255,255,255,0.786);
	--text-disabled:rgba(255,255,255,0.3628);
	--text-on-accent-primary:rgb(0,0,0);
	--fill-subtle-secondary:rgba(255,255,255,0.0605);
	--fill-subtle-tertiary:rgba(255,255,255,0.0419);
	--fill-control-default:rgba(255,255,255,0.0605);
	--fill-control-secondary:rgba(249,249,249,0.0837);
	--stroke-control-default:rgba(255,255,255,0.093);
	--stroke-surface:rgba(117,117,117,0.4);
	--status-success:rgb(108,203,95);
	--status-success-bg:rgb(57,61,27);
	--status-info:rgb(96,205,255);
	--status-info-bg:rgb(43,49,56);
	--bg-solid-base:#2a2e39;
	--bg-mica:#2a2e39;
	--bg-layer-alt:#343a47;
	--bg-card:#333947;
	--bg-card-secondary:#2f3441;
	--bg-smoke:rgba(0,0,0,0.3);
	--stroke-divider:rgba(255,255,255,0.075);
}

/* ---- scrollbar-less rails ---- */
.htmd-rail{ scrollbar-width:none; -ms-overflow-style:none; }
.htmd-rail::-webkit-scrollbar{ display:none; }

/* ---- trending ticker condense ---- */
.htmd-tickerwrap{ max-height:41px; transition:max-height var(--d-base) var(--e-standard), opacity var(--d-base) var(--e-standard); }
.htmd-condensed .htmd-tickerwrap{ max-height:0; opacity:0; }

@keyframes htmd-fade{ from{opacity:0; transform:translateY(-6px);} to{opacity:1; transform:translateY(0);} }
@keyframes htmd-ticker{ from{transform:translateX(0);} to{transform:translateX(-50%);} }
@keyframes htmd-mega{ from{opacity:0; transform:translateY(-4px) scale(0.98);} to{opacity:1; transform:translateY(0) scale(1);} }
@keyframes htmd-zoom{ from{transform:scale(1);} to{transform:scale(1.05);} }
@keyframes htmd-pulse{ 0%{box-shadow:0 0 0 0 var(--status-success);} 70%{box-shadow:0 0 0 7px rgba(108,203,95,0);} 100%{box-shadow:0 0 0 0 rgba(108,203,95,0);} }

/* ---- always-on, GPU-friendly micro-interactions (transform/opacity/shadow only) ---- */
.htmd-card{ transition:transform var(--d-fast) var(--e-standard), box-shadow var(--d-fast) var(--e-standard); }
.htmd-imgframe{ overflow:hidden; }
.htmd-imgframe img{ transition:transform var(--d-base) var(--e-standard); }
.htmd-card-title{ transition:color var(--d-fast) var(--e-standard); }
.htmd-link .htmd-arrow{ transition:transform var(--d-fast) var(--e-standard); }
.htmd-link .htmd-underline{ transform:scaleX(0); transform-origin:left; transition:transform var(--d-base) var(--e-standard); }
.htmd-play{ transition:transform var(--d-fast) var(--e-standard); }
.htmd-img{ opacity:1; }

@media (prefers-reduced-motion: no-preference){
	.htmd-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-flyout); will-change:transform; }
	.htmd-card.htmd-flat:hover{ transform:none; box-shadow:none; }
	.htmd-card:hover .htmd-imgframe img{ transform:scale(1.03); }
	.htmd-card:hover .htmd-card-title{ color:var(--accent-default); }
	.htmd-link:hover .htmd-arrow{ transform:translateX(3px); }
	.htmd-link:hover .htmd-underline{ transform:scaleX(1); }
	.htmd-vid:hover .htmd-play{ transform:scale(1.14); }

	.htmd-reveal{ transition:opacity var(--d-slow) var(--e-standard), transform var(--d-slow) var(--e-standard); }
	.htmd-reveal.htmd-pending{ opacity:0; transform:translateY(14px); will-change:opacity,transform; }

	.htmd-anim .htmd-lead-img{ animation:htmd-zoom 8s var(--e-standard) forwards; }
	.htmd-anim .htmd-pulse{ animation:htmd-pulse 1.3s var(--e-standard) 1; }
	.htmd-anim .htmd-img{ opacity:0; transition:opacity var(--d-base) ease; }
	.htmd-anim .htmd-img.htmd-loaded{ opacity:1; }

	.htmd-stagger > *:nth-child(2){ transition-delay:55ms; }
	.htmd-stagger > *:nth-child(3){ transition-delay:110ms; }
	.htmd-stagger > *:nth-child(4){ transition-delay:165ms; }
	.htmd-stagger > *:nth-child(5){ transition-delay:220ms; }
	.htmd-stagger > *:nth-child(6){ transition-delay:275ms; }

	.htmd-mega-anim{ animation:htmd-mega var(--d-base) var(--e-standard); transform-origin:top center; }
	.htmd-theming *:not(img):not(svg){ transition:background-color var(--d-base) ease, color var(--d-base) ease, border-color var(--d-base) ease, fill var(--d-base) ease !important; }
}

/* live feed: new-item flash + breaking swap */
@keyframes htmd-feedflash{ 0%{ background:color-mix(in srgb, var(--accent-default) 24%, transparent); transform:translateY(-7px); opacity:.45; } 100%{ background:transparent; transform:translateY(0); opacity:1; } }
@keyframes htmd-breakin{ from{ opacity:0; transform:translateY(7px); } to{ opacity:1; transform:translateY(0); } }
@media (prefers-reduced-motion: no-preference){
	.htmd-feed-flash{ animation:htmd-feedflash 720ms var(--e-standard); will-change:transform,opacity; }
	.htmd-breakin{ animation:htmd-breakin 380ms var(--e-standard); }
}
.htmd-feeditem:last-child{ border-bottom:none; }

/* hover background helper (replaces the prototype's style-hover attribute) */
.htmd-hoverbg{ transition:background-color var(--d-fast) var(--e-standard); }
@media (prefers-reduced-motion: no-preference){
	.htmd-hoverbg:hover{ background:var(--fill-subtle-secondary) !important; }
}

@media (max-width:880px){
	.htmd-split{ grid-template-columns:minmax(0,1fr) !important; }
	.htmd-split > div{ max-height:420px; }
}

@media (prefers-reduced-motion: reduce){
	.htmd-ticker-track{ animation:none !important; }
}

/* ============================================================
   WordPress essentials (accessibility + core markup)
   ============================================================ */
.screen-reader-text{
	border:0; clip:rect(1px,1px,1px,1px); clip-path:inset(50%);
	height:1px; width:1px; margin:-1px; overflow:hidden; padding:0;
	position:absolute !important; word-wrap:normal !important;
}
.screen-reader-text:focus{
	background:var(--bg-layer-alt); border-radius:8px; box-shadow:var(--shadow-flyout);
	clip:auto !important; clip-path:none; color:var(--accent-default);
	display:block; font-size:14px; font-weight:600; height:auto; left:6px;
	line-height:normal; padding:14px 22px; text-decoration:none; top:6px;
	width:auto; z-index:100000;
}
.anc-skip-link:focus{ top:6px; }

.alignnone{ margin:1em 0; }
.aligncenter{ display:block; margin:1em auto; }
.alignleft{ float:left; margin:0.5em 1.5em 1em 0; }
.alignright{ float:right; margin:0.5em 0 1em 1.5em; }
.wp-caption{ max-width:100%; }
.wp-caption-text{ font-size:12px; color:var(--text-secondary); margin-top:6px; }
.sticky,.bypostauthor{}

/* shared content container */
.anc-container{ max-width:1300px; margin:0 auto; padding:0 28px; }

/* ---- theme switcher segmented control ---- */
.anc-segwrap{ display:flex; align-items:center; gap:2px; background:var(--fill-subtle-secondary); border:1px solid var(--stroke-divider); border-radius:8px; padding:3px; }
.anc-seg{ padding:5px 11px; border-radius:6px; font-size:12.5px; font-weight:600; cursor:pointer; background:transparent; color:var(--text-secondary); border:none; font-family:inherit; line-height:1.4; transition:background-color var(--d-fast) var(--e-standard), color var(--d-fast) var(--e-standard); }
.anc-seg:hover{ color:var(--text-primary); }
.anc-seg[aria-pressed="true"]{ background:var(--accent-default); color:var(--text-on-accent-primary); }

/* ---- header brand (Customizer logo replaces the "H" lockup) ---- */
.custom-logo-link{ display:flex; align-items:center; flex:none; text-decoration:none; }
.custom-logo{ display:block; width:auto; height:auto; max-height:38px; max-width:230px; object-fit:contain; }
@media (max-width:880px){
	.custom-logo{ max-width:150px; }
}
/* Dim/dark logo variant. Both images ship in the link; these rules pick one.
   Must stay after .custom-logo{display:block} — same specificity, order wins.
   Dim is a dark palette too (see the :root[data-theme="dim"] block above). */
.anc-logo--dark{ display:none; }
:root[data-theme="dark"] .anc-logo--light,
:root[data-theme="dim"] .anc-logo--light{ display:none; }
:root[data-theme="dark"] .anc-logo--dark,
:root[data-theme="dim"] .anc-logo--dark{ display:block; }

/* ---- primary nav tab (hover underline) ---- */
.anc-navtab{ padding:0 11px; height:100%; display:flex; align-items:center; gap:5px; font-size:13.5px; font-weight:500; white-space:nowrap; text-decoration:none; color:var(--text-primary); border-bottom:2px solid transparent; transition:border-color var(--d-fast) var(--e-standard), color var(--d-fast) var(--e-standard); }
.anc-navtab:hover{ color:var(--accent-default); border-bottom-color:var(--accent-default); }
.anc-navtab[aria-expanded="true"]{ color:var(--accent-default); border-bottom-color:var(--accent-default); }
.anc-caret{ display:inline-flex; transition:transform 160ms var(--e-standard); color:var(--text-secondary); }
.anc-navtab[aria-expanded="true"] .anc-caret{ transform:rotate(180deg); }

/* ---- header mega menu ---- */
.anc-mega{ animation:htmd-mega 250ms cubic-bezier(0.1,0.9,0.2,1); transform-origin:top center; z-index:95; }

/* ---- icon-button (round) ---- */
.anc-iconbtn{ display:grid; place-items:center; cursor:pointer; color:var(--text-primary); background:var(--bg-card); border:1px solid var(--stroke-divider); border-radius:9999px; }
.anc-iconbtn:hover{ background:var(--fill-subtle-secondary); }

/* ---- search overlay ---- */
#anc-search[hidden]{ display:none; }

/* ---- carousel dots ---- */
[data-dot]{ transition:width var(--d-base) var(--e-standard), background var(--d-base) var(--e-standard); }
[data-dot][aria-current="true"]{ width:22px !important; background:var(--accent-default) !important; }

/* ============================================================
   Article prose (single post body) — Fluent reading styles
   ============================================================ */
.anc-prose{ font-size:17px; line-height:28px; color:var(--text-primary); }
.anc-prose > *:first-child{ margin-top:0; }
.anc-prose p{ margin:0 0 22px; text-wrap:pretty; }
.anc-prose h2{ scroll-margin-top:84px; margin:40px 0 16px; font-family:var(--font-family-display); font-weight:600; font-size:28px; line-height:36px; letter-spacing:-.01em; }
.anc-prose h3{ margin:28px 0 12px; font-family:var(--font-family-display); font-weight:600; font-size:20px; line-height:28px; }
.anc-prose h4{ margin:24px 0 10px; font-family:var(--font-family-display); font-weight:600; font-size:17px; }
.anc-prose a{ color:var(--accent-default); text-underline-offset:2px; }
.anc-prose ul,.anc-prose ol{ margin:0 0 22px; padding-left:22px; display:flex; flex-direction:column; gap:9px; }
.anc-prose li{ font-size:17px; line-height:26px; }
.anc-prose img{ border-radius:10px; border:1px solid var(--stroke-divider); height:auto; }
.anc-prose figure{ margin:0 0 24px; }
.anc-prose figcaption{ margin-top:8px; font-size:12.5px; color:var(--text-secondary); text-align:center; }
.anc-prose blockquote{ margin:0 0 24px; padding:18px 22px; border-left:4px solid var(--accent-default); background:var(--bg-card-secondary); border-radius:0 10px 10px 0; }
.anc-prose blockquote p{ margin:0; font-size:16px; line-height:25px; }
.anc-prose code{ font-family:var(--font-family-mono); font-size:.92em; background:var(--fill-subtle-secondary); padding:2px 6px; border-radius:5px; }
.anc-prose pre{ margin:0 0 24px; padding:16px 18px; overflow-x:auto; border-radius:10px; background:#1b1b1f; border:1px solid #2a2a30; box-shadow:0 1px 3px rgba(0,0,0,0.25); }
.anc-prose pre code{ background:none; padding:0; font-size:13.5px; line-height:21px; color:#e6e6eb; white-space:pre; }
.anc-prose hr{ border:none; border-top:1px solid var(--stroke-divider); margin:32px 0; }

/* code block chrome (when wrapped by anc_codeblock markup) */
[data-anc-codeblock]{ margin:0 0 24px; border-radius:10px; overflow:hidden; background:#1b1b1f; border:1px solid #2a2a30; box-shadow:0 1px 3px rgba(0,0,0,0.25); }
[data-anc-codeblock] pre{ margin:0; border:none; border-radius:0; box-shadow:none; }

/* ---- On this page TOC ---- */
.anc-toc-link{ display:block; padding:6px 10px; border-left:2px solid transparent; font-size:13px; line-height:18px; color:var(--text-secondary); text-decoration:none; border-radius:0 6px 6px 0; }
.anc-toc-link:hover{ color:var(--text-primary); background:var(--fill-subtle-secondary); }
.anc-toc-link.is-active{ color:var(--accent-default); border-left-color:var(--accent-default); font-weight:600; background:color-mix(in srgb, var(--accent-default) 7%, transparent); }

/* ---- comments ---- */
.anc-comments .comment-list{ list-style:none; margin:0; padding:0; }
.anc-comments .children{ list-style:none; margin:0 0 0 28px; padding:0; }
.anc-comments .comment-body{ padding:16px 0; border-bottom:1px solid var(--stroke-divider); }
.anc-comments .comment-author .fn{ font-weight:600; font-style:normal; }
.anc-comments .comment-meta{ font-size:12px; color:var(--text-secondary); }
.anc-comments .comment-form input[type="text"],
.anc-comments .comment-form input[type="email"],
.anc-comments .comment-form input[type="url"],
.anc-comments .comment-form textarea{ width:100%; padding:10px 12px; border-radius:8px; border:1px solid var(--stroke-divider); border-bottom:2px solid var(--accent-default); background:var(--bg-card); font-family:var(--font-family-base); font-size:14px; color:var(--text-primary); }
.anc-comments .form-submit .submit{ cursor:pointer; }

/* pagination (the_posts_pagination) */
.navigation.pagination{ display:flex; justify-content:center; }
.navigation.pagination .nav-links{ display:inline-flex; gap:6px; flex-wrap:wrap; align-items:center; }
.navigation.pagination .page-numbers{ display:grid; place-items:center; min-width:38px; height:38px; padding:0 10px; border-radius:8px; border:1px solid var(--stroke-divider); background:var(--bg-card); color:var(--text-primary); text-decoration:none; font-size:14px; }
.navigation.pagination .page-numbers.current{ background:var(--accent-default); color:var(--text-on-accent-primary); border-color:var(--accent-default); }
.navigation.pagination .page-numbers.dots{ border:none; background:none; }

/* ============================================================
   Newsletter signup form (Brevo/Sendinblue "mailin" plugin)
   Third-party markup we don't control. The plugin prints per-form CSS
   inline as `form#sib_signup_form_N {...}` — ID specificity — so the
   conflicting properties below need !important to land. Emptying the
   form's CSS box in Brevo → Forms would let every !important here go.
   Class-based (not #sib_signup_form_1) so every form id is covered.
   ============================================================ */
.sib_signup_form{
	position:relative; box-sizing:border-box; width:100%; max-width:420px;
	padding:22px !important; border:1px solid var(--stroke-divider); border-radius:14px;
	background:linear-gradient(135deg, color-mix(in srgb, var(--accent-default) 12%, var(--bg-layer-alt)), var(--bg-layer-alt));
	font-family:var(--font-family-base); color:var(--text-primary);
}

.sib_signup_form .subscription-heading h5{
	margin:0; font-family:var(--font-family-display); font-weight:700;
	font-size:19px; line-height:26px; letter-spacing:-.01em; color:var(--text-primary);
}

.sib_signup_form .subscription-form{ display:flex; flex-direction:column; gap:10px; margin-top:14px; }
/* .sib-email-area / .sib-NAME-area sit on both the <p> and its <input>.
   Scoped to .subscription-form so the alert <p> keeps its own margin. */
.sib_signup_form .subscription-form p{ margin:0 !important; }

.sib_signup_form input[type="email"],
.sib_signup_form input[type="text"]{
	box-sizing:border-box; width:100%; padding:0 15px;
	height:46px !important; margin:0 !important;
	border:1px solid var(--stroke-divider) !important;
	border-bottom:2px solid var(--accent-default) !important;
	border-radius:9px; background:var(--bg-card);
	font-family:var(--font-family-base); font-size:14px; color:var(--text-primary); outline:none;
	transition:background-color var(--d-fast) var(--e-standard), border-color var(--d-fast) var(--e-standard);
}
.sib_signup_form input::placeholder{ color:var(--text-secondary); opacity:1; }
.sib_signup_form input[type="email"]:focus-visible,
.sib_signup_form input[type="text"]:focus-visible{ background:var(--bg-layer-alt); border-color:var(--accent-default) !important; }
/* :user-invalid, not :invalid — don't flag a required field before it's touched. */
.sib_signup_form input:user-invalid{ border-color:var(--status-critical) !important; }

.sib_signup_form .sib-default-btn{
	appearance:none; box-sizing:border-box; width:100%; height:46px; cursor:pointer;
	margin:2px 0 0 !important; padding:0 18px !important;
	border:1px solid var(--stroke-control-on-accent) !important;
	border-bottom-color:rgba(0,0,0,.4) !important; border-radius:9px !important;
	background-color:var(--accent-default) !important; color:var(--text-on-accent-primary) !important;
	font-family:var(--font-family-base); font-size:14px; font-weight:600 !important;
	transition:background-color var(--d-fast) var(--e-standard);
}
.sib_signup_form .sib-default-btn:hover{ background-color:var(--accent-secondary) !important; }
.sib_signup_form .sib-default-btn:active{ background-color:var(--accent-tertiary) !important; color:var(--text-on-accent-secondary) !important; }
.sib_signup_form .sib-default-btn:focus-visible{ outline:var(--focus-stroke-width) solid var(--focus-stroke-outer); outline-offset:2px; }

/* Response message. The plugin injects a <p class="sib-alert-message …"> inside
   .sib_msg_disp on submit — style that <p>, not the always-present wrapper. */
.sib_signup_form .sib-alert-message{
	margin:0 0 14px !important; padding:11px 14px !important;
	border:1px solid var(--stroke-divider) !important; border-radius:9px !important;
	background-color:var(--bg-card) !important; color:var(--text-primary) !important;
	font-size:13px; line-height:19px;
}
.sib_signup_form .sib-alert-message-success{ background-color:var(--status-success-bg) !important; border-color:var(--status-success) !important; color:var(--status-success) !important; }
.sib_signup_form .sib-alert-message-error{ background-color:var(--status-critical-bg) !important; border-color:var(--status-critical) !important; color:var(--status-critical) !important; }
.sib_signup_form .sib-alert-message-warning{ background-color:var(--status-caution-bg) !important; border-color:var(--status-caution) !important; color:var(--status-caution) !important; }

/* Submit overlay. Centre the spinner via the <img> — the plugin toggles the
   loader's own `display`, so we can't rely on it being a flex/grid container. */
.sib_signup_form .sib_loader{ position:absolute; inset:0; z-index:2; border-radius:14px; background:var(--bg-smoke); }
.sib_signup_form .sib_loader img{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); }