/* Make submenu appear on click rather than hover */

/* Remove hover-based display */
.site-header:not(.dsn-hamburger) ul.primary-nav > li.has-sub-menu:hover ul {
    opacity: 0 !important;
    visibility: hidden !important;
}

/* Show submenu only when .active class is present */
.site-header:not(.dsn-hamburger) ul.primary-nav > li.has-sub-menu.active ul {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
}

/* Create full-width background only when active - with REDUCED HEIGHT */
.site-header:not(.dsn-hamburger) ul.primary-nav > li.has-sub-menu.active::after {
    content: "";
    position: absolute;
    z-index: 80; /* Adjusted z-index to be above blur background but below menu items */
    left: -2000px;
    right: -2000px;
    top: 100%;
    height: 160px; /* REDUCED HEIGHT from 250px to 160px */
    background-color: #fff; /* Changed from assistant-color to white */
    pointer-events: none;
}

/* Remove original submenu background */
.site-header:not(.dsn-hamburger) ul.primary-nav > li ul {
    background-color: transparent !important;
    border-radius: 0 !important;
    transition: none !important;
}

/* Arrow rotation only on active state */
.site-header:not(.dsn-hamburger) ul.primary-nav > li.has-sub-menu.active > a::after {
    transform: translateY(-30%) rotate(-135deg) !important;
}

/* Dropdown arrow styles */
.site-header:not(.dsn-hamburger) ul.primary-nav > li.has-sub-menu > a {
    position: relative;
    padding-right: 18px;
}

.site-header:not(.dsn-hamburger) ul.primary-nav > li.has-sub-menu > a::after {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    width: 8px;
    height: 8px;
    border: solid var(--heading-color);
    border-width: 0 2px 2px 0;
    transform: translateY(-50%) rotate(45deg);
    transition: transform 0.3s ease;
    pointer-events: none;
}

/* Grey hover effect for submenu items */
.site-header:not(.dsn-hamburger) ul.primary-nav > li ul li a:hover {
    color: #b8b8b8;
    transition: color 0.3s ease;
}

/* STYLES FOR BLUR EFFECT */

/* Create overlay with blur effect when menu is active */
body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0);
    backdrop-filter: blur(0);
    -webkit-backdrop-filter: blur(0);
    z-index: 75; /* Below header but above content */
    pointer-events: none;
    transition: backdrop-filter 0.3s ease, background 0.3s ease;
}

/* Apply blur when submenu is active */
body.has-active-submenu::before {
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

/*  header stays above blur */
.site-header {
    z-index: 97; /* Already set in your CSS - make sure it's high enough */
    position: relative; /* Ensure proper stacking context */
}

/* Make submenu appear above blur but below header */
.site-header:not(.dsn-hamburger) ul.primary-nav > li.has-sub-menu.active ul {
    z-index: 85;
    position: relative;
}


.site-header {
    position: fixed !important; /* Ensure it stays fixed */
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
}

/* Prevent the logo from moving */
.site-header .main-logo {
    position: relative !important;
    transform: none !important;
}

/* Prevent menu items from shifting horizontally */
.site-header:not(.dsn-hamburger) ul.primary-nav > li {
    position: relative !important;
    transform: none !important;
}

/* Make sure submenu doesn't cause layout shifts */
.site-header:not(.dsn-hamburger) ul.primary-nav > li.has-sub-menu ul {
    position: absolute !important; /* Changed from relative */
    top: 100% !important;
    left: 0 !important;
    width: auto !important; /* Instead of 100% */
    min-width: 316px !important; /* Original min-width */
}

/* Adjust the full-width background to not affect layout */
.site-header:not(.dsn-hamburger) ul.primary-nav > li.has-sub-menu.active::after {
    content: "";
    position: fixed !important; /* Changed from absolute */
    z-index: 80;
    left: 0 !important;
    right: 0 !important;
    top: calc(100% + 20px) !important; /* Adjust based on your menu height */
    height: 180px;
    background-color: #fff;
    pointer-events: none;
}

/* Adjust the full-width background to connect with main menu */
.site-header:not(.dsn-hamburger) ul.primary-nav > li.has-sub-menu.active::after {
    content: "";
    position: fixed !important;
    z-index: 80;
    left: 0 !important;
    right: 0 !important;
    top: 80px !important; /* Adjust this value to match your header height */
    min-height: 180px;
    background-color: #fff;
    pointer-events: none;
    border-top: none !important; /*  no border creates a gap */
    margin-top: 0 !important; /* Remove any margin that might create a gap */
}

/*  submenu items position correctly */
.site-header:not(.dsn-hamburger) ul.primary-nav > li.has-sub-menu.active ul {
    margin-top: 26px !important; /* Adjust based on your design */
}

/* Remove the border and only use the pseudo-element for the line */
.site-header {
    border-bottom: none !important; /* Remove the border */
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
}

/* Create a single consistent line using the pseudo-element */
.site-header::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px; /* Thin line */
    background-color: #dcdcdc;
    z-index: 99; /* Higher than submenu background */
}

/* Add line above About Us using the specific class */
.about-us-first-item {
    position: relative;
	padding-top: 10px;
}

.about-us-first-item::before {
    content: "";
    position: absolute;
    top: -18px; /* Distance above  */
    left: 0;
    width: 97px; /* Width of line */
    height: 2px; /* Thickness */
    background-color: #1E1E1E; /* Color */
    display: block;
    z-index: 9999; 
}

/* Stop all hover-based arrow rotations */
.site-header:not(.dsn-hamburger) ul.primary-nav > li.has-sub-menu:hover > a::after,
.site-header:not(.dsn-hamburger) ul.primary-nav > li.has-sub-menu > a:hover::after {
    transform: translateY(-50%) rotate(45deg) !important;
    transition: none !important;
}

/* Only rotate arrow when menu is active (clicked) */
.site-header:not(.dsn-hamburger) ul.primary-nav > li.has-sub-menu.active > a::after {
    transform: translateY(-30%) rotate(-135deg) !important;
}

/* Force default arrow state for non-active items */
.site-header:not(.dsn-hamburger) ul.primary-nav > li.has-sub-menu:not(.active) > a::after {
    transform: translateY(-50%) rotate(45deg) !important;
}