/* Desktop header + mega menus.
   Loaded last on every page with a .site-header so one file owns the PC nav.
   Below 1025px the existing mobile drawer takes over and nothing here applies
   except the chevron sizing. */

.nav-chevron {
  width: 12px;
  height: 12px;
  flex: 0 0 auto;
  opacity: 0.6;
  transition: transform 180ms ease, opacity 180ms ease;
}

@media (min-width: 1025px) {
  :root { --header-h: 4.25rem; }

  /* ---------- Bar ---------- */
  .site-header {
    background: rgba(9, 9, 12, 0.86);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    backdrop-filter: blur(18px) saturate(140%);
  }
  /* Compact bar once the page moves. Only the bar's own height changes;
     --header-h stays put so page layout and anchor offsets don't shift. */
  .site-header {
    transition:
      height 220ms cubic-bezier(0.23, 1, 0.32, 1),
      background-color var(--dur-med, 240ms) var(--ease-out, ease),
      border-color var(--dur-med, 240ms) var(--ease-out, ease);
  }
  .site-header.is-scrolled {
    height: 3.75rem;
    background: rgba(9, 9, 12, 0.95);
  }

  /* Brand left, links truly centred, actions right. */
  .site-header .header-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 1.5rem;
  }
  .site-header .brand {
    justify-self: start;
    gap: 0.6rem;
    font-size: 1.05rem;
    white-space: nowrap;
  }
  .site-header .brand-mark { height: 28px; }
  .site-header .header-nav { justify-self: center; }
  .site-header .header-actions {
    grid-column: 3;
    justify-self: end;
    gap: 0.5rem;
  }

  /* ---------- Top-level links ---------- */
  .site-header .nav-list { gap: 0.25rem; position: relative; }
  .site-header .nav-list > li { position: relative; z-index: 1; }

  /* Sliding pill (motion.js). Position/size are set inline; only transform,
     width and opacity animate. The first placement skips the transition. */
  .site-header .nav-list .nav-indicator {
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 0;
    width: 0;
    height: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.07);
    opacity: 0;
    pointer-events: none;
    will-change: transform, width;
  }
  .site-header .nav-indicator.is-ready {
    transition:
      transform 240ms cubic-bezier(0.23, 1, 0.32, 1),
      width 240ms cubic-bezier(0.23, 1, 0.32, 1),
      opacity 200ms ease,
      background-color 200ms ease;
  }
  .site-header .nav-indicator.is-active-tint { background: rgba(182, 154, 255, 0.13); }
  .site-header .nav-link {
    gap: 0.35rem;
    min-height: 38px;
    padding: 0 0.85rem;
    border-radius: 999px;
    color: #c3c1cb;
    font-size: 0.875rem;
    font-weight: 500;
    letter-spacing: 0;
    transition: color 150ms ease, background-color 150ms ease;
  }
  .site-header .nav-link::after { display: none; }
  .site-header .nav-link:hover,
  .site-header .nav-link[aria-expanded="true"] { color: #fff; }
  .site-header .nav-link.is-active { color: #e6ddff; }
  /* Backgrounds come from the sliding pill; without JS keep them per link. */
  .site-header:not(.has-nav-indicator) .nav-link:hover,
  .site-header:not(.has-nav-indicator) .nav-link[aria-expanded="true"] {
    background: rgba(255, 255, 255, 0.07);
  }
  .site-header:not(.has-nav-indicator) .nav-link.is-active {
    background: rgba(182, 154, 255, 0.13);
  }
  .site-header .nav-link[aria-expanded="true"] .nav-chevron {
    transform: rotate(180deg);
    opacity: 1;
  }
  .site-header .nav-caret {
    display: inline-block;
    margin-left: 0.08rem;
    color: #a5a2af;
    font-size: 0.9em;
    line-height: 1;
    transition: color 150ms ease, transform 150ms ease;
  }
  .site-header .mega-trigger[aria-expanded="true"] .nav-caret {
    color: #cdbbff;
    transform: rotate(180deg);
  }

  /* ---------- Actions ---------- */
  .site-header .header-cart-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    width: auto;
    min-width: 38px;
    height: 38px;
    padding: 0 0.65rem;
    border-radius: 999px;
    color: #c3c1cb;
    transition: color 150ms ease, background-color 150ms ease;
  }
  .site-header .header-cart-label { font-size: 0.875rem; font-weight: 500; }
  .site-header .header-cart-link:hover { color: #fff; background: rgba(255, 255, 255, 0.07); }
  .site-header .header-action-link {
    min-height: 38px;
    padding: 0 0.85rem;
    border-radius: 999px;
    color: #c3c1cb;
    font-size: 0.875rem;
  }
  .site-header .header-action-link::after { display: none; }
  .site-header .header-action-link:hover { color: #fff; background: rgba(255, 255, 255, 0.07); }
  .site-header .header-actions .btn-primary {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    min-height: 38px;
    padding: 0 1.1rem;
    border-radius: 999px;
    font-size: 0.875rem;
  }
  /* Light sheen across the violet button; sits under the label (z -1 inside
     the isolated button). */
  .site-header .header-actions .btn-primary::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(105deg, transparent 25%, rgba(255, 255, 255, 0.55) 50%, transparent 75%);
    transform: translateX(-120%) skewX(-20deg);
    pointer-events: none;
  }
  .site-header .header-actions .btn-primary:hover::after,
  .site-header .header-actions .btn-primary:focus-visible::after {
    animation: nav-sheen 600ms cubic-bezier(0.23, 1, 0.32, 1);
  }

  /* ---------- Mega panels ---------- */
  .site-header .mega-menu {
    top: 0.5rem;
    width: min(calc(100vw - 2 * var(--gutter)), 1000px);
    overflow: hidden;
    background: #121217;
    border: 1px solid rgba(226, 222, 242, 0.13);
    border-radius: 16px;
    box-shadow: 0 28px 70px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(0, 0, 0, 0.4);
    transform-origin: top center;
    transform: translateX(-50%) translateY(-6px) scale(0.985);
    transition:
      opacity 220ms cubic-bezier(0.23, 1, 0.32, 1),
      transform 220ms cubic-bezier(0.23, 1, 0.32, 1),
      visibility 0s linear 220ms;
  }
  .site-header .mega-menu.is-open {
    transform: translateX(-50%) translateY(0) scale(1);
    transition-delay: 0s;
  }
  /* Columns rise in one after another. The animation is keyed on .is-open so
     it replays on every open; when panels swap, the old one just fades. */
  .site-header .mega-menu.is-open .mega-col {
    animation: nav-col-in 260ms cubic-bezier(0.23, 1, 0.32, 1) both;
  }
  .site-header .mega-menu.is-open .mega-col:nth-child(2) { animation-delay: 40ms; }
  .site-header .mega-menu.is-open .mega-col:nth-child(3) { animation-delay: 80ms; }
  .site-header .mega-menu.is-open .mega-col:nth-child(n+4) { animation-delay: 120ms; }
  /* Hover bridge across the gap between bar and panel. */
  .site-header .mega-menu::before { height: 0.75rem; }
  .site-header .mega-menu--compact { width: 600px; }
  .site-header .mega-menu--more { width: min(calc(100vw - 2 * var(--gutter)), 1000px); }

  .site-header .mega-inner,
  .site-header #mega-game-hosting .mega-inner {
    grid-template-columns: repeat(3, minmax(0, 1fr)) 250px;
    gap: 0.25rem;
    padding: 1rem;
  }
  .site-header .mega-menu--compact .mega-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site-header .mega-menu--more .mega-inner { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .site-header .mega-col,
  .site-header .mega-col + .mega-col {
    padding: 0.5rem 0.25rem;
    border: 0;
  }
  .site-header .mega-title {
    margin: 0 0 0.4rem;
    padding: 0 0.75rem;
    color: #85838f;
    font-size: 0.68rem;
    letter-spacing: 0.09em;
  }
  .site-header .mega-list,
  .site-header #mega-game-hosting .mega-col:nth-child(1) .mega-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    column-count: auto;
  }
  .site-header .mega-link {
    gap: 0.15rem;
    padding: 0.55rem 0.75rem;
    border: 0;
    border-radius: 10px;
  }
  .site-header .mega-link:hover { background: rgba(255, 255, 255, 0.055); }
  .site-header .mega-link[aria-current="page"] { background: rgba(182, 154, 255, 0.12); }
  .site-header .mega-item-name {
    color: #ecebf1;
    font-size: 0.875rem;
    line-height: 1.3;
    transition: transform 180ms cubic-bezier(0.23, 1, 0.32, 1);
  }
  .site-header .mega-item-name::before { display: none; }
  /* Hover/focus affordance: name nudges right and an arrow fades in. */
  .site-header .mega-item-name::after {
    content: "\2192";
    display: inline-block;
    margin-left: 0.35em;
    opacity: 0;
    transform: translateX(-4px);
    transition: opacity 180ms ease, transform 180ms cubic-bezier(0.23, 1, 0.32, 1);
  }
  .site-header .mega-link:hover .mega-item-name,
  .site-header .mega-link:focus-visible .mega-item-name { transform: translateX(2px); }
  .site-header .mega-link:hover .mega-item-name::after,
  .site-header .mega-link:focus-visible .mega-item-name::after {
    opacity: 0.7;
    transform: translateX(0);
  }
  .site-header .mega-item-desc {
    color: #8d8b97;
    font-size: 0.75rem;
    line-height: 1.35;
  }
  .site-header .mega-link:hover .mega-item-name,
  .site-header .mega-link[aria-current="page"] .mega-item-name { color: #fff; }

  /* Featured card on the right of the wide panels. */
  .site-header .mega-featured { padding: 0; }
  .site-header .mega-featured-link {
    justify-content: flex-end;
    width: 100%;
    min-height: 100%;
    padding: 1.25rem;
    border: 1px solid rgba(196, 175, 255, 0.2);
    border-radius: 12px;
    /* Top layer is the cursor spotlight (motion.js sets --mx/--my on hover);
       the default sits off-card so nothing shows without JS or a pointer. */
    background:
      radial-gradient(180px circle at var(--mx, -400px) var(--my, -400px), rgba(255, 255, 255, 0.11), transparent 70%),
      radial-gradient(120% 90% at 100% 0%, rgba(154, 122, 245, 0.28), transparent 60%),
      #18161f;
    transition: border-color 150ms ease;
  }
  .site-header .mega-featured-link:hover { border-color: rgba(196, 175, 255, 0.45); }
  .site-header .mega-featured-tag {
    border-color: rgba(205, 187, 255, 0.3);
    background: rgba(154, 122, 245, 0.18);
    color: #dccfff;
  }
  .site-header .mega-featured-title { font-size: 1.15rem; }
  .site-header .mega-featured-desc { color: #a9a6b4; font-size: 0.8rem; }
  .site-header .mega-featured-cta { color: #d4c6ff; font-weight: 600; }
}

/* Page containers: several page stylesheets cap content at 1200px with their
   own side padding, so text started 20-50px to the right of the logo. Snap
   them all to the same box as the header so every page shares one edge. */
@media (min-width: 1025px) {
  .vm-main .container,
  .bm-main .container,
  .about-hero ~ .section .container,
  .mc-container,
  .mc-hero .mc-container,
  .dp-container,
  .vb-container,
  .vps-container {
    width: min(100% - 2 * var(--gutter), var(--container));
    max-width: none;
    margin-inline: auto;
    padding-inline: 0;
  }
}

/* Laptops: tighten spacing so the bar never wraps. home.css switched the
   homepage to the hamburger below 1100px; the shorter nav fits, so keep the
   desktop bar there like every other page. */
@media (min-width: 1025px) and (max-width: 1100px) {
  .mh-page .site-header .header-nav { display: flex; }
  .mh-page .site-header .header-actions .header-action-link { display: inline-flex; }
  .mh-page .site-header .nav-toggle { display: none; }
}
@media (min-width: 1025px) and (max-width: 1240px) {
  .site-header .nav-link { padding: 0 0.6rem; font-size: 0.84rem; }
  .site-header .header-action-link { padding: 0 0.6rem; }
  .site-header .header-inner { gap: 1rem; }
  .site-header .mega-inner,
  .site-header #mega-game-hosting .mega-inner { grid-template-columns: repeat(3, minmax(0, 1fr)) 210px; }
}

/* Mobile drawer: same groups as the desktop menus. The game list is longer
   than the drawer's old 500px expand limit, and group headings need styling. */
.mobile-nav-has-sub[aria-expanded="true"] .mobile-sub-list { max-height: 1000px; }
.mobile-sub-heading {
  padding: 0.85rem 0 0.25rem 0.75rem;
  color: #6e6c78;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.mobile-sub-list > li:first-child.mobile-sub-heading { padding-top: 0.35rem; }
/* main.js marks the <li> as expanded, not the button, so the "+" never
   turned into a minus. */
.mobile-nav-has-sub[aria-expanded="true"] > .mobile-sub-trigger::after { content: "\2212"; }

/* The pill only exists on the desktop bar. */
.site-header .nav-indicator { display: none; }

/* Keep the cart label legible in the compact desktop bar and the mobile header. */
.site-header .header-cart-link {
  width: auto;
  min-width: 2.3rem;
  gap: 0.4rem;
  padding-inline: 0.65rem;
}
.site-header .header-cart-label {
  color: inherit;
  font-size: 0.82rem;
  font-weight: 500;
  white-space: nowrap;
}

.btn:active { transform: scale(0.97); }

@keyframes nav-col-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
@keyframes nav-sheen {
  from { transform: translateX(-120%) skewX(-20deg); }
  to   { transform: translateX(120%) skewX(-20deg); }
}

@media (prefers-reduced-motion: reduce) {
  .nav-chevron,
  .site-header,
  .site-header .mega-menu,
  .site-header .nav-indicator,
  .site-header .mega-item-name,
  .site-header .mega-item-name::after { transition: none !important; }
  .site-header .mega-menu { transform: translateX(-50%) !important; }
  .site-header .mega-menu.is-open .mega-col,
  .site-header .header-actions .btn-primary::after { animation: none !important; }
  .site-header .mega-link:hover .mega-item-name,
  .site-header .mega-link:focus-visible .mega-item-name { transform: none; }
  .btn:active { transform: none; }
}