/**
 * Oxford-Metro Analytics — oma-mobile.css  v1.0
 * Comprehensive mobile responsiveness fixes for all pages.
 * Applied after all other stylesheets. Does not change colors, logo, or brand identity.
 *
 * Breakpoints:
 *   820px — tablet / nav collapse
 *   640px — mobile
 *   480px — small mobile
 *   380px — very small (iPhone SE)
 */

/* ════════════════════════════════════════════════════
   0. GLOBAL OVERFLOW GUARD
   ════════════════════════════════════════════════════ */
html, body {
  overflow-x: hidden;
  max-width: 100%;
}

img {
  max-width: 100%;
  height: auto;
}

/* ════════════════════════════════════════════════════
   1. NAVIGATION
   ════════════════════════════════════════════════════ */

/* On tablet/mobile the live pill is too wide and crowds the nav.
   Hide at 820px where hamburger takes over. */
@media (max-width: 820px) {
  .oma-live-pill {
    display: none !important;
  }
  .oma-nav {
    padding: 0 16px;
    gap: 8px;
  }
}

/* On very small screens also hide the "See Latest Polls" button —
   it's reachable via the mobile menu. */
@media (max-width: 480px) {
  .oma-btn-vote-nav {
    display: none !important;
  }
  .oma-nav {
    padding: 0 14px;
    height: auto;
    min-height: 52px;
  }
  .oma-logo {
    font-size: 16px;
  }
}

/* Mobile menu — full width, no horizontal overflow */
.oma-mobile-menu {
  width: 100%;
  overflow-x: hidden;
  box-sizing: border-box;
}

@media (max-width: 820px) {
  .oma-mobile-menu a,
  .oma-mobile-menu .oma-mob-nl,
  .oma-mobile-menu ul li a {
    padding: 14px 18px;
    font-size: .82rem;
  }
  .oma-mv-cta {
    margin: 8px 16px 12px;
    display: block;
    text-align: center;
    padding: 12px 16px;
    font-size: .78rem;
  }
}

/* Global banner — wrap cleanly on very small screens */
@media (max-width: 380px) {
  .oma-global-banner__inner {
    padding: 8px 14px;
    gap: 4px;
  }
  .ogb-message__text { font-size: 10px; }
  .ogb-counter__text { font-size: 9px; }
}

/* Cred strip */
@media (max-width: 380px) {
  .oma-cred-strip__text {
    font-size: 9px;
    letter-spacing: 0;
    white-space: normal;
    text-align: left;
  }
}


/* ════════════════════════════════════════════════════
   2. HOMEPAGE
   ════════════════════════════════════════════════════ */

@media (max-width: 640px) {
  .oma5-hero { padding-top: 20px; }
  .oma5-hero__eyebrow { font-size: .55rem; gap: 6px; }
  .oma5-hero__headline { font-size: clamp(1.6rem, 6.5vw, 2rem); line-height: 1.12; }
  .oma5-hero__sub { font-size: .8rem; line-height: 1.6; }
  .oma5-statbar { flex-wrap: wrap; gap: 0; }
  .oma5-stat { min-width: 48%; }
  .oma5-sec__title { font-size: clamp(1.3rem, 5vw, 1.7rem); line-height: 1.15; }
  .oma5-zgrid { grid-template-columns: 1fr; gap: 10px; }
  .oma5-zgrid--rich { grid-template-columns: 1fr; gap: 10px; }
  .oma5-zcard--rich { padding: 14px; }
}

@media (max-width: 480px) {
  .oma5-cgrid { grid-template-columns: repeat(2, 1fr); gap: 7px; }
  .oma5-ccard__name { font-size: 10.5px; line-height: 1.3; }
  .oma5-ccard__party { font-size: 9px; }
  /* Vote bars stack */
  .oma5-vbar { flex-direction: column; align-items: stretch; gap: 6px; }
  .oma5-vbar__who { min-width: 0; width: 100%; }
  .oma5-vbar__track { width: 100%; }
  .oma5-vbar__btn { width: 100%; text-align: center; }
}

