/* /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; }
}