/* ============================================
   CSS VARIABLES
   ============================================ */
:root {
    /* Colors */
    --nav-primary: #C4122F;
    --nav-on-primary: white;
    --nav-secondary: #E3E8E8;
    --nav-on-secondary: black;
    --nav-primary-hover: rgba(255, 255, 255, 0.15);
    --nav-shadow: rgba(0, 0, 0, 0.1);
    --nav-white: rgba(255, 255, 255, 1);

    /* Spacing */
    --nav-spacing-xs: 8px;
    --nav-spacing-sm: 12px;
    --nav-spacing-md: 16px;
    --nav-spacing-lg: 20px;
    --nav-spacing-xl: 24px;
    --nav-spacing-xxl: 40px;

    /* Sizes */
    --nav-icon-sm: 18px;
    --nav-icon-md: 24px;
    --nav-icon-lg: 27px;
    --nav-button-size: 28px;
    --nav-logo-width: 132px;
    --nav-menu-item-height: 48px;
    --nav-header-height: 78px;

    /* Border Radius */
    --nav-radius-sm: 8px;
    --nav-radius-md: 10px;
    --nav-radius-full: 9999px;
    --nav-radius-circle: 50%;

    /* Z-index */
    --nav-z-header: 999;
    --nav-z-dropdown: 900;
    --nav-z-mobile: 1000;
    --nav-z-submenu: 10;

    /* Transitions */
    --nav-transition-fast: 0.2s ease-in-out;
    --nav-transition-base: 0.3s ease-in-out;
    --nav-transition-dropdown: 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);

    /* Typography */
    --nav-font-size: clamp(12px, 0.8725rem, 16px);
}

/* ============================================
   GLOBAL / BASE STYLES
   ============================================ */
body:has(#IRLBAR) .Main {
    padding-top: 35px;
}

.modal-handlers {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 1920px;
    z-index: 100;
}

#megamenu {
    margin-top: 77px !important;
}

.login-iframe {
    margin-top: 78px;
    z-index: 1005;
}

#loginframe {
    z-index: 9999;
}

#profile-menu-header {
    margin-top: 78px;
}

[data-profile-menu-loggedin] {
    color: var(--nav-on-primary) !important;
}

/* ============================================
   DESKTOP HEADER
   ============================================ */
.page-header {
    position: fixed;
    z-index: var(--nav-z-header);
    width: 100vw;
    display: flex;
    background-color: var(--nav-primary);
    height: 78px;

    .page-header__inner {
        margin: 0 auto;
        max-width: 1920px;
        width: 100%;
        color: var(--nav-on-primary);
        padding: 0 2.75rem;
        display: flex;
        align-items: center;
        gap: var(--nav-spacing-lg);
    }

    .page-header__logo {
        display: block;
        width: var(--nav-logo-width);
        padding: 10px;
        margin: 14px 0;

        img {
            width: 100%;
            height: 100%;
        }
    }

    .page-header__actions {
        display: flex;
        margin-left: auto;
        gap: var(--nav-spacing-sm);
        align-items: center;
    }

    nav {
        display: flex;
        gap: 2rem;
        align-items: center;
        align-self: stretch;

        .menu-item {
            font-size: var(--nav-font-size);
            align-self: stretch;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            text-align: center;

            &:after {
                content: '';
                position: absolute;
                bottom: 0;
                left: 0;
                width: 100%;
                height: 0;
                background-color: var(--nav-on-primary);
                transition: height var(--nav-transition-base);
            }

            &:hover {
                &:after {
                    height: 3px;
                }
            }
        }
    }
}

/* ============================================
   DESKTOP ACTIONS (Search, Language, Profile)
   ============================================ */
