/* Header Design for UXT Pro */

/* --- HEADER VARIABLES --- */
:root {
    --header-edge-shadow-top: inset 0 1px 1px rgba(255, 255, 255, 0.08);
    --header-edge-shadow-bottom: inset 0 -1px 1px rgba(0, 0, 0, 0.2);
    --shadow-pop: var(--shadow-xl);
}

body.light-theme {
    --header-edge-shadow-top: inset 0 1px 1px rgba(255, 255, 255, 0.7);
    --header-edge-shadow-bottom: inset 0 -1px 1px rgba(0, 0, 0, 0.07);
}

/* --- HEADER LAYOUT --- */
.header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    background: transparent !important;
    box-shadow: 0 4px 20px -5px rgba(0, 0, 0, .2);
    border-bottom: none;
    transition: background 0.4s var(--ease), box-shadow 0.4s var(--ease);
}

/* Hide main header when mobile menu is open to avoid overlap AND prevent scroll */
body.menu-open {
    overflow: hidden !important;
}

/* Prevent horizontal scroll on all devices */
html,
body {
    overflow-x: clip !important;
    /* 'clip' prevents sticky break on some browsers while hiding overflow */
    max-width: 100vw !important;
}

/* Header stays visible but below overlay */
body.menu-open .header {
    z-index: 9998;
    /* Lower than overlay */
}

.header::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-color: color-mix(in srgb, var(--panel) var(--header-op, 90%), transparent);
    background-image: var(--header-gradient, none);
    -webkit-backdrop-filter: saturate(120%) blur(var(--header-blur, 12px));
    backdrop-filter: saturate(120%) blur(var(--header-blur, 12px));
    transition: background 0.4s var(--ease), background-image 0.4s var(--ease), -webkit-backdrop-filter 0.4s var(--ease), backdrop-filter 0.4s var(--ease);
}

/* Adjust for WordPress Admin Bar */
.admin-bar .header {
    top: 32px;
}

@media screen and (max-width: 782px) {
    .admin-bar .header {
        top: 46px;
    }

    #wpadminbar {
        position: fixed !important;
        top: 0;
    }
}

/* Ensure WordPress Admin Bar dropdowns are above our fixed header */
#wpadminbar,
#wpadminbar .ab-sub-wrapper,
#wpadminbar ul,
#wpadminbar ul li {
    z-index: 999999 !important;
}

