/*
 * Polylang Language Switcher — switcher.css
 * v1.5.0 — pixel-matched to the WPML reference screenshot.
 *
 * Design spec (measured from reference):
 *   - Pure white background, NO border, NO border-radius
 *   - Inline-flex single row, height 26px
 *   - Items: 10px left pad, 18×12px flag, 7px gap, text, 11px right pad
 *   - NO dividers between items
 *   - Text: #3c3c3c, 13px, weight 400 — all languages identical (no active highlight)
 *   - On hover only: subtle background tint so it feels interactive
 *   - Current language: same appearance as others by default (configurable)
 */

/* ── Container ───────────────────────────────────────────────────────────── */
.plls-switcher {
    display: block;
    margin: 0 0 1.25em 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                 "Helvetica Neue", Arial, sans-serif;
    font-size: 13px;
    line-height: 1;
}

/* ── List — the white bar itself ─────────────────────────────────────────── */
.plls-list {
    display: inline-flex;
    flex-wrap: nowrap;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
    background: #ffffff;
    border: none;          /* no border — matches reference exactly */
    border-radius: 0;      /* no radius   */
    overflow: visible;
}

/* ── Item ────────────────────────────────────────────────────────────────── */
.plls-item {
    display: inline-flex;
    align-items: center;
    margin: 0;
    padding: 0;
    height: 26px;
}

/* ── Shared inner element styles: both link and current-label ────────────── */
.plls-link,
.plls-label {
    display: inline-flex;
    align-items: center;
    gap: 7px;                    /* flag → text gap: 7px (measured) */
    padding: 0 11px 0 10px;      /* left 10px, right 11px (measured) */
    height: 26px;
    white-space: nowrap;
    font-size: 13px;
    line-height: 1;
    color: #3c3c3c;              /* #3c3c3c = rgb(60,60,60) measured */
    font-weight: 400;
    text-decoration: none;
    background: transparent;
    transition: background 0.12s ease;
}

/* ── Link (inactive languages) ───────────────────────────────────────────── */
.plls-link:hover,
.plls-link:focus {
    background: rgba(0, 0, 0, 0.04);   /* very subtle tint on hover */
    color: #3c3c3c;
    text-decoration: none;
    outline: none;
}

.plls-link:focus-visible {
    outline: 2px solid #0073aa;
    outline-offset: -2px;
}

/* ── Current language label ──────────────────────────────────────────────── */
/* Default: looks identical to inactive items (matches reference screenshot) */
.plls-label {
    cursor: default;
}

/*
 * --- CONFIGURABLE ACTIVE-LANGUAGE STYLES ---
 * Add the corresponding class to <nav class="plls-switcher plls-style-X">
 * via the settings page to change how the current language is highlighted.
 *
 * plls-style-flat     (default) — no highlight, all items look identical
 * plls-style-bold     — current language name is bold
 * plls-style-underline — current language underlined
 * plls-style-highlight — light blue tint background (WPML admin style)
 * plls-style-pill     — filled blue pill on current language
 */

/* bold */
.plls-style-bold .plls-label {
    font-weight: 700;
}

/* underline */
.plls-style-underline .plls-label {
    text-decoration: underline;
}

/* highlight (light tint) */
.plls-style-highlight .plls-label {
    background: #eef3fb;
    color: #1a1a1a;
}

/* pill (filled) */
.plls-style-pill .plls-label {
    background: #0073aa;
    color: #ffffff;
    border-radius: 3px;
    font-weight: 600;
    padding: 0 11px 0 10px;
}

/* ── Dimmed: no translation available ────────────────────────────────────── */
.plls-no-translation .plls-link {
    color: #aaaaaa;
}

.plls-no-translation .plls-link:hover {
    color: #888888;
    background: rgba(0, 0, 0, 0.03);
}

/* ── Flag image ──────────────────────────────────────────────────────────── */
.plls-flag {
    display: inline-block;
    width: 18px !important;
    height: 12px !important;
    flex-shrink: 0;
    vertical-align: middle;
    border: 1px solid rgba(0, 0, 0, 0.10);
    border-radius: 1px;
    object-fit: cover;
    overflow: hidden;
}

/* ── Language name text ──────────────────────────────────────────────────── */
.plls-name {
    vertical-align: middle;
}

/* ── Responsive ──────────────────────────────────────────────────────────── */
/* Switcher always stays on a single horizontal row on all screen sizes.      */
/* flex-wrap: nowrap on .plls-list already handles this — no media query      */
/* needed. Removed the column-stack that was breaking layout on iPhone.       */