/* =========================================================
   NTX Pinball — GAMES MEGA MENU (ntx-games-mega.css)
   - Styles ONLY for the "Our Games" mega dropdown + mobile drawer behavior
   - Goals:
     • 100% opaque popup
     • 50% viewport height (scrollable)
     • High-contrast era labels across ALL themes
     • 75% viewport width (requested)
     • Clean full-width gradient border (no “dead slivers” on left/right)
========================================================= */

:root{
  /* Solid popover background (theme can override). Must be OPAQUE. */
  --ntx-popover-bg: color-mix(in srgb, var(--ntx-bg) 94%, #000 6%);
  --ntx-ui-text: var(--ntx-text);
  --ntx-ui-muted: var(--ntx-muted);
  --ntx-ui-border: var(--ntx-border);

  /* Mega width target */
  --ntx-games-mega-w: min(75vw, 980px);
}

/* =========================================================
   MEGA MENU (desktop / normal)
========================================================= */

.ntx-games-mega,
.dropdown-menu.ntx-games-mega{
  --ntx-era-maxh: clamp(240px, 40vh, 380px);
  /* Layout */
  width: min(860px, 92vw);
  max-width: 100%;
  margin-top: 10px;

  /* Make it feel like a “real” 2025 mega menu */
  border-radius: 18px;
  border: 1px solid transparent;
  background:
    /* panel fill */
    linear-gradient(180deg,
      color-mix(in srgb, var(--ntx-popover-bg, var(--ntx-bg)) 92%, transparent),
      color-mix(in srgb, var(--ntx-popover-bg, var(--ntx-bg)) 82%, transparent)
    ) padding-box,
    /* subtle “sheen” ring */
    linear-gradient(135deg,
      color-mix(in srgb, var(--ntx-accent-1, var(--ntx-accent)) 55%, transparent),
      color-mix(in srgb, var(--ntx-accent-2, var(--ntx-accent)) 55%, transparent)
    ) border-box;

  box-shadow:
    0 18px 55px rgba(0,0,0,.35),
    0 2px 0 rgba(255,255,255,.04) inset;

  /* IMPORTANT: clip all gradients + inner panels cleanly to the rounded radius */
  overflow: hidden;

  /* Height management: container constrains, body scrolls */
  max-height: min(72vh, calc(100vh - var(--ntx-header-h, 96px) - 18px));
}

/* Old mask-based ring can “bleed” past radius in some environments.
   Keep selector, but disable it so nothing spills outside the corners. */
.dropdown-menu.ntx-games-mega::before{ content:none !important; }


/* Inner layout to allow sticky header + scroll body */
.ntx-games-mega__inner{
  display: flex;
  flex-direction: column;
  height: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* Top bar */
.ntx-games-mega__top{
  position: sticky;
  top: 0;
  z-index: 2;

  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;               /* prevents overflow at 75vw */
  min-width: 0;

  padding: 16px 18px 12px;
  border-bottom: 1px solid color-mix(in srgb, var(--ntx-ui-border) 85%, transparent);
  background: var(--ntx-popover-bg);
}

/* Title must be readable */
.ntx-games-mega__title{
  color: var(--ntx-ui-text) !important;
  font-weight: 900;
  letter-spacing: -0.01em;
  line-height: 1.1;
  min-width: 0;
}
.ntx-games-mega__title .small,
.ntx-games-mega__title .ntx-muted{
  color: var(--ntx-ui-muted) !important;
}

/* Links area (Where to play button) */
.ntx-games-mega__links{
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
  flex-wrap: wrap;
}

/* Scrollable body */
.ntx-games-mega__body{
  flex: 1 1 auto;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  padding: 10px 12px 14px;

  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}


/* Details cards */
.ntx-games-era{
  border: 1px solid color-mix(in srgb, var(--ntx-ui-border) 80%, transparent);
  border-radius: 16px;
  background: color-mix(in srgb, var(--ntx-popover-bg) 92%, transparent);
  overflow: hidden;
  box-sizing: border-box;
}

.ntx-games-era + .ntx-games-era{ margin-top: 10px; }

/* Summary (clickable row) */
.ntx-games-era__summary{
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;

  padding: 12px 14px;
  cursor: pointer;

  background: transparent;
  color: var(--ntx-ui-text);
}
.ntx-games-era__summary::-webkit-details-marker{ display:none; }

.ntx-games-era__summary:hover{
  background: color-mix(in srgb, var(--ntx-btn-mid) 14%, transparent);
}

/* ERA LABEL */
.ntx-games-era__label{
  color: var(--ntx-ui-text) !important;
  font-weight: 900;
  letter-spacing: .15px;
  text-shadow: 0 1px 0 rgba(0,0,0,.20);
  min-width: 0;
}

/* Content (game links) */
.ntx-games-era__content{
  padding: 10px 14px 14px;
  border-top: 1px solid color-mix(in srgb, var(--ntx-ui-border) 75%, transparent);
  max-height: var(--ntx-era-maxh);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.ntx-games-era__list{
  margin: 0;
  padding: 0;
  list-style: none;

  /* layout */
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;

  /* make the LIST be the scroll area */
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding-right: 10px;

  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-gutter: stable both-edges;
}

@media (min-width: 768px){
  .ntx-games-era__list{ grid-template-columns: 1fr 1fr; }
}

.ntx-games-era__link{
  display: block;
  padding: 8px 10px;
  border-radius: 12px;

  color: var(--ntx-ui-text) !important;
  font-weight: 700;

  /* Never spill out of the 75vw menu */
  overflow-wrap: anywhere;
  word-break: break-word;
}
.ntx-games-era__link:hover{
  background: color-mix(in srgb, var(--ntx-btn-mid) 18%, transparent);
  color: var(--ntx-ui-text) !important;
}
.ntx-games-era__link.is-active{
  background: color-mix(in srgb, var(--ntx-btn-mid) 28%, transparent);
  color: var(--ntx-ui-text) !important;
}

/* Focus accessibility */
.ntx-games-era__summary:focus-visible,
.ntx-games-era__link:focus-visible{
  outline: none;
  box-shadow: var(--ntx-focus);
}

/* Small screens: still keep it comfortable */
@media (max-width:576px){
  .ntx-games-mega{ --ntx-era-maxh: min(52vh, 340px); }
:root{ --ntx-games-mega-w: 75vw; }
  .ntx-games-mega,
  .dropdown-menu.ntx-games-mega{
    width: var(--ntx-games-mega-w);
    max-width: calc(100vw - 16px);
    max-height: 50vh;
  }
}

/* =========================================================
   MOBILE DRAWER SUPPORT (your new burger = same nav)
   - In collapsed+open mode, force dropdown menus to render IN-FLOW
     so they aren't clipped and taps work reliably.
========================================================= */

#ntxNavTheme.is-collapsed.is-open .dropdown-menu.ntx-games-mega{
  position: static !important;
  transform: none !important;
  inset: auto !important;
  margin-top: 8px !important;

  width: 100% !important;
  max-width: 100% !important;

  /* Constrain height so the drawer doesn't blow past the viewport */
  max-height: min(70vh, calc(100vh - var(--ntx-header-h, 96px) - 16px)) !important;

  /* Keep corners pristine; scrolling happens in .ntx-games-mega__body */
  overflow: hidden !important;
}

/* Let Bootstrap's .show decide visibility, but keep layout sane */
#ntxNavTheme.is-collapsed.is-open .dropdown-menu.ntx-games-mega:not(.show){
  display: none !important;
}
#ntxNavTheme.is-collapsed.is-open .dropdown-menu.ntx-games-mega.show{
  display: block !important;
}

