/* Greybox Phase 1 — floating glass navbar system.
 * Layout: transparent logo (left) + glass pill cluster (right),
 * matching the 7Movies-style reference: logo floats bare over the hero,
 * nav links + search live inside a single high-transparency pill.
 * Pill metrics/glass/motion are ported 1:1 from the 7movies.ac topbar
 * (desktop): 46px capsule (4px pad + 36px tabs + 1px border), diagonal
 * white→dark gradient + blur(14px) saturate(130%), 34px icon discs with
 * 17px glyphs, and the signature sliding indicator
 * (.nav-indicator: transform+width @ .38s cubic-bezier(.22,1,.36,1)).
 * The header lifts -8px after 120px of downward scroll (@ .28s same ease)
 * and reappears on any upward scroll — see js/navbar.js.
 * All route/search IDs are preserved — styling only (Collections is no
 * longer a navbar entry: no header dropdown, no dock button/panel). */

.gx-header {
  /* Floating overlay: removed from document flow so it never reserves a
     header band or pushes the hero down — the hero starts at the viewport
     top and extends behind this panel. Stays pinned while scrolling via
     fixed positioning.
     z-index 40 sits above the hero (z 1) but deliberately below the
     modal/player overlays (z 50), so popups still cover the nav. */
  position: fixed;
  top: 14px;
  left: 0;
  right: 0;
  z-index: 40;
  padding: 0;
  /* Fully transparent wrapper: no wash behind anything, so the hero
     poster/trailer stays maximally visible. Readability comes from the
     hero's own top scrim (see css/hero.css .gx-hero-shade) + logo
     text-shadow + the pill's own glass. */
  background: transparent;
  /* 7movies: the whole bar glides up 8px when tucked away (.is-hidden,
     toggled by js/navbar.js after 120px of accumulated down-scroll).
     NOTE: no will-change here — the fixed mobile dock lives inside this
     header, and a permanent transform-containing block would re-anchor it. */
  transition: transform .28s cubic-bezier(.22, 1, .36, 1);
}

.gx-header.is-hidden { transform: translateY(-8px); }

.gx-header-inner {
  /* Same column as .gx-page: the 3% gutter pair + auto margins, so the
   * logo and the nav pill line up with the card rows below the hero. */
  max-width: calc(var(--gx-content-max) + 2 * var(--gx-gutter));
  margin: 0 auto;
  padding: 0 var(--gx-gutter);
  box-sizing: border-box;
  min-width: 0;
}

/* ——— transparent bar shell ———
 * The bar itself is now invisible: just a flex row that pushes the bare
 * logo left and the glass pill right. No background / border / blur here,
 * so the hero shows straight through between them. */
.gx-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-width: 0;
  max-width: 100%;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* ——— right-side glass pill (nav + divider + icons) ———
 * 7movies desktop capsule verbatim (palette keeps our neutral black in the
 * dark stop): 46px tall = 1px border + 4px pad + 36px tab row, diagonal
 * white→dark gradient over the blur, 1px white/22 border, double inset
 * highlight, 0 14px 38px drop shadow. Lighter than the old flat 42% black:
 * the sheen runs white/13 → white/3.5 across the pill. */
.gx-bar-right {
  position: relative;
  display: flex;
  align-items: center;
  gap: 2px;
  min-width: 0;
  flex: none;
  max-width: 100%;
  padding: 4px;
  border-radius: var(--gx-radius-pill);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.035) 42%, rgba(10, 11, 15, 0.84));
  background-clip: padding-box;
  border: 1px solid rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(14px) saturate(130%);
  -webkit-backdrop-filter: blur(14px) saturate(130%);
  box-shadow: 0 14px 38px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.2), inset 0 -1px 0 rgba(255, 255, 255, 0.05);
}

/* Scrolling never changes the glass (7movies keeps it constant); the bar
 * only glides via .gx-header.is-hidden — see the header rules above. */

/* Graceful fallback where backdrop-filter is unavailable */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .gx-bar-right { background: rgba(18, 18, 26, 0.9); }
  .gx-dock { background: rgba(18, 18, 26, 0.97); }
}

/* Mobile band: backdrop blur is disabled site-wide (tokens.css glass-off
 * rule) — a fixed capsule over scrolling content re-blurs its backdrop
 * every frame. Bump the fill to near-opaque so the capsule keeps the
 * glass read without the per-frame cost. Desktop (>=860px) unchanged. */
@media (max-width: 859px) {
  .gx-bar-right {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.035) 42%, rgba(18, 18, 26, 0.96));
  }
}

/* ——— logo — pure wordmark (7movies-style lockup, no icon tile) ——— */
.gx-logo {
  display: inline-flex;
  align-items: center;
  flex: none;
  padding: 8px 4px;
  font-family: 'Space Grotesk', system-ui, -apple-system, sans-serif;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.045em;
  color: var(--gx-text);
  text-decoration: none;
  white-space: nowrap;
  background: transparent;
  border: 0;
  transition: opacity 180ms ease;
}

