/* ============================================================
   RateMyVSO, Responsive / Mobile Styles
   ============================================================ */

/* Hide mobile-only auth links on desktop */
.nav-auth-mobile { display: none; }

/* ── Hamburger nav for laptops + tablets (< 1400px) ──
   Admin-logged-in users have ~14 inline items (7 main + Admin +
   Moderate + Workspace + Profile + Logout + username badge + theme
   toggle). Natural widths total ~1430px, which overflows the 1400px
   container at any common laptop viewport (1366×768, 1440×900,
   1536×864). Collapse to hamburger at 1400px so only true wide
   monitors render the full inline nav. */
@media (max-width: 1399px) {
  .nav-auth-mobile { display: list-item; }
  .navbar .container { flex-wrap: wrap; }
  .nav-toggle {
    display: block;
    background: none;
    border: none;
    color: #fff;
    font-size: 1.5rem;
    cursor: pointer;
    padding: .4rem;
    min-width: 48px;
    min-height: 48px;
    line-height: 1;
  }
  .navbar-links {
    display: none;
    width: 100%;
    flex-direction: column;
    gap: 0;
    padding: .5rem 1rem 1rem;
    background: var(--color-primary);
    position: absolute;
    top: var(--nav-height);
    left: 0;
    right: 0;
    z-index: 101;
    box-shadow: 0 4px 12px rgba(0,0,0,.25);
    max-height: calc(100vh - var(--nav-height));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .navbar-links.open { display: flex; }
  .navbar-links li a {
    display: block;
    padding: .65rem 0;
    color: #fff;
    border-bottom: 1px solid rgba(255,255,255,.12);
  }
  .navbar-links li:last-child a { border-bottom: none; }
  .nav-auth { display: none !important; }
}

/* ── Tablet (768px – 1023px) ── */
@media (max-width: 1023px) {
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .profile-columns { grid-template-columns: 1fr; }
  .profile-sidebar { order: -1; }

  /* Find-rep filters: 3 columns on tablet */
  .filters-bar.filters-grid {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

/* ── Mobile (< 640px) type-scale collapse to 1.2 ratio ── */
@media (max-width: 640px) {
  :root {
    --text-lg:   1.125rem;
    --text-xl:   1.35rem;
    --text-2xl:  1.625rem;
    --text-3xl:  1.953rem;
  }
}

/* ── Mobile (< 768px) ── */
@media (max-width: 767px) {
  .container { padding: 0 1rem; }
  .page-content { padding: 1rem 0; }

  .hero { padding: 2.5rem 0 2rem; }
  .hero p { font-size: 1rem; }

  /* Hero search: stack as 2-col pairs */
  .search-box {
    grid-template-columns: 1fr 1fr;
  }

  /* Find-rep filters: 2 columns on mobile */
  .filters-bar.filters-grid {
    grid-template-columns: 1fr 1fr;
  }

  /* Filters fallback */
  .filters-bar:not(.filters-grid) { flex-direction: column; align-items: stretch; }
  .filter-group { min-width: auto; }

  .grid-3, .grid-2 { grid-template-columns: 1fr; }

  /* Profile hero */
  .profile-hero-inner { flex-direction: column; align-items: flex-start; }
  .profile-icon { width: 56px; height: 56px; font-size: 1.5rem; }
  .profile-info h1 { font-size: 1.3rem; }

  /* Rating panel */
  .rating-panel-top { flex-direction: column; align-items: flex-start; gap: 1rem; }
  .rating-big { display: flex; align-items: center; gap: 1rem; }
  .rating-big .score-num { font-size: 2.2rem; }

  /* Score bar labels: stack above the bar on narrow phones so the bar
     itself gets the full width. Keep inline at ≥480px. */
  .score-bar-row { flex-wrap: wrap; }
  .score-bar-label { width: auto; max-width: 100%; font-size: .78rem; margin-bottom: .15rem; }
  .score-bar-track { flex-basis: 100%; }

  /* Modal */
  .modal { max-height: 95vh; border-radius: var(--radius-md) var(--radius-md) 0 0; }
  .modal-overlay { align-items: flex-end; padding: 0; }

  /* Categories grid → single column */
  .categories-grid { grid-template-columns: 1fr; }

  /* Review categories inline */
  .review-categories { display: none; }

  /* Tab bar */
  .tab-btn { padding: .5rem .875rem; font-size: .825rem; }

  /* Filter labels: readable on phones.
     Desktop uses ALL CAPS .8rem for density, on a 375px column that's
     hard to scan, especially for older users. */
  .filter-group label {
    font-size: .9rem;
    text-transform: none;
    letter-spacing: 0;
  }

  /* Form inputs: touch-friendly padding + base 16px font so iOS doesn't
     zoom the page when focusing. */
  .form-group input[type="text"],
  .form-group input[type="email"],
  .form-group input[type="password"],
  .form-group input[type="tel"],
  .form-group select,
  .form-group textarea {
    padding: .7rem .85rem;
    font-size: 1rem;
  }

  /* DC autocomplete items: bigger tap zone, easier to read */
  .dc-ac-item { padding: .75rem .85rem; font-size: .95rem; }

  /* Persona grid icons: smaller on phones so they don't dominate cards */
  .persona-icon { font-size: 1.4rem; line-height: 1; }

  .info-row { gap: 1rem; }

  /* Breadcrumb */
  .breadcrumb { font-size: .75rem; flex-wrap: wrap; }

  /* Toast */
  .toast-container { left: 1rem; right: 1rem; bottom: 1rem; }
  .toast { max-width: 100%; }

  /* Claims Pulse: stack national cards on mobile */
  #national-cards { grid-template-columns: 1fr 1fr !important; }
  #claim-types { grid-template-columns: 1fr !important; }

  /* State table: ensure horizontal scroll and prevent text wrapping */
  #state-table th, #state-table td { white-space: nowrap; }

  /* BVA Outcomes: stack filter bar */
  .filter-bar { flex-direction: column; align-items: stretch; }
  .filter-bar input { min-width: 0; width: 100%; }
  .stat-pills { gap: .5rem; }
  .stat-pill { font-size: .72rem; padding: .3rem .75rem; }

  /* Outcomes table: readable on mobile with horizontal scroll for wide data */
  .outcomes-table { font-size: .82rem; }
  .outcomes-table th { padding: .6rem .5rem; font-size: .78rem; }
  .outcomes-table td { padding: .55rem .5rem; }

  /* Any table that overflows horizontally gets a scroll container.
     Apply to parent wrappers marked .table-wrap, or on tables directly
     via the utility class. */
  .table-wrap,
  .outcomes-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0 -1rem;           /* bleed to edge so scroll feels natural */
    padding: 0 1rem;
  }
}

/* ── Small phones (< 480px) ── */
@media (max-width: 479px) {
  /* Home hero search: single column, previous 2-col pair cramps buttons */
  .search-box {
    grid-template-columns: 1fr;
  }

  /* Two columns even on the smallest phones so short fields (ZIP + State,
     Sort + Order) sit side by side instead of a tall single-column stack. */
  .filters-bar.filters-grid {
    grid-template-columns: 1fr 1fr;
  }
  /* Claims Pulse: single column on very small screens */
  #national-cards { grid-template-columns: 1fr !important; }

  .filters-grid .filter-group input,
  .filters-grid .filter-group select,
  .filters-grid .filter-group .btn {
    width: 100%;
    font-size: 1rem;
    padding: .6rem .75rem;
  }

  /* Map filter bar stacks cleanly below 480px */
  .map-filter-inner {
    grid-template-columns: 1fr !important;
    gap: .6rem;
  }

  /* Near-me bar on /find-rep stacks vertically */
  .near-me-bar { flex-direction: column; align-items: stretch; gap: .6rem; }
}

/* ── Print ── */
@media print {
  .navbar, .hero .search-box, .filters-bar, .pagination,
  .btn, .modal-overlay, .toast-container { display: none !important; }
  body { background: #fff; }
  .card { box-shadow: none; border: 1px solid #ccc; }
}