/* Default state on desktop: TRANSPARENT */
@media (min-width: 1025px) {
    .header:not(.scrolled) {
        background: transparent !important;
        box-shadow: none !important;
        --header-edge-shadow-top: transparent !important;
        --header-edge-shadow-bottom: transparent !important;
    }

    .header:not(.scrolled)::before {
        background-color: transparent !important;
        background-image: var(--header-gradient, none) !important;
        -webkit-backdrop-filter: saturate(120%) blur(var(--header-blur, 12px)) !important;
        backdrop-filter: saturate(120%) blur(var(--header-blur, 12px)) !important;
    }

    /* Language Button: Transparent when not scrolled */
    .header:not(.scrolled) .lang-btn {
        background: transparent !important;
        box-shadow: none !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
    }

    /* Soft Glass Style for ALL Header Controls (Scrolled and Not Scrolled): Theme Switcher, Lang Button, Search Button */
    /* Added 'html body .header.header' to maximize specificity (0-3-2 for base, 0-4-2 for hover) to override legacy light theme rules */
    html body .header.header .theme-switch-final,
    html body .header.header .lang-btn,
    html body .header.header .header-btn {
        background-color: color-mix(in srgb, var(--surface-1) var(--btn-trans-glass-op, 30%), transparent) !important;
        background-image: linear-gradient(135deg, color-mix(in srgb, var(--bg-grad-2) 15%, transparent), color-mix(in srgb, var(--bg-grad-1) 15%, transparent)) !important;
        -webkit-backdrop-filter: blur(8px) !important;
        backdrop-filter: blur(8px) !important;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1) !important;
        border-radius: 999px;
        /* Ensure buttons are rounded */
        transition: all 0.3s var(--ease) !important;
    }

    /* Transparency for Blend Mode */
    body:has([style*="--header-text-blend: difference"]),
    body:has([style*="--header-icons-blend: difference"]) {
        --btn-trans-glass-op: 0% !important;
    }

    body:has([style*="--header-text-blend: difference"]) .header.header .theme-switch-final,
    body:has([style*="--header-icons-blend: difference"]) .header.header .theme-switch-final,
    body:has([style*="--header-text-blend: difference"]) .header.header .lang-btn,
    body:has([style*="--header-icons-blend: difference"]) .header.header .lang-btn,
    body:has([style*="--header-text-blend: difference"]) .header.header .header-btn,
    body:has([style*="--header-icons-blend: difference"]) .header.header .header-btn {
        background-image: none !important;
        background-color: transparent !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
        box-shadow: none !important;
    }

    .header {
        isolation: isolate;
    }

    /* Hover State for Search & Theme Switcher (Keep Gradient) */
    html body .header.header .theme-switch-final:hover,
    html body .header.header .header-btn:hover {
        background-color: color-mix(in srgb, var(--surface-1) 50%, transparent) !important;
        background-image: linear-gradient(135deg, color-mix(in srgb, var(--bg-grad-2) 15%, transparent), color-mix(in srgb, var(--bg-grad-1) 15%, transparent)) !important;
        -webkit-backdrop-filter: blur(8px) !important;
        backdrop-filter: blur(8px) !important;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15) !important;
        color: var(--header-text-hover, var(--accent)) !important;
        transform: translateY(-1px);
    }

    /* Hover State for Language Button (NO Gradient, Use Plugin Color) */
    html body .header.header .lang-btn:hover,
    html body .header #demo-header-lang-btn:hover {
        background-color: color-mix(in oklab, var(--surface-1) 50%, transparent) !important;
        background-image: none !important;
        /* Remove brand fill as requested */
        backdrop-filter: blur(8px) !important;
        -webkit-backdrop-filter: blur(8px) !important;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15) !important;
        color: var(--lang-text-hover, var(--accent)) !important;
        /* Use specific lang hover color */
        transform: translateY(-1px);
    }

    /* Center Language Dropdown Items and add Jump Effect */
    #langDropdown .dd-menu .dd-item,
    #langDropdown .dd-menu .dd-link {
        text-align: center;
        justify-content: center;
        transition: transform 0.2s var(--ease), color 0.2s var(--ease);
    }

    #langDropdown .dd-menu .dd-item:hover {
        transform: translateY(-2px);
    }

    #langDropdown .dd-menu .dd-item:hover .dd-link {
        color: var(--accent);
    }
}

/* Center lang dropdown items (wm-type-item) on all screen sizes */
#langDropdown .dd-menu .wm-type-item {
    text-align: center !important;
    justify-content: center !important;
}

#mobileMenuOverlay #mobileLangDropdown .dd-menu .dd-item {
    text-align: center !important;
    justify-content: center !important;
}

/* Restoring styles when scrolled (or on mobile by default) */
.header.scrolled {
    /* Background handled by ::before to avoid double-layer opacity issues */
    background: transparent !important;
    box-shadow: 0 4px 20px -5px rgba(0, 0, 0, .2) !important;
}

/* Ensure ::before has the right visuals when scrolled */
.header.scrolled::before {
    background-color: color-mix(in oklab, var(--panel) var(--header-op, 90%), transparent) !important;
    background-image: var(--header-gradient, none) !important;
    -webkit-backdrop-filter: saturate(120%) blur(var(--header-blur, 12px)) !important;
    backdrop-filter: saturate(120%) blur(var(--header-blur, 12px)) !important;
}

@media (max-width: 1024px) {
    .header {
        background: transparent !important;
        box-shadow: 0 4px 20px -5px rgba(0, 0, 0, .2);
    }

    .header::before {
        background-color: color-mix(in oklab, var(--panel) var(--header-op, 90%), transparent) !important;
        background-image: var(--header-gradient, none) !important;
        backdrop-filter: saturate(120%) blur(var(--header-blur, 12px)) !important;
        -webkit-backdrop-filter: saturate(120%) blur(var(--header-blur, 12px)) !important;
    }
}

/* Offset for fixed header */
body {
    padding-top: var(--header-offset, 60px) !important;
}

body.admin-bar {
    padding-top: calc(var(--header-offset, 60px) + 32px) !important;
}

