/* =====================================================
   MOBILE RESPONSIVENESS FIXES
   Fixes for navigation menu and bottom CTA bar
   ===================================================== */

/* =====================================================
   1. BODY - Add padding-bottom for fixed CTA bar
   ===================================================== */
@media (max-width: 767px) {
  body {
    /* h-16 = 4rem = 64px for the mobile CTA bar */
    padding-bottom: 64px;
    /* Ensure overflow is handled properly */
    overflow-x: hidden;
  }
}

/* =====================================================
   2. MOBILE NAVIGATION MENU - Ensure visibility
   ===================================================== */
@media (max-width: 1023px) {
  /* Header stays fixed and accessible */
  header {
    width: 100%;
    max-width: 100%;
    z-index: 50;
    overflow: visible;
  }

  /* Mobile menu - use fixed positioning for full viewport coverage */
  #mobile-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    max-width: 100%;
    z-index: 40;
    
    /* Smooth transitions */
    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
  }

  /* Prevent body scroll when menu is open */
  body.menu-open {
    overflow: hidden;
  }
}

/* =====================================================
   3. MOBILE CTA BAR - Bottom fixed bar
   ===================================================== */
@media (max-width: 767px) {
  .fixed.bottom-0.left-0.w-full.h-16 {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 64px;
    max-width: 100%;
    z-index: 60;
    
    /* Ensure it stays at bottom */
    right: 0;
    
    /* Prevent overflow */
    overflow: hidden;
    box-sizing: border-box;
  }

  /* Ensure buttons/links inside don't overflow */
  .fixed.bottom-0.left-0.w-full.h-16 > a,
  .fixed.bottom-0.left-0.w-full.h-16 > button {
    font-size: 0.65rem;
    word-break: break-word;
    min-height: 64px;
    flex-wrap: wrap;
    padding: 0 0.5rem;
  }
}

/* =====================================================
   4. COOKIE BANNER - Fixed positioning
   ===================================================== */
@media (max-width: 767px) {
  #cookie-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    max-width: 100%;
    z-index: 100;
    
    /* Ensure it overlays CTA bar when visible */
    padding: 1rem;
    box-sizing: border-box;
  }

  #cookie-banner .text-sm {
    font-size: 0.75rem;
  }

  #cookie-banner button {
    font-size: 0.65rem;
    padding: 0.5rem 1rem;
  }
}

/* =====================================================
   5. VERY SMALL SCREENS (320px - 359px)
   ===================================================== */
@media (max-width: 359px) {
  /* Reduce margin padding on very small devices */
  header .max-w-\[1400px\],
  section .max-w-\[1400px\] {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }

  /* Reduce font sizes in mobile menu */
  #mobile-menu a {
    font-size: 1rem;
  }

  /* Reduce button text size in CTA bar */
  .fixed.bottom-0.left-0.w-full.h-16 > a {
    font-size: 0.6rem;
    padding: 0.25rem;
    gap: 0.25rem;
  }

  .fixed.bottom-0.left-0.w-full.h-16 .material-symbols-outlined {
    font-size: 1rem !important;
  }
}

/* =====================================================
   6. HEADER POSITIONING FIX
   ===================================================== */
@media (max-width: 1023px) {
  /* Ensure header doesn't have negative offsets */
  header {
    top: 0;
    right: auto;
    left: 0;
    width: 100%;
    max-width: 100%;
  }

  /* Menu button always visible and positioned correctly */
  #menu-btn {
    position: relative;
    z-index: 51;
    right: auto;
    left: auto;
  }
}

/* =====================================================
   7. LOGO/BRANDING IN HEADER
   ===================================================== */
@media (max-width: 1023px) {
  header a[href="#"] {
    z-index: 51;
  }

  /* Prevent logo from getting squished */
  header img {
    max-height: 3rem;
    width: auto;
  }
}

/* =====================================================
   8. BACK-TO-TOP BUTTON - Don't overlap CTA bar
   ===================================================== */
@media (max-width: 767px) {
  #backToTop {
    bottom: 80px;
    right: 1rem;
  }
}

/* =====================================================
   9. PROGRESS BAR - Ensure visibility
   ===================================================== */
@media (max-width: 767px) {
  #progress-bar {
    height: 2px;
    z-index: 100;
    top: 0;
    left: 0;
    width: 0;
  }
}

/* =====================================================
   10. MAIN CONTENT - Responsiveness with fixed elements
   ===================================================== */
@media (max-width: 767px) {
  section,
  footer {
    box-sizing: border-box;
    /* Ensure content doesn't hide under fixed header (80px estimate) */
    scroll-margin-top: 80px;
  }

  /* Ensure links use correct colors for visibility */
  a {
    word-break: break-word;
  }
}

/* =====================================================
   11. OVERFLOW & SCROLL FIXES
   ===================================================== */
@media (max-width: 767px) {
  /* Prevent horizontal scroll on mobile */
  html {
    overflow-x: hidden;
  }

  body {
    overflow-x: hidden;
    width: 100%;
    max-width: 100%;
  }

  /* Ensure no elements exceed viewport width */
  [class*="w-screen"] {
    width: 100vw;
    max-width: 100%;
  }
}