/* ============================================================================
   Turtle Shell Home Protection — the dark theme, made the default
   ----------------------------------------------------------------------------
   design.css already carries a complete dark theme, but it is written as
   `@media (prefers-color-scheme:dark)`: it reaches only the visitors whose
   operating system asks for it. The client wants the dark site for everyone.

   design.css is a vendor file and stays byte-identical, so the switch is made
   here instead: every declaration from that block, restated unconditionally.
   This file is linked LAST in the head — after design.css, swatches.css,
   social.css and any page-specific sheet — so it wins every tie at equal
   specificity without a single !important.

   Two halves:

     1. THE BLOCK, transcribed. Lines 577-631 of design.css, verbatim apart from
        losing one level of indentation. Its comments come with it, because the
        reasoning behind #6fdc84 and --primary is the reasoning here too.

     2. WHAT THE OPT-IN BLOCK NEVER HAD TO COVER. A theme nobody could reach
        without changing an OS setting was never walked end to end, and it has
        gaps. Each one below is a rule that renders unreadably once dark is the
        default, with the measurement that says so.

   `data-theme` on <html> says "dark" now and is the single source of truth the
   scripts read; nothing in this file keys off it, because there is no light
   theme left to switch back to.
   ============================================================================ */

/* ---- 1. design.css's dark block, unconditional ---------------------------- */

/* color-scheme is NOT in the block it came from — under a media query the
   browser already knew the visitor wanted dark and styled the scrollbars, the
   <select> popup, the date picker and the form-control chrome accordingly.
   Forcing the theme past that signal means saying so explicitly, or every one
   of those platform surfaces stays light on the dark page. */
:root{color-scheme:dark}

:root{--bg:#0f1a13;--bg-soft:#13241a;--ink:#e7efe9;--ink-2:#bcd0c4;--muted:#8fa79a;--line:#274233;--white:#0f1a13}
body{background:var(--bg)}
.site-header{background:rgba(15,26,19,.94);border-bottom-color:var(--line)}
.brand-name,h1,h2,h3,h4{color:#eaf5ec}
.card,.step,.field input,.field select{background:#12241a;border-color:var(--line);color:var(--ink)}
.check{background:#12241a;border-color:var(--line);color:var(--ink)}
.check:has(input:checked){border-color:#6fdc84;background:rgba(111,220,132,.12)}
.primary-nav{background:#0f1a13}
.dropdown{background:#12241a;border-color:var(--line)}
.nav-toggle-sub,.nav-link{color:var(--ink)}
.dropdown-link:hover{background:rgba(60,207,78,.14)}
.map-popup{background:#12241a;color:var(--ink)}
.map-city{color:#cfe0d4;text-shadow:0 1px 3px rgba(0,0,0,.7)}
.map-ctl{background:rgba(18,36,26,.94);color:var(--ink)}
/* --primary is a dark green — fine as a fill, invisible as an icon stroke on
   the dark page (the same trap as text; see the note below). */
.step-icon,.offer-icon{color:#6fdc84}
.card-price{color:#6fdc84}
.service-map{background:#0f1a13}
.lead-form{background:#13241a;color:var(--ink)}
/* Added 2026-08-04. Both were introduced with a hard #fff background and never
   rendered under a dark scheme until the battery gained --schemes: the city
   chips sat at white-on-light-green, contrast ratio 1.62 against a 4.5 floor.
   Anything given background:#fff needs a line here. */
/* 🔴 THE BIG ONE. --primary (#1e5128) is a dark green: correct as a button
   BACKGROUND with white on it, and nearly invisible as TEXT on the dark
   surface (#0f1a13) — Lighthouse measured 1.75-1.92 against a 4.5 floor across
   the nav, card links, stat numbers, review labels, form legends and step
   dots. The fix is a light green for text only; --primary itself must stay
   dark so white-on-primary buttons keep their contrast. Anything that sets
   color:var(--primary) in the light theme needs a line here.
   Measured after: #6fdc84 on #0f1a13 = 9.4:1. */
a,.btn-ghost,.nav-link[aria-current=page],.dropdown-link:hover,.city-directory a:hover,
.pstat dd,.job-stat-n,.stat-num,.review-reply-label,.form-step-dot.is-active,
.pager-num:hover,.city-chip:hover{color:#6fdc84}
.btn-ghost{--btn-fg:#6fdc84;border-color:#3f8f52}
.btn-ghost:hover{--btn-bg:rgba(60,207,78,.14)}
h1,h2,h3,h4,.brand-name,.project-facts-title,.form-panel legend{color:#eaf5ec}
.city-chip-n{color:#cfe8d6}
.step-n{background:var(--secondary);color:#0f1a13}
.city-chip{background:#12241a;border-color:var(--line);color:var(--ink-2)}
.city-chip:hover{background:rgba(60,207,78,.14);color:#eaf5ec;border-color:var(--secondary)}
/* The non-link chip keeps its own colours in dark too — a hover rule defined
   in one scheme only is how this theme broke the first time. */
.city-chip-flat:hover{background:#12241a;color:var(--ink-2);border-color:var(--line)}
.city-chip-n{background:rgba(60,207,78,.18);color:#cfe8d6}
.pager-step{background:#12241a;border-color:var(--line);color:#9fe6ab}
.pager-step:hover{background:rgba(60,207,78,.14)}
.pager-step.is-off{background:transparent;color:#7d9488;border-color:var(--line)}
.pager-num{color:var(--ink-2)}
.pager-num:hover{background:rgba(60,207,78,.14);color:#eaf5ec}
.pager-num.is-current{background:var(--secondary);color:#0f1a13}
.job-stat,.pstat{background:#12241a;border-color:var(--line)}
.visit-head{border-bottom-color:var(--line)}
.frame img,.project-shot img,.lightbox-img{background:#12241a}

/* ---- 2. What the opt-in block never had to cover -------------------------- */

/* The lead form's textarea. The block darkens `.field input` and `.field select`
   and stops there, but design.css sets the background on all three together:
   `.field input,.field select,.field textarea{…background:#fff}`. The textarea
   therefore kept a white background while inheriting `.lead-form`'s
   color:var(--ink) — which the block redefines to #e7efe9. #e7efe9 on #ffffff
   is 1.19:1. The project-details box on every page ends in this field. */
.field textarea{background:#12241a;border-color:var(--line);color:var(--ink)}

/* The step numerals on an unreached step. design.css draws them as
   color:var(--white) on background:var(--line), and the block redefines --white
   to #0f1a13 — so the numeral became near-black on #274233, 1.44:1. Under the
   media query this was still wrong; it was simply never looked at. #cfe0d4 on
   #274233 is 8.1:1. */
.form-step-dot::before{color:#cfe0d4}

/* The owner's-reply rule down the side of a review. --accent-soft is #e7f7ea,
   a near-white green chosen against a white card; on #12241a it is the
   brightest thing in the component and reads as a divider rather than a quote
   mark. A dark-surface green at the same role. */
.review-reply{border-left-color:#2f5b3a}

/* `.hero` alone is a light gradient ending in a hard #fff. Every hero on the
   site today is `.hero.hero-bleed`, and .hero-bleed's own background wins, so
   nothing renders it — but a plain .hero is one markup change away from a
   white band above the fold, and the gradient's other stop is already a
   variable this file redefines. */
.hero{background:linear-gradient(160deg,var(--bg-soft),var(--bg))}
