/* ==========================================================================
   Navbar Responsive Fixes
   Breakpoints: 1380 -> 1200 -> 1024 (hamburger)
   Language selectors: html[lang="en-US"], html[lang="ja"], html[lang="he-IL"]
   ========================================================================== */

/* ---------- Language switcher: prevent 日本語 from stacking ---------- */
.site-header .language-switcher {
    flex-shrink: 0;
}

.site-header .language-switcher .lang-item {
    white-space: nowrap !important;
    display: inline-block !important;
    min-width: max-content;
}

/* ---------- Tier 1: 1380px and below - tighten spacing ---------- */
@media screen and (max-width: 1380px) {
    .site-header .header-menu {
        gap: 24px;
        min-width: unset;
    }

    .header-menu a:after,
    .header-menu a:before {
        width: 10px;
    }

    .header-menu a span:after {
        margin-left: 4px;
    }

    .site-header .language-switcher {
        margin-left: 20px;
    }
}

/* ---------- Tier 2: 1200px and below - compact mode ---------- */
@media screen and (max-width: 1200px) {
    .site-header .header-menu {
        gap: 16px;
        min-width: unset;
    }

    /* Hide < > decorators and / separator */
    .header-menu a:after,
    .header-menu a:before,
    .header-menu a span:after {
        display: none;
    }

    .site-header .header-menu > li {
        font-size: 14px;
    }

    .site-header .site-logo svg {
        width: 80%;
    }

    .site-header .language-switcher {
        margin-left: 12px;
        gap: 2px;
    }

    .site-header .language-switcher .lang-item {
        padding: 3px 6px;
        font-size: 12px;
    }
}

/* ---------- Tier 3: 1100px and below - hamburger ---------- */
@media screen and (max-width: 1100px) {
    .navbar-toggle {
        display: block;
        background: transparent;
        border: none;
        outline: none;
        box-shadow: unset;
        padding: 0;
        right: 0px;
        position: relative;
        width: 36px;
        height: 36px;
    }

    .navbar-toggle svg {
        width: 36px;
        height: 36px;
        position: absolute;
        top: 0;
        left: 0;
        transition: all .3s ease;
    }

    .navbar-toggle-cross {
        opacity: 0;
    }

    .active .navbar-toggle-cross {
        opacity: 1;
    }

    .active .navbar-toggle-bars {
        opacity: 0;
    }

    .site-header .site-logo {
        text-align: left;
    }

    .site-header .site-logo svg {
        width: 70%;
    }

    .d-head-menu {
        transition: all .3s ease;
        transform: translateX(100%);
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 99;
        background: #231F20;
        padding: 27px;
        display: flex;
        flex-direction: column;
    }

    .site-header .header-menu {
        flex-direction: column;
        gap: 0px;
        justify-content: center;
    }

    .site-header .header-menu > li {
        padding: 10px 0;
        width: 100%;
        display: block;
        font-size: 16px;
    }

    .header-menu a:after,
    .header-menu a:before,
    .header-menu a span:after {
        display: none;
    }

    .active.d-head-menu {
        transform: translateX(0);
    }

    .visible-xs {
        display: block;
    }
}


/* ==========================================================================
   Language-specific adjustments
   ========================================================================== */

/* ---------- Japanese: wider menu items need tighter spacing earlier ---------- */
@media screen and (max-width: 1380px) {
    html[lang="ja"] .site-header .header-menu {
        gap: 20px;
    }
}

@media screen and (max-width: 1200px) {
    html[lang="ja"] .site-header .header-menu {
        gap: 12px;
    }

    html[lang="ja"] .site-header .header-menu > li {
        font-size: 13px;
    }
}

/* ---------- Hebrew: RTL adjustments ---------- */
@media screen and (max-width: 1380px) {
    html[lang="he-IL"] .site-header .header-menu {
        gap: 20px;
    }

    html[lang="he-IL"] .site-header .language-switcher {
        margin-left: 0;
        margin-right: 20px;
    }
}

@media screen and (max-width: 1200px) {
    html[lang="he-IL"] .site-header .header-menu {
        gap: 12px;
    }

    html[lang="he-IL"] .site-header .language-switcher {
        margin-left: 0;
        margin-right: 12px;
    }

    html[lang="he-IL"] .site-header .header-menu > li {
        font-size: 14px;
    }
}

@media screen and (max-width: 1100px) {
    html[lang="he-IL"] .d-head-menu {
        transform: translateX(-100%);
    }

    html[lang="he-IL"] .active.d-head-menu {
        transform: translateX(0);
    }

    html[lang="he-IL"] .site-header .site-logo {
        text-align: right;
    }
}