/* Brand mark + icon-button + theme-toggle icon styles — extracted from
   the shared global.css bundle (used by both the header and the footer)
   during the CSS modularization pass (Phase 1). Rules unchanged. */

.logo{display:flex;align-items:center;color:var(--heading);}

/* Sized from the real logo's own aspect ratio (530.19 × 335.4) —
     height is set, width follows automatically so it's never distorted. */
.logo-mark{height:48px;width:auto;flex-shrink:0;transition:height .3s ease;}

/* Two logo files, one shown at a time — same toggle pattern as the
     sun/moon icons below. The dark-mode file is purpose-drawn in
     white/orange rather than a CSS filter on the color mark, so it
     keeps its own contrast and accent instead of just being inverted. */
.logo-mark.logo-dark{display:none;}

:root[data-theme="dark"] .logo-mark.logo-light{display:none;}

:root[data-theme="dark"] .logo-mark.logo-dark{display:block;}

.icon-btn{background:none;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;color:var(--heading);border-radius:50%;-webkit-tap-highlight-color:transparent;}

.icon-btn:hover{color:var(--accent);}

/* Icon shows the mode a click switches TO, not the current mode —
     moon (switch to dark) in light mode, sun (switch to light) in dark. */
.icon-sun{display:none;}

.icon-moon{display:block;}

:root[data-theme="dark"] .icon-sun{display:block;}

:root[data-theme="dark"] .icon-moon{display:none;}


/* Header component — the fixed masthead: bar, compact-on-scroll state, logo sizing
   inside it, and the icon cluster on its right. Moved verbatim from the former
   monolithic style.css (Phase 1: structure only, no rule was edited).
   Shared primitives it relies on stay in styles/global.css: .wrap, .logo, .logo-mark,
   .icon-btn, .icon-sun/.icon-moon. */

  /* header — a persistent solid masthead on every page (not a
     transparent-over-photo bar). Reads more like a publication's fixed
     nameplate than a floating template header, and stays legible no
     matter what sits beneath it. Condenses slightly on scroll. */
  /* view-transition-name makes the browser treat #siteHeader as the
     *same* element continuing across a navigation (matched by this
     name on both the outgoing and incoming page) rather than cross-
     fading one copy out and another in — since the header sits in the
     identical spot on every page, the practical effect is that it
     just doesn't move or flash at all during a page change. */
  header{position:fixed;top:0;left:0;right:0;z-index:100;padding:22px 0;background:var(--bg-translucent);border-bottom:1px solid var(--border);transition:padding .3s ease;view-transition-name:site-header;}
  header[data-compact="true"]{padding:12px 0;}
  /* The assumption above only holds if the header is the *same size*
     on both pages. It often isn't: initHeaderScroll (main.js) shrinks
     the header once scrollY > 40, and every fresh navigation starts
     back at scrollY 0. So if you'd scrolled even slightly before
     clicking a nav link, the outgoing page's header snapshot is small
     (compact) and the incoming page's is full-size — same
     view-transition-name, different geometry. The browser's default
     behaviour for a matched name is to *morph* between the two
     captured states, i.e. visibly resize/snap the header during the
     navigation, not just cross-fade it. Zeroing out the browser's own
     group animation removes that resize tween — the header now just
     snaps straight to its correct size while the pixels underneath
     still cross-fade normally, instead of visibly growing/shrinking. */
  ::view-transition-group(site-header){animation:none;}
  /* Used only for the first frame on load (see initHeaderScroll in
     main.js) so the correct padding/logo-size state can be applied
     instantly, without animating in as a "pop", if the page loads
     already scrolled. */
  header[data-transition-ready="false"],header[data-transition-ready="false"] .logo-mark{transition:none !important;}

  /* Three-column grid with equal flanking columns (1fr / auto / 1fr) —
     the nav sits in the middle "auto" column and stays visually
     centered regardless of how much content is in the logo column vs
     the icon column, rather than drifting off-center the way a plain
     flex space-between layout does when the two ends are unequal
     widths. */
  .header-inner{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;column-gap:24px;}

  header[data-compact="true"] .logo-mark{height:38px;}

  /* Positioned + given a z-index so it paints above the nav drawer.
     Without this, the drawer (also position:fixed, so also promoted
     to its own paint layer) rendered on top of this static sibling
     once open — which is why the close (X) icon on the toggle button
     was invisible: the drawer itself was covering the button, not a
     display/icon problem. */
  .header-right{display:flex;align-items:center;gap:16px;justify-content:flex-end;position:relative;z-index:5;}

  /* Quiet separator so the social icons read as one group and the
     theme toggle as a distinct action next to them, instead of five
     icons blurring into a single row. */
  .header-icon-divider{width:1px;height:20px;background:var(--border);flex-shrink:0;}

  @media (max-width:980px){
    .header-right{gap:10px;}
    /* header-inner's desktop layout is a 3-column grid (logo / nav /
       icons) so the centered nav sits in its own track. At this
       breakpoint nav becomes a fixed-position drawer and no longer
       occupies that middle track in-flow, which left the grid
       splitting the remaining space 50/50 between the logo and
       header-right columns — visually centering the hamburger instead
       of docking it to the right edge. Flex with space-between avoids
       that: exactly two items, pinned to their respective edges. */
    .header-inner{display:flex;justify-content:space-between;align-items:center;}
    /* At tablet/mobile widths the theme toggle and social icons move
       into the nav drawer instead of sitting in the header row, where
       they were crowding the bar and blurring together with the
       hamburger. The header-right column then holds only the menu
       button, so it sits alone in the corner rather than as part of
       an icon row. */
    .header-right a.icon-btn,
    .header-right .theme-toggle-btn,
    .header-right .header-icon-divider{display:none;}
  }