/**
 * Shared burger-menu styling for the site header.
 * Loaded on every page that uses the shared <site-header> template
 * (see functions/_shared/header.js and functions/_middleware.js).
 * Relies on the --bg/--text/--muted/--border/--copper/--panel custom
 * properties each page already defines on :root.
 */
.header-actions{display:flex;align-items:center;gap:8px;margin-left:auto}
.theme-toggle{flex-shrink:0;width:42px;height:42px;display:flex;align-items:center;justify-content:center;border-radius:999px;border:1px solid var(--border);background:transparent;color:var(--text);cursor:pointer;font-size:18px}
.theme-toggle:focus-visible{outline:2px solid var(--copper);outline-offset:2px}

/* ===== Header bar =====
   Shared layout for the <site-header> template. Pages that need a pinned
   (position:fixed) header override .site-header position in their own CSS. */
.site-header{position:sticky;top:0;z-index:50;background:rgba(13,15,14,.86);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--border-subtle)}
.light-mode .site-header{background:rgba(245,242,236,.86)}
.header-in{position:relative;z-index:51;max-width:1200px;margin:0 auto;padding:14px max(20px,env(safe-area-inset-left));display:flex;justify-content:space-between;align-items:center;gap:16px}
.logo-wrap{display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit}
.logo-wrap:focus-visible{outline:2px solid var(--copper);outline-offset:4px;border-radius:4px}
.logo-icon{width:32px;height:32px;flex-shrink:0}
.logo{letter-spacing:4px;font-size:12px;font-weight:600}
@media(min-width:900px){.header-in{padding:16px 32px}}

/* ===== Menu trigger (hamburger / close) ===== */
.menu-trigger{
  flex-shrink:0;width:42px;height:42px;display:flex;align-items:center;justify-content:center;
  border-radius:999px;border:1px solid var(--border);background:transparent;color:var(--text);
  cursor:pointer;position:relative;
}
.menu-trigger:focus-visible{outline:2px solid var(--copper);outline-offset:2px}
.menu-trigger .icon{
  position:absolute;width:18px;height:18px;color:currentColor;
  transition:opacity .2s ease,transform .25s ease;
}
.menu-trigger .icon-close{opacity:0;transform:scale(.7) rotate(-45deg)}
.menu-trigger .icon-open{opacity:1;transform:scale(1) rotate(0deg)}
.menu-trigger[aria-expanded="true"] .icon-open{opacity:0;transform:scale(.7) rotate(45deg)}
.menu-trigger[aria-expanded="true"] .icon-close{opacity:1;transform:scale(1) rotate(0deg)}
@media(prefers-reduced-motion:reduce){.menu-trigger .icon{transition:none}}

/* ===== Dropdown nav (anchored top-right, under the hamburger) ===== */
.mobile-nav{
  position:fixed;
  top:calc(14px + 42px + 10px); /* header padding + button height + gap */
  right:max(20px,env(safe-area-inset-right));
  z-index:40;
  /* Fixed (not auto) width: an intrinsic width would be measured against
     whatever font is available at that paint, so a slow web-font load could
     lock in a narrower box before Inter swaps in, making the panel size
     inconsistently across pages/loads. */
  width:min(220px,calc(100vw - 40px));
  background:var(--elevated,var(--bg));
  border:1px solid var(--border);
  border-radius:16px;
  box-shadow:0 24px 60px rgba(0,0,0,.45);
  padding:10px;
  transform-origin:top right;
  transform:scale(.96) translateY(-6px);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .2s ease,transform .2s ease,visibility 0s linear .2s;
}
.mobile-nav.is-open{
  opacity:1;transform:scale(1) translateY(0);visibility:visible;pointer-events:auto;
  transition:opacity .2s ease,transform .2s ease,visibility 0s linear 0s;
}
.mobile-nav:focus{outline:none}
@media(prefers-reduced-motion:reduce){.mobile-nav{transition:opacity .12s linear;transform:none}.mobile-nav.is-open{transition:opacity .12s linear}}
@media(min-width:900px){.mobile-nav{top:calc(16px + 42px + 10px)}}

.mnav-inner{display:flex;flex-direction:column}

/* margin:0 guards against a page's own `ul,ol{margin:...}` content-typography
   rule leaking into the nav (bare element selectors can still match these
   classed elements) and shrinking/offsetting the panel. */
.mnav-list{list-style:none;display:flex;flex-direction:column;margin:0}
.mnav-list li,.mnav-sublist li{margin:0}

.mnav-direct{
  display:block;
  padding:13px 14px;border-radius:10px;
  color:var(--text);text-decoration:none;
  font-family:Inter,system-ui,sans-serif;
  font-size:13px;font-weight:400;letter-spacing:.08em;line-height:1.2;
  text-transform:uppercase;
}
@media(hover:hover) and (pointer:fine){
  .mnav-direct:hover{background:var(--panel)}
}
.mnav-direct[aria-current="page"]{background:var(--panel)}
.mnav-direct:focus-visible{outline:2px solid var(--copper);outline-offset:-2px;background:var(--panel)}

.mnav-group-toggle{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:8px;
  background:none;border:none;cursor:pointer;font-family:inherit;
}
.mnav-caret{width:13px;height:13px;flex-shrink:0;color:var(--muted);transition:transform .2s ease;pointer-events:none}
.mnav-group-toggle[aria-expanded="true"] .mnav-caret{transform:rotate(180deg)}
.mnav-sublist{list-style:none;display:flex;flex-direction:column;overflow:hidden;margin:0}
.mnav-sublist[hidden]{display:none}
.mnav-sub{
  display:block;padding:11px 14px 11px 24px;border-radius:10px;
  color:var(--muted);text-decoration:none;
  font-family:Inter,system-ui,sans-serif;
  font-size:12px;font-weight:400;letter-spacing:.08em;line-height:1.2;
  text-transform:uppercase;
}
@media(hover:hover) and (pointer:fine){
  .mnav-sub:hover{background:var(--panel);color:var(--text)}
}
.mnav-sub[aria-current="page"]{background:var(--panel);color:var(--text)}
.mnav-sub:focus-visible{outline:2px solid var(--copper);outline-offset:-2px;background:var(--panel)}