/* ============================================================
   howldr time-of-day themes: Classic, Morning, Afternoon, Dusk.
   Classic (no data-theme attribute) is the live site: every value
   below on :root equals the literal it replaced. The other themes
   re-light the same page. The footer and stats bar stay night.
   ============================================================ */
:root{
  --ink-rgb:255,255,255; --sky-rgb:13,27,42;
  --on-gold:#0D1B2A; --gold-ink:#C9922A; --gold-ink-lt:#E8B060; --blue-ink:#7AB8E8; --error-ink:#E08080;
  --sky-deep:#0a1420; --band-edge:#0a1520; --shade:rgba(0,0,0,0.15);
  --hero-bg:radial-gradient(ellipse 70% 80% at 20% 50%, #1a3050 0%, #0D1B2A 55%, #060d15 100%);
}

/* ---- Morning: cool moon-white, first light low on the right ---- */
:root[data-theme="morning"]{
  --navy:#F4F6FA; --navy-2:#FFFFFF; --navy-3:#E3EAF3; --navy-mid:#FFFFFF; --navy-lt:#E8EDF4;
  --moon:#0D1B2A; --text:#13202B; --text-2:#3A4A5C; --text-3:#4B5B6D;
  --gold-ink:#7D510E; --gold-ink-lt:#7D510E; --blue-ink:#1E5A8C; --error-ink:#A3302E;
  --ink-rgb:13,27,42; --sky-rgb:244,246,250;
  --sky-deep:#E8EDF4; --band-edge:#E8EDF4; --shade:rgba(13,27,42,0.035);
  --hero-bg:radial-gradient(ellipse 65% 55% at 84% 104%, rgba(246,214,166,.75) 0%, transparent 70%), radial-gradient(ellipse 70% 80% at 20% 50%, #FFFFFF 0%, #F4F6FA 55%, #E4EAF3 100%);
}
:root[data-theme="morning"] .hero-logo-bg img{mix-blend-mode:multiply;opacity:.16;filter:blur(.5px) saturate(.9)}

/* ---- Afternoon: warm cream, full sun ---- */
:root[data-theme="afternoon"]{
  --navy:#FBF6EC; --navy-2:#FFFDF8; --navy-3:#F3E6CC; --navy-mid:#FFFDF8; --navy-lt:#F6EBD6;
  --moon:#0D1B2A; --text:#1F2A33; --text-2:#3A4650; --text-3:#4F5862;
  --gold-ink:#7A4F0F; --gold-ink-lt:#7A4F0F; --blue-ink:#1E5A8C; --error-ink:#A3302E;
  --ink-rgb:13,27,42; --sky-rgb:251,246,236;
  --sky-deep:#F3EAD8; --band-edge:#F3EAD8; --shade:rgba(122,79,15,0.05);
  --hero-bg:radial-gradient(ellipse 70% 60% at 82% 104%, rgba(232,176,96,.42) 0%, transparent 72%), radial-gradient(ellipse 70% 80% at 20% 50%, #FFFBF2 0%, #FBF6EC 55%, #F3E6CC 100%);
}
:root[data-theme="afternoon"] .hero-logo-bg img{mix-blend-mode:multiply;opacity:.2;filter:blur(.5px) sepia(.6) saturate(1.5) hue-rotate(-6deg)}

/* ---- Dusk: Classic navy, warmed; the glow sits on the horizon ---- */
:root[data-theme="dusk"]{
  --navy:#16203A; --navy-2:#1E2942; --navy-3:#2A3550; --navy-mid:#1E2942; --navy-lt:#26324E;
  --moon:#F4EDE4; --text:#EFE8DF; --text-2:#C4C8D6; --text-3:#9EA9C0;
  --gold-ink:#E8B060; --gold-ink-lt:#F0C27A; --blue-ink:#8EC4EE; --error-ink:#F0A0A0;
  --sky-deep:#101828; --band-edge:#101828; --shade:rgba(0,0,0,0.15);
  --hero-bg:radial-gradient(ellipse 80% 55% at 72% 108%, rgba(224,140,78,.42) 0%, rgba(178,90,92,.2) 42%, transparent 74%), radial-gradient(ellipse 70% 80% at 20% 50%, #2A3556 0%, #16203A 55%, #0E1526 100%);
}
:root[data-theme="dusk"] .hero-logo-bg img{opacity:.2;filter:blur(.5px) sepia(.45) saturate(1.5) hue-rotate(-14deg)}

/* Footer and stats bar stay night in every theme (Classic's own values). */
footer,.stats-bar{
  --text:#E8EDF2; --text-2:#A8B8C8; --text-3:#6080A0; --moon:#F4F6FA;
  --gold-ink:#C9922A; --gold-ink-lt:#E8B060; --ink-rgb:255,255,255;
  --rule:rgba(255,255,255,0.07); --rule-2:rgba(255,255,255,0.12);
  color:var(--text);
}

/* ---- Picker: one button in the header; the four hours in a small menu ---- */
.theme-picker{position:relative;display:flex;align-items:center}
.theme-toggle,.theme-swatch{display:inline-flex;align-items:center;gap:0.65rem;border:0;background:transparent;cursor:pointer;font:inherit;color:var(--text-2)}
.theme-toggle{justify-content:center;width:44px;height:44px;padding:0;border-radius:50%}
.sw{position:relative;display:block;flex-shrink:0;width:22px;height:22px;border-radius:50%;box-shadow:0 0 0 1.5px rgba(var(--ink-rgb),0.45)}
.sw::after{content:"";position:absolute;width:8px;height:8px;border-radius:50%;top:4px;right:4px}
.sw-classic,.sw-current{background:#0D1B2A}.sw-classic::after,.sw-current::after{background:#E9EDF4}
.sw-morning,[data-theme="morning"] .sw-current{background:#DCE6F0}.sw-morning::after,[data-theme="morning"] .sw-current::after{background:#F2C98E}
.sw-afternoon,[data-theme="afternoon"] .sw-current{background:#F3D9AE}.sw-afternoon::after,[data-theme="afternoon"] .sw-current::after{background:#C9922A}
.sw-dusk,[data-theme="dusk"] .sw-current{background:#2A3556}.sw-dusk::after,[data-theme="dusk"] .sw-current::after{background:#E08C4E}
.theme-toggle:hover .sw,.theme-swatch:hover .sw{box-shadow:0 0 0 1.5px rgba(var(--ink-rgb),0.45),0 0 0 4px rgba(var(--ink-rgb),0.12)}
.theme-swatch[aria-pressed="true"] .sw{box-shadow:0 0 0 1.5px rgba(var(--ink-rgb),0.45),0 0 0 3px var(--navy-2),0 0 0 5px var(--gold-ink)}
.theme-toggle:focus-visible,.theme-swatch:focus-visible{outline:2px solid var(--gold-ink);outline-offset:2px;border-radius:8px}
.theme-swatch[aria-pressed="true"] .sw-label{color:var(--moon);font-weight:600}
.sw-label{font-size:13px;white-space:nowrap}

/* desktop: the menu drops down under the button */
.theme-menu{display:none;position:absolute;top:calc(100% + 10px);right:-8px;z-index:110;flex-direction:column;min-width:170px;padding:6px;background:var(--navy-2);border:1px solid var(--rule-2);border-radius:var(--radius);box-shadow:0 12px 32px rgba(0,0,0,0.28)}
.theme-picker.open .theme-menu{display:flex}
.theme-swatch{width:100%;height:44px;padding:0 10px;border-radius:4px;text-align:left}
.theme-swatch:hover{background:rgba(var(--ink-rgb),0.06)}
/* keep the header on one line where it already fits today */
@media(min-width:769px) and (max-width:1100px){.header-nav{gap:0.75rem}}

/* phone: the four hours sit in the menu as a labelled row */
@media(max-width:768px){
  .theme-picker{order:10;margin-top:0.5rem;padding-top:0.5rem;border-top:1px solid var(--rule)}
  .theme-toggle{display:none}
  .theme-menu{display:flex;position:static;flex-direction:row;flex-wrap:wrap;min-width:0;padding:0;background:none;border:0;box-shadow:none;gap:0 0.5rem}
  .theme-swatch{width:auto;padding:0 0.5rem}
}