/*
 * 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,
body .w2e-lang__list .w2e-lang__item {
  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,
body .w2e-lang__list .w2e-lang__item:hover,
body .w2e-lang__list a,
body .w2e-lang__list .w2e-lang__item:focus-visible {
  background: rgba(255, 255, 255, .09);
  color: #fff;
}

body .w2e-lang__list a,
body .w2e-lang__list .w2e-lang__item.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);
}

/* Once the menu collapses into the burger, the bar holds three items and
   `space-between` strands the language pill in the middle of it. The pill takes
   the free space itself so that it sits beside the button it belongs with. */
@media (max-width: 1024px) {
  .w2e-lang--header { margin-left: auto; }
}

.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,
body .w2e-lang__list .w2e-lang__item.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 .w2e-lang__list .w2e-lang__item,
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; }
}


/* The switcher makes its own stacking context while it is open, so the panel
   is never trapped behind a sibling of its parent. */
.w2e-lang { z-index: 5; }
.w2e-lang[open] { z-index: 500; position: relative; }

/* --------------------------------------------------------------------------
   The items are buttons now

   They used to be links to a Polylang URL. There is no other URL to go to any
   more - GTranslate renders this page in the chosen language - so each item is
   a button, and a button arrives with a user-agent stylesheet that a link does
   not: its own font, its own background, its own border, centred text. Reset
   the lot so the list looks exactly as it did.
   -------------------------------------------------------------------------- */

body .w2e-lang__list .w2e-lang__item {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  margin: 0;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: .82rem;
  text-align: left;
  cursor: pointer;
}

/* --------------------------------------------------------------------------
   Google's own furniture

   GTranslate's widget and Google's toolbar are not part of this design: the
   switcher in the header and the footer is. The widget still has to exist and
   still has to load - it is what does the translating - so it is moved out of
   sight rather than removed, and the banner frame Google likes to push the
   whole document down by is neutralised.
   -------------------------------------------------------------------------- */

/* The wrapper has to stay rendered.
   Google builds its <select> inside it, and it will not build into a container
   that is display:none or visibility:hidden - which is how the widget came to
   exist on the page while the translation never loaded. So it is clipped to a
   single transparent pixel instead: present, measurable, and invisible. */
.gtranslate_wrapper {
  position: fixed !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  z-index: -1 !important;
}

/* Google's own furniture, on the other hand, can go entirely. */
#goog-gt-tt,
.goog-te-balloon-frame,
.goog-te-banner-frame,
.skiptranslate iframe {
  display: none !important;
}

body,
body.translated-ltr,
body.translated-rtl {
  top: 0 !important;
}

/* Google marks every string it has touched. The underline and the highlight it
   sometimes adds are its debugging clothes, not ours. */
font[style],
.goog-text-highlight {
  background: none !important;
  box-shadow: none !important;
  color: inherit !important;
}

/* The name of a language is one of the few things on a page that must never be
   translated - "Deutsch" becoming "German" in the German list defeats the list.
   The markup carries translate="no"; this is the belt to that pair of braces. */
.w2e-lang__name,
.w2e-lang__code,
.w2e-lang__now {
  unicode-bidi: plaintext;
}

/* The container Google builds its control into. It has to be in the document
   and it has to have a box, or Google declines to build; it does not have to be
   looked at. */
#w2e-gt-element {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  z-index: -1;
}