@media screen and (max-width: 782px) {
    body.admin-bar {
        padding-top: calc(var(--header-offset, 60px) + 46px) !important;
    }
}

.header-inner {
    display: flex;
    align-items: center;
    gap: var(--header-inner-gap, 12px);
    padding-block: 10px;
    margin: 0 auto;
    width: 100%;
    max-width: var(--container-max);
    padding-inline: var(--header-inline-padding, 16px);
    position: relative;
    box-sizing: border-box;
    /* Fix for overflow issues */
}

/* SMART READABILITY (DIFFERENCE BLEND MODE) */
.menu-horizontal .menu-item>a,
.lang-btn .btn-text,
.uxt-link-text,
.logo span {
    mix-blend-mode: var(--header-text-blend, normal);
    color: var(--header-text, inherit);
    transition: color 0.3s ease, mix-blend-mode 0.3s ease;
}

.logo img,
.header-btn svg,
.theme-switch-final svg,
.menu-icon svg,
.lang-btn svg {
    mix-blend-mode: var(--header-icons-blend, normal);
    color: var(--header-icon-color, inherit);
    transition: all 0.3s ease;
}

.hamburger-icon .bar {
    mix-blend-mode: var(--header-icons-blend, normal);
    background-color: var(--header-icon-color, currentColor);
    transition: all 0.3s ease;
}


@media (max-width: 1024px) {
    .header-inner {
        padding-inline: 16px !important;
        height: 60px;
        box-sizing: border-box;
    }

    .header-inner .logo {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        z-index: 10;
        justify-content: center;
    }

    .header-inner .logo img {
        max-width: 120px;
    }

    /* Burger button (left side) - no border */
    #mobileMenuToggle {
        position: relative;
        z-index: 15;
        background: transparent !important;
        border: none !important;
        padding: 8px;
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
    }

    #mobileMenuToggle .hamburger-icon {
        width: 24px;
        height: 24px;
    }

    #mobileMenuToggle .hamburger-icon .bar {
        transition: all 0.3s var(--ease);
        transform-origin: center;
    }

    /* Animate burger to X when menu is open */
    body.menu-open #mobileMenuToggle .hamburger-icon .top-bar {
        transform: rotate(45deg) translate(4px, 4px);
    }

    body.menu-open #mobileMenuToggle .hamburger-icon .middle-bar {
        opacity: 0;
    }

    body.menu-open #mobileMenuToggle .hamburger-icon .bottom-bar {
        transform: rotate(-45deg) translate(4px, -4px);
    }

    /* Header controls on mobile (right side) */
    .header-controls {
        position: absolute;
        right: 16px;
        top: 50%;
        transform: translateY(-50%);
        z-index: 15;
    }
}

.header .logo {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    text-decoration: none;
    color: var(--text-primary);
}

.header .logo img {
    height: 32px;
    max-height: 32px;
    width: auto;
    max-width: 160px;
    object-fit: contain;
}

.header .logo-badge {
    font-size: 20px;
    color: var(--accent);
    display: inline-flex;
}

.header .grow {
    flex: 1;
}

.header-controls {
    display: flex;
    align-items: center;
    gap: var(--header-controls-gap, 12px);
}

#searchToggleBtn .search-icon-close {
    display: none;
}

.search-active #searchToggleBtn .search-icon-open {
    display: none;
}

.search-active #searchToggleBtn .search-icon-close {
    display: flex;
}

.header .icon,
.menu-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

#searchToggleBtn .icon {
    color: var(--search-icon, var(--text-secondary));
}

/* --- DROPDOWNS --- */
.header .dropdown {
    position: relative;
    display: inline-block;
}

.header #multiLevelMenu {
    display: none;
}

/* Horizontal Menu for Desktop */
.desktop-menu-wrapper {
    display: flex;
    align-items: center;
}

.menu-horizontal {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: var(--header-menu-gap, 20px);
}

.menu-horizontal .menu-item {
    position: relative;
}

.menu-horizontal .menu-item>a {
    color: var(--header-text, var(--text-secondary));
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95rem;
    padding: 15px 0;
    /* Increased vertical padding for better hover trigger */
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    transition: color 0.3s var(--ease);
    position: relative;
}

