/* ============================================================
   Nester Theme System
   Load AFTER site.css, raffle.css, and any page "Head" section CSS.

   PERMANENT (do not remove): light/dark mode support
     - html[data-mode="light|dark"], kept in sync with data-bs-theme
     - primitives below (--bg, --surface, --ink, etc.) and the
       dark-mode overrides for core component classes.

   EXPERIMENTAL — remove-later (see removal guide): the green/blue
   accent (data-accent) and background-pattern (data-background)
   testing controls. Every rule that only exists for those two
   features is grouped under the "EXPERIMENTAL" headings below so
   they can be deleted as a block without touching permanent
   light/dark support. Removing them leaves data-accent="green"
   (production green) and data-background="off" as the only
   remaining behavior.
   ============================================================ */

/* ---- Alias layer -----------------------------------------------------
   Points the site's existing custom-property names at the semantic
   primitives defined per data-mode/data-accent block below, so every
   existing component class (site.css, raffle.css) re-themes without
   being individually rewritten. */
:root {
    --nester-ink: var(--ink);
    --nester-muted: var(--muted);
    --nester-border: var(--border);
    --nester-cream: var(--surface-strong);
    --nester-soft: var(--surface);
    --nester-green: var(--accent-fill);
    --nester-green-dark: var(--accent-fill-dark);
}

/* ================= LIGHT + GREEN — production default ================= */
:root,
html[data-mode="light"][data-accent="green"] {
    --bg: #faf8f3;
    --bg-alt: #f1eee7;
    --surface: #fffdf9;
    --surface-strong: #ffffff;
    --surface-translucent: rgba(255,255,255,.96);
    --border: #d8d3c8;
    --shadow: 0 10px 30px rgba(2,6,23,.08);
    --ink: #172033;
    --muted: #5f6673;
    --header-surface: var(--surface);
    --focus-ring: rgba(0,87,16,.35);

    --brand: #0b4f6c;
    --brand-2: #0e7c86;

    --accent-fill: #005710;
    --accent-fill-dark: #00420c;
    --accent-fill-hover: #006b16;
    --accent-text: #005710;
    --accent-text-hover: #00420c;
    --accent-rgb: 0,87,16;
}

/* ================= EXPERIMENTAL: LIGHT + BLUE ================= */
html[data-mode="light"][data-accent="blue"] {
    --accent-fill: #0b4f6c;
    --accent-fill-dark: #0e7c86;
    --accent-fill-hover: #0d5f80;
    --accent-text: #0b4f6c;
    --accent-text-hover: #0e7c86;
    --accent-rgb: 11,79,108;
    --focus-ring: rgba(11,79,108,.35);
}

/* ================= DARK + GREEN (permanent default for dark mode) ================= */
html[data-mode="dark"] {
    --shadow: 0 10px 30px rgba(0,0,0,.45);
    --focus-ring: rgba(63,184,104,.45);

    --brand: #245f8a;
    --brand-2: #2a6d9c;
    --nester-teal: #3aa0b3;

    --accent-fill: #237a3c;
    --accent-fill-dark: #1a5e2c;
    --accent-fill-hover: #2a8f47;
    --accent-text: #3fb868;
    --accent-text-hover: #6ad489;
    --accent-rgb: 63,184,104;
}

/* Dark-mode surface family, split by accent so the (experimental) blue
   theme keeps its own blue-slate identity while the production green
   theme gets one restrained charcoal/forest family instead — previously
   every dark-mode surface (hero, service cards, review cards, footer)
   shared this same blue-slate set regardless of accent, which read as
   an unrelated blue theme bleeding through the green pages. */
html[data-mode="dark"][data-accent="green"] {
    --bg: #10160F;
    --bg-alt: #161F19;
    --surface: #1C2620;
    --surface-strong: #222D27;
    --surface-translucent: rgba(28,38,32,.92);
    --border: #2C3830;
    --ink: #F1EEE7;
    --muted: #B6B0A5;
    --header-surface: var(--surface-strong);
}

html[data-mode="dark"][data-accent="blue"] {
    --bg: #121826;
    --bg-alt: #171e2d;
    --surface: #1c2436;
    --surface-strong: #212a3d;
    --surface-translucent: rgba(28,36,54,.92);
    --border: #2c3548;
    --ink: #eef1f6;
    --muted: #aeb7c8;
    --header-surface: var(--surface-strong);
}

