/* ==========================================================================
   MOBILE-FRIENDLY & ACCESSIBILITY OVERRIDES
   Loaded after style.css on every page. Handles responsive layout,
   touch targets, font minimums, color contrast, and overflow control.
   ========================================================================== */

/* --- 1. Overflow control --- */
html, body {
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
}

/* --- 2. Responsive images --- */
img, video, svg {
  max-width: 100%;
  height: auto;
}

/* --- 3. Font-size floors --- */
body {
  font-size: 16px;
  line-height: 1.6;
}

/* Prevent iOS auto-zoom on inputs */
input, textarea, select {
  font-size: 16px;
}

/* --- 4. Touch target minimums (48px × 48px, 8px spacing) --- */
a, button, [role="button"], input[type="submit"], input[type="button"] {
  min-height: 44px;
  /* Applied via padding where inline; block elements use min-height */
}

/* Language switcher — enlarge flags for touch */
.lang-switcher a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  font-size: 20px !important;
  padding: 4px;
}

/* Nav links in mobile menu — ensure tappable */
.mobile-menu-overlay a {
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 16px;
  font-size: 18px;
}

/* --- 5. Color contrast fixes (WCAG AA on #050505 bg) --- */
/* text-zinc-800 (#27272a) → #a1a1aa (zinc-400) for dark bg visibility */
/* text-zinc-700 (#3f3f46) → #a1a1aa (zinc-400) for readability */
/* text-zinc-600 (#52525b) → #a1a1aa (zinc-400) for headings on dark bg */

/* Footer links and small text — ensure 4.5:1 minimum */
footer a,
footer span,
footer p {
  color: #a1a1aa !important; /* zinc-400 — 5.5:1 on #050505 */
}
footer a:hover {
  color: #ffffff !important;
}

/* --- 6. Directory page fixes --- */
.directory-grid a {
  font-size: 13px !important;
  padding: 10px 6px;
  min-height: 44px;
  display: flex;
  align-items: center;
  line-height: 1.4;
  color: #d4d4d8 !important; /* zinc-300 — 9.7:1 on #050505 */
}
.directory-grid a:hover {
  color: #4ade80 !important; /* green-400 */
}
.directory-grid {
  gap: 2px !important;
}

/* --- 7. Hamburger menu styles --- */
.hamburger-btn {
  display: none;
  align-items: center;
  justify-content: center;
  min-width: 48px;
  min-height: 48px;
  padding: 8px;
  color: #a1a1aa;
  background: none;
  border: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.mobile-menu-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(5, 5, 5, 0.97);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.mobile-menu-overlay.open {
  display: flex;
  opacity: 1;
}
.mobile-menu-overlay a {
  color: #fafafa;
  text-decoration: none;
  font-family: 'JetBrains Mono', monospace;
  font-size: 18px;
  letter-spacing: 0.05em;
  padding: 12px 24px;
  min-height: 48px;
  display: flex;
  align-items: center;
  transition: color 0.2s;
}
.mobile-menu-overlay a:hover {
  color: #22c55e;
}
.mobile-menu-close {
  position: absolute;
  top: 24px;
  right: 24px;
  min-width: 48px;
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #a1a1aa;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 28px;
}

/* --- 8. Media Queries --- */

/* Tablet & below */
@media (max-width: 768px) {
  /* Show hamburger, hide desktop nav */
  .hamburger-btn {
    display: flex;
  }
  .desktop-nav {
    display: none !important;
  }
  .desktop-cta {
    display: none !important;
  }
  
  /* Ensure adequate padding */
  .px-6 { padding-left: 16px; padding-right: 16px; }
  
  /* Single column grids */
  .directory-grid {
    grid-template-columns: 1fr !important;
  }
  
  /* Reduce h1 sizes for mobile */
  h1 {
    font-size: clamp(2rem, 8vw, 3.5rem);
    word-break: break-word;
  }
  
  /* Stack flex layouts */
  .nav-inner {
    flex-wrap: wrap;
    gap: 8px;
  }
}

/* Small mobile */
@media (max-width: 480px) {
  body {
    font-size: 16px;
  }
  
  h1 {
    font-size: clamp(1.75rem, 7vw, 2.5rem);
  }
  
  h2 {
    font-size: clamp(1.25rem, 5vw, 1.75rem);
  }
  
  /* Tighter padding on very small screens */
  .p-8 { padding: 16px; }
  .p-10 { padding: 16px; }
  .pt-40 { padding-top: 120px; }
  .pt-56 { padding-top: 120px; }
  .pb-32 { padding-bottom: 48px; }
  
  /* Stack pricing/service cards */
  .gap-12 { gap: 24px; }
  .gap-16 { gap: 24px; }
  
  /* Lang switcher stays accessible */
  .lang-switcher {
    gap: 4px;
  }
  .lang-switcher a {
    min-width: 40px;
    min-height: 40px;
    font-size: 18px !important;
  }
}

/* --- 9. Accessibility focus styles --- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid #22c55e;
  outline-offset: 2px;
}

/* --- 10. Prevent tiny text anywhere --- */
/* Override any text-[7px], text-[9px], text-[10px] on mobile */
@media (max-width: 768px) {
  .text-\[7px\],
  .text-\[9px\],
  .text-\[10px\] {
    font-size: 12px !important;
  }
}