/*
 * The language switcher.
 *
 * A summary that names the current language and a list of the other eleven
 * under it. Names rather than flags, with the code alongside, because a flag is
 * a country and a country is not a language.
 *
 * It is a <details> element: it opens on a tap or a keypress with no script at
 * all, which matters on a phone, and it cannot get stuck open if a script
 * fails. The panel is 44px-per-row so a thumb can hit a row without magnifying.
 */

.w2e-lang {
  position: relative;
  font-family: var(--w2e-sans, "Plus Jakarta Sans", system-ui, sans-serif);
  font-size: .82rem;
}

.w2e-lang__button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 13px;
  border: 1px solid rgba(255, 255, 255, .26);
  border-radius: 999px;
  color: #fff;
  cursor: pointer;
  list-style: none;
  white-space: nowrap;
  transition: border-color .18s ease, background-color .18s ease;
  user-select: none;
}

.w2e-lang__button::-webkit-details-marker { display: none; }

.w2e-lang__button:hover,
.w2e-lang[open] .w2e-lang__button {
  border-color: var(--w2e-gold, #c99a49);
  background: rgba(255, 255, 255, .06);
}

.w2e-lang__button:focus-visible {
  outline: 2px solid var(--w2e-gold, #c99a49);
  outline-offset: 3px;
}

.w2e-lang__globe { display: inline-flex; }
.w2e-lang__globe svg { width: 16px; height: 16px; color: var(--w2e-gold, #c99a49); }

.w2e-lang__now { font-weight: 600; }

.w2e-lang__button .w2e-lang__code {
  font-size: .7rem;
  letter-spacing: .08em;
  opacity: .62;
}

/* ---- the list ---- */

.w2e-lang__list {
  position: absolute;
  z-index: 60;
  right: 0;
  bottom: calc(100% + 10px);
  /* Twelve languages in one column is taller than the header band it hangs
     from, and the hero clips its own overflow, so half the list was
     unreachable. Two columns bring it to six rows. */
  width: max-content;
  max-width: min(92vw, 460px);
  display: grid;
  grid-template-columns: repeat(2, minmax(150px, 1fr));
  gap: 2px;
  align-content: start;
  max-height: min(52vh, 300px);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: #071c30;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 6px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, .45);
}

/* In the header the panel hangs below the button rather than above it. */
.w2e-lang--header .w2e-lang__list {
  top: calc(100% + 10px);
  bottom: auto;
}

.w2e-lang__list li { margin: 0; }

body .w2e-lang__list a {
  display: flex;
  height: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 12px;
  min-height: 42px;
  color: rgba(255, 255, 255, .82);
  text-decoration: none;
  border-radius: 4px;
  font-size: .88rem;
  line-height: 1.2;
  transition: background-color .14s ease, color .14s ease;
}

body .w2e-lang__list a:hover,
body .w2e-lang__list a:focus-visible {
  background: rgba(255, 255, 255, .09);
  color: #fff;
}

body .w2e-lang__list a.is-current {
  color: #fff;
  background: rgba(201, 154, 73, .16);
  box-shadow: inset 2px 0 0 var(--w2e-gold, #c99a49);
}

.w2e-lang__list .w2e-lang__code {
  font-size: .68rem;
  letter-spacing: .1em;
  opacity: .55;
}

/* ---- in the header, over the hero photograph ---- */

.w2e-lang--header {
  margin-left: clamp(10px, 1.4vw, 22px);
}

.w2e-lang--header .w2e-lang__button {
  background: rgba(6, 20, 34, .38);
  backdrop-filter: blur(6px);
}

/* Below the width where the menu becomes a drawer, the switcher goes with it:
   the header keeps the logo, the switcher and the burger, in that order. */
@media (max-width: 1024px) {
  .w2e-lang--header .w2e-lang__now { display: none; }
  .w2e-lang--header .w2e-lang__button .w2e-lang__code { opacity: 1; font-weight: 700; }
}

@media (max-width: 720px) {
  .w2e-lang--footer .w2e-lang__list {
    right: auto;
    left: 0;
  }
}

/* ---- right-to-left ---- */

html[dir="rtl"] .w2e-lang__list { right: auto; left: 0; }
html[dir="rtl"] body .w2e-lang__list a.is-current { box-shadow: inset -2px 0 0 var(--w2e-gold, #c99a49); }


/* The hero clips its own overflow, so the open panel is taken out of that box
   and pinned to the viewport instead of hanging inside the header band. */
.w2e-lang--header[open] .w2e-lang__list {
  position: fixed;
  top: auto;
  bottom: auto;
  z-index: 400;
}

@media (max-width: 560px) {
  .w2e-lang__list { grid-template-columns: minmax(0, 1fr); max-height: min(60vh, 340px); }
}

/* The switcher sits inside the content area on the pages whose header is part
   of the content, and the theme underlines every link in there. */
body .w2e-lang a,
body .w2e-lang__list a,
body .entry-content .w2e-lang a {
  text-decoration: none !important;
  box-shadow: none !important;
  border-bottom: 0 !important;
}

/* The floating WhatsApp button sits over the bottom-right corner; the footer's
   switcher steps aside rather than under it. */
@media (min-width: 721px) {
  .w2e-sitefoot__lang { margin-right: 74px; }
}