/* ═══════════════════════════════════════════════
   LANGUAGE SWITCHER — a flag in the corner

   Built by js/lang.js, so everything here is styling
   for markup that does not exist in the HTML.
   ═══════════════════════════════════════════════ */

/* the nav is space-between; this keeps the links and the flag together
   on the right so the flag reaches the actual corner */
.nav__right{
  display:flex; align-items:center;
  gap:clamp(14px,2.2vw,28px);
}

.lang{position:relative}

.lang__btn{
  display:grid; place-items:center;
  width:30px; height:30px; padding:0;
  appearance:none; cursor:pointer;
  background:none; border:0;
  border-radius:50%;
  /* the ring is what makes it read as a deliberate control rather than a
     sticker, and it carries the brand colour into the corner */
  box-shadow:0 0 0 1.5px rgba(136,1,42,.32), 0 2px 6px rgba(84,20,44,.18);
  overflow:hidden;
  transition:box-shadow .25s var(--ease), transform .25s var(--ease);
}
.lang__btn:hover{box-shadow:0 0 0 1.5px var(--wine), 0 3px 9px rgba(84,20,44,.26)}
.lang__btn:focus-visible{outline:2px solid var(--wine); outline-offset:3px}
.lang__btn:active{transform:scale(.95)}

.lang__flag{
  display:block; width:100%; height:100%;
  border-radius:50%;
}

/* ── the menu ── */
.lang__menu{
  position:absolute; top:calc(100% + 10px); right:0;
  min-width:186px; margin:0; padding:6px;
  list-style:none;
  background:var(--cream);
  border:1px solid rgba(136,1,42,.16);
  border-radius:14px;
  box-shadow:0 18px 40px -18px rgba(84,20,44,.45);
  opacity:0; transform:translateY(-6px) scale(.98);
  transform-origin:top right;
  pointer-events:none;
  transition:opacity .22s var(--ease), transform .22s var(--ease);
}
.lang.is-open .lang__menu{opacity:1; transform:none; pointer-events:auto}

.lang__item{
  display:flex; align-items:center; gap:11px;
  padding:9px 11px;
  border-radius:9px;
  text-decoration:none;
  font:500 13px/1 var(--sans);
  color:var(--ink);
  transition:background .2s var(--ease);
}
.lang__item .lang__flag{
  width:20px; height:20px; flex:0 0 auto;
  box-shadow:0 0 0 1px rgba(84,20,44,.18);
}
.lang__name{flex:1 1 auto}

a.lang__item:hover{background:rgba(136,1,42,.07)}
a.lang__item:focus-visible{outline:2px solid var(--wine); outline-offset:-2px}
a.lang__item[aria-current]{color:var(--wine); font-weight:600}

/* not translated yet — visible, so the plan is legible, but plainly not
   available. Sending someone to an untranslated page is worse than waiting. */
/* dimmed by opacity alone. Desaturating on top of this made the Spanish
   flag read as beige and the French and German ones as grey — they stopped
   being identifiable as flags at all, which defeats having them. */
.lang__item.is-soon{cursor:default; opacity:.55}
.lang__soon{
  font:600 11px/1 var(--sans); letter-spacing:.12em; text-transform:uppercase;
  color:var(--wine); opacity:.75;
}

@media (max-width:560px){
  .nav__right{gap:12px}
  .lang__menu{min-width:170px}
}

@media (prefers-reduced-motion:reduce){
  .lang__btn, .lang__menu, .lang__item{transition:none}
}