/**
 * WarnIQ - Universal Mobile Viewport Fix
 * Applies to ALL public pages for consistent mobile experience
 * Strategic Priority: Mobile-first design across entire platform
 */

/* ==================================
   CRITICAL: PREVENT HORIZONTAL SCROLL
   This MUST be at the top for maximum priority
   ================================== */

@media (max-width: 768px) {
  /* CRITICAL: Prevent horizontal scroll at document level */
  html {
    overflow-x: hidden !important;
    box-sizing: border-box !important;
    width: 100% !important;
  }
  
  body {
    overflow-x: hidden !important;
    box-sizing: border-box !important;
    position: relative !important;
    width: 100% !important;
  }
  
  /* CRITICAL: Header must allow nav menu to be visible */
  .header {
    overflow: visible !important; /* FIXED: Changed from overflow-x/y to allow mobile menu */
    max-width: 100vw !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  
  /* CRITICAL: Main content must not overflow */
  main,
  #main-content,
  .section,
  .container {
    max-width: 100vw !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }
  
  /* EXCEPTION: Allow nav menu to position off-screen */
  .nav,
  #mainNav {
    max-width: 400px !important; /* Override global constraint */
  }
}

/* ==================================
   HAMBURGER MENU VIEWPORT FIX
   Applies to all pages with navigation
   ================================== */

@media (max-width: 768px) {
  
  /* CRITICAL: Ensure hamburger stays within viewport on ALL pages */
  .mobile-menu-toggle,
  #mobileMenuToggle {
    position: absolute !important;
    right: 16px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
    min-width: 40px !important;
  }
  
  /* Prevent header container from pushing menu out */
  .header-container {
    padding-right: 72px !important; /* Space for hamburger (40px + 32px margin) */
  }
  
  /* Ensure logo doesn't push hamburger out */
  .logo {
    max-width: calc(100vw - 120px) !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  
  /* ==================================
     RESPONSIVE TYPOGRAPHY - ALL PAGES
     ================================== */
  
  /* Hero titles - universal scaling */
  h1.text-4xl,
  h1[class*="text-4xl"],
  .hero-title,
  .page-title {
    font-size: clamp(2rem, 10vw, 4rem) !important;
    line-height: 1.1 !important;
    letter-spacing: -0.02em !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    hyphens: auto !important;
  }
  
  /* Large headings - h1 variants */
  h1 {
    font-size: clamp(1.75rem, 8vw, 3rem) !important;
    line-height: 1.2 !important;
  }
  
  /* Section headings - h2 */
  h2,
  .card-title,
  .section-title {
    font-size: clamp(1.25rem, 5vw, 2rem) !important;
    line-height: 1.3 !important;
  }
  
  /* Subsection headings - h3 */
  h3 {
    font-size: clamp(1.1rem, 4vw, 1.5rem) !important;
    line-height: 1.4 !important;
  }
  
  /* Subtitles and descriptions */
  p.text-lg,
  p[class*="text-lg"],
  .hero-subtitle,
  .page-subtitle {
    font-size: clamp(0.875rem, 4vw, 1.125rem) !important;
    line-height: 1.5 !important;
  }
  
  /* ==================================
     SECTION PADDING - MOBILE OPTIMIZATION
     ================================== */
  
  /* Hero sections */
  .page-hero,
  .section-hero,
  section[style*="padding-top: 4rem"],
  section[style*="padding-top: 5rem"] {
    padding-top: 2rem !important;
    padding-bottom: 1rem !important;
  }
  
  /* Regular sections */
  .section,
  section[class*="section"] {
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
  }
  
  /* Container padding adjustment */
  .container {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
  
  /* ==================================
     FORM ELEMENTS - MOBILE OPTIMIZATION
     ================================== */
  
  /* Search containers */
  .search-container,
  .form-container {
    padding: 1.5rem !important;
    margin: 0 !important;
  }
  
  /* Form groups */
  .form-group {
    margin-bottom: 1.25rem !important;
  }
  
  /* Input fields - ensure full width */
  .form-input,
  .form-select,
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="tel"],
  select,
  textarea {
    width: 100% !important;
    font-size: 16px !important; /* Prevents iOS zoom on focus */
  }
  
  /* ==================================
     CARD LAYOUTS - RESPONSIVE GRIDS
     ================================== */
  
  /* Feature grids */
  .feature-grid,
  .use-case-grid {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }
  
  /* Card padding */
  .card,
  .feature-card,
  .use-case-card {
    padding: 1.25rem !important;
  }
  
  /* Dashboard-style grids */
  .dashboard-grid {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }
  
  .dashboard-metric {
    padding: 1rem !important;
  }
  
  .metric-value {
    font-size: clamp(1.5rem, 8vw, 2.5rem) !important;
  }
  
  /* Dashboard cards */
  .dashboard-card {
    padding: 1rem !important;
    margin-bottom: 1rem !important;
  }
  
  .card-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.5rem !important;
  }
  
  /* ==================================
     BUTTONS - MOBILE OPTIMIZATION
     ================================== */
  
  /* Ensure buttons are touch-friendly */
  .btn {
    min-height: 44px !important;
    padding: 0.75rem 1.5rem !important;
    font-size: 1rem !important;
  }
  
  .btn-large {
    min-height: 52px !important;
    padding: 1rem 2rem !important;
  }
  
  /* Button groups */
  .hero-cta,
  .button-group {
    flex-direction: column !important;
    width: 100% !important;
  }
  
  .hero-cta .btn,
  .button-group .btn {
    width: 100% !important;
  }
  
  /* ==================================
     TABLES - MOBILE RESPONSIVE
     ================================== */
  
  /* Make tables scrollable */
  .table-container,
  table {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    display: block !important;
  }
  
  table {
    font-size: 0.875rem !important;
  }
  
  th,
  td {
    padding: 0.5rem !important;
    white-space: nowrap !important;
  }
  
  /* ==================================
     RESULTS & ACTIVITY LISTS
     ================================== */
  
  /* Activity items */
  .activity-item,
  .result-item {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.75rem !important;
    padding: 1rem !important;
  }
  
  .activity-info,
  .result-info {
    width: 100% !important;
  }
  
  /* ==================================
     MODALS & OVERLAYS
     ================================== */
  
  /* Modal sizing */
  .modal-content,
  .dialog-content {
    width: 95% !important;
    max-width: 100% !important;
    margin: 1rem !important;
    padding: 1.25rem !important;
  }
  
  .modal-header {
    font-size: 1.25rem !important;
  }
  
  /* ==================================
     ACCESSIBILITY - TOUCH TARGETS
     ================================== */
  
  /* Minimum touch target size (44x44px per Apple HIG) */
  .mobile-menu-toggle,
  #mobileMenuToggle {
    min-width: 44px !important;
    min-height: 44px !important;
    padding: 10px !important;
  }
  
  /* Links in content */
  a {
    min-height: 32px !important;
    display: inline-block !important;
  }
  
  /* Interactive elements */
  button,
  [role="button"],
  .clickable {
    min-height: 44px !important;
    min-width: 44px !important;
  }
}