.menu-horizontal .menu-item>a:hover,
.menu-horizontal .menu-item:hover>a {
    color: var(--header-text-hover, var(--accent));
}

/* Sub-menu Styling (Desktop Dropdown) - Level 1 */
html body .menu-horizontal .menu-item>.sub-menu {
    position: absolute;
    top: calc(100% + var(--space-md));
    left: 0 !important;
    padding: var(--space-sm);
    min-width: 240px;
    background-color: color-mix(in oklab, var(--dropdown-bg) var(--dropdown-op), transparent) !important;
    background-image: var(--dropdown-gradient, none) !important;
    -webkit-backdrop-filter: blur(var(--dropdown-blur)) !important;
    backdrop-filter: blur(var(--dropdown-blur)) !important;
    border-radius: var(--radius-menu);
    box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.3);
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    list-style: none;
    margin: 0;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease, visibility 0.3s ease;
}

/* Bridge to prevent hover loss with larger gap */
html body .menu-horizontal .menu-item>.sub-menu::before,
html body .header .dd-menu::before,
html body .header .sub-menu::before {
    content: "";
    position: absolute;
    top: calc(var(--space-md) * -1);
    left: 0;
    width: 100%;
    height: var(--space-md);
    display: block;
    background: transparent;
}

/* Nested Sub-menus (Level 2+) */
html body .header .menu-horizontal .sub-menu .sub-menu {
    top: -8px !important;
    /* Align with top padding of parent */
    left: calc(100% + 12px) !important;
    margin-left: 0;
    transform: translateX(15px) translateY(0);
    opacity: 0;
    visibility: hidden;
}

/* Hover triggers for sub-menus */
.menu-horizontal .menu-item:hover>.sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.menu-horizontal .sub-menu .menu-item:hover>.sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateX(0) translateY(0);
}

/* Standardize icon directions (NO HOVER ROTATION) */
.menu-horizontal>.menu-item-has-children>a .menu-icon {
    transform: rotate(90deg);
    /* Main Level: Always DOWN */
}

.menu-horizontal .sub-menu .menu-item-has-children>a .menu-icon {
    transform: rotate(0deg);
    /* Sub Levels: Always RIGHT */
}

.uxt-link-text {
    position: relative;
    display: inline-flex;
    align-items: center;
}

/* Desktop Underline Effect */
.uxt-link-text::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--accent);
    box-shadow: 0 0 10px var(--accent);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.3s var(--ease);
}

.menu-horizontal .menu-item:hover>a .uxt-link-text::after {
    transform: scaleX(1);
}


/* Hide/Show based on screen size */
@media (max-width: 1024px) {
    .desktop-menu-wrapper {
        display: none;
    }

    /* Fixed double menu visibility on mobile */
    .header #multiLevelMenu {
        display: none;
    }
}

/* 
   UPDATED DROPDOWN STYLE 
   - Solid Background (var(--surface-1)) for readability
   - Gradient sheen on top to match input style
   - Scoped to .header to prevent leaks
*/
html body .header .dd-menu,
html body .header .sub-menu,
html body .header #multiLevelMenu .menu {
    /* Styles consolidated in the rule above (line 300) for sub-menu */
    /* This block is now primarily for .dd-menu (Language/Search) */
    position: absolute;
    top: calc(100% + var(--space-md));
    background-color: color-mix(in oklab, var(--dropdown-bg) var(--dropdown-op), transparent) !important;
    -webkit-backdrop-filter: blur(var(--dropdown-blur)) !important;
    backdrop-filter: blur(var(--dropdown-blur)) !important;
    background-image: var(--dropdown-gradient, none) !important;
    border-radius: var(--radius-menu);
    box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.3);
    border: none;
    width: max-content;
    min-width: 240px;
    box-sizing: border-box;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all .3s var(--ease);
    list-style: none;
    padding: var(--space-sm);
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

/* This rule handles side-opening submenus (Nested desktop OR Mobile) */
html body .header .sub-menu .sub-menu {
    left: calc(100% + 12px) !important;
    top: -8px !important;
    transform: translateX(15px) !important;
}

.header #multiLevelMenu .menu {
    left: 0;
}

body.light-theme .header .dd-menu,
body.light-theme .header .sub-menu,
body.light-theme .header #multiLevelMenu .menu {
    /* Background and filter are already handled by more specific rules above using variables */
    box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.1);
    border: none;
}

