/* ============================================================
   Dhen 2026 — public dark mode
   Toggled client-side via html[data-theme="dark"] + localStorage,
   so it stays compatible with Cloudflare APO edge caching (one
   cached page; the reader picks the theme in their browser).
   Additive & scoped. Teal identity, hero gradients, images and
   the already-dark footer are preserved.
   ============================================================ */

html[data-theme="dark"]{
	color-scheme:dark;
	--dh-ink:#f1f3f5;
	--dh-body:#c6cbd1;
	--dh-muted:#9aa2ab;
	--dh-line:#262d34;
	--dh-surface:#1b232b;
	--dh-surface-2:#222c35;
	--dh-border:#2b353e;
}

/* Page base */
html[data-theme="dark"] body{ background:#0c1013 !important; color:var(--dh-body) !important; }

/* White / light surfaces -> dark */
html[data-theme="dark"] .bg-white,
html[data-theme="dark"] [class~="bg-white/50"],
html[data-theme="dark"] .bg-alhi-100,
html[data-theme="dark"] .bg-ran-50,
html[data-theme="dark"] [class~="bg-ran-50/50"],
html[data-theme="dark"] .story-item,
html[data-theme="dark"] .recentl-stories{ background-color:var(--dh-surface) !important; }

/* Header */
html[data-theme="dark"] .dh-header{ background:var(--dh-surface) !important; border-bottom-color:#20262c !important; box-shadow:none !important; }
html[data-theme="dark"] .dh-header .primary-nav a{ color:#d7dadf !important; }
html[data-theme="dark"] .dh-header .primary-nav a:hover{ color:#8fe3da !important; background:#1e2730 !important; }
html[data-theme="dark"] .dh-header .primary-nav a::after{ background:#2fd3c6 !important; }
html[data-theme="dark"] .dh-header .search-box input{ background:var(--dh-surface-2) !important; border-color:#2a323a !important; color:#e7eaed !important; }
html[data-theme="dark"] .dh-header .search-box input:focus{ background:#20272e !important; border-color:#2fd3c6 !important; box-shadow:0 0 0 3px rgba(18,168,158,.22) !important; }
html[data-theme="dark"] .dh-header .search-box input::placeholder{ color:#7e858d !important; }
html[data-theme="dark"] .dh-header .mobile-nav a{ color:#d7dadf !important; }
html[data-theme="dark"] .dh-header .mobile-nav a:hover{ background:#1e2730 !important; color:#8fe3da !important; }
html[data-theme="dark"] .hamburger-inner,
html[data-theme="dark"] .hamburger-inner::before,
html[data-theme="dark"] .hamburger-inner::after{ background-color:#d7dadf !important; }

/* Teal-tint section a touch deeper */
html[data-theme="dark"] [class~="bg-fehi-500/10"]{ background-color:rgba(18,168,158,0.10) !important; }

/* Dark neutral utility text -> light */
html[data-theme="dark"] .text-alhi-900,
html[data-theme="dark"] .text-alhi-500{ color:var(--dh-body) !important; }

/* Titles / headings */
html[data-theme="dark"] .story-item--title,
html[data-theme="dark"] .story-item--title a,
html[data-theme="dark"] h1, html[data-theme="dark"] h2, html[data-theme="dark"] h3{ color:var(--dh-ink) !important; }

/* Body copy + meta */
html[data-theme="dark"] .story-item--details,
html[data-theme="dark"] .single .article-entry,
html[data-theme="dark"] .single .article-entry p,
html[data-theme="dark"] main p{ color:var(--dh-body) !important; }

/* Links */
html[data-theme="dark"] a{ color:#dfe3e7; }
html[data-theme="dark"] .story-item--title a:hover{ color:#5fd3c9 !important; }

/* Borders / dividers */
html[data-theme="dark"] .border-alhi-100,
html[data-theme="dark"] .border-alhi-200,
html[data-theme="dark"] hr{ border-color:var(--dh-border) !important; }

/* Cards */
html[data-theme="dark"] .story-item.is-card{ background-color:var(--dh-surface) !important; border:1px solid #2b353e !important; box-shadow:0 12px 34px -20px rgba(0,0,0,.85) !important; }

/* Inputs */
html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea{ background-color:var(--dh-surface-2) !important; color:#e7eaed !important; border-color:#2a323a !important; }

/* Article share buttons, if present */
html[data-theme="dark"] .dh-share a{ background:var(--dh-surface-2) !important; border-color:#2a323a !important; color:#dfe3e7 !important; }
html[data-theme="dark"] .dh-share a:hover{ background:#232c34 !important; }

/* Calm very-bright images a touch for night reading */
html[data-theme="dark"] .story-item img,
html[data-theme="dark"] .hero-story img{ filter:brightness(.92) contrast(1.02); }

/* ---- Theme toggle button (injected into the teal top bar) ---- */
.dh-theme-toggle{
	display:inline-flex; align-items:center; justify-content:center;
	width:30px; height:30px; margin-inline-start:6px;
	border:0; border-radius:8px; cursor:pointer;
	background:rgba(255,255,255,.14); color:#fff;
	font-size:15px; line-height:1;
	transition:background .15s ease, transform .15s ease;
}
.dh-theme-toggle:hover{ background:rgba(255,255,255,.26); transform:translateY(-1px); }
.dh-theme-toggle:active{ transform:scale(.94); }


/* ---- Headline visibility: content links/headings carry no utility class and
        pick up dark theme colors from the page's inline styles; force them light,
        but keep teal section labels (text-fehi-*) and white overlay text. ---- */
html[data-theme="dark"] main a:not([class*="text-fehi"]):not([class*="text-white"]):not(.button),
html[data-theme="dark"] main h1,
html[data-theme="dark"] main h2,
html[data-theme="dark"] main h3,
html[data-theme="dark"] main h4,
html[data-theme="dark"] .recentl-stories a:not([class*="text-fehi"]):not([class*="text-white"]),
html[data-theme="dark"] .hero-story a:not([class*="text-fehi"]):not([class*="text-white"]){ color:#eef1f4 !important; }

html[data-theme="dark"] .primary-nav a,
html[data-theme="dark"] .top-header-nav a{ color:#d7dadf !important; }

/* ---- Article (single) headline: the post page sets its own H1 colour with
        high specificity, so override it explicitly for dark. ---- */
html[data-theme="dark"] .single .story-item--header h1,
html[data-theme="dark"] .single .article-entry h1,
html[data-theme="dark"] .single .article-entry h2,
html[data-theme="dark"] .single .story-item--title{ color:#f3f5f7 !important; }