.actions {
    &.--mobile-actions {
        display: none;
    }

    .actions__profile-login {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: var(--nav-spacing-md);
        background-color: var(--nav-on-primary);
        color: var(--nav-on-secondary);
        border-radius: var(--nav-radius-full);
        padding: 9px 14px;
        transition: background-color var(--nav-transition-fast);

        p {
            font-size: var(--nav-font-size);
        }
    }

    .actions__profile-login:before {
        content: '';
        display: inline-block;
        mask-image: url('/nxo/assets/icons/Icon_Profile_White.svg');
        mask-size: contain;
        mask-position: center;
        mask-repeat: no-repeat;
        background-color: var(--nav-on-secondary);
        width: var(--nav-icon-lg);
        height: var(--nav-icon-lg);
    }

    .actions__search-icon {
        display: flex;
        align-items: center;
        justify-content: center;

        svg {
            width: var(--nav-icon-md);
            height: var(--nav-icon-md);
        }
    }

    .actions__search-icon-button {
        border: 1px solid var(--nav-on-primary);
        border-radius: var(--nav-radius-circle);
    }

    .actions__language-selector {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .actions__language-selector-button {
        border: 2px solid var(--nav-on-primary);
        border-radius: var(--nav-radius-circle);
        width: var(--nav-icon-lg);
        height: var(--nav-icon-lg);
        box-shadow: 0 0 0 0 var(--nav-white);
        transition: box-shadow var(--nav-transition-base);
        margin: 6.5px;

        &:hover {
            box-shadow: 0 0 0 2px var(--nav-white);
        }
    }

    #search-toggle {
        padding: var(--nav-spacing-xs);
        border-radius: var(--nav-radius-circle);
        background: transparent;
        transition: background-color var(--nav-transition-base);

        &:hover {
            background-color: var(--nav-primary-hover);
        }
    }
}

/* ============================================
   DESKTOP DROPDOWNS
   ============================================ */
.search-area__dropdown {
    --border-color: var(--nav-primary);
    position: absolute;
    right: 60px;
    max-width: 280px;
    width: 100%;
    top: 0;
    background-color: var(--nav-on-primary);
    border-radius: 0 0 var(--nav-radius-md) var(--nav-radius-md);
    box-shadow: 0 4px 8px var(--nav-shadow);
    transition: all var(--nav-transition-dropdown);
    z-index: -1;
    pointer-events: none;

    &:before {
        width: 100%;
        display: block;
        content: '';
        position: absolute;
        top: -30px;
        height: 30px;
        background-color: var(--nav-on-primary);
    }

    &.is-open {
        z-index: var(--nav-z-dropdown);
        display: block;
        top: var(--nav-header-height);
        pointer-events: auto;
    }

    input {
        background-color: transparent;
        border: none !important;
        font-size: 16px; /* Prevents iOS Safari zoom on focus */
    }

    input:focus {
        outline: none !important;
        border: none !important;
        box-shadow: none !important;
    }
}

.language-selector__dropdown {
    position: absolute;
    right: var(--nav-spacing-lg);
    max-width: 173px;
    width: 100%;
    top: calc(-73px);
    background-color: var(--nav-on-primary);
    border-radius: 0 0 var(--nav-radius-md) var(--nav-radius-md);
    box-shadow: 0 4px 8px var(--nav-shadow);
    transition: all var(--nav-transition-dropdown);
    z-index: -1;
    pointer-events: none;

    &:before {
        width: 100%;
        display: block;
        content: '';
        position: absolute;
        top: -30px;
        height: 30px;
        background-color: var(--nav-on-primary);
    }

    &.is-open {
        z-index: var(--nav-z-dropdown);
        top: var(--nav-header-height);
        pointer-events: auto;
    }

    .language-selector__item {
        list-style: none;
        padding: 0;
        margin: 0;

        &:last-of-type {
            overflow: hidden;
            border-radius: 0 0 var(--nav-radius-md) var(--nav-radius-md);
        }
    }

    .language-selector__item a {
        display: flex;
        align-items: center;
        gap: var(--nav-spacing-xs);
        padding: var(--nav-spacing-sm) var(--nav-spacing-md);
        transition: background-color var(--nav-transition-fast);
    }

    .language-selector__item a:hover {
        background-color: var(--nav-secondary);
    }

    img {
        width: var(--nav-icon-md);
        height: var(--nav-icon-md);
    }
}

/* ============================================
   MOBILE MENU
   ============================================ */
.mobile-menu {
    display: none !important;
}

#open-in-app-banner {
    display: none;
}

/* ============================================
   MOBILE STYLES (max-width: 1024px)
   ============================================ */
