/* Roadworthy — the top bar, the same on every page (10 Oct 2026). John: "keep the top bar with
   the links the same on every page, I don't like having to go back home to see them."
   It is the homepage's floating bar from the Samsara restyle: the brand, five quick links, the
   amber "Check a defect" button, the theme button and the menu button with all nine links.
   Loaded by EVERY page, the homepage included, after the page's own stylesheet. The markup is
   copied into each page (23 of them); a link changed in one is a link to change in all.
   app.js opens the menu and swaps the theme; it is null-guarded and loaded everywhere.

   ⚠️ EVERY RULE IS SCOPED TO header.site, and sets its own widths, fonts and sizes. The pages
   underneath run on four stylesheets with three different --maxw values (760, 1080, 1140px),
   their own .wrap, .brand, .btn and :focus-visible, and line-heights of 1.6 and 1.62; any of
   those would reach in and make the bar measure differently page to page. The colours are the
   shared tokens, which index.html, shop.css and legal.css all define in both themes, so a colour
   change is still the three files the roadworthy-web-design skill names, not a fourth.
   The curves are written out (the homepage's --ease-out) because legal.css has no motion tokens. */

header.site{position:sticky;top:0;z-index:100;padding-top:10px;pointer-events:none;background:transparent;border-bottom:0;
  font-family:var(--sans);line-height:1.6;color:var(--ink);-webkit-font-smoothing:antialiased;}
header.site,header.site *{box-sizing:border-box;}
header.site :focus-visible{outline:3px solid var(--amber-2);outline-offset:2px;border-radius:4px;}
header.site > .wrap{max-width:1140px;margin:0 auto;padding:0 22px;}
header.site a{text-decoration:none;}
header.site .nav{display:flex;align-items:center;gap:14px;height:58px;padding:0 8px 0 14px;border-radius:12px;position:relative;
  pointer-events:auto;background:color-mix(in srgb,var(--surface) 92%,transparent);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid var(--line);box-shadow:0 10px 30px rgba(12,23,40,.22);}

header.site .brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:19px;letter-spacing:.02em;color:var(--ink);}
/* Amber in dark, as the homepage's generic dark link colour has always made it. */
:root[data-theme="dark"] header.site .brand{color:var(--amber-ink);}
header.site .brand .mark{width:30px;height:30px;flex:none;background:url(favicon.svg) center/contain no-repeat;}
header.site .brand small{display:block;font-size:9.5px;letter-spacing:.18em;color:var(--faint);font-weight:700;text-transform:uppercase;margin-top:-2px;}

/* Five on the bar, all nine behind the menu button. Nine on one bar wrapped onto two lines even
   at 1440px. The five are copies of links in the full list; the list is hidden until opened, so
   nothing is in the keyboard path twice. */
header.site .nav .quick{display:flex;gap:2px;margin-left:6px;}
header.site .nav .quick a{color:var(--muted);font-weight:600;font-size:14.5px;padding:8px 11px;border-radius:8px;white-space:nowrap;}

/* The full list drops down from the menu button at every width.
   ⚠️ `visibility` is load-bearing, not decoration. clip-path clips painting and hit-testing but
   does NOT remove anything from the tab order, so a closed menu with clip-path alone left its
   links in the keyboard path: tab past the button and focus vanished into nothing. visibility
   also hides them from screen readers. No allow-discrete needed: visibility flips to visible the
   instant the menu opens and holds until the close finishes.
   ⚠️ The two durations are deliberately different: a transition is read off the state being
   moved INTO, so the open rule's 220ms governs opening and this rule's 160ms governs closing.
   Keep visibility's duration equal to clip-path's in each, or the menu vanishes mid-slide. */
header.site .nav .links{display:flex;position:absolute;top:calc(100% + 8px);left:auto;right:0;width:min(320px,100%);margin:0;
  flex-direction:column;gap:0;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:8px;
  box-shadow:var(--shadow-lg);clip-path:inset(0 0 100% 0);visibility:hidden;
  /* Ten rows are taller than a phone held sideways (375px): scroll inside the list, so the last links can still be reached. */
  max-height:calc(100vh - 88px);max-height:calc(100dvh - 88px);overflow-y:auto;overscroll-behavior:contain;
  transition:clip-path .16s cubic-bezier(.23,1,.32,1),visibility .16s;}
