/* =========================================================================
   LANGUAGE SWITCHER
   A bespoke control over the Google Translate engine. The engine's own UI is
   suppressed entirely — see "Suppress Google chrome" at the foot of this file,
   which is what stops the grey banner from shoving the whole page down.
   ========================================================================= */

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

/* ------------------------------------------------------------- Trigger */
.lang__btn {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .48rem .72rem;
  background: transparent;
  border: 1px solid var(--ink-12);
  color: rgba(245,240,232,.78);
  font-family: var(--sans); font-size: .62rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  cursor: pointer;
  transition: border-color .4s var(--ease), color .4s var(--ease), background .4s var(--ease);
}
.lang__btn:hover,
.lang.is-open .lang__btn { border-color: var(--gold); color: var(--gold); }
.lang__btn:focus-visible { outline: 1px solid var(--gold); outline-offset: 2px; }
.lang__btn svg { opacity: .85; }
.lang__code { line-height: 1; }

/* --------------------------------------------------------------- Panel */
.lang__panel {
  position: absolute; top: calc(100% + .7rem); right: 0;
  width: 336px; max-width: calc(100vw - 2rem);
  background: var(--navy-deep);
  border: 1px solid var(--ink-12);
  box-shadow: 0 26px 60px rgba(0,0,0,.5);
  opacity: 0; visibility: hidden;
  transform: translateY(-8px);
  transition: opacity .35s var(--ease), transform .35s var(--ease), visibility .35s;
  z-index: 1200;
  display: flex; flex-direction: column;
  max-height: min(70vh, 560px);
}
.lang.is-open .lang__panel { opacity: 1; visibility: visible; transform: none; }

.lang__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: .95rem 1.05rem .7rem;
  border-bottom: 1px solid var(--ink-08);
}
.lang__eye {
  font-family: var(--sans); font-size: .54rem; font-weight: 600;
  letter-spacing: .26em; text-transform: uppercase; color: var(--gold);
}
.lang__close {
  background: none; border: 0; cursor: pointer;
  color: rgba(245,240,232,.5); font-size: 1.3rem; line-height: 1;
  padding: 0 .1rem; transition: color .3s var(--ease);
}
.lang__close:hover { color: var(--ivory); }

/* -------------------------------------------------------------- Search */
.lang__search {
  display: flex; align-items: center; gap: .55rem;
  margin: .8rem 1.05rem .3rem;
  padding: .55rem .7rem;
  border: 1px solid var(--ink-12);
  transition: border-color .35s var(--ease);
}
.lang__search:focus-within { border-color: rgba(201,168,76,.6); }
.lang__search-ico { display: flex; color: rgba(245,240,232,.4); flex: none; }
.lang__search input {
  flex: 1; min-width: 0;
  background: none; border: 0; outline: none;
  color: var(--ivory);
  font-family: var(--sans); font-size: .8rem;
}
.lang__search input::placeholder { color: rgba(245,240,232,.35); }
.lang__search input::-webkit-search-cancel-button { filter: invert(.6); }

/* ---------------------------------------------------------------- List */
.lang__list {
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: .5rem .55rem .3rem;
  scrollbar-width: thin;
}
.lang__list::-webkit-scrollbar { width: 6px; }
.lang__list::-webkit-scrollbar-thumb { background: rgba(201,168,76,.35); }

.lang__group { margin-bottom: .5rem; }
.lang__group[hidden] { display: none; }
.lang__region {
  display: block;
  padding: .55rem .5rem .35rem;
  font-family: var(--sans); font-size: .5rem; font-weight: 600;
  letter-spacing: .22em; text-transform: uppercase;
  color: rgba(245,240,232,.34);
}

.lang__item {
  display: flex; align-items: baseline; gap: .5rem;
  width: 100%; text-align: left;
  padding: .5rem .5rem;
  background: none; border: 0; cursor: pointer;
  border-left: 2px solid transparent;
  transition: background .28s var(--ease), border-color .28s var(--ease);
}
.lang__item[hidden] { display: none; }
.lang__item:hover { background: rgba(201,168,76,.08); border-left-color: var(--gold); }
.lang__item:focus-visible { outline: 1px solid var(--gold); outline-offset: -2px; }
.lang__native {
  font-family: var(--sans); font-size: .87rem; color: var(--ivory);
  line-height: 1.3;
}
.lang__en {
  font-family: var(--sans); font-size: .66rem;
  color: rgba(245,240,232,.4);
}
.lang__tick { margin-left: auto; color: var(--gold); opacity: 0; font-size: .72rem; flex: none; }
.lang__item.is-active { border-left-color: var(--gold); background: rgba(201,168,76,.06); }
.lang__item.is-active .lang__tick { opacity: 1; }
.lang__item.is-active .lang__native { color: var(--gold-light); }

.lang__empty {
  margin: 0; padding: 1.2rem .6rem;
  font-size: .78rem; color: rgba(245,240,232,.45); text-align: center;
}

.lang__note {
  margin: 0; padding: .75rem 1.05rem .9rem;
  border-top: 1px solid var(--ink-08);
  font-size: .64rem; line-height: 1.5; color: rgba(245,240,232,.38);
}

/* --------------------------------------------------- Desktop placement
   .nav__inner is space-between; adding a third child would otherwise strand
   the link list in the middle. Push the list right and seat the switcher
   beside it, so the bar reads brand-left / everything-else-right as before. */
@media (min-width: 861px) {
  .nav__links { margin-left: auto; }
  .lang { margin-left: 1.5rem; }
}

/* ---------------------------------------------------- Mobile placement */
@media (max-width: 860px) {
  /* Sit beside the hamburger, and open as a sheet anchored to the viewport
     so the panel is never clipped by the header's own bounds. */
  .lang { margin-left: auto; margin-right: .6rem; }
  .lang__panel {
    position: fixed;
    top: auto; bottom: 0; left: 0; right: 0;
    width: auto; max-width: none;
    max-height: 78vh;
    transform: translateY(14px);
    border-left: 0; border-right: 0; border-bottom: 0;
  }
  .lang.is-open .lang__panel { transform: none; }
  .lang__native { font-size: .95rem; }
  .lang__item { padding: .68rem .5rem; }
}

@media (prefers-reduced-motion: reduce) {
  .lang__panel, .lang__item, .lang__btn { transition-duration: .01ms !important; }
}

/* =========================================================================
   Suppress Google chrome
   Left alone, the widget injects a fixed banner iframe and pushes <body>
   down with an inline `top`, which breaks the fixed header. These rules
   remove the banner, the tooltip and the highlight styling, while leaving
   the underlying <select> reachable to script.
   ========================================================================= */
iframe.skiptranslate,
.goog-te-banner-frame,
#goog-gt-tt,
.goog-te-balloon-frame { display: none !important; }

body { top: 0 !important; position: static !important; }

/* Keep the engine's select in the layout tree but out of sight — hiding it
   with display:none stops it dispatching change events in some browsers. */
#google_translate_element {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap;
}

/* Google marks translated runs with these; neutralise so copy keeps our type. */
.goog-text-highlight { background: none !important; box-shadow: none !important; }
font[style] { background: none !important; box-shadow: none !important; }