/* Language switcher: small round flag + short code + arrow, top right of the navbar.
   Own file (the main stylesheet is cached for a year under a fixed name). */
.container---navbar > .grid { padding-right: 100px; }

.lang-switch {
  position: absolute;
  top: 20px;
  right: 0;
  z-index: 20;
  font-family: Jost, sans-serif;
}
.lang-switch__btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 34px;
  padding: 0 8px 0 6px;
  margin: 0;
  background: transparent;
  border: 0;
  border-radius: 999px;
  color: #222;
  font: 600 14px/1 Jost, sans-serif;
  letter-spacing: .05em;
  cursor: pointer;
  transition: background-color .15s ease;
}
.lang-switch__btn:hover,
.lang-switch__btn[aria-expanded="true"] { background: rgba(34, 34, 34, .07); }
.lang-switch__btn:focus-visible,
.lang-switch__menu a:focus-visible { outline: 2px solid #222; outline-offset: 2px; }
.lang-switch__flag {
  display: block;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .2);
}
.lang-switch__chev { width: 12px; height: 12px; transition: transform .15s ease; }
.lang-switch__btn[aria-expanded="true"] .lang-switch__chev { transform: rotate(180deg); }

.lang-switch__menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 168px;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: #fff;
  border: 1px solid #dadada;
  border-radius: 10px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .18);
}
.lang-switch__menu[hidden] { display: none; }
.lang-switch__menu a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 6px;
  color: #222;
  font: 500 15px/1 Jost, sans-serif;
  text-decoration: none;
}
.lang-switch__menu a:hover { background: #f1e5d0; }
.lang-switch__menu a[aria-current="true"] { font-weight: 600; }
.lang-switch__menu a[aria-current="true"]::after { content: "\2713"; margin-left: auto; font-size: 13px; }

@media screen and (max-width: 479px) {
  .container---navbar > .grid { padding-right: 92px; }
}

/* Desktop: the switcher lines up with the logo's left margin (25px) and the room reserved
   for it grows with the viewport, so the gap before it matches the gaps between the links. */
@media screen and (min-width: 992px) {
  .container---navbar > .grid { padding-right: clamp(90px, calc(11.9vw - 38px), 200px); }
  .lang-switch { right: 25px; }
}

/* Desktop navbar below 1280px: instead of squeezing and wrapping the links, scale the whole
   bar down with the window (every size is its 1280px value x width/1280), like a zoom-out.
   Above 1280px nothing changes. Below 992px the mobile menu takes over. */
@media screen and (min-width: 992px) and (max-width: 1279px) {
  .has-navbar .navbar, .landing-page .navbar { padding: 0 1.953vw 1.25vw; }
  .container---navbar > .grid { column-gap: 1.5625vw; padding-right: 8.93vw; }
  .brand { width: 9.844vw; }
  .nav-title-row { column-gap: .9375vw; }
  .nav-title-row .link, .nav-title-row .main { white-space: nowrap; }
  .nav-title-row .text-block-15, .nav-title-row .text-block-14,
  .nav-title-row .text-span-2 { font-size: 1.406vw; line-height: 1.406vw; }
  .nav-title-row .text-span-3 { font-size: .9375vw; }
  .nav-title-row .image-8 { width: 11.72vw; }
  .lang-switch { top: 1.5625vw; right: 1.953vw; }
  .lang-switch__btn { height: 2.656vw; font-size: 1.094vw; gap: .547vw; padding: 0 .625vw 0 .47vw; }
  .lang-switch__flag { width: 1.719vw; height: 1.719vw; }
  .lang-switch__chev { width: .9375vw; height: .9375vw; }
}