/* ==================================
   SMALL MOBILE SPECIFIC (<480px)
   ================================== */

@media (max-width: 480px) {
  
  /* Extra tight spacing for small screens */
  .header-container {
    padding-left: 12px !important;
    padding-right: 64px !important;
  }
  
  .mobile-menu-toggle,
  #mobileMenuToggle {
    right: 12px !important;
    width: 36px !important;
    height: 36px !important;
  }
  
  .hamburger-line {
    width: 20px !important;
  }
  
  /* Typography adjustments */
  h1.text-4xl,
  h1[class*="text-4xl"],
  .hero-title {
    font-size: clamp(1.75rem, 12vw, 2.5rem) !important;
  }
  
  h1 {
    font-size: clamp(1.5rem, 10vw, 2rem) !important;
  }
  
  /* Tighter spacing */
  .section {
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
  }
  
  .container {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
  }
  
  /* Cards and components */
  .card,
  .dashboard-metric {
    padding: 0.875rem !important;
  }
  
  .metric-value {
    font-size: clamp(1.25rem, 10vw, 2rem) !important;
  }
}

/* ==================================
   MEDIUM MOBILE / TABLET (481-768px)
   ================================== */

@media (min-width: 481px) and (max-width: 768px) {
  
  /* 2-column layouts where appropriate */
  .dashboard-grid,
  .feature-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  
  /* Slightly larger typography */
  h1.text-4xl,
  h1[class*="text-4xl"],
  .hero-title {
    font-size: clamp(2.5rem, 8vw, 3.5rem) !important;
  }
}

/* ==================================
   LANDSCAPE MOBILE OPTIMIZATION
   ================================== */

@media (max-width: 768px) and (orientation: landscape) {
  
  /* Reduce vertical padding in landscape */
  .page-hero,
  .section-hero,
  section[style*="padding-top"] {
    padding-top: 1rem !important;
    padding-bottom: 0.5rem !important;
  }
  
  h1.text-4xl,
  h1[class*="text-4xl"],
  .hero-title {
    font-size: clamp(1.5rem, 6vw, 2.5rem) !important;
  }
  
  .section {
    padding: 1.5rem 0 !important;
  }
}

/* ==================================
   PERFORMANCE OPTIMIZATION
   ================================== */

