/* /template/css/lang-picker.css
 *
 * Styles for the [language_picker] shortcode rendered in the site
 * header and/or footer. Loaded on every page; if the feature is
 * disabled the shortcode produces no HTML and this file matches
 * nothing, so it's effectively free.
 *
 * Three visual modes (PHP-side):
 *
 *   flag    — DEFAULT. A compact <details> dropdown whose summary
 *             shows just the current language's flag emoji + 2-letter
 *             code. Click to reveal the others. No "Language" label
 *             cluttering the chrome; works without JS via native
 *             <details>; flags render where <option>-based selects
 *             can't show emojis.
 *
 *   links   — Inline list of native names (with flags). Use when
 *             only 2-3 languages and there's horizontal room.
 *
 *   select  — Legacy labelled <select>. Opt-in via style="select".
 */

/* ============================================================
 * Flag-style picker (default)
 *
 * Closed state shows only the current language's flag SVG —
 * no label, no code, no caret. Click to drop a small menu of
 * other languages (flag + native name per row).
 * ============================================================ */
.lang-picker--flag {
    display: inline-block;
    position: relative;
}

.lang-picker--flag > .lang-picker__summary {
    display: inline-flex;
    align-items: center;
    padding: 4px;
    border: 1px solid transparent;
    border-radius: 4px;
    cursor: pointer;
    list-style: none;
    user-select: none;
    color: inherit;
    line-height: 0;            /* the SVG controls vertical size */
}
/* Hide the default disclosure triangle Safari/Firefox would otherwise show. */
.lang-picker--flag > .lang-picker__summary::-webkit-details-marker { display: none; }
.lang-picker--flag > .lang-picker__summary::marker                  { content: ''; }

.lang-picker--flag > .lang-picker__summary:hover,
.lang-picker--flag[open] > .lang-picker__summary {
    border-color: var(--border, #d0d0d4);
    background: var(--bg, #fff);
}

/* The actual flag SVG. 28×20 stays visually proportionate to header
   text while being a comfortable click target on touch + mouse.
   The 1px hairline makes white/light flags (Japan, Poland …) visible
   against light header backgrounds. */
.lang-flag {
    display: block;
    width: 28px;
    height: 20px;
    border: 1px solid rgba(0,0,0,0.12);
    border-radius: 2px;
    box-sizing: border-box;
}

/* Dropdown menu — compact vertical column of flags only.
 *
 * Absolutely positioned so opening it doesn't push siblings (the
 * search box etc.) around. Width is just slightly wider than one
 * flag so it stays unobtrusive — it's a flag picker, not a menu.
 */
.lang-picker--flag .lang-picker__menu {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;                          /* picker is on the left now */
    width: max-content;
    margin: 0;
    padding: 4px;
    list-style: none;
    background: var(--bg, #fff);
    border: 1px solid var(--border, #d0d0d4);
    border-radius: 6px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.08);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.lang-picker--flag .lang-picker__menu li {
    margin: 0;
    padding: 0;
    list-style: none;       /* belt-and-braces vs older browsers */
}
.lang-picker--flag .lang-picker__menu a {
    display: block;
    padding: 6px;
    border-radius: 3px;
    line-height: 0;
}
.lang-picker--flag .lang-picker__menu a:hover,
.lang-picker--flag .lang-picker__menu a:focus {
    background: rgba(99,102,241,0.12);
    outline: none;
}

/* Dark-mode polish */
[data-theme="dark"] .lang-picker--flag > .lang-picker__summary:hover,
[data-theme="dark"] .lang-picker--flag[open] > .lang-picker__summary {
    background: rgba(255,255,255,0.04);
    border-color: rgba(255,255,255,0.16);
}
[data-theme="dark"] .lang-picker--flag .lang-picker__menu {
    background: #1a2436;
    border-color: #334155;
    box-shadow: 0 6px 18px rgba(0,0,0,0.4);
}

/* ============================================================
 * Inline-links style
 * ============================================================ */
.lang-picker--links {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    font-size: 0.92rem;
}
.lang-picker__current {
    color: var(--muted, #6b7280);
    font-weight: 600;
}
.lang-picker__link {
    color: inherit;
    text-decoration: underline;
    text-decoration-color: var(--border, #d0d0d4);
    text-underline-offset: 3px;
}
.lang-picker__link:hover {
    text-decoration-color: currentColor;
}

/* ============================================================
 * Legacy <select> style (used only when style="select")
 * ============================================================ */
.lang-picker:not(.lang-picker--flag):not(.lang-picker--links) {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.92rem;
}
.lang-picker__label { color: var(--muted, #6b7280); }
.lang-picker__select {
    appearance: none;
    -webkit-appearance: none;
    border: 1px solid var(--border, #d0d0d4);
    border-radius: 4px;
    padding: 0.25rem 1.6rem 0.25rem 0.5rem;
    background: var(--bg, #fff)
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path fill='%236b7280' d='M0 0l5 6 5-6z'/></svg>")
        no-repeat right 0.45rem center;
    color: inherit;
    font: inherit;
    line-height: 1.3;
    cursor: pointer;
}
.lang-picker__select:focus {
    outline: 2px solid #2563eb;
    outline-offset: 1px;
}
.lang-picker__noscript {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0; padding: 0;
    list-style: none;
}
.lang-picker__noscript li + li::before {
    content: " · ";
    color: var(--muted, #6b7280);
    margin-right: 0.4rem;
}

/* RTL-aware spacing for the legacy select. */
[dir="rtl"] .lang-picker__select {
    padding: 0.25rem 0.5rem 0.25rem 1.6rem;
    background-position: left 0.45rem center;
}