.gx-logo:hover { opacity: 0.86; }

/* colour + gloss live in style.css (.gx-wordmark-text / .gx-wordmark-accent) */

/* Shared .nav-btn base (desktop pill + bottom dock). The dock inherits
 * shape/cursor/transition from here and overrides metrics in .gx-dock
 * below; the desktop pill re-metrics everything under .gx-nav. */
.nav-btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--gx-radius-pill);
  min-height: 44px;
  color: rgba(244, 243, 238, 0.7);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.01em;
  padding: 0 20px;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--gx-transition), color var(--gx-transition), border-color var(--gx-transition);
}

.nav-btn:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
}

/* Dock/desktop both paint the solid off-white active pill from here; the
   desktop pill overrides background to transparent (the sliding indicator
   paints it instead) in the .gx-nav block below. */
.nav-btn.active {
  color: #0b0b10;
  background: #f4f3ee;
  border-color: transparent;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

/* ——— desktop nav (inside the pill) ——— */
.gx-nav {
  position: relative;
  z-index: 1;
  display: none;
  align-items: center;
  gap: 2px;
  min-width: 0;
  background: transparent;
}

@media (min-width: 860px) {
  .gx-nav { display: inline-flex; }
}

/* 7movies tab metrics: 74×36 slots, 13px/700, idle white/82 → paper on
 * hover with NO transition (all perceived motion is the sliding indicator;
 * the color snap is the reference behavior). Scoped under .gx-nav so the
 * bottom dock keeps its own icon-over-label language. */
.gx-nav .nav-btn {
  justify-content: center;
  min-height: 36px;
  min-width: 74px;
  padding: 0 12px;
  font-size: 13px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.82);
  transition: none;
}

.gx-nav .nav-btn:hover {
  color: #f3f0ea;
  background: transparent;
}

/* The indicator span paints the white pill (js/navbar.js slides + resizes
 * it); the button itself stays transparent so only ONE white shape moves. */
.gx-nav .nav-btn.active {
  color: #0b0b10;
  background: transparent;
  box-shadow: none;
}

.gx-nav .nav-btn.active:hover { color: #0b0b10; }

/* ——— sliding indicator (7movies .nav-indicator, verbatim timing) ———
 * Absolutely positioned inside .gx-bar-right (the pill's padding box) so
 * it can also reach the icon column later if needed. JS sets width +
 * translate3d(); CSS centers it vertically and owns the easing. Hidden
 * (opacity 0, width 0) whenever no desktop tab is active — search and
 * settings keep their own disc states instead. */
.nav-indicator {
  position: absolute;
  top: 50%;
  left: 0;
  width: 0;
  height: 36px;
  margin-top: -18px;
  border-radius: 999px;
  background: #f4f3ee;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
  opacity: 0;
  pointer-events: none;
  transform: translate3d(0, 0, 0);
  transition: transform .38s cubic-bezier(.22, 1, .36, 1),
              width .38s cubic-bezier(.22, 1, .36, 1),
              opacity .2s ease;
  will-change: transform, width;
}

.nav-indicator.is-on { opacity: 1; }

/* My List count — restrained amber (desktop pill); the dock badge reuses it
   with a compact absolute position (see #mylist-count-dock below). */
#mylist-count,
#mylist-count-dock {
  display: inline-block;
  margin-left: 6px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  padding: 3px 7px;
  border-radius: var(--gx-radius-pill);
  color: var(--gx-accent-strong);
  background: var(--gx-accent-soft);
  border: 1px solid var(--gx-accent-border);
}

.nav-btn.active #mylist-count,
.nav-btn.active #mylist-count-dock {
  color: #0b0b10;
  background: rgba(0, 0, 0, 0.1);
  border-color: rgba(0, 0, 0, 0.12);
}

#mylist-count.hidden,
#mylist-count-dock.hidden { display: none; }

/* Divider between nav links and the icon group (7moves: 1×20 white/20) */
.gx-nav-divider {
  display: none;
  flex: none;
  width: 1px;
  height: 20px;
  margin: 0 8px;
  background: rgba(255, 255, 255, 0.2);
}

@media (min-width: 860px) {
  .gx-nav-divider { display: block; }
}

/* navbar search is an icon button now: .gx-search-btn lives in css/search.css
 * (already 7moves-spec: 34px disc, 17px glyph, lift hover, white disc active) */

/* ——— icon group inside the capsule (7moves .nav-action) ———
 * Shared 34px disc rhythm for Discord / Search / Settings with 17px
 * glyphs — matches .gx-search-btn in search.css and the reference exactly:
 * idle #aaa, hover lifts 1px into a white/16 halo. Settings is the LAST
 * control (rightmost) and flips to the white disc + dark glyph while
 * /settings is the current route (same state as search). */
.gx-icon-btn {
  display: grid;
  place-items: center;
  flex: none;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #aaa;
  text-decoration: none;
  cursor: pointer;
  transition: transform .22s cubic-bezier(.22, 1, .36, 1),
              color .22s ease,
              background-color .22s ease;
}

