/* Motoble shared site chrome - design tokens, header/nav, footer, and
   common components (panel/button) used by every public/*.html page.
   Extracted 2026-09-11 after several rounds of the same bug: a fix
   (footer padding, a new nav link, a spacing value) landing on some
   pages and not others, because each page carried its own full copy
   of this CSS. One shared file means one edit reaches every page.

   Page-specific CSS (hero sections, page content, unique components)
   stays in each page's own <style> block - only what's genuinely
   identical across pages lives here. */

:root {
  --purple: #583F99;
  --purple-dark: #402C73;
  --purple-wash: #F2EFFA;
  --teal: #35B5B9;
  --teal-dark: #1c8a8e;
  --teal-wash: #E6F7F7;
  --amber: #FFD463;
  --amber-dark: #A8791A;
  --amber-wash: #FFF7E3;
  --red: #F04E62;
  --red-dark: #A32D3B;
  --red-wash: #FDEAED;
  --green: #4C9A5A;
  --green-dark: #2F6E3B;
  --green-wash: #E9F6EC;
  --ink: #241C36;
  --muted: #6B6479;
  --faint: #9791A6;
  --line: #E9E5F1;
  --wash: #EBE8E7;
  --white: #FFFFFF;
  --panel: #FAF9FC;
  --shadow: rgba(88, 63, 153, 0.10);
  --display: 'Baloo 2', sans-serif;
  --body: 'Nunito', sans-serif;
  --radius: 20px;
  --max: 760px;

  /* Spacing scale - the standing rule going forward: any two visually
     distinct sections (a different background colour, a card ending
     and a full-bleed banner starting, page content meeting the
     footer) need real separation, never zero. --space-lg (56px) is
     the standard gap for that boundary, used consistently by
     .site-footer's margin-top and any "starts a new themed section"
     class below. This exists specifically so nobody has to re-derive
     "how much gap" each time, and so a themed section is never placed
     directly against differently-styled content without one of these
     applied - see the comment on .site-footer for the concrete bug
     this caused before this scale existed. */
  --space-xs: 12px;
  --space-sm: 24px;
  --space-md: 40px;
  --space-lg: 56px;
  --space-xl: 88px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

/* Sticky footer: on a page with little content (a thin jargon entry, an
   empty-ish portal tab), main grows to fill the remaining viewport height
   so the footer sits at the bottom of the screen rather than riding up
   under the content. On a normal/long page this has no visible effect -
   main is already taller than the viewport, so flex-grow does nothing -
   which is why it's safe to apply globally rather than page-by-page.
   Same fix as Censworth. */
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--white);
  color: var(--ink);
  font-family: var(--body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
body > main { flex: 1 0 auto; }
body > .site-header, body > .site-footer { flex-shrink: 0; }

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 24px; }

:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; }

h1, h2, h3 { font-family: var(--display); margin: 0; color: var(--ink); text-wrap: balance; }

/* ============ Header / nav ============
   One nav pattern for every page: inline pills down to 700px, then a
   toggled full-width panel rather than shrinking or wrapping pills -
   confirmed via real testing that shrink-then-wrap let a nav item
   clip off the edge of the viewport at in-between widths, and even
   where it wrapped cleanly it made the header two rows deep. This is
   also what makes it safe to add a nav item in future without
   re-litigating an overflow bug - see motoble-chrome.js for the
   toggle behaviour every page shares. */
.site-header { padding: 18px 0; background: var(--white); border-bottom: 1px solid var(--line); }
.site-header .wrap { max-width: 980px; display: flex; align-items: center; justify-content: space-between; }
.logo { display: flex; align-items: center; text-decoration: none; }
.logo-img { height: 32px; width: auto; display: block; }
.header-right { display: flex; align-items: center; gap: 6px; }
.nav-link { font-size: 13.5px; font-weight: 800; color: var(--muted); text-decoration: none; padding: 9px 16px; border-radius: 999px; white-space: nowrap; }
.nav-link:hover { color: var(--ink); text-decoration: none; }
.nav-link.current { background: var(--wash); color: var(--ink); }

.nav-toggle { display: none; background: none; border: none; padding: 8px; margin: -8px; border-radius: 8px; cursor: pointer; }
.nav-toggle:hover { background: var(--wash); }

.mobile-nav { display: none; flex-direction: column; gap: 2px; padding: 4px 24px 16px; border-top: 1px solid var(--line); }
.mobile-nav.is-open { display: flex; }
.mobile-nav-link { font-size: 15px; font-weight: 800; color: var(--muted); text-decoration: none; padding: 12px 14px; border-radius: 10px; }
.mobile-nav-link:hover { color: var(--ink); background: var(--wash); }
.mobile-nav-link.current { background: var(--wash); color: var(--ink); }

@media (max-width: 700px) {
  .header-right { display: none; }
  .nav-toggle { display: flex; align-items: center; justify-content: center; }
}
/* Five items since the Confidence Report joined the menu (21 Sep 2026).
   Between the phone menu and roomy desktop widths, each item's two words
   stack on two lines instead of the row squeezing up against the logo
   (Mike's suggestion). It stays one row of pills, so none of the old
   wrap-onto-a-second-row problems above come back. */
@media (min-width: 701px) and (max-width: 900px) {
  .nav-link { white-space: normal; text-align: center; line-height: 1.2; padding: 6px 12px; width: min-content; }
}

/* ============ Footer ============
   margin-top is load-bearing, not decorative: padding-top on this
   element only ever creates space AFTER its border-top renders, never
   before it - a real bug found live (content sitting flush against
   this exact hairline on multiple pages, measured 0px gap via
   getBoundingClientRect) before margin-top was added. Don't remove it
   thinking padding alone should be enough; it silently isn't. */
.site-footer { border-top: 1px solid var(--line); margin-top: var(--space-lg); padding: var(--space-lg) 0 40px; text-align: center; font-size: 13px; color: var(--muted); }
.footer-links { margin-bottom: 10px; }
.site-footer a { color: var(--purple); text-decoration: none; font-weight: 700; }
.site-footer .legal { margin-top: 10px; opacity: 0.8; line-height: 1.7; font-size: 12.5px; }

/* ============ Shared components ============ */
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 32px 30px; box-shadow: 0 12px 32px -16px var(--shadow); }
.btn { display: inline-block; font-family: var(--display); font-weight: 700; font-size: 15px; color: #fff; background: var(--teal); padding: 13px 30px; border-radius: 999px; text-decoration: none; }
.btn-secondary { background: #fff; color: var(--purple); border: 2px solid var(--purple); padding: 11px 28px; }
.btn-row { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }