/* Shared header, mobile menu, breadcrumb and footer.
   Loaded by every page. Uses the color tokens each page defines on :root. */

.site-head { position:sticky; top:0; z-index:50; background:var(--surface); border-bottom:1px solid var(--rule); }
.sh-in { max-width:1120px; margin:0 auto; padding:12px 26px; display:flex; align-items:center; gap:16px; }
.sh-name { font-family:Fraunces, Georgia, serif; font-weight:600; font-size:16px; color:var(--ink); text-decoration:none; margin-right:auto; padding:6px 0; white-space:nowrap; }
.sh-links { display:flex; align-items:center; gap:4px; }
.sh-links a { color:var(--muted); text-decoration:none; font-size:14.5px; padding:8px 10px; border-radius:3px; }
.sh-links a:hover { color:var(--ink); }
.sh-links a[aria-current="page"] { color:var(--ink); font-weight:600; box-shadow:inset 0 -2px 0 var(--accent); border-radius:0; }
.site-head .toggle { display:flex; align-items:center; gap:8px; background:none; border:0; cursor:pointer;
  font:inherit; font-size:13px; color:var(--faint); padding:8px 4px; }
.site-head .toggle:hover { color:var(--ink); }
.site-head .toggle-track { width:32px; height:18px; border-radius:20px; background:var(--rule); position:relative; display:block; }
.site-head .toggle-dot { width:12px; height:12px; border-radius:50%; background:var(--surface); position:absolute; top:3px; left:3px;
  transition:transform .2s; box-shadow:0 0 0 1px var(--rule); }
[data-theme="dark"] .site-head .toggle-dot { transform:translateX(14px); background:var(--accent); box-shadow:none; }
a.sh-book { display:inline-flex; align-items:center; background:var(--accent); color:var(--accent-ink); border:1px solid var(--accent);
  padding:9px 16px; border-radius:3px; text-decoration:none; font-weight:600; font-size:14px; line-height:1.3; white-space:nowrap; }
a.sh-book:hover { filter:brightness(1.08); }
.sh-menu-btn { display:none; align-items:center; gap:8px; background:none; border:1px solid var(--rule); border-radius:3px;
  color:var(--ink); font:inherit; font-size:14px; font-weight:600; padding:0 12px; min-height:44px; cursor:pointer; }
.sh-menu-btn .bars { width:16px; height:12px; position:relative; display:block; }
.sh-menu-btn .bars i { position:absolute; left:0; right:0; height:2px; background:currentColor; border-radius:1px; transition:transform .2s, opacity .2s; }
.sh-menu-btn .bars i:nth-child(1) { top:0; } .sh-menu-btn .bars i:nth-child(2) { top:5px; } .sh-menu-btn .bars i:nth-child(3) { top:10px; }
.sh-menu-btn[aria-expanded="true"] .bars i:nth-child(1) { transform:translateY(5px) rotate(45deg); }
.sh-menu-btn[aria-expanded="true"] .bars i:nth-child(2) { opacity:0; }
.sh-menu-btn[aria-expanded="true"] .bars i:nth-child(3) { transform:translateY(-5px) rotate(-45deg); }
.sh-menu { border-top:1px solid var(--rule); background:var(--surface); }
.sh-menu[hidden] { display:none; }
.sh-menu-in { max-width:1120px; margin:0 auto; padding:8px 16px 18px; display:grid; }
.sh-menu-in a { color:var(--ink); text-decoration:none; font-family:Fraunces, Georgia, serif; font-weight:600; font-size:20px;
  padding:12px 2px; min-height:48px; border-bottom:1px solid var(--rule-soft); display:flex; align-items:center; justify-content:space-between; }
.sh-menu-in a::after { content:"→"; font-family:"IBM Plex Mono", monospace; font-size:15px; color:var(--accent-text); }
.sh-menu-in a[aria-current="page"] { color:var(--accent-text); }
.sh-menu-in a.sh-menu-book { margin-top:14px; border:0; background:var(--accent); color:var(--accent-ink); border-radius:3px;
  justify-content:center; font-family:Karla, system-ui, sans-serif; font-size:16px; padding:12px 16px; }
.sh-menu-in a.sh-menu-book::after { content:none; }
.sh-menu-theme { margin-top:10px; justify-self:start; background:none; border:0; color:var(--faint); font:inherit; font-size:14px;
  min-height:44px; padding:0 2px; cursor:pointer; text-decoration:underline; text-underline-offset:3px; }
.site-head a:focus-visible, .site-head button:focus-visible { outline:2px solid var(--ink); outline-offset:3px; }

/* breadcrumb on service pages */
.crumb { font-family:"IBM Plex Mono", monospace; font-size:12px; letter-spacing:.06em; color:var(--faint); padding:18px 0 0; margin:0; }
.crumb a { color:var(--muted); text-decoration:none; padding:8px 0; }
.crumb a:hover { color:var(--ink); text-decoration:underline; }
.crumb span[aria-hidden] { margin:0 8px; }

/* footer */
.site-foot { border-top:1px solid var(--rule); margin-top:70px; padding:26px 0 60px; color:var(--faint); font-size:14px; }
.site-foot nav { display:flex; flex-wrap:wrap; gap:0 22px; margin-bottom:6px; }
.site-foot nav a { color:var(--muted); text-decoration:none; font-weight:600; padding:10px 0; display:inline-block; min-height:44px; }
.site-foot nav a:hover { color:var(--ink); }
.site-foot p { margin:0; }

@media (max-width:860px) {
  .sh-links, .site-head .toggle { display:none; }
  .sh-menu-btn { display:inline-flex; }
}
@media (max-width:640px) {
  .sh-in { padding:10px 16px; gap:10px; }
  a.sh-book { min-height:44px; padding:0 14px; }
}
@media (max-width:440px) {
  .sh-name { white-space:nowrap; }
  .sh-free { display:none; }
  .sh-menu-btn { padding:0 12px; }
  .sh-menu-btn .lbl { display:none; }
}
@media (max-width:340px) {
  .sh-name { font-size:15px; }
  a.sh-book { padding:0 10px; font-size:13.5px; }
}
@media (prefers-reduced-motion:reduce) {
  .sh-menu-btn .bars i, .site-head .toggle-dot { transition:none; }
}