/* The EN/DK language selector, in one place.
 *
 * Every page that offers the toggle loads this file: the homepage, the shared
 * About / Privacy / Terms documents, and the standalone event pages. The rules
 * lived in both `styles.css` and `pages.css` before, which is two copies of one
 * control that has to look and behave the same everywhere a visitor meets it.
 *
 * The pill sits on a dark header band on every page that uses it, so the colors
 * are fixed here rather than themed per page.
 *
 * The active option is derived from `[data-active-lang]`, which `lang-cookie.js`
 * writes on <html> before first paint — no page needs a script of its own for
 * it. `scripts.js` additionally sets `.active` on the homepage; both spellings
 * are honored so neither path has to know about the other.
 */
.lang-pill {
    display: flex;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 100px;
    overflow: hidden;
}

/* `text-decoration` is stated rather than left to the page: the pages that carried
 * the pill first all set `text-decoration: none` on `a`, so the underline never
 * showed and only the hover rule below was written. The halloween page underlines
 * links by default, which put an underline under EN/DK — the control has to look
 * the same everywhere a visitor meets it, so it settles this itself.
 *
 * The two declarations are not duplicates and neither is redundant. `styles.css`
 * and `loppemarked.css` both carry `a:hover { text-decoration: underline }`, which
 * at (0,1,1) outranks the (0,1,0) base rule below whatever the source order; only
 * the (0,2,0) `:hover` rule beats it. Delete either one and EN/DK grows an
 * underline on some page — the base rule on halloween, the hover rule on the five
 * others. */
.lang-pill-option {
    padding: 6px 14px;
    font-size: 0.85rem;
    font-weight: 600;
    color: #fff;
    text-decoration: none;
}
.lang-pill-option:hover {
    text-decoration: none;
}

.lang-pill-option.active,
html[data-active-lang="en"] .lang-pill-option[hreflang="en"],
html[data-active-lang="dk"] .lang-pill-option[hreflang="da"] {
    background: rgba(255, 255, 255, 0.18);
}

.lang-pill-option:focus-visible {
    outline: 2px solid #fff;
    outline-offset: -2px;
}