/* ═══════════ LANGUAGE MENU (flags) — shared component ═══════════
   One source, two consumers:
   · the homepage nav, where src/js/i18n.js builds it out of buttons
     (.lang + .is-open), because there a language is a runtime text swap;
   · the generated pages, where blog/_src/build.mjs emits real links inside a
     <details> (.langpick + [open]), because there every language is a
     different URL — so the control has to be crawlable, carry hreflang, and
     keep working with JavaScript off.

   Same look, different mechanics. Loaded by index.html and portfolio/, and
   bundled into /blog/assets/app.min.css. WHERE the control sits in the nav is
   layout, and stays in main.css / blog.css.
   ══════════════════════════════════════════════════════════════ */

.lang, .langpick { position: relative; z-index: 101; }

/* ── the pill ───────────────────────────────────────────────── */
.lang__btn {
  display: inline-flex; align-items: center; gap: 5px; height: 36px; padding: 0 9px;
  border-radius: var(--radius-pill); background: var(--color-nav-blur);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: var(--shadow-rest); color: var(--color-text); cursor: pointer;
  transition: background .3s ease, transform .2s var(--ease-spring);
}
.lang__btn:hover { transform: translateY(-1px); }
/* A <summary> is display:list-item by default and every engine paints its own
   marker, each through a different selector. All three are needed. */
summary.lang__btn { list-style: none; }
summary.lang__btn::-webkit-details-marker { display: none; }
summary.lang__btn::marker { content: ""; }

.lang__flag {
  width: 22px; height: 15px; border-radius: 3px; overflow: hidden; display: block;
  box-shadow: 0 0 0 1px var(--color-border);
}
.lang__flag svg { width: 100%; height: 100%; display: block; }
.lang__chev { opacity: .55; transition: transform var(--dur-mid) var(--ease-out); }
.lang.is-open .lang__chev,
.langpick[open] .lang__chev { transform: rotate(180deg); }

/* ── the dropdown ───────────────────────────────────────────── */
.lang__menu {
  position: absolute; top: calc(100% + 8px); right: 0; min-width: 170px; z-index: 60;
  margin: 0; padding: 6px; list-style: none;
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-md); box-shadow: var(--shadow-lift);
  display: flex; flex-direction: column; gap: 2px; transform-origin: top right;
}
/* Homepage: the menu stays in the DOM, so opening is a transition. */
.lang .lang__menu {
  opacity: 0; transform: translateY(-8px) scale(.95); pointer-events: none;
  transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-mid) var(--ease-spring);
}
.lang.is-open .lang__menu { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
/* Generated pages: <details> takes the menu out of the box tree when closed, so
   a transition has nothing to run from. The same motion has to be a keyframe. */
.langpick[open] .lang__menu { animation: langmenu-in var(--dur-mid) var(--ease-spring) both; }
@keyframes langmenu-in {
  from { opacity: 0; transform: translateY(-8px) scale(.95); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.lang__menu > li { display: flex; }

/* ── the rows ───────────────────────────────────────────────── */
.lang__opt {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px;
  border-radius: 9px; font-family: var(--font-primary); font-size: var(--text-base);
  font-weight: 500; color: var(--color-text); cursor: pointer; text-align: left;
  text-decoration: none;
  transition: background var(--dur-fast) ease, color var(--dur-fast) ease;
}
.lang .lang__opt { opacity: 0; transform: translateX(6px); }
.lang.is-open .lang__opt {
  opacity: 1; transform: translateX(0);
  transition: opacity var(--dur-mid) var(--ease-out) calc(var(--i) * 0.045s + 0.05s),
              transform var(--dur-mid) var(--ease-spring) calc(var(--i) * 0.045s + 0.05s),
              background var(--dur-fast) ease;
}
.langpick[open] .lang__opt {
  animation: langmenu-row var(--dur-mid) var(--ease-spring) calc(var(--i) * 0.045s + 0.05s) both;
}
@keyframes langmenu-row {
  from { opacity: 0; transform: translateX(6px); }
  to   { opacity: 1; transform: translateX(0); }
}
.lang__opt:hover { background: var(--color-surface-2); }
.lang__opt > span:nth-child(2) { flex: 1; }
.lang__check { opacity: 0; color: var(--color-primary); flex-shrink: 0; }
/* aria-checked is the homepage menu, aria-current the link list — same mark. */
.lang__opt[aria-checked="true"],
.lang__opt[aria-current="page"] { color: var(--color-primary); font-weight: 700; }
.lang__opt[aria-checked="true"] .lang__check,
.lang__opt[aria-current="page"] .lang__check { opacity: 1; }

@media (max-width: 720px) { .lang__chev { display: none; } }

/* The homepage has a global reduced-motion rule; the blog bundle does not, so
   the component carries its own. It must open instantly, not stay invisible. */
@media (prefers-reduced-motion: reduce) {
  .langpick[open] .lang__menu,
  .langpick[open] .lang__opt { animation: none; }
  .lang.is-open .lang__opt { transition: background var(--dur-fast) ease; }
}