/*
 * Mobile accessibility fixes — applied at <=768px.
 *
 * Targets the actual element classes used by DeedFlex landing/auth/dashboard.
 * Inline-style font sizes (font-size:15px on trust-badge spans) require
 * !important to override.
 */
@media (max-width: 768px) {
  /* === Tap targets — minimum 44px height per Apple HIG === */
  /* Site nav (.ds-nav containers found in landing.html) */
  .ds-nav-logo,
  .ds-nav-links a,
  .ds-nav-links button,
  nav.ds-nav a,
  nav.ds-nav button,
  a.btn-ghost,
  a.brand,
  .auth-nav a,
  .auth-nav button {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 0.75rem;
  }

  /* FAQ accordion */
  button.ds-faq-q,
  .ds-faq-q,
  details summary {
    min-height: 48px;
    padding: 0.75rem 1rem;
  }

  /* State-page breadcrumbs, county tags, cross-state links, listing-card chips */
  .sp-breadcrumb a,
  a.sp-county-tag, .sp-county-tag,
  a.sp-state-link, .sp-state-link,
  .card-county a, .card-county,
  .sp-state-links a,
  .sp-county-list a, .sp-counties a,
  .sp-listing-card a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    padding: 6px 10px;
  }

  /* Footer + about-page contact links */
  footer a, .site-footer a, .ds-footer a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 0;
  }

  /* === Font sizes — minimum 14px ===
     Previously this used a broad `[style*="font-size:13px"]` attribute
     selector that swept every inline 13-15px style up to 16px — including
     the deal-card label/narrative hierarchy (label 13.5px / body 15px /
     header 16px) which then collapsed to a single uniform 16px on mobile.
     The explicit class list below (.badge, .small, pricing-*, auth-*, etc.)
     already covers the legitimate marketing/auth fine-print cases without
     trampling the app's deliberate typography. */

  /* All <a> mailto/tel links + secondary text links */
  a[href^="mailto:"], a[href^="tel:"], a.text-link, a.muted {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    padding: 4px 0;
  }

  /* Submit buttons that report 0 height (full-width primary buttons in forms) */
  button[type="submit"], input[type="submit"], .btn-primary, .signup-form button {
    min-height: 48px !important;
    padding: 12px 16px;
  }

  /* Generic small-text classes */
  .badge, .help-text, .small, .text-muted, .eyebrow,
  .pricing-period, .pricing-savings, .form-help,
  .billing-cycle, .trust-item, .ds-eyebrow,
  .pricing-badge, .ds-badge,
  .ds-section-label, .ds-pricing-period, .ds-pricing-savings,
  .ds-form-help, .ds-fineprint, .auth-fineprint,
  .ds-price-card-annual, .ds-price-card-annual span,
  .ds-testimonial-role, .ds-footer-brand p,
  .auth-terms, p.auth-terms,
  p.fineprint, p.terms-line, .signup-terms {
    font-size: 16px !important;
    line-height: 1.4;
  }

  /* Inline form-link buttons (Terms/Privacy/Sign in inside a paragraph) */
  .signup-form a, .auth-form a, p a {
    min-height: 44px;
    display: inline-block;
    padding: 4px 0;
  }

  /* Form labels — auth.css ships them at 13.5px */
  form label, .auth-form label, .signup-form label {
    font-size: 16px !important;
    line-height: 1.4;
  }

  /* Catch-all minimum: narrow to text-heavy elements only. The earlier
     sweep included li/a/button/input/textarea/select, which broke the
     deliberately small text on .cal-chip (11.5px), .dc-flag (13px), and
     compact data tables. (Q4 P2.) */
  body, p, label {
    font-size: max(15px, 1em);
  }

  /* Input field min-height — 48px tap target on touch devices. (Q4 P3.) */
  .input-wrap, input[type="text"], input[type="email"], input[type="password"],
  input[type="tel"], input[type="number"], textarea, select {
    min-height: 48px;
  }
}

/* ── Q4 mobile blockers ─────────────────────────────────────────────
   B1 marketing nav: marketing pages hide all nav links at <=640px but
   never wired up a hamburger. Let the links wrap to a second line
   instead of disappearing entirely. */
@media (max-width: 640px) {
  .ds-nav-inner {
    flex-wrap: wrap;
    height: auto;
    padding: 10px 16px;
    row-gap: 8px;
  }
  .ds-nav-links {
    width: 100%;
    justify-content: center;
    flex-wrap: wrap;
    gap: 4px;
    order: 99;
  }
  .ds-nav-links a:not(.btn-primary):not(.btn-ghost) {
    display: inline-flex !important;
    padding: 6px 10px;
    font-size: 14px;
  }
}

