/* ============================================================
   Ringan Fitness Foundation — shared mobile / responsive layer
   Loaded AFTER Bootstrap and after each page's own <style>, so
   these rules win without needing !important everywhere.
   ============================================================ */

/* ── 1. Bootstrap gutter mismatch ────────────────────────────
   .row.g-5 sets --bs-gutter-x:3rem, giving -24px side margins,
   but .container only pads 12px. That 12px difference is what
   pushed every footer past the viewport edge on phones.
   Cap the gutter on small screens so margins match the padding. */
@media (max-width: 991.98px) {
  .row.g-5  { --bs-gutter-x: 1.5rem; }
  .row.gx-5 { --bs-gutter-x: 1.5rem; }
}

/* Belt-and-braces: nothing may create a horizontal scrollbar. */
html { overflow-x: hidden; }
body { overflow-x: hidden; max-width: 100%; }
img, svg, video, canvas { max-width: 100%; height: auto; }

/* ── 2. Comfortable tap targets ──────────────────────────────
   Apple/Android guidance is ~44px. Padding rather than height so
   text stays vertically centred and nothing gets clipped. */
@media (max-width: 767.98px) {
  .footer-links a,
  .navbar-nav .nav-link,
  .mob-nav a {
    display: block;
    padding-top: 10px;
    padding-bottom: 10px;
    line-height: 1.4;
  }
  .btn, .btn-nav-join, .btn-nav-login, .btn-cta,
  .btn-primary-gold, .btn-outline-white, .btn-join-team, .btn-gold {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  input, select, textarea {
    min-height: 44px;
    /* 16px prevents iOS Safari from zooming the page on focus */
    font-size: 16px !important;
  }
}

/* ── 3. Footer stacks cleanly instead of cramped 2-ups ───────── */
@media (max-width: 575.98px) {
  footer { padding: 48px 0 28px; }
  footer .row > [class*="col-"] { margin-bottom: 4px; }
  .footer-tag { max-width: 100%; }
  .footer-col-title { margin-bottom: 12px; }
  .footer-bot { text-align: center; }
  .footer-copy { font-size: 12.5px; line-height: 1.6; }
}

/* ── 4. Partner logo strip ───────────────────────────────────
   Smaller tiles and a faster loop so the belt still reads as
   motion on a narrow screen. */
@media (max-width: 575.98px) {
  .partner-tile { width: 124px; height: 78px; padding: 9px; border-radius: 13px; }
  .partner-track { gap: 12px; animation-duration: 38s; }
  .partner-strip::before, .partner-strip::after { width: 44px; }
}

/* ── 5. Honour / committee cards ─────────────────────────────── */
@media (max-width: 575.98px) {
  .honour-card { padding: 16px; border-radius: 18px; }
  .honour-title { font-size: 15px; }
  .dir-list { grid-template-columns: 1fr; }
  .dir-lead { flex-direction: column; text-align: center; }
}

/* ── 6. Wide content must scroll inside itself, never the page ── */
.table-responsive-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
@media (max-width: 767.98px) {
  table { font-size: 13px; }
  .roster-table th, .roster-table td { padding: 10px 12px; white-space: nowrap; }
}

/* ── 7. Headline scaling ─────────────────────────────────────── */
@media (max-width: 575.98px) {
  .page-title  { font-size: clamp(24px, 7vw, 32px); line-height: 1.2; }
  .section-title { font-size: clamp(22px, 6.5vw, 30px); line-height: 1.25; }
  .cta-hl { font-size: clamp(24px, 7vw, 34px); }
  .nd-title { font-size: clamp(22px, 6.5vw, 30px); }
  .stat-num { font-size: clamp(26px, 8vw, 34px); }
  .section-sub, .page-sub { font-size: 14.5px; }
}

/* ── 8. Event / activity cards ───────────────────────────────── */
@media (max-width: 575.98px) {
  .evt-footer, .act-footer { padding: 16px 18px; }
  .evt-header, .act-body { padding-left: 18px; padding-right: 18px; }
  .join-actions { flex-direction: column; }
  .join-actions > form, .join-actions .btn-join-team { width: 100%; }
}

/* ── 9. Auth pages (login / register) ────────────────────────── */
@media (max-width: 767.98px) {
  .auth-page { grid-template-columns: 1fr; }
  .auth-left { display: none; }
  .auth-right { padding: 24px 16px; }
  .reg-form-box, .auth-form-box { width: 100%; max-width: 100%; margin: 0 auto; }
  .form-grid { grid-template-columns: 1fr; gap: 0; }
}

/* ── 10. Respect reduced-motion for the whole site ───────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}