/*******************************************************

    polo.gr header + mobile menu

    Rebuild of the Elementor Pro header 121059 and the popup 112762, with
    the values of their generated CSS (uploads/elementor/css/post-121059.css,
    post-112762.css) and of Elementor's nav menu / container CSS. Elementor's
    breakpoints: laptop ≤ 1919px, tablet ≤ 1024px, mobile ≤ 767px. Note that
    in post-121059.css the laptop rules come after the tablet ones, so for the
    header the laptop values (vw based) also win on tablets unless the tablet
    rule sets a property the laptop one does not.

 *******************************************************/



    :root {
        --polo-black:         #101212;
        --polo-white:         #ffffff;
        --polo-gold:          #e0c89b;
        --polo-red:           #ed1b24;
        --polo-line:          #ececec;
        --polo-grey:          #6b6f73;
        --polo-dropdown-text: #33373d;
        --polo-dropdown-over: #3f444b;
        --polo-font-base:     Helvetica, Arial, sans-serif;
        --polo-font-gotham:   "GothamGR", sans-serif;
        --polo-font-zona:     "ZonaPro", sans-serif;
        --polo-font-roboto:   "Roboto", sans-serif;
        --polo-ease:          cubic-bezier( 0.58, 0.3, 0.005, 1 );
    }

    .polo-header,
    .polo-header *,
    .polo-mobile-menu,
    .polo-mobile-menu * {
        box-sizing: border-box;
    }

    .polo-header svg,
    .polo-mobile-menu svg {
        display: block;
        width: 1em;
        height: 1em;
        fill: currentColor;
    }



    /* Sticky bar: logo | menu | search + menu button. */

    .polo-header {
        position: sticky;
        top: var( --wp-admin--admin-bar--height, 0px );
        z-index: 500;
        margin: 0;
        padding: 0;
    }

    .polo-header__bar {
        --polo-header-gap: 20px;
        display: flex;
        flex-flow: row nowrap;
        justify-content: space-between;
        align-items: center;
        gap: var( --polo-header-gap );
        width: 100%;
        padding: 20px;
        border-bottom: 1px solid var( --polo-white );
        background-color: var( --polo-white );
        font-family: var( --polo-font-base );
        font-size: 16px;
        line-height: 1.618;
    }

    .polo-header a {
        text-decoration: none;
    }

    .polo-header button {
        margin: 0;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: none;
        box-shadow: none;
        text-shadow: none;
        color: var( --polo-black );
        font-family: var( --polo-font-base );
        font-size: 16px;
        font-weight: 400;
        letter-spacing: normal;
        text-transform: none;
        cursor: pointer;
        -webkit-appearance: none;
        appearance: none;
    }

    .polo-header button:hover,
    .polo-header button:focus {
        background: none;
        color: var( --polo-black );
    }



    /* Logo. */

    .polo-header__logo {
        display: block;
        flex: 0 1 auto;
        align-self: center;
        min-width: 0;
        padding: 0 0 0 5%;
        line-height: 0;
    }

    .polo-header__logo img {
        display: block;
        width: auto;
        max-width: 100%;
        height: 145px;
        margin: 0;
        object-fit: contain;
        object-position: center center;
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }



    /* Desktop menu. */

    .polo-nav {
        --polo-nav-item-margin: 15px;
        display: flex;
        flex: 0 1 auto;
        align-self: center;
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    .polo-nav ul {
        margin: 0;
        padding: 0;
        list-style: none;
        line-height: normal;
    }

    .polo-nav li {
        position: relative;
        display: block;
        margin: 0;
        padding: 0;
        line-height: normal;
        list-style: none;
    }

    .polo-nav .polo-nav__menu {
        position: static;
        z-index: 2;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        margin: 0 auto;
    }

    .polo-nav__menu > li {
        display: flex;
    }

    .polo-nav__menu > li > a {
        position: relative;
        display: flex;
        flex-grow: 1;
        align-items: center;
        padding: 13px 0;
        color: var( --polo-black );
        font-family: var( --polo-font-gotham );
        font-size: 26px;
        font-weight: 600;
        line-height: 20px;
        text-transform: uppercase;
        white-space: nowrap;
        transition: 0.4s;
    }

    .polo-nav__menu > li:not( :first-child ) > a {
        margin-inline-start: var( --polo-nav-item-margin );
    }

    .polo-nav__menu > li:not( :last-child ) > a {
        margin-inline-end: var( --polo-nav-item-margin );
    }

    .polo-nav__menu > li > a:hover,
    .polo-nav__menu > li > a:focus {
        color: var( --polo-black );
    }

    /* Underline pointer, "slide" animation. */

    .polo-nav__menu > li > a::after {
        content: "";
        position: absolute;
        bottom: 0;
        inset-inline-start: 0;
        z-index: 2;
        display: block;
        width: 100%;
        height: 1px;
        background-color: var( --polo-black );
        transition: 0.3s;
        transition-timing-function: var( --polo-ease );
    }

    .polo-nav__menu > li:not( :hover ):not( :focus-within ):not( .current-menu-item ) > a:not( :hover ):not( :focus )::after {
        inset-inline-start: 100%;
        width: 10px;
        opacity: 0;
    }

    /* Mega menu: a full width panel under the header (positioned against the sticky header). */

    .polo-nav .polo-nav__menu > li {
        position: static;
    }

    .polo-mega {
        position: absolute;
        top: 100%;
        right: 0;
        left: 0;
        z-index: 3;
        border-top: 1px solid var( --polo-line );
        background-color: var( --polo-white );
        box-shadow: 0 24px 32px -24px rgba( 16, 18, 18, 0.35 );
        opacity: 0;
        visibility: hidden;
        transform: translateY( -6px );
        /* Hiding waits a moment, so the pointer can cross from the menu item to the panel. */
        transition: opacity 0.2s 0.15s, transform 0.2s 0.15s, visibility 0s 0.35s;
    }

    /* Dims the page under the panel. */
    .polo-mega::after {
        content: "";
        position: absolute;
        top: 100%;
        right: 0;
        left: 0;
        height: 100vh;
        background-color: rgba( 16, 18, 18, 0.25 );
        pointer-events: none;
    }

    .polo-nav__menu > li:hover > .polo-mega,
    .polo-nav__menu > li:focus-within > .polo-mega,
    .polo-nav__menu > li.is-open > .polo-mega {
        opacity: 1;
        visibility: visible;
        transform: none;
        transition: opacity 0.2s, transform 0.2s, visibility 0s;
    }

    .polo-mega__inner {
        display: grid;
        grid-template-columns: minmax( 160px, 240px ) 1fr;
        gap: 48px;
        max-width: 1600px;
        margin: 0 auto;
        padding: 40px 5% 48px;
    }

    .polo-mega.has-media .polo-mega__inner {
        grid-template-columns: minmax( 160px, 240px ) 1fr minmax( 240px, 28% );
    }

    .polo-mega__title {
        margin: 0 0 20px;
        color: var( --polo-black );
        font-family: var( --polo-font-gotham );
        font-size: 28px;
        font-weight: 600;
        line-height: 1.1;
        text-transform: uppercase;
    }

    .polo-nav .polo-mega__all {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        padding-bottom: 4px;
        border-bottom: 2px solid var( --polo-red );
        color: var( --polo-black );
        font-family: var( --polo-font-roboto );
        font-size: 15px;
        font-weight: 600;
        line-height: 20px;
        transition: color 0.2s, gap 0.2s;
    }

    .polo-nav .polo-mega__all:hover,
    .polo-nav .polo-mega__all:focus {
        gap: 14px;
        color: var( --polo-red );
    }

    .polo-nav .polo-mega__list {
        display: block;
        column-count: 3;
        column-gap: 40px;
        align-self: start;
    }

    .polo-nav .polo-mega__list > li {
        break-inside: avoid;
    }

    .polo-nav .polo-mega a:not( .polo-mega__all ):not( .polo-mega__media ) {
        display: block;
        padding: 9px 0;
        color: var( --polo-black );
        font-family: var( --polo-font-roboto );
        font-size: 16px;
        font-weight: 500;
        line-height: 22px;
        white-space: normal;
        transition: color 0.2s, transform 0.2s;
    }

    .polo-nav .polo-mega a:not( .polo-mega__all ):not( .polo-mega__media ):hover,
    .polo-nav .polo-mega a:not( .polo-mega__all ):not( .polo-mega__media ):focus,
    .polo-nav .polo-mega .current-menu-item > a {
        color: var( --polo-red );
        transform: translateX( 4px );
    }

    /* Third level: listed under its parent. */
    .polo-nav .polo-mega .sub-menu .sub-menu {
        display: block;
        margin: 0 0 8px;
        padding-inline-start: 12px;
        border-inline-start: 2px solid var( --polo-line );
    }

    .polo-nav .polo-mega .sub-menu .sub-menu a:not( .polo-mega__all ) {
        padding: 5px 0;
        color: var( --polo-grey );
        font-size: 14px;
        line-height: 18px;
    }

    .polo-mega__media {
        display: block;
        overflow: hidden;
        align-self: start;
    }

    .polo-mega__media img {
        display: block;
        width: 100%;
        height: auto;
        aspect-ratio: 4 / 3;
        object-fit: cover;
        transition: transform 0.6s var( --polo-ease );
    }

    .polo-mega__media:hover img {
        transform: scale( 1.03 );
    }

    @media ( max-width: 1440px ) {

        .polo-nav .polo-mega__list {
            column-count: 2;
        }

    }

    @media ( prefers-reduced-motion: reduce ) {

        .polo-mega,
        .polo-mega__media img,
        .polo-nav .polo-mega a {
            transition: none;
        }

    }



    /* Search and menu buttons. */

    .polo-header__tools {
        display: flex;
        flex: 0 1 auto;
        flex-flow: row nowrap;
        justify-content: center;
        align-items: center;
        gap: 20px;
        width: 20%;
        min-width: 0;
        padding: 0;
    }

    .polo-header .polo-header__search {
        display: block;
        line-height: 1;
        text-align: center;
    }

    .polo-header__icon {
        display: inline-block;
        font-size: 28px;
        line-height: 1;
    }

    .polo-header .polo-header__toggle {
        display: none;
        margin: 20px;
        font-size: 25px;
        line-height: 0;
    }



    /* Laptop. */

    @media ( max-width: 1919px ) {

        .polo-header__bar {
            padding: 1.04vw;
        }

        .polo-header__logo {
            text-align: center;
        }

        .polo-header__logo img {
            max-width: 120px;
            height: auto;
            object-fit: cover;
        }

        .polo-nav {
            --polo-nav-item-margin: calc( 1.56vw / 2 );
        }

        .polo-nav__menu > li > a {
            font-size: 1.56vw;
        }

        .polo-header__icon {
            font-size: 2.34vw;
        }

    }



    /* Tablet. */

    @media ( max-width: 1024px ) {

        .polo-header__logo {
            padding: 0;
        }

        .polo-header__logo img {
            width: 100px;
        }

        .polo-nav {
            display: none;
        }

        .polo-header .polo-header__toggle {
            display: block;
        }

    }



    /* Mobile. */

    @media ( max-width: 767px ) {

        .polo-header__bar {
            flex-wrap: wrap;
            padding: 20px 10px;
        }

        .polo-header__logo img {
            width: 120px;
            max-width: 100%;
            height: 60px;
        }

        .polo-header__tools {
            flex-wrap: wrap;
            justify-content: flex-end;
            width: 41%;
        }

        .polo-header__icon {
            font-size: 30px;
        }

    }



/*******************************************************

    Mobile menu (off-canvas panel from the right)

 *******************************************************/



    .polo-mobile-menu {
        position: fixed;
        inset: 0;
        z-index: 9999;
        display: flex;
        justify-content: flex-end;
        background-color: rgba( 16, 18, 18, 0.6 );
        font-family: var( --polo-font-roboto );
        font-size: 16px;
        line-height: 24px;
    }

    .polo-mobile-menu[hidden] {
        display: none;
    }

    .polo-mobile-menu__panel {
        position: relative;
        display: flex;
        flex-direction: column;
        width: 440px;
        max-width: 100%;
        height: 100%;
        background-color: var( --polo-white );
        box-shadow: -8px 0 24px rgba( 0, 0, 0, 0.15 );
        color: var( --polo-black );
    }

    @media ( max-width: 767px ) {

        .polo-mobile-menu__panel {
            width: 100%;
        }

    }

    .polo-mobile-menu.is-opening .polo-mobile-menu__panel {
        animation: polo-slide-in-right 0.35s var( --polo-ease ) both;
    }

    .polo-mobile-menu.is-closing .polo-mobile-menu__panel {
        animation: polo-slide-in-right 0.35s var( --polo-ease ) both reverse;
    }

    .polo-mobile-menu.is-opening {
        animation: polo-fade-in 0.35s both;
    }

    .polo-mobile-menu.is-closing {
        animation: polo-fade-in 0.35s both reverse;
    }

    @keyframes polo-slide-in-right {
        from {
            transform: translate3d( 100%, 0, 0 );
        }
        to {
            transform: none;
        }
    }

    @keyframes polo-fade-in {
        from {
            background-color: rgba( 16, 18, 18, 0 );
        }
    }

    @media ( prefers-reduced-motion: reduce ) {

        .polo-mobile-menu.is-opening,
        .polo-mobile-menu.is-closing,
        .polo-mobile-menu.is-opening .polo-mobile-menu__panel,
        .polo-mobile-menu.is-closing .polo-mobile-menu__panel {
            animation: none;
        }

        .polo-mobile-menu .sub-menu {
            transition: none !important;
        }

    }

    .polo-mobile-menu a {
        text-decoration: none;
    }

    .polo-mobile-menu svg {
        display: block;
        width: 1em;
        height: 1em;
        fill: currentColor;
    }

    /* Logo + close. */

    .polo-mobile-menu__top {
        display: flex;
        flex: 0 0 auto;
        justify-content: space-between;
        align-items: center;
        padding: 14px 20px;
        border-bottom: 1px solid var( --polo-line );
    }

    .polo-mobile-menu__logo {
        display: block;
        line-height: 0;
    }

    .polo-mobile-menu__logo img {
        display: block;
        width: auto;
        height: 44px;
        margin: 0;
    }

    .polo-mobile-menu .polo-mobile-menu__close {
        display: flex;
        margin: -10px -10px -10px 0;
        padding: 10px;
        border: 0;
        border-radius: 0;
        background: none;
        box-shadow: none;
        color: var( --polo-black );
        font-size: 20px;
        line-height: 0;
        cursor: pointer;
        -webkit-appearance: none;
        appearance: none;
    }

    .polo-mobile-menu .polo-mobile-menu__close:hover,
    .polo-mobile-menu .polo-mobile-menu__close:focus {
        background: none;
        color: var( --polo-black );
    }

    .polo-mobile-menu .polo-mobile-menu__close:hover,
    .polo-mobile-menu .polo-mobile-menu__close:focus-visible {
        color: var( --polo-red );
    }

    /* Search. */

    .polo-mobile-menu__search {
        position: relative;
        flex: 0 0 auto;
        margin: 16px 20px;
    }

    .polo-mobile-menu__search svg {
        position: absolute;
        top: 50%;
        left: 14px;
        width: 22px;
        height: 22px;
        color: var( --polo-grey );
        transform: translateY( -50% );
        pointer-events: none;
    }

    .polo-mobile-menu .polo-mobile-menu__search input[type="search"] {
        box-sizing: border-box;
        width: 100%;
        height: 46px;
        margin: 0;
        padding: 0 14px 0 46px;
        border: 1px solid #d6d6d6;
        border-radius: 0;
        background: #f6f6f6;
        box-shadow: none;
        color: var( --polo-black );
        font-family: var( --polo-font-roboto );
        font-size: 16px;
        -webkit-appearance: none;
        appearance: none;
    }

    .polo-mobile-menu .polo-mobile-menu__search input[type="search"]:focus {
        border-color: var( --polo-black );
        background: var( --polo-white );
        outline: none;
    }

    /* Menu: drill-down panels. Every submenu is a panel over the menu. */

    .polo-mobile-menu__nav {
        position: relative;
        flex: 1 1 auto;
        min-height: 0;
        overflow: hidden;
        border-top: 1px solid var( --polo-line );
    }

    .polo-mobile-menu ul {
        margin: 0;
        padding: 0;
        list-style: none;
        line-height: normal;
    }

    .polo-mobile-menu li {
        position: static;
        display: block;
        margin: 0;
        padding: 0;
        line-height: normal;
        list-style: none;
    }

    .polo-mobile-menu__menu {
        height: 100%;
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    .polo-mobile-menu__nav li > a {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 12px;
        min-height: 54px;
        padding: 14px 20px;
        border-bottom: 1px solid var( --polo-line );
        color: var( --polo-black );
        font-family: var( --polo-font-roboto );
        font-size: 16px;
        font-weight: 500;
        line-height: 22px;
        transition: color 0.2s, background-color 0.2s;
    }

    .polo-mobile-menu__menu > li > a {
        font-family: var( --polo-font-gotham );
        font-size: 19px;
        font-weight: 600;
        text-transform: uppercase;
    }

    .polo-mobile-menu__nav li > a:hover,
    .polo-mobile-menu__nav li > a:focus,
    .polo-mobile-menu__nav li.current-menu-item > a {
        color: var( --polo-red );
    }

    .polo-mobile-menu__nav li > a:active {
        background-color: #f6f6f6;
    }

    .polo-sub-arrow {
        display: flex;
        flex: 0 0 auto;
        color: var( --polo-grey );
        font-size: 14px;
        line-height: 1;
    }

    .polo-mobile-menu .sub-menu {
        position: absolute;
        inset: 0;
        z-index: 1;
        overflow-y: auto;
        overscroll-behavior: contain;
        background-color: var( --polo-white );
        visibility: hidden;
        transform: translate3d( 100%, 0, 0 );
        transition: transform 0.3s var( --polo-ease ), visibility 0s 0.3s;
    }

    .polo-mobile-menu li.is-open > .sub-menu {
        visibility: visible;
        transform: none;
        transition: transform 0.3s var( --polo-ease ), visibility 0s;
    }

    /* The panel under an open panel is not reachable (focus, screen readers). */
    .polo-mobile-menu ul:has( > li.is-open ) > li:not( .is-open ),
    .polo-mobile-menu li.is-open > a {
        visibility: hidden;
    }

    .polo-mobile-menu .polo-drill__back {
        display: flex;
        align-items: center;
        gap: 12px;
        width: 100%;
        min-height: 56px;
        margin: 0;
        padding: 14px 20px;
        border: 0;
        border-bottom: 1px solid var( --polo-line );
        border-radius: 0;
        background: #f6f6f6;
        box-shadow: none;
        color: var( --polo-black );
        font-family: var( --polo-font-gotham );
        font-size: 19px;
        font-weight: 600;
        line-height: 22px;
        text-align: left;
        text-transform: uppercase;
        cursor: pointer;
        -webkit-appearance: none;
        appearance: none;
    }

    .polo-mobile-menu .polo-drill__back svg {
        flex: 0 0 auto;
        font-size: 14px;
    }

    .polo-mobile-menu .polo-drill__back:hover,
    .polo-mobile-menu .polo-drill__back:focus {
        background: #efefef;
        color: var( --polo-black );
    }

    .polo-mobile-menu__nav .polo-drill__all > a {
        justify-content: flex-start;
        color: var( --polo-red );
        font-weight: 600;
    }

    .polo-mobile-menu__nav .polo-drill__all > a svg {
        font-size: 14px;
        transition: transform 0.2s;
    }

    .polo-mobile-menu__nav .polo-drill__all > a:hover svg,
    .polo-mobile-menu__nav .polo-drill__all > a:focus svg {
        transform: translateX( 4px );
    }

    /* Languages. */

    .polo-mobile-menu__languages {
        display: flex;
        flex: 0 0 auto;
        gap: 8px;
        padding: 14px 20px 18px !important;
        border-top: 1px solid var( --polo-line );
    }

    .polo-mobile-menu__languages li {
        display: block;
    }

    /* The legacy flag icons (a[lang] in css/legacy) are replaced by the language codes here. */
    .polo-mobile-menu__languages a[lang] {
        width: auto;
        height: auto;
        border-radius: 0;
        background-image: none;
    }

    .polo-mobile-menu__languages a {
        display: block;
        min-width: 44px;
        padding: 8px 10px;
        border: 1px solid #d6d6d6;
        color: var( --polo-black );
        font-size: 14px;
        font-weight: 600;
        line-height: 18px;
        text-align: center;
        text-transform: uppercase;
    }

    .polo-mobile-menu__languages .current-lang a {
        border-color: var( --polo-black );
        background-color: var( --polo-black );
        color: var( --polo-white );
    }