/* Site header (components/headers/headerStyleTwo) on one line at every width and in every language.
   The theme let the menu wrap under the logo and the icon box under the menu between ~1200 and ~1900 px; with the
   long menus (French, Russian, German...) the fixed header grew to 300-400 px and covered the pages.
   - from 992 px: one row, 80 px tall, logo 56 px, everything vertically centred;
   - from 1200 px (the theme's desktop menu): the sizes are CSS variables that assets/js/header-one-line.js lowers
     step by step (font, gaps, logo) until logo, menu, language and icons fit; when even the smallest step does not
     fit, the header gets the class nav-compact: logo, language, search and the hamburger, the menu in the side panel;
   - below 1200 px the theme's own hamburger layout stays, on one 80 px row. */
@media (min-width: 992px) {
    .main-header-two {
        --nav-font: 16px;
        --nav-pad: 7px;
        --nav-item-gap: 22px;
        --nav-gap: 28px;
        --nav-icon-gap: 16px;
        --nav-icon-pad: 16px;
        --nav-logo: 56px;
        padding: 0 !important;
    }
    .main-header-two .main-menu-two__wrapper-inner {
        display: flex !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
        gap: 0 var(--nav-gap) !important;
        padding: 0 clamp(16px, 2.2vw, 60px) !important;
        min-height: 80px;
    }
    .main-header-two .main-menu-two__left { flex: 0 0 auto; display: flex; align-items: center; }
    .main-header-two .main-menu-two__logo { padding: 12px 0 !important; display: flex; align-items: center; }
    .main-header-two .main-menu-two__logo img,
    .main-header-two .main-menu-two__logo img.main-logo {
        max-height: var(--nav-logo) !important;
        height: auto;
        width: auto;
        display: block;
        transition: none !important;
    }
    .main-header-two .main-menu-two__right {
        flex: 1 1 auto;
        min-width: 0;
        display: flex !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
        justify-content: flex-end;
        gap: var(--nav-gap) !important;
        transition: none !important;
    }
    .main-header-two .main-menu-two__main-menu-box { flex: 0 1 auto; min-width: 0; display: flex; align-items: center; }
    .main-header-two .main-menu__list > li {
        padding-top: 12px !important;
        padding-bottom: 12px !important;
        white-space: nowrap;
        transition: none !important;
    }
    .main-header-two .main-menu__list > li + li { margin-left: var(--nav-item-gap) !important; }
    .main-header-two .main-menu__list > li > a {
        font-size: var(--nav-font) !important;
        padding-left: var(--nav-pad) !important;
        padding-right: var(--nav-pad) !important;
        white-space: nowrap;
        /* the theme animates "all" on the links: a font size still animating is measured wrong by the fitter,
           which then stops at a size that does not fit. Only the colour keeps its animation. */
        transition: color 500ms ease !important;
    }
    .main-header-two .main-menu-two__search-and-nav-sidebar-icon {
        display: flex !important;
        flex: 0 0 auto;
        align-items: center;
        flex-wrap: nowrap !important;
        gap: var(--nav-icon-gap) !important;
        padding: 5px var(--nav-icon-pad) !important;
        transition: none !important;
    }
    .main-header-two .main-menu-two__search-and-nav-sidebar-icon .ar-language-trigger { white-space: nowrap; }
    .main-header-two .main-menu-two__search-and-nav-sidebar-icon .main-menu-two__search[href*="portal"] { margin-right: 0 !important; }
    /* one hamburger only: the theme's mobile-nav toggler (side panel with the menu and the languages) */
    .main-header-two .mobile-nav__toggler {
        font-size: 24px;
        line-height: 1;
        color: #fff;
        margin: 0 4px;
        min-width: 44px;
        min-height: 44px;
        display: none;
        align-items: center;
        justify-content: center;
    }
}
@media (min-width: 992px) and (max-width: 1199px) {
    /* the theme's hamburger layout: logo, language, hamburger */
    .main-header-two .main-menu__list { display: none !important; }
    .main-header-two .mobile-nav__toggler { display: inline-flex !important; }
    /* the language switcher turns this block into row-reverse below 1200 px: its start is the right edge */
    .main-header-two .main-menu-two__right { justify-content: flex-start !important; }
    .main-header-two .main-menu-two__nav-sidebar-icon,
    .main-header-two .main-menu-two__search-and-nav-sidebar-icon .main-menu-two__search[href*="portal"] { display: none !important; }
}
@media (min-width: 1200px) {
    .main-header-two .main-menu__list {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center;
    }
    /* nothing fits even at the smallest size: logo, language, search and the hamburger; the menu is in the panel */
    .main-header-two.nav-compact .main-menu__list { display: none !important; }
    .main-header-two.nav-compact .mobile-nav__toggler { display: inline-flex !important; background: transparent !important; border: 0 !important; }
    .main-header-two.nav-compact .main-menu-two__nav-sidebar-icon,
    .main-header-two.nav-compact .main-menu-two__search-and-nav-sidebar-icon .main-menu-two__search[href*="portal"] { display: none !important; }
}
/* The theme keeps a second copy of the header (.stricky-header, the old layout) that slides in on scroll; the real
   header is already fixed, so the copy only showed up as a second, old-style bar under the new one. */
.stricky-header.main-menu-two,
.stricky-header.stricked-menu { display: none !important; }
/* below the desktop menu the hamburger is three white lines only: no white box, no border (the theme drew one
   between 769 and 1199 px); the same look the phone layout already had */
@media (max-width: 1199px) {
    header.main-header-two .mobile-nav__toggler,
    header.main-header-two .mobile-nav__toggler i {
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
        color: #fff !important;
    }
    header.main-header-two .mobile-nav__toggler {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        min-width: 44px;
        min-height: 44px;
        padding: 0 !important;
        margin: 0 !important;
        font-size: 26px;
        line-height: 1;
    }
}
/* keyboard: a visible focus ring on the menu and the header controls */
.main-header-two a:focus-visible,
.main-header-two button:focus-visible,
.main-header-two [tabindex="0"]:focus-visible {
    outline: 2px solid #C6A76B !important;
    outline-offset: 3px;
}