/* ════════════════════════════════════════════════════════
   SITE HEADER — shared by index.html and a1.html

   The header used to be copied into both pages, and the copies
   drifted: index.html grew a working burger menu that a1.html never
   got, a1.html carried a headline-swap script for markup it does not
   have, and both kept their own private copy of the theme toggle.
   This file and site-header.js are now the only place the header
   exists. Change it here and both pages change.

   Everything is scoped under .hero, because that is the block both
   pages wrap the header in. A third page adopting the header needs
   that wrapper too.

   The markup comes from site-header.js — see that file for the
   per-page config.
   ════════════════════════════════════════════════════════ */

/* ── Header bar ──
   Above .h-menu (5), not under it: the burger is the only way to
   close the panel, so it has to stay on top of what it opens. */
.hero .h-head {
  position: relative; z-index: 6;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}

.hero .h-left  { display: flex; align-items: center; gap: 30px; }
.hero .h-right { display: flex; align-items: center; gap: 24px; }

.hero .h-home { display: block; line-height: 0; }
/* Heights are for the lockup WITH its tagline: that file is
   901x219, so a given height buys less wordmark than the old
   895x147 did. These numbers put the wordmark back at the size
   it was before the tagline was added. */
.hero .h-left img { height: 50px; width: auto; display: block; }
/* logo.svg is solid black artwork. On the dark-class themes it would
   sit black-on-black, so flip it to chalk. */
html:is([data-theme="dark"], [data-theme="wald"]) .hero .h-left img {
  filter: brightness(0) invert(1);
}

.hero .h-link {
  font-size: var(--size-label); font-weight: var(--label-weight);
  letter-spacing: var(--track-label); text-transform: var(--label-transform);
  color: var(--ink); text-decoration: none;
  transition: color var(--dur-base) var(--ease, var(--ease-ui));
}
.hero .h-link:hover { color: var(--gold-dark); }

.hero .h-cta {
  padding: 13px 22px; border-radius: var(--radius-pill);
  font-size: var(--size-label); font-weight: 800;
  letter-spacing: var(--track-label); text-transform: var(--label-transform);
  background: var(--gold); color: var(--on-gold); text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--dur-base) var(--ease, var(--ease-ui));
}
.hero .h-cta:hover { background: var(--gold-light); }

/* ── Theme toggle ──
   Plain ink. It used to be page-colour, because it sat on a dark
   block in the hero's top-right corner; that block is gone, and
   page-colour on the page would be invisible. No box: it is an icon,
   not a button. Stays outside the menu — it is a setting you want
   while reading, not a destination. */
.theme-btn {
  appearance: none; background: none; border: none; padding: 0;
  cursor: pointer;
  color: var(--ink); opacity: 0.75;
  display: grid; place-items: center;
  transition: opacity var(--dur-base);
}
.theme-btn:hover { opacity: 1; }
.theme-btn svg { width: 24px; height: 24px; }
.theme-btn .moon, .theme-btn .scroll, .theme-btn .leaf { display: none; }
html[data-theme="dark"]  .theme-btn .sun    { display: none; }
html[data-theme="dark"]  .theme-btn .moon   { display: block; }
html[data-theme="paper"] .theme-btn .sun    { display: none; }
html[data-theme="paper"] .theme-btn .scroll { display: block; }
html[data-theme="wald"]  .theme-btn .sun    { display: none; }
html[data-theme="wald"]  .theme-btn .leaf   { display: block; }

/* ── Burger ──
   Ink bars, for the same reason the theme icon is ink: the dark
   corner block they were drawn against no longer exists.

   A mobile control and nothing else. On a wide screen the header
   carries its own links and its own CTA, so there is nothing left for
   a menu to hold and the button is hidden rather than sitting there
   opening nothing. */
.hero .h-burger {
  display: none; flex-direction: column; gap: 5px; align-items: flex-end;
  background: none; border: none; padding: 0; cursor: pointer;
}
.hero .h-burger span {
  display: block; width: 26px; height: 3px; border-radius: var(--radius-tight); background: var(--ink);
  transition: transform var(--dur-slow) var(--ease, var(--ease-ui)),
              opacity 160ms var(--ease, var(--ease-ui)),
              width 260ms var(--ease, var(--ease-ui)),
              background-color 260ms var(--ease, var(--ease-ui));
}
.hero .h-burger span:last-child { width: 15px; background: var(--gold); }
/* The gold bar keeps its gold: it is the one that crosses. */
.hero .h-burger.is-open span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.hero .h-burger.is-open span:nth-child(2) { opacity: 0; }
.hero .h-burger.is-open span:nth-child(3) {
  width: 26px; background: var(--gold); transform: translateY(-8px) rotate(-45deg);
}

