/* ==========================================================================
   Header & Navigation
   --------------------------------------------------------------------------
   Styles the site header DOM emitted by `header.php` (post-LYC-214).
   Source of truth: designs/html/design-tokens.css (header layer, lines 179–235).
   DOM contract:
     .site-header > .header-inner
       .site-header__mark (brand lockup: .lyceum-symbol + .lyceum-wordmark + .site-header__mark-tagline)
       .nav-primary > .nav-primary-menu > li.menu-item > a
       .header-actions (.header-search-btn, .btn.btn-primary, .header-menu-btn)
   Tokens consumed from _tokens.css — do not redeclare here.
   ========================================================================== */

/* Skip-to-content link (REQ-40 / LYC-161). Visible on focus only. */
.skip-to-content {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 9999;
  padding: 8px 16px;
  background: var(--color-claret);
  color: var(--color-white);
  font-family: var(--font-ui);
  text-decoration: none;
}
.skip-to-content:focus,
.skip-to-content:focus-visible {
  left: 0;
  outline: 2px solid var(--color-claret);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Site header shell
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--color-quarter-white);
  border-bottom: var(--rule-width) solid var(--color-rule);
  backdrop-filter: saturate(1.1);
  -webkit-backdrop-filter: saturate(1.1);
}

.header-inner {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  padding: var(--space-4) var(--gutter);
  max-width: var(--container-wide);
  margin: 0 auto;
  min-height: 80px;
}

/* --------------------------------------------------------------------------
   Brand lockup (.site-header__mark)
   Emitted by lyceum_primary_mark_svg(): symbol + wordmark + tagline
   -------------------------------------------------------------------------- */
.site-header__mark {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
  color: var(--color-black);
}

.site-header__mark .lyceum-symbol {
  width: 40px;
  height: 33px;
  color: var(--color-claret);
  flex-shrink: 0;
}

.site-header__mark .lyceum-wordmark {
  height: 22px;
  max-width: 200px;
  width: auto;
}

.site-header__mark-tagline {
  display: block;
  font-family: var(--font-ui);
  font-style: italic;
  font-weight: 400;
  font-size: 12px;
  letter-spacing: 0.05em;
  color: var(--color-shuttle-gray);
  margin-top: 2px;
}

/* --------------------------------------------------------------------------
   Primary navigation (.nav-primary)
   Hidden below 1024px — mobile users hit the hamburger drawer instead.
   Note (2026-04-15 refactor): header.php now emits direct <a> children
   inside <nav class="nav-primary"> (plus a .dropdown wrapper around the
   Categories trigger — see _mega-menu.css). Legacy <ul class="nav-primary-menu">
   + <li class="menu-item"> selectors are preserved below for any future
   wp_nav_menu consumer that wants to reuse the same styling.
   -------------------------------------------------------------------------- */
.nav-primary {
  display: none;
  /* No position: relative here — the .mega-menu dropdown panel anchors to
     .site-header (position: sticky creates a positioning context) so the
     panel spans the full header width, not just the nav width. */
  /* align-self: stretch so .nav-primary fills .header-inner's 80px
     cross-axis height. This is what lets .dropdown inside also stretch
     to 80px (align-self: stretch on .dropdown resolves against its
     flex parent .nav-primary). Without this the dropdown hover zone is
     only ~40px tall (trigger height), leaving a 20px dead zone between
     the trigger and the mega-menu panel — the cursor exits :hover
     before it reaches the panel. */
  align-self: stretch;
  margin-left: auto;
  gap: var(--space-6);
  align-items: center;
}

@media (min-width: 1024px) {
  .nav-primary {
    display: flex;
  }
}

.nav-primary-menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: var(--space-6);
  align-items: center;
}

.nav-primary > a,
.nav-primary .dropdown > a.dropdown-trigger,
.nav-primary .menu-item > a,
.nav-primary-menu > li > a {
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-black);
  text-decoration: none;
  padding: 8px 0;
  border-bottom: 2px solid transparent;
  transition:
    border-color var(--dur-fast, 120ms) var(--ease-std, cubic-bezier(.2,.7,.2,1)),
    color var(--dur-fast, 120ms) var(--ease-std, cubic-bezier(.2,.7,.2,1));
}

.nav-primary > a:hover,
.nav-primary > a.is-active,
.nav-primary .dropdown > a.dropdown-trigger:hover,
.nav-primary .dropdown > a.dropdown-trigger.is-active,
.nav-primary .menu-item > a:hover,
.nav-primary .menu-item.current-menu-item > a,
.nav-primary .menu-item.current-menu-ancestor > a {
  border-color: var(--color-claret);
  color: var(--color-claret);
  text-decoration: none;
}

