/* The page frame and shared components: container, button, section heading,
   header (with language switcher) and footer. */

.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }

/* ---------- shared type styles ---------- */
/* Section headings in any section type. */
.section-head { font-size: var(--type-headline); line-height: 1; color: var(--color-ink); max-width: 16ch; margin-bottom: var(--space-2xl); }

/* ---------- button ---------- */
.btn {
  display: inline-flex; align-items: center; gap: var(--space-xs);
  min-height: var(--btn-h); padding: 0 var(--space-lg);
  background: var(--color-accent); color: var(--color-accent-ink);
  font: inherit; text-decoration: none;
  border: 0; border-radius: var(--radius-pill); cursor: pointer; white-space: nowrap;
  transition: background-color var(--dur-micro) var(--ease-out), transform var(--dur-micro) var(--ease-out);
}
.btn:hover { background: var(--color-accent-2); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--color-ink); outline-offset: 3px; }

/* ---------- header ---------- */
.nav {
  position: fixed; inset: 0 0 auto; z-index: var(--z-sticky-nav); height: var(--nav-h);
  transition: background-color var(--dur-short) var(--ease-out), transform var(--dur-long) var(--ease-out);
}
/* header.js: slides away while reading down, comes back on the first move up */
.nav[data-hidden]:not(:focus-within) { transform: translateY(-100%); }
.nav[data-scrolled] { background: var(--color-paper); }
.nav__inner { max-width: none; height: 100%; display: flex; align-items: center; gap: var(--space-lg); }
.nav__brand { display: block; flex-shrink: 0; }
.nav__brand img { height: var(--logo-h); width: auto; transform-origin: 0 0; transition: transform var(--dur-long) var(--ease-out); }
/* on arrival the badge hangs large over the hero; it settles into the bar once the page moves */
.nav:not([data-scrolled]) .nav__brand img { transform: translateY(var(--space-md)) scale(var(--logo-arrival-scale)); }

/* pages with "nav: header" in pages.yaml (none yet) */
.nav__menu ul { display: flex; gap: var(--space-lg); margin: 0; padding: 0; list-style: none; }
.nav__menu a { text-decoration: none; color: var(--color-ink-2); }
.nav__menu a:hover, .nav__menu a[aria-current] { color: var(--color-ink); }

/* language switcher: plain links, the current one underlined in ochre */
.lang { display: flex; margin-left: auto; }
.nav__menu + .lang { margin-left: 0; }
.lang a {
  display: grid; place-items: center; min-width: 32px; min-height: var(--tap-min); padding: 0 var(--space-2xs);
  font-size: var(--type-small); color: var(--color-ink-2); text-decoration: none; border-radius: var(--radius-card);
  transition: color var(--dur-micro) var(--ease-out);
}
.lang a:hover { color: var(--color-ink); }
.lang a[aria-current] {
  color: var(--color-ink);
  text-decoration: underline; text-decoration-color: var(--color-ochre); text-decoration-thickness: 2px; text-underline-offset: 0.35em;
}
/* the header menu must stay before the language switch, which pushes right */
.nav__menu { margin-left: auto; }

@media (max-width: 30rem) {
  .nav__inner { gap: var(--space-xs); }
  .nav:not([data-scrolled]) .nav__brand img { transform: translateY(var(--space-xs)) scale(var(--logo-arrival-scale)); }
  .nav .btn { padding: 0 var(--space-sm); }
}
@media (prefers-reduced-motion: no-preference) {
  .js .nav { animation: nav-in 600ms var(--ease-out) 700ms both; }
  /* pages without a hero have no intro to wait for */
  .js .nav[data-scrolled] { animation-delay: 0ms; }
}
@keyframes nav-in { from { opacity: 0; } }

/* ---------- music button: fixed bottom left (music-toggle.php) ---------- */
.music-toggle {
  position: fixed; left: var(--gutter); bottom: var(--space-lg); z-index: var(--z-raised);
  display: inline-flex; align-items: center; gap: var(--space-xs);
  min-height: var(--tap-min); padding: 0 var(--space-md) 0 var(--space-sm);
  background: var(--color-paper-2); color: var(--color-ink-2); font: inherit; font-size: var(--type-small);
  border: 1px solid var(--color-rule); border-radius: var(--radius-pill); cursor: pointer;
  transition: color var(--dur-micro) var(--ease-out), border-color var(--dur-micro) var(--ease-out);
}
.music-toggle:hover { color: var(--color-ink); border-color: var(--color-muted); }
.music-toggle svg { width: 18px; height: 18px; fill: currentColor; flex-shrink: 0; }
/* the speaker shows sound waves while music plays, a cross while it doesn't */
.music-toggle__on, .music-toggle[data-playing] .music-toggle__off { display: none; }
.music-toggle[data-playing] .music-toggle__on { display: inline; }
.music-toggle[data-playing] { color: var(--color-ink); }
/* keep the end of the footer readable behind the fixed button */
body:has(.music-toggle:not([hidden])) .foot { padding-bottom: calc(var(--space-xl) + var(--tap-min) + var(--space-lg)); }
@media (prefers-reduced-motion: no-preference) {
  .js .music-toggle { animation: nav-in 600ms var(--ease-out) 900ms both; }
}

/* ---------- footer: two quiet columns and one bottom line ---------- */
.foot { background: var(--color-paper-2); padding-block: var(--space-2xl) var(--space-xl); color: var(--color-ink-2); font-size: var(--type-small); line-height: 1.6; }
.foot__inner { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-xl) var(--gap-columns); }
.foot__col { display: flex; flex-direction: column; gap: var(--space-sm); }
.foot__label { font: inherit; color: var(--color-ochre); }
.foot a { color: inherit; display: inline-block; padding-block: var(--space-2xs); /* taller tap target */ text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; transition: color var(--dur-micro) var(--ease-out), text-decoration-color var(--dur-micro) var(--ease-out); }
.foot a:hover { color: var(--color-ink); text-decoration-color: var(--color-ochre); }
.foot__bottom { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-xs) var(--space-lg); padding-top: var(--space-lg); color: var(--color-muted); }
.foot__legal { display: flex; gap: var(--space-lg); }
@media (max-width: 40rem) { .foot__inner { grid-template-columns: minmax(0, 1fr); } }