@media (max-width: 380px) {
  .oma5-hero__headline { font-size: 1.5rem; }
  .oma5-stat { min-width: 100%; }
  .oma5-cgrid { grid-template-columns: repeat(2, 1fr); gap: 5px; }
  /* No fixed height override at 380px — aspect-ratio handles it (see below) */
  .oma5-ccard__name { font-size: 9.5px; }
}

/* ── CANDIDATE PHOTO FIX: aspect-ratio instead of fixed pixel heights ──────
 *
 * Root cause of cut-off faces:
 *   On a 375px phone with a 2-column grid, each card is ~163px wide.
 *   A fixed height of 80–92px makes the photo container very wide and flat
 *   (163px × 80px ≈ 2:1 ratio), so object-fit:cover crops off the top of
 *   the head to fill the short squat box — even with object-position:center 18%.
 *
 * Fix: use aspect-ratio so the photo scales with card width.
 *   75% = 4:3 ratio → 163px wide → ~122px tall  (portrait safe)
 *   The 200×200 and 800×800 portraits are square, so 4:3 shows the full face
 *   with comfortable headroom and shoulder space. height:auto lets the browser
 *   compute the actual rendered height from the container's width.
 *
 * object-position: center 12% — moves crop point slightly higher than the
 *   previous 18% to prevent the forehead being clipped when the container
 *   is taller than 18% of the image height.
 * ──────────────────────────────────────────────────────────────────────── */

/* Homepage candidate cards */
@media (max-width: 640px) {
  .oma5-ccard__photo {
    height: auto !important;       /* override all fixed px heights */
    aspect-ratio: 1 / 1;           /* square container — same as source images */
  }
  .oma5-ccard__photo img {
    object-position: center 10%;   /* show crown of head → chin, not forehead → neck */
  }
}

/* Vote page candidate cards */
@media (max-width: 640px) {
  .vp-ccard__photo {
    height: auto !important;
    aspect-ratio: 1 / 1;
  }
  .vp-ccard__photo img {
    object-position: center 10%;
  }
}

/* Leaderboard — hide party on mobile */
@media (max-width: 600px) {
  .oma5-lb { overflow-x: hidden; }
  .oma5-lb__party,
  .oma5-lb__hdr span:nth-child(3),
  .oma5-lb__row > span:nth-child(3) { display: none; }
  .oma5-lb__row { padding: 9px 12px; gap: 8px; }
  .oma5-lb__name { font-size: .75rem; }
  .oma5-lb__votes { font-size: .85rem; }
}

