/* =========================================================
   USOP FAQ – Mobile Responsiveness Overrides
   Safe: only affects smaller viewports, desktop unchanged.
   ========================================================= */

/* ---------- Base improvements (small devices) ---------- */
@media (max-width: 900px) {

  /* Prevent horizontal scroll on small screens */
  html, body { overflow-x: hidden; }

  /* Topbar: allow wrapping and better spacing */
  .usop-topbar__inner {
    flex-wrap: wrap;
    gap: 10px;
  }

  /* Brand area: wrap nicely */
  .usop-brand {
    min-width: 240px;
    flex: 1 1 320px;
  }

  /* Actions: wrap buttons, avoid overflow */
  .usop-actions {
    flex: 1 1 320px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-start;
  }

  /* Buttons: slightly smaller to fit */
  .usop-btn {
    padding: 10px 12px;
    font-size: 14px;
    line-height: 1.1;
    white-space: nowrap;
  }

  /* Hero: stack layout */
  .usop-hero__inner {
    display: grid;
    grid-template-columns: 1fr !important;
    gap: 12px;
  }

  /* Hero typography scaling */
  .usop-h1 {
    font-size: clamp(26px, 6vw, 38px);
    line-height: 1.08;
  }

  .usop-sub {
    font-size: 16px;
    line-height: 1.4;
  }

  /* Pills: wrap and reduce size */
  .usop-pillRow {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  .usop-pill {
    font-size: 13px;
    padding: 8px 10px;
  }

  /* Panels: reduce padding */
  .usop-panel {
    padding: 14px !important;
  }

  /* Two-column grids -> single column */
  .usop-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  /* Rule cards: stack cleanly */
  .usop-ruleCards {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  /* Stats grid: go to 2 columns */
  .usop-statGrid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }

  /* Steps: stack, improve tap/scan */
  .usop-steps {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .usop-step {
    align-items: flex-start !important;
  }

  /* FAQ question buttons: larger touch targets */
  .usop-q {
    padding: 14px 14px !important;
    font-size: 16px !important;
    line-height: 1.25 !important;
  }

  .usop-a {
    padding: 12px 14px !important;
    font-size: 15px !important;
    line-height: 1.45 !important;
  }
}

/* ---------- Extra-small phones ---------- */
@media (max-width: 520px) {

  /* Stats: 1 column on very small screens */
  .usop-statGrid {
    grid-template-columns: 1fr !important;
  }

  /* Topbar actions: full-width buttons */
  .usop-actions .usop-btn {
    flex: 1 1 auto;
  }

  /* Slightly tighter panel padding */
  .usop-panel { padding: 12px !important; }

  /* Footer spacing */
  .usop-footer { padding: 14px !important; }
}

/* ---------- iOS zoom-prevention for inputs (if you ever add forms) ---------- */
@media (max-width: 520px) {
  input, select, textarea, button { font-size: 16px; }
}