/* Fix text color in light theme dropdowns */
body.light-theme .header .menu-item>a,
body.light-theme .header .dd-link {
    color: var(--header-text, var(--text-secondary));
}

body.light-theme .header .menu-item>a:hover,
body.light-theme .header .dd-link:hover {
    color: var(--header-text-hover, var(--accent));
}


/* Desktop Language Dropdown */
.header #langDropdown .dd-menu {
    background-color: color-mix(in oklab, var(--lang-bg) var(--lang-op), transparent) !important;
    background-image: none !important;
    -webkit-backdrop-filter: saturate(120%) blur(var(--lang-blur)) !important;
    backdrop-filter: saturate(120%) blur(var(--lang-blur)) !important;
    border-radius: var(--lang-radius) !important;
    width: 100% !important;
    min-width: unset !important;
    right: 0 !important;
    left: 0 !important;
    transform: translateY(10px) !important;
    padding: 4px;
    z-index: 1000;
}

.header #langDropdown .dd-menu.open {
    transform: translateY(0) !important;
}

/* Center text inside lang dropdown items */
.header #langDropdown .dd-menu .wm-type-item,
.header #langDropdown .dd-menu .dd-item {
    text-align: center !important;
    justify-content: center !important;
    padding: 8px 0 !important;
    width: 100% !important;
    display: flex !important;
    box-sizing: border-box !important;
}

/* Mobile Language Dropdown Specific Fix */
#mobileMenuOverlay #mobileLangDropdown {
    position: relative !important;
}

#mobileMenuOverlay #mobileLangDropdown .dd-menu {
    position: absolute !important;
    top: 100% !important;
    right: 0 !important;
    left: 0 !important;
    width: 100% !important;
    min-width: 100% !important;
    background: var(--panel) !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    border: none !important;
    border-radius: var(--radius-sm);
    z-index: 99999 !important;
    display: block !important;
    visibility: hidden;
    opacity: 0;
    transition: all 0.2s var(--ease);
    padding: 4px 0;
    box-sizing: border-box;
}

#mobileMenuOverlay #mobileLangDropdown .dd-menu.open {
    visibility: visible !important;
    opacity: 1 !important;
    transform: translateY(5px) !important;
}

#mobileMenuOverlay #mobileLangDropdown .lang-item {
    padding: 8px 4px !important;
    text-align: center !important;
    justify-content: center !important;
    width: 100% !important;
    box-sizing: border-box;
}

.header #langDropdown .dd-menu.open {
    transform: translateY(0) !important;
}

.header .dd-menu.open,
.header .sub-menu.open,
.header #multiLevelMenu.open .menu,
.header #multiLevelMenu .menu.open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.header .sub-menu.open,
.header .menu-item.active>.sub-menu {
    transform: translateX(0);
    opacity: 1;
    visibility: visible;
}

/* SCOPED Menu Items */
.header .menu-item {
    position: relative;
    list-style: none;
}

/* Base Link Style with Underline Preparation */
.header .menu-item>a,
.header .dd-link,
.header .wm-type-item {
    appearance: none;
    width: 100%;
    text-align: left;
    border: none;
    background: transparent;
    padding: 8px var(--space-sm);
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-family: inherit;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--space-xs);
    position: relative;
    z-index: 1;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    text-decoration: none;
}

/* Specific color for Language Dropdown Items */
.header .wm-type-item {
    color: var(--lang-text, var(--header-text, var(--text-secondary)));
}

/* Hover State - Show Underline & Text Color Change (NO BACKGROUND) */
.header .menu-item>a:hover,
.header .dd-link:hover,
.header .wm-type-item:hover {
    color: var(--header-text-hover, var(--accent)) !important;
    background: transparent !important;
}

.header .menu-item>a:hover .uxt-link-text::after,
.header .dd-link:hover .uxt-link-text::after {
    transform: scaleX(1);
    opacity: 1;
}

.header .menu-icon {
    width: 14px;
    height: 14px;
    transition: transform 0.3s var(--ease);
    color: var(--header-icon-color, var(--text-secondary));
    opacity: 0.7;
    flex-shrink: 0;
    display: inline-block;
    vertical-align: middle;
}