/* State scoreboard filter tabs — horizontal scroll if needed */
@media (max-width: 599px) {
  .oma-sp__filter {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
    padding-bottom: 4px;
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  .oma-sp__filter::-webkit-scrollbar { display: none; }
  .oma-sp__filter-btn { flex-shrink: 0; }
}

/* Alert/signup form */
@media (max-width: 600px) {
  .oma5-alert-form,
  .oma5-af { flex-direction: column; gap: 8px; }
  .oma5-alert-form input,
  .oma5-af input { width: 100%; box-sizing: border-box; }
  .oma5-alert-form button,
  .oma5-af button,
  .oma5-alert-submit { width: 100%; }
}


/* ════════════════════════════════════════════════════
   3. /VOTE/ PAGE
   ════════════════════════════════════════════════════ */

@media (max-width: 640px) {
  .vp-hero__h1 { font-size: clamp(1.6rem, 6.5vw, 2rem); line-height: 1.12; }
  .vp-hero__inner { padding: 0 16px 12px; }
  .vp-zgrid { grid-template-columns: 1fr; gap: 10px; }
  .vp-zcard { padding: 14px; }
  /* Inline state selector */
  .vp-inline-state { padding: 12px 14px; }
  .vp-inline-state__row { flex-direction: column; gap: 8px; }
  .vp-inline-state__sel { width: 100%; min-width: 0; box-sizing: border-box; }
  .vp-inline-state__zone { width: 100%; font-size: .7rem; }
}

@media (max-width: 480px) {
  .vp-cgrid { grid-template-columns: repeat(2, 1fr); gap: 7px; }
  .vp-ccard__name { font-size: 10.5px; line-height: 1.3; }
  /* vp-ccard__photo height handled by aspect-ratio rule above */
  .vp-snap__chips { grid-template-columns: 1fr; }
}

@media (max-width: 380px) {
  .vp-cgrid { grid-template-columns: repeat(2, 1fr); gap: 5px; }
  /* vp-ccard__photo height handled by aspect-ratio rule above */
  .vp-ccard__name { font-size: 9.5px; }
}

/* State participation table — stacked card layout on mobile */
@media (max-width: 600px) {
  .vp-stlb-wrap { overflow-x: hidden; }
  .vp-stlb-table { min-width: 0; border: none; }
  .vp-stlb-table thead { display: none; }
  .vp-stlb-table tbody tr {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
    padding: 12px 14px;
    border: none;
    border-bottom: 1px solid var(--cr3, #D5D5CC);
    background: #fff;
  }
  .vp-stlb-table tbody tr:last-child { border-bottom: none; }
  .vp-stlb-table tbody td { padding: 0; }
  /* Rank */
  .vp-stlb-table tbody td:nth-child(1) { order: 1; width: 28px; flex-shrink: 0; font-size: 16px; }
  /* State name + zone */
  .vp-stlb-table tbody td:nth-child(2) { order: 2; flex: 1; min-width: 0; }
  .vp-stlb__zone { display: block; font-size: 10px; color: var(--sl2, #8892A0); margin-top: 2px; }
  /* Response count */
  .vp-stlb-table tbody td:nth-child(3) { order: 3; flex-shrink: 0; text-align: right; font-size: 16px; }
  /* Status badge */
  .vp-stlb-table tbody td:nth-child(4) { order: 4; width: 100%; padding-left: 36px; margin-top: 2px; }
}

/* Leaderboard on vote page */
@media (max-width: 600px) {
  .vp-lb__party,
  .vp-lb__hdr span:nth-child(3) { display: none; }
  .vp-lb__row { padding: 9px 12px; gap: 8px; }
}

/* Alerts form on vote page */
@media (max-width: 600px) {
  .vp-alerts-layout { grid-template-columns: 1fr; gap: 20px; }
  .vp-alert-form { flex-direction: column; gap: 8px; }
  .vp-alert-form input { width: 100%; box-sizing: border-box; }
  .vp-alert-form button,
  .vp-af__btn { width: 100%; }
}


/* ════════════════════════════════════════════════════
   4. /PREDICT/ PAGE
   ════════════════════════════════════════════════════ */

@media (max-width: 600px) {
  .fc-cands { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .fc-cand__av { width: 40px; height: 40px; }
  .fc-cand__name { font-size: .78rem; line-height: 1.3; }
  .fc-zones { grid-template-columns: 1fr; }
  .fc-lb-table { font-size: 12px; }
  .fc-lb-table thead th,
  .fc-lb-table tbody td { padding: 9px 10px; }
  .fc-action-card { padding: 18px 16px; }
  .fc-sticky-cta { padding: 8px 14px; gap: 8px; }
  .fc-sticky-cta__label { font-size: .72rem; }
}

@media (max-width: 380px) {
  .fc-cands { grid-template-columns: repeat(2, 1fr); gap: 5px; }
  .fc-cand__av { width: 36px; height: 36px; }
}


/* ════════════════════════════════════════════════════
   5. /REGIONS/ PAGE
   ════════════════════════════════════════════════════ */

@media (max-width: 640px) {
  .rp-state-result__grid { grid-template-columns: 1fr; }
  .rp-threshold-grid { grid-template-columns: 1fr; }
  .rp-cand-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .rp-cand-table thead th,
  .rp-cand-table tbody td { padding: 8px 9px; font-size: 11px; }
}

@media (max-width: 480px) {
  .rp-inner,
  .rp-hero__inner { padding: 0 14px; }
}


/* ════════════════════════════════════════════════════
   6. /METHODOLOGY/ PAGE
   ════════════════════════════════════════════════════ */

@media (max-width: 640px) {
  .meth-nosim-grid { grid-template-columns: 1fr; }
  .meth-table-wrap {
    margin-left: -16px;
    margin-right: -16px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}


/* ════════════════════════════════════════════════════
   7. /PRESS/ PAGE
   ════════════════════════════════════════════════════ */

@media (max-width: 540px) {
  .press-inner,
  .press-hero__inner { padding: 0 14px; }
  .press-grid { grid-template-columns: 1fr; gap: 12px; }
}


/* ════════════════════════════════════════════════════
   8. FOOTER
   ════════════════════════════════════════════════════ */

@media (max-width: 640px) {
  .oma-footer-v5__inner { padding: 0 16px; }
  .oma-footer-v5__nav { flex-wrap: wrap; gap: 6px 12px; }
  .oma-footer-v5__nav a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    min-height: 40px;
    font-size: .64rem;
  }
  .oma-footer-v5__legal { font-size: .58rem; line-height: 1.65; }
}

@media (max-width: 380px) {
  .oma-footer-v5__inner { padding: 0 12px; }
  .oma-footer-v5__logo { font-size: .95rem; }
}


/* ════════════════════════════════════════════════════
   9. FORMS — tap-friendly minimum sizes
   ════════════════════════════════════════════════════ */

@media (max-width: 640px) {
  /* Prevents iOS auto-zoom on focus (must be 16px+) */
  select,
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  textarea {
    font-size: 16px !important;
    min-height: 44px;
    box-sizing: border-box;
  }
  /* 44px minimum tap target for all buttons */
  button,
  .oma5-btn-pri,
  .oma5-btn-gold,
  .oma5-btn-sec,
  .vp-cta-btn,
  .fc-btn-pri,
  .fc-btn-sec {
    min-height: 44px;
  }

  /* Anchor-styled actions need the same usable tap area as real buttons. */
  .oma-logo,
  a[href^="mailto:"] {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  .rp-dp__close {
    min-width: 44px;
    justify-content: center;
  }
  .oma-btn-pri,
  .oma-btn-sec,
  .oma5-btn-sm,
  .vp-btn-pri,
  .vp-btn-sec,
  .vp-btn-sm,
  .vp-btn-gold,
  .vp-share-btn,
  .fc-btn-outline-gd,
  .fc-btn-outline-nv,
  .fc-sticky-cta__btn,
  .fc-submit-btn,
  .rp-btn-pri,
  .rp-btn-sec,
  .rp-btn-outline,
  .rp-btn-sm,
  .rp-zcard__foot-btn,
  .gp-btn-pri,
  .gp-btn-sec,
  .gp-btn-nv,
  .gp-btn-outline,
  .gp-btn-sm,
  .press-request-btn,
  .press-asset-card__btn {
    min-height: 44px;
    box-sizing: border-box;
  }
}


/* ════════════════════════════════════════════════════
   10. PORTRAIT IMAGES — aspect-ratio fix (no head/face cutoff)
   ════════════════════════════════════════════════════ */

/* Ensure images fill their container correctly on all screens */
.oma5-ccard__photo img,
.vp-ccard__photo img,
.oma5-pcard__photo img,
.oma5-ppcard__photo img {
  max-width: 100%;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ── Neutralise fixed px heights from other stylesheets on mobile ──
 * oma-homepage-v5.css sets height:100px at 640px, height:92px at 480px, height:84px at 380px
 * oma-vote-about.css  sets height:100px at 768px, height:92px at 480px
 * Those fixed heights cause the wide-short-box crop problem.
 * Our aspect-ratio:1/1 rule (above) needs height:auto to work —
 * !important here ensures the aspect-ratio wins over every other rule.
 * ─────────────────────────────────────────────────────────────────── */
@media (max-width: 820px) {
  /* Homepage cards */
  .oma5-ccard__photo,
  .oma5-ppcard__photo {
    height: auto !important;
    aspect-ratio: 1 / 1;
  }
  .oma5-ccard__photo img,
  .oma5-ppcard__photo img {
    object-position: center 10%;
  }

  /* Vote page cards */
  .vp-ccard__photo,
  .vp-ppcard__photo {
    height: auto !important;
    aspect-ratio: 1 / 1;
  }
  .vp-ccard__photo img,
  .vp-ppcard__photo img {
    object-position: center 10%;
  }
}


/* ════════════════════════════════════════════════════
   11. TABLES — universal overflow guard
   ════════════════════════════════════════════════════ */

@media (max-width: 640px) {
  table { max-width: 100%; }
  p, li, td, th, span {
    overflow-wrap: break-word;
    word-break: break-word;
  }
}


/* ════════════════════════════════════════════════════
   12. LIVE DROPDOWN — clamp to viewport
   ════════════════════════════════════════════════════ */

@media (max-width: 480px) {
  .oma-live-dropdown {
    right: 0;
    left: auto;
    min-width: min(300px, calc(100vw - 28px));
    max-width: calc(100vw - 28px);
  }
}


/* ════════════════════════════════════════════════════
   13. ABOUT PAGE
   ════════════════════════════════════════════════════ */

@media (max-width: 640px) {
  .oma-var-inner {
    grid-template-columns: 1fr;
    gap: 28px;
    padding: 0 16px;
  }
  .oma-var-section { padding: 44px 0; }
  .oma-hh-layout,
  .oma-about-two-col { grid-template-columns: 1fr; gap: 20px; }
}


/* ════════════════════════════════════════════════════
   14. SECTION INNER PADDING — safety net
   ════════════════════════════════════════════════════ */

@media (max-width: 640px) {
  .oma-wrap,
  .oma-int-inner,
  .oma-cta-inner,
  .oma-neu-inner {
    padding-left: 16px !important;
    padding-right: 16px !important;
    box-sizing: border-box;
  }
}

@media (max-width: 380px) {
  .oma5-inner,
  .oma5-hero__inner,
  .vp-inner,
  .vp-hero__inner,
  .fc-inner,
  .fc-hero__inner,
  .rp-inner,
  .rp-hero__inner,
  .meth-inner {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  /* Keep the horizontally scrollable methodology table flush with the
     12px small-phone gutter. The broader <=640px rule uses -16px. */
  .meth-table-wrap {
    margin-left: -12px;
    margin-right: -12px;
  }
}


/* ════════════════════════════════════════════════════
   15. MOBILE / TABLET TAP TARGETS — QA PATCH
   Preserve visual styling while ensuring interactive controls
   are not undersized on touch screens.
   ════════════════════════════════════════════════════ */
@media (max-width: 820px) {
  .oma-hamburger {
    width: 44px !important;
    min-width: 44px;
    height: 44px !important;
    min-height: 44px;
    padding: 0 !important;
  }

  .oma-btn-vote-nav,
  .oma5-vbar__btn,
  .vp-vbar__btn,
  .vp-btn-sm,
  .fc-btn-outline-gd,
  .fc-btn-outline-nv,
  .fc-sticky-cta__btn,
  .press-form__btn,
  .oma-btn-nv {
    min-height: 44px;
    box-sizing: border-box;
  }

  .rp-zcard__foot-btn {
    min-height: 44px;
    padding: 10px 0;
    box-sizing: border-box;
  }

  .oma-btn-vote-nav,
  .oma-btn-nv {
    display: inline-flex;
    align-items: center;
  }

  .oma-sp__filter-btn,
  .oma-sp__share-btn,
  .fc-lb-tab {
    min-height: 44px;
  }
}