/* =====================================================================
   Theme switcher (demo builds only: deploy.themeMode = "switchable").
   Locked client builds ("dark" | "light") never include this file.
   ===================================================================== */
/* both logos are in the markup; show the one for the active theme (cross-fade on toggle) */
.brand{position:relative}
.logo--light{position:absolute;left:0;top:50%;translate:0 -50%}
.logo--dark,.logo--light{transition:opacity .3s ease,visibility .3s ease}
.theme-light .logo--dark{opacity:0;visibility:hidden}
.theme-dark .logo--light{opacity:0;visibility:hidden}

/* header toggle: sun in dark mode (switch to light), moon in light mode */
.theme-toggle{-webkit-appearance:none;appearance:none;flex:none;display:grid;place-items:center;width:42px;height:42px;margin:0;padding:0;border:1px solid rgba(var(--ink-rgb),.28);border-radius:50%;background:rgba(var(--shade-rgb),.22);color:var(--cream);cursor:pointer;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:border-color .3s,background-color .3s,color .3s}
.theme-toggle:hover{border-color:var(--gold);color:var(--gold2)}
.theme-toggle:focus-visible,.mnav-theme:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.tt-ic{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.tt-sun,.tt-moon{transform-box:view-box;transform-origin:12px 12px;transition:transform .55s var(--ease),opacity .35s ease}
.tt-moon{opacity:0;transform:rotate(-70deg) scale(.4)}
.theme-light .tt-sun{opacity:0;transform:rotate(90deg) scale(.4)}
.theme-light .tt-moon{opacity:1;transform:none}
@media (max-width:420px){.theme-toggle{width:40px;height:40px}.hdr-actions{gap:.55rem}}

/* mobile menu: labelled switch ("Dark mode" on/off) */
.mnav-theme{-webkit-appearance:none;appearance:none;display:flex;align-items:center;gap:.85rem;width:100%;max-width:22rem;margin:0;padding:.7rem .8rem .7rem 1.05rem;border:1px solid var(--line2);border-radius:999px;background:rgba(var(--ink-rgb),.03);color:var(--cream);font:inherit;font-size:.68rem;font-weight:500;letter-spacing:.22em;text-transform:uppercase;cursor:pointer;transition:border-color .3s}
.mnav-theme:hover{border-color:var(--gold)}
.mnav-theme-ic{display:grid;place-items:center;color:var(--gold)}
.mnav-theme .tt-ic{width:18px;height:18px}
.mnav-theme .tt-sun{display:none}
.mnav-theme .tt-moon{opacity:1;transform:none}
.theme-light .mnav-theme .tt-moon{opacity:1;transform:none}
.mnav-theme-l{flex:1;text-align:left}
.mnav-theme-sw{position:relative;flex:none;width:44px;height:26px;border-radius:999px;border:1px solid var(--line2);background:rgba(var(--ink-rgb),.1);transition:background-color .3s,border-color .3s}
.mnav-theme-sw span{position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:var(--muted);transition:transform .4s var(--ease),background-color .3s}
.mnav-theme[aria-pressed="true"] .mnav-theme-sw{background:var(--gold);border-color:var(--gold)}
.mnav-theme[aria-pressed="true"] .mnav-theme-sw span{transform:translateX(18px);background:var(--on-gold)}

/* smooth colour change while toggling (class set for ~400ms by theme-switch.js) */
@media (prefers-reduced-motion:no-preference){
  html.theme-anim,html.theme-anim *,html.theme-anim *::before,html.theme-anim *::after{transition:background-color .3s ease,color .3s ease,border-color .3s ease,fill .3s ease,stroke .3s ease,box-shadow .3s ease,outline-color .3s ease,opacity .3s ease,visibility .3s ease!important}
}