/* =============================================================
   SITE CHROME — header, breadcrumb, site menu, page-anchor bar.

   One source of truth for every page. Built only from the tokens in
   colors_and_type.css; no new colours, no new fonts.

   The rule this file exists to enforce: the header answers "where can I
   go" (the same destinations everywhere), and .pagenav answers
   "what is on this page". They are never mixed. Before this file the
   header held the current page's own anchors, so the menu changed
   completely at every step and there was no site nav at all.
   ============================================================= */

:root{
  --topbar-h: 64px;
  --pagenav-h: 56px;
}

/* ---------- header shell ---------- */
.topbar{position:sticky;top:0;z-index:200;background:var(--bg-default);
  border-bottom:1px solid var(--border-subtle)}
/* The chrome carries its own .wrap geometry so it aligns correctly even on
   the utility pages, which never defined a .wrap of their own. */
.topbar .wrap{display:flex;align-items:center;gap:12px;min-height:var(--topbar-h);position:relative;
  max-width:var(--max-content);margin:0 auto;padding:0 24px}

/* Zone accent: a 2px rule under the header, one colour per section of the
   site. Half a second of "this is a different place" before any reading. */
.topbar::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:transparent}
[data-zone="library"] .topbar::after{background:var(--coral-500)}
[data-zone="leaders"] .topbar::after{background:var(--teal-700)}
[data-zone="blog"]    .topbar::after{background:var(--label)}

/* ---------- brand ---------- */
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--fg-brand);
  font-weight:var(--fw-bold);font-size:15px;letter-spacing:.02em;flex:none}
.brand img{width:26px;height:26px;display:block}

/* ---------- breadcrumb ---------- */
/* Visible at every width. When space runs out the brand wordmark goes and
   the location stays: mid-journey, where you are beats who made it. */
.sitecrumb{min-width:0;flex:0 1 auto}
.sitecrumb ol{display:flex;align-items:center;gap:6px;margin:0;padding:0;list-style:none;
  font-size:var(--fs-small);min-width:0}
.sitecrumb li{display:flex;align-items:center;gap:6px;min-width:0}
.sitecrumb li::before{content:"/";color:var(--fg-subtle);opacity:.55;flex:none}
.sitecrumb a{color:var(--fg-subtle);text-decoration:none;white-space:nowrap}
.sitecrumb a:hover{color:var(--teal-800);text-decoration:underline}
.sitecrumb [aria-current="page"] span{color:var(--ink-700);font-weight:var(--fw-semibold);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}

/* ---------- site menu ---------- */
.sitenav{margin-left:auto;display:flex;gap:22px;align-items:center}
.sitenav a{font-size:var(--fs-small);font-weight:var(--fw-semibold);color:var(--ink-700);
  text-decoration:none;white-space:nowrap;position:relative}
.sitenav a:hover{color:var(--teal-800)}
.sitenav a[aria-current="page"]{color:var(--teal-800)}
.sitenav a[aria-current="page"]::after{content:"";position:absolute;left:0;right:0;bottom:-8px;
  height:2px;background:var(--teal-500);border-radius:1px}

/* Access sits last and is drawn as a bordered pill, so it reads as the thing
   you do rather than another part of the site to browse. Members were reaching
   it through a box at the foot of a sales page, which is a long way to walk for
   a link you already paid for. */
.sitenav .nav-access{padding:6px 14px;border:1px solid var(--border-default);
  border-radius:var(--radius-pill);color:var(--teal-800)}
.sitenav .nav-access:hover{border-color:var(--teal-500);background:var(--teal-50)}
.sitenav .nav-access[aria-current="page"]{border-color:var(--teal-600);
  background:var(--bg-brand-soft)}
.sitenav .nav-access[aria-current="page"]::after{display:none}

/* ---------- hamburger ---------- */
.navtoggle{display:none;margin-left:auto;background:none;border:none;padding:8px;cursor:pointer}
.navtoggle span{display:block;width:22px;height:2px;border-radius:1px;background:var(--ink-700);
  margin:5px 0;transition:transform .2s ease,opacity .2s ease}
.navtoggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.navtoggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.navtoggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ---------- page-anchor bar ---------- */
/* The current page's own sections. Scrolls sideways rather than wrapping,
   so it stays one line at any width. Named .pagenav, not .jbar — the
   school-leaders page already uses .jbar for its jurisdiction filter. */
.pagenav{position:sticky;top:var(--topbar-h);z-index:150;background:var(--sea-glass);
  border-bottom:1px solid var(--border-subtle)}
.pagenav .wrap{display:flex;gap:8px;align-items:center;overflow-x:auto;
  max-width:var(--max-content);margin:0 auto;padding:10px 24px;
  scrollbar-width:none;-ms-overflow-style:none}
.pagenav .wrap::-webkit-scrollbar{display:none}
.pagenav .lbl{flex:none;font-size:12px;color:var(--fg-subtle);text-transform:uppercase;
  letter-spacing:.08em;margin-right:2px}
.pagenav a{flex:none;font-size:13px;font-weight:var(--fw-semibold);color:var(--teal-800);
  text-decoration:none;padding:6px 12px;border-radius:var(--radius-pill);
  background:var(--bg-default);border:1px solid var(--border-subtle);white-space:nowrap}
.pagenav a:hover{border-color:var(--teal-500)}

