/* Language dropdown, shared by every page except the editor.

   Replaces the two-up EN/TR pill. The pill only works while there are two or
   three languages - it grows the header pill by roughly 60px per language and
   would push the nav into its collapse breakpoints long before the list is done.
   A dropdown is a fixed-width control whatever the list length. */

.langsel { position: relative; flex: none; }

.langsel-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: 800 14.5px 'Hanken Grotesk', sans-serif;
  color: var(--on-paper);
  background: rgba(24, 21, 9, .05);
  border: none;
  border-radius: var(--r-pill);
  /* Tighter on the right than the left: the chevron already carries its own
     optical space, and the room bought here is what lets the "Download Ritmik"
     label stay visible in the nav instead of collapsing to the Apple icon. */
  padding: 9px 8px 9px 11px;
  cursor: pointer;
  white-space: nowrap;
}
.langsel-btn:hover { background: rgba(24, 21, 9, .1); }
.langsel-flag { width: 21px; height: 21px; border-radius: var(--r-pill); display: block; flex: none; }
.langsel-chev { width: 13px; height: 13px; opacity: .55; transition: transform .14s; }
.langsel-btn[aria-expanded="true"] .langsel-chev { transform: rotate(180deg); }

.langsel-menu {
  display: none;
  position: absolute;
  top: calc(100% + 9px);
  right: 0;
  min-width: 190px;
  background: var(--paper);
  border-radius: 18px;
  box-shadow: 0 16px 42px rgba(24, 21, 9, .2);
  padding: 7px;
  z-index: 80;
  /* Long lists scroll rather than running off the bottom of the viewport. */
  max-height: min(60vh, 420px);
  overflow-y: auto;
}
.langsel-menu.open { display: block; }

.langsel-opt {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  font: 800 15px 'Hanken Grotesk', sans-serif;
  color: var(--on-paper);
  background: none;
  border: none;
  border-radius: 12px;
  padding: 10px 11px;
  cursor: pointer;
  text-align: left;
}
.langsel-opt:hover { background: rgba(24, 21, 9, .06); }
.langsel-opt[aria-selected="true"] { background: rgba(12,108,95,.12); color: var(--green-text); }
.langsel-check { margin-left: auto; width: 15px; height: 15px; opacity: 0; flex: none; }
.langsel-opt[aria-selected="true"] .langsel-check { opacity: 1; }

/* The original two-up pill stays in the DOM - it owns the click handlers the
   dropdown forwards to - but is never shown once the dropdown is in place. */
.nav-in .lang.langsel-src,
.nav-in .nav-lang.langsel-src { display: none !important; }

/* The dropdown stays in the bar on tablets, alongside the links. Only on phones
   does it come out - there the language list lives inside the hamburger panel. */
@media (max-width: 600px) {
  .nav-in > .langsel { display: none !important; }
}

/* Between 821 and 1000px the nav gives up its slack so the Download label
   can stay visible; the pill tightens with it. Here rather than in each
   page's own <style>, which lost to this file on the library and blog. */
@media (max-width: 1000px) and (min-width: 821px) {
  .langsel-btn { padding: 8px 7px 8px 9px; gap: 6px; }
}

/* Until lang-select.js runs, what paints is the raw pill this control is built
   from — five flag buttons, about 340px wide. Replacing it then dragged the whole
   right-hand cluster ~260px left, which is the jump you see on every page load.
   Hide it up front and hold the finished control's footprint so nothing moves.
   The .js class is set by the head snippet, so with scripting off the pill still
   renders and stays usable. */
.js .nav-in .lang,
.js .nav-in .nav-lang { visibility: hidden; width: 87px; overflow: hidden; }
.js .nav-in .lang.langsel-src,
.js .nav-in .nav-lang.langsel-src { width: auto; }
@media (max-width: 1000px) and (min-width: 821px) {
  .js .nav-in .lang,
  .js .nav-in .nav-lang { width: 80px; }
}