/* ================= EXPERIMENTAL: DARK + BLUE ================= */
/* Matches the corrected midnight-blue dark-mode logo (sampled ~#001a47 on
   its darkest gradient stop) — deeper/more navy than the original medium
   blue used here. */
html[data-mode="dark"][data-accent="blue"] {
    --brand: #0d3a66;
    --brand-2: #123f78;

    --accent-fill: #164a86;
    --accent-fill-dark: #0d3a66;
    --accent-fill-hover: #1d5a9c;
    --accent-text: #5b9fe0;
    --accent-text-hover: #7fb4e6;
    --accent-rgb: 22,74,134;
    --focus-ring: rgba(91,159,224,.45);
}

html[data-mode="light"] {
    color-scheme: light;
    --pattern-section-opacity: 40%;
    /* Mode-aware alias onto the accent-scoped pattern images set below, so
       .nester-band's own pattern layer doesn't need a [data-mode] selector
       of its own. */
    --pattern-active-webp: var(--pattern-light-webp);
    --pattern-active-png: var(--pattern-light-png);
}

html[data-mode="dark"] {
    color-scheme: dark;
    --pattern-section-opacity: 35%;
    --pattern-active-webp: var(--pattern-dark-webp);
    --pattern-active-png: var(--pattern-dark-png);
}

/* ================= Semantic icon colors (mode-only — independent of the
   green/blue accent toggle above) =================
   One restrained color family per topic, used by the .nester-icon--* modifier
   classes in site.css so informational icons stop rendering as undifferentiated
   Nester green. See site.css's "Icon system" section for the modifier classes
   themselves and .home-support-icon's base rule that consumes these. */
html[data-mode="light"] {
    --nester-icon-health: #b7434b;
    --nester-icon-health-bg: #f8e8e9;
    --nester-icon-health-border: #dfb3b7;

    --nester-icon-compliance: #326b9b;
    --nester-icon-compliance-bg: #e8f1f8;
    --nester-icon-compliance-border: #aec9df;

    --nester-icon-executive: #9a6a18;
    --nester-icon-executive-bg: #f7eedc;
    --nester-icon-executive-border: #dec48c;

    --nester-icon-support: #28766f;
    --nester-icon-support-bg: #e5f2ef;
    --nester-icon-support-border: #a9d0c9;

    --nester-icon-appraisal: #675a91;
    --nester-icon-appraisal-bg: #eeeaf6;
    --nester-icon-appraisal-border: #c7bedf;
}

html[data-mode="dark"] {
    --nester-icon-health: #f08a90;
    --nester-icon-health-bg: rgba(240, 138, 144, 0.13);
    --nester-icon-health-border: rgba(240, 138, 144, 0.38);

    --nester-icon-compliance: #80b8e4;
    --nester-icon-compliance-bg: rgba(128, 184, 228, 0.13);
    --nester-icon-compliance-border: rgba(128, 184, 228, 0.38);

    --nester-icon-executive: #e7bd68;
    --nester-icon-executive-bg: rgba(231, 189, 104, 0.13);
    --nester-icon-executive-border: rgba(231, 189, 104, 0.38);

    --nester-icon-support: #70c5b9;
    --nester-icon-support-bg: rgba(112, 197, 185, 0.13);
    --nester-icon-support-border: rgba(112, 197, 185, 0.38);

    --nester-icon-appraisal: #b7a8e2;
    --nester-icon-appraisal-bg: rgba(183, 168, 226, 0.13);
    --nester-icon-appraisal-border: rgba(183, 168, 226, 0.38);
}

/* ================= Dark-mode core-surface overrides (permanent) ================= */
/* Bootstrap's own components (navbar, dropdowns, form controls, outline
   buttons) already respond to data-bs-theme; the rules below cover this
   site's custom component classes that don't use Bootstrap's variables. */

html[data-mode="dark"] .site-header {
    background-color: var(--header-surface);
    border-bottom: 1px solid rgba(255, 255, 255, .10);
}

html[data-mode="dark"] .site-header .navbar .nav-link {
    color: rgba(255, 255, 255, .84);
}