/* B2 deal-detail topbar: 4 nav links + brand overflow at 375px. Trim
   icon-only secondary links and shrink the brand to icon-only. */
@media (max-width: 560px) {
  .deal-topbar {
    padding: 10px 14px;
    gap: 8px;
  }
  .deal-topbar-brand span {
    display: none;
  }
  .deal-topbar-nav {
    gap: 4px;
    flex-wrap: wrap;
  }
  .deal-topbar-nav a {
    padding: 6px 8px;
    font-size: 13px;
  }
}

/* B3 dashboard filter slider unusable at thumb size — make it full-width
   and bump touch-track height. */
@media (max-width: 768px) {
  .slider-label {
    width: 100%;
    justify-content: space-between;
  }
  .slider-label input[type=range] {
    flex: 1;
    width: auto;
    height: 24px;
  }
}

/* B4 checkout city/state/zip 3-column collapses too late — collapse at
   700px so ZIP doesn't shrink to ~80px and become un-typable. */
@media (max-width: 700px) {
  .co-row-3 {
    grid-template-columns: 1fr;
  }
}

/* B5 checkout "Best Value" badge overlaps stacked-tab text. Reposition
   the badge to the right edge with vertical centering when tabs stack. */
@media (max-width: 560px) {
  .co-tab {
    padding: 14px 56px 14px 14px;
    text-align: left;
  }
  .co-tab .co-best {
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
  }
}

/* F1 deal-card action buttons lose intent when labels hidden — restore
   tiny labels under icons so investors know what they do. */
@media (max-width: 480px) {
  .dc-btn {
    flex-direction: column;
    gap: 2px;
    padding: 6px 4px;
    min-height: 48px;
  }
  .dc-btn .dc-btn-label {
    display: inline !important;
    font-size: 13px;
  }
}

/* F3 watchlist actions cramped — stretch full width + stack. */
@media (max-width: 480px) {
  .wl-card-actions {
    width: 100%;
    justify-content: stretch;
    gap: 8px;
  }
  .wl-card-actions > * {
    flex: 1;
    min-height: 44px;
  }
  .wl-note-status {
    align-self: flex-start;
  }
}

/* F4 compare modal table cramped — tighter label column, smaller padding. */
@media (max-width: 640px) {
  .cmp-table th {
    width: 110px;
  }
  .cmp-table th, .cmp-table td {
    padding: 8px 6px;
    font-size: 13px;
  }
  .cmp-overlay {
    padding: 8px;
  }
}

/* F5 toast overlaps the bottom compare bar — push toast to top on
   narrow viewports. */
@media (max-width: 560px) {
  .toast {
    bottom: auto;
    top: 70px;
    right: 12px;
    left: 12px;
    max-width: none;
  }
}

/* F7 calendar chips at 480px become 3-character ellipsis. Switch to a
   dot indicator so the day cell stays scannable. */
@media (max-width: 480px) {
  .cal-chip {
    font-size: 0;
    padding: 0;
    height: 4px;
    border-left: none;
    background: var(--accent);
    border-radius: 2px;
    margin: 1px 0;
  }
  .cal-day-num {
    font-size: 13px;
  }
  .cal-day {
    min-height: 56px;
    padding: 4px;
  }
}

/* F2 state-page hero h1 + quality-badge collision — give the badge its
   own line on small screens. */
@media (max-width: 640px) {
  .sp-hero {
    padding: 56px 16px 36px;
  }
  .sp-hero h1 .state-quality-badge {
    display: inline-flex;
    margin: 8px 0 0;
  }
}

/* P4 pricing FAQ accordion padding at <=480px. */
@media (max-width: 480px) {
  .ds-faq-q {
    padding: 18px 16px;
    font-size: 16px;
  }
}

/* Touch-target floor for older-investor accessibility. Apple HIG calls for
   44px minimum on tappable controls; UX-audit Section H bumps this to 48px
   for older users with reduced dexterity. Pin every icon-only close /
   icon-only delete to that floor on mobile. */
@media (max-width: 768px) {
  .cal-day-close,
  .ss-item-del,
  .ex-close,
  .toggle-pw {
    min-width: 44px;
    min-height: 44px;
    padding: 8px;
  }
}