/* ── Mobile menu ──
   The header's destinations, moved somewhere they can be a reasonable
   size to tap. The lesson pages now use this same panel and this same
   burger — see .rx-burger and .rx-top-right in lesson.css, which are
   deliberate copies of what is here. Change one, change both.

   fixed, not absolute: the hero is min-height on a phone on index and
   header-height on a1, so an absolute panel would size to whichever
   of those it landed in rather than to the screen. .hero sets no
   transform, so fixed is not trapped by its overflow. */
.hero .h-menu {
  position: fixed; inset: 0; z-index: 5;
  background: var(--bg);
  padding: 104px 20px 40px;
  display: flex; flex-direction: column;
  opacity: 0; visibility: hidden;
  transform: translateY(-10px);
  transition: opacity var(--dur-slow) var(--ease, var(--ease-ui)),
              transform 240ms var(--ease, var(--ease-ui)),
              visibility 240ms var(--ease, var(--ease-ui));
}
.hero .h-menu.is-open { opacity: 1; visibility: visible; transform: none; }
.hero .h-menu a {
  font-family: var(--sans);
  font-size: clamp(1.5rem, 7vw, 2rem); font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--ink); text-decoration: none;
  padding: 18px 0;
  border-bottom: 1px solid var(--divider);
}
.hero .h-menu a:active { color: var(--gold-dark); }
/* Same recipe as .h-cta, restated full width: it is the one thing in
   here that is an action rather than a place. */
.hero .h-menu .h-menu-cta {
  margin-top: auto; border-bottom: none;
  background: var(--gold); color: var(--on-gold);
  border-radius: var(--radius-pill); text-align: center;
  padding: 18px 22px;
  font-size: var(--size-label); font-weight: 800;
  letter-spacing: var(--track-label);
  text-transform: var(--label-transform);
}

.hero :is(a, button, input):focus-visible {
  outline: 2px solid var(--gold-dark); outline-offset: 3px;
}

/* ── Narrow ──
   The links and the CTA move into the burger, leaving the bar as
   logo, theme toggle, burger. */
@media (max-width: 900px) {
  .hero .h-burger { display: flex; }
  .hero .h-link,
  .hero .h-cta { display: none; }
  .hero .h-left  { gap: 18px; }
  .hero .h-right { gap: 20px; }
  /* The lockup is a 6:1 strip, so height buys width fast: 34px tall is
     207px wide, and on a 320px screen that leaves 3px beside the theme
     toggle and the burger. 26px brings it to 159px and the row breathes. */
  .hero .h-left img { height: 38px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero .h-cta, .hero .h-link, .hero .h-burger span, .hero .h-menu {
    transition-duration: 1ms !important;
  }
}


/* ══════════════════════════════════════════════════════
   THE BUTTON PAIR

   Lived in index.html's inline <style> until 11 Aug 2026, which
   meant the 404 page used the same two class names and got
   browser-default blue underlines: the classes simply did not
   exist on any page but one.

   They are the site's primary and secondary action and belong
   with the header, which is the other thing every page shares.
   The lj- prefix is from the lesson journey, where they were
   first written; they are bare classes used in four places now
   and the name has outlived its origin.
   ══════════════════════════════════════════════════════ */
/* .h-cta is scoped to .hero, so it cannot be reused out here. Same
       recipe, restated: gold fill, dark label, pill. The label is pinned
       to #212121 rather than a theme token, because the fill is gold in
       all four themes and --ink is chalk in two of them. */
    .lj-start {
      display: inline-block;
      padding: 13px 22px;
      border-radius: var(--radius-pill);
      font-family: var(--sans);
      font-size: var(--size-label);
      font-weight: 800;
      letter-spacing: var(--track-label);
      text-transform: var(--label-transform);
      background: var(--gold);
      color: var(--on-gold);
      text-decoration: none;
      transition: background-color var(--dur-base) var(--ease, var(--ease-ui));
    }
    .lj-start:hover { background: var(--gold-dark); }
    /* Quiet second action: the key is for people who already have one,
       so it must not compete with the free lesson. */
    .lj-login {
      display: inline-block;
      padding: 13px 22px;
      border-radius: var(--radius-pill);
      border: 1.5px solid var(--divider);
      font-family: var(--sans);
      font-size: var(--size-label);
      font-weight: 800;
      letter-spacing: var(--track-label);
      text-transform: var(--label-transform);
      color: var(--ink);
      text-decoration: none;
      transition: border-color var(--dur-base), color 0.15s;
    }
    .lj-login:hover { border-color: var(--german); color: var(--german); }
    /* Already inside: three buttons down the page were still offering
       a way in. The header keeps its own control, which by then reads
       Sign out; these had nothing left to do, so they go. The gold
       Start button is left standing on its own. */
    html.has-access .lj-login { display: none; }