/* ---------------------------------------------------------------------------
   Language switcher for the public site.

   The header sits over the hero in white on dark, so the control is drawn as a
   quiet outline that only lifts on hover. The panel is a small dark card, which
   keeps it legible whether the header is floating over the hero photograph or
   pinned in its scrolled state.

   Kept in its own file so homepage.css stays the layout it has always been.
--------------------------------------------------------------------------- */

.header-end {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: clamp(10px, 1.6vw, 20px);
}

/* --- the button ---------------------------------------------------------- */

.site-lang {
    position: relative;
    flex: none;
}

.language-flag { display: block; width: 27px; height: 18px; flex: none; border-radius: 3px; overflow: hidden; box-shadow: 0 0 0 1px rgba(255,255,255,.18); }

.site-lang > summary {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 7px 11px;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .12em;
    line-height: 1;
    color: rgba(255, 255, 255, .82);
    cursor: pointer;
    list-style: none;
    user-select: none;
    transition: color .25s ease, border-color .25s ease, background .25s ease;
}

.site-lang > summary::-webkit-details-marker { display: none; }
.site-lang > summary::marker { content: ''; }

.site-lang > summary:hover,
.site-lang[open] > summary {
    color: #fff;
    border-color: var(--gold);
    background: rgba(184, 154, 98, .14);
}

.site-lang > summary:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 3px;
}

.site-lang-globe {
    display: block;
    width: 15px;
    height: 15px;
    color: var(--gold);
}

.site-lang-globe svg {
    display: block;
    width: 100%;
    height: 100%;
}

.site-lang-caret {
    width: 7px;
    height: 7px;
    margin-inline-start: 1px;
    border-right: 1.4px solid currentColor;
    border-bottom: 1.4px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
    opacity: .55;
    transition: transform .3s cubic-bezier(.4, 0, .2, 1), opacity .25s ease;
}

.site-lang[open] .site-lang-caret {
    transform: translateY(1px) rotate(-135deg);
    opacity: 1;
}

/* --- the panel ----------------------------------------------------------- */

.site-lang-list {
    position: absolute;
    top: calc(100% + 12px);
    inset-inline-end: 0;
    z-index: 40;
    min-width: 188px;
    padding: 6px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 14px;
    background: rgba(21, 21, 18, .97);
    box-shadow: 0 22px 54px rgba(0, 0, 0, .38);
    animation: site-lang-in .26s cubic-bezier(.16, 1, .3, 1) both;
}

@supports (backdrop-filter: blur(18px)) {
    .site-lang-list {
        background: rgba(21, 21, 18, .82);
        backdrop-filter: blur(18px);
    }
}

/* A small pointer so the panel reads as belonging to the button. */
.site-lang-list::before {
    content: '';
    position: absolute;
    top: -5px;
    inset-inline-end: 18px;
    width: 9px;
    height: 9px;
    border-top: 1px solid rgba(255, 255, 255, .12);
    border-left: 1px solid rgba(255, 255, 255, .12);
    background: inherit;
    transform: rotate(45deg);
}

@keyframes site-lang-in {
    from { opacity: 0; transform: translateY(-8px) scale(.97); }
    to   { opacity: 1; transform: none; }
}

.site-lang-list a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-radius: 9px;
    color: rgba(255, 255, 255, .74);
    transition: background .2s ease, color .2s ease;
}

.site-lang-list a b {
    flex: none;
    margin-inline-start: auto;
    text-align: end;
    width: 30px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .1em;
    color: var(--gold);
}

.site-lang-list a span {
    font-size: 14px;
    line-height: 1.2;
}

.site-lang-list a:hover,
.site-lang-list a:focus-visible {
    background: rgba(255, 255, 255, .07);
    color: #fff;
    outline: 0;
}

.site-lang-list a.on {
    background: rgba(184, 154, 98, .16);
    color: #fff;
}

.site-lang-list a.on b { color: #fff; }

/* Languages written in the Arabic script need a face that carries their
   letters, and a little more room to breathe. */
.site-lang-list a[lang="ckb"] span,
.site-lang-list a[lang="ar"] span,
.site-lang-list a[lang="fa"] span {
    font-family: 'Noto Sans Arabic', 'Vazirmatn', var(--sans);
    font-size: 15px;
}

/* --- the page fade on switching ------------------------------------------ */

.lang-switching {
    opacity: .35;
    transition: opacity .22s ease;
}

/* --- narrow screens ------------------------------------------------------ */

@media (max-width: 900px) {
    .header { grid-template-columns: 1fr auto auto; }
    /* homepage.css hides the call to action with `.header > .nav-cta`, which no
       longer reaches it now that it sits inside .header-end. */
    .header-end .nav-cta { display: none; }
    .header .menu-toggle { grid-column: 3; grid-row: 1; justify-self: end; }
    .header-end {
        grid-column: 2;
        grid-row: 1;
        margin-inline-end: 6px;
    }
    .site-lang > summary {
        padding: 8px 12px;
        min-height: 38px;
    }
    .site-lang-list {
        min-width: 200px;
        padding: 7px;
    }
    .site-lang-list a { padding: 11px 12px; }
}

/* The fullscreen menu covers the header, so hide the picker while it is open
   rather than letting it float over the overlay. */
.menu-open .site-lang { visibility: hidden; }

@media (prefers-reduced-motion: reduce) {
    .site-lang-list { animation: none; }
    .site-lang-caret,
    .site-lang > summary,
    .site-lang-list a { transition: none; }
}