header.site.open .nav .links{clip-path:inset(0 0 0 0);visibility:visible;transition:clip-path .22s cubic-bezier(.23,1,.32,1),visibility .22s;}
header.site .nav .links a{color:var(--muted);font-weight:600;font-size:15.5px;padding:11px 12px;border-radius:8px;}
/* ⚠️ Hover is gated on a real pointer. A touch tap fires :hover and LEAVES it stuck, so on a
   phone a link stays highlighted as though it were selected. */
@media (hover:hover) and (pointer:fine){
  header.site .nav .quick a:hover,header.site .nav .links a:hover{color:var(--ink);background:var(--surface-2);}
}

header.site .nav .right{margin-left:auto;display:flex;align-items:center;gap:10px;}
header.site .btn{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:15px;border-radius:8px;padding:12px 20px;
  border:1.5px solid transparent;cursor:pointer;
  transition:transform .12s cubic-bezier(.23,1,.32,1),box-shadow .12s cubic-bezier(.23,1,.32,1),background .15s;}
header.site .btn:active{transform:scale(.97);}
header.site .btn-amber{background:var(--amber-2);color:#14264a;box-shadow:0 6px 16px rgba(245,163,0,.32);}
header.site .btn-amber:hover{background:var(--amber);}
/* ⚠️ Dark: every page's `:root[data-theme="dark"] a` would otherwise make this amber on amber
   (1.18:1, the 12 Sep 2026 button bug). */
:root[data-theme="dark"] header.site .btn-amber{color:#14264a;}
/* The theme toggle and the menu button: the two most-tapped controls on the page. */
header.site .icon-btn{width:38px;height:38px;border-radius:10px;border:1.5px solid var(--line-2);background:var(--surface);
  color:var(--muted);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;font-size:16px;
  transition:transform .12s cubic-bezier(.23,1,.32,1),color .15s,border-color .15s;}
header.site .icon-btn:active{transform:scale(.94);}
header.site .icon-btn:hover{color:var(--ink);border-color:var(--navy-2);}

/* Below 1080 the five no longer fit beside the brand, the button and the two icons. */
@media (max-width:1079px){ header.site .nav .quick{display:none;} }
@media (max-width:860px){
  header.site .nav .links{left:0;width:auto;}
  header.site .nav .cta-hide{display:none;}
}
/* 44px is the minimum comfortable touch target; 38px was a desktop number. */
@media (max-width:640px){ header.site .icon-btn{width:44px;height:44px;} }
/* The bar's own padding cost the brand line its room on a phone: "UK transport compliance"
   wrapped to two lines and the bar grew. Narrower margins give the room back. */
@media (max-width:480px){
  header.site > .wrap{padding-left:12px;padding-right:12px;}
  header.site .nav{padding-left:10px;gap:10px;}
}
/* ⚠️ 320px is not a design width, but the page must FIT one (module 11 §3, 1.4.10). It did not:
   brand 187 + gap 18 + the two 44px buttons came to 325 in a 320 viewport. The brand had no
   min-width:0, so it could not give way and the buttons spilled off the right, scrolling the
   whole page sideways by 5px. Measure it with documentElement.clientWidth, never
   scrollWidth > innerWidth: innerWidth includes the scrollbar and hides exactly this. */
@media (max-width:359px){
  header.site .brand{min-width:0;}
  header.site .brand > span:last-child{min-width:0;overflow:hidden;}
}

/* Reduced motion keeps the colour fades and drops the sliding, as the homepage does. app.js sets
   rw-no-transition for one frame around a theme swap so the bar lands on the new colours at once. */
@media (prefers-reduced-motion:reduce){
  header.site,header.site *{transition-property:opacity,color,background-color,border-color,box-shadow!important;}
}
:root.rw-no-transition header.site,:root.rw-no-transition header.site *{transition:none!important;}