/* ================================================================
   STORY Magazine G2 — Global Shell
   Phase 3 — Global Shell
   Implements: NAVIGATION-SYSTEM.md, FOOTER-SYSTEM.md
   ================================================================= */

/* ----------------------------------------------------------------
   Header
   Source: NAVIGATION-SYSTEM.md §Top Bar
   Position: static (not fixed)
   ---------------------------------------------------------------- */
.story-header {
  position: static;
  width: 100%;
  background: transparent;
}

.story-header-bar {
  display: grid;
  grid-template-columns: auto 1fr 44px; /* POLISH: auto brand column so logo sits LEFT; toggle moved to col 3 (right) */
  align-items: center;
  padding: 20px;
  gap: 12px;
}

/* ----------------------------------------------------------------
   Menu Toggle
   Source: NAVIGATION-SYSTEM.md §Mobile Menu
   ---------------------------------------------------------------- */
.story-menu-toggle {
  grid-column: 3; /* POLISH: menu trigger aligned right */
  grid-row: 1; /* POLISH: pin to row 1 so the grid never wraps (DOM order is toggle→brand→search) */
  justify-self: end;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
}

.story-menu-icon,
.story-menu-icon::before,
.story-menu-icon::after {
  display: block;
  width: 20px;
  height: 2px;
  background: currentColor;
  content: "";
  transition:
    transform var(--duration-compact-menu) var(--ease-in-out),
    background-color var(--duration-compact-menu) var(--ease-in-out);
}

.story-menu-icon {
  position: relative;
}

.story-menu-icon::before {
  position: absolute;
  top: -6px;
  left: 0;
}

.story-menu-icon::after {
  position: absolute;
  top: 6px;
  left: 0;
}

/* Open state (X) */
.story-menu-toggle[aria-expanded="true"] .story-menu-icon {
  background: transparent;
}

.story-menu-toggle[aria-expanded="true"] .story-menu-icon::before {
  transform: translateY(6px) rotate(45deg);
}

.story-menu-toggle[aria-expanded="true"] .story-menu-icon::after {
  transform: translateY(-6px) rotate(-45deg);
}

/* POLISH: While the mobile drawer is open, raise the header above the
   overlay (--z-menu: 39) so the X-state toggle stays visible and clickable.
   Dark-hero headers flip to ink so the white drawer backdrop does not hide
   the brand or the X. */
html body.story-menu-open .story-header {
  z-index: calc(var(--z-menu) + 1);
  color: var(--color-text);
}

html body.story-menu-open .story-brand img {
  filter: none;
}

/* ----------------------------------------------------------------
   Brand / Logo
   Source: NAVIGATION-SYSTEM.md §Logo
   Mobile: centred, ~22px wide
   Desktop: left-aligned, 128px min-width
   ---------------------------------------------------------------- */
.story-brand {
  grid-column: 1; /* POLISH: logo LEFT-aligned (was centred in col 2) */
  grid-row: 1; /* POLISH: pin to row 1 so the grid never wraps (DOM order is toggle→brand→search) */
  justify-self: start;
  display: block;
  width: 94px;
  height: 27px;
}

.story-brand img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* ----------------------------------------------------------------
   NOTE (STAGING-NAV-DEFECT-002): `.story-primary-nav` existed here.
   The top editorial nav was removed globally from header.php — the
   primary menu is owned by the fixed bottom rail (.story-footer-editorial,
   desktop ≥1280) and the fixed .story-bottom-nav (mobile/tablet).
   ---------------------------------------------------------------- */

/* ----------------------------------------------------------------
   Search
   Source: NAVIGATION-SYSTEM.md §Search
   Expands from button-only width to button + 166px input
   Duration: 0.4s
   ---------------------------------------------------------------- */
.story-global-search {
  grid-column: 2; /* POLISH: sits between left brand and right toggle */
  grid-row: 1;
  justify-self: end;
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  width: 40px;
  overflow: hidden;
  border-bottom: 1px solid transparent;
  transition:
    width var(--duration-search-expand) var(--ease-in-out),
    border-color var(--duration-search-expand) var(--ease-in-out);
}

.story-global-search.is-open {
  width: 210px;
  border-color: currentColor;
}

.story-global-search.is-open input {
  width: 166px;
  opacity: 1;
}

.story-global-search input {
  flex: 1 1 auto;
  min-width: 0;
  width: 0;
  padding: 4px 0;
  border: 0;
  background: transparent;
  outline: 0;
  font: var(--font-nav-weight) var(--font-nav-size)/var(--font-nav-leading) var(--story-font);
  opacity: 0;
  transition:
    width var(--duration-search-input) ease,
    opacity var(--duration-search-input) ease;
  /* SOURCE: MOTION-SYSTEM.md §Search Form — input reveal 0.3s ease,
     opacity + width; measured width 0 → 166px (09-MOTION.md). */
}

.story-global-search button {
  flex: 0 0 40px;
  width: 40px;
  height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font-size: 20px;
  line-height: 1;
}

