/* Base header wrapper styling */
.custom-header-wrapper {
   position: absolute;
   width: 100%;
   left: 0;
   top: 0;
   display: flex;
   flex-direction: column;
   align-items: stretch;
   background: var(--non-sticky-bg-color, black);
   color: var(--non-sticky-font-color, white);
   transition: background 0.3s ease-in-out, color 0.3s ease-in-out, padding 0.3s ease-in-out, transform 0.3s ease-in-out;
   padding: 0;
   z-index: 999;
   --border-color: var(--non-sticky-border-color, white);
	height: var(--header-height, 100px); /* Use the CSS variable with fallback */
}

.custom-header-wrapper a,
.custom-header-wrapper a:focus,
.custom-header-wrapper a:hover,
.custom-header-wrapper a:visited {
	
	text-decoration: none;
}

.custom-header-wrapper:not(.sticky) .sticky-only,
.custom-header-wrapper.sticky.at-top .sticky-only,
.custom-header-wrapper.sticky:not(.at-top) .non-sticky-only {
    display: none;
}


/* Sticky states */
.custom-header-wrapper.sticky {
   position: fixed;
   width: 100%;
   left: 0;
   top: 0;
   z-index: 1000;
   background: var(--sticky-bg-color, black);
   color: var(--sticky-font-color, white);
   transform: translateY(0);
   --border-color: var(--sticky-border-color, white);
}

.custom-header-wrapper.at-top {
    background: var(--sticky-top-bg-color, black);
    color: var(--sticky-top-font-color, white);
    --border-color: var(--sticky-top-border-color, white);
}

/* Admin bar adjustments */
body.admin-bar .custom-header-wrapper.sticky {
   top: 32px;
}

/* Content offset */
body[data-content-offset="true"] #content {
    margin-top: var(--header-height, 100px);
}

/* Main tabs styling */
.custom-header-tabs {
    display: flex;
    align-items: stretch;
    background: transparent;
    color: inherit;
}

/* Spacers */
.spacer {
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 20px;
    flex-grow: 1;
}

.spacer-left { flex-grow: 6; }
.spacer-right { flex-grow: 4; }

.spacer-right {
	justify-content:end;
	padding-right:60px;
}

/* Tab buttons */
.custom-header-tabs .tab {
    padding: 10px 20px;
    text-decoration: none;
    font-weight: 600;
    background: transparent;
    border-bottom: 1px solid var(--border-color);
    text-align: center;
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    color: inherit;
}

.custom-header-tabs .tab.active {
    border-left: 1px solid var(--border-color) !important;
    border-right: 1px solid var(--border-color) !important;
    border-bottom: none !important;
    z-index: 2;
}


/*** Phone icon ***/

/* Phone icon container */
.phone-icon-container {
    position: relative;
    display: inline-block;
}

/* Base phone icon styles */
.phone-icon {
    cursor: pointer;
}

.phone-icon a,
.phone-icon a:hover {
    color: #fff;
}

/* Phone popover (for desktop) */
.phone-popover {
    position: absolute;
    top: 100%;
    left: -90px;
    background-color: white;
    padding: 8px 16px;
    border-radius: 3px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    display: none;
    white-space: nowrap;
    z-index: 100;
    margin-top: 5px;
}

.phone-popover:before {
    content: '';
    position: absolute;
    top: -6px;
    left: 70%;
    transform: translateX(-50%);
    border-width: 0 6px 6px 6px;
    border-style: solid;
    border-color: transparent transparent white transparent;
}

.phone-popover a {
    color: #333;
    text-decoration: none;
}

/* Show popover when container is active (JS controlled) */
.phone-icon-container.active .phone-popover {
    display: block;
}

 /* Desktop styles */
.phone-icon-mobile {
	display: none; /* Hide mobile version */
}

.phone-icon-desktop {
	display: block; /* Show desktop version */
}

/* Submenu background color handling for transparent headers at top of page */
.custom-header-wrapper.at-top .custom-header-submenu .sub-menu {
    background: var(--sticky-top-submenu-bg-color, rgba(0, 0, 0, 0.9));
}

