/* ============================================
   LOOMREACH THEME v1.3.1 - MOBILE FIXES
   2024-2025 Standards Compliance Patch
   ============================================ */

/* ============================================
   1. SAFE AREA SUPPORT (Notch/Dynamic Island)
   ============================================ */
:root {
  /* Safe Areas - iOS notch, Dynamic Island, home indicator */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  
  /* Touch Targets - WCAG 2.2 AA / Apple HIG */
  --touch-target-min: 44px;
  --touch-target-recommended: 48px;
  --touch-target-spacing: 8px;
  
  /* Form Elements */
  --input-height: 48px;
  --button-height-min: 48px;
}

/* Apply safe area to fixed header */
.site-header {
  padding-top: calc(12px + var(--safe-top));
  padding-left: var(--safe-left);
  padding-right: var(--safe-right);
}

/* Apply safe area to mobile nav */
@media (max-width: 968px) {
  #main-nav {
    padding-top: var(--safe-top);
    padding-bottom: var(--safe-bottom);
    padding-left: var(--safe-left);
    padding-right: var(--safe-right);
  }
}

/* Apply safe area to footer */
.site-footer {
  padding-bottom: calc(48px + var(--safe-bottom));
}

/* ============================================
   2. TOUCH TARGET FIXES (WCAG 2.2 / Apple HIG)
   Minimum 44px, recommended 48px
   ============================================ */

/* Mobile Toggle - FIX: was 40px, now 48px */
.mobile-toggle {
  width: 48px;
  height: 48px;
  min-width: 48px;
  min-height: 48px;
  padding: 12px;
}

/* All clickable elements minimum size */
button,
[role="button"],
a.btn,
.btn {
  min-height: var(--touch-target-min);
  min-width: var(--touch-target-min);
}

/* Navigation links in mobile menu */
@media (max-width: 968px) {
  #main-nav a {
    min-height: 48px;
    padding: 14px 24px;
    display: flex;
    align-items: center;
  }
}

/* Breadcrumb links */
.breadcrumb a {
  min-height: 44px;
  padding: 10px 4px;
  display: inline-flex;
  align-items: center;
}

/* Icon buttons */
button:has(svg),
a:has(svg):not(.btn) {
  min-width: 44px;
  min-height: 44px;
  padding: 10px;
}

/* Language dropdown */
.lang-dropdown-btn {
  min-height: 44px;
  padding: 10px 14px;
}

.lang-dropdown-item {
  min-height: 44px;
  padding: 12px 16px;
}

/* ============================================
   3. FORM INPUT HEIGHTS
   Minimum 48px, font 16px (prevents iOS zoom)
   ============================================ */

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="number"],
input[type="url"],
input[type="search"],
input[type="date"],
input[type="time"],
textarea,
select {
  min-height: var(--input-height);
  padding: 12px 16px;
  font-size: 16px; /* CRITICAL: Prevents iOS zoom on focus */
  line-height: 1.5;
  border-radius: 8px;
}

textarea {
  min-height: 120px;
}

/* Contact Form 7 specific */
.wpcf7-form-control {
  min-height: var(--input-height);
  font-size: 16px;
}

/* Button heights */
.btn,
button[type="submit"],
input[type="submit"] {
  min-height: var(--button-height-min);
  padding: 14px 24px;
}

/* ============================================
   4. REDUCED MOTION SUPPORT (WCAG 2.2 Required)
   ============================================ */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  
  /* Disable specific animations */
  .pulse-glow,
  [style*="animation"] {
    animation: none !important;
  }
  
  /* Keep content visible */
  .reveal {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ============================================
   5. IMAGE CLS PREVENTION
   ============================================ */

/* Ensure images have intrinsic sizing */
img {
  height: auto;
  max-width: 100%;
}

/* Reserve space for lazy-loaded images */
img[loading="lazy"] {
  min-height: 1px;
}

/* Hero images - eager loading */
.hero img,
.page-hero img,
#hero img {
  content-visibility: auto;
}

/* ============================================
   6. ENHANCED 8px SPACING GRID
   ============================================ */

:root {
  /* 8px Grid Spacing */
  --space-1: 4px;   /* 0.5 unit */
  --space-2: 8px;   /* 1 unit */
  --space-3: 12px;  /* 1.5 units */
  --space-4: 16px;  /* 2 units - BASE */
  --space-5: 20px;  /* 2.5 units */
  --space-6: 24px;  /* 3 units */
  --space-8: 32px;  /* 4 units */
  --space-10: 40px; /* 5 units */
  --space-12: 48px; /* 6 units */
  --space-16: 64px; /* 8 units */
  --space-20: 80px; /* 10 units */
  --space-24: 96px; /* 12 units */
}

/* ============================================
   7. CONTAINER SAFE AREA PADDING
   ============================================ */

.container {
  padding-left: max(16px, var(--safe-left));
  padding-right: max(16px, var(--safe-right));
}

@media (min-width: 768px) {
  .container {
    padding-left: max(24px, var(--safe-left));
    padding-right: max(24px, var(--safe-right));
  }
}

/* ============================================
   8. CONTRAST FIXES (WCAG 2.2)
   ============================================ */

/* Ensure muted text meets 4.5:1 contrast on dark bg */
.text-muted,
[style*="color:#64748b"],
[style*="color: #64748b"] {
  color: #94a3b8 !important; /* Upgraded from #64748b for contrast */
}

/* Focus visibility enhancement */
:focus-visible {
  outline: 2px solid var(--color-accent-primary, #6366f1);
  outline-offset: 2px;
}

/* High contrast focus for accessibility */
@media (prefers-contrast: high) {
  :focus-visible {
    outline: 3px solid #fff;
    outline-offset: 3px;
  }
}

/* ============================================
   9. BUTTON TOUCH SPACING
   ============================================ */

/* Ensure buttons have spacing between them */
.hero-ctas,
.cta-card__buttons,
.fp-cta-buttons {
  gap: max(var(--touch-target-spacing), 12px);
}

/* ============================================
   10. MOBILE-SPECIFIC ENHANCEMENTS
   ============================================ */

@media (max-width: 768px) {
  /* Larger tap targets for stats */
  .stat-item {
    min-height: 80px;
    padding: 16px;
  }
  
  /* Card padding consistency */
  .card,
  .department-card,
  .service-card,
  .value-card {
    padding: 20px;
  }
  
  /* CTA buttons full width with proper height */
  .hero-ctas a,
  .cta-card__buttons .btn,
  .fp-cta-buttons a {
    width: 100%;
    min-height: 52px;
    justify-content: center;
  }
  
  /* FAQ items - better touch targets */
  #faq .fp-grid-2 > div {
    padding: 24px;
  }
  
  /* Footer link spacing */
  .footer-links a {
    padding: 8px 0;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
}

@media (max-width: 480px) {
  /* Extra small screens - maximize readability */
  .container {
    padding-left: max(12px, var(--safe-left));
    padding-right: max(12px, var(--safe-right));
  }
  
  /* Ensure text doesn't touch edges */
  p, li, h1, h2, h3, h4, h5, h6 {
    word-break: break-word;
    overflow-wrap: break-word;
  }
}

/* ============================================
   11. PERFORMANCE HINTS
   ============================================ */

/* Content visibility for off-screen sections */
section:not(:first-of-type) {
  content-visibility: auto;
  contain-intrinsic-size: auto 500px;
}

/* Will-change for animated elements */
.btn:hover,
.card:hover {
  will-change: transform;
}

/* ============================================
   END OF MOBILE FIXES v1.3.1
   ============================================ */