/* ================================================================
   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: 44px 1fr 44px;
  align-items: center;
  padding: 20px;
  gap: 12px;
}

/* ----------------------------------------------------------------
   Menu Toggle
   Source: NAVIGATION-SYSTEM.md §Mobile Menu
   ---------------------------------------------------------------- */
.story-menu-toggle {
  grid-column: 1;
  justify-self: start;
  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);
}

/* ----------------------------------------------------------------
   Brand / Logo
   Source: NAVIGATION-SYSTEM.md §Logo
   Mobile: centred, ~22px wide
   Desktop: left-aligned, 128px min-width
   ---------------------------------------------------------------- */
.story-brand {
  grid-column: 2;
  justify-self: center;
  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: 3;
  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;
}

/* ----------------------------------------------------------------
   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);
}

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