/* ==========================================================================
   Component: language switch  (<x-site.lang-switch>)
   --------------------------------------------------------------------------
   Default: a small segmented pill (ع | EN) — hairline border, the current
   language filled in ink, the other one a quiet link that tints on hover.
   --compact: a single 44px round button with the other language's label
   (mobile app bar), matching .appbar__btn.
   ========================================================================== */

.lang-switch {
    display: inline-flex;
    align-items: center;
    padding: 3px;
    border: 1px solid var(--line-strong);
    border-radius: var(--r-pill);
    background: var(--card);
}

.lang-switch__item {
    display: grid;
    place-items: center;
    min-width: 34px;
    height: 30px;
    padding-inline: 0.55em;
    border-radius: var(--r-pill);
    color: var(--ink-soft);
    font-family: var(--font-latin);
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    transition: background-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}
.lang-switch__item[lang="ar"] { font-family: var(--font-body); font-size: 0.95rem; }
a.lang-switch__item:hover { background: var(--second-tint); color: var(--second-text); }
.lang-switch__item.is-active { background: var(--ink); color: #fff; }

/* Compact: one round button */
.lang-switch--compact {
    width: 44px;
    height: 44px;
    padding: 0;
    justify-content: center;
    color: var(--ink);
    font-family: var(--font-latin);
    font-size: 0.8rem;
    font-weight: 600;
    text-decoration: none;
}
.lang-switch--compact[lang="ar"] { font-family: var(--font-body); font-size: 1.05rem; }
.lang-switch--compact:hover { color: var(--second-text); }