/* Language switcher — shipped hidden; js/lang-switcher.js only builds it once the flag or ENABLED
   says so.

   IT LIVES IN THE FOOTER. The header already carries six links and a call to action; a seventh
   control there competes with the things the page is actually trying to get people to do, for a
   setting each visitor touches once. The footer is also where people have been taught to look for
   it. The header rules below are kept because the script falls back to the nav on any page whose
   footer differs — a layout we have not seen degrades to a working switcher in the wrong place
   rather than to none at all.

   Two of the site's own rules had to be answered rather than ignored:

     nav ul     { display: flex }   made the dropdown lay its entries out in a ROW
     nav ul li a{ padding: 10px 15px; display: block; border-radius: 5px }

   Everything is expressed with the site's variables: change the theme and this follows. */

.lang-switcher {
    position: relative;
}

/* Matched to `nav ul li a` exactly — padding, weight, radius, transition — because it sits beside
   those links and anything else reads as a foreign control bolted onto the menu. */
.lang-switcher-toggle {
    font: inherit;
    font-weight: 500;
    color: var(--text-light);
    background: none;
    border: 0;
    padding: 10px 15px;
    border-radius: 5px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    transition: all 0.3s;
    line-height: inherit;
}

.lang-switcher-toggle:hover,
.lang-switcher.open .lang-switcher-toggle {
    color: var(--primary-color);
    background-color: rgba(255, 255, 255, 0.05);
}

.lang-switcher-toggle:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

/* A globe, drawn in CSS. An <img> would be one more request, and an emoji renders differently on
   every platform — including as a coloured square on some Android builds. */
.lang-switcher-toggle::before {
    content: "";
    width: 15px;
    height: 15px;
    flex: none;
    border: 1.5px solid currentColor;
    border-radius: 50%;
    /* The two ellipses are the meridian and the equator: a background gradient pair costs nothing
       and reads as a globe at 15px, where a detailed icon would be mud. */
    background:
        linear-gradient(currentColor, currentColor) center / 100% 1.5px no-repeat,
        radial-gradient(ellipse 5px 7px at center, transparent calc(100% - 1.5px), currentColor calc(100% - 1.5px));
    opacity: .85;
}

.lang-switcher-toggle::after {
    content: "";
    width: 5px;
    height: 5px;
    flex: none;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg) translate(-1px, -1px);
    transition: transform .18s ease;
}

.lang-switcher.open .lang-switcher-toggle::after {
    transform: rotate(-135deg) translate(-2px, -2px);
}

/* `display` is the override that matters: without it the header's `nav ul { display: flex }` wins
   and the languages sit side by side in a strip. */
.lang-switcher-menu {
    display: block;
    position: absolute;
    top: calc(100% + 8px);
    /* Logical, not physical: these pages are generated for right-to-left languages too, where the
       menu must hang from the other edge. */
    inset-inline-start: 0;
    min-width: 180px;
    max-height: min(70vh, 420px);
    overflow-y: auto;
    margin: 0;
    padding: 6px;
    list-style: none;
    background-color: rgba(28, 31, 54, 0.98);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius, 12px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(10px);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity .15s ease, transform .15s ease, visibility .15s;
    z-index: 1001;   /* above the sticky header, which is 1000 */
}

.lang-switcher.open .lang-switcher-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* `nav ul li { margin: 0 5px }` would indent every entry; inside a dropdown that reads as a
   misalignment rather than as spacing. */
.lang-switcher-menu li {
    margin: 0;
}

.lang-switcher-menu a {
    display: block;
    padding: 9px 12px;
    border-radius: 6px;
    color: var(--text-secondary);
    text-decoration: none;
    font-weight: 500;
    white-space: nowrap;
    transition: all 0.2s;
}

.lang-switcher-menu a:hover,
.lang-switcher-menu a:focus-visible {
    color: var(--text-light);
    background-color: rgba(56, 177, 237, 0.16);
}

/* The language you are already reading stays listed but is marked, so the menu answers "where am
   I" as well as "where can I go". */
.lang-switcher-menu a[aria-current="true"] {
    color: var(--primary-color);
    font-weight: 600;
}

/* Mobile. The header switches to `nav ul { flex-direction: column; text-align: center }`, where an
   absolutely positioned dropdown would float over the links below it. It becomes part of the flow
   instead — the menu is already a vertical list, so the languages simply continue it. */