.nav-primary > a:focus-visible,
.nav-primary .dropdown > a:focus-visible,
.nav-primary .menu-item > a:focus-visible {
  outline: 2px solid var(--color-claret);
  outline-offset: 4px;
  border-radius: 2px;
}

/* --------------------------------------------------------------------------
   Header actions (search, Subscribe CTA, hamburger)
   -------------------------------------------------------------------------- */
.header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-left: auto;
}

@media (min-width: 1024px) {
  .header-actions {
    margin-left: 0;
  }
}

.header-search-btn,
.header-menu-btn {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  background: transparent;
  border: 0;
  color: var(--color-black);
  cursor: pointer;
  padding: 0;
  transition: color var(--dur-fast, 120ms) var(--ease-std, cubic-bezier(.2,.7,.2,1));
}

.header-search-btn:hover,
.header-menu-btn:hover {
  color: var(--color-claret);
}

.header-search-btn:focus-visible,
.header-menu-btn:focus-visible {
  outline: 2px solid var(--color-claret);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Hamburger: mobile-only — desktop nav replaces it at ≥1024px */
.header-menu-btn {
  display: grid;
}

@media (min-width: 1024px) {
  .header-menu-btn {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   Responsive utility: hide the Subscribe CTA on narrow viewports.
   The button itself carries the `.hide-mobile` class in header.php.
   -------------------------------------------------------------------------- */
.header-actions .hide-mobile {
  display: none;
}

@media (min-width: 1024px) {
  .header-actions .hide-mobile {
    display: inline-flex;
  }
}

/* ==========================================================================
   Header search (hotfix 2026-04-15)
   Disclosure pattern: <details><summary> = search icon button; opening
   reveals a pop-over with <input type="search"> + submit. CSS-only
   (no JS required) because <details> natively toggles.
   ========================================================================== */
.header-search {
  position: relative;
  display: inline-block;
}

.header-search > summary {
  list-style: none;
  cursor: pointer;
}
.header-search > summary::-webkit-details-marker { display: none; }
.header-search > summary::marker { content: ''; }

/* LYC-720: dropdown panel polish.
   - Claret 3px top border anchors the panel to the brand axis.
   - Eyebrow row reuses Archivo Narrow at 12px (UI font, uppercase, tracked).
   - Input bumped to 17px (above the 16px iOS-zoom floor) at 48px row height.
   - Input border 1px rule → 2px Claret on :focus / :focus-visible.
*/
.header-search__form {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  z-index: 60;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: var(--space-3);
  background: var(--color-quarter-white);
  border: var(--rule-width, 1px) solid var(--color-rule);
  border-top: 3px solid var(--color-claret);
  box-shadow: var(--shadow-2, 0 4px 12px rgba(4,5,3,0.08));
  min-width: 320px;
}

.header-search__eyebrow {
  flex-basis: 100%;
  display: block;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-shuttle-gray);
  margin-bottom: 2px;
}

.header-search__form input[type="search"] {
  flex: 1;
  padding: 12px 14px;
  border: var(--rule-width, 1px) solid var(--color-rule);
  background: var(--color-white);
  font-family: var(--font-body-serif);
  font-size: 17px;
  line-height: 1.2;
  min-height: 48px;
  border-radius: 0;
}
.header-search__form input[type="search"]:focus,
.header-search__form input[type="search"]:focus-visible {
  outline: none;
  border-color: var(--color-claret);
  border-width: 2px;
  /* Compensate the +1px border so the input doesn't visibly resize. */
  padding: 11px 13px;
}

/* LYC-720: mobile breakpoint moved 640 → 768 to match the standard
   tablet boundary used elsewhere in the theme. The dropdown still opens
   inline (CSS-only via native <details>), no off-canvas drawer. */
@media (max-width: 768px) {
  .header-search__form {
    position: fixed;
    left: var(--gutter, 16px);
    right: var(--gutter, 16px);
    top: 72px;
    min-width: auto;
  }
}

/* ---- WordPress Admin Bar offset (LYC-691) ----
   When a logged-in user views the front-end, WordPress prepends an admin bar
   that pushes the document down via `html { margin-top: 32px !important }`
   (or 46px on viewports < 783px). Our `position: sticky` site-header was
   sticking to viewport top: 0 and being overlapped by the admin bar.
   Mirror WP's own breakpoint to align the sticky offset.
*/
body.admin-bar .site-header {
  top: 32px;
}

@media screen and (max-width: 782px) {
  body.admin-bar .site-header {
    top: 46px;
  }
}

/* WP hides the admin bar entirely below 600px — ensure the header offset
   resets to 0 so we don't leave a gap at the top. */
@media screen and (max-width: 600px) {
  body.admin-bar .site-header {
    top: 0;
  }
}