/*!
 * English / বাংলা switcher in the top bar.
 *
 * Presentation only. The control is two plain <form>s, one per language;
 * nothing here changes what posts or where it goes.
 *
 * The navbar in this theme is white — `.theme-header-bg.no-print` resolves to
 * --dt-card, and every control on it is a coloured chip. So this is drawn for
 * a light ground: a pale track, dark text on the option not chosen, and a
 * solid red pill on the one that is. Red rather than the brand violet because
 * the violet chips beside it (POS, the user menu) would swallow the selected
 * state entirely.
 *
 * typography.css pins `body button` to font-weight:400 !important, so the
 * weights here have to be !important too, or the chosen option never reads as
 * heavier than the other.
 */

.lang-switch {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    margin: 0;
    padding: 3px;
    border: 1px solid #E3E0EC;
    border-radius: 999px;
    background: #F3F1F6;
    /* Latin resolves to DM Sans, Bengali falls through to Hind Siliguri, so
       both labels are set in a face designed for their own script. */
    font-family: 'DM Sans', 'Hind Siliguri', 'Nirmala UI', system-ui, sans-serif;
    line-height: 1;
}

/* One form per option, so the wrapper above is the visible track and these
   are only the plumbing between it and the buttons. */
.lang-switch__form {
    display: inline-flex;
    margin: 0;
    padding: 0;
    border: 0;
}

.lang-switch__option {
    -webkit-appearance: none;
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    padding: 6px 13px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    /* 8.4:1 on the track. The option you are about to click has to be
       readable, not merely present. */
    color: #4A3B63;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600 !important;
    line-height: 1.15;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}

.lang-switch__option:hover {
    background: #E7E3F0;
    color: #2A0A4A;
}

/* Chosen language. White on #DC2626 is 4.9:1, so the label stays readable
   rather than leaving the fill to carry the state on its own. */
.lang-switch__option.is-active {
    background: #DC2626;
    color: #fff;
    font-weight: 700 !important;
}
.lang-switch__option.is-active:hover {
    background: #B91C1C;
    color: #fff;
}

.lang-switch__option:focus-visible {
    outline: 2px solid #DC2626;
    outline-offset: 2px;
}

/* common.js disables the button while the form goes out. Without this the
   browser greys it, which reads as an error rather than as "on its way". */
.lang-switch__option[disabled] {
    opacity: 1;
    cursor: progress;
}

/* Bengali sits on a taller body than Latin at the same point size, so it
   needs a shade more room to avoid looking cramped next to "English". */
.lang-switch__option[lang="bn"] {
    font-size: 13.5px;
    padding-top: 5px;
    padding-bottom: 5px;
}

/* ------------------------------------------------------------------
   Small screens
   ------------------------------------------------------------------
   The labels stay — an abbreviation the reader has to decode is worse
   than a slightly narrower pill. Only the padding gives way.
   ------------------------------------------------------------------ */
@media (max-width: 575px) {
    .lang-switch__option { padding-inline: 10px; font-size: 12.5px; }
    .lang-switch__option[lang="bn"] { font-size: 13px; }
}

/* A finger needs a bigger target than a cursor does */
@media (hover: none) and (pointer: coarse) {
    .lang-switch__option { min-height: 34px; padding: 8px 14px; }
}

@media (prefers-reduced-motion: reduce) {
    .lang-switch__option { transition: none; }
}