/* ==========================================================================
   Alisetechnic Theme - Header & Mobile Menu
   Professional UX with Glass Effect
   ========================================================================== */

/* ==========================================================================
   HEADER - DESKTOP
   ========================================================================== */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: var(--at-z-header, 9999) !important;
    background-color: transparent;
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), 
                background-color 0.3s ease, 
                box-shadow 0.3s ease,
                backdrop-filter 0.3s ease;
    /* Ensure header creates its own stacking context above Elementor */
    isolation: isolate;
    /* ================================================================
     * RESPONSIVE HEADER HEIGHT
     * Ühtne süsteem - header kõrgus skaleerub viewport laiusega.
     * .header-inner height kontrollib visuaalset kõrgust,
     * .site-header ei sea fikseeritud min-height.
     * ================================================================ */
}

/* ==========================================================================
   ELEMENTOR COMPATIBILITY
   Ensure header stays above Elementor content
   ========================================================================== */
.site-content,
.elementor,
.elementor-location-single,
.elementor-section-wrap,
.elementor-element.elementor-element-edit-mode {
    position: relative;
    z-index: auto;
}

/* Override Elementor sections that might have z-index */
body:not(.elementor-editor-active) .elementor-section,
body:not(.elementor-editor-active) .elementor-container,
body:not(.elementor-editor-active) .e-con,
body:not(.elementor-editor-active) .e-con-inner {
    z-index: auto !important;
}

/* Exceptions for Elementor popups/modals that need high z-index */
.elementor-popup-modal,
.elementor-lightbox,
.elementor-menu-toggle__content,
.e-n-menu-content,
[data-elementor-type="popup"] {
    z-index: var(--at-z-modal, 10010) !important;
}

/* White Glass effect when at top of page - frosted glass */
.site-header.at-top {
    background-color: rgba(255, 255, 255, 0.45);
    backdrop-filter: blur(28px) saturate(200%);
    -webkit-backdrop-filter: blur(28px) saturate(200%);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04),
                inset 0 -1px 0 rgba(255, 255, 255, 0.5);
}

/* Solid white background when scrolled */
.site-header.is-scrolled {
    background-color: rgba(255, 255, 255, 0.98);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.08);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* Hidden state - slide up out of view */
.site-header.is-hidden {
    transform: translateY(-100%);
}

/* Legacy sticky class support */
.site-header.is-sticky {
    background-color: rgba(255, 255, 255, 0.98);
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.08);
}

.header-inner {
    /* UUENDATUD STRUKTUUR 3.0: CSS Grid kolme veeruga
     * Grid ignoreerib display:none elemente (mobile-header-actions)
     * Grid areas: logo | nav | lang
     */
    display: grid !important;
    grid-template-areas: "logo nav lang" !important;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important;
    align-items: center;
    width: 100%;
    /* PARANDATUD: max-width: none tagab, et Customizer inline CSS ei saa seda piirata */
    max-width: none !important;
    /* Header kõrgus: logo max 50px + padding → header min 64px, max 80px
     * 1920px: 5vw = 96px → cap 80px
     * 1366px: 5vw = 68px → 68px
     * 1024px: 5vw = 51px → min 64px
     */
    height: clamp(64px, 5vw, 80px);
    /* PARANDATUD: Fixed padding servadele */
    padding: 0 clamp(20px, 2.5vw, 40px);
    transition: height 0.3s ease;
    overflow: visible; /* Allow dropdowns to extend beyond header */
    box-sizing: border-box;
}

.site-header.is-scrolled .header-inner,
.site-header.is-sticky .header-inner {
    height: clamp(54px, 4.2vw, 65px);
}

/* ==========================================================================
   MOBILE HEADER ACTIONS
   PARANDATUD: Peidetud desktop'il, et mitte segada grid layouti
   ========================================================================== */
.mobile-header-actions {
    display: none; /* Hidden on desktop */
}

/* ==========================================================================
   LOGO - Never changes color, maintains brand identity
   UUENDATUD 3.0: Logo on grid area "logo", vasakul ekraani servas
   ========================================================================== */
