/* ============================================================
   CAVES Wiki — mobile / responsive overrides
   The site is styled inline, so these rules rely on !important
   inside media queries to adapt the layout on small screens.
   Loaded by every page after the inline styles.
   ============================================================ */

/* ---------- Tablet & below: header flows with the page and wraps ---------- */
@media (max-width: 920px) {
  body { overflow-x: clip; }

  /* decorative crack SVGs sit at % offsets with fixed px sizes and can
     poke past the viewport on narrow screens — clip them at the edge */
  section, footer { overflow-x: clip; }

  /* the fixed header can't fit the wrapping nav in its 92px bar;
     let it sit in the page flow and grow instead */
  header { position: static !important; }

  header > div > div {
    height: auto !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 12px 16px !important;
    padding: 16px 14px 10px !important;
  }

  header nav {
    justify-content: center !important;
    gap: 8px !important;
  }
  header nav > a {
    padding: 9px 12px !important;
    font-size: 10px !important;
    letter-spacing: 1px !important;
  }
  /* vertical divider between the links and the CTA */
  header nav > span { display: none !important; }

  /* hero sections no longer need to clear a fixed header */
  section[data-screen-label$="Hero"] { margin-top: 26px !important; }
}

/* ---------- Phones: stack the hero comparison + explore grid ---------- */
@media (max-width: 840px) {
  /* index: the two keyart card columns inside the rock panel */
  .cw-hero-card {
    flex: 1 1 100% !important;
    min-width: 0 !important;
  }

  /* the glowing line + gem sit between the side-by-side cards;
     once the cards stack they'd cut straight through them */
  .cw-hero-divider { display: none !important; }

  /* rock panel: trim horizontal padding so the cards fit */
  [data-rk="heroPanel"] {
    padding-left: clamp(18px, 5vw, 42px) !important;
    padding-right: clamp(18px, 5vw, 42px) !important;
  }

  /* index: BIOMES / MISC / MOBS explore cards stack in one column */
  .cw-explore-grid {
    grid-template-columns: 1fr !important;
    grid-template-areas: 'biomes' 'misc' 'mobs' !important;
  }
}