/* ----------------------------------------------------------------
   Mobile Menu Overlay
   Source: NAVIGATION-SYSTEM.md §Mobile Menu, 04-NAVIGATION.md §Compact menu
   Motion: translateX(-100%) → translateX(0), 300ms ease-in-out
   Reduced motion: opacity only, 100ms
   ---------------------------------------------------------------- */
.story-mobile-menu {
  position: fixed;
  inset: 0;
  z-index: var(--z-menu);
  padding: calc(var(--story-header) + 32px) var(--bounded-gutter) 30px;
  background: var(--color-bg);
  overflow-y: auto;
  transform: translateX(-100%);
  transition: transform var(--duration-compact-menu) var(--ease-in-out);
}

.story-mobile-menu.is-open {
  transform: translateX(0);
}

.story-mobile-menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.story-mobile-menu a {
  display: block;
  padding: 12px 0;
  font: var(--font-weight-light) clamp(28px, 9vw, 48px)/1.1 var(--story-font);
  text-decoration: none;
  color: var(--color-text);
}

.story-mobile-menu-primary a {
  /* Large mobile menu items per EE72: 40px / 300 */
  font-size: clamp(32px, 8vw, 40px);
}

.story-mobile-menu-secondary {
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid var(--color-border-subtle);
}

.story-mobile-menu-secondary a {
  font-size: 18px;
  font-weight: var(--font-weight-normal);
}

/* ----------------------------------------------------------------
   Bottom Navigation
   Source: NAVIGATION-SYSTEM.md §Bottom Navigation Bar
   Fixed bottom, scroll show/hide
   Height: 64px mobile / 64px tablet / 90px desktop
   Links: 14px / 300 / 16px / uppercase
   ---------------------------------------------------------------- */
.story-bottom-nav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-bottom-nav);
  height: var(--bottom-nav-height-mobile);
  background: var(--color-bg);
  transform: translateY(0);
  transition: transform var(--duration-bottom-nav) var(--ease-in-out);
}

.story-bottom-nav.is-hidden {
  transform: translateY(100%);
}

.story-bottom-nav ul {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  height: 100%;
  list-style: none;
  margin: 0;
  padding: 0;
}

.story-bottom-nav a {
  display: block;
  padding: var(--nav-link-py) 0;
  font: var(--font-nav-weight) var(--font-nav-size)/var(--font-nav-leading) var(--story-font);
  text-transform: var(--font-nav-transform);
  text-decoration: none;
  color: var(--color-text);
}

.story-bottom-nav a:hover,
.story-bottom-nav a:focus {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

/* ----------------------------------------------------------------
   Footer / Closing Rail
   Source: FOOTER-SYSTEM.md
   Desktop: fixed bottom, 90px, logo + links
   Mobile/Tablet: in-flow (not fixed), appears below content
   ---------------------------------------------------------------- */
.story-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  height: var(--story-footer);
  padding: 0 var(--story-gutter);
  background: var(--color-bg);
}

.story-footer-brand {
  display: block;
  flex: 0 0 auto;
  width: 76px;
  height: 24px;
}

