/* KAS CPA — Mobile Responsiveness Fixes
   Loaded after per-page <style> blocks so these rules override.
   Desktop (>1024px) is intentionally untouched. */

/* ---------- Global safety: no horizontal scroll, fluid media ---------- */
html, body { overflow-x: hidden; }
img, video { max-width: 100%; height: auto; }

/* ============ TABLET (≤1024px) ============ */
@media (max-width: 1024px) {
  .top-bar { display: none !important; }
  .container { padding-left: 24px !important; padding-right: 24px !important; }

  /* Mega-dropdown fits within tablet viewport (was hardcoded 800px) */
  .mega-dropdown {
    width: min(720px, calc(100vw - 48px)) !important;
  }
}

/* ============ SMALL TABLET / LARGE PHONE (≤900px) ============ */
@media (max-width: 900px) {
  /* RFP form + any similar sidebar layouts stack */
  .rfp-layout { grid-template-columns: 1fr !important; }
  .rfp-sidebar { grid-template-columns: 1fr !important; }
}

/* ============ PHONE (≤768px) ============ */
@media (max-width: 768px) {
  /* Header backdrop-filter creates a containing block that traps the
     mobile nav overlay inside the 80px header. Remove on mobile so
     position:fixed on .nav resolves against the viewport instead. */
  .header {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  /* Nav-toggle must sit above the open overlay */
  .nav-toggle {
    position: relative !important;
    z-index: 10000 !important;
  }

  /* Mobile nav overlay — universal rules so minimal pages
     (leadership, state pages) also get a working menu. */
  .nav {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    z-index: 9999 !important;
    padding: 96px 20px 32px !important;
    overflow-y: auto !important;
    background: #0f1419 !important;
  }
  .nav:not(.active) { display: none !important; }
  .nav.active { display: flex !important; }

  /* Nav items stack, full-width, readable */
  .nav > .nav-item,
  .nav > a {
    width: 100% !important;
    font-size: 1.05rem !important;
    padding: 16px 20px !important;
    text-align: left !important;
    border-bottom: 1px solid rgba(255,255,255,0.08) !important;
    color: #f0f2f5 !important;
    text-decoration: none !important;
    display: block !important;
  }
  .nav > .nav-item.has-dropdown {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  /* Dropdowns become inline expandable sections */
  .nav-item .dropdown,
  .nav-item .mega-dropdown {
    position: static !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    display: none;
    width: 100% !important;
    max-width: 100% !important;
    margin-top: 8px !important;
    background: #161d26 !important;
    border-radius: 8px !important;
    box-shadow: none !important;
  }
  .nav-item.has-dropdown.open .dropdown,
  .nav-item.has-dropdown.open .mega-dropdown { display: block !important; }
  .nav-item:hover .dropdown,
  .nav-item:hover .mega-dropdown { display: none; }
  .nav-item.has-dropdown.open:hover .dropdown,
  .nav-item.has-dropdown.open:hover .mega-dropdown { display: block !important; }

  .dropdown a { padding: 12px 16px !important; font-size: 0.95rem !important; }
  .nav-cta { display: none !important; }

  /* Mega-dropdown grid collapses (fixes broken .mega-cols selector that
     never matched the actual .mega-col HTML class) */
  .mega-dropdown {
    grid-template-columns: 1fr !important;
    width: 100% !important;
  }
  .mega-col {
    padding: 16px !important;
    border-right: none !important;
    border-bottom: 1px solid rgba(255,255,255,0.08) !important;
  }
  .mega-col:last-child { border-bottom: none !important; }

  /* Decorative hero SVGs + custom banners never overflow viewport */
  .hero-bg svg { max-width: 100vw; }
  .kas-banner svg,
  .kas-banner-svg { width: 100% !important; height: auto !important; }

  /* CTA/hero button rows stack and fill width */
  .cta-actions, .hero-actions, .hero-cta, .btn-group, .btn-row {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .cta-actions > .btn,
  .hero-actions > .btn,
  .hero-cta > .btn,
  .btn-group > .btn,
  .btn-row > .btn {
    width: 100% !important;
    justify-content: center !important;
  }
}

/* ============ SMALL PHONE (≤480px) ============ */
@media (max-width: 480px) {
  .container { padding-left: 16px !important; padding-right: 16px !important; }

  /* Hero headlines — prior clamp() had 2.8rem minimum which was too large
     on a 375px viewport. */
  h1, .hero h1, .hero-title, .page-hero h1 {
    font-size: clamp(1.75rem, 8vw, 2.4rem) !important;
    line-height: 1.15 !important;
  }
  h2, .section-title {
    font-size: clamp(1.4rem, 6vw, 1.9rem) !important;
    line-height: 1.2 !important;
  }

  /* Stack industries grid fully on phones */
  .industries-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
}