/* Fixed vector lettering: equal optical edges, independent of fonts and JS. */
.logo {
  --brand-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  inline-size: max-content;
  max-inline-size: 100%;
  flex: 0 0 auto;
  direction: ltr;
  vertical-align: middle;
}
.logo > .logo-mark {
  inline-size: var(--brand-height);
  block-size: var(--brand-height);
  flex: 0 0 var(--brand-height);
  object-fit: contain;
}
.logo > .logo-wordmark {
  inline-size: calc(var(--brand-height) * 132 / 46);
  block-size: var(--brand-height);
  max-inline-size: none;
  flex: 0 0 auto;
  object-fit: contain;
}
.header-row > .language-switcher { flex: 0 0 auto; }
.footer-main > div { min-inline-size: 0; }
@media (max-width: 650px) {
  .logo { --brand-height: 40px; gap: 10px; }
  .menu-button {
    min-inline-size: 44px;
    min-block-size: 44px;
    justify-content: center;
    padding: 0;
    flex: 0 0 auto;
  }
  .header-row { column-gap: 8px; }
  .language-switcher > div {
    position: absolute;
    top: calc(100% + .5rem);
    right: 0;
    left: auto;
    width: min(360px, calc(100vw - 32px));
  }
  [dir="rtl"] .language-switcher > div { right: auto; left: 0; }
  [dir="rtl"] .menu-button { margin-inline-start: auto; margin-inline-end: 0; }
  [dir="rtl"] .language-switcher { padding-right: .5rem; }
}
@media (max-width: 360px) {
  .site-header .logo { --brand-height: 36px; gap: 8px; }
  .header-row { column-gap: 6px; }
}
/* Extra narrow windows keep the complete name above the navigation controls. */
@media (max-width: 280px) {
  .header-row { flex-wrap: wrap; padding-block: 12px; }
  .site-header .logo { margin-inline-end: calc(100% - 148px); }
  .main-nav { position: absolute; inset-block-start: 100%; }
  .language-switcher > div { position: absolute; top: calc(100% + .5rem); right: 0; left: auto; width: 190px; }
  [dir="rtl"] .language-switcher > div { right: auto; left: 0; }
  .view-home .hero-content { padding-block-start: 11rem; }
}