/* =============================================================
   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 five 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;
}

/* ---------- 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}

/* ---------- 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}
  .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:none;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} }