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

/* ----------------------------------------------------------------
   Menu Toggle
   Source: NAVIGATION-SYSTEM.md §Mobile Menu
   ---------------------------------------------------------------- */

.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. */

/* ----------------------------------------------------------------
   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).
   ---------------------------------------------------------------- */

/* ----------------------------------------------------------------
   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 {
  filter: brightness(0);
  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-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;
  }
}

/* Desktop ≥1280: restore the standard bar height (padding 20px 40px is
   owned by the desktop block above). */

/* ----------------------------------------------------------------
   Print
   ---------------------------------------------------------------- */
@media print {
  .story-mobile-menu,
.story-bottom-nav,
.story-footer {
    display: none !important;
  }
}
.story-footer-editorial { display:none !important; }
/* The footer utility rail remains baseline; only its former primary nav is removed. */
/* Category/archive keeps its existing header and media treatments. */

/* 1.1.66 — masthead geometry. This is the sole header layout authority.
   Panel grid and hero grid share the same 50% seam; no viewport offsets. */
.story-header {
  position: relative;
  width: 100%;
  z-index: var(--z-header);
  background: #111;
  color: #fff;
}
.story-home--lead-dark .story-header,
.story-article--hero-dark .story-header,
body.category .story-header {
  position: absolute;
  inset: 0 0 auto;
  background: transparent;
}
/* Category content keeps its existing edge-to-edge origin and light controls. */
body.category .story-header {color:#111;}
body.category .story-brand {--story-logo-invert:0;}
.story-header-bar {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0,1fr) 44px;
  align-items: center;
  gap: 24px;
  min-height: 88px;
  padding: 20px 24px;
}
.story-header-panel {
  display: grid;
  grid-template-columns: 128px minmax(0,1fr);
  align-items: center;
  gap: 24px;
  min-width: 0;
}
.story-brand {display:block;width:128px;height:36px;margin:0;}
.story-brand img {display:block;width:100%;height:100%;object-fit:contain;filter:brightness(0) invert(var(--story-logo-invert,1));}
.story-top-primary {min-width:0;}
.story-top-primary ul {display:flex;align-items:center;justify-content:center;gap:20px;list-style:none;margin:0;padding:0;}
.story-top-primary li {list-style:none;margin:0;padding:0;flex:0 0 auto;}
.story-top-primary a {display:block;padding:12px 0;font:var(--font-nav-weight) var(--font-nav-size)/var(--font-nav-leading) var(--story-font);letter-spacing:normal;text-transform:var(--font-nav-transform);text-decoration:none;white-space:nowrap;color:inherit;}
.story-top-primary a:hover,.story-top-primary a:focus-visible {text-decoration:underline;text-underline-offset:4px;}
.story-menu-toggle {display:none;width:44px;height:44px;padding:0;border:0;background:transparent;color:inherit;align-items:center;justify-content:center;}
.story-global-search {position:relative;justify-self:end;display:flex;flex-direction:row-reverse;align-items:center;width:40px;height:44px;margin:0;padding:0;border:0;overflow:hidden;color:inherit;}
.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;}
.story-global-search input {flex:1 1 auto;min-width:0;width:0;margin:0;padding:4px 0;border:0;background:transparent;color:inherit;opacity:0;font:400 14px/1.4 var(--story-font);}
/* Search opens below its control, leaving logo and all categories undisturbed. */
.story-global-search.is-open {position:absolute;right:24px;top:100%;width:min(280px,calc(100% - 48px));height:48px;padding:0 8px;background:#111;color:#fff;border-bottom:1px solid currentColor;z-index:3;}
.story-global-search.is-open input {width:100%;opacity:1;}
.story-global-search input::placeholder {color:inherit;}
@media (min-width:1280px) {
  /* Article: logo + menu occupy only the left hero panel. Search is right. */
  .story-article--hero-dark .story-header-bar {grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;}
  .story-article--hero-dark .story-header-panel {gap:20px;}
  .story-article--hero-dark .story-top-primary ul {justify-content:flex-start;}
  /* V12 home: brand stays left, categories and search share the right panel. */
  .story-header--home-right .story-header-bar {grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;}
  .story-header--home-right .story-header-panel {display:contents;}
  .story-header--home-right .story-brand {grid-column:1;grid-row:1;}
  .story-header--home-right .story-top-primary {grid-column:2;grid-row:1;padding-right:80px;}
  .story-header--home-right .story-global-search {grid-column:2;grid-row:1;}
}
@media (max-width:1279.98px) {
  .story-header-bar {grid-template-columns:44px minmax(0,1fr) 44px;gap:8px;min-height:70px;padding:10px 20px;}
  .story-header-panel {display:contents;}
  .story-brand {grid-column:2;grid-row:1;justify-self:center;width:108px;height:34px;}
  .story-top-primary {display:none;}
  .story-global-search {grid-column:1;grid-row:1;justify-self:start;}
  .story-menu-toggle {grid-column:3;grid-row:1;justify-self:end;display:flex;}
}
@media (max-width:480px) {
  .story-header-bar {min-height:62px;padding:9px 16px;}
  .story-brand {width:100px;height:32px;}
  .story-global-search.is-open {left:16px;right:16px;width:auto;}
}
/* Overlay retains its existing controller and focus/scroll behaviour. */
html body.story-menu-open .story-header {z-index:calc(var(--z-menu) + 1);background:#fff;color:#111;}
html body.story-menu-open .story-brand img {filter:brightness(0);}
@media print {.story-header {display:none;}}