@media (max-width: 1024px) {

    .page-header__logo {
        padding-left: 0 !important;
    }

    /* Hide desktop navigation */
    .page-header {
        nav {
            display: none;
        }

        .page-header__inner {
            padding: 0 1.25rem !important;
        }
    }

    .--is-hidden-mobile {
        display: none !important;
    }

    .actions {
        &.--mobile-actions {
            display: flex;
        }
    }

    .page-header__logo {
        padding-left: 0;
        padding-right: var(--nav-spacing-lg);
    }

    /* Open in app banner */
    #open-in-app-banner {
        position: fixed;
        transform: translateY(-100%);
        transition: transform var(--nav-transition-base);
        z-index: 9999;
        display: flex;
    }

    #open-in-app-banner:not(.is-hidden) {
        transform: translateY(0);
    }

    #open-in-app-banner:not(.is-hidden) ~ .page-header {
        transform: translateY(78px);
    }

    .page-header {
        transition: transform var(--nav-transition-base);
    }

    /* Modal handlers */
    .modal-handlers {
        display: contents !important;

        & > .search-area__dropdown,
        & > .language-selector__dropdown {
            position: fixed;
        }
    }

    /* Search dropdown mobile */
    .search-area__dropdown {
        right: 0;
        max-width: 100%;
        border-radius: 0;
    }

    /* Profile menu mobile */
    #profile-menu-header {
        margin-top: 160px;
        z-index: 9999;
    }

    /* Login iframe mobile */
    .login-iframe {
        opacity: 0;
        margin-top: calc(78px * 2);
        transition: opacity var(--nav-transition-base);
    }

    body:has(#open-in-app-banner:not(.is-hidden)) .login-iframe {
        opacity: 1;
    }

    body:has(.mobile-menu.is-open) #loginframe {
        bottom: 0;
        height: auto !important;
    }

    /* Mobile menu */
    .mobile-menu {
        transform: translateX(100%);
        z-index: var(--nav-z-mobile);
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background-color: var(--nav-primary);
        display: grid !important;
        grid-template-areas: 
            "header"
            "content"
            "footer";
        grid-template-rows: var(--nav-header-height) 1fr 91px;
        transition: transform var(--nav-transition-base);

        &.is-open {
            transform: translateX(0);
        }

        &.--navigated {
            transform: translateY(-100%);
        }

        &.--mavigated .--with-navigation {
            transform: translateY(0) !important;
        }

        .mobile-menu__header {
            grid-area: header;
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 var(--nav-spacing-sm);
            border-bottom: 1px solid var(--nav-on-primary);
            color: var(--nav-on-primary);

            &.--with-navigation {
                transform: translateY(-100%);
                background-color: var(--nav-primary);
            }
        }

        .mobile-menu__content {
            grid-area: content;
            width: 100%;
            display: flex;
            flex-direction: column;
            gap: var(--nav-spacing-sm);
            padding: var(--nav-spacing-md) var(--nav-spacing-lg);
            overflow-y: scroll;
            overflow-x: hidden;
            position: relative;

            nav {
                position: relative;
                display: flex;
                flex-direction: column;
                justify-content: flex-start;

                .menu-item {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    height: var(--nav-menu-item-height);
                    color: var(--nav-on-primary);

                    &.--parent {
                        &:after {
                            content: '';
                            display: block;
                            height: 13px;
                            width: 7px;
                            mask-image: url('/assets/icons/chevron-right.svg');
                            background-color: currentColor;
                            mask-size: contain;
                            mask-position: center;
                            mask-repeat: no-repeat;
                        }
                    }
                }
            }
        }

        .mobile-menu__language-selector-button {
            margin-top: auto;
            display: flex;
            align-items: center;
            font-size: 14px;
            gap: var(--nav-spacing-xs);
            background-color: var(--nav-secondary);
            border-radius: var(--nav-radius-sm);
            padding: 10px;
            width: fit-content;

            p {
                font-size: 14px;
            }
            
            img {
                width: var(--nav-icon-md);
                height: var(--nav-icon-md);
            }
        }

        .mobile-menu__footer {
            grid-area: footer;
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 24px 20px;
            border-top: 1px solid var(--nav-on-primary);
        }
    }

    /* Mobile menu header elements */
    .menu-header__title {
        font-weight: bold;
    }

    .menu-header__close-btn {
        width: 48px;
        height: 48px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: var(--nav-radius-circle);

        &:active {
            background-color: var(--nav-primary-hover);
        }

        &:before {
            content: '';
            display: block;
            width: 14px;
            height: 14px;
            mask-image: url('/assets/icons/close-cross.svg');
            background-color: var(--nav-on-primary);
            mask-size: contain;
        }
    }

    .menu-header__back-btn {
        width: 48px;
        height: 48px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: var(--nav-radius-circle);

        &:active {
            background-color: var(--nav-primary-hover);
        }

        &:before {
            content: '';
            display: block;
            width: var(--nav-icon-sm);
            height: var(--nav-icon-sm);
            mask-image: url('/assets/icons/arrow-left.svg');
            background-color: var(--nav-on-primary);
            mask-size: contain;
        }
    }

    .menu-header__logo {
        display: block;
        width: var(--nav-logo-width);
        padding: 10px;
        padding-left: 0;
        padding-right: var(--nav-spacing-lg);
        margin: 14px 0;

        img {
            top: 0;
            left: 0;
            width: 100%;
            height: auto;
        }
    }

    /* Mobile language selector */
    .language-selector {
        ul {
            padding: 0;
            margin: 0;
        }

        li {
            list-style: none;
            margin: 0;
        }

        .language-selector__link {
            display: flex;
            align-items: center;
            gap: var(--nav-spacing-xs);
            border-radius: var(--nav-radius-md);
            padding: var(--nav-spacing-sm);
            color: var(--nav-on-primary);
            font-size: 14px;

            img {
                width: var(--nav-icon-md);
                height: var(--nav-icon-md);
            }
        }

        .language-selector__name {
            color: currentColor;
            font-size: 14px;
        }
    }

    .language-selector__item[data-is-current="true"] {
        .language-selector__link {
            background-color: var(--nav-secondary);
            color: var(--nav-on-secondary);
        }
    }

    /* Mobile submenus */
    .js-mobile-language-selector,
    .js-submenu {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: var(--nav-primary);
        transform: translateX(100%);
        transition: transform var(--nav-transition-base);
        z-index: var(--nav-z-submenu);
        overflow-y: auto;
        padding: var(--nav-spacing-md) var(--nav-spacing-lg);

        &.is-open {
            transform: translateX(0);
        }
    }

    /* Mobile profile login */
    .actions .actions__profile-login {
        width: 100%;
        gap: 10px;

        p {
            font-size: var(--nav-font-size);
        }

        &:before {
            width: 20px;
            height: 20px;
        }
    }

    /* Mobile submenu sections */
    nav .submenu-section {
        color: white;

        &:not(:first-of-type) {
            border-top: 1px solid var(--nav-on-primary);
            margin-top: 24px;
        }

        h3.submenu-section__title {
            font-size: 11px;
            font-weight: 700;
            line-height: 14px;
            padding: 12px 0 8px 0;
            margin: 0;
        }

        li.submenu-section__link-item {
            list-style: none;
            margin-left: 0;
        }

        a.submenu-section__link {
            font-size: 16px;
            font-weight: 400;
            line-height: 24px;
            padding: 6px;
            display: flex;
            align-items: center;
            justify-content: space-between;

            &:after {
                height: 1em !important;
                width: 1em !important;
            }
        }
    }
}

