/* shared site header: sections left and right of the logo, centred on it (y = 36px) */
#head-l, #topbar { position: fixed; top: 16px; height: 40px; z-index: 1000; display: flex; align-items: center; }
#head-l { left: 28px; gap: 26px; }
#topbar { right: 18px; gap: 10px; }
#head-r { display: flex; align-items: center; gap: 26px; margin-right: 16px; }
#head-l a, #head-r a {
  position: relative; padding: 6px 0;
  font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(170, 225, 196, 0.62); text-decoration: none; cursor: pointer; white-space: nowrap;
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.9);
  transition: color 0.25s;
}
#head-l a:hover, #head-r a:hover, #head-l a:focus-visible, #head-r a:focus-visible { color: #f3ead6; outline: none; }
#head-l a[aria-current="page"], #head-r a[aria-current="page"] { color: #ffd060; }
#head-l a[aria-current="page"]::after, #head-r a[aria-current="page"]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 1px; height: 1px; background: rgba(255, 208, 96, 0.7);
}

/* language toggle (Spanish to come) */
#lang { display: flex; height: 40px; border: 1px solid rgba(143, 227, 184, 0.35); background: rgba(4, 9, 7, 0.82); backdrop-filter: blur(6px); }
#lang button { width: 38px; height: 100%; border: 0; background: none; cursor: pointer; font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 9.5px; letter-spacing: 0.12em; color: rgba(170, 225, 196, 0.58); }
#lang button + button { border-left: 1px solid rgba(143, 227, 184, 0.25); }
#lang button[aria-checked="true"] { color: #020403; background: #8fe3b8; }
#lang button:focus-visible { outline: 1px solid #8fe3b8; outline-offset: -3px; }
#lang-toast { position: fixed; top: 64px; right: 18px; z-index: 1000; margin: 0; padding: 9px 12px; background: rgba(4, 9, 7, 0.94); border: 1px solid rgba(255, 217, 138, 0.45);
  font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 10px; letter-spacing: 0.04em; color: #ffd98a; }
#lang-toast span { display: block; margin-top: 3px; font-size: 8.5px; color: rgba(243, 234, 214, 0.6); }
#lang-toast[hidden] { display: none; }

/* sound button, in the top bar (ambient.js on the data screens; the intro's own audio on the intro) */
#sound-btn { position: relative; width: 40px; height: 40px; display: grid; place-items: center;
  background: rgba(4, 9, 7, 0.82); border: 1px solid rgba(143, 227, 184, 0.35); cursor: pointer; backdrop-filter: blur(6px); transition: border-color 0.3s; }
#sound-btn:hover, #sound-btn:focus-visible { border-color: #8fe3b8; outline: none; }
#sound-btn svg { width: 18px; height: 18px; fill: none; stroke: #f3ead6; stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }
#sound-btn[aria-pressed="false"] svg { stroke: rgba(170, 225, 196, 0.58); }
#sound-btn[aria-pressed="true"]:not(.playing) svg { animation: sound-wait 1.8s ease-in-out infinite; }
@keyframes sound-wait { 50% { opacity: 0.45; } }

/* the logo on every page: centred on the header, and a link to the dashboard */
img.logo { top: 22px !important; width: 210px !important; height: auto !important; }
/* the link is the fixed element, so it never takes space in a page's layout */
a.logo-link { position: fixed; top: 22px; left: 50%; transform: translateX(-50%); z-index: 1000; display: block; line-height: 0; cursor: pointer; }
a.logo-link img.logo { position: static !important; transform: none !important; display: block; pointer-events: auto !important; transition: filter 0.3s; }
a.logo-link:hover img.logo, a.logo-link:focus-visible img.logo { filter: drop-shadow(0 0 10px rgba(225, 254, 144, 0.55)); }
a.logo-link:focus-visible { outline: none; }


/* narrow screens: until the mobile version, keep the sections on one row */
@media (max-width: 1100px) {
  #head-l { gap: 16px; } #head-r { gap: 16px; margin-right: 8px; }
  #head-l a, #head-r a { font-size: 9px; letter-spacing: 0.1em; }
}

/* light / dark toggle (theme.js), styled like the sound button */
#theme-btn { width: 40px; height: 40px; display: grid; place-items: center; cursor: pointer;
  background: rgba(4, 9, 7, 0.82); border: 1px solid rgba(143, 227, 184, 0.35); backdrop-filter: blur(6px); transition: border-color 0.3s; }