.site-branding {
    grid-area: logo !important;
    justify-self: start !important;
    /* VERTIKAALNE TSENTREERIMINE v4.0
     * height: 100% tagab, et branding täidab grid-celli kõrguse.
     * display: flex + align-items: center joondab logo vertikaalsel keskele.
     */
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    z-index: var(--at-z-header-content, 10001);
    min-width: 0;
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

.site-branding a,
.site-branding .custom-logo-link {
    display: flex !important;
    align-items: center !important;
    height: 100%;
    padding: 0;
    margin: 0;
    line-height: 1;
}

.site-branding img,
.site-branding .custom-logo {
    /* RESPONSIVE LOGO SIZING v4.0
     * display: block eemaldab inline baseline gap.
     * max-height kontrollib logo suurust.
     */
    display: block !important;
    max-height: clamp(38px, 4vw, 50px) !important;
    width: auto !important;
    height: auto !important;
    transition: max-height 0.3s ease;
    filter: none !important;
    object-fit: contain;
    padding: 0;
    margin: 0;
}

.site-header.is-scrolled .site-branding img,
.site-header.is-sticky .site-branding img {
    max-height: clamp(32px, 3.5vw, 42px) !important;
}

.site-title {
    font-family: 'Raleway', sans-serif;
    font-size: clamp(1rem, 1.5vw, 1.4rem);
    font-weight: 700;
    color: #393939;
    text-transform: uppercase;
    letter-spacing: 2px;
    transition: color 0.3s ease;
}

/* Site title stays dark for readability on white glass */
.site-header.at-top .site-title {
    color: #393939;
}

/* ==========================================================================
   NAVIGATION - DESKTOP (Centered, Responsive)
   UUENDATUD 3.0: Grid area "nav", tsentreeritud header container'is
   ========================================================================== */
.main-navigation {
    /* Grid positioning */
    grid-area: nav !important; /* Grid area */
    justify-self: center !important; /* Tsentreeritud header container'is */

    display: flex;
    align-items: center;
    justify-content: center;

    /* PARANDATUD: Ainult menüü järgib layout max-width */
    max-width: 1400px;
    width: auto; /* Let content determine width */
    min-width: 0; /* Allows flex item to shrink below content size */

    z-index: var(--at-z-header-content, 10000);
}

.main-navigation .primary-menu {
    display: flex;
    align-items: center;
    justify-content: center;
    list-style: none;
    margin: 0;
    padding: 0;
    /* Responsive gap between menu items - scales better with viewport */
    gap: clamp(2px, 0.6vw, 10px);
    flex-wrap: nowrap; /* Keep menu items in single row */
    max-width: 100%;
}

.main-navigation .menu-item {
    position: relative;
    flex-shrink: 0; /* Don't shrink menu items */
}

.main-navigation .menu-item > a {
    display: block;
    font-family: 'Raleway', sans-serif;
    /*
     * PARANDATUD 2.0 - Responsive font scaling optimeeritud HD/Full HD jaoks:
     * - Minimum: 8px (väiksem min väärtus)
     * - Preferred: 0.75vw (tagasi algse juurde, parem scaling)
     * - Maximum: 12px (vähendatud 14px → 12px HD ekraanide jaoks)
     * At 1920px viewport: 0.75vw = 14.4px → max 12px applies
     * At 1600px viewport: 0.75vw = 12px
     * At 1366px viewport: 0.75vw = 10.2px
     * At 1280px viewport: 0.75vw = 9.6px
     * At 1000px viewport: 0.75vw = 7.5px → min 8px applies
     */
    font-size: clamp(8px, 0.75vw, 12px);
    font-weight: 600;
    /* Dark text for white glass background */
    color: #2a2a2a;
    text-transform: uppercase;
    /* Responsive letter-spacing - better scaling */
    letter-spacing: clamp(0.3px, 0.08vw, 1.2px);
    /* Responsive padding - optimized for smaller screens */
    padding: clamp(6px, 0.8vw, 13px) clamp(8px, 1vw, 16px);
    position: relative;
    transition: color 0.25s ease, font-size 0.2s ease;
    white-space: nowrap; /* Prevent text wrapping */
}

/* Nav links stay dark on white glass */
.site-header.at-top .main-navigation .menu-item > a {
    color: #2a2a2a;
}

.site-header.at-top .main-navigation .menu-item > a:hover {
    color: #d80606;
}

.main-navigation .menu-item > a::after {
    content: '';
    position: absolute;
    bottom: 8px;
    left: 16px;
    right: 16px;
    height: 2px;
    background-color: #d80606;
    transform: scaleX(0);
    transition: transform 0.3s ease;
}

.main-navigation .menu-item > a:hover::after,
.main-navigation .menu-item.current-menu-item > a::after,
.main-navigation .menu-item.current_page_item > a::after {
    transform: scaleX(1);
}

.main-navigation .menu-item > a:hover,
.main-navigation .menu-item.current-menu-item > a {
    color: #d80606;
}

/* Dropdown */
.main-navigation .sub-menu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 200px;
    background: #fff;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    border-top: 3px solid #d80606;
    list-style: none;
    margin: 0;
    padding: 10px 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.3s ease;
}

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