/* Main submenu container */
.custom-header-submenu {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    background: transparent;
    max-width: 1440px;
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    color: inherit;
}

/* Submenu sections */
.submenu-left a {
    color: inherit;
    text-decoration: none;
    font-weight: bold;
}

.submenu-right {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    white-space: nowrap;
    color: inherit;
}

/* Primary menu styling */
.custom-header-submenu .menu {
    display: flex;
    gap: 20px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.custom-header-submenu .menu-link {
    text-decoration: none;
    color: inherit;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 5px;
}

/* Hide all dropdown arrows by default */
.custom-header-submenu .ast-icon {
    display: none;
}

/* Show and style dropdown arrow only for items with children */
.custom-header-submenu .menu-item-has-children > .menu-link .ast-icon {
    display: inline-flex;
    margin-left: 5px;
    transition: transform 0.3s ease;
}

.custom-header-submenu .menu-item-has-children > .menu-link:hover .ast-icon,
.custom-header-submenu .menu-item-has-children:hover > .menu-link .ast-icon {
    transform: rotate(180deg);
}

/* Dropdown submenu styling - First level */
.custom-header-submenu .sub-menu {
    position: absolute;
    top: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    background: var(--non-sticky-bg-color, black);
    min-width: 220px;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    padding: 8px 0;
    margin: 0;
    list-style: none;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    z-index: 1000;
}

/* Menu item with children positioning */
.custom-header-submenu .menu-item-has-children {
    position: relative;
}

/* Show submenu on hover */
.custom-header-submenu .menu-item-has-children:hover > .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

/* Submenu items styling */
.custom-header-submenu .sub-menu .menu-link {
    padding: 8px 20px;
    display: block;
    white-space: nowrap;
}

.custom-header-submenu .sub-menu .menu-link:hover {
    background: rgba(255, 255, 255, 0.1);
}



/* Second and deeper level submenus */
.custom-header-submenu .nested-submenu {
    top: -8px !important; 
    left: 100% !important;
    transform: none !important;
}

/* Show deeper level submenus on hover */
.custom-header-submenu .sub-menu .menu-item-has-children:hover > .nested-submenu {
    opacity: 1;
    visibility: visible;
}

/* Indicate items with children in desktop submenu */
.custom-header-submenu .sub-menu .menu-item-has-children > .menu-link {
    position: relative;
}

.custom-header-submenu .sub-menu .menu-item-has-children > .menu-link .ast-icon {
    transform: rotate(-90deg); /* Point arrow to the right for submenu items */
    position: absolute;
    right: 10px;
	top: 50%;
}

.custom-header-submenu .sub-menu .menu-item-has-children:hover > .menu-link .ast-icon {
    transform: rotate(-90deg); /* Keep arrow pointing right on hover */
}

/* Non-sticky state */
.custom-header-submenu .sub-menu {
    background: var(--non-sticky-bg-color, black);
}

/* Sticky state */
.custom-header-wrapper.sticky:not(.at-top) .custom-header-submenu .sub-menu {
    background: var(--sticky-bg-color, black);
}

/* Sticky at top state */
.custom-header-wrapper.sticky.at-top .custom-header-submenu .sub-menu {
    background: var(--sticky-top-bg-color, black);
}

/* Mobile menu button */
.hamburger-menu {
    display: none;
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    padding: 10px;
    color: inherit;
}

.hamburger-menu:focus,
.hamburger-menu:hover {
	background: none;
	color: inherit;
}

.custom-header-wrapper .hamburger-menu .line {
	fill: var(--non-sticky-font-color, white);
}

.custom-header-wrapper .sticky .hamburger-menu .line {
	fill: var(--sticky-font-color, white);
}

.custom-header-wrapper .at-top .hamburger-menu .line {
	fill: var(--sticky-top-font-color, white);
}

/* Off-canvas menu styling */
.off-canvas-menu-container {
    position: fixed; /* Stay fixed relative to the viewport */
    top: 0;
    left: 0; /* Keep it anchored to the left */
    width: 100%;
    height: 100%;
    overflow-y: auto; /* Allow vertical scrolling */
    overflow-x: hidden; /* Prevent horizontal scrolling */
    background: var(--off-canvas-bg-color, rgba(0, 0, 0, 0.9));
    z-index: 2000;
    transform: translateX(100%); /* Move completely off-screen */
    transition: transform 0.3s ease-in-out;
    box-sizing: border-box; /* Include padding and border in the element's total width */
}

.off-canvas-menu-container.open {
   transform: translateX(0); /* Bring it back into view */
}

.off-canvas-menu-container a {
    color: var(--off-canvas-font-color, white);
}

/* Off-canvas header section */
.off-canvas-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 30px 20px;
   border-bottom: 1px solid var(--off-canvas-border-color, white);
   min-height: 80px;
   width: 100%;
   box-sizing: border-box;
}