#theme-btn:hover, #theme-btn:focus-visible { border-color: #8fe3b8; outline: none; }
#theme-btn svg { width: 18px; height: 18px; fill: none; stroke: #f3ead6; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- the header in light mode ---------- */
:root[data-theme="light"] #head-l a, :root[data-theme="light"] #head-r a { color: rgba(26, 92, 60, 0.8); text-shadow: 0 0 10px rgba(255, 255, 255, 0.95); }
:root[data-theme="light"] #head-l a:hover, :root[data-theme="light"] #head-r a:hover,
:root[data-theme="light"] #head-l a:focus-visible, :root[data-theme="light"] #head-r a:focus-visible { color: #16211b; }
:root[data-theme="light"] #head-l a[aria-current="page"], :root[data-theme="light"] #head-r a[aria-current="page"] { color: #8a5d00; }
:root[data-theme="light"] #head-l a[aria-current="page"]::after, :root[data-theme="light"] #head-r a[aria-current="page"]::after { background: rgba(138, 93, 0, 0.7); }
:root[data-theme="light"] #lang, :root[data-theme="light"] #sound-btn, :root[data-theme="light"] #theme-btn {
  background: rgba(255, 255, 255, 0.9); border-color: rgba(31, 122, 79, 0.4); }
:root[data-theme="light"] #lang button { color: rgba(26, 92, 60, 0.75); }
:root[data-theme="light"] #lang button + button { border-left-color: rgba(31, 122, 79, 0.3); }
:root[data-theme="light"] #lang button[aria-checked="true"] { color: #ffffff; background: #1f7a4f; }
:root[data-theme="light"] #sound-btn svg, :root[data-theme="light"] #theme-btn svg { stroke: #16211b; }
:root[data-theme="light"] #sound-btn[aria-pressed="false"] svg { stroke: rgba(26, 92, 60, 0.6); }
:root[data-theme="light"] #sound-btn:hover, :root[data-theme="light"] #theme-btn:hover { border-color: #1f7a4f; }
:root[data-theme="light"] #lang-toast { background: rgba(255, 255, 255, 0.96); border-color: rgba(138, 93, 0, 0.45); color: #8a5d00; }
:root[data-theme="light"] #lang-toast span { color: rgba(22, 33, 27, 0.6); }
/* the logo: nav.js swaps in shared/logo-light.svg, in the filled buttons' green (#1f7a4f), without the glow */
:root[data-theme="light"] a.logo-link:hover img.logo { filter: drop-shadow(0 0 8px rgba(31, 122, 79, 0.35)); }

/* ---------- phones (760px and under): logo left, the rest in a menu (nav.js) ---------- */
#menu-btn, #menu-scrim { display: none; }
@media (max-width: 760px) {
  a.logo-link { left: 16px; top: 20px; transform: none; }
  img.logo { width: 156px !important; top: 20px !important; }
  #menu-btn { display: grid; place-content: center; gap: 5px; position: fixed; top: 12px; right: 12px; z-index: 1001; width: 44px; height: 44px;
    background: rgba(4, 9, 7, 0.82); border: 1px solid rgba(143, 227, 184, 0.35); cursor: pointer; backdrop-filter: blur(6px); }
  #menu-btn span { display: block; width: 18px; height: 1.5px; background: #f3ead6; transition: transform 0.25s, opacity 0.25s; }
  body.menu-open #menu-btn span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
  body.menu-open #menu-btn span:nth-child(2) { opacity: 0; }
  body.menu-open #menu-btn span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
  #menu-scrim { display: block; position: fixed; inset: 0; z-index: 999; background: rgba(2, 4, 3, 0.97); opacity: 0; pointer-events: none; transition: opacity 0.25s; }
  body.menu-open #menu-scrim { opacity: 1; pointer-events: auto; }
  /* closed: the sections and controls are away */
  #head-l, #topbar { opacity: 0; visibility: hidden; transition: opacity 0.25s, visibility 0s 0.25s; }
  body.menu-open #head-l, body.menu-open #topbar { opacity: 1; visibility: visible; transition: opacity 0.25s, visibility 0s; }
  /* open: a column of sections, then language, theme and sound in a row */
  #head-l { top: 100px; left: 24px; height: auto; flex-direction: column; align-items: flex-start; gap: 26px; }
  #topbar { top: 204px; left: 24px; right: 24px; height: auto; flex-wrap: wrap; gap: 12px; }
  #head-r { width: 100%; flex-direction: column; align-items: flex-start; gap: 26px; margin: 0 0 22px; }
  #head-l a, #head-r a { font-size: 14px; letter-spacing: 0.18em; padding: 4px 0; text-shadow: none; }
  #lang-toast { top: 64px; right: 12px; left: 12px; }
  :root[data-theme="light"] #menu-btn { background: rgba(255, 255, 255, 0.92); border-color: rgba(31, 122, 79, 0.4); }
  :root[data-theme="light"] #menu-btn span { background: #16211b; }
  :root[data-theme="light"] #menu-scrim { background: rgba(255, 255, 255, 0.98); }
}