/*-----------------------------------*\
 * Mobile Navigation Fix
 * Fixes burger menu visibility issue on tablets/mobile
 * This file is loaded after style.css to override conflicting rules
\*-----------------------------------*/

/* Ensure burger menu is visible on ALL mobile/tablet devices under 1200px */
@media (max-width: 1199px) {
  /* Force burger menu button to be visible */
  button.header-action-btn[data-nav-toggler],
  .header-action-btn[data-nav-toggler] {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    background: none !important;
    border: none !important;
    color: var(--eerie-black-1) !important;
    font-size: 28px !important;
    cursor: pointer !important;
    padding: 8px !important;
    z-index: 1001 !important;
    position: relative !important;
    transition: var(--transition-1);
  }
  
  button.header-action-btn[data-nav-toggler]:hover,
  .header-action-btn[data-nav-toggler]:hover {
    color: var(--kappel) !important;
  }
  
  /* Ensure the navbar is properly hidden initially on mobile */
  nav.navbar[data-navbar],
  .navbar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    max-width: 320px !important;
    height: 100vh !important;
    background-color: #ffffff !important;
    z-index: 1000 !important;
    transform: translateX(-100%) !important;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: 2px 0 10px rgba(0,0,0,0.1) !important;
    overflow-y: auto !important;
  }
  
  /* Active state for mobile navbar */
  nav.navbar.active[data-navbar],
  .navbar.active {
    transform: translateX(0) !important;
  }
  
  /* Overlay styles */
  .overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    pointer-events: none;
  }
  
  .overlay.active {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }
  
  /* Prevent body scroll when mobile nav is active */
  body.nav-active {
    overflow: hidden;
  }
  
  /* Close button styling */
  .nav-close-btn {
    background: none;
    border: none;
    color: var(--eerie-black-1);
    font-size: 28px;
    cursor: pointer;
    padding: 8px;
    border-radius: 50%;
    transition: var(--transition-1);
  }
  
  .nav-close-btn:hover {
    color: var(--kappel);
    background-color: rgba(43, 169, 155, 0.1);
  }
  
  /* Mobile navigation wrapper */
  .navbar .wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    border-bottom: 1px solid var(--platinum);
  }
  
  /* Mobile navigation list */
  .navbar-list {
    display: block;
    padding: 20px;
    margin: 0;
    list-style: none;
  }
  
  .navbar-item {
    border-bottom: 1px solid var(--platinum);
  }
  
  .navbar-link {
    display: block;
    padding: 15px 0;
    color: var(--eerie-black-1);
    text-decoration: none;
    font-weight: 500;
    font-size: 16px;
    transition: color 0.3s ease;
  }
  
  .navbar-link:hover {
    color: var(--kappel);
  }
}

/* Smaller mobile devices */
@media (max-width: 575px) {
  .navbar {
    max-width: 280px !important;
  }
  
  .navbar .wrapper {
    padding: 15px !important;
  }
  
  .navbar-list {
    padding: 15px !important;
  }
  
  .navbar-link {
    padding: 12px 0 !important;
    font-size: 15px !important;
  }
}

/* Debugging helper - remove after testing */
@media (max-width: 1199px) {
  /* Add a visual indicator that the fix is loaded */
  .header-action-btn[data-nav-toggler]::after {
    /* Empty - just ensures the selector works */
  }
}