@media (max-width: 768px) {
  
  /* Reduce animation complexity on mobile */
  .dashboard-metric,
  .dashboard-card,
  .card,
  .feature-card {
    transition: transform 0.2s ease !important;
  }
  
  /* Simplify hover effects for touch devices */
  @media (hover: none) {
    .dashboard-metric:hover,
    .dashboard-card:hover,
    .card:hover {
      transform: none !important;
    }
    
    .activity-item:hover,
    .result-item:hover {
      transform: translateX(2px) !important;
    }
  }
}

/* ==================================
   DESKTOP BREAKPOINT - ENSURE NO CONFLICTS
   ================================== */

@media (min-width: 769px) {
  /* Reset any mobile-specific overrides that might conflict */
  .header-container {
    padding-right: var(--container-padding) !important;
  }
  
  .logo {
    max-width: none !important;
  }
}


/* ==================================
   PHASE 6: SEARCH & RESULTS MOBILE OPTIMIZATION (Step 6.1-6.3)
   ================================== */

@media (max-width: 768px) {
  /* Search page: full-width input with larger font */
  .search-hero-input,
  .search-input,
  input[type="tel"].search-phone-input,
  .phone-input {
    width: 100% !important;
    font-size: 18px !important;
    padding: 0.875rem 1rem !important;
    border-radius: 10px !important;
  }

  /* Search page: full-width prominent button */
  .search-hero-btn,
  .search-submit-btn,
  .btn-search,
  button[type="submit"].search-btn {
    width: 100% !important;
    min-height: 48px !important;
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    border-radius: 10px !important;
  }

  /* Results: accordion section headers */
  .accordion-header {
    min-height: 44px;
  }

  /* Results: share button sticky at bottom on mobile */
  .share-sticky-mobile {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 0.75rem 1rem;
    background: rgba(10, 10, 10, 0.95);
    backdrop-filter: blur(10px);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    z-index: 100;
    text-align: center;
  }

  /* Results: risk pills wrap on narrow screens */
  .risk-pill,
  .status-badge,
  .accordion-status-pill {
    white-space: nowrap;
    flex-shrink: 0;
  }

  /* Results: hero section full width */
  .hero-risk-identity {
    border-radius: 12px !important;
  }

  /* Context pills wrap properly */
  .context-pills,
  .quick-select-pills {
    flex-wrap: wrap !important;
    gap: 0.5rem !important;
  }
}

/* Extra small screens (iPhone SE, 375px) */
@media (max-width: 375px) {
  .search-hero-input,
  .search-input,
  input[type="tel"].search-phone-input,
  .phone-input {
    font-size: 16px !important;
    padding: 0.75rem 0.875rem !important;
  }

  .accordion-title {
    font-size: 0.85rem !important;
  }

  .accordion-subtitle {
    font-size: 0.65rem !important;
  }

  .share-card-number {
    font-size: 2rem !important;
  }
}

/* Minimum 320px width support */
@media (max-width: 320px) {
  .results-container,
  .search-container {
    padding: 0 0.5rem !important;
  }

  .hero-header {
    padding: 0.75rem !important;
  }

  .accordion-header {
    padding: 0.6rem 0.75rem !important;
    gap: 0.5rem !important;
  }

  .accordion-header-icon {
    width: 28px !important;
    height: 28px !important;
    font-size: 0.85rem !important;
  }
}

  /* Results: Safety Score hero responsive */
  .hero-risk-identity {
    border-radius: 14px !important;
  }

  .hero-header {
    padding: 1.25rem 1rem !important;
  }

  /* Results: Share button sticky on mobile */
  .share-sticky-mobile {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 0.75rem 1rem;
    background: rgba(10, 10, 10, 0.95);
    backdrop-filter: blur(10px);
    border-top: 1px solid rgba(255,255,255,0.08);
    z-index: 100;
    display: flex;
    gap: 0.5rem;
    justify-content: center;
  }

  /* Risk pills wrap on narrow screens */
  .risk-pill,
  .accordion-status-pill {
    white-space: nowrap;
    flex-shrink: 0;
  }

  /* Context pills wrap */
  .context-pills {
    flex-wrap: wrap !important;
  }
}

/* Step 6.3: Extra-small screen refinements (iPhone SE / 375px) */
@media (max-width: 375px) {
  .hero-title {
    font-size: 1.1rem !important;
  }

  .share-card-number {
    font-size: 2rem !important;
  }

  .accordion-title {
    font-size: 0.85rem !important;
  }

  .accordion-status-pill {
    font-size: 0.6rem !important;
    padding: 0.2rem 0.4rem !important;
  }

  .identity-details {
    grid-template-columns: 1fr !important;
  }
}

/* Step 6.3: Minimum 320px support */
@media (max-width: 320px) {
  .results-container,
  .search-container {
    padding: 0 0.5rem !important;
  }

  .hero-header {
    padding: 1rem 0.75rem !important;
  }

  .info-card {
    padding: 0.75rem !important;
  }
}