.main-navigation .sub-menu a {
    padding: 10px 20px;
    font-size: 11px;
}

.main-navigation .sub-menu a::after {
    display: none;
}

.main-navigation .sub-menu a:hover {
    background: #f8f8f8;
    color: #d80606;
}

/* ==========================================================================
   FLOATING LANGUAGE SWITCHER - Fixed position (works with any header)
   ========================================================================== */
.floating-language-switcher {
    position: fixed !important;
    top: 25px !important;
    right: 30px !important;
    z-index: var(--at-z-header-dropdown, 10001) !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Admin bar offset */
body.admin-bar .floating-language-switcher {
    top: 57px !important;
}

@media (max-width: 782px) {
    body.admin-bar .floating-language-switcher {
        top: 61px !important;
    }
}

/* Hide on tablet & mobile - mobile-header-actions handles lang switcher */
@media (max-width: 991px) {
    .floating-language-switcher {
        display: none !important;
    }
}

/* ==========================================================================
   LANGUAGE DROPDOWN - Professional Responsive Design
   ========================================================================== */

/* Desktop only - shown outside navigation
   UUENDATUD: Keelelüliti on ekraani paremal servas, ei vaja margine
*/
.header-language-switcher.desktop-only,
.at-lang-switcher-wrap.desktop-only {
    display: block;
    position: relative;
    /* EEMALDATUD margin ja padding - keelelüliti on juba ekraani servas */
    margin-left: 0;
    padding-left: 0;
    border-left: none; /* Eemaldatud border */
    flex-shrink: 0;
    z-index: var(--at-z-header-content, 10000);
}

/* Mobile only - hidden on desktop */
.header-language-switcher.mobile-only,
.at-lang-switcher-wrap.mobile-only {
    display: none;
}

/* Dropdown Container */
.lang-dropdown {
    position: relative;
    z-index: var(--at-z-header-dropdown, 10001);
}

/* Toggle Button - uses Customizer CSS variables (--at-lang-*) */
.lang-dropdown-toggle {
    display: flex;
    align-items: center;
    gap: clamp(6px, 0.6vw, 10px);
    padding: clamp(6px, 0.8vw, 10px) clamp(10px, 1vw, 16px);
    background: var(--at-lang-bg, transparent);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: var(--at-lang-radius, 6px);
    cursor: pointer;
    font-family: 'Raleway', sans-serif;
    font-size: clamp(10px, 0.75vw, 12px);
    font-weight: 600;
    color: var(--at-lang-text, #2a2a2a);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.25s ease;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.lang-dropdown-toggle:hover {
    background: var(--at-lang-bg-hover, rgba(0, 0, 0, 0.04));
    border-color: rgba(0, 0, 0, 0.15);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.lang-dropdown-toggle .flag-icon {
    width: clamp(18px, 1.6vw, 24px);
    height: clamp(13px, 1.2vw, 17px);
    object-fit: cover;
    border-radius: 3px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

.lang-dropdown-toggle .lang-code {
    font-weight: 700;
}

.lang-dropdown-toggle .dropdown-arrow {
    width: clamp(8px, 0.7vw, 10px);
    height: auto;
    transition: transform 0.25s ease;
    opacity: 0.6;
}

/* Arrow rotation when open */
.lang-dropdown.is-open .lang-dropdown-toggle .dropdown-arrow {
    transform: rotate(180deg);
}

/* Dropdown Menu */
.lang-dropdown-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 160px;
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 8px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12),
                0 2px 10px rgba(0, 0, 0, 0.06);
    padding: 6px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: var(--at-z-header-dropdown, 10001);
}

.lang-dropdown.is-open .lang-dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Dropdown Items */
.lang-dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 6px;
    text-decoration: none;
    transition: all 0.2s ease;
}

.lang-dropdown-item:hover {
    background: rgba(216, 6, 6, 0.08);
}

.lang-dropdown-item .flag-icon {
    width: 22px;
    height: 16px;
    object-fit: cover;
    border-radius: 3px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
    flex-shrink: 0;
}

.lang-dropdown-item .lang-name {
    font-family: 'Raleway', sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: #2a2a2a;
    flex: 1;
}

.lang-dropdown-item .lang-code {
    font-family: 'Raleway', sans-serif;
    font-size: 10px;
    font-weight: 700;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.lang-dropdown-item:hover .lang-name {
    color: #d80606;
}

.lang-dropdown-item:hover .lang-code {
    color: #d80606;
}

/* Header state adjustments */
.site-header.at-top .lang-dropdown-toggle {
    background: var(--at-lang-bg, transparent);
    border-color: rgba(255, 255, 255, 0.3);
    color: var(--at-lang-text, #2a2a2a);
}

.site-header.at-top .lang-dropdown-toggle:hover {
    background: var(--at-lang-bg-hover, rgba(0, 0, 0, 0.04));
}

.site-header.is-scrolled .header-language-switcher {
    border-left-color: rgba(0, 0, 0, 0.1);
}

/* ==========================================================================
   LEGACY HAMBURGER BUTTON - .menu-toggle
   Now replaced by .mobile-menu-toggle in mobile-menu.css.
   Keeping minimal fallback only for backwards compatibility.
   ========================================================================== */
.menu-toggle {
    display: none; /* Always hidden — .mobile-menu-toggle is the active toggle */
}

/* ==========================================================================
   MOBILE OVERLAY — defined in mobile-menu.css (single source of truth)
   ========================================================================== */

/* ==========================================================================
   RESPONSIVE - 4K / ULTRA WIDE (min 2400px)
   Extra large 4K screens - generous spacing
   ========================================================================== */
@media (min-width: 2400px) {
    /* Header on full-width, ainult menüü järgib max-width */
    .main-navigation {
        max-width: 1800px;
    }

    .main-navigation .primary-menu {
        gap: 14px;
    }

    .main-navigation .menu-item > a {
        font-size: 14px;
        padding: 16px 22px;
        letter-spacing: 1.8px;
    }
}

/* ==========================================================================
   RESPONSIVE - 2K SCREEN (1920px - 2399px)
   2560x1440 optimal range
   ========================================================================== */
@media (min-width: 1920px) and (max-width: 2399px) {
    /* Header on full-width, ainult menüü järgib max-width */
    .main-navigation {
        max-width: 1600px;
    }

    .main-navigation .primary-menu {
        gap: 10px;
    }

    .main-navigation .menu-item > a {
        font-size: 13px;
        padding: 14px 18px;
        letter-spacing: 1.4px;
    }
}

/* ==========================================================================
   RESPONSIVE - FULL HD (1600px - 1919px)
   1920x1080 optimal range - FIXED FONT SIZE
   ========================================================================== */
@media (min-width: 1600px) and (max-width: 1919px) {
    /* Header on full-width, ainult menüü järgib max-width */
    .main-navigation {
        max-width: 1400px;
    }

    .main-navigation .primary-menu {
        gap: 8px;
    }

    .main-navigation .menu-item > a {
        /* PARANDATUD: Väiksem font Full HD jaoks */
        font-size: 11px;
        padding: 12px 14px;
        letter-spacing: 1.1px;
    }
}

/* ==========================================================================
   RESPONSIVE - DESKTOP (1366px - 1599px)
   Standard desktop view - HD SCREENS
   ========================================================================== */
@media (min-width: 1366px) and (max-width: 1599px) {
    .main-navigation {
        max-width: 1200px;
    }

    .main-navigation .primary-menu {
        gap: 5px;
    }

    .main-navigation .menu-item > a {
        /* PARANDATUD: Väiksem font HD ekraanidele */
        font-size: 10px;
        padding: 10px 12px;
        letter-spacing: 0.8px;
    }
}

/* ==========================================================================
   RESPONSIVE - SMALL DESKTOP (1200px - 1365px)
   Smaller HD screens
   ========================================================================== */
@media (min-width: 1200px) and (max-width: 1365px) {
    .main-navigation {
        max-width: 1100px;
    }

    .main-navigation .primary-menu {
        gap: 4px;
    }

    .main-navigation .menu-item > a {
        /* PARANDATUD: Kompaktne font väikestele HD ekraanidele */
        font-size: 9px;
        padding: 9px 10px;
        letter-spacing: 0.6px;
    }
}

/* ==========================================================================
   RESPONSIVE - MEDIUM DESKTOP (1100px - 1199px)
   Slightly compressed menu
   ========================================================================== */
@media (min-width: 1100px) and (max-width: 1199px) {
    .main-navigation {
        max-width: 1000px;
    }

    .main-navigation .primary-menu {
        gap: 3px;
    }

    .main-navigation .menu-item > a {
        /* PARANDATUD: Väiksem font */
        font-size: 9px;
        padding: 8px 10px;
        letter-spacing: 0.5px;
    }
}

/* ==========================================================================
   RESPONSIVE - SMALL DESKTOP (1000px - 1099px)
   More compression while maintaining readability
   ========================================================================== */
@media (min-width: 1000px) and (max-width: 1099px) {
    .main-navigation {
        max-width: 900px;
    }

    .main-navigation .primary-menu {
        gap: 2px;
    }

    .main-navigation .menu-item > a {
        /* PARANDATUD: Kompaktsem */
        font-size: 9px;
        padding: 7px 8px;
        letter-spacing: 0.4px;
    }

    .lang-dropdown-toggle {
        padding: 6px 8px;
        font-size: 9px;
    }
}

/* ==========================================================================
   RESPONSIVE - COMPACT DESKTOP (992px - 999px)
   Last desktop size before mobile menu
   ========================================================================== */
@media (min-width: 992px) and (max-width: 999px) {
    .main-navigation {
        max-width: 800px;
    }

    .main-navigation .primary-menu {
        gap: 1px;
    }

    .main-navigation .menu-item > a {
        /* PARANDATUD: Minimaalne aga loetav */
        font-size: 8px;
        padding: 6px 6px;
        letter-spacing: 0.3px;
    }

    .lang-dropdown-toggle {
        padding: 5px 6px;
        font-size: 8px;
    }

    .lang-dropdown-toggle .lang-code {
        display: none; /* Hide language code to save space */
    }
}

/* ==========================================================================
   RESPONSIVE - MOBILE (max 991px)
   Mobile menu activates - desktop nav is hidden, grid layout muutub
   ========================================================================== */
@media (max-width: 991px) {
    /* Mobile grid: ainult logo vasakul, mobile actions paremal */
    .header-inner {
        grid-template-areas: "logo space" !important;
        grid-template-columns: auto 1fr !important;
        height: 56px !important;
        /* !important padding, sest functions.php inline CSS .site-header .header-inner
         * (spetsiifilisus 0,2,0) kirjutab muidu üle.
         */
        padding: 0 12px !important;
        padding-right: 64px !important; /* Ruum mobile actions jaoks */
        position: relative;
    }

    /* MOBILE LOGO - Vertikaalne tsentreerimine v4.0
     * Kõik reeglid päritakse baasklassist (peale max-height).
     * !important tagab, et inline CSS (functions.php) ei saa üle kirjutada.
     */

    .site-header.is-scrolled .header-inner,
    .site-header.is-sticky .header-inner {
        height: 50px !important;
    }

    .site-branding img {
        max-height: 32px !important;
    }

    .site-header.is-scrolled .site-branding img,
    .site-header.is-sticky .site-branding img {
        max-height: 28px !important;
    }

    /* Hide desktop navigation - mobile menu handles this now */
    .main-navigation.desktop-nav,
    .header-extras .desktop-only,
    .at-lang-switcher-wrap.desktop-only {
        display: none !important;
    }

    /* Show mobile header actions (hamburger + language switcher)
     * NOTE: Positioning & gap are defined in mobile-menu.css — do NOT duplicate here.
     * Only set display:flex to make visible on tablet. */
    .mobile-header-actions {
        display: flex !important;
    }
}

/* ==========================================================================
   RESPONSIVE - MOBILE (max 767px)
   ========================================================================== */
@media (max-width: 767px) {
    /* Header - Clean minimal mobile header */
    .site-header {
        background: rgba(255, 255, 255, 0.98);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
    }
    
    .header-inner {
        height: 52px !important;
        padding: 0 10px !important;
        padding-right: 56px !important;
    }
    
    .site-header.is-sticky .header-inner {
        height: 48px !important;
    }
    
    .site-branding img {
        max-height: 28px !important;
        transition: max-height 0.25s ease;
    }
    
    .site-header.is-sticky .site-branding img {
        max-height: 24px !important;
    }
    
    /* Hide old menu toggle - new one is in mobile-menu.css */
    .menu-toggle:not(.mobile-menu-toggle) {
        display: none !important;
    }
    
    /* Legacy mobile nav styles removed — mobile-menu.css handles #mobile-nav panel
     * The old .main-navigation:not(.desktop-nav) selectors never matched any element
     * because desktop nav always carries .desktop-nav class.
     */
    
    /* Legacy close button area — removed (dead CSS). Original:
     * .main-navigation:not(.desktop-nav) was a fixed slide panel at 320px.
     * Now replaced by mobile-menu.css #mobile-nav panel.
     */
    
    /* Mobile Menu List - Clean spacing (for desktop nav in mobile context) */
    .main-navigation .primary-menu {
        flex-direction: column;
        width: 100%;
        padding: 16px 0;
    }
    
    .main-navigation .menu-item {
        width: 100%;
        border: none;
    }
    
    .main-navigation .menu-item:first-child {
        border-top: none;
    }
    
    .main-navigation .menu-item > a {
        display: block;
        padding: 16px 24px;
        margin: 0 12px;
        border-radius: 8px;
        font-size: 15px;
        font-weight: 500;
        color: #2a2a2a;
        letter-spacing: 0.5px;
        transition: all 0.2s ease;
    }
    
    .main-navigation .menu-item > a::after {
        display: none;
    }
    
    .main-navigation .menu-item > a:hover {
        background: rgba(0, 0, 0, 0.04);
        color: #000;
    }
    
    .main-navigation .menu-item.current-menu-item > a {
        background: rgba(216, 6, 6, 0.08);
        color: #d80606;
    }
    
    /* Mobile submenu - Nested style */
    .main-navigation .sub-menu {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        border-top: none;
        padding: 0;
        margin: 0 12px 8px 12px;
        background: rgba(0, 0, 0, 0.03);
        border-radius: 8px;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.35s ease, margin 0.35s ease;
    }
    
    .main-navigation .menu-item.submenu-open > .sub-menu {
        max-height: 500px;
        margin-top: 8px;
    }
    
    .main-navigation .sub-menu a {
        padding: 14px 20px 14px 24px;
        margin: 0;
        border-radius: 0;
        font-size: 14px;
        color: #555;
        font-weight: 400;
    }
    
    .main-navigation .sub-menu a:hover {
        background: rgba(0, 0, 0, 0.04);
        color: #000;
    }
    
    .main-navigation .sub-menu li:first-child a {
        border-radius: 8px 8px 0 0;
    }
    
    .main-navigation .sub-menu li:last-child a {
        border-radius: 0 0 8px 8px;
    }
    
    /* Submenu arrow - Cleaner chevron */
    .main-navigation .menu-item-has-children > a {
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: relative;
    }
    
    .main-navigation .menu-item-has-children > a::before {
        content: '';
        position: absolute;
        right: 36px;
        width: 7px;
        height: 7px;
        border-right: 2px solid #999;
        border-bottom: 2px solid #999;
        transform: rotate(45deg);
        transition: transform 0.3s ease;
    }
    
    .main-navigation .menu-item-has-children.submenu-open > a::before {
        transform: rotate(-135deg);
    }
    
    /* Mobile: hide desktop switcher, show mobile switcher */
    .header-language-switcher.desktop-only,
    .at-lang-switcher-wrap.desktop-only {
        display: none !important;
    }
    
    .header-language-switcher.mobile-only,
    .at-lang-switcher-wrap.mobile-only {
        display: block;
        margin: 24px 12px 0;
        padding: 24px 12px 0;
        border-left: none;
        border-top: 1px solid rgba(0, 0, 0, 0.06);
    }
    
    .lang-dropdown,
    .at-lang-switcher {
        width: 100%;
    }
    
    /* Language switcher mobile styles
     * NOTE: mobile header actions lang switcher is styled in language-switcher.css
     * (.at-lang-mobile-header). These styles are for lang switcher INSIDE
     * the mobile nav panel (.mobile-menu-lang context) — handled by mobile-menu.css.
     */
    
    /* Old language dropdown for backwards compat */
    .lang-dropdown-toggle {
        width: 100%;
        justify-content: center;
        padding: 14px 20px;
        background: rgba(0, 0, 0, 0.03);
        border: none;
        border-radius: 8px;
        font-size: 13px;
    }
    
    .lang-dropdown-menu {
        position: static;
        margin-top: 8px;
        opacity: 1;
        visibility: visible;
        transform: none;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.35s ease;
        padding: 0;
        border: none;
        box-shadow: none;
        background: rgba(0, 0, 0, 0.03);
        border-radius: 8px;
    }
    
    .lang-dropdown.is-open .lang-dropdown-menu {
        max-height: 300px;
    }
    
    .lang-dropdown-item {
        padding: 14px 16px;
        border-radius: 0;
    }
    
    /* Body scroll lock */
    body.mobile-menu-open {
        overflow: hidden;
        position: fixed;
        width: 100%;
        height: 100%;
    }
}

/* ==========================================================================
   RESPONSIVE - SMALL MOBILE (max 480px)
   ========================================================================== */
@media (max-width: 480px) {
    .header-inner {
        height: 56px !important;
        padding: 0 12px !important;
    }
    
    .main-navigation {
        padding-top: 56px;
    }
    
    .main-navigation::before {
        height: 56px;
    }
    
    .site-branding img {
        max-height: 28px !important;
    }

    .site-header.is-sticky .site-branding img {
        max-height: 24px !important;
    }
    
    .main-navigation {
        width: 100%;
        max-width: 100%;
    }
    
    .main-navigation .menu-item > a {
        padding: 14px 20px;
        margin: 0 8px;
        font-size: 14px;
    }
    
    .main-navigation .sub-menu {
        margin: 0 8px 8px 8px;
    }
    
    .header-language-switcher.mobile-only,
    .at-lang-switcher-wrap.mobile-only {
        margin: 20px 8px 0;
        padding: 20px 8px 0;
    }
}

/* ==========================================================================
   RESPONSIVE - EXTRA SMALL MOBILE (max 360px)
   ========================================================================== */
@media (max-width: 360px) {
    .header-inner {
        height: 50px !important;
        padding: 0 8px !important;
    }
    
    .main-navigation {
        padding-top: 50px;
    }
    
    .main-navigation::before {
        height: 50px;
    }
    
    .site-branding img {
        max-height: 24px !important;
    }

    .site-header.is-sticky .site-branding img {
        max-height: 22px !important;
    }
    
    /* Legacy .menu-toggle styles removed — .mobile-menu-toggle in mobile-menu.css
     * handles all hamburger button styling at all breakpoints. */
}

/* ==========================================================================
   SKIP LINK (Accessibility)
   ========================================================================== */
.skip-link {
    position: absolute;
    top: -100px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--at-color-primary, #d80606);
    color: #fff;
    padding: 10px 20px;
    font-size: 14px;
    z-index: var(--at-z-max, 99999);
    transition: top 0.3s;
}

.skip-link:focus {
    top: 0;
}

/* ==========================================================================
   PRINT
   ========================================================================== */
@media print {
    .site-header,
    .menu-toggle,
    .mobile-menu-overlay {
        display: none !important;
    }
}

/* ==========================================================================
   HEADER TEMPLATE VARIATIONS
   ========================================================================== */

/* STICKY MODIFIERS */
.site-header--sticky {
    position: fixed;
}

.site-header--sticky-none {
    position: relative;
}

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

/* GLASS MODIFIER */
.site-header--glass.at-top {
    background-color: rgba(255, 255, 255, 0.45);
    backdrop-filter: blur(28px) saturate(200%);
    -webkit-backdrop-filter: blur(28px) saturate(200%);
}

/* CLASSIC TEMPLATE (default) */
/* EEMALDATUD: Flexbox reeglid, kuna kasutame grid layout'i
 * Base .header-inner grid rules apply
 */

/* CENTERED TEMPLATE */
.site-header--centered {
    padding-top: 10px;
}

.site-header--centered .header-inner {
    flex-direction: column;
    align-items: center;
    height: auto;
    padding: 10px 40px 0;
}

.site-header--centered .header-top-row {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    padding-bottom: 10px;
}

.site-header--centered .header-center-row {
    padding: 15px 0;
}

.site-header--centered .site-branding img {
    max-height: 70px;
}

.site-header--centered .main-navigation--centered {
    width: 100%;
    margin: 0;
    padding: 10px 0;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
}

.site-header--centered .main-navigation--centered .primary-menu {
    justify-content: center;
    gap: 0;
}

/* MINIMAL TEMPLATE */
/* EEMALDATUD: Flexbox reegel, kuna kasutame grid layout'i
 * Base .header-inner grid rules apply
 */

.site-header--minimal .header-right {
    display: flex;
    align-items: center;
    gap: 30px;
}

/* EEMALDATUD: Flexbox reegel minimal template jaoks
 * Grid layout kontrollib positsioneerimist
.site-header--minimal .main-navigation {
    flex: none;
    margin: 0;
}
*/

/* TRANSPARENT TEMPLATE */
.site-header--transparent {
    background-color: transparent !important;
    backdrop-filter: none !important;
}

.site-header--transparent.is-scrolled {
    background-color: rgba(255, 255, 255, 0.98) !important;
    backdrop-filter: blur(10px) !important;
}

.site-header--transparent .site-branding img,
.site-header--transparent .site-title,
.site-header--transparent .main-navigation .menu-item > a {
    /* Text color handled by header state */
}

/* HEADER EXTRAS (CTA Button area)
   UUENDATUD 3.0: Grid area "lang", paremal ekraani servas
*/
.header-extras {
    /* Grid positioning */
    grid-area: lang !important; /* Grid area */
    justify-self: end !important; /* Paremal ekraani servas */

    display: flex;
    align-items: center;
    /* PARANDATUD: Responsive gap keelelüliti ja CTA vahel */
    gap: clamp(12px, 1.2vw, 20px);
    z-index: var(--at-z-header-content, 10001);
}

.header-cta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 25px;
    font-family: 'Raleway', sans-serif;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #ffffff;
    background-color: #d80606;
    border-radius: 5px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.header-cta-btn:hover {
    background-color: #b80505;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(216, 6, 6, 0.3);
}

/* Mobile CTA visibility */
.header-cta.mobile-only {
    display: none;
    width: 100%;
    padding: 15px 0;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    margin-top: 10px;
}

.header-cta.mobile-only .header-cta-btn {
    width: 100%;
}

@media (max-width: 991px) {
    .header-cta.desktop-only {
        display: none;
    }
    
    .main-navigation.is-open .header-cta.mobile-only {
        display: block;
    }
    
    /* Centered header mobile adjustments */
    .site-header--centered .header-inner {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;
        padding: 0 20px;
    }
    
    .site-header--centered .header-top-row {
        display: none;
    }
    
    .site-header--centered .header-center-row {
        padding: 10px 0;
    }
    
    .site-header--centered .main-navigation--centered {
        border-top: none;
    }
    
    /* Minimal header mobile adjustments */
    .site-header--minimal .header-right {
        display: none;
    }
}