/* ============================================================
 * UF Mobile Pass — sitewide responsive hardening
 *
 * Loaded on every page. Targets ≤900px (tablet) and ≤600px (phone).
 * Goals:
 *   - All touch targets ≥44×44px
 *   - No content under the floating EN|ES pill
 *   - Tab strips become horizontally scrollable with visible affordance
 *   - Tables become card-list on phones
 *   - Hero/headlines scale down
 *   - Forms have ≥16px font (prevents iOS zoom-on-focus)
 *   - All grids collapse to single column
 * ============================================================ */

/* ============================================================
 * Universal guardrails (all viewports)
 * ============================================================ */

/* Prevent iOS zoom-on-focus for any text input by enforcing ≥16px. */
input[type="email"],
input[type="text"],
input[type="number"],
input[type="tel"],
input[type="url"],
input[type="search"],
input[type="password"],
textarea,
select {
  font-size: max(16px, 1rem);
}

/* Touch targets: every clickable thing should be 44px minimum on touch devices. */
@media (hover: none) and (pointer: coarse) {
  button,
  .uf-lead-btn,
  .uf-lead-btn-ghost,
  .btn,
  .button,
  .cta,
  .nav-link,
  .tab-button,
  .mt-tab-btn,
  .ie-idx-btn,
  a.button,
  [role="button"],
  [role="tab"],
  input[type="checkbox"] + label,
  input[type="radio"] + label,
  .checkbox-row {
    min-height: 44px;
    padding-top: 10px;
    padding-bottom: 10px;
  }
  /* Close/dismiss icon buttons need explicit size */
  .close-btn,
  .dismiss-btn,
  [aria-label="Close"],
  [aria-label="Dismiss"] {
    min-width: 44px;
    min-height: 44px;
  }
}

