/* assets/css/switcher.css
 *
 * Thema's kunnen de switcher bijsturen via CSS-variabelen. Zet ze op
 * :root, body of een ouder-element (custom properties erven door). Wordt
 * een variabele niet gezet, dan geldt de standaardwaarde (de fallback).
 *
 *   Layout
 *   --mll-gap                  ruimte tussen items           (.375rem)
 *   --mll-line-height          regelhoogte switcher          (1)
 *   --mll-transition-duration  hover/animatieduur            (.15s)
 *
 *   Items
 *   --mll-inactive-opacity     niet-actieve taal             (.6)
 *   --mll-fallback-opacity     ongekoppelde site             (.35)
 *
 *   Vlag
 *   --mll-flag-height          vlaghoogte                    (.875rem)
 *   --mll-flag-radius          vlag-hoekradius               (.125rem)
 *   --mll-flag-border-width    dikte van het randje          (.0625rem)
 *   --mll-flag-border-color    kleur van het randje          (rgba(0,0,0,.08))
 *   --mll-flag-shadow          volledige box-shadow override (samengesteld uit bovenstaande)
 *
 *   Tekst
 *   --mll-font-size            toggle + opties               (1.2rem)
 *
 *   Dropdown-toggle
 *   --mll-toggle-padding-y     verticale padding             (.25rem)
 *   --mll-toggle-padding-x     horizontale padding           (.5rem)
 *   --mll-toggle-radius        hoekradius                    (.1875rem)
 *   --mll-toggle-line-height   regelhoogte                   (1.4)
 *   --mll-toggle-hover-bg      hover-achtergrond             (rgba(0,0,0,.06))
 *   --mll-chevron-gap          ruimte vóór het pijltje       (.25rem)
 *
 *   Focus
 *   --mll-focus-color          outline-kleur                 (currentColor)
 *   --mll-focus-width          outline-dikte                 (.125rem)
 *   --mll-focus-offset         outline-afstand               (.125rem)
 *
 *   Dropdown-paneel
 *   --mll-panel-bg             achtergrond                   (#fff)
 *   --mll-panel-border-width   randdikte                     (.0625rem)
 *   --mll-panel-border-color   randkleur                     (rgba(0,0,0,.15))
 *   --mll-panel-radius         hoekradius                    (.1875rem)
 *   --mll-panel-shadow         schaduw                       (0 .25rem .75rem rgba(0,0,0,.1))
 *   --mll-panel-z              z-index                       (200)
 *
 *   Dropdown-opties
 *   --mll-option-padding-y     verticale padding             (.375rem)
 *   --mll-option-padding-x     horizontale padding           (.75rem)
 *   --mll-option-color         tekstkleur                    (#333)
 *   --mll-option-hover-bg      hover-achtergrond             (#eef0f1)
 */

.mll-switcher {
    display: inline-flex;
    gap: var(--mll-gap, .375rem);
    align-items: center;
    line-height: var(--mll-line-height, 1);
}

.mll-switcher .mll-lang {
    display: inline-flex;
    text-decoration: none;
    opacity: var(--mll-inactive-opacity, .6);
    transition: opacity var(--mll-transition-duration, .15s) ease;
}

.mll-switcher .mll-lang:hover {
    opacity: 1;
}

.mll-switcher .mll-active {
    opacity: 1;
    cursor: default;
}

/* SVG-vlaggen: schaal op tekstgrootte, behoud 4:3-verhouding.
   !important overrulet thema-img-resets met hoge specificity, bv.
   `html body#root img { height: auto }`, die onze classe anders verslaat.
   De hoogte blijft instelbaar via de variabele --mll-flag-height. */
.mll-switcher .mll-flag {
    display: inline-block;
    width: auto !important;
    height: var(--mll-flag-height, .875rem) !important;
    max-width: none !important;
    border-radius: var(--mll-flag-radius, .125rem);
    vertical-align: middle;
    box-shadow: var(
        --mll-flag-shadow,
        0 0 0 var(--mll-flag-border-width, .0625rem) var(--mll-flag-border-color, rgba(0, 0, 0, .08))
    );
    flex-shrink: 0;
}

.mll-switcher .mll-fallback {
    opacity: var(--mll-fallback-opacity, .35);
}

/* Screenreader-only — visueel verborgen, wel beschikbaar voor AT */
.mll-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ─── Dropdown-variant ────────────────────────────────────────────────────── */

.mll-switcher--dropdown {
    position: relative;
    display: inline-block;
}

.mll-switcher__toggle {
    display: flex;
    align-items: center;
    padding: var(--mll-toggle-padding-y, .25rem) var(--mll-toggle-padding-x, .5rem);
    border: 0;
    border-radius: var(--mll-toggle-radius, .1875rem);
    background: transparent;
    color: inherit;
    font-size: var(--mll-font-size, 1.2rem);
    line-height: var(--mll-toggle-line-height, 1.4);
    cursor: pointer;
    white-space: nowrap;
}

.mll-switcher__toggle:hover {
    background: var(--mll-toggle-hover-bg, rgba(0, 0, 0, .06));
}

.mll-switcher__toggle:focus-visible {
    outline: var(--mll-focus-width, .125rem) solid var(--mll-focus-color, currentColor);
    outline-offset: var(--mll-focus-offset, .125rem);
}

.mll-switcher__chevron {
    display: block !important;
    margin-left: var(--mll-chevron-gap, .25rem);
    flex-shrink: 0;
    transition: transform var(--mll-transition-duration, .15s) ease;
}

.mll-switcher__toggle[aria-expanded="true"] .mll-switcher__chevron {
    transform: rotate(180deg);
}

.mll-switcher__options {
    position: absolute;
    /* top: calc(100% + .125rem); */
    top: 75%;
    left: 0;
    z-index: var(--mll-panel-z, 200);
    margin: 0;
    padding: 0;
    list-style: none;
    background: var(--mll-panel-bg, #fff);
    border: var(--mll-panel-border-width, .0625rem) solid var(--mll-panel-border-color, rgba(0, 0, 0, .15));
    border-radius: var(--mll-panel-radius, .1875rem);
    box-shadow: var(--mll-panel-shadow, 0 .25rem .75rem rgba(0, 0, 0, .1));
    min-width: 100%;
}

.mll-switcher__option a {
    display: block;
    padding: var(--mll-option-padding-y, .375rem) var(--mll-option-padding-x, .75rem);
    color: var(--mll-option-color, #333);
    text-decoration: none;
    font-size: var(--mll-font-size, 1.2rem);
    white-space: nowrap;
    text-align: center;
}

.mll-switcher__option a:hover {
    background: var(--mll-option-hover-bg, #eef0f1);
}