/**
 * AlonDC.com common-styles.css Revised with Dual Navigation
 * Separate desktop and mobile navigation for conflict-free operation
 */

/* ============================================
   1. CSS CUSTOM PROPERTIES (Variables)
   ============================================ */
   :root {
    /* Colors */
    --color-primary: #3498db;
    --color-secondary: #4fc3f7;
    --color-text: #fff;
    --color-bg-dark: #1a1a1a;
    --color-bg-header: #181818;
    --color-bg-menu: rgba(34, 34, 34, 0.98);
    --color-border: #333;
    --color-border-light: #444;
    
    /* Spacing */
    --header-height: 60px;
    --header-padding: 15px 20px;
    --menu-item-padding: 18px 24px;
    
    /* Typography */
    --font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-weight-normal: 400;
    --font-weight-semibold: 600;
    
    /* Z-index scale */
    --z-header: 1000;
    --z-nav-desktop: 1001;
    --z-hamburger: 1002;
    --z-nav-mobile: 20000;
  }
  
  /* ============================================
     2. GLOBAL RESETS & BASE STYLES
     ============================================ */
  * {
    box-sizing: border-box;
  }
  
  html {
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100% !important;
    scroll-behavior: smooth;
  }
  
  body {
    background-color: var(--color-bg-dark) !important;
    margin: 0 !important;
    padding: 0 !important;
    font-family: var(--font-family);
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  
  /* Remove empty paragraphs */
  p:empty {
    display: none !important;
  }
  
  /* ============================================
     3. SITE HEADER STRUCTURE
     ============================================ */
  .site-header-wrapper {
    position: sticky;
    top: 0;
    z-index: var(--z-header);
    width: 100%;
    background-color: var(--color-bg-header);
    border-bottom: 1px solid var(--color-border);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }
  
  .site-header {
    background-color: var(--color-bg-header) !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  
  .site-header-inner {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    max-width: 1200px !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding: var(--header-padding) !important;
    height: var(--header-height) !important;
    box-sizing: border-box !important;
  }
  
  /* ============================================
     4. LOGO/BRANDING
     ============================================ */
  .site-branding {
    display: flex !important;
    align-items: center !important;
    height: 100% !important;
    z-index: var(--z-hamburger) !important;
  }
  
  #logo {
    display: flex !important;
    align-items: center !important;
    text-decoration: none !important;
    color: inherit !important;
    transition: opacity 0.2s ease !important;
  }
  
  #logo:hover {
    opacity: 0.8 !important;
  }
  
  .logo-text {
    font-size: 1.25rem !important;
    font-weight: var(--font-weight-semibold) !important;
    letter-spacing: 0.5px !important;
    transition: transform 0.3s ease !important;
  }
  
  #logo-dot {
    color: var(--color-secondary) !important;
    font-size: 1.5em !important;
    margin-left: 2px !important;
    transition: all 0.3s ease !important;
  }
  
  /* ============================================
     5. DESKTOP NAVIGATION (inside header)
     ============================================ */
  .desktop-nav {
    display: flex !important;
    align-items: center !important;
    height: 100% !important;
  }
  
  /* Hide mobile nav on desktop */
  .mobile-nav {
    display: none !important;
  }
  
  /* Desktop menu styles */
  .desktop-nav .main-menu,
  .desktop-nav .wp-block-navigation__container {
    list-style: none !important;
    display: flex !important;
    margin: 0 !important;
    padding: 0 !important;
    align-items: center !important;
    height: 100% !important;
    flex-direction: row !important;
  }

  @media (min-width: 901px) {
    .desktop-nav .main-menu,
    .desktop-nav .wp-block-navigation__container {
      gap: 32px !important;
    }
  }
  
  .desktop-nav .main-menu li,
  .desktop-nav .wp-block-navigation-item {
    margin: 0 !important;
    padding: 0 !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
  }
  
  .desktop-nav .main-menu a,
  .desktop-nav .wp-block-navigation-item__content {
    color: var(--color-text) !important;
    text-decoration: none !important;
    font-weight: var(--font-weight-semibold) !important;
    padding: 8px 12px !important;
    border-radius: 4px !important;
    transition: background 0.2s ease, color 0.2s ease !important;
    display: flex !important;
    align-items: center !important;
    height: auto !important;
  }
  
  .desktop-nav .main-menu a:hover,
  .desktop-nav .main-menu a:focus,
  .desktop-nav .wp-block-navigation-item__content:hover,
  .desktop-nav .wp-block-navigation-item__content:focus {
    background: var(--color-primary) !important;
    color: var(--color-text) !important;
  }
  
  .desktop-nav .current-menu-item > a,
  .desktop-nav .current_page_item > a {
    color: var(--color-secondary) !important;
    background: rgba(255, 255, 255, 0.1) !important;
  }
  
  /* ============================================
     6. MOBILE NAVIGATION TOGGLE
     ============================================ */
  .mobile-nav-toggle {
    display: none !important;
    background: none !important;
    border: none !important;
    cursor: pointer !important;
    padding: 8px !important;
    z-index: var(--z-hamburger) !important;
    position: relative !important;
    width: 44px !important;
    height: 44px !important;
    flex-shrink: 0 !important;
    align-items: center !important;
    justify-content: center !important;
  }
  
  .mobile-nav-toggle .hamburger {
    width: 24px !important;
    height: 2px !important;
    background: var(--color-text) !important;
    display: block !important;
    position: relative !important;
    transition: all 0.3s ease !important;
  }
  
  .mobile-nav-toggle .hamburger::before,
  .mobile-nav-toggle .hamburger::after {
    content: '' !important;
    width: 24px !important;
    height: 2px !important;
    background: var(--color-text) !important;
    position: absolute !important;
    left: 0 !important;
    transition: all 0.3s ease !important;
  }
  
  .mobile-nav-toggle .hamburger::before {
    top: -7px !important;
  }
  
  .mobile-nav-toggle .hamburger::after {
    top: 7px !important;
  }
  
  /* Hamburger animation when active */
  .mobile-nav-toggle.active .hamburger {
    background: transparent !important;
  }
  
  .mobile-nav-toggle.active .hamburger::before {
    transform: rotate(45deg) !important;
    top: 0 !important;
  }
  
  .mobile-nav-toggle.active .hamburger::after {
    transform: rotate(-45deg) !important;
    top: 0 !important;
  }
  
  /* ============================================
     7. MOBILE NAVIGATION OVERLAY
     ============================================ */
  #mobile-navigation {
    display: none !important;
    position: fixed !important;
    top: var(--header-height) !important;
    left: 0 !important;
    right: 0 !important;
    width: 100vw !important;
    min-height: 200px !important;
    max-height: calc(100vh - var(--header-height)) !important;
    background: var(--color-bg-menu) !important;
    z-index: var(--z-nav-mobile) !important;
    overflow-y: auto !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
    border-top: 1px solid var(--color-border-light) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
  }
  
  #mobile-navigation.open {
    display: block !important;
  }
  
  /* Mobile menu styles */
  .mobile-nav .mobile-menu,
  .mobile-nav .wp-block-navigation__container {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
  }
  
  .mobile-nav .mobile-menu li,
  .mobile-nav .wp-block-navigation-item {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    border-bottom: 1px solid var(--color-border) !important;
  }
  
  .mobile-nav .mobile-menu li:last-child,
  .mobile-nav .wp-block-navigation-item:last-child {
    border-bottom: none !important;
  }
  
  .mobile-nav .mobile-menu a,
  .mobile-nav .wp-block-navigation-item__content {
    display: block !important;
    width: 100% !important;
    padding: var(--menu-item-padding) !important;
    color: var(--color-text) !important;
    text-decoration: none !important;
    font-weight: var(--font-weight-semibold) !important;
    font-size: 1.1rem !important;
    background: none !important;
    border-radius: 0 !important;
    text-align: left !important;
    transition: background 0.2s ease !important;
  }
  
  .mobile-nav .mobile-menu a:hover,
  .mobile-nav .mobile-menu a:focus,
  .mobile-nav .wp-block-navigation-item__content:hover,
  .mobile-nav .wp-block-navigation-item__content:focus {
    background: var(--color-primary) !important;
    color: var(--color-text) !important;
  }
  
  .mobile-nav .current-menu-item > a,
  .mobile-nav .current_page_item > a {
    background: rgba(79, 195, 247, 0.1) !important;
    color: var(--color-secondary) !important;
  }
  
  /* ============================================
     8. RESPONSIVE BREAKPOINTS
     ============================================ */
  @media (max-width: 900px) {
    /* Hide desktop nav, show mobile toggle */
    .desktop-nav {
      display: none !important;
    }
    
    .mobile-nav-toggle {
      display: flex !important;
    }
    
    /* Ensure mobile nav can display when open */
    #mobile-navigation {
      display: none;
    }
    
    #mobile-navigation.open {
      display: block !important;
    }
    
    /* Adjust header padding on mobile */
    .site-header-inner {
      padding: 12px 16px !important;
    }
  }
  
  @media (max-width: 781px) {
    .site-header-inner {
      padding: 12px 16px !important;
    }
    
    .logo-text {
      font-size: 1.125rem !important;
    }
  }
  
  @media (max-width: 480px) {
    .site-header-inner {
      padding: 10px 12px !important;
    }
    
    .logo-text {
      font-size: 1rem !important;
    }
    
    .mobile-nav .mobile-menu a,
    .mobile-nav .wp-block-navigation-item__content {
      padding: 14px 16px !important;
      font-size: 1rem !important;
    }
  }
  
  /* ============================================
     9. UTILITY CLASSES & HELPERS
     ============================================ */
  .sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }
  
  /* Prevent body scroll when menu is open */
  body.menu-open {
    overflow: hidden !important;
  }
  
  /* ============================================
     10. PRINT STYLES
     ============================================ */
  @media print {
    .site-header-wrapper,
    .mobile-nav-toggle,
    #primary-navigation,
    #mobile-navigation {
      display: none !important;
    }
  }
  
  /* ============================================
     11. FOCUS & ACCESSIBILITY
     ============================================ */
  a:focus,
  button:focus {
    outline: 2px solid var(--color-primary) !important;
    outline-offset: 2px !important;
  }
  
  /* Reduce motion */
  @media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }
  
  /* ============================================
     12. CONTENT CONTAINERS
     ============================================ */
  .content-container {
    width: 100% !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 0 20px !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }
  
  #page,
  #main,
  .site-content {
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  
  /* Performance optimizations */
  .site-header-wrapper {
    contain: layout style;
    will-change: transform;
  }


/* ============================================
   MOBILE MENU FINAL FIX
   Replace the debug CSS with this version
   ============================================ */

   @media (max-width: 900px) {
    /* Ensure header doesn't clip the mobile menu */
    .site-header-wrapper,
    .site-header,
    .wp-block-group.site-header {
      overflow: visible !important;
    }
    
    /* Mobile navigation positioning and background */
    #primary-navigation.open {
      display: block !important;
      visibility: visible !important;
      opacity: 1 !important;
      position: fixed !important;
      top: 60px !important;
      left: 0 !important;
      right: 0 !important;
      width: 100vw !important;
      max-width: 100vw !important;
      height: auto !important;
      min-height: 200px !important;
      max-height: calc(100vh - 60px) !important;
      /* Solid dark background for readability */
      background: #1a1a1a !important;
      background: rgba(26, 26, 26, 0.98) !important;
      z-index: 99999 !important;
      padding: 0 !important;
      margin: 0 !important;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5) !important;
      border-top: 1px solid #444 !important;
      overflow-y: auto !important;
      -webkit-overflow-scrolling: touch !important;
    }
    
    /* Ensure menu container is visible */
    #primary-navigation.open .main-menu,
    #primary-navigation.open .wp-block-navigation__container,
    #primary-navigation.open ul {
      display: flex !important;
      flex-direction: column !important;
      width: 100% !important;
      visibility: visible !important;
      opacity: 1 !important;
      margin: 0 !important;
      padding: 0 !important;
      list-style: none !important;
      background: transparent !important;
    }
    
    /* Style the menu items */
    #primary-navigation.open .main-menu li,
    #primary-navigation.open .wp-block-navigation-item,
    #primary-navigation.open ul li {
      display: block !important;
      width: 100% !important;
      margin: 0 !important;
      padding: 0 !important;
      visibility: visible !important;
      opacity: 1 !important;
      border-bottom: 1px solid #333 !important;
      background: transparent !important;
    }
    
    #primary-navigation.open .main-menu li:last-child,
    #primary-navigation.open .wp-block-navigation-item:last-child,
    #primary-navigation.open ul li:last-child {
      border-bottom: none !important;
    }
    
    /* Ensure links are styled and visible with dark background */
    #primary-navigation.open .main-menu a,
    #primary-navigation.open .wp-block-navigation-item__content,
    #primary-navigation.open ul li a,
    #primary-navigation.open a {
      display: block !important;
      width: 100% !important;
      padding: 18px 24px !important;
      /* High contrast colors for visibility */
      color: #ffffff !important;
      background: transparent !important;
      text-decoration: none !important;
      font-size: 1.1rem !important;
      font-weight: 600 !important;
      text-align: left !important;
      visibility: visible !important;
      opacity: 1 !important;
      position: relative !important;
      z-index: 1 !important;
      transition: background 0.2s ease !important;
      /* Remove any text shadows that might affect readability */
      text-shadow: none !important;
    }
    
    /* Hover state with good contrast */
    #primary-navigation.open .main-menu a:hover,
    #primary-navigation.open .main-menu a:focus,
    #primary-navigation.open .wp-block-navigation-item__content:hover,
    #primary-navigation.open .wp-block-navigation-item__content:focus,
    #primary-navigation.open ul li a:hover,
    #primary-navigation.open ul li a:focus,
    #primary-navigation.open a:hover,
    #primary-navigation.open a:focus {
      background: #3498db !important;
      color: #ffffff !important;
    }
    
    /* Active/current page styling */
    #primary-navigation.open .current-menu-item > a,
    #primary-navigation.open .current_page_item > a {
      background: rgba(52, 152, 219, 0.2) !important;
      color: #4fc3f7 !important;
    }
    
    /* If menu appears behind other content, ensure proper layering */
    .site-content,
    .wp-block-cover,
    .entry-content > * {
      position: relative;
      z-index: 1;
    }
    
    #primary-navigation.open {
      z-index: 99999 !important;
    }
  }

