/* Language switcher: flags in a row (.lang-inline), or the flag of the current language opening a list (.lang-menu), or every
   language with its name (.lang-expanded). In a row and in the expanded list, the current language is opaque, the others
   semi-transparent until pointed or focused; the open menu keeps its own hover background. */
/* Every flag in the same 4:3 box, also where a theme sets only its width */
.lang-flag { display: inline-block; flex: none; width: 1.35rem; height: 1.0125rem; aspect-ratio: 4 / 3; border-radius: 2px; object-fit: cover; vertical-align: middle; box-shadow: 0 0 0 1px rgba(127, 127, 127, 0.35); }
.lang-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.lang-inline { display: flex; align-items: center; gap: 0.4rem; margin: 0; padding: 0; list-style: none; }
.lang-inline li { margin: 0; padding: 0; }
.lang-inline a, .lang-current { display: flex; align-items: center; padding: 0.3rem; border: 0; border-radius: var(--q2-radius-pill, 0.4rem); background: none; line-height: 0; color: inherit; cursor: pointer; }
.lang-inline li:not(.is-active) a { opacity: 0.4; transition: opacity 0.15s; }
.lang-inline li:not(.is-active) a:hover, .lang-inline li:not(.is-active) a:focus-visible { opacity: 1; }

.lang-menu { position: relative; }
.lang-list { position: absolute; top: 100%; right: 0; z-index: 50; display: grid; gap: 0.1rem; min-width: 11rem; margin: 0; padding: 0.35rem; list-style: none; color: CanvasText; background: Canvas;
    border: 1px solid rgba(127, 127, 127, 0.35); border-radius: var(--q2-radius-md, 0.5rem); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2); visibility: hidden; opacity: 0; transition: opacity 0.15s; }
.lang-menu:hover .lang-list, .lang-menu:focus-within .lang-list { visibility: visible; opacity: 1; }
.lang-list li { margin: 0; padding: 0; }
.lang-list a { display: flex; align-items: center; gap: 0.6rem; padding: 0.4rem 0.6rem; border-radius: var(--q2-radius-sm, 0.4rem); color: inherit; line-height: 1.2; text-decoration: none; }
.lang-list a:hover, .lang-list a:focus-visible { background: rgba(127, 127, 127, 0.15); }

.lang-expanded .lang-list { display: block; position: static; visibility: visible; opacity: 1; box-shadow: none; background: none; border: 0; padding: 0; margin: 0; min-width: 0; }
.lang-expanded .lang-list li { display: block; margin: 0 0 0.35rem; padding: 0; list-style: none; }
.lang-expanded .lang-list a { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0; margin: 0; }
.lang-expanded .lang-list li:not(.is-active) a { opacity: 0.6; transition: opacity 0.15s; }
.lang-expanded .lang-list a:hover, .lang-expanded .lang-list a:focus-visible { background: none; }
.lang-expanded .lang-list li:not(.is-active) a:hover, .lang-expanded .lang-list li:not(.is-active) a:focus-visible { opacity: 1; }
.lang-expanded .lang-list .is-active a { font-weight: 700; }

/* In the top bar of Quark 2: centred with the other actions; on a narrow screen its menu button sits over the right edge, the
   languages stay left of it */
.navbar-section.actions .oli-langswitcher { display: flex; align-items: center; margin: 0 0.75rem 0 0; }
@media (max-width: 860px) { #header .navbar-section.actions:has(.oli-langswitcher) { padding-right: 3rem; } }

/* In a <nav> (the top bar of Quark 2), Pico gives the lists and links a negative margin and a padding */
nav .lang-inline li, nav .lang-list li { display: block; width: auto; margin: 0; padding: 0; }
nav .lang-inline a, nav .lang-list a, nav .lang-current { margin: 0; }
nav .lang-inline a, nav .lang-current { padding: 0.3rem; }