/* Anchor targets must clear both sticky bars when jumped to. */
[id]{scroll-margin-top:calc(var(--topbar-h) + 60px)}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .navtoggle{display:block}
  /* The panel is absolutely positioned against .topbar .wrap's padding box,
     so it carries its own inset to line the items up with the brand above. */
  .sitenav{display:none;position:absolute;top:100%;left:0;right:0;margin-left:0;
    flex-direction:column;align-items:stretch;gap:0;background:var(--bg-default);
    border-bottom:1px solid var(--border-subtle);padding:4px 24px;box-shadow:var(--shadow-md)}
  .sitenav.open{display:flex}
  .sitenav a{padding:12px 0 12px 14px;border-bottom:1px solid var(--border-subtle)}
  .sitenav a:last-child{border-bottom:none}
  /* In the stacked panel the pill would be a lone rounded box in a list of
     plain rows, so it goes back to being a row. */
  .sitenav .nav-access{border:none;border-radius:0;background:none;
    padding:12px 0 12px 14px}
  .sitenav a[aria-current="page"]::after{inset:10px auto 10px 0;width:3px;height:auto}
}
@media (max-width:560px){
  .brand .brand-name{display:none}
}

@media (prefers-reduced-motion:reduce){
  .navtoggle span{transition:none}
}

@media print{
  .topbar,.pagenav{display:none!important}
}

/* =============================================================
   ZONE SURFACES
   The three teal-system zones shared one hero treatment, so every page
   felt like the same page and the breadcrumb had to do all the work.
   Same palette, different weighting: the library leans coral (warm, retail),
   the leaders' toolkit leans teal and flattens off (cool, instrument-like).
   Specificity beats each page's own .hero rule on purpose.
   ============================================================= */
body[data-zone="library"] .hero{
  background:
    radial-gradient(85% 75% at 88% 6%,var(--coral-50),transparent 58%),
    radial-gradient(120% 95% at 4% 0%,#FDF6F1,var(--surface-page) 62%)}
body[data-zone="leaders"] .hero{
  background:
    linear-gradient(180deg,var(--teal-50),var(--surface-page) 78%)}
body[data-zone="leaders"] .hero::before{opacity:.55}

/* ---------- sibling navigation ----------
   A product page is a dead end without a way sideways. This strip carries
   the rest of the family, so you can move between packs without going back
   up to the library first. No prices here by design: the price lives on the
   Buy button and in lib/products.js, one place to change. */
.siblings{border-top:1px solid var(--border-subtle);background:var(--surface-sunken)}
.siblings .wrap{max-width:var(--max-content);margin:0 auto;padding:44px 24px 48px}
.siblings h2{font-family:var(--font-display);font-weight:300;font-optical-sizing:auto;
  font-size:var(--fs-h3);margin:0 0 4px;color:var(--ink-900)}
.siblings .sub{font-size:var(--fs-small);color:var(--fg-muted);margin:0 0 22px}
.siblings .row{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px}
.sib{display:flex;flex-direction:column;gap:4px;text-decoration:none;
  background:var(--bg-card);border:1px solid var(--border-subtle);
  border-radius:var(--radius-lg);padding:16px 18px;
  transition:border-color var(--dur-base) var(--ease-standard),
             transform var(--dur-base) var(--ease-standard)}
.sib:hover{border-color:var(--teal-600);transform:translateY(-2px)}
.sib:focus-visible{outline:2px solid transparent;outline-offset:2px;box-shadow:var(--shadow-focus)}
.sib .age{font-size:var(--fs-micro);font-weight:var(--fw-bold);letter-spacing:.06em;
  text-transform:uppercase;color:var(--teal-700)}
.sib .name{font-size:var(--fs-small);font-weight:var(--fw-semibold);color:var(--ink-900);
  line-height:1.35}
.sib[aria-current="page"]{background:var(--bg-brand-soft);border-color:var(--teal-600);
  pointer-events:none}
.sib[aria-current="page"] .name{color:var(--teal-800)}
.siblings .all{display:inline-block;margin-top:20px;font-size:var(--fs-small);
  font-weight:var(--fw-semibold);color:var(--teal-700);text-decoration:none}
.siblings .all:hover{text-decoration:underline;text-underline-offset:3px}
@media (prefers-reduced-motion:reduce){ .sib{transition:none} .sib:hover{transform:none} }
@media print{ .siblings{display:none!important} }

/* ---------- lost-link notice ----------
   Injected at the top of <main> by nav.js when a gate or a failed magic link
   sends someone to a sales page. Informational, not an error: a buyer on a
   second computer has done nothing wrong, so this uses the brand tint rather
   than a warning colour. */
.lostlink{max-width:var(--max-content);margin:0 auto;padding:0 24px}
.lostlink p{background:var(--bg-brand-soft);border:1px solid var(--teal-600);
  border-radius:var(--radius-lg);padding:12px 16px;margin:18px 0 0;
  font-size:var(--fs-small);line-height:var(--lh-base);color:var(--ink-900)}
.lostlink a{color:var(--teal-700);font-weight:var(--fw-semibold);
  text-decoration:underline;text-underline-offset:3px}
.lostlink a:hover{color:var(--teal-800)}
@media print{ .lostlink{display:none!important} }

/* ---------- skip link ----------
   Injected by nav.js. Off-screen until focused, then it lands in the top-left
   above the sticky header, which is z-index 200. */
.skiplink{position:absolute;left:-9999px;top:0;z-index:300}
.skiplink:focus{left:8px;top:8px;width:auto;height:auto;
  background:var(--bg-default);color:var(--teal-800);
  border:2px solid var(--teal-600);border-radius:var(--radius-lg);
  padding:10px 16px;font-size:var(--fs-small);font-weight:var(--fw-semibold);
  text-decoration:none}
/* The skip link sends focus here programmatically; it is not a focus stop of
   its own, so it takes no ring. A real :focus-visible still would. */
main:focus:not(:focus-visible){outline:none}