/* GoBridalFund responsive overrides (spec §12.7). Loaded LAST by every layout and the Hugo
 * baseof. Rules apply only below 1200px, so desktop (1440) stays pixel-identical to the goldens.
 * Legacy CSS is never edited (ADR 0008). Each area owns its section; keep sections separate. */

/* ── shared ──────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  /* iOS zooms into inputs smaller than 16px */
  input[type=text], input[type=email], input[type=password], input[type=number], select, textarea { font-size: 16px; }
  img { max-width: 100%; height: auto; }
}

/* ── public fundraiser + thank-you (fundraiser layout) ───────────────────── */
@media (max-width: 1199px) {
  /* legacy inline style="width: 1200px" on #wrapper overflows below 1200 */
  body.wide > #wrapper { width: auto !important; max-width: 1200px; }
}
@media (max-width: 767px) {
  /* the shared img max-width rule above would shrink the legacy full-bleed hero (width:100vw) */
  .boxed-slider img { max-width: none; }
  /* long milestone names (e.g. "Accommodations") were clipped at 375 */
  #milestone-list .post-title h3 { overflow-wrap: break-word; word-wrap: break-word; }
  /* tap targets ≥ 44px; the overlay fits the viewport and scrolls only vertically */
  #show-donation-mobile, #process-donationMobile { min-height: 44px; }
  #mobile-payment { overflow-x: hidden !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch; }
  #cancel-donationMobile { display: inline-block; padding: 12px 16px; }
}

/* ── auth (login layout) ─────────────────────────────────────────────────── */
@media (max-width: 420px) {
  /* legacy login card overflowed 375px by 10px */
  .wrapper-page { width: auto !important; max-width: 100%; padding-left: 10px; padding-right: 10px; }
}
@media (max-width: 767px) {
  /* primary actions (Log In, Send Password Reset Email, Set New Password) ≥ 44px tap target */
  .wrapper-page .card-box .btn-block[type=submit] { min-height: 44px; }
}

/* ── wizard (setup layout) ───────────────────────────────────────────────── */
@media (max-width: 767px) {
  /* long fundraiser/dashboard URLs on the complete page must wrap instead of widening the page */
  .signup-signin-page .card-box p a, .signup-signin-page .card-box li a { overflow-wrap: anywhere; word-break: break-word; }
  /* primary actions: ≥ 44px tap targets (spec §12.7) */
  .signup-signin-page .btn-pink, #milestone-mobile, #submit-mobile { min-height: 44px; }
  /* modals fit the viewport */
  #type-select .modal-dialog, .daily-modal .modal-dialog, #edit-modal .modal-dialog { max-width: calc(100vw - 20px); }
  #type-select .modal-content img { max-width: 100%; height: auto; }
}

/* ── superadmin (superadmin layout, admin host) ──────────────────────────── */
/* Verified at 375/768/1024 (0px overflow): the dashboard tables scroll inside their cards via the
 * shared admin-table rule below, and the stat rows reflow with Bootstrap's own breakpoints, so no
 * superadmin-only overrides are needed yet. */

/* ── couple dashboard + superadmin (admin/superadmin layouts) ────────────── */
@media (max-width: 767px) {
  .card-box .table-responsive, .card-box > table.table { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  /* modals (milestone add/edit, user invite) stay inside a short phone viewport */
  .content-page .modal-dialog { margin: 10px; }
  .content-page .modal-content { max-height: calc(100vh - 20px); overflow-y: auto; }
  /* primary save buttons: 44px tap target */
  .content-page .btn-pink { min-height: 44px; }
  /* settings → design: theme tabs and the 175px swatches/pickers in narrow columns */
  .setup-design .tabs li.tab { height: 70px; }
  .setup-design .tab-pane { padding: 15px; }
  .setup-design .tab-pane .col-lg-4 { margin-bottom: 10px; }
}

/* ── marketing (Hugo) ────────────────────────────────────────────────────── */