/* ============================================
   MOBILE MENU OPEN STATES
   ============================================ */
body:has(.mobile-menu.is-open) {
    #loginframe,
    .login-iframe {
        margin-top: 0 !important;
    }

    #profile-menu-header {
        bottom: 0;
    }

    #profile-menu-header > div > div {
        border-radius: 0;
    }

    /* Hide CookiebotWidget when mobile menu is open */
    #CookiebotWidget {
        display: none;
        transform: translateY(-100%);
    }
}

/* ============================================
   ACCESSIBILITY
   ============================================ */
@media (prefers-reduced-motion: reduce) {
    .search-area__dropdown,
    .language-selector__dropdown,
    .menu-item:after,
    .actions__language-selector-button,
    #search-toggle,
    .actions__profile-login,
    .language-selector__item a {
        transition: none;
    }
}

@media (prefers-contrast: more) {
    #search-toggle {
        transition: none !important;

        &:hover {
            color: var(--nav-on-secondary);
            background-color: var(--nav-white) !important;
        }
    }

    .actions__profile-login {
        transition: none !important;

        &:hover {
            color: var(--nav-primary) !important;
            background-color: var(--nav-on-secondary) !important;

            &:before {
                background-color: var(--nav-on-primary) !important;
            }
        }
    }
}

@media (pointer: coarse) {
    #search-toggle {
        min-width: 44px;
        min-height: 44px;
    }
}

/* ============================================
   LANGUAGE-SPECIFIC OVERRIDES
   ============================================ */
.page-header--lang-kl {
    @media screen and (min-width: 1025px) and (max-width: 1270px) {
        .menu-item {
            width: min-content;
        }
    }
}

.page-header--lang-en {
    @media screen and (min-width: 1025px) and (max-width: 1080px) {
        .menu-item {
            width: min-content;
        }
    }
}

@media screen and (min-width: 1025px) and (max-width: 1280px) {
    .page-header__actions .actions__profile-login {
        background-color: transparent;
        padding: 6.5px !important;

        &:before {
            background-color: white !important;
        }

        p {
            display: none;
        }

        &:hover {
            background-color: var(--nav-primary-hover) !important;
        }
    }
}