/* =============================================================
   SITE CHROME for the STATIC pages — site menu + page-anchor bar.

   Ported from the school site's assets/nav.css, same rule and same
   two-row shape: the header answers "where can I go" (identical
   destinations on every page), .pagenav answers "what is on this
   page". They are never mixed. Before this, each static page carried
   only its own anchors, so the menu changed completely at every step
   and there was no way back into the site.

   The React pages (/, /business/, /builders/) get their header from
   variants/Atelier.jsx instead. The destination list in each page's markup
   must match Atelier.jsx's SiteHeader, so changing one without the other is
   the drift to watch for.

   Built only from colors_and_type.css tokens: no new colours, no fonts.
   ============================================================= */

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

/* ---------- header shell ---------- */
.sitebar{position:sticky;top:0;z-index:200;background:var(--bg-default);
  border-bottom:1px solid var(--border-subtle)}
.sitebar .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}

/* ---------- brand + breadcrumb ---------- */
.sitebar .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}
.sitebar .brand img{width:26px;height:26px;display:block}
.sitebar .where{color:var(--fg-subtle);font-weight:var(--fw-regular);
  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-medium);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}
/* Contact is the thing you do, not another place to browse. */
.sitenav .nav-cta{padding:6px 14px;border:1px solid var(--border-default);
  border-radius:var(--radius-pill);color:var(--teal-800)}
.sitenav .nav-cta:hover{border-color:var(--teal-500);background:var(--teal-50)}
.sitenav .nav-cta::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. */
.pagenav{position:sticky;top:var(--topbar-h);z-index:150;background:var(--surface-sunken);
  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}
  /* Positioned against .sitebar .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-cta{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){
  .sitebar .where{display:none}
}
@media (prefers-reduced-motion:reduce){
  .navtoggle span{transition:none}
}
@media print{
  .sitebar,.pagenav{display:none!important}
}