/* ================================================================
   HAYAT — Mobile Nav Fix
   Upload as: assets/css/mobile-nav-fix.css
   Add to enqueue.php LAST (after a11y-fixes)
   
   Fixes:
   1. ARIA: visibility:hidden removes elements from accessibility 
      tree — no need for aria-hidden or tabindex manipulation
   2. Mobile menu: animation works correctly with visibility approach
   ================================================================ */

/* Override the transform approach with visibility approach */
.mobile-nav {
  /* Keep position:fixed and layout */
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  /* Smooth transition */
  transition:
    visibility 0s linear 0.35s,
    opacity var(--transition-slow),
    transform var(--transition-slow);
  /* Keep the slide-in effect */
  transform: translateX(100%);
}

.mobile-nav.open {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0);
  /* Remove transition delay when opening */
  transition:
    visibility 0s linear 0s,
    opacity var(--transition-slow),
    transform var(--transition-slow);
}

/* Overlay also uses visibility */
.mobile-overlay {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition:
    visibility 0s linear 0.35s,
    opacity var(--transition-slow);
}

.mobile-overlay.open {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transition:
    visibility 0s linear 0s,
    opacity var(--transition-slow);
}

/* WHATSAPP sticky contrast fix — ensure it overrides */
.sticky-whatsapp {
  background: #128C7E !important;
  color: #FFFFFF !important;
}

.desktop-whatsapp-bubble {
  background: #128C7E !important;
}