.story-footer-brand img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.story-footer-nav ul {
  display: flex;
  align-items: center;
  gap: 20px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.story-footer-nav a {
  display: block;
  padding: var(--nav-link-py-lg) 0;
  font: var(--font-nav-weight) var(--font-nav-size)/var(--font-nav-leading) var(--story-font);
  /* Footer's own link group (About/Contact/Privacy/Terms) is NOT primary navigation:
     FOOTER-SYSTEM.md §Footer Typography specifies Nav Links 14/300/16 — keep 300 while
     --font-nav-weight (primary nav) is 500 per TYPOGRAPHY-SYSTEM "Nav Link Medium". */
  font-weight: var(--font-weight-light);
  text-transform: var(--font-nav-transform);
  text-decoration: none;
  color: var(--color-text);
}

.story-footer-nav a:hover,
.story-footer-nav a:focus {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

/* EE76: contain footer-nav overflow into a horizontal scroll model.
   Root cause: .story-footer is flex space-between with a fixed brand
   (76px) + gap:20px + .story-footer-nav sizing to its content width
   (four links = 270px at mobile; 366px total needed). Below ~406px
   viewports the nav's flex basis (auto) cannot shrink, so the row
   overflows the right gutter and escapes the page (overflow-x:visible
   on the footer, measured doc scroll 386 vs client 375 at 390). Give
   the nav min-width:0 and turn its ul into an overflow-x:auto
   container — the approved EE75 strip pattern — so the row clips
   internally instead of stretching the document. Inert when content
   fits (≥768): no visual change. */
.story-footer-nav {
  min-width: 0;
  flex: 0 1 auto;
}

.story-footer-nav ul {
  justify-content: flex-start;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}

.story-footer-nav ul::-webkit-scrollbar {
  display: none;
}

/* ----------------------------------------------------------------
   Rail editorial group (all templates, desktop only)
   Source: FOOTER-SYSTEM.md (Closing Rail)
   Page: STAGING-NAV-DEFECT-002
   The primary menu relocated to the fixed bottom rail at ≥1280.
   Hidden below 1280, where the fixed .story-bottom-nav owns primary.
   ---------------------------------------------------------------- */
.story-footer-editorial {
  display: none;
}

.story-footer-editorial ul {
  display: flex;
  align-items: center;
  gap: 20px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.story-footer-editorial a {
  display: block;
  padding: var(--nav-link-py-lg) 0;
  font: var(--font-nav-weight) var(--font-nav-size)/var(--font-nav-leading) var(--story-font);
  text-transform: var(--font-nav-transform);
  text-decoration: none;
  color: var(--color-text);
}

.story-footer-editorial a:hover,
.story-footer-editorial a:focus {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

/* ----------------------------------------------------------------
   Responsive
   ---------------------------------------------------------------- */

/* Tablet */
@media (min-width: 640px) {
  .story-bottom-nav {
    height: var(--bottom-nav-height-tablet);
  }
}

/* Desktop */
@media (min-width: 1280px) {
  .story-header-bar {
    grid-template-columns: auto 1fr auto;
    padding: 20px 40px;
  }

  .story-menu-toggle {
    display: none;
  }

  .story-brand {
    grid-column: 1;
    justify-self: start;
    width: 128px;
    height: 36px;
  }

  .story-global-search {
    grid-column: 3;
  }

  .story-mobile-menu {
    display: none !important;
  }

  /* Bottom nav hidden on desktop — replaced by fixed footer */
  .story-bottom-nav {
    display: none;
  }

  .story-footer {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: var(--z-footer);
    height: var(--bottom-nav-height-desktop);
    padding: 0 var(--bounded-gutter-small-desktop);
    /* STAGING-NAV-DEFECT-003: rail owns direction-scroll at ≥1280.
       Mirror .story-bottom-nav tokens (0.5s ease-in-out translate). */
    transform: translateY(0);
    transition: transform var(--duration-bottom-nav) var(--ease-in-out);
  }

  .story-footer.is-hidden {
    transform: translateY(100%);
  }

  .story-footer-editorial {
    display: block;
    margin-right: auto;
  }

  .story-footer-brand {
    width: 96px;
    height: 30px;
  }
}

/* ----------------------------------------------------------------
   Reduced Motion
   ---------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .story-mobile-menu {
    transform: none;
    opacity: 0;
    transition: opacity 100ms ease;
  }

  .story-mobile-menu.is-open {
    opacity: 1;
  }
}

/* ----------------------------------------------------------------
   Dark hero context
   When body has .story-home--lead-dark, invert header controls
   so they remain visible over the black hero panel.
   ---------------------------------------------------------------- */
.story-home--lead-dark .story-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-header);
  color: var(--color-text-inverted);
}

.story-home--lead-dark .story-brand img {
  filter: brightness(0) invert(1);
}

.story-article--hero-dark .story-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-header);
  color: var(--color-text-inverted);
}

.story-article--hero-dark .story-brand img {
  filter: brightness(0) invert(1);
}

/* EE73: compact the hero-dark article header band on mobile/tablet. The
   default 20px bar padding plus the 44px menu row resolves to an 84-85px
   band at 390 (measured), against the 66px band the category page renders
   at the same width. Pin the dark-hero bar to the same 66px below 80rem
   without touching the brand, icons, search, or the ≥1280 desktop bar. */
@media (max-width: 79.999rem) {
  .story-article--hero-dark .story-header-bar {
    height: 66px;
    padding: 0 20px;
  }
}

/* Desktop ≥1280: restore the standard bar height (padding 20px 40px is
   owned by the desktop block above). */
@media (min-width: 80rem) {
  .story-article--hero-dark .story-header-bar {
    height: auto;
  }
}

/* EE77: compact the homepage dark-hero header band on sub-desktop, mirroring
   the EE73 article band. Root cause: front-page renders .story-home--lead
   behind the absolute .story-home--lead-dark header (above), but the home
   bar kept its full 85px mobile padding band (20 + 44 + 20) while the lead
   copy kept 64px padding-top — at 390 the H1 top (64px) sits 21px UNDER the
   header band bottom (85px), so the headline's first line crowds the
   logo/search row on real iPhone. Pin home to the same approved 66px band
   below 80rem; controls (logo/search/toggle), the ≥1280 desktop bar (height
   auto reset), and the desktop homepage layout remain unchanged. */
@media (max-width: 79.999rem) {
  .story-home--lead-dark .story-header-bar {
    height: 66px;
    padding: 0 20px;
  }
}

@media (min-width: 80rem) {
  .story-home--lead-dark .story-header-bar {
    height: auto;
  }
}

/* ----------------------------------------------------------------
   Print
   ---------------------------------------------------------------- */
@media print {
  .story-header,
  .story-mobile-menu,
  .story-bottom-nav,
  .story-footer {
    display: none !important;
  }
}