/* Hover/Active states */
.header .menu-item:hover>a .menu-icon,
.header .menu-item.active>a .menu-icon,
.header .menu-item.current-menu-item>a .menu-icon {
    color: var(--accent) !important;
    opacity: 1;
}

/* Rotation logic */
.menu-horizontal>.menu-item-has-children>a .menu-icon {
    transform: rotate(90deg);
    /* Down for main level desktop */
}

.menu-horizontal .sub-menu .menu-item-has-children>a .menu-icon {
    transform: rotate(0deg);
    /* Right for sub levels desktop */
}

.menu-horizontal .sub-menu .menu-item-has-children:hover>a .menu-icon {
    transform: rotate(90deg);
    /* Point down on hover in desktop submenus? Actually, better keep it right or point down if it opens below? In desktop it usually opens to the side, so right is better. */
}

/* Mobile Rotation */
.menu-mobile-list .menu-item-has-children.active>a .menu-icon {
    transform: rotate(90deg) !important;
}


.header-btn .menu-arrow {
    transition: transform 0.3s var(--ease);
}

.header-btn.open .menu-arrow {
    transform: rotate(180deg);
}

/* --- BUTTONS --- */
.header .header-btn,
.header .lang-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
    user-select: none;
    -webkit-user-select: none;
    color: var(--header-text, var(--text-secondary));
    transition: color 0.33s var(--ease);
    height: 30px;
    padding: 0 12px;
    border: none;
    background: transparent;
    cursor: pointer;
    border-radius: 999px;
    transition: all .5s var(--ease);
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 600;
}

.header .header-btn:hover,
.header .lang-btn:hover,
.header .header-btn.open,
.header .lang-btn.open {
    color: var(--header-text-hover, var(--accent));
}

/* PREMIUM SYNC FOR LANGUAGE BUTTON */
.header .lang-btn {
    background: color-mix(in oklab, var(--surface-1) 15%, transparent) !important;
    -webkit-backdrop-filter: blur(8px) saturate(120%);
    backdrop-filter: blur(8px) saturate(120%);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2), var(--header-edge-shadow-bottom), var(--header-edge-shadow-top) !important;
    border: none !important;
    outline: none !important;
    transition: all 0.4s var(--ease) !important;
    color: var(--header-text, var(--text-secondary)) !important;
}

.header .lang-btn:hover,
.header .lang-btn.open {
    color: var(--header-text-hover, var(--accent)) !important;
    background: color-mix(in oklab, var(--surface-1) 25%, transparent) !important;
}

body.light-theme .header .lang-btn {
    color: var(--header-text, var(--text-h4)) !important;
    background-color: var(--surface-1) !important;
    background-image: linear-gradient(135deg, color-mix(in oklab, var(--bg-grad-2) 15%, transparent), color-mix(in oklab, var(--bg-grad-1) 15%, transparent)) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05), var(--header-edge-shadow-bottom), var(--header-edge-shadow-top) !important;
}

body.light-theme .header .lang-btn:hover,
body.light-theme .header .lang-btn.open {
    color: var(--header-text-hover, var(--accent)) !important;
}

.header .lang-btn:hover,
.header .lang-btn:active,
.header .lang-btn:focus {
    background: color-mix(in oklab, var(--surface-1) 25%, transparent) !important;
    box-shadow: 0 0 15px 2px color-mix(in oklab, var(--accent) 35%, transparent),
        0 2px 10px rgba(0, 0, 0, 0.2),
        var(--header-edge-shadow-bottom),
        var(--header-edge-shadow-top) !important;
    color: var(--accent) !important;
}

body.light-theme .header .header-btn {
    color: var(--text-h4);
}

.header .lang-btn {
    box-shadow: var(--header-edge-shadow-bottom), var(--header-edge-shadow-top);
}

.header .header-btn:hover,
.header .header-btn.active {
    box-shadow: none !important;
    background: transparent !important;
    color: var(--accent);
}

/* Search Bar */
.search-row-inner {
    height: 0;
    overflow: hidden;
    transition: height 0.4s var(--ease);
    background: transparent;
    border-bottom: none;
}

.header.search-active .search-row-inner {
    height: 70px;
}

.search-input-container {
    height: 100%;
    display: flex;
    align-items: center;
}

