/* Shared states for the standard header and the homepage hero header.
 * Layout and dropdown positioning remain in their respective stylesheets. */
.site-header :is(a, button),
.mobile-menu :is(a, button) {
    transition: background-color .3s ease, border-color .3s ease, color .3s ease, opacity .3s ease;
    text-underline-offset: .2em;
}

.site-header .lang-dropdown__trigger:not(:disabled) {
    cursor: pointer;
}

.site-header .nav_box a.active,
.site-header .nav_box .header-mega-menu__link.is-active,
.site-header .lang-dropdown__item.is-active {
    text-decoration: underline;
}

.site-header :is(a, button):focus-visible,
.mobile-menu :is(a, button):focus-visible,
.mobile-menu .mobile-nav button:focus-visible {
    outline: 2px solid var(--button-primary-default, #ceeec7);
    outline-offset: 3px;
}

.site-header .header-mega-menu a:focus-visible {
    outline-color: var(--button-secondary-default, #363636);
}

.site-header .burger .icon-close,
.site-header .burger.open .icon-open {
    display: none;
}

.site-header .burger.open .icon-close {
    display: block;
}

@media (hover: hover) and (pointer: fine) {
    .site-header .nav_box a:hover,
    .site-header .lang-dropdown__item:hover,
    .mobile-menu .mobile-nav a:hover {
        text-decoration: underline;
    }

    .site-header .header-contact-btn:not(:disabled):hover {
        background-color: var(--button-secondary-hover, #000);
    }

    .site-header .lang-dropdown__trigger:not(:disabled):hover,
    .site-header .burger:hover,
    .mobile-menu :is(.mobile-menu-accordion__toggle, .mobile-menu-nav-header__back):hover {
        background-color: var(--white-010, rgb(255 255 255 / .1));
        border-color: var(--white-025, rgb(255 255 255 / .25));
    }

    .site-header :is(.site-logo, .mag-hero-header__logo):hover {
        opacity: .75;
    }

    .site-header .nav_box a:is(.active, .is-active):hover,
    .site-header .lang-dropdown__item.is-active:hover {
        opacity: .75;
    }
}

@media (prefers-reduced-motion: reduce) {
    .site-header :is(a, button),
    .mobile-menu :is(a, button) {
        /* Respect this preference above the individual component transitions. */
        transition: none !important;
    }
}