/* ==========================================================================
   AIM Mobile Desktop Flow
   Mobile-only override: removes messy translucent hamburger overlay and makes
   mobile behave like a long, stacked desktop site.
   Does not affect desktop layouts.
   ========================================================================== */

@media (max-width: 980px) {
  /* Make header a real solid block instead of overlay/drawer UI. */
  .site-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 200 !important;
    background: #ffffff !important;
    border-bottom: 1px solid rgba(79, 163, 217, 0.16) !important;
    box-shadow: 0 8px 20px rgba(4, 34, 73, 0.06) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  .nav-container,
  .header-inner {
    width: min(100% - 28px, var(--container, 1180px)) !important;
    min-height: auto !important;
    padding: 12px 0 14px !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    align-items: center !important;
  }

  .brand,
  .logo-link {
    min-width: 0 !important;
    justify-content: center !important;
    overflow: visible !important;
  }

  .brand-logo,
  .logo {
    width: min(235px, 74vw) !important;
    max-width: min(235px, 74vw) !important;
    height: auto !important;
  }

  /* Disable hamburger UX completely on mobile. Show the actual nav instead. */
  .mobile-menu-toggle,
  .menu-toggle,
  .hamburger,
  button[aria-label*="menu" i],
  button[aria-label*="navigation" i] {
    display: none !important;
  }

  .mobile-menu,
  .mobile-nav,
  .nav-drawer,
  .drawer-menu {
    display: none !important;
  }

  .main-nav,
  .primary-nav {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
    width: 100% !important;
    align-items: stretch !important;
    justify-content: stretch !important;
  }

  .main-nav a,
  .primary-nav a,
  .nav-link,
  .primary-nav .nav-link {
    display: flex !important;
    min-height: 42px !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 10px !important;
    border: 1px solid rgba(79, 163, 217, 0.14) !important;
    border-radius: 999px !important;
    background: linear-gradient(180deg, #ffffff 0%, #f7fbfd 100%) !important;
    color: var(--aim-blue, #042249) !important;
    font-family: var(--font-body, Inter, Arial, sans-serif) !important;
    font-size: 11.5px !important;
    font-weight: 850 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    line-height: 1.1 !important;
    text-align: center !important;
  }

  .main-nav a::after,
  .primary-nav a::after,
  .nav-link::after {
    display: none !important;
  }

  .main-nav a[aria-current="page"],
  .primary-nav a[aria-current="page"],
  .nav-link.active {
    background: var(--aim-sky-soft, #eaf5fb) !important;
    border-color: rgba(79, 163, 217, 0.34) !important;
  }

  .site-header .nav-cta,
  .nav-container > .nav-cta,
  .header-inner > .nav-cta {
    display: flex !important;
    width: 100% !important;
    min-height: 46px !important;
    justify-content: center !important;
    background: var(--aim-olive-900, #4f5d3c) !important;
    border-color: var(--aim-olive-900, #4f5d3c) !important;
    color: #ffffff !important;
    border-radius: 999px !important;
    margin: 0 !important;
  }

  /* Return nav position handled by smart-back-pill.css */

  /* Site should feel like a long stacked desktop page on mobile. */
  .hero-grid,
  .home-hero-grid,
  .page-hero-grid,
  .about-hero-grid,
  .services-hero-grid,
  .patients-hero-grid,
  .resources-hero-grid,
  .contact-page-hero-grid,
  .contact-hero-grid,
  .booking-hero-grid,
  .service-detail-hero-grid,
  .resource-detail-grid,
  .resource-doc-hero-grid,
  .what-hero-grid,
  .what-final-hero-grid,
  .patient-detail-hero-grid,
  .contact-page-grid,
  .contact-layout,
  .patient-info-grid,
  .services-choice-panel,
  .services-portal-panel,
  .resource-help-panel,
  .forms-layout,
  .article-split-grid,
  .article-reading-layout {
    grid-template-columns: 1fr !important;
  }

  .hero-actions,
  .about-actions,
  .patients-hero-actions,
  .services-hero-actions,
  .service-detail-actions,
  .contact-hero-actions,
  .what-hero-actions,
  .what-final-actions,
  .button-row,
  .cta-row {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .btn,
  .button,
  .hero-cta,
  .hero-cta-secondary,
  .footer-cta,
  .nav-cta {
    width: 100% !important;
    min-height: 48px !important;
    justify-content: center !important;
    text-align: center !important;
    white-space: normal !important;
  }

  .service-grid,
  .services-grid,
  .services-grid-rebuilt,
  .service-feature-grid,
  .service-related-grid,
  .resource-category-grid,
  .resource-article-grid,
  .resource-related-grid,
  .resource-quick-grid,
  .patient-info-card-grid,
  .patient-step-list,
  .patient-action-list,
  .looking-grid,
  .patient-split-grid,
  .visit-steps,
  .what-journey-grid,
  .what-final-step-grid,
  .before-grid,
  .what-final-prep-grid,
  .approach-list,
  .what-final-approach-list,
  .philosophy-grid,
  .credentials-reveal-grid,
  .about-trust-grid,
  .condition-flip-grid,
  .selector-grid,
  .form-grid,
  .contact-method-grid,
  .grid-2,
  .grid-3,
  .grid-4,
  .insurance-logo-grid,
  .memberships-grid,
  .resource-doc-grid,
  .footer-grid {
    grid-template-columns: 1fr !important;
  }

  .site-footer .footer-grid {
    gap: 28px !important;
  }

  .footer-bottom {
    flex-direction: column !important;
  }
}

@media (max-width: 430px) {
  .main-nav,
  .primary-nav {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .main-nav a,
  .primary-nav a,
  .nav-link {
    font-size: 11px !important;
  }

  /* Return nav position handled by smart-back-pill.css */
}