.header .search-form {
    display: flex;
    align-items: center;
    width: 100%;
    gap: 12px;
    position: relative;
    max-width: 100%;
    margin: 0 auto;
}

/* Scoped input-glass for header search ONLY */
.header .input-glass {
    width: 100%;
    background-color: color-mix(in oklab, var(--surface-1) 30%, transparent) !important;
    background-image: linear-gradient(135deg, color-mix(in oklab, var(--bg-grad-2) 15%, transparent), color-mix(in oklab, var(--bg-grad-1) 15%, transparent)) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    backdrop-filter: blur(8px) !important;
    border: none !important;
    border-radius: var(--radius-md) !important;
    font-size: 1.1rem;
    color: var(--text-primary);
    padding: 12px 16px 12px 48px !important;
    /* Extra left padding for icon */
    outline: none;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1) !important;
    transition: all 0.3s var(--ease);
}

.header .input-glass:focus {
    box-shadow: 0 0 25px 5px color-mix(in oklab, var(--accent) 40%, transparent) !important;
    background-color: color-mix(in oklab, var(--surface-1) 50%, transparent) !important;
}

#clearSearchBtn {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 8px;
    display: none;
    /* JS will toggle visibility */
    align-items: center;
    justify-content: center;
}

#clearSearchBtn.visible {
    display: flex;
}

#clearSearchBtn:hover {
    color: var(--accent);
}

#searchSubmitBtn {
    display: none;
    /* Hide for now as requested, we use toggle button for submission */
}


.header .search-form:has(.input-glass:focus) .input-icon {
    color: var(--accent);
    filter: drop-shadow(0 0 8px color-mix(in srgb, var(--accent), transparent 50%));
}

/* Mobile Menu Overlay */
#mobileMenuOverlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: color-mix(in oklab, var(--bg-main) 85%, transparent);
    /* Much more opaque to hide content while blurring */
    -webkit-backdrop-filter: saturate(180%) blur(40px);
    backdrop-filter: saturate(180%) blur(40px);
    z-index: 10001;
    /* Above header */
    pointer-events: none;
    opacity: 0;
    transition: all 0.4s var(--ease);
    display: flex;
    flex-direction: column;
}

#mobileMenuOverlay.open {
    pointer-events: all;
    opacity: 1;
}

.mobile-overlay-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-inline: 16px;
    /* Match main header padding */
    padding-block: 0;
    border-bottom: 1px solid var(--border);
    background: var(--panel) !important;
    /* Solid background for header row in overlay */
    box-sizing: border-box;
    position: relative;
    height: 60px;
    /* Match main header height */
    min-height: 60px;
    z-index: 100;
}

.mobile-overlay-header .logo {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    margin: 0;
}

.mobile-overlay-header .logo img {
    max-width: 120px;
    /* Match main header */
    height: 32px;
}

/* Close button - no border, same position as burger */
#mobileMenuCloseBtnOverlay {
    z-index: 10;
    width: 40px;
    height: 40px;
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent !important;
    border: none !important;
    color: var(--text-primary);
    transition: all 0.3s var(--ease);
    flex-shrink: 0;
    cursor: pointer;
}

/* Language dropdown in overlay - position to match theme switcher in main header */
/* Mobile header controls group (top-right of overlay) */
.mobile-header-controls {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 12px !important;
    z-index: 20;
    flex-shrink: 0;
    position: relative;
    margin-left: auto;
    /* Push to the right if needed, though space-between handles it */
}

#mobileMenuCloseBtnOverlay:hover {
    color: var(--accent);
}

#mobileMenuCloseBtnOverlay .cross-icon {
    width: 24px;
    height: 24px;
}

#mobileLangDropdown {
    z-index: 10;
}

/* Language dropdown in mobile menu */
.mobile-header-controls #mobileLangDropdown {
    display: flex !important;
    flex-shrink: 0;
}

.mobile-header-controls #mobileLangDropdown .lang-btn {
    display: flex !important;
}

/* Theme switcher in mobile menu - MUST be visible */
.mobile-header-controls .theme-switch-final {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    flex-shrink: 0 !important;
    z-index: 30;
    position: relative !important;
    width: 56px !important;
    min-width: 56px !important;
    height: 30px !important;
}

.mobile-theme-toggle {
    margin-right: 0;
}

