/* Cub Scout Pack 62 — shared responsive styles.
   Pages are inline-styled (Claude Design export); this sheet only handles what
   inline styles can't: restacking layouts at phone widths. Overrides of inline
   styles require !important. Fluid type/gutters/symmetric grids are handled
   inline with clamp() and auto-fit. */

html { -webkit-text-size-adjust: 100%; }

/* FAQ questions: wrapped lines align with the question text, not the marker */
details > summary { padding-left: 24px; text-indent: -24px; }
details > summary > * { text-indent: 0; }

/* ---- header / nav ---- */
@media (max-width: 740px) {
  .site-header { gap: 8px !important; padding-top: 12px !important; padding-bottom: 12px !important; }
  .site-nav { margin-left: 0 !important; width: 100%; gap: 8px 18px !important; }
  .site-nav a { padding-top: 10px !important; padding-bottom: 10px !important; }
}

/* ---- home: at tablet the 3-item grids drop to 2 columns; let the orphaned
        third card/tile span the full row instead of leaving a hole ---- */
@media (min-width: 560px) and (max-width: 847px) {
  #what > div > :last-child { grid-column: 1 / -1; }
}

/* ---- footer + home visit card ---- */
@media (max-width: 720px) {
  .footer-grid { grid-template-columns: 1fr !important; gap: 26px !important; }
  .grid-visit { grid-template-columns: 1fr !important; gap: 24px !important; }
  footer a { padding: 5px 0; }
}

/* ---- long email CTAs may wrap on very narrow phones ---- */
@media (max-width: 420px) {
  a[href^="mailto:"] { white-space: normal !important; overflow-wrap: anywhere; text-align: center; }
  footer a[href^="mailto:"] { text-align: left; }
}

/* ---- number/image + text rows stack on phones ---- */
@media (max-width: 600px) {
  .grid-step { grid-template-columns: 1fr !important; gap: 12px !important; }
  .grid-rank { grid-template-columns: 1fr !important; }
  .grid-rank > img { margin: 0 auto; }
  .grid-season { grid-template-columns: 1fr !important; }
  .grid-media { grid-template-columns: 1fr !important; gap: 20px !important; }
  .grid-media > div:first-child { max-width: 220px; width: 100%; margin: 0 auto; box-sizing: border-box; }
}