/* /css/theme-fix.css — sanitize theme + make Light the default */
/* Load this AFTER /css/site.css and /css/patch.css */

:root {
  /* LIGHT defaults */
  --bg:    #f7f9fb;
  --panel: #ffffff;
  --ink:   #0e151d;
  --sub:   #4a5a6a;
  --line:  #dbe3ea;
  --gold:  #9e8331;
  --logoHalo: rgba(255,255,255,.28);
}

/* Dark override when html carries the attribute */
html[data-theme="dark"] {
  --bg:    #0b0f14;
  --panel: #0f141a;
  --ink:   #e7edf5;
  --sub:   #99a7b8;
  --line:  #22323f;
  --gold:  #9e8331;
  --logoHalo: rgba(0,0,0,.35);
}
html, body {
  transition: background-color .3s ease, color .3s ease, border-color .3s ease;
}


/* ===== Normalize components that were hard-coded to dark hues ===== */
/* Buttons */
.btn { background: var(--panel); color: var(--ink); border-color: var(--line); }
.btn:hover { background: rgba(0,0,0,.04); }
html[data-theme="dark"] .btn:hover { background: #121e28; }

.btn.btn--primary { background: var(--gold); color:#111; border-color:#000; }

/* Cards / panels */
.card { background: var(--panel); border-color: var(--line); color: var(--ink); }

/* Work grid items */
.work-item { background: var(--panel); border-color: var(--line); }
.work-item .cap { color: var(--sub); }

/* Inputs */
input, textarea {
  background: var(--panel);
  color: var(--ink);
  border-color: var(--line);
}

/* Nav hover/active */
.nav a[aria-current="page"] { background: rgba(0,0,0,.04); border-color: var(--line); }
html[data-theme="dark"] .nav a[aria-current="page"] { background:#141b23; }

.nav a:hover { background: rgba(0,0,0,.04); }
html[data-theme="dark"] .nav a:hover { background:#121922; }

/* Footer tone */
.site-footer { color: var(--sub); border-top-color: var(--line); }

/* Body background + text (in case earlier file pinned them) */
body { background: var(--bg) !important; color: var(--ink) !important; }

/* Hero watermark blending already adapts via mix-blend; leave as-is */

/* Lightbox backdrops already use fixed rgba black; acceptable for both themes */

/* Optional: border util to help spot theme vars in effect */
:root.theme-debug * { outline:1px solid rgba(255,0,0,.06); }


#themeSelect {
  background: var(--panel);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: .25rem .5rem;
}
#themeSelect option {
  background: var(--panel);
  color: var(--ink);
}

/* Header & nav for LIGHT */
html[data-theme="light"] .site-header {
  background: rgba(255,255,255,.85);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(6px);
}

html[data-theme="light"] .nav a {
  color: var(--ink);
  border: 1px solid transparent;
  background: transparent;
}

html[data-theme="light"] .nav a:hover {
  background: rgba(0,0,0,.06);
  border-color: var(--line);
}

html[data-theme="light"] .nav a[aria-current="page"] {
  background: rgba(0,0,0,.08);
  border-color: var(--line);
  color: var(--ink);
}

.nav a:focus-visible {
  outline: 2px solid #2c6aa8;
  outline-offset: 2px;
  border-radius: 8px;
}

/* Brand-mark shadow tuned per theme */
html[data-theme="light"] .brand-mark {
  filter: drop-shadow(0 0 1px rgba(0,0,0,.18))
          drop-shadow(0 1px 2px rgba(0,0,0,.12));
}
html[data-theme="dark"] .brand-mark {
  filter: drop-shadow(0 0 1px rgba(0,0,0,.35))
          drop-shadow(0 1px 2px rgba(0,0,0,.35));
}


/* Theme-aware dropdown for the footer */
.theme-dd,
#themeSelect {
  -webkit-appearance: none;
  appearance: none;
  background: var(--panel);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: .35rem 1.9rem .35rem .6rem; /* room for chevron */
  line-height: 1.2;
  box-shadow: 0 1px 0 rgba(0,0,0,.04);
  transition: background-color .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease;

  /* theme-aware chevron using currentColor */
  background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 20 20' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 8 10 12 14 8'/></svg>");
  background-repeat: no-repeat;
  background-position: right .55rem center;
  background-size: 12px;
}

.theme-dd:hover,
#themeSelect:hover { border-color: rgba(0,0,0,.25); }
html[data-theme="dark"] .theme-dd:hover,
html[data-theme="dark"] #themeSelect:hover { border-color: rgba(255,255,255,.25); }

.theme-dd:focus-visible,
#themeSelect:focus-visible {
  outline: 2px solid #2c6aa8;
  outline-offset: 2px;
}

html[data-theme="dark"] .theme-dd,
html[data-theme="dark"] #themeSelect {
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04);
}

/* Some browsers use option colors; match theme when they do */
.theme-dd option,
#themeSelect option {
  background: var(--panel);
  color: var(--ink);
}

/* Hide IE’s extra arrow if it ever appears */
.theme-dd::-ms-expand,
#themeSelect::-ms-expand { display: none; }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .theme-dd,
  #themeSelect { transition: none; }
}

