/* Dark mode. The header toggle (theme-toggle.js) sets <html data-theme="dark"> and remembers it
   in localStorage["econgoat.theme"]; the inline script in base.html applies it before the page
   paints. This file loads after output.css, so its overrides beat the Tailwind utilities the
   templates use. Page stylesheets carry their own html[data-theme="dark"] rules. */
.eg-theme-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; flex: 0 0 40px; padding: 8px;
    border: 1px solid var(--line); border-radius: 50%;
    background: transparent; color: var(--muted); cursor: pointer;
}
.eg-theme-toggle:hover { background: var(--brand-soft); color: var(--ink); }
.eg-theme-toggle:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.eg-theme-toggle svg { width: 21px; height: 21px; }
.eg-theme-toggle .eg-theme-sun { display: none; }
html[data-theme="dark"] .eg-theme-sun { display: block; }
html[data-theme="dark"] .eg-theme-moon { display: none; }
html[data-theme="dark"] {
    color-scheme: dark;
    --bg: #0b1730; --ink: #e8eef9; --muted: #a9b8d3; --line: #26406e;
    --brand: #b3c7e6; --brand-hover: #d8e3f3; --brand-soft: #1b315c;
    --accent: #f8c14a; --focus: #f8c14a;
    --button-bg: #2d4d8a; --button-bg-hover: #3d62a6; --button-text: #ffffff;
    --eg-surface: #142548; --eg-raised: #1b315c;
    --eg-input-line: #5a7fbf;
    --shadow-sm: 0 4px 12px rgb(0 0 0 / .25);
    --shadow-md: 0 12px 32px rgb(0 0 0 / .35);
}
html[data-theme="dark"] body { background: var(--bg); color: var(--ink); }
html[data-theme="dark"] .site-header { background: rgb(11 23 48 / .97); border-color: var(--line); }
html[data-theme="dark"] :is(.metrics-container, .program-modern-card, .list-item-ui, dialog) {
    background: var(--eg-surface); color: var(--ink);
}
html[data-theme="dark"] :is(.impact-panel-modern, .visual-concept-pod) {
    background: var(--eg-raised); border-color: var(--line);
}
html[data-theme="dark"] :is(.page-hero, .keypoints) { background: var(--eg-surface); }
html[data-theme="dark"] .page-hero { border-bottom: 1px solid var(--line); }
html[data-theme="dark"] .keypoints { border: 1px solid var(--line); }
html[data-theme="dark"] .panel { border-color: var(--line); }
/* The privacy policy's cookie tables sit on a navy card; their header row (--brand-soft) is a step lighter. */
html[data-theme="dark"] .cookie-table-wrap { background: var(--eg-surface); }
html[data-theme="dark"] .button-white { background: var(--eg-raised); color: var(--ink); }
html[data-theme="dark"] .button-secondary-outlined:hover { background: var(--eg-raised); }
html[data-theme="dark"] :is(input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]), select, textarea) {
    background-color: var(--bg); color: var(--ink); border-color: var(--eg-input-line);
}
html[data-theme="dark"] ::placeholder { color: #93a4c4; opacity: 1; }
html[data-theme="dark"] .brand-mark { color: var(--brand); }
html[data-theme="dark"] .nav-label { color: var(--muted); }

/* Navy buttons would sink into the navy page, so lift them two steps. */
html[data-theme="dark"] :is(a, button):is(.bg-navy-700, .bg-navy-800, .bg-navy-900) { background-color: #2d4d8a; }
html[data-theme="dark"] :is(a, button):is(.hover\:bg-navy-600, .hover\:bg-navy-700, .hover\:bg-navy-800, .hover\:bg-navy-900):hover { background-color: #3d62a6; }

/* Tailwind utilities the templates use, mapped onto the dark palette. */
html[data-theme="dark"] .bg-blue-100 { background-color: var(--eg-raised); }
html[data-theme="dark"] .bg-blue-50 { background-color: var(--eg-raised); }
html[data-theme="dark"] .bg-gray-100 { background-color: var(--eg-raised); }
html[data-theme="dark"] .bg-gray-200 { background-color: var(--eg-raised); }
html[data-theme="dark"] .bg-gray-50 { background-color: var(--bg); }
html[data-theme="dark"] .bg-navy-100 { background-color: var(--eg-raised); }
html[data-theme="dark"] .bg-navy-200 { background-color: var(--line); }
html[data-theme="dark"] .bg-navy-50 { background-color: var(--eg-raised); }
html[data-theme="dark"] .bg-navy-50\/50 { background-color: var(--eg-raised); }
html[data-theme="dark"] .bg-slate-100 { background-color: var(--eg-raised); }
html[data-theme="dark"] .bg-slate-50 { background-color: var(--bg); }
html[data-theme="dark"] .bg-white { background-color: var(--eg-surface); }
html[data-theme="dark"] .border-blue-100 { border-color: var(--line); }
html[data-theme="dark"] .border-gray-100 { border-color: var(--line); }
html[data-theme="dark"] .border-gray-200 { border-color: var(--line); }
html[data-theme="dark"] .border-gray-300 { border-color: var(--line); }
html[data-theme="dark"] .border-gray-400 { border-color: var(--eg-input-line); }
html[data-theme="dark"] .border-gray-500 { border-color: var(--eg-input-line); }
html[data-theme="dark"] .border-navy-100 { border-color: var(--line); }
html[data-theme="dark"] .border-navy-200 { border-color: var(--line); }
html[data-theme="dark"] .divide-gray-100 > :not(:last-child) { border-color: var(--line); }
html[data-theme="dark"] .divide-gray-200 > :not(:last-child) { border-color: var(--line); }
html[data-theme="dark"] .focus\:border-navy-600:focus { border-color: var(--eg-input-line); }
html[data-theme="dark"] .focus\:ring-navy-500:focus { --tw-ring-color: var(--focus); }
html[data-theme="dark"] .focus\:ring-navy-600:focus { --tw-ring-color: var(--focus); }
html[data-theme="dark"] .focus-visible\:ring-navy-500:focus-visible { --tw-ring-color: var(--focus); }
html[data-theme="dark"] .focus-visible\:ring-navy-600:focus-visible { --tw-ring-color: var(--focus); }
html[data-theme="dark"] .group\/item:hover .group-hover\/item\:text-navy-700 { color: var(--brand); }
html[data-theme="dark"] .group:hover .group-hover\:text-navy-600 { color: var(--brand); }
html[data-theme="dark"] .group:hover .group-hover\:text-navy-700 { color: var(--brand); }
html[data-theme="dark"] .hover\:bg-blue-50:hover { background-color: var(--eg-raised); }
html[data-theme="dark"] .hover\:bg-gray-100:hover { background-color: var(--eg-raised); }
html[data-theme="dark"] .hover\:bg-gray-200:hover { background-color: var(--eg-raised); }
html[data-theme="dark"] .hover\:bg-gray-50:hover { background-color: var(--bg); }
html[data-theme="dark"] .hover\:bg-navy-100:hover { background-color: var(--eg-raised); }
html[data-theme="dark"] .hover\:bg-navy-50:hover { background-color: var(--eg-raised); }
html[data-theme="dark"] .hover\:bg-sky-50:hover { background-color: var(--eg-raised); }
html[data-theme="dark"] .hover\:bg-white:hover { background-color: var(--eg-surface); }
html[data-theme="dark"] .hover\:border-gray-300:hover { border-color: var(--eg-input-line); }
html[data-theme="dark"] .hover\:border-gray-400:hover { border-color: var(--eg-input-line); }
html[data-theme="dark"] .hover\:border-navy-200:hover { border-color: var(--eg-input-line); }
html[data-theme="dark"] .hover\:border-navy-300:hover { border-color: var(--eg-input-line); }
html[data-theme="dark"] .hover\:text-black:hover { color: var(--ink); }
html[data-theme="dark"] .hover\:text-blue-700:hover { color: var(--brand); }
html[data-theme="dark"] .hover\:text-blue-800:hover { color: var(--brand); }
html[data-theme="dark"] .hover\:text-gray-700:hover { color: var(--ink); }
html[data-theme="dark"] .hover\:text-gray-900:hover { color: var(--ink); }
html[data-theme="dark"] .hover\:text-navy-600:hover { color: var(--brand-hover); }
html[data-theme="dark"] .hover\:text-navy-700:hover { color: var(--brand-hover); }
html[data-theme="dark"] .hover\:text-navy-800:hover { color: var(--brand-hover); }
html[data-theme="dark"] .hover\:text-navy-900:hover { color: var(--brand-hover); }
html[data-theme="dark"] .hover\:text-sky-600:hover { color: var(--brand); }
html[data-theme="dark"] .text-black { color: var(--ink); }
html[data-theme="dark"] .text-blue-800 { color: var(--brand); }
html[data-theme="dark"] .text-gray-500 { color: var(--muted); }
html[data-theme="dark"] .text-gray-600 { color: var(--muted); }
html[data-theme="dark"] .text-gray-700 { color: var(--muted); }
html[data-theme="dark"] .text-gray-800 { color: var(--ink); }
html[data-theme="dark"] .text-gray-900 { color: var(--ink); }
html[data-theme="dark"] .text-red-600 { color: #fca5a5; }
html[data-theme="dark"] .text-red-700 { color: #fca5a5; }
/* Navy text turns pale, except on a gold badge, which stays gold in dark mode too. */
html[data-theme="dark"] :is(.text-navy-500, .text-navy-600, .text-navy-700, .text-navy-800, .text-navy-900, .text-navy-950):not([class*="bg-gold-"]) { color: var(--brand); }
html[data-theme="dark"] :is(.shadow-sm, .shadow, .shadow-md, .shadow-lg, .shadow-xl, .shadow-2xl) { --tw-shadow-color: rgb(0 0 0 / .45); }

@media (min-width: 1280px) {
    html[data-theme="dark"] .header-navigation-wrapper { background: transparent; }
}
/* The toggle needs JavaScript; without it there is nothing to press. */
html.no-js .eg-theme-toggle { display: none; }

/* Plain white header branding in dark mode. */
html[data-theme="dark"] .site-header .brand-title {
    color: #ffffff;
    /* A navy halo keeps the white lettering readable over the goat. */
    text-shadow: 0 0 3px var(--bg), 0 0 6px var(--bg);
    -webkit-text-stroke: 0;
}

/* The section you are in: pale text with a gold underline. */
html[data-theme="dark"] .site-header .nav-links > a[aria-current],
html[data-theme="dark"] .site-header .nav-group.is-current > button {
    color: var(--ink);
    text-decoration-color: var(--accent);
}

/* Target the pointer directly: pseudo-elements inside :is() are not reliable. */
html[data-theme="dark"] .dropdown-box,
html[data-theme="dark"] .dropdown-box::before {
    background: var(--eg-raised);
    border-color: var(--line);
}
/* The panel is already raised, so a hovered or current item goes one step lighter. */
html[data-theme="dark"] .dropdown-box a:hover,
html[data-theme="dark"] .dropdown-box a[aria-current] { background-color: #233e72; }

/* Bring the call-to-action card and the shared footer into the navy palette. */
html[data-theme="dark"] .cta-banner-card {
    background: var(--eg-surface);
    color: var(--ink);
    border: 1px solid var(--line);
    box-shadow: 0 12px 32px rgb(0 0 0 / .3);
}
html[data-theme="dark"] .cta-banner-card h2 { color: var(--ink); }
html[data-theme="dark"] .cta-banner-card p { color: var(--muted); }
html[data-theme="dark"] .cta-banner-card .button-white {
    background: var(--button-bg);
    color: var(--button-text);
    border: 1px solid #3d62a6;
}
html[data-theme="dark"] .cta-banner-card .button-white:hover { background: var(--button-bg-hover); }

/* The footer is navy-950 in both themes; in dark mode it goes a shade deeper than the page, with
   a fine, low-contrast texture that needs no image download. */
html[data-theme="dark"] body > footer.eg-footer {
    background-color: #07101f;
    background-image:
        radial-gradient(ellipse at 15% 0%, rgb(255 255 255 / .035), transparent 65%),
        radial-gradient(circle, rgb(255 255 255 / .055) .65px, transparent .85px);
    background-size: 100% 100%, 5px 5px;
    background-repeat: no-repeat, repeat;
    color: var(--muted);
    border-top: 1px solid var(--line);
}
html[data-theme="dark"] body > footer.eg-footer .border-navy-800 { border-color: var(--line); }
html[data-theme="dark"] body > footer.eg-footer .text-gray-400 { color: var(--muted); }
html[data-theme="dark"] body > footer.eg-footer a:hover { color: #ffffff; }

/* Printing. Paper is white and browsers leave out backgrounds by default, so a dark-mode reader
   prints the light theme, on every page. :root outranks the html[data-theme="dark"] rules above;
   !important beats the inline color-scheme that the theme script sets on <html>. Page
   stylesheets reset their own hard-coded dark colors in their print rules. */
@media print {
    .eg-theme-toggle { display: none; }
    :root[data-theme="dark"] {
        color-scheme: light !important;
        --bg: #ffffff; --ink: #0f1b33; --muted: #4a5874; --line: #e3e9f3;
        --brand: #1b315c; --brand-hover: #233e72; --brand-soft: #eef3fa;
        --button-bg: #1b315c; --button-bg-hover: #233e72;
        --eg-surface: initial; --eg-raised: initial;
    }
    /* White lettering would vanish on paper. */
    html[data-theme="dark"] .site-header .brand-title { color: var(--brand); }
}