/* =========================================================
   NTX OVERRIDES — Mega scroll + caret arrows
========================================================= */

/* Ensure mega scroll works everywhere (desktop + mobile + inside fixed drawer) */
.dropdown-menu.ntx-games-mega{
  overflow-y: auto !important;
  overscroll-behavior: contain;
  scrollbar-gutter: stable both-edges;
}

/* Make Games Mega chevrons match the main menu dropdown caret */
.ntx-games-era__chev{
  width: 14px !important;
  height: 14px !important;
  flex: 0 0 auto !important;
  position: relative !important;
  opacity: .92 !important;
  border: 0 !important;
}
.ntx-games-era__chev::before{
  content:"" !important;
  position:absolute !important;
  left: 50% !important;
  top: 50% !important;
  width: 0 !important;
  height: 0 !important;
  border-left: 6px solid transparent !important;
  border-right: 6px solid transparent !important;
  border-top: 7px solid color-mix(in srgb, var(--ntx-ui-text, var(--ntx-text)) 78%, transparent) !important;
  transform: translate(-50%,-35%) !important;
  transition: transform .18s ease !important;
}
details[open] > .ntx-games-era__summary .ntx-games-era__chev::before{
  transform: translate(-50%,-65%) rotate(180deg) !important;
}

/* ===== Allow dropdowns to escape the rounded header card ===== */
#ntxNavTheme,
#ntxNavTheme .ntx-navtheme__card,
#ntxNavThemePanel,
#ntxNavTheme .ntx-stripnav{
  overflow: visible !important;
}

/* Make sure the menu sits above header chrome */
#ntxNavTheme .dropdown-menu.ntx-games-mega{
  z-index: 3000 !important;
}