/* ============================================
   MOBILE MENU HEIGHT NORMALIZATION FIX
   Add this after your existing mobile menu CSS
   ============================================ */

   @media (max-width: 900px) {
    /* Reset all possible height-affecting properties on menu items */
    #primary-navigation.open .main-menu li,
    #primary-navigation.open .wp-block-navigation-item,
    #primary-navigation.open ul li,
    #primary-navigation.open li {
      /* Force consistent height */
      min-height: auto !important;
      max-height: none !important;
      height: auto !important;
      line-height: normal !important;
      /* Remove any extra spacing */
      padding: 0 !important;
      margin: 0 !important;
    }
    
    /* Remove any submenu containers or extra wrappers */
    #primary-navigation.open .sub-menu,
    #primary-navigation.open .wp-block-navigation__submenu-container,
    #primary-navigation.open .wp-block-navigation-submenu,
    #primary-navigation.open ul ul {
      display: none !important;
    }
    
    /* Ensure only the anchor tags provide the height/padding */
    #primary-navigation.open a {
      display: block !important;
      width: 100% !important;
      padding: 18px 24px !important;
      margin: 0 !important;
      line-height: 1.4 !important;
      box-sizing: border-box !important;
    }
    
    /* Remove any ::before or ::after elements that might add height */
    #primary-navigation.open li::before,
    #primary-navigation.open li::after,
    #primary-navigation.open .wp-block-navigation-item::before,
    #primary-navigation.open .wp-block-navigation-item::after {
      display: none !important;
    }
    
    /* If WordPress is adding button wrappers, normalize them */
    #primary-navigation.open button.wp-block-navigation-item__content {
      display: block !important;
      width: 100% !important;
      padding: 18px 24px !important;
      margin: 0 !important;
      background: transparent !important;
      border: none !important;
      text-align: left !important;
      font-size: 1.1rem !important;
      font-weight: 600 !important;
      color: #ffffff !important;
      cursor: pointer !important;
      line-height: 1.4 !important;
    }
    
    /* Handle any flex containers that might be adding space */
    #primary-navigation.open .wp-block-navigation-item__content-container,
    #primary-navigation.open .wp-block-navigation__container {
      display: block !important;
      padding: 0 !important;
      margin: 0 !important;
    }
    
    /* Specific fix for social media links if they have icons */
    #primary-navigation.open .menu-item-type-custom a {
      display: block !important;
      padding: 18px 24px !important;
    }
    
    /* Remove any icon spacing if present */
    #primary-navigation.open svg,
    #primary-navigation.open .dashicon,
    #primary-navigation.open .fa {
      margin: 0 !important;
      vertical-align: middle !important;
    }
  }