/**
 * Navigation Component Styles
 * 
 * This file contains styles specific to the navigation component.
 * It imports the main variables and uses them for styling.
 */

 @import url('../../assets/css/main-variables.css');

 .site-header {
   padding: var(--spacing-10) var(--spacing-8);
   position: relative;
   z-index: 100;
   transition: all 0.3s ease;
   background-color: transparent;
 }

 /* Admin bar adjustments - removed all the complex approaches */

 /* Sticky navigation styles */
 .site-header.is-sticky {
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   /* Glassmorphism with your actual primary-900 color */
   background-color: rgba(15, 58, 54, 0.85); /* #0f3a36 with 85% opacity */
   backdrop-filter: blur(10px);
   -webkit-backdrop-filter: blur(10px);
   padding: var(--spacing-4) var(--spacing-8);
   box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1), 
               inset 0 1px 0 0 rgba(255, 255, 255, 0.1);
   transform: translateY(0);
   transition: transform 0.3s ease, padding 0.3s ease, background-color 0.3s ease, backdrop-filter 0.3s ease;
   border-bottom: 1px solid rgba(255, 255, 255, 0.1);
 }

 /* Admin bar adjustments for sticky header */
 .admin-bar .site-header.is-sticky {
   top: 32px;
 }

 @media (max-width: 782px) {
   .admin-bar .site-header.is-sticky {
     top: 46px;
   }
 }
 
 /* Mobile-specific admin bar adjustment for hamburger-only sticky */
 @media (max-width: 1080px) {
   .admin-bar .is-sticky .main-navigation {
     /* Add some margin to account for admin bar */
     margin-top: var(--spacing-2);
   }
 }

 /* Fallback for browsers that don't support backdrop-filter */
 @supports not (backdrop-filter: blur(10px)) {
   .site-header.is-sticky {
     background-color: rgba(15, 58, 54, 0.95); /* Slightly less transparent as fallback */
   }
 }

 .site-header.is-sticky.is-hidden {
   transform: translateY(-100%);
 }

 /* Add padding to body when nav is sticky */
 body.has-sticky-nav {
   padding-top: 100px; /* Adjust based on your nav height */
 }
 
 .site-header .container {
   display: flex;
   justify-content: space-between;
   align-items: center;
 }
 
 .site-branding {
   display: flex;
   align-items: center;
 }
 
 .site-logo {
  max-height: 130px;
  width: auto;
  position: absolute;
  left: 30px;
  top: 20px;
  transition: all 0.3s ease;
 }

 /* Smaller logo when sticky */
 .is-sticky .site-logo {
   max-height: 91px; /* 70% of 130px */
   top: 50%;
   transform: translateY(-50%);
 }

.site-logo:hover {
  transform: scale(1.05);
}

