/*
 * Approved compact header reference.
 * Below the desktop hand-off, the header keeps three centred zones: outlined
 * menu, true-centre brand, and a single active-language picker.
 */
@media (max-width: 1399.98px) {
    html body:not(#artbin-mobile-header-v1-lock) :is(
        #header-hz-elementor,
        .elementor-location-header,
        header.elementor-location-header
    ) {
        background: linear-gradient(108deg, #06182c 0%, #112b45 52%, #061a30 100%) !important;
        background-color: #0a2038 !important;
        box-shadow: 0 1px 0 rgba(245, 181, 27, 0.20) !important;
    }

    /* The real navigation toggle stays circular, but no longer uses the
       former white fill: it matches the reference's navy interior. */
    html body:not(#artbin-mobile-header-v1-lock) :is(
        #header-hz-elementor,
        .elementor-location-header,
        header.elementor-location-header
    ) .elementor-widget-nav-menu .elementor-menu-toggle {
        border: 1px solid #f7b718 !important;
        border-radius: 50% !important;
        background: rgba(6, 27, 47, 0.96) !important;
        color: #f7b718 !important;
        box-shadow: none !important;
    }

    html body:not(#artbin-mobile-header-v1-lock) :is(
        #header-hz-elementor,
        .elementor-location-header,
        header.elementor-location-header
    ) .elementor-widget-nav-menu .elementor-menu-toggle :is(svg, svg path, i) {
        color: #f7b718 !important;
        fill: #f7b718 !important;
    }

    html body:not(#artbin-mobile-header-v1-lock) :is(
        #header-hz-elementor,
        .elementor-location-header,
        header.elementor-location-header
    ) .elementor-widget-nav-menu .elementor-menu-toggle.elementor-active::before,
    html body:not(#artbin-mobile-header-v1-lock) :is(
        #header-hz-elementor,
        .elementor-location-header,
        header.elementor-location-header
    ) .elementor-widget-nav-menu .elementor-menu-toggle.elementor-active::after {
        background: #f7b718 !important;
    }

    /* Older desktop controls can still carry inline/Elementor visibility
       declarations. There is exactly one language trigger below 1400px. */
    html body:not(#artbin-mobile-header-v1-lock) :is(
        #header-hz-elementor,
        .elementor-location-header,
        header.elementor-location-header
    ) :is(.artbin-desktop-language-toggle, .artbin-desktop-language-menu) {
        display: none !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

    /* Keep the brand mathematically centred while the side controls scale
       independently on narrow phones. */
    html body:not(#artbin-mobile-header-v1-lock) :is(
        #header-hz-elementor,
        .elementor-location-header,
        header.elementor-location-header
    ) :is(.artbin-single-logo-shell, .elementor-element-f355176, .elementor-element-fcec792) {
        width: clamp(86px, 25vw, 126px) !important;
        max-width: 126px !important;
    }

    html body:not(#artbin-mobile-header-v1-lock) :is(
        #header-hz-elementor,
        .elementor-location-header,
        header.elementor-location-header
    ) :is(.artbin-single-logo-shell, .elementor-element-f355176, .elementor-element-fcec792) img {
        display: block !important;
        width: 100% !important;
        height: auto !important;
        max-width: 100% !important;
    }

    /* One calm language control: active code, divider, then chevron. */
    html body:not(#artbin-mobile-header-v1-lock) :is(
        #header-hz-elementor,
        .elementor-location-header,
        header.elementor-location-header
    ) .artbin-mobile-language-toggle {
        border-color: #f7b718 !important;
        background: rgba(6, 27, 47, 0.96) !important;
        color: #f7b718 !important;
        box-shadow: none !important;
    }

    html body:not(#artbin-mobile-header-v1-lock) :is(
        #header-hz-elementor,
        .elementor-location-header,
        header.elementor-location-header
    ) .artbin-mobile-language-toggle__code {
        flex: 1 1 auto !important;
        width: auto !important;
        height: auto !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 0 0 clamp(14px, 2vw, 22px) !important;
        border-radius: 0 !important;
        background: transparent !important;
        color: #f7b718 !important;
        font-size: 16px !important;
        font-weight: 800 !important;
    }

    html body:not(#artbin-mobile-header-v1-lock) :is(
        #header-hz-elementor,
        .elementor-location-header,
        header.elementor-location-header
    ) .artbin-mobile-language-toggle svg {
        box-sizing: content-box !important;
        flex: 0 0 16px !important;
        width: 16px !important;
        height: 16px !important;
        margin: 0 clamp(10px, 1.4vw, 14px) 0 clamp(8px, 1.2vw, 12px) !important;
        padding-left: clamp(10px, 1.4vw, 14px) !important;
        border-left: 1px solid rgba(247, 183, 24, 0.76) !important;
        color: #f7b718 !important;
    }

    html body:not(#artbin-mobile-header-v1-lock) :is(
        #header-hz-elementor,
        .elementor-location-header,
        header.elementor-location-header
    ) .artbin-mobile-language-menu {
        border-color: rgba(247, 183, 24, 0.72) !important;
        border-radius: 18px !important;
        background: #061b2f !important;
        box-shadow: 0 14px 32px rgba(1, 13, 25, 0.34) !important;
    }

    html body:not(#artbin-mobile-header-v1-lock) :is(
        #header-hz-elementor,
        .elementor-location-header,
        header.elementor-location-header
    ) .artbin-mobile-language-option {
        color: #ffffff !important;
    }

    html body:not(#artbin-mobile-header-v1-lock) :is(
        #header-hz-elementor,
        .elementor-location-header,
        header.elementor-location-header
    ) .artbin-mobile-language-option:is(:hover, :focus-visible) {
        background: rgba(247, 183, 24, 0.16) !important;
        color: #f7b718 !important;
    }

    /* Parent rows announce a nested level with one readable gold chevron.
       The same Elementor icon is used for About, Properties and Blog. */
    html body:not(#artbin-mobile-header-v1-lock) :is(
        #header-hz-elementor,
        .elementor-location-header,
        header.elementor-location-header
    ) .elementor-widget-nav-menu > .elementor-nav-menu--dropdown.elementor-nav-menu__container
    > .elementor-nav-menu > li.menu-item-has-children > a > .sub-arrow {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex: 0 0 20px !important;
        width: 20px !important;
        height: 20px !important;
        margin-left: auto !important;
        color: #f7b718 !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: rotate(0deg) !important;
        transition: transform 160ms ease !important;
    }

    html body:not(#artbin-mobile-header-v1-lock) :is(
        #header-hz-elementor,
        .elementor-location-header,
        header.elementor-location-header
    ) .elementor-widget-nav-menu > .elementor-nav-menu--dropdown.elementor-nav-menu__container
    > .elementor-nav-menu > li.menu-item-has-children > a > .sub-arrow :is(i, svg, path) {
        color: currentColor !important;
        fill: currentColor !important;
        opacity: 1 !important;
    }

    html body:not(#artbin-mobile-header-v1-lock) :is(
        #header-hz-elementor,
        .elementor-location-header,
        header.elementor-location-header
    ) .elementor-widget-nav-menu > .elementor-nav-menu--dropdown.elementor-nav-menu__container
    > .elementor-nav-menu > li.menu-item-has-children.artbin-mobile-submenu-open > a > .sub-arrow {
        transform: rotate(180deg) !important;
    }

    /* Every second-level list is part of the same menu surface, not a card.
       A modest left inset and one smaller type step communicate nesting. */
    html body:not(#artbin-mobile-header-v1-lock) :is(
        #header-hz-elementor,
        .elementor-location-header,
        header.elementor-location-header
    ) .elementor-widget-nav-menu .elementor-nav-menu--dropdown.elementor-nav-menu__container
    li.artbin-mobile-submenu-open :is(.artbin-about-mega, .artbin-blog-mega, .artbin-properties-mega) {
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    html body:not(#artbin-mobile-header-v1-lock) :is(
        #header-hz-elementor,
        .elementor-location-header,
        header.elementor-location-header
    ) .elementor-widget-nav-menu .elementor-nav-menu--dropdown.elementor-nav-menu__container
    li.artbin-mobile-submenu-open :is(.artbin-about-mega__item, .artbin-blog-mega__item) {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) 20px !important;
        align-items: center !important;
        min-height: 44px !important;
        margin: 0 !important;
        padding: 10px 38px 10px 58px !important;
        border: 0 !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.13) !important;
        border-radius: 0 !important;
        background: transparent !important;
        color: rgba(248, 250, 252, 0.90) !important;
        -webkit-text-fill-color: rgba(248, 250, 252, 0.90) !important;
        box-shadow: none !important;
    }

    html body:not(#artbin-mobile-header-v1-lock) :is(
        #header-hz-elementor,
        .elementor-location-header,
        header.elementor-location-header
    ) .elementor-widget-nav-menu .elementor-nav-menu--dropdown.elementor-nav-menu__container
    li.artbin-mobile-submenu-open :is(.artbin-about-mega__icon, .artbin-blog-mega__icon) {
        display: none !important;
    }

    html body:not(#artbin-mobile-header-v1-lock) :is(
        #header-hz-elementor,
        .elementor-location-header,
        header.elementor-location-header
    ) .elementor-widget-nav-menu .elementor-nav-menu--dropdown.elementor-nav-menu__container
    li.artbin-mobile-submenu-open :is(.artbin-about-mega__label, .artbin-blog-mega__label) {
        color: rgba(248, 250, 252, 0.90) !important;
        -webkit-text-fill-color: rgba(248, 250, 252, 0.90) !important;
        font-family: "Unbounded", "Wix Madefor Display", Arial, sans-serif !important;
        font-size: 14px !important;
        font-weight: 700 !important;
        line-height: 1.18 !important;
        text-transform: uppercase !important;
    }

    html body:not(#artbin-mobile-header-v1-lock) :is(
        #header-hz-elementor,
        .elementor-location-header,
        header.elementor-location-header
    ) .elementor-widget-nav-menu .elementor-nav-menu--dropdown.elementor-nav-menu__container
    li.artbin-mobile-submenu-open :is(.artbin-about-mega__arrow, .artbin-blog-mega__arrow) {
        justify-self: end !important;
        color: #f7b718 !important;
        -webkit-text-fill-color: #f7b718 !important;
    }
}