/* Navigation Fixes
   Fixes for desktop navbar scroll and mobile menu full-screen issues
   ================================================================== */

/* ===========================================
   DESKTOP NAVBAR FIX
   Override Webflow scroll animation that hides the navbar
   =========================================== */
@media screen and (min-width: 992px) {
  .desktop-nav {
    /* Override any transform applied by Webflow JS */
    transform: none !important;
    /* Use fixed positioning since sticky doesn't work with body overflow */
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    /* Keep navbar visible */
    opacity: 1 !important;
    visibility: visible !important;
    /* Ensure it stays on top */
    z-index: 9999 !important;
  }

  /* Add padding to the content to account for fixed navbar */
  .page-dots-bg {
    padding-top: 80px;
  }
}

/* ===========================================
   MOBILE EVENT PAGE HERO FIX
   Reduce excessive padding on event page hero section
   =========================================== */
@media screen and (max-width: 991px) {
  ._50-50-hero {
    padding-top: 80px !important;
  }
}

/* ===========================================
   MOBILE MENU FULL-SCREEN FIX
   Make mobile menu cover entire screen including header
   =========================================== */
@media screen and (max-width: 991px) {
  /* When mobile menu is open, overlay should cover full screen */
  .w-nav-overlay {
    top: 0 !important;
    height: 100vh !important;
    height: 100dvh !important; /* Dynamic viewport height for mobile browsers */
  }

  /* Nav menu should start from top of screen */
  .nav-menu {
    padding-top: 80px; /* Add padding to account for close button area */
    height: 100vh !important;
    height: 100dvh !important;
  }

  /* Position mobile navigation button at bottom */
  .mobile-navigation {
    z-index: 9999999 !important;
  }

  /* Ensure the mobile menu slideout covers full screen */
  .mobile-menu-slideout {
    top: 0 !important;
    height: 100vh !important;
    height: 100dvh !important;
  }
}