/* ============================================================================
   EMERALD THEME - landing: language layer (Phase 317)
   Loaded by Themes/Emerald/_LayoutLanding.cshtml right after _I18nHead (i18n.css). Styles the language switcher as
   an Emerald champagne pill and switches the Emerald font variables to the Persian stack in fa (Persian is never
   set in the Palatino serif). Nothing here applies to English pages except the switcher itself.
   Every selector is scoped to body.em-landing (theme CSS lint).
   ========================================================================= */

html[lang="fa"] body.em-landing { --em-sans: var(--at-font-fa); --em-serif: var(--em-sans); }

/* ---- navbar slot: .em-nav__in already spaces its children with gap:16px ---- */
body.em-landing .at-navbar .at-langsw-slot { margin-inline-end: 0; }
@media (min-width: 992px) {
    body.em-landing .at-navbar .at-langsw-slot { margin-inline-start: 0; }
}

/* ---- switcher ---- */
body.em-landing .at-langsw {
    --at-langsw-focus: var(--em-emerald-400);
    padding: 4px;
    background: linear-gradient(180deg, rgba(198, 169, 107, .10), rgba(198, 169, 107, .02));
    border-color: var(--em-line-strong);
}
body.em-landing .at-langsw__icon { color: var(--em-champ-300); }
body.em-landing .at-langsw__opt { block-size: 34px; color: var(--em-champ-200); }
body.em-landing .at-langsw__opt [lang="en"] {
    font: 600 .7rem/1 var(--em-sans);
    letter-spacing: .18em;
    text-transform: uppercase;
}
body.em-landing a.at-langsw__opt:hover { color: var(--em-champ-100); background: rgba(198, 169, 107, .10); }
body.em-landing .at-langsw__opt.is-active {
    color: #06130f;
    background: var(--em-metal-h);
    box-shadow: 0 6px 18px rgba(198, 169, 107, .25);
}

@media (max-width: 575.98px) {
    /* the 44px button replaces the pill: no pill padding, so the navbar keeps its height */
    body.em-landing .at-langsw { padding: 0; }
    body.em-landing .at-langsw__opt {
        inline-size: 44px;
        block-size: 44px;
        border-radius: 999px;
        color: var(--em-champ-200);
        background: linear-gradient(180deg, rgba(198, 169, 107, .10), rgba(198, 169, 107, .02));
        border-color: var(--em-line-strong);
    }
    body.em-landing .at-langsw__opt [lang="en"] { letter-spacing: .06em; }
    body.em-landing a.at-langsw__opt:hover { color: var(--em-champ-100); border-color: var(--em-champ-300); }
}