/*
 * Language switcher + language notes in navigation.
 * Shared by the Persian (dir=rtl) and English (dir=ltr) layouts, so it uses only logical
 * properties and inherits the existing nav-link metrics from design-system.
 * Loaded by both layouts: views/home/master.volt and views/en/master.volt.
 */

.lang-switch{display:flex}

/*
 * The link is a direct child of a .primary-menu item, so it already inherits the nav link
 * padding, 48px target height and hover state. Only the pill and the language marker are
 * added here; nothing is overridden with !important.
 */
.primary-menu>li.lang-switch>a{
    border:1px solid var(--line);
    border-radius:999px;
    padding-block:8px;
    padding-inline:14px;
    min-height:40px;
    font-weight:700;
    color:var(--brand);
    gap:7px
}

.primary-menu>li.lang-switch>a:hover,
.primary-menu>li.lang-switch>a:focus-visible{
    background:var(--brand);
    border-color:var(--brand);
    color:#fff
}

/* "in Persian" beside a link that leaves the English site. */
.nav-lang-note{
    font-size:12px;
    font-weight:400;
    color:var(--muted);
    white-space:nowrap
}

@media(max-width:1026px){
    /* In the mobile drawer the switcher becomes a full-width row like the other links. */
    .primary-menu>li.lang-switch>a{
        width:100%;
        min-height:48px;
        border-radius:var(--radius-small);
        justify-content:space-between;
        padding:14px
    }

    .nav-lang-note{font-size:13px}
}