.is-sticky .site-logo:hover {
  transform: translateY(-50%) scale(1.05);
}
 
 .site-title {
   font-family: var(--font-heading);
   font-size: var(--font-size-h5);
   font-weight: var(--font-weight-bold);
   margin: 0;
   transition: font-size 0.3s ease;
 }

 .is-sticky .site-title {
   font-size: var(--font-size-h6);
 }
 
 .main-navigation {
   display: flex;
   align-items: center;
   position: relative;
 }
 
 .primary-menu {
   display: flex;
   list-style: none;
   margin: 0;
   padding: 0;
   align-items: center; /* Vertically center all items */
 }

 /* Override global list styles for navigation */
 .primary-menu,
 .primary-menu .sub-menu {
   list-style: none !important;
   padding-left: 0 !important;
   margin-top: 0 !important;
   margin-bottom: 0 !important;
 }
 
 .primary-menu li,
 .primary-menu .sub-menu li {
   margin: 0 var(--spacing-2);
   position: relative;
   padding-left: 0 !important;
   margin-bottom: 0 !important;
   display: flex; /* Make list items flex containers */
   align-items: center; /* Center their content vertically */
 }

 /* Remove the custom bullet points from navigation */
 .primary-menu li::before,
 .primary-menu .sub-menu li::before {
   display: none !important;
   content: none !important;
 }
 
 .primary-menu a {
   text-decoration: none;
   font-family: var(--font-primary);
   font-size: var(--font-size-medium);
   font-weight: var(--font-weight-medium);
   color: var(--gray-50) !important;
   padding: var(--spacing-2) 0;
   display: block;
   transition: color 0.2s ease, padding 0.3s ease;
   text-decoration: none !important;
 }

 /* Adjust padding for sticky nav */
 .is-sticky .primary-menu a {
   padding: var(--spacing-1) 0;
 }
 
 .primary-menu a:hover {
  color: var(--secondary-200) !important;
  text-decoration: none !important;
 }

 .primary-menu a:focus {
  outline: 2px solid var(--secondary-200);
  outline-offset: 2px;
 }
 
 /* Dropdown indicator for items with children */
 .primary-menu .menu-item-has-children > a::after {
   content: '';
   display: inline-block;
   width: 0;
   height: 0;
   margin-left: var(--spacing-2);
   vertical-align: middle;
   border-top: 4px solid currentColor;
   border-right: 4px solid transparent;
   border-left: 4px solid transparent;
   transition: transform 0.3s ease;
 }

 .primary-menu .menu-item-has-children:hover > a::after {
   transform: rotate(180deg);
 }

 /* Sub-menu styling */
 .primary-menu .sub-menu {
   position: absolute;
   top: calc(100% + 10px);
   left: 50%;
   transform: translateX(-50%) translateY(10px);
   background-color: var(--primary-900);
   min-width: 220px;
   padding: var(--spacing-3) 0;
   margin: 0;
   list-style: none;
   border-radius: var(--radius-lg);
   box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
   opacity: 0;
   visibility: hidden;
   transition: all 0.3s ease;
   z-index: 100;
   border: 1px solid rgba(255, 255, 255, 0.1);
 }

 /* Adjust sub-menu position for sticky nav */
 .is-sticky .primary-menu .sub-menu {
   top: calc(100% + 5px);
 }

 /* Dropdown arrow/caret */
 .primary-menu .sub-menu::before {
   content: '';
   position: absolute;
   top: -8px;
   left: 50%;
   transform: translateX(-50%);
   width: 0;
   height: 0;
   border-left: 8px solid transparent;
   border-right: 8px solid transparent;
   border-bottom: 8px solid var(--primary-900);
 }
 
 .primary-menu li:hover > .sub-menu {
   opacity: 1;
   visibility: visible;
   transform: translateX(-50%) translateY(0);
 }
 
 .primary-menu .sub-menu li {
   margin: 0;
   width: 100%;
 }
 
 .primary-menu .sub-menu a {
   padding: var(--spacing-3) var(--spacing-6);
   font-size: var(--font-size-small);
   color: var(--gray-100) !important;
   transition: all 0.2s ease;
   position: relative;
   overflow: hidden;
   transition: all 0.2s ease, transform 0.2s ease;
 }

 .primary-menu .sub-menu a:hover {
   color: var(--secondary-200) !important;
   transform: translateX(var(--spacing-2));
 }

 /* Multi-level dropdown support */
 .primary-menu .sub-menu .sub-menu {
   top: 0;
   left: 100%;
   transform: translateX(10px);
   margin-left: 10px;
 }

 .primary-menu .sub-menu .menu-item-has-children > a::after {
   content: '';
   position: absolute;
   right: var(--spacing-4);
   top: 50%;
   transform: translateY(-50%);
   width: 0;
   height: 0;
   border-top: 4px solid transparent;
   border-bottom: 4px solid transparent;
   border-left: 4px solid currentColor;
   margin-left: 0;
 }

 .primary-menu .sub-menu li:hover > .sub-menu {
   opacity: 1;
   visibility: visible;
   transform: translateX(0);
 }
 
 /* Navigation button */
 .nav-button {
   margin-left: var(--spacing-6);
   transition: margin 0.3s ease;
 }

 .is-sticky .nav-button {
   margin-left: var(--spacing-4);
 }
 
 .nav-button:hover {
   opacity: 0.9;
 }

 /* Nav Button Menu Item Fixes */
 /* Style nav-button menu items */
 .primary-menu li.nav-button,
 .footer-menu li.nav-button {
   margin-left: var(--spacing-6);
 }

 .is-sticky .primary-menu li.nav-button {
   margin-left: var(--spacing-4);
 }

 /* Apply button styles to the link inside nav-button items */
 .primary-menu li.nav-button > a,
 .footer-menu li.nav-button > a {
  padding: var(--spacing-3) var(--spacing-10);
  font-size: var(--font-size-btn-medium);
  font-weight: var(--font-weight-black) !important;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
  white-space: nowrap;
  background-color: var(--primary-500);
  color: var(--gray-50) !important;
  border-radius: var(--radius-sm);
 }

 /* Smaller button in sticky nav */
 .is-sticky .primary-menu li.nav-button > a {
   padding: var(--spacing-2) var(--spacing-8);
   font-size: var(--font-size-btn-small);
 }

 .primary-menu li.nav-button > a:hover,
 .footer-menu li.nav-button > a:hover {
   background-color: var(--primary-700);
   color: var(--gray-50) !important;
   transform: translateY(-1px);
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
 }

 /* Prevent current-menu-item styling from affecting nav buttons */
 .primary-menu li.nav-button.current-menu-item > a,
 .primary-menu li.nav-button.current-page-ancestor > a,
 .footer-menu li.nav-button.current-menu-item > a,
 .footer-menu li.nav-button.current-page-ancestor > a {
   background-color: var(--primary-500) !important;
   color: var(--gray-50) !important;
   font-weight: var(--font-weight-black) !important;
   /* Reset any text decoration or other styles that might be applied */
   text-decoration: none !important;
   border: none !important;
   outline: none !important;
 }

 /* Ensure hover state works even on current page */
 .primary-menu li.nav-button.current-menu-item > a:hover,
 .primary-menu li.nav-button.current-page-ancestor > a:hover,
 .footer-menu li.nav-button.current-menu-item > a:hover,
 .footer-menu li.nav-button.current-page-ancestor > a:hover {
   background-color: var(--primary-700) !important;
   color: var(--gray-50) !important;
 }

 /* Remove default link styles that might interfere */
 .primary-menu li.nav-button > a::after,
 .footer-menu li.nav-button > a::after {
   display: none !important;
 }
 
 /* Mobile menu toggle */
 .menu-toggle {
   display: none;
   background: none;
   border: none;
   cursor: pointer;
   padding: var(--spacing-2);
   margin-right: var(--spacing-4);
   color: var(--gray-50);
   z-index: 99999; /* Match WordPress admin bar z-index */
   position: relative;
 }
 
 .hamburger-icon {
   display: block;
   position: relative;
   width: 24px;
   height: 2px;
   background-color: currentColor;
   transition: all 0.3s ease;
 }
 
 .hamburger-icon:before,
 .hamburger-icon:after {
   content: '';
   position: absolute;
   width: 24px;
   height: 2px;
   background-color: currentColor;
   transition: all 0.3s ease;
 }
 
 .hamburger-icon:before {
   top: -8px;
 }
 
 .hamburger-icon:after {
   bottom: -8px;
 }
 
 .menu-toggle[aria-expanded="true"] .hamburger-icon {
   background-color: transparent;
 }
 
 .menu-toggle[aria-expanded="true"] .hamburger-icon:before {
   transform: rotate(45deg);
   top: 0;
 }
 
 .menu-toggle[aria-expanded="true"] .hamburger-icon:after {
   transform: rotate(-45deg);
   bottom: 0;
 }
 
 .screen-reader-text {
   position: absolute;
   width: 1px;
   height: 1px;
   padding: 0;
   margin: -1px;
   overflow: hidden;
   clip: rect(0, 0, 0, 0);
   white-space: nowrap;
   border: 0;
 }

 /* Footer Navigation Specific Styles */
 .footer-nav {
   display: flex;
   align-items: center;
   gap: var(--spacing-4);
 }

 .footer-nav .primary-menu,
 .footer-menu {
   display: flex;
   list-style: none !important;
   margin: 0 !important;
   padding: 0 !important;
   align-items: center;
   flex-wrap: wrap;
   gap: var(--spacing-4);
 }

 .footer-nav .primary-menu li,
 .footer-menu li {
   margin: 0 !important;
   padding: 0 !important;
 }

 .footer-nav .primary-menu li::before,
 .footer-menu li::before {
   display: none !important;
 }

 /* Hide dropdown indicators in footer */
 .footer-nav .menu-item-has-children > a::after,
 .footer-menu .menu-item-has-children > a::after,
 .footer-nav .dropdown-arrow,
 .footer-menu .dropdown-arrow {
   display: none !important;
 }

 /* Ensure no sub-menus show in footer */
 .footer-nav .sub-menu,
 .footer-menu .sub-menu {
   display: none !important;
 }

 /* Footer navigation button */
 .footer-nav .nav-button {
   margin-left: var(--spacing-4);
   white-space: nowrap;
 }

 /* Prevent body scroll when menu is open */
 html.menu-open,
 body.menu-open {
   overflow: hidden !important;
   position: relative !important;
 }

 body.menu-open {
   width: 100% !important;
 }

 /* iOS specific fixes */
 body.no-scroll {
   position: fixed !important;
   overflow: hidden !important;
   width: 100% !important;
   height: 100% !important;
 }

 /* Prevent background interaction */
 body.menu-open > *:not(.site-header) {
   pointer-events: none;
   user-select: none;
 }

 /* Re-enable interaction for the header */
 body.menu-open .site-header,
 body.menu-open .site-header * {
   pointer-events: auto;
   user-select: auto;
 }
 
 /* Responsive Styles */
 @media (max-width: 1080px) {
   .site-header {
     padding: var(--spacing-3) var(--spacing-4);
   }

   /* Mobile sticky navigation - just the hamburger */
   .site-header.is-sticky {
     padding: 0;
     background: transparent;
     backdrop-filter: none;
     -webkit-backdrop-filter: none;
     box-shadow: none;
     border: none;
   }
   
   /* Hide everything except menu toggle when sticky on mobile */
   .is-sticky .site-branding,
   .is-sticky .container > *:not(.main-navigation) {
     display: none;
   }
   
   /* Position the navigation to the right */
   .is-sticky .container {
     justify-content: flex-end;
   }
   
   /* Style the hamburger container when sticky */
   .is-sticky .main-navigation {
     background-color: rgba(15, 58, 54, 0.95);
     backdrop-filter: blur(10px);
     -webkit-backdrop-filter: blur(10px);
     padding: var(--spacing-3);
     border-radius: var(--radius-md);
     box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
     margin-right: var(--spacing-4);
     transition: all 0.3s ease;
   }
   
   /* Ensure hamburger is visible */
   .is-sticky .menu-toggle {
     margin: 0;
     color: var(--gray-50);
   }

   body.has-sticky-nav {
     padding-top: 70px;
   }
   
   .menu-toggle {
     display: block;
     z-index: 99999; /* Higher than overlay and admin bar */
     position: relative;
   }
   
   /* Admin bar adjustment for menu toggle - only when menu is open */
   .admin-bar .menu-toggle[aria-expanded="true"] {
     top: 32px;
   }
   
   @media (max-width: 782px) {
     .admin-bar .menu-toggle[aria-expanded="true"] {
       top: 46px; /* Mobile admin bar height */
     }
   }
   
   .main-navigation {
     position: static; /* Changed from relative */
   }
   
   /* Full screen overlay */
   .primary-menu {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100vh;
     /* Glassmorphism effect for mobile menu with correct color */
     background-color: rgba(15, 58, 54, 0.98); /* Slightly more opaque for full screen */
     backdrop-filter: blur(20px);
     -webkit-backdrop-filter: blur(20px);
     flex-direction: column;
     justify-content: flex-start; /* Changed from center to flex-start */
     align-items: center;
     padding: var(--spacing-16) var(--spacing-8) !important; /* Added top/bottom padding */
     opacity: 0;
     visibility: hidden;
     transition: all 0.3s ease;
     z-index: 99998; /* Just below toggle button */
     overflow-y: auto;
     -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
     /* Remove border radius and adjust shadow for full screen */
     border-radius: 0;
     box-shadow: none;
   }
   
   .primary-menu.active {
     opacity: 1;
     visibility: visible;
   }
   
   /* Add extra top padding when admin bar is present */
   .admin-bar .primary-menu {
     padding-top: calc(var(--spacing-16) + 32px) !important;
   }
   
   @media (max-width: 782px) {
     .admin-bar .primary-menu {
       padding-top: calc(var(--spacing-16) + 46px) !important;
     }
   }
   
   /* Remove the redundant close button pseudo-element */
   .primary-menu::before {
     display: none !important;
     content: none !important;
   }
   
   /* Inner wrapper to handle padding properly */
   .primary-menu.active::after {
     content: '';
     display: block;
     height: var(--spacing-16); /* Bottom padding for scrollable content */
   }
   
   /* Center menu items */
   .primary-menu li {
     margin: var(--spacing-2) 0 !important; /* Reduced from spacing-4 */
     width: 90%; /* Added width constraint */
     text-align: center;
     display: block !important; /* Override desktop flex */
     border-bottom: 1px solid rgba(255, 255, 255, 0.1); /* Add separator line */
     padding-bottom: var(--spacing-2); /* Add padding for the border */
   }
   
   /* Remove border from last item and nav button */
   .primary-menu > li:last-child,
   .primary-menu li.nav-button {
     border-bottom: none;
   }
   
   /* Keep original nav link styling but make larger */
   .primary-menu > li > a {
     padding: var(--spacing-4) var(--spacing-6) !important; /* Increased padding */
     font-size: calc(var(--font-size-medium) * 1.5) !important; /* 50% larger */
     display: inline-block;
     position: relative;
     transition: all 0.3s ease;
   }
   
   /* Remove hover transform on mobile */
   .primary-menu a:hover {
     transform: none !important;
   }
   
   /* Remove focus outline on parent items in mobile menu */
   @media (max-width: 1080px) {
     .primary-menu li.menu-item-has-children > a:focus {
       outline: none !important;
       box-shadow: none !important;
     }

     .site-logo {
      top:0;
     }
   }
   
   /* Tighter spacing for items with children */
   .primary-menu li.menu-item-has-children {
     padding-bottom: var(--spacing-1); /* Reduced padding */
   }

   
   /* Style sub-menus for full screen - Collapsible */
   .primary-menu .sub-menu {
     /* Reset all desktop styles */
     position: static !important;
     opacity: 1 !important;
     visibility: visible !important;
     transform: none !important;
     box-shadow: none !important;
     background-color: transparent !important;
     padding: 0 !important;
     width: 100% !important;
     overflow: hidden !important;
     transition: max-height 0.3s ease !important;
     margin-top: 0 !important;
     top: auto !important;
     left: auto !important;
     display: block !important;
     border: none !important;
     border-radius: 0 !important;
     max-height: 0; /* Collapsed by default */
   }
   
   /* Expanded state */
   .primary-menu li.menu-item-has-children.expanded > .sub-menu {
     max-height: 500px; /* Enough for most sub-menus */
     padding: 0 0 var(--spacing-2) 0 !important;
   }
   
   /* Hide the desktop dropdown indicators on mobile */
   .primary-menu li.menu-item-has-children > a::after {
     display: none !important;
   }
   
   /* Add a separate span for mobile indicators */
   .primary-menu li.menu-item-has-children > a {
     position: relative;
     padding-right: var(--spacing-10) !important; /* Make room for indicator */
   }
   
   /* We'll add the indicator via JavaScript as a separate element */
   .mobile-indicator {
     position: absolute;
     right: var(--spacing-4);
     top: 50%;
     transform: translateY(-50%);
     font-size: 1.2em;
     font-weight: 300;
     color: var(--secondary-400);
     pointer-events: none; /* Prevent interfering with link clicks */
     line-height: 1;
   }
   
   /* Remove dropdown arrow/caret on mobile */
   .primary-menu .sub-menu::before {
     display: none !important;
   }
   
   /* Smaller text for sub-menu items with slide animation */
   .primary-menu .sub-menu li {
     margin: var(--spacing-1) 0 !important;
     display: block !important; /* Override desktop flex */
     border-bottom: none !important; /* No borders on sub-items */
     padding-bottom: 0; /* No extra padding */
     opacity: 0;
     transform: translateX(-10px);
     transition: opacity 0.3s ease, transform 0.3s ease;
   }
   
   /* Animate sub-items when parent is expanded */
   .primary-menu li.menu-item-has-children.expanded > .sub-menu li {
     opacity: 1;
     transform: translateX(0);
   }
   
   /* Stagger the animation */
   .primary-menu li.menu-item-has-children.expanded > .sub-menu li:nth-child(1) { transition-delay: 0.05s; }
   .primary-menu li.menu-item-has-children.expanded > .sub-menu li:nth-child(2) { transition-delay: 0.1s; }
   .primary-menu li.menu-item-has-children.expanded > .sub-menu li:nth-child(3) { transition-delay: 0.15s; }
   .primary-menu li.menu-item-has-children.expanded > .sub-menu li:nth-child(4) { transition-delay: 0.2s; }
   .primary-menu li.menu-item-has-children.expanded > .sub-menu li:nth-child(5) { transition-delay: 0.25s; }
   .primary-menu li.menu-item-has-children.expanded > .sub-menu li:nth-child(6) { transition-delay: 0.3s; }
   
   .primary-menu .sub-menu a {
     font-size: var(--font-size-small) !important;
     color: var(--secondary-400) !important; /* Changed color */
     opacity: 1; /* Removed opacity reduction */
     padding: var(--spacing-2) var(--spacing-4) !important;
     padding-left: var(--spacing-8) !important; /* Indent sub-items */
   }
   
   .primary-menu .sub-menu a:hover {
     color: var(--secondary-200) !important; /* Lighter on hover */
   }
   
   /* Hide the dropdown indicators on mobile - removed, we want to show them now */
   /* .primary-menu li.menu-item-has-children > a:after {
     display: none !important;
   } */
   
   /* Remove active state styling since submenus are always visible */
   .primary-menu li.menu-item-has-children.active > .sub-menu {
     /* No special styling needed */
   }
   
   /* Nav button in full screen */
   .primary-menu li.nav-button {
     margin-top: var(--spacing-4) !important; /* Reduced from spacing-8 */
     margin-bottom: var(--spacing-2) !important;
   }
   
   /* Keep nav button at original size */
   .primary-menu li.nav-button > a {
     font-size: var(--font-size-btn-medium) !important; /* Override the 1.5x increase */
     padding: var(--spacing-3) var(--spacing-10) !important; /* Original button padding */
     height: 80px; /* Your custom height */
   }
   
   .primary-menu li.nav-button > a {
     /* Keep original button styling */
   }

   /* Footer specific mobile styles */
   .footer-nav .primary-menu,
   .footer-menu {
     flex-direction: column;
     align-items: flex-start;
     gap: var(--spacing-2);
   }
   
   .footer-nav .primary-menu a,
   .footer-menu a {
     font-size: var(--font-size-small);
   }
 }
 
 @media (max-width: 1024px) {

   .is-sticky.site-header {
     padding: var(--spacing-3) var(--spacing-6);
   }

   .site-logo {
     max-height: 100px;
   }

   .is-sticky .site-logo {
     max-height: 70px;
   }

   .primary-menu li {
     margin: 0 var(--spacing-3);
   }
   
   .nav-button {
     margin-left: var(--spacing-3);
     padding: var(--spacing-2) var(--spacing-4);
   }

   /* Footer specific responsive */
   .footer-nav {
     flex-direction: column;
     align-items: flex-start;
     gap: var(--spacing-4);
   }
   
   .footer-nav .primary-menu,
   .footer-menu {
     gap: var(--spacing-3);
   }
   
   .footer-nav .nav-button {
     margin-left: 0;
     margin-top: var(--spacing-2);
   }
 }
 
 @media (max-width: 768px) {
   /* Most mobile styles now handled at 1080px breakpoint */
   /* Keep only specific adjustments for smaller screens */
 }
 
 @media (max-width: 480px) {
   .site-logo {
    max-height: 70px;
    left: 10px;
   }

   .is-sticky .site-logo {
     max-height: 28px; /* 70% of 40px */
   }
 }