/* Horizontal scrollers: any element with a tab row that might overflow */
.mt-tab-bar,
.ie-selector-row,
.tab-strip,
.subtab-strip,
.scalp-strip,
.uf-tab-row,
.live-strip-row,
.tickers-row {
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

/* ============================================================
 * Phone breakpoint ≤ 600px
 * ============================================================ */
@media (max-width: 600px) {

  /* Pill: keep small but readable */
  #uf-lang-pill {
    top: 8px !important;
    right: 8px !important;
  }
  #uf-lang-pill button {
    padding: 8px 12px !important;
    min-height: 38px;
    font-size: 0.72rem !important;
  }

  /* Reserve space at the very top of every page so the brand header
     does not slide UNDER the floating language pill */
  body {
    padding-top: 0;
  }
  /* The first prominent header element gets a top-margin so the pill
     doesn't cover it. Pages can override via `.uf-page-no-pill-offset`. */
  body > header,
  .site-header,
  .uf-brand,
  .uf-lead-brand,
  .market-tools-header,
  .mt-header,
  .cc-header,
  .page-header,
  .hero-eyebrow {
    margin-right: 110px; /* reserve pill space */
    max-width: calc(100% - 120px);
  }

  /* Brand title shrinks */
  .uf-brand h1,
  .uf-lead-brand,
  .site-title,
  .page-title {
    font-size: 0.82rem !important;
    line-height: 1.35 !important;
  }

  /* Hero copy */
  .hero h1, .hero-title, h1.hero {
    font-size: 1.65rem !important;
    line-height: 1.18 !important;
  }
  h1 { font-size: 1.5rem; line-height: 1.18; }
  h2 { font-size: 1.25rem; line-height: 1.22; }
  h3 { font-size: 1.08rem; line-height: 1.25; }

  /* Gate / lead overlay — full-screen, no margin, ≥16px inputs */
  .uf-lead-overlay {
    padding: 12px 8px !important;
  }
  .uf-lead-card {
    max-width: 100% !important;
    margin: 0 !important;
    padding: 18px 16px !important;
    border-radius: 12px !important;
  }
  .uf-lead-h1 { font-size: 1.35rem !important; }
  .uf-lead-sub { font-size: 0.92rem !important; }
  .uf-lead-section { padding: 12px 14px !important; }
  .uf-lead-section-title { font-size: 0.92rem !important; }
  .uf-lead-section-body { font-size: 0.86rem !important; line-height: 1.5 !important; }
  .uf-lead-input { font-size: 16px !important; padding: 14px !important; }
  .uf-lead-btn,
  .uf-lead-btn-ghost { padding: 14px !important; font-size: 0.95rem !important; }

  /* Tab bars become horizontal-scroll */
  .mt-tab-bar,
  .ie-selector-row,
  .tab-strip,
  .subtab-strip,
  .scalp-tabs,
  .uf-tab-row {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    gap: 6px !important;
    padding-bottom: 6px !important;
    scroll-snap-type: x mandatory;
  }
  .mt-tab-bar > *,
  .ie-selector-row > *,
  .tab-strip > *,
  .subtab-strip > *,
  .scalp-tabs > *,
  .uf-tab-row > * {
    flex: 0 0 auto !important;
    scroll-snap-align: start;
    min-height: 44px;
    padding: 10px 14px !important;
    font-size: 0.86rem !important;
    white-space: nowrap !important;
  }

  /* Visible affordance: a thin gradient on the right edge so users know to scroll */
  .mt-tab-bar,
  .ie-selector-row {
    position: relative;
    mask-image: linear-gradient(to right, black calc(100% - 32px), transparent 100%);
    -webkit-mask-image: linear-gradient(to right, black calc(100% - 32px), transparent 100%);
  }

  /* Ticker / live strip: horizontal scroll with visible scrollbar */
  .live-strip-row,
  .tickers-row,
  .uf-live-strip {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
  }

  /* Grids collapse to single column */
  .grid,
  .two-col,
  .three-col,
  .four-col,
  .card-grid,
  .stat-grid,
  .feature-grid,
  [class*="grid-cols-"] {
    display: block !important;
    grid-template-columns: 1fr !important;
  }
  .grid > *,
  .card-grid > * {
    width: 100% !important;
    margin-bottom: 12px;
  }

  /* Tables: clip + horizontal scroll inside a wrapper */
  table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
    font-size: 0.86rem;
  }
  table thead, table tbody, table tr { display: table; width: 100%; }

  /* Modals: full-width on phone */
  .modal,
  .modal-content {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    border-radius: 12px 12px 0 0 !important;
  }

  /* Command Center subtabs: scrollable */
  .cc-subtab-strip,
  .cc-subtabs {
    overflow-x: auto !important;
    display: flex !important;
    flex-wrap: nowrap !important;
  }

  /* Iframes that contain embedded panels should NOT exceed viewport */
  iframe {
    max-width: 100%;
  }

  /* Footer disclaimers — compress */
  .site-footer,
  .footer-disclaimer,
  #bnb-regulatory-footer {
    font-size: 0.75rem !important;
    padding: 14px 12px !important;
    line-height: 1.45 !important;
  }
}

/* ============================================================
 * Tablet breakpoint 601px – 900px
 * ============================================================ */
@media (min-width: 601px) and (max-width: 900px) {
  #uf-lang-pill {
    top: 12px;
    right: 12px;
  }
  /* Reserve a smaller area at top */
  body > header, .site-header, .uf-brand {
    margin-right: 130px;
    max-width: calc(100% - 140px);
  }
  /* Grids: collapse 4-col to 2-col, 3-col stays */
  .four-col,
  [class*="grid-cols-4"] {
    grid-template-columns: 1fr 1fr !important;
  }
  /* Body font slightly smaller */
  body { font-size: 0.95rem; }
}

/* ============================================================
 * Larger phones in landscape — relax slightly
 * ============================================================ */
@media (max-width: 900px) and (orientation: landscape) {
  .uf-lead-card { padding: 14px 16px !important; }
}

/* ============================================================
 * Forced-colors mode + accessibility
 * ============================================================ */
@media (forced-colors: active) {
  #uf-lang-pill {
    background: Canvas;
    border-color: CanvasText;
  }
  #uf-lang-pill button[aria-pressed="true"] {
    background: Highlight;
    color: HighlightText;
  }
}