/* =========================================================
   NTX Mega Menus — Desktop Safety Net
   - If any JS/CSP/Bootstrap weirdness occurs, still show menus
   - Click-only opening (no hover)
========================================================= */
#ntxNavTheme:not(.is-collapsed) .dropdown-menu.ntx-games-mega{
  z-index: 5000;
}

/* Ensure the card/nav can "let menus out" */
#ntxNavTheme,
#ntxNavTheme .ntx-navtheme__card,
#ntxNavTheme #ntxNavThemePanel,
#ntxNavTheme .ntx-stripnav{
  overflow: visible;
}

/* Guarantee show-class always displays (even if Bootstrap CSS is missing/overridden) */
#ntxNavTheme .dropdown-menu.ntx-games-mega.show{
  display: block;
  opacity: 1;
  transform: none;
  pointer-events: auto;
}


/* =========================================================
   TOP-TIER MEGA MENU POLISH (2025)
   - Unified behavior desktop + drawer (no Bootstrap dependency)
   - Desktop: fixed-position floating panel, clamped to viewport
   - Drawer: in-flow expanding panel
========================================================= */

#ntxNavTheme .dropdown-menu.ntx-games-mega{
  /* Override any previous display:none rules */
  display: block !important;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px) scale(0.985);
  transition:
    opacity 160ms ease,
    transform 160ms ease,
    visibility 0s linear 160ms;

  position: fixed;
  top: 0;
  left: 0;
  z-index: 3000;
}

#ntxNavTheme .dropdown-menu.ntx-games-mega.show{
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
  transition-delay: 0s;
}

/* Active state on the trigger button for clear affordance */
#ntxNavTheme .dropdown > .dropdown-toggle.show{
  filter: brightness(1.05);
}

/* Drawer mode: menu becomes part of the flow */
#ntxNavTheme.is-collapsed .dropdown-menu.ntx-games-mega{
  position: static !important;
  transform: none !important;
  transition: none !important;
  top: auto !important;
  left: auto !important;
  visibility: hidden; /* only visible when .show is present */
  opacity: 0;
}

#ntxNavTheme.is-collapsed .dropdown-menu.ntx-games-mega.show{
  visibility: visible;
  opacity: 1;
}

/* Optional: slightly tighter spacing inside drawer */
#ntxNavTheme.is-collapsed.is-open .ntx-games-mega__inner{
  padding: 14px;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  #ntxNavTheme .dropdown-menu.ntx-games-mega{
    transition: none !important;
    transform: none !important;
  }
}

/* =========================================================
   ERA LIST SCROLL (per-era)
   - When an era (e.g., DMD) has more titles than fit,
     the list area becomes scrollable without growing the mega.
========================================================= */
.ntx-games-era__content{
  max-height: clamp(180px, 34vh, 340px);
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  padding-right: 6px; /* room for scrollbar so text doesn't kiss the edge */
}

/* Mobile: give the list more runway, since the drawer is already scrollable */
@media (max-width: 576px){
  .ntx-games-era__content{
    max-height: min(56vh, 520px);
  }
}


/* =========================================================
   BURGER MODE: make mega menus + inner era cards scroll reliably
   - Prevent the outer drawer from stealing scroll
   - Let the open dropdown own scrolling
========================================================= */
#ntxNavTheme.is-collapsed.is-open.has-open-dd .ntx-stripnav{
  overflow: hidden !important; /* stop the drawer itself from being the scroll container */
}

#ntxNavTheme.is-collapsed.is-open.has-open-dd .dropdown-menu.ntx-games-mega.show{
  /* Constrain the dropdown to the drawer height */
  max-height: var(--ntx-burger-drawer-h, 50vh) !important;
  overflow: hidden !important; /* inner areas handle scroll */
}

#ntxNavTheme.is-collapsed.is-open.has-open-dd .dropdown-menu.ntx-games-mega.show .ntx-games-mega__inner{
  max-height: inherit;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

#ntxNavTheme.is-collapsed.is-open.has-open-dd .dropdown-menu.ntx-games-mega.show .ntx-games-mega__body{
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  touch-action: pan-y;
  padding-right: 6px; /* space for scrollbar */
}

/* In drawer mode, tighten era card max-height so the LIST becomes the scroll focus */
#ntxNavTheme.is-collapsed.is-open.has-open-dd{
  --ntx-era-maxh: clamp(220px, 34vh, 420px);
}

#ntxNavTheme.is-collapsed.is-open.has-open-dd .ntx-games-era__content{
  /* Ensure the card itself stays visually clipped + the list gets the scrollbar */
  overflow: hidden;
}

#ntxNavTheme.is-collapsed.is-open.has-open-dd .ntx-games-era__list{
  /* Force the inner list to actually be the scroll area */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  touch-action: pan-y;
}