/* ─────────────────────────────────────
   Primary Topics Bar + Mega Menu (Option B)
   ───────────────────────────────────── */

/* Bar container acts as positioning context */
.primary-topics-bar { position: relative; z-index: 50; background:#fff; border-bottom:1px solid #ececec; }
.primary-topics-bar .topics-inner { position: relative; max-width:1200px; margin:0 auto; padding:0 .75rem; }

.primary-topics-bar .topics-list{
  display:flex; align-items:center; gap:.25rem;
  list-style:none; margin:0; padding:.5rem 0; position:relative;
  overflow-x:auto; -webkit-overflow-scrolling:touch;  /* keep scroll for tiny screens */
}
.primary-topics-bar a,
.primary-topics-bar .mega-trigger{
  display:block; padding:.55rem .8rem;
  border-radius:.5rem; text-decoration:none; line-height:1;
  color:#222; background:transparent; border:0; font:inherit; cursor:pointer;
}
.primary-topics-bar a:hover,
.primary-topics-bar .mega-trigger:hover{ background:#f6f8fb; }

/* Active tab styling (optional) */
.primary-topics-bar .mega-trigger.is-active {
  background:#eef4ff;
  outline: 0;
}

/* Host list item (trigger) */
.topics-mega{ position: static; } /* panel is outside the <ul> */

/* ── Mega panel (outside the <ul>) ─────────────────────── */
.mega-menu-panel{
  position:absolute;
  left:50%;
  top:100%;                    /* sits under the bar */
  width:100vw;                 /* full viewport width */
  transform:translateX(-50%);  /* center to viewport */
  background:#fff;
  border-top:1px solid #eee;
  box-shadow:0 10px 24px rgba(0,0,0,.08);
  padding:2rem 1rem;
  z-index:9999;
  margin-top: 0; /* already set, but ensure no margins on siblings */

  /* hidden by default; JS toggles [hidden] + .mega-open */
  opacity:0; visibility:hidden; translate:0 10px;
  transition:opacity .18s ease, translate .18s ease;
}
.mega-open{ opacity:1; visibility:visible; translate:0 0; }

/* Grid + columns */
.mega-grid{
  max-width:1200px; margin:0 auto;
  display:grid; gap:2rem; grid-template-columns:repeat(4,1fr);
}
.mega-col h3{ margin:0 0 .5rem; font-size:1rem; font-weight:600; color:#111; }
.mega-col ul{ list-style:none; margin:0; padding:0; }
.mega-col a{ display:block; padding:.35rem 0; color:#333; text-decoration:none; transition:color .2s ease; }
.mega-col a:hover{ color:#0073e6; }
.new{ font-size:.7rem; font-weight:700; color:#e60023; margin-left:.25rem; text-transform:uppercase; }

/* Responsive */
@media (max-width: 900px){ .mega-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px){ .mega-grid{ grid-template-columns: 1fr; } }

/* Motion safety */
@media (prefers-reduced-motion: reduce){ .mega-menu-panel{ transition:none; } }

/* USA panel = 4 columns (with sensible fallbacks) */
.usa-grid { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 1024px){ .usa-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 900px){  .usa-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px){  .usa-grid { grid-template-columns: 1fr; } }

/* Reserve space on the WRAPPER so height doesn’t double */
.ad-slot { display:block; width:100%; text-align:center; position:relative; }

/* LB / LBBB wrapper guards (970x250/728x90/320x100) */
.ad-slot.-lb { min-height:250px; }

/* MREC example */
.ad-slot.-mrec { min-height:250px; max-width:336px; margin:0 auto; }

.gam-responsive-container[hidden] { display:none !important; }