@media (max-width: 768px) {
    .lang-switcher {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .lang-switcher-menu {
        position: static;
        width: 100%;
        min-width: 0;
        max-height: none;
        margin-top: 4px;
        background: transparent;
        border: 0;
        box-shadow: none;
        backdrop-filter: none;
        transform: none;
        /* Collapsed by height rather than hidden outright, so opening it still animates. */
        max-height: 0;
        overflow: hidden;
        padding: 0 6px;
        transition: max-height .22s ease, opacity .15s ease;
    }

    .lang-switcher.open .lang-switcher-menu {
        max-height: 60vh;
        overflow-y: auto;
        padding: 6px;
        transform: none;
    }

    .lang-switcher-menu a {
        text-align: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    .lang-switcher-toggle,
    .lang-switcher-toggle::after,
    .lang-switcher-menu,
    .lang-switcher-menu a {
        transition: none;
    }
}

/* Preview only — never reached on the live site, because the switcher is not built at all unless
   the flag is set by hand. A dashed outline so a screenshot cannot be mistaken for production. */
.lang-switcher-preview .lang-switcher-toggle {
    outline: 1px dashed var(--primary-color);
    outline-offset: 3px;
}


/* ── In the footer ──────────────────────────────────────────────────────────
   `.footer-links` is a plain flex row of anchors with `margin-left: 15px`, and `.footer-content`
   is `justify-content: space-between`. The switcher joins that row as one more item, styled as a
   footer link rather than as a header button — muted until touched, like everything beside it. */

.lang-switcher-footer {
    position: relative;
    display: inline-flex;
    margin-left: 15px;
    vertical-align: middle;
}

.lang-switcher-footer .lang-switcher-toggle {
    padding: 0;
    border-radius: 0;
    font-weight: inherit;
    color: var(--text-muted);
    transition: color 0.3s;
}

.lang-switcher-footer .lang-switcher-toggle:hover,
.lang-switcher-footer.open .lang-switcher-toggle {
    color: var(--primary-color);
    background: none;
}

/* Opening upwards is not a preference here: the control sits at the bottom of the document, so a
   menu dropping down would render off-screen and scroll the page to reach it. */
.lang-switcher-menu-up {
    top: auto;
    bottom: calc(100% + 10px);
    transform: translateY(6px);
}

.lang-switcher.open .lang-switcher-menu-up {
    transform: translateY(0);
}

/* The caret points up when closed, since that is where the menu will appear. */
.lang-switcher-footer .lang-switcher-toggle::after {
    transform: rotate(-135deg) translate(-2px, -2px);
}

.lang-switcher-footer.open .lang-switcher-toggle::after {
    transform: rotate(45deg) translate(-1px, -1px);
}

@media (max-width: 768px) {
    /* The footer stacks and centres; the switcher goes back to being a normal absolute dropdown
       opening upwards, because unlike the header menu there is no vertical list to continue. */
    .lang-switcher-footer {
        margin: 12px 0 0;
        display: flex;
        justify-content: center;
    }

    .lang-switcher-footer .lang-switcher-menu {
        position: absolute;
        left: 50%;
        transform: translate(-50%, 6px);
        width: auto;
        min-width: 180px;
        max-height: 50vh;
        overflow-y: auto;
        padding: 6px;
        background-color: rgba(28, 31, 54, 0.98);
        border: 1px solid rgba(255, 255, 255, 0.08);
        box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
        backdrop-filter: blur(10px);
    }

    .lang-switcher-footer.open .lang-switcher-menu {
        transform: translate(-50%, 0);
    }
}


/* ── In the top utility bar ────────────────────────────────────────────────
   `.topbar` is 0.9rem on a 40%-black strip, its links `--text-secondary` at 0.85rem. The switcher
   joins `.topbar-right` beside the social icons, which are separated by " | " — so it takes the
   same separator rather than inventing spacing that would not match. */

.lang-switcher-topbar {
    position: relative;
    display: inline-flex;
    align-items: center;
    margin-inline-start: 12px;
    padding-inline-start: 12px;
    border-inline-start: 1px solid rgba(255, 255, 255, 0.18);
}

.lang-switcher-topbar .lang-switcher-toggle {
    padding: 0;
    border-radius: 0;
    font-size: 0.85rem;
    font-weight: inherit;
    color: var(--text-secondary);
    transition: color 0.3s;
    gap: 6px;
}

.lang-switcher-topbar .lang-switcher-toggle::before {
    width: 13px;
    height: 13px;
}

.lang-switcher-topbar .lang-switcher-toggle:hover,
.lang-switcher-topbar.open .lang-switcher-toggle {
    color: var(--primary-color);
    background: none;
}

/* Hung from the right edge: the topbar's own content is right-aligned, so a menu anchored on the
   left would spill past the container on a narrow window. */
.lang-switcher-topbar .lang-switcher-menu {
    inset-inline-start: auto;
    inset-inline-end: 0;
    top: calc(100% + 10px);
    font-size: 0.9rem;
}

@media (max-width: 768px) {
    /* `.topbar-left` is hidden below 768px and `.topbar-right` centres, so the switcher simply
       stays in that row. The dropdown keeps its own background here — there is no vertical list
       for it to continue, unlike the collapsed main menu. */
    .lang-switcher-topbar {
        margin-inline-start: 10px;
        padding-inline-start: 10px;
    }

    .lang-switcher-topbar .lang-switcher-menu {
        max-height: 60vh;
    }
}