/* ===== Missing variable aliases (used in admin + components) ===== */
:root {
  /* Aliases so --fg / --card-bg / --muted / --gold-deep work everywhere */
  --fg:        var(--ink);
  --card-bg:   var(--panel);
  --muted:     var(--sub);
  --gold-deep: #7a6020;
}
html[data-theme='dark'] {
  --fg:        var(--ink);
  --card-bg:   #131c25;
  --muted:     var(--sub);
  --gold-deep: #a8892a;
}

/* ===== Site header: must use CSS var not hardcoded dark hex ===== */
.site-header {
  background: rgba(var(--bg-rgb, 247,249,251), .85) !important;
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(6px);
}
html[data-theme='dark'] .site-header {
  background: rgba(13,19,25,.85) !important;
}

/* ===== Admin filter-tab active: use theme-safe colours ===== */
.filter-tab.active {
  background: var(--gold);
  color: #111;
  border-color: transparent;
}

/* ===== select element (admin forms) ===== */
select {
  background: var(--panel);
  color: var(--ink);
  border-color: var(--line);
}

/* ===== Flash/alert blocks ===== */
.flash-success { background: #13261a; color: #d9f5de; border-color: #2d6a3f; }
.flash-info    { background: #132240; color: #d4e8ff; border-color: #1e4a8a; }
html[data-theme='light'] .flash-success { background: #d9f5de; color: #0c3318; border-color: #2d6a3f; }
html[data-theme='light'] .flash-info    { background: #d4e8ff; color: #0c2244; border-color: #1e4a8a; }

/* ============================================================
   PUBLIC QUOTE SECTION — theme-aware overrides
   Appended to theme-fix.css
   ============================================================ */

/* ── Form inputs / textarea / select ─────────────────────────
   site.css hardcodes dark values; override for both themes    */

input, textarea, select {
  background: var(--panel);
  color:       var(--ink);
  border-color: var(--line);
  /* Light-safe inset shadow — subtle on light, invisible on dark */
  box-shadow: inset 0 1px 2px rgba(0,0,0,.06);
}

html[data-theme="dark"] input,
html[data-theme="dark"] textarea,
html[data-theme="dark"] select {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
}

/* Placeholder colour */
input::placeholder,
textarea::placeholder {
  color: var(--sub);
  opacity: .75;
}

/* Focus ring — gold on both themes */
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(158,131,49,.18);
}

/* File input — neutral, no dark background bleed */
input[type="file"] {
  padding: .5rem .6rem;
  background: transparent;
  cursor: pointer;
}

/* Checkbox + radio — just ensure they don't inherit white-on-dark */
input[type="checkbox"],
input[type="radio"] {
  width: auto;
  box-shadow: none;
  accent-color: var(--gold);
}

/* ── Buttons ──────────────────────────────────────────────────
   site.css hardcodes #101720 (dark) for .btn background       */

.btn {
  background: var(--panel);
  color:       var(--ink);
  border-color: var(--line);
}
.btn:hover {
  background: rgba(0,0,0,.05);
  border-color: var(--gold);
}
html[data-theme="dark"] .btn {
  background: #101720;
}
html[data-theme="dark"] .btn:hover {
  background: #121e28;
}
.btn.btn--primary {
  background:   var(--gold);
  color:        #111;
  border-color: rgba(0,0,0,.25);
  font-weight:  800;
}
.btn.btn--primary:hover {
  filter: brightness(1.08);
  border-color: rgba(0,0,0,.35);
}

/* ── Public flash messages (site.css classes) ─────────────────
   .flash--success and .flash--error need light theme variants  */

.flash--success {
  background:   #13261a;
  color:        #d9f5de;
  border-color: #2d6a3f;
}
.flash--error {
  background:   #2b1616;
  color:        #ffd6d6;
  border-color: #7a2f2f;
}
html[data-theme="light"] .flash--success {
  background:   #ecfdf5;
  color:        #064e2d;
  border-color: #6ee7b7;
}
html[data-theme="light"] .flash--error {
  background:   #fff1f2;
  color:        #7f1d1d;
  border-color: #fca5a5;
}

/* ── Quote layout ─────────────────────────────────────────────
   .contact is used as the quote 2-col grid wrapper             */

.contact {
  display: grid;
  gap: 16px;
}
@media (min-width: 820px) {
  .contact { grid-template-columns: 2fr 1fr; }
}

/* Quote form card padding already set; ensure card bg is themed */
.quote-form.card,
.quote-contact-card.card {
  background: var(--panel);
  color:      var(--ink);
}

/* "What helps most" card — slightly offset bg for visual hierarchy */
.quote-points.card {
  background: var(--panel);
}
html[data-theme="light"] .quote-points.card {
  background: #f0f4f8;
  border-color: var(--line);
}

/* Consent checkbox row */
.consent-line {
  color: var(--sub);
  font-size: .92rem;
}

/* Label colour already uses --sub; keep consistent */
label {
  color: var(--sub);
}

/* ── Quote section on homepage (non-standalone embed) ─────── */
.quote-section {
  background: transparent;
}

/* ── Sticky contact card: ensure it doesn't clip on mobile ── */
@media (max-width: 819px) {
  .quote-contact-card {
    position: static;
  }
}