html[data-mode="dark"] .site-header .navbar .nav-link:hover,
html[data-mode="dark"] .site-header .navbar .nav-link:focus,
html[data-mode="dark"] .site-header .navbar .nav-link.active {
    color: #fff;
}

/* Permanent light/dark toggle button */
.nester-mode-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    border-radius: 999px;
    background-color: var(--surface-strong);
    border-color: var(--border);
    transition: background-color .15s ease, border-color .15s ease, transform .1s ease;
}

    .nester-mode-toggle img {
        width: 1.25rem;
        height: 1.25rem;
        pointer-events: none;
    }

    .nester-mode-toggle:hover {
        transform: translateY(-1px);
    }

    .nester-mode-toggle:focus-visible {
        outline: 2px solid var(--focus-ring);
        outline-offset: 2px;
    }

html[data-mode="dark"] .nester-mode-toggle {
    background-color: var(--surface-strong);
    border-color: var(--border);
}

    html[data-mode="dark"] .nester-mode-toggle img {
        filter: invert(1);
    }

.nester-theme-testing-menu {
    min-width: 15rem;
}

@media (max-width: 991.98px) {
    .nester-theme-testing-menu {
        min-width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .nester-mode-toggle,
    .service-card,
    .home-service-card,
    .nester-service-tile {
        transition: none !important;
    }
}

/* Accent used as TEXT (links/labels/kickers) needs a lighter tint than the
   accent used as a FILL (buttons/badges) to clear AA contrast on a dark
   background — the fill tone is tuned for white-on-fill contrast instead. */
html[data-mode="dark"] .nester-link,
html[data-mode="dark"] .nester-legal-link,
html[data-mode="dark"] .home-service-card__link,
html[data-mode="dark"] .breadcrumb a,
html[data-mode="dark"] .nester-kicker,
html[data-mode="dark"] .home-kicker,
html[data-mode="dark"] .section-heading-kicker,
html[data-mode="dark"] .kicker,
html[data-mode="dark"] .nester-outline-btn,
html[data-mode="dark"] .home-btn-green,
html[data-mode="dark"] .home-highlight-green,
html[data-mode="dark"] .nester-title .accent,
html[data-mode="dark"] .home-hero-title .accent,
html[data-mode="dark"] .nester-section-title .accent,
html[data-mode="dark"] .nester-heading-green {
    color: var(--accent-text);
}

html[data-mode="dark"] .nester-link:hover,
html[data-mode="dark"] .nester-link:focus,
html[data-mode="dark"] .nester-legal-link:hover,
html[data-mode="dark"] .nester-legal-link:focus,
html[data-mode="dark"] .home-service-card__link:hover,
html[data-mode="dark"] .home-service-card__link:focus {
    color: var(--accent-text-hover);
}

html[data-mode="dark"] .nester-outline-btn:hover,
html[data-mode="dark"] .nester-outline-btn:focus {
    color: #fff;
}

/* Generic card/panel/form surfaces */
html[data-mode="dark"] .service-card,
html[data-mode="dark"] .nester-card,
html[data-mode="dark"] .nester-art-card,
html[data-mode="dark"] .nester-service-tile,
html[data-mode="dark"] .nester-icon-row,
html[data-mode="dark"] .nester-focus-card,
html[data-mode="dark"] .nester-press-feature,
html[data-mode="dark"] .nester-process-card,
html[data-mode="dark"] .home-service-card,
html[data-mode="dark"] .home-review-card,
html[data-mode="dark"] .nester-team-row-card,
html[data-mode="dark"] .callout {
    background: var(--surface);
    border-color: var(--border) !important;
}

/* Homepage "Additional Ways We Help" medallions only (.home-support-section
   scope — see site.css). Light mode: bolder icon/medallion with a subtle
   inset highlight; var(--accent-text) reads identically to the previous
   var(--nester-green) in light mode, just via the semantically-correct
   text-accent token. */
html[data-mode="light"] .home-support-section .home-support-icon {
    color: var(--nester-icon-color, var(--accent-text));
    background: var(--nester-icon-bg, #fff);
    border: 1px solid var(--nester-icon-border, rgba(217, 164, 65, 0.55));
    box-shadow:
        0 10px 22px rgba(23, 32, 51, 0.10),
        inset 0 1px rgba(255, 255, 255, 0.8);
}

/* Dark mode: var(--nester-green) (#237a3c, ~2.68:1 against #212a3d) reads
   weak here — var(--accent-text) is the lighter tone tuned for AA text
   contrast (~5.65:1). Gold ring stays a restrained secondary accent, not a
   bright badge. */
html[data-mode="dark"] .home-support-section .home-support-icon {
    color: var(--nester-icon-color, var(--accent-text));
    background: var(--nester-icon-bg, linear-gradient(
        145deg,
        rgba(63, 184, 104, 0.16),
        var(--surface-strong)
    ));
    border: 1px solid var(--nester-icon-border, rgba(217, 164, 65, 0.65));
    box-shadow:
        0 10px 24px rgba(0, 0, 0, 0.28),
        inset 0 1px rgba(255, 255, 255, 0.06);
}

html[data-mode="dark"] .nester-soft-panel,
html[data-mode="dark"] .nester-team-bio-panel {
    background: var(--surface-strong);
    border-color: var(--border) !important;
}

/* .nester-check-list li's light-mode #374151 is unreadable against any dark
   surface (~1.39:1). The green check-icon bubble (::before) is untouched. */
html[data-mode="dark"] .nester-check-list li {
    color: var(--muted);
}

html[data-mode="dark"] .hero-placeholder {
    background: rgba(18,24,38,.75);
    border-color: var(--border);
}

/* .home-btn-outline's light-mode hover (a faint accent-tinted wash) reads
   as nearly transparent against the dark canvas — give it an explicit
   filled-white treatment instead. */
html[data-mode="dark"] .home-btn-outline {
    color: var(--accent-fill-dark) !important;
    background: rgba(255, 255, 255, .92);
    border-color: rgba(255, 255, 255, .30);
}

html[data-mode="dark"] .home-btn-outline:hover,
html[data-mode="dark"] .home-btn-outline:focus {
    color: var(--accent-fill-dark) !important;
    background: #fff;
    border-color: rgba(255, 255, 255, .55);
}

/* .home-hero's and .nester-hero's own decorative gradients (light mode, in
   site.css) and their former dark-mode counterparts are superseded by the
   .nester-band--hero fill everywhere both classes are used — both are
   exclusively hero wrappers now converted to the band system. */

/* Carrier logo ticker: most carrier wordmarks are dark text drawn for a
   white background, so the strip stays an unpatterned light-neutral trust
   band in BOTH modes rather than following the page's own dark surface. */
html[data-mode="dark"] .carrier-ticker-section {
    background: #FCFBF8;
    border-top-color: var(--border);
    border-bottom-color: var(--border);
}

html[data-mode="dark"] .carrier-ticker-viewport {
    background: #FCFBF8;
}

html[data-mode="dark"] .carrier-ticker-heading {
    color: #172033;
}

html[data-mode="dark"] .carrier-ticker-disclosure {
    color: #5f6673;
}

.carrier-ticker-viewport:hover .carrier-ticker-track,
.carrier-ticker-viewport:focus-within .carrier-ticker-track {
    animation-play-state: paused;
}

/* Forms */
html[data-mode="dark"] .form-control,
html[data-mode="dark"] .form-select {
    background-color: var(--surface);
    border-color: var(--border);
    color: var(--ink);
}

/* .form-card intentionally stays ~#fafafa in dark mode (each page sets its
   own background/border inline) — but its labels/legends/helper text were
   inheriting Bootstrap's dark-mode body color (~#dee2e6, ~1.25:1 against the
   light card). Scope dark text to the card only; the dark .form-control/
   .form-select above are unaffected since they're not text on the card
   itself. */
html[data-mode="dark"] .form-card {
    color: #172033;
}

html[data-mode="dark"] .form-card .form-label,
html[data-mode="dark"] .form-card .form-check-label,
html[data-mode="dark"] .form-card legend {
    color: #374151;
}

html[data-mode="dark"] .form-card .form-text,
html[data-mode="dark"] .form-card .text-muted {
    color: #5f6673 !important;
}

html[data-mode="dark"] .form-card a:not(.btn) {
    color: var(--accent-fill);
}

html[data-mode="dark"] .form-card a:not(.btn):hover,
html[data-mode="dark"] .form-card a:not(.btn):focus {
    color: var(--accent-fill-dark);
}

/* Bootstrap's dark alert-info: dark-green heading on dark teal, cyan body
   text, Bootstrap-blue links — none of it reads well against the Nester
   dark-green surfaces. Background/border are left alone by design. */
html[data-mode="dark"] .alert-info .alert-heading {
    color: var(--accent-text);
}

html[data-mode="dark"] .alert-info {
    color: var(--muted);
}

html[data-mode="dark"] .alert-info strong {
    color: var(--ink);
}

html[data-mode="dark"] .alert-info a {
    color: var(--accent-text-hover);
}

/* Card/tile titles that were still hardcoded to the old teal accent instead
   of the active green brand accent. */
html[data-mode="dark"] .home-service-card__title,
html[data-mode="dark"] .home-support-card__title,
html[data-mode="dark"] .nester-service-tile__title,
html[data-mode="dark"] .home-approach-heading {
    color: var(--accent-text);
}

/* Static Bootstrap gray active-breadcrumb text reads poorly against the
   dark canvas. */
html[data-mode="dark"] .breadcrumb-item.active {
    color: var(--muted);
}

/* Footer */
html[data-mode="dark"] .nester-footer {
    background: var(--bg-alt);
    border-top-color: var(--border) !important;
}

html[data-mode="dark"] .nester-footer-social {
    background: var(--surface);
    border-color: var(--border);
}

/* Raffle core surfaces (green/gold event branding stays constant by
   design — only the neutral surface/text tones shift for dark mode) */
html[data-mode="dark"] {
    --raffle-surface: rgba(28,36,54,.92);
    --raffle-surface-alt: rgba(28,36,54,.9);
    --raffle-surface-border: rgba(255,255,255,.12);
    --raffle-panel: #1a2233;
    --raffle-panel-border: #2c3548;
    --raffle-panel-text: #b7c0d1;
    --raffle-cream: var(--surface);
    --raffle-border: var(--border);
    --raffle-ink: var(--ink);
    --raffle-muted: var(--muted);
    --raffle-green-text: #3fb868;
    --raffle-eyebrow: var(--nester-gold, #d9a441);
    --raffle-success-pill-bg: rgba(63,184,104,.16);
}

html[data-mode="dark"] .raffle-body {
    background: var(--bg-alt);
}

html[data-mode="dark"] .interest-option .form-check-label,
html[data-mode="dark"] .raffle-form .form-control,
html[data-mode="dark"] .raffle-form .form-select {
    background-color: var(--surface);
    border-color: var(--raffle-border);
    color: var(--raffle-ink);
}

html[data-mode="dark"] .interest-panel {
    background: var(--raffle-panel);
    border-color: var(--raffle-panel-border);
}

html[data-mode="dark"] .confirmation-card__visual {
    background: radial-gradient(circle at 20% 20%, rgba(217,164,65,.18), transparent 16rem), linear-gradient(135deg, var(--surface) 0%, var(--surface-strong) 100%);
}

/* ================= Section band system (muted-pattern refinement) =================
   Five reusable full-width band treatments — Hero, Quiet, Alternate, Solid, CTA —
   replacing the old approach of washing nearly every major section with the same
   translucent tint. Only Hero and Quiet carry a faint decorative N-weave layer of
   their own; Alternate/Solid/CTA are flat, pattern-free fills. CTA bands intentionally
   reuse the pre-existing .nester-cta / .home-cta-section treatments as-is — see those
   classes — rather than a sixth token set here. */
:root,
html[data-mode="light"] {
    --band-hero-bg: #F7F5EF;
    --band-quiet-bg: #F7F5EF;
    --band-alt-bg: #EAEFEA;
    --band-solid-bg: #FCFBF8;
    --band-pattern-hero-alpha: 0.045;
    --band-pattern-quiet-alpha: 0.025;
}

html[data-mode="dark"] {
    --band-hero-bg: #101A16;
    --band-quiet-bg: #111A17;
    --band-alt-bg: #1C2924;
    --band-solid-bg: #17211D;
    --band-pattern-hero-alpha: 0.06;
    --band-pattern-quiet-alpha: 0.045;
}

/* Alternate is the one token that reads distinctly green-tinted (sage / dark-green-
   charcoal) — give blue accent its own neutral blue-gray/charcoal instead of fighting
   the selected accent. Hero/Quiet/Solid are already accent-neutral warm/cool tones. */
html[data-mode="light"][data-accent="blue"] {
    --band-alt-bg: #E9EDF2;
}

html[data-mode="dark"][data-accent="blue"] {
    --band-alt-bg: #1A2230;
}

.nester-band {
    position: relative;
    isolation: isolate;
}

.nester-band > .container {
    position: relative;
    z-index: 1;
}

/* Decorative pattern layer: a normal (non-fixed) absolutely-positioned pseudo-element
   scoped to the band's own box, so its scale never depends on document height and it
   never stacks with another translucent layer. Off by default; only .nester-band--hero
   and .nester-band--quiet turn it on, and only when data-background="on". */
.nester-band::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    display: none;
    background-repeat: repeat;
    background-position: center top;
    background-size: 480px auto;
    background-image: var(--pattern-active-png);
    background-image: image-set(var(--pattern-active-webp) type("image/webp") 1x, var(--pattern-active-png) type("image/png") 1x);
}

html[data-background="on"] .nester-band--hero::before,
html[data-background="on"] .nester-band--quiet::before {
    display: block;
}

.nester-band--hero::before {
    opacity: var(--band-pattern-hero-alpha);
}

.nester-band--quiet::before {
    opacity: var(--band-pattern-quiet-alpha);
}

/* Home page pattern placement refinement: the hero is the primary
   patterned section; "Additional ways we help" (Quiet band) stays flat
   here even though Quiet carries a pattern on other pages (e.g. Our
   Story). About becomes the homepage's one other, fainter patterned
   section instead — Solid bands are pattern-free everywhere else on the
   site, so this is scoped to Home only, not a change to the Solid token. */
html[data-background="on"] .home-support-section.nester-band--quiet::before {
    display: none;
}

html[data-background="on"] .home-about-section.nester-band--solid::before {
    display: block;
}

html[data-mode="light"] .home-about-section.nester-band--solid::before {
    opacity: 0.04;
}

html[data-mode="dark"] .home-about-section.nester-band--solid::before {
    opacity: 0.055;
}

/* Legacy hero/section classes (.hero, .page-hero, .nester-hero, .home-hero,
   .section, .section-alt) stay in the markup wherever their own descendant
   selectors (h1 styling, > .row scoping, icon sizing, etc.) still depend on
   them, but their own background/border/shadow/decorative-swash must not
   fight the new band fill sitting on the same element. themes.css loads
   after site.css, so equal-specificity overrides here win by source order
   without needing !important. */
.nester-band--hero,
.nester-band--quiet,
.nester-band--alternate,
.nester-band--solid {
    border: none;
    border-top: none;
    border-bottom: none;
    border-radius: 0;
    box-shadow: none;
}

.nester-band--hero::after,
.nester-band--quiet::after,
.nester-band--alternate::after,
.nester-band--solid::after {
    content: none;
}

.nester-band--hero {
    background-color: var(--band-hero-bg);
}

.nester-band--quiet {
    background-color: var(--band-quiet-bg);
}

.nester-band--alternate {
    background-color: var(--band-alt-bg);
}

.nester-band--solid {
    background-color: var(--band-solid-bg);
}

@media print {
    .nester-band::before {
        display: none !important;
    }
}

/* ================= EXPERIMENTAL: background-pattern toggle ================= */
/* Per-accent pattern source. Adding a future accent's assets only
   requires a new pair of rules following this shape. */
html[data-accent="green"] {
    --pattern-light-webp: url("/assets/img/background/background_light_green.webp");
    --pattern-light-png: url("/assets/img/background/background_light_green.png");
    --pattern-dark-webp: url("/assets/img/background/background_dark_green.webp");
    --pattern-dark-png: url("/assets/img/background/background_dark_green.png");
}

html[data-accent="blue"] {
    --pattern-light-webp: url("/assets/img/background/background_light_blue.webp");
    --pattern-light-png: url("/assets/img/background/background_light_blue.png");
    --pattern-dark-webp: url("/assets/img/background/background_dark_blue.webp");
    --pattern-dark-png: url("/assets/img/background/background_dark_blue.png");
}

body {
    /* z-index (not just position) is required here so body establishes its
       own stacking context — otherwise ::before's z-index:-1 below escapes
       to the document root instead of just sitting behind body's own
       content, and never actually renders visibly. */
    position: relative;
    z-index: 0;
}

body::before {
    content: "";
    /* Fixed to the viewport (not the `background-attachment: fixed` CSS
       property the spec asks to avoid on mobile) so background-size: cover
       sizes against the viewport, not the full scrollable page height. Kept
       fixed at every width — a `position: absolute` fallback used to apply
       below 768px, but `inset: 0` on an absolutely-positioned element sizes
       against body's own (document-height) box, not the viewport, so
       `cover` blew the image up hugely on any mobile page taller than one
       screen. See body {} above for why body itself doesn't defeat this. */
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    display: none;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

html[data-background="on"] body::before {
    display: block;
}

html[data-background="on"][data-mode="light"] body::before {
    background-image: linear-gradient(rgba(250,248,243,.60), rgba(250,248,243,.60)), var(--pattern-light-png);
    background-image: linear-gradient(rgba(250,248,243,.60), rgba(250,248,243,.60)), image-set(var(--pattern-light-webp) type("image/webp") 1x, var(--pattern-light-png) type("image/png") 1x);
}

html[data-background="on"][data-mode="dark"] body::before {
    background-image: linear-gradient(rgba(18,24,38,.32), rgba(18,24,38,.32)), var(--pattern-dark-png);
    background-image: linear-gradient(rgba(18,24,38,.32), rgba(18,24,38,.32)), image-set(var(--pattern-dark-webp) type("image/webp") 1x, var(--pattern-dark-png) type("image/png") 1x);
}

@media print {
    body::before {
        display: none !important;
    }
}

/* ================= EXPERIMENTAL: header-banner toggle ================= */
/* Per-mode/accent header texture. Off by default; toggled from the Theme
   Testing menu so it can be evaluated before deciding whether to keep it. */
html[data-mode="light"][data-accent="green"] {
    --header-banner-image: url("/assets/img/background/extra_banner_light_green.png");
}

html[data-mode="light"][data-accent="blue"] {
    --header-banner-image: url("/assets/img/background/extra_banner_light_blue.png");
}

html[data-mode="dark"][data-accent="green"] {
    --header-banner-image: url("/assets/img/background/extra_banner_dark_green.png");
}

html[data-mode="dark"][data-accent="blue"] {
    --header-banner-image: url("/assets/img/background/extra_banner_dark_blue.png");
}

/* Tunable without touching the image file itself — separation between the
   green wordmark and green banner comes from this overlay, not the artwork.
   Light mode's .08 read as grainier/more visually active than the newly
   muted body sections below it — raised to .35 to quiet the texture down
   moderately while keeping the green identity and logo/nav fully opaque
   and sharp (the overlay only ever sits behind .site-header's own content).
   Revisit once the header artwork itself is revised (see image-work
   backlog). */
html[data-mode="light"] {
    --header-banner-overlay: rgba(255, 255, 255, .35);
}

html[data-mode="dark"] {
    --header-banner-overlay: rgba(3, 15, 11, .22);
}

html[data-header-banner="on"] .site-header {
    /* The source texture is a large square (1254x1254); a small tile size
       keeps it from reading as a zoomed-in crop. */
    background-image:
        linear-gradient(var(--header-banner-overlay), var(--header-banner-overlay)),
        var(--header-banner-image);
    background-size: cover, 1254px auto;
    background-position: center, center top;
    background-repeat: no-repeat, repeat-x;
}

/* Without this, the pattern is invisible in practice: the site's full-width
   section wrappers are fully opaque and stack edge-to-edge with no gaps, so
   body::before never shows through anywhere. Letting these specific bands
   (not cards/forms/nav/footer — those stay opaque per the spec) go slightly
   translucent when the toggle is on is what actually makes it visible while
   keeping text readable.

   All contiguous pattern-backed bands share one --bg-based color-mix (no
   --bg-alt split) so the pattern reads as one continuous surface across the
   hero, carrier ticker, services, support, about, and reviews sections
   instead of alternating tones. .home-cta-section now behaves like any
   other quiet .section-alt fill (see site.css) rather than a special
   photographic band, so it's no longer excluded here either. */
html[data-background="on"] main,
html[data-background="on"] .section:not(.nester-band) {
    background: color-mix(in srgb, var(--bg) var(--pattern-section-opacity), transparent);
}