/*
 * Header shell: sticky bar, branding, primary nav, dropdown, mobile
 * toggle. Extracted verbatim from the original style.css. Named
 * "header-shell" (not "header.css") to avoid colliding with the
 * existing assets/css/header.css module (Sprint 1's scroll-state /
 * dark-mode-toggle-adjacent behavior), which is relocated wholesale
 * into layout/ under its own name rather than merged into this file —
 * see DESIGN_SYSTEM.md for the full file map.
 *
 * @package TFGadgets
 */

/* =====================================================
   HEADER
===================================================== */
.site-header{
  position:sticky; top:0; z-index:var(--z-header);
  background:rgba(18,17,19,0.92);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 24px;
  gap:24px;
}
.site-branding .site-title{
  font-family:var(--font-display);
  font-size:26px;
  letter-spacing:0.01em;
  margin:0;
}
.site-branding .site-title a{ display:flex; align-items:baseline; gap:8px; }
.site-branding .site-title .mark{ color:var(--accent); font-family:var(--font-mono); }
.site-branding .site-description{
  font-family:var(--font-mono);
  font-size:11px;
  color:var(--text-faint);
  letter-spacing:0.08em;
  text-transform:uppercase;
  margin-top:2px;
}
.primary-nav ul{ display:flex; gap:28px; flex-wrap:wrap; }
.primary-nav li{ position:relative; }
.primary-nav a{
  font-family:var(--font-mono);
  font-size:12.5px;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--text-muted);
  padding:6px 0;
  border-bottom:1px solid transparent;
  transition:color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard);
}
.primary-nav a:hover{ color:var(--accent); border-color:var(--accent); }
.primary-nav .sub-menu{
  display:none;
  position:absolute; top:100%; left:0; z-index:var(--z-dropdown);
  flex-direction:column; gap:0;
  min-width:180px;
  background:var(--bg-card);
  border:1px solid var(--line-strong);
  padding:6px 0;
  margin-top:12px;
}
.primary-nav li:hover > .sub-menu,
.primary-nav li:focus-within > .sub-menu{ display:flex; }
.primary-nav .sub-menu a{
  display:block; padding:9px 16px; border-bottom:0; font-size:11.5px;
}
.primary-nav .sub-menu a:hover{ background:var(--bg-alt); }
.primary-nav .menu-item-has-children > a::after{ content:' \25BE'; font-size:9px; opacity:.7; }
.menu-toggle{
  display:none;
  background:none; border:1px solid var(--line-strong); color:var(--text);
  font-family:var(--font-mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase;
  padding:8px 12px; cursor:pointer;
}