.header-left {
   flex: 1;
}

.header-right {
   flex: 0 0 auto;
}

.close-menu {
   background: none;
   border: none;
   font-size: 40px;
   cursor: pointer;
   width: 60px;
   height: 60px;
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 0;
   color: var(--off-canvas-font-color, white);
   box-shadow: none;
}

.close-menu:focus,
.close-menu:hover{
	background: none;
	color: var(--off-canvas-font-color, white);
}

/* Menu content area */
.off-canvas-menu {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
}

.off-canvas-menu .menu {
    list-style: none;
    padding: 0;
    margin: 0;
}

.off-canvas-menu .menu > .menu-item {
    border-bottom: 1px solid var(--off-canvas-border-color, white);
}

.off-canvas-menu .menu > .menu-item.menu-item-has-children.active {
    border-bottom: none;
}

.off-canvas-menu .menu-link {
    padding: 10px 0;
    display: block;
	font-weight:600;
}

.off-canvas-menu .sub-menu .menu-link {
    padding: 8px 0;
	font-weight:400;
}

.off-canvas-menu .menu-link::hover {
	background-color:rgba(0, 0, 0, 0.5);
}

/* Remove checkmarks and adjust submenu */
.off-canvas-menu .ast-icon {
    display: none !important;
}

/* Submenu styles for all levels */
.off-canvas-menu .sub-menu {
    list-style: none;
    padding-left: 20px;
    margin: 0;
    display: none;
}

.off-canvas-menu .menu-item-has-children.active > .sub-menu {
    display: block;
}

/* Menu items with children in off-canvas menu */
.off-canvas-menu .menu-item-has-children > .menu-link {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.off-canvas-menu .menu-item-has-children > .menu-link::after {
    content: '+';
    font-size: 28px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
}

.off-canvas-menu .menu-item-has-children.active > .menu-link::after {
    /*transform: rotate(45deg);*/
	content: '-';
}

/* Visual distinction for deeper levels in mobile menu */
.off-canvas-menu .sub-menu .sub-menu {
    padding-left: 15px;
    border-left: 1px solid var(--off-canvas-border-color, rgba(255, 255, 255, 0.2));
}

.off-canvas-menu .sub-menu .menu-item-has-children > .menu-link::after {
    font-size: 24px; /* Smaller + and - signs for deeper levels */
}

/* Mobile styles */
@media screen and (max-width: 768px) {
	.custom-header-wrapper {
        height: var(--header-height-mobile) !important;
    }
    
    body[data-content-offset="true"] #content {
        margin-top: var(--header-height-mobile) !important;
    }
	
    .submenu-right .menu-container {
        display: none;
    }

    .hamburger-menu {
        display: block;
    }

    .custom-header-submenu .menu {
        flex-direction: column;
        gap: 0;
    }

    .custom-header-submenu .sub-menu {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        background: transparent;
        padding-left: 20px;
    }

    .custom-header-submenu .menu-link {
        padding: 10px 0;
    }
	
	.off-canvas-menu-container.open {
		height: 100vh;
	}
	
	/* Phone icon */
	.phone-icon-desktop {
        display: none; /* Hide desktop version */
    }
    
    .phone-icon-mobile {
        display: block; /* Show mobile version */
    }
    
    .phone-popover {
        display: none !important; /* Always hide popover on mobile */
    }
	
}