/* Force visibility of theme switcher in mobile menu overlay */
#mobileMenuOverlay .mobile-header-controls .theme-switch-final,
#mobileMenuOverlay .theme-switch-final.mobile-theme-toggle {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 56px !important;
    min-width: 56px !important;
    height: 30px !important;
    flex-shrink: 0 !important;
    position: relative !important;
    z-index: 100 !important;
}

#mobileMenuOverlay .theme-switch-final .knob-final {
    display: flex !important;
    visibility: visible !important;
}

.mobile-menu-content-wrapper {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 16px 0;
    /* Remove horizontal padding for full-width items */
    text-align: left !important;
}

/* Mobile menu container full width */
.mobile-menu-content,
.menu-mobile-list {
    width: 100%;
    padding: 0;
    margin: 0;
    list-style: none;
}

.mobile-menu-content .menu-item,
.menu-mobile-list .menu-item {
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
}

.mobile-menu-content .menu-item>a,
.menu-mobile-list .menu-item>a {
    font-size: 1.1rem;
    padding: 14px 20px;
    /* Increased padding */
    background: transparent;
    margin-bottom: 0;
    border-radius: 0;
    color: var(--text-primary);
    text-decoration: none;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    /* Strict left alignment for text */
    gap: 12px;
    transition: all 0.3s var(--ease);
    border: none;
    width: 100%;
    box-sizing: border-box;
    text-align: left !important;
    position: relative;
}

/* Custom separator line (not full width) */
.mobile-menu-content .menu-item>a::after,
.menu-mobile-list .menu-item>a::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 20px;
    /* Match content padding */
    right: 20px;
    height: 1px;
    background: color-mix(in oklab, var(--border) 20%, transparent);
}

/* Remove separator for the last item or sub-menu items if needed */
.menu-mobile-list .menu-item:last-child>a::after {
    display: none;
}

.menu-mobile-list .menu-item>a .uxt-link-text {
    flex-grow: 1;
    text-align: left;
}

.menu-mobile-list .menu-item>a .menu-icon {
    margin-left: auto;
    /* Push arrow to the right, keep text on the left */
}

.menu-mobile-list .menu-item>a:hover {
    background: transparent;
    color: var(--text-primary);
    /* Keep text neutral */
}

/* Ensure active parent items don't change color to accent */
.menu-mobile-list .menu-item.active>a {
    color: var(--text-primary) !important;
}

.menu-mobile-list .sub-menu {
    max-height: 0;
    overflow: hidden;
    list-style: none;
    padding: 0;
    /* No horizontal padding for sub-menus either */
    margin: 0;
    transition: max-height 0.4s var(--ease), opacity 0.3s ease;
    opacity: 0;
    pointer-events: none;
    background: rgba(0, 0, 0, 0.1);
}

.menu-mobile-list .sub-menu .menu-item>a {
    padding-left: 36px;
    /* Indent text instead of container */
}

.menu-mobile-list .sub-menu .sub-menu .menu-item>a {
    padding-left: 52px;
    /* Deeper indentation */
}

.menu-mobile-list .menu-item.active>.sub-menu {
    max-height: 5000px !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    margin-bottom: 10px;
    display: block !important;
    /* Force display in case jQuery left it hidden */
}

.menu-mobile-list .menu-item.active>a .menu-icon {
    transform: rotate(90deg);
}

.menu-mobile-list .menu-item>a .menu-icon {
    transition: transform 0.3s var(--ease);
}

/* 
   THEME SWITCHER STYLES REMOVED
   Using global UI Kit styles (.theme-switch-final) to ensure consistency and prevent breakage.
*/

#mobileMenuToggle {
    display: none;
}

.hamburger-icon {
    width: 24px;
    height: 24px;
    display: block;
}

@media (max-width: 1024px) {
    #mobileMenuToggle {
        display: flex;
    }

    #multiLevelMenu,
    #langDropdown {
        display: none;
    }

    /* Keep Search visible on mobile if needed */
    #searchToggleBtn {
        display: flex;
    }

    .header .header-controls {
        gap: 8px;
    }
}

/* Custom Scrollbar for dropdowns */
.header .dd-menu::-webkit-scrollbar {
    width: 4px;
}

.header .dd-menu::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 4px;
}