/* ===== Math Hero Chronicles — shared responsive layer =====
   The pages are built with inline styles and no media queries.
   This sheet adapts them for tablet/mobile. Loaded on every page. */

/* Mobile menu toggle is hidden on desktop */
.mhc-navtoggle-label { display: none; }
button.mhc-navtoggle-label { font: inherit; color: inherit; }

/* ---------- Tablet ---------- */
@media (max-width: 1024px) {
  /* Ease the big viewport-width side padding */
  nav.mhc-nav { padding-left: 5vw !important; padding-right: 5vw !important; }
  /* 4- and 5-column grids → 2 columns */
  [style*="grid-template-columns:repeat(4"],
  [style*="grid-template-columns: repeat(4"],
  [style*="grid-template-columns:repeat(5"],
  [style*="grid-template-columns: repeat(5"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ---------- Phone ---------- */
@media (max-width: 768px) {
  /* Tame oversized horizontal padding everywhere it uses vw */
  [style*="7vw"] { padding-left: 22px !important; padding-right: 22px !important; }

  /* Collapse EVERY multi-column grid to a single column */
  [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }

  /* Two-pane hero/feature rows that use side-by-side flex → stack */
  .mhc-stack-sm { flex-direction: column !important; align-items: stretch !important; }

  /* Footer link rows: keep wrapping, center */
  footer [style*="space-between"] { flex-direction: column !important; gap: 14px !important; align-items: center !important; text-align: center !important; }

  /* ----- Mobile nav: hide desktop links, show hamburger ----- */
  nav.mhc-nav { flex-wrap: wrap !important; row-gap: 0 !important; }
  /* the desktop right-side cluster (links + Play Free) */
  nav.mhc-nav .mhc-navmenu {
    position: fixed !important; top: 64px; left: 0; right: 0;
    z-index: 9999 !important;
    flex-direction: column !important; align-items: stretch !important;
    gap: 0 !important;
    background: rgba(18,15,38,0.99);
    border-bottom: 1px solid rgba(255,255,255,0.1);
    box-shadow: 0 18px 40px -12px rgba(0,0,0,0.8);
    padding: 8px 22px 18px;
    max-height: 0 !important; overflow: hidden;
    transition: max-height .28s ease;
    backdrop-filter: blur(14px);
  }
  /* inner link group also stacks full-width */
  nav.mhc-nav .mhc-navmenu > div {
    flex-direction: column !important; align-items: stretch !important; gap: 0 !important;
  }
  nav.mhc-nav .mhc-navmenu a {
    padding: 13px 4px !important; border-bottom: 1px solid rgba(255,255,255,0.07);
    font-size: 16px !important;
  }
  /* the Play Free button: full width pill under the links */
  nav.mhc-nav .mhc-navmenu > a:last-child {
    text-align: center; margin-top: 14px; border-bottom: none !important; padding: 14px !important;
  }

  /* Show the hamburger button */
  .mhc-navtoggle-label {
    display: inline-flex !important; align-items: center; justify-content: center;
    width: 44px; height: 44px; cursor: pointer; border-radius: 11px;
    background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12);
    margin-left: auto;
  }
  .mhc-navtoggle-label span,
  .mhc-navtoggle-label span::before,
  .mhc-navtoggle-label span::after {
    content: ""; display: block; width: 20px; height: 2px; border-radius: 2px;
    background: #FFE390; position: relative; transition: transform .25s ease, opacity .2s ease;
  }
  .mhc-navtoggle-label span::before { position: absolute; top: -6px; }
  .mhc-navtoggle-label span::after  { position: absolute; top: 6px; }

  /* Open state — driven by a JS-toggled .mhc-open class on the nav (robust, no :checked specificity issues) */
  nav.mhc-nav.mhc-open .mhc-navmenu { max-height: 80vh !important; overflow-y: auto !important; }
  nav.mhc-nav.mhc-open .mhc-navtoggle-label span { background: transparent !important; }
  nav.mhc-nav.mhc-open .mhc-navtoggle-label span::before { transform: translateY(6px) rotate(45deg); }
  nav.mhc-nav.mhc-open .mhc-navtoggle-label span::after  { transform: translateY(-6px) rotate(-45deg); }

  /* Buttons / CTAs that sit in a row → wrap nicely */
  [style*="display:flex"][style*="gap"] { flex-wrap: wrap; }

  /* Prevent any element from forcing horizontal scroll */
  img, video { max-width: 100%; height: auto; }
}

/* Never allow sideways scroll on small screens */
@media (max-width: 768px) {
  html, body { overflow-x: hidden; }
}