/* Valuation Plus, Inc. - accent color layer ("spots of intentional color").
   Loaded AFTER style.css. The theme is chosen by ONE switch: the data-accent attribute on <html>,
   set from ACCENT = "..." in build_site.py. ACCENT = "" (no attribute) = the original pure black & white look.
   The logo is never colored. Accent text/button contrast is WCAG AA (see notes per theme). */

/* Fallback = current black & white site */
:root{--accent:var(--black);--accent-strong:#333;--accent-on-dark:var(--white)}

/* Option A - Oxblood.   white on accent 10.2:1 · accent on #f5f5f3 9.4:1 · tint on worst-case hero overlay (#575757) 4.6:1 */
[data-accent="oxblood"]{--accent:#7A1F2B;--accent-strong:#5C1520;--accent-on-dark:#F0C2C7}
/* Option B - Hunter Green.  white on accent 9.6:1 · accent on #f5f5f3 8.8:1 · tint on #575757 4.8:1 */
[data-accent="hunter"]{--accent:#1F4D3A;--accent-strong:#143326;--accent-on-dark:#B5DCC8}
/* Option C - Slate Teal.    white on accent 7.6:1 · accent on #f5f5f3 7.0:1 · tint on #575757 4.9:1 */
[data-accent="slate-teal"]{--accent:#1D5C63;--accent-strong:#134247;--accent-on-dark:#B0DCE0}

/* 1. Primary buttons (Request a Quote etc.): accent fill, white text. Outline/ghost buttons stay black & white. */
.btn:not(.btn-outline):not(.btn-ghost){background:var(--accent);border-color:var(--accent);color:var(--white)}
.btn:not(.btn-outline):not(.btn-ghost):hover{background:var(--accent-strong);border-color:var(--accent-strong);color:var(--white)}
.nav a.btn{border-color:var(--accent)}
/* on dark photo bands the accent button gets a light tint keyline so it reads against black */
.hero-bg .btn-invert,.cta-band .btn-invert,.feature-row .btn{background:var(--accent);color:var(--white);border-color:var(--accent-on-dark)}
.hero-bg .btn-invert:hover,.cta-band .btn-invert:hover,.feature-row .btn:hover{background:var(--white);color:var(--accent);border-color:var(--white)}

/* 2. Eyebrow / kicker text (all eyebrows sit in the dark photo heroes) + a short accent rule before it */
.hero-bg .eyebrow{color:var(--accent-on-dark);letter-spacing:.01em}
.hero-bg .eyebrow::before{content:"";display:inline-block;width:2.25rem;height:2px;background:var(--accent-on-dark);vertical-align:middle;margin:0 .7rem .2em 0}

/* 3. One thin accent bar in the hero: full-width 6px rule along the bottom edge of every photo hero */
.hero-bg{border-bottom:6px solid var(--accent)}

/* 4. Section headings: the rule under H2 becomes a short, heavier accent line */
.section-head h2{border-bottom:0;position:relative;padding-bottom:.6rem}
.section-head h2::after{content:"";position:absolute;left:0;bottom:0;width:3.5rem;height:3px;background:var(--accent)}

/* 5. Key stats / numbers */
.stats strong{color:var(--accent)}
.tile .num,.svc-row .num{color:var(--accent);font-weight:700}
.tile.feature .num,a.tile:hover .num,.feature-row .num{color:var(--accent-on-dark)}
a.tile.feature:hover .num{color:var(--accent)}

/* 6. Bullet markers (small squares) */
.bul li::before{background:var(--accent)}
.tile.feature .bul li::before,.feature-row .bul li::before,a.tile:hover .bul li::before{background:var(--accent-on-dark)}
a.tile.feature:hover .bul li::before{background:var(--accent)}

/* 7. Links: accent underline, accent text on hover (light backgrounds); tint on dark */
main a:not(.btn):not(.tile){text-decoration-color:var(--accent)}
main a:not(.btn):not(.tile):hover{color:var(--accent)}
.nav a:hover,.nav a[aria-current="page"]{border-bottom-color:var(--accent)}
.nav a.btn:hover,.nav a.btn[aria-current="page"]{border-bottom-color:var(--accent-strong)}
.hero-bg a:not(.btn):hover,.cta-band a:not(.btn):hover,.feature-row a:not(.btn):hover,.site-footer a:hover{color:var(--accent-on-dark);text-decoration-color:var(--accent-on-dark)}
.hero-card a:hover{color:var(--accent-on-dark)}

/* ===================================================================================================
   Option A+ - "Oxblood Plus": same oxblood palette, used in more places (Steven: "perhaps a bit more color").
   ACCENT="oxblood-plus"        -> this theme with the black & white photos
   ACCENT="oxblood-plus-color"  -> this theme + color photos (build_site.py swaps in assets/images/color/)
   Everything below is scoped to these two values, so "oxblood" (and the other options) are unchanged.
   Contrast (WCAG): white on #7A1F2B 10.2:1 · #7A1F2B on #F7EDEE 8.9:1 · #7A1F2B on #f5f5f3 9.4:1 ·
   #F0C2C7 on #7A1F2B 6.4:1 · white on #2A0E12 18.0:1 · #F0C2C7 on #2A0E12 11.3:1 · #e0d4d6 on #2A0E12 12.4:1
   =================================================================================================== */
[data-accent^="oxblood-plus"]{--accent:#7A1F2B;--accent-strong:#5C1520;--accent-on-dark:#F0C2C7;
  --accent-tint:#F7EDEE;--accent-tint-line:#E4C9CD;--accent-deep:#2A0E12}

/* a. thin oxblood bar across the very top of every page, above the letterhead header */
[data-accent^="oxblood-plus"] .site-header{border-top:5px solid var(--accent)}

/* b. hero photo overlay: a faint burgundy-black instead of neutral black (same darkness, photos stay readable) */
[data-accent^="oxblood-plus"] .hero-bg::before{background:linear-gradient(90deg,rgba(24,6,9,.72) 0%,rgba(24,6,9,.64) 100%)}

/* c. section headings (H2 above each home/inner section) in oxblood; the short rule under them stays */
[data-accent^="oxblood-plus"] .section-head h2{color:var(--accent)}

/* d. stats strip on a very light burgundy tint, oxblood numbers, tinted dividers */
[data-accent^="oxblood-plus"] .stats{background:var(--accent-tint);border-bottom-color:var(--accent-tint-line)}
[data-accent^="oxblood-plus"] .stats li{border-left-color:var(--accent-tint-line)}

/* e. service cards: the featured card is oxblood instead of black; all cards get an oxblood top edge */
[data-accent^="oxblood-plus"] .tile{border-top:4px solid var(--accent)}
[data-accent^="oxblood-plus"] .tile.feature{background:var(--accent);border-color:var(--accent);box-shadow:inset 0 0 0 4px var(--accent),inset 0 0 0 5px var(--white)}
[data-accent^="oxblood-plus"] a.tile:hover{background:var(--accent-deep);border-color:var(--accent-deep);box-shadow:inset 0 0 0 4px var(--accent-deep),inset 0 0 0 5px var(--white)}
[data-accent^="oxblood-plus"] a.tile.feature:hover{background:var(--white);color:var(--accent);border-color:var(--accent);box-shadow:inset 0 0 0 4px var(--white),inset 0 0 0 5px var(--accent)}
[data-accent^="oxblood-plus"] a.tile.feature:hover p{color:var(--ink)}

/* f. "points" (property types, why choose us, services lists) and service rows: oxblood double rule on top */
[data-accent^="oxblood-plus"] .point,[data-accent^="oxblood-plus"] .pt-group h3,[data-accent^="oxblood-plus"] .svc-row{border-top-color:var(--accent)}

/* g. the black feature row on services.html becomes oxblood too (matches the featured card) */
[data-accent^="oxblood-plus"] .feature-row{background:var(--accent);border-color:var(--accent);box-shadow:inset 0 0 0 5px var(--accent),inset 0 0 0 6px var(--white)}
[data-accent^="oxblood-plus"] .feature-row .bul.big li{border-bottom-color:rgba(255,255,255,.35)}
[data-accent^="oxblood-plus"] .feature-row .btn{background:var(--white);color:var(--accent);border-color:var(--white)}
[data-accent^="oxblood-plus"] .feature-row .btn:hover{background:transparent;color:var(--white);border-color:var(--white)}
[data-accent^="oxblood-plus"] .feature-row .area{color:#f3e3e5}

/* h. closing call-to-action band: solid oxblood (the library photo shows only as a faint texture), white text,
      white button with oxblood text; hover = white outline */
[data-accent^="oxblood-plus"] .bg-cta::before{background:rgba(122,31,43,.96)}
[data-accent^="oxblood-plus"] .cta-band{border-top:1px solid var(--accent-strong)}
[data-accent^="oxblood-plus"] .cta-band .btn-invert{background:var(--white);color:var(--accent);border-color:var(--white)}
[data-accent^="oxblood-plus"] .cta-band .btn-invert:hover{background:transparent;color:var(--white);border-color:var(--white)}
[data-accent^="oxblood-plus"] .cta-band .ph{background:rgba(0,0,0,.35)}

/* i. footer: deep burgundy-black with an oxblood bar on top (replaces the white double rule) */
[data-accent^="oxblood-plus"] .site-footer{background:var(--accent-deep);border-top:6px solid var(--accent)}
[data-accent^="oxblood-plus"] .site-footer h2{border-bottom-color:#6b3a41;color:var(--accent-on-dark)}
[data-accent^="oxblood-plus"] .legal{border-top-color:#6b3a41;color:#e0d4d6}
[data-accent^="oxblood-plus"] .site-footer .ph{background:#4a2026}

/* j. inner page-title bands: oxblood kicker with a short rule, and a thin oxblood bar along the bottom */
[data-accent^="oxblood-plus"] .page-title{border-bottom:4px solid var(--accent)}
[data-accent^="oxblood-plus"] .page-title .eyebrow{color:var(--accent)}
[data-accent^="oxblood-plus"] .page-title .eyebrow::before{content:"";display:inline-block;width:2.25rem;height:2px;background:var(--accent);vertical-align:middle;margin:0 .7rem .2em 0}

/* k. small touches: FAQ rules and the +/- marks, form notice keyline */
[data-accent^="oxblood-plus"] .faq-item summary::after{color:var(--accent)}
[data-accent^="oxblood-plus"] .notice{border-left:5px solid var(--accent)}

/* Option A+ with color photos: lighter, left-weighted overlay so the color shows while headline text stays AA */
[data-accent="oxblood-plus-color"] .hero-bg::before{background:linear-gradient(90deg,rgba(30,9,12,.79) 0%,rgba(30,9,12,.66) 55%,rgba(30,9,12,.44) 100%)}
[data-accent="oxblood-plus-color"] .bg-hero{background-image:url("images/color/hero-home-800.webp")}
[data-accent="oxblood-plus-color"] .bg-res-hero{background-image:url("images/color/residential-hero-800.webp")}
[data-accent="oxblood-plus-color"] .bg-com-hero{background-image:url("images/color/commercial-hero-800.webp")}
[data-accent="oxblood-plus-color"] .bg-cta{background-image:url("images/color/cta-library-800.webp")}
@media (min-width:900px){
  [data-accent="oxblood-plus-color"] .bg-hero{background-image:url("images/color/hero-home-1600.webp")}
  [data-accent="oxblood-plus-color"] .bg-res-hero{background-image:url("images/color/residential-hero-1600.webp")}
  [data-accent="oxblood-plus-color"] .bg-com-hero{background-image:url("images/color/commercial-hero-1600.webp")}
  [data-accent="oxblood-plus-color"] .bg-cta{background-image:url("images/color/cta-library-1600.webp")}
}

/* ===================================================================================================
   Option A-lite + color photos - "oxblood-lite-color" (Steven: keep the current oxblood, color photos, just a little more burgundy).
   = the live "oxblood" look + color photos (build_site.py swaps in assets/images/color/) + 2 small additions (top bar, oxblood section H2s) + a thin oxblood footer line;
     stats strip and all photo overlays stay neutral (no burgundy tint).
   Featured card, CTA band and footer stay black. Scoped to this one value, so nothing else changes.
   Contrast: #7A1F2B on white 10.2:1 · hero text on the neutral overlay: white >= 7.9:1, #F0C2C7 >= 4.9:1 (measured on the home/commercial/residential heroes)
   =================================================================================================== */
[data-accent="oxblood-lite-color"]{--accent:#7A1F2B;--accent-strong:#5C1520;--accent-on-dark:#F0C2C7}
/* 1. thin 5px oxblood bar across the very top of every page */
[data-accent="oxblood-lite-color"] .site-header{border-top:5px solid var(--accent)}
/* 2. stats strip: unchanged from live (white background, neutral dividers, oxblood numbers) */
/* 3. section headings (H2 above each section) in oxblood */
[data-accent="oxblood-lite-color"] .section-head h2{color:var(--accent)}
/* footer stays black: thin oxblood line on top instead of the white double rule */
[data-accent="oxblood-lite-color"] .site-footer{border-top:4px solid var(--accent)}
/* color photos + lighter, left-weighted hero overlay in pure neutral black (no burgundy cast); CTA band keeps the live neutral black overlay */
[data-accent="oxblood-lite-color"] .hero-bg::before{background:linear-gradient(90deg,rgba(0,0,0,.76) 0%,rgba(0,0,0,.62) 55%,rgba(0,0,0,.40) 100%)}
[data-accent="oxblood-lite-color"] .bg-cta::before{background:rgba(0,0,0,.78)}
[data-accent="oxblood-lite-color"] .bg-hero{background-image:url("images/color/hero-home-800.webp")}
[data-accent="oxblood-lite-color"] .bg-res-hero{background-image:url("images/color/residential-hero-800.webp")}
[data-accent="oxblood-lite-color"] .bg-com-hero{background-image:url("images/color/commercial-hero-800.webp")}
[data-accent="oxblood-lite-color"] .bg-cta{background-image:url("images/color/cta-library-800.webp")}
@media (min-width:900px){
  [data-accent="oxblood-lite-color"] .bg-hero{background-image:url("images/color/hero-home-1600.webp")}
  [data-accent="oxblood-lite-color"] .bg-res-hero{background-image:url("images/color/residential-hero-1600.webp")}
  [data-accent="oxblood-lite-color"] .bg-com-hero{background-image:url("images/color/commercial-hero-1600.webp")}
  [data-accent="oxblood-lite-color"] .bg-cta{background-image:url("images/color/cta-library-1600.webp")}
}