/* Mobile Menu Fix for MATRIX CBS */
/* iOS and Android compatible */

/* Ensure mobile menu is visible when open */
@media (max-width: 1023px) {
  /* Mobile menu container - show when has 'open' class */
  .mobile-menu-open {
    max-height: 400px !important;
    opacity: 1 !important;
  }
  
  /* Header background for better readability */
  header {
    background: linear-gradient(to bottom, rgba(17, 24, 39, 0.98), rgba(17, 24, 39, 0.95)) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }
  
  /* Mobile menu dropdown styling */
  header nav + div {
    background: rgba(17, 24, 39, 0.98);
    border-radius: 0 0 16px 16px;
    margin-top: 8px;
    border-top: 1px solid rgba(232, 90, 36, 0.3);
  }
  
  /* Mobile menu links - make them readable */
  header nav + div a {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.05) !important;
    margin-bottom: 4px;
    border-radius: 8px;
  }
  
  header nav + div a:hover,
  header nav + div a:active {
    color: #e85a24 !important;
    background: rgba(255, 255, 255, 0.1) !important;
  }
  
  /* Active link style */
  header nav + div a.text-primary {
    color: #e85a24 !important;
    background: rgba(232, 90, 36, 0.15) !important;
  }
  
  /* Hamburger menu button - always visible */
  button[aria-label="Menü megnyitása"],
  button[aria-label="Menü bezárása"] {
    color: #ffffff !important;
    background: rgba(232, 90, 36, 0.2);
    border-radius: 8px;
    padding: 8px;
  }
  
  /* Cookie banner mobile optimization */
  .cookie-banner {
    padding: 16px !important;
    font-size: 14px;
  }
  
  .cookie-banner .container {
    padding: 0 !important;
  }
  
  .cookie-banner button {
    padding: 10px 16px !important;
    font-size: 13px !important;
  }
}

/* iOS Safari specific fixes */
@supports (-webkit-touch-callout: none) {
  header {
    position: fixed !important;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
}

/* Small phones (iPhone SE, etc.) */
@media (max-width: 375px) {
  header nav + div a {
    padding: 12px 16px !important;
    font-size: 14px;
  }
  
  .cookie-banner {
    font-size: 12px;
  }
}

/* Landscape mode */
@media (max-height: 500px) and (orientation: landscape) {
  header nav + div {
    max-height: 200px;
    overflow-y: auto;
  }
}