.gx-icon-btn svg {
  width: 17px;
  height: 17px;
  display: block;
}

.gx-icon-btn:hover {
  transform: translate3d(0, -1px, 0);
  color: #f3f0ea;
  background: rgba(255, 255, 255, 0.16);
}

.gx-icon-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.45);
}

/* Settings: white disc + dark glyph while the /settings route is current
 * (7moves active-action state — same treatment as the search magnifier;
 * the old accent-gold fill is gone). */
.gx-settings-btn.is-active {
  color: #0b0b10;
  background: #f4f3ee;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.gx-settings-btn.is-active:hover {
  color: #0b0b10;
  background: #f4f3ee;
}

/* ——— Discord — shares the 34px icon rhythm (7moves: monochrome idle,
 * neutral white/16 halo on hover, no brand wash inside the pill) ———
 * It is an <a>, not a button. */
.gx-discord-btn {
  display: grid;
  place-items: center;
  flex: none;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #aaa;
  text-decoration: none;
  cursor: pointer;
  transition: transform .22s cubic-bezier(.22, 1, .36, 1),
              color .22s ease,
              background-color .22s ease;
}

.gx-discord-btn svg {
  width: 17px;
  height: 17px;
  display: block;
}

.gx-discord-btn:hover {
  transform: translate3d(0, -1px, 0);
  color: #f3f0ea;
  background: rgba(255, 255, 255, 0.16);
}

.gx-discord-btn:active {
  background: rgba(255, 255, 255, 0.22);
}

.gx-discord-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.45);
}

/* ——— mobile dock — OMEGA-style floating bottom pill (replaces the old
 * hamburger drawer; there is no #nav-toggle anymore). Always visible below
 * 860px (CSS-only visibility, no JS open/close), centered over the page
 * bottom with safe-area padding, sharing the pill's glass language. It
 * lives inside #site-header, so the header's fixed positioning + z-40
 * stacking keep it above the hero and below modal/player overlays (z-50). */
.gx-dock {
  position: fixed;
  left: 50%;
  bottom: max(12px, env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  z-index: 40;
  width: calc(100% - 24px);
  max-width: 560px;
  padding: 6px;
  border-radius: var(--gx-radius-pill);
  background: rgba(18, 18, 26, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.12);
  /* Perf: deliberately NO backdrop-filter. The dock is fixed over scrolling
   * content on the mobile band, so blur(24px) was recomputed every frame
   * during scroll (see the <=859px glass-off rule in tokens.css). A
   * near-opaque fill keeps the glass read without the per-frame cost. */
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

/* JS can still hide it (legacy safety: .hidden), and desktop hides it. */
.gx-dock.hidden { display: none; }

@media (min-width: 860px) {
  .gx-dock { display: none; }
}

/* Clearance so the fixed dock never covers the footer's last line. */
@media (max-width: 859px) {
  body { padding-bottom: calc(86px + env(safe-area-inset-bottom, 0px)); }
}

/* Dock items: icon over label, equal columns (OMEGA dock language). */
.gx-mobile-nav {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 2px;
  min-width: 0;
}

.gx-dock .nav-btn {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-height: 52px;
  padding: 6px 2px;
  font-size: 9.5px;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: 0.01em;
  text-align: center;
  white-space: normal;
  overflow: hidden;
  color: rgba(244, 243, 238, 0.62);
}

.gx-dock .nav-btn svg {
  width: 18px;
  height: 18px;
  flex: none;
}

.gx-dock .nav-btn:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
}

.gx-dock .nav-btn.active {
  color: #0b0b10;
  background: #f4f3ee;
  border-color: transparent;
}

/* My List badge floats at the item's top-right instead of taking a row */
#mylist-count-dock {
  position: absolute;
  top: 6px;
  left: calc(50% + 5px);
  margin: 0;
  font-size: 9px;
  padding: 2px 5px;
}

/* Tight screens: keep the pill compact, logo stays bare */
@media (max-width: 859px) {
  .gx-header-inner { padding: 0 12px; }
  .gx-bar-right {
    /* Search is an icon button now (css/search.css): the capsule hugs its
       actions instead of stretching to hold a removed input. */
    flex: 0 1 auto;
    justify-content: flex-end;
    min-width: 0;
  }
}

@media (max-width: 420px) {
  .gx-header { top: 10px; }
  .gx-header-inner { padding: 0 10px; }
  .gx-bar { gap: 10px; }
  .gx-logo { font-size: 18px; padding: 8px 2px; }
  .gx-bar-right { padding: 5px; }
  /* icons stay at the 34px/17px reference rhythm even on phones */
  .gx-dock .nav-btn { font-size: 9px; gap: 2px; }
}

@media (prefers-reduced-motion: reduce) {
  .nav-indicator, .gx-header, .nav-btn, .gx-discord-btn, .gx-icon-btn { transition: none; }
  .gx-discord-btn:hover, .gx-icon-btn:hover { transform: none; }
}