/* One logo size for both pages and every navigation state. */
:root { --menu-logo-width: 112px; }
header.nav .brand,
.mobile-menu .mobile-menu__head .brand {
  display: inline-flex;
  align-items: center;
  flex: 0 0 var(--menu-logo-width);
  width: var(--menu-logo-width);
  min-width: var(--menu-logo-width);
  line-height: 0;
}
header.nav .brand img,
.mobile-menu .mobile-menu__head .brand img {
  display: block;
  width: var(--menu-logo-width);
  min-width: var(--menu-logo-width);
  max-width: none;
  height: auto;
  max-height: none;
  flex-shrink: 0;
}

/* Navigation actions keep the EasyUp green. */
header.nav.nav--with-menu > .btn,
.mobile-menu .mobile-menu__cta {
  border: 1px solid #b0ff80;
  border-radius: 999px;
  color: #111;
  background: #b0ff80;
  box-shadow: none;
}
header.nav.nav--with-menu > .btn:hover,
.mobile-menu .mobile-menu__cta:hover {
  border-color: #fff;
  color: #111;
  background: #fff;
}

@media (min-width: 901px) {
  header.nav.nav--with-menu { gap: 1rem; }
}

@media (max-width: 900px) {
  header.nav.nav--with-menu:has(> .btn) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: .3rem;
    padding: .35rem .4rem .35rem .85rem;
  }
  header.nav.nav--with-menu > .language-switcher { display: none; }
  header.nav.nav--with-menu:has(> .btn) > .brand {
    width: min(100%, 5.6rem);
    min-width: 0;
  }
  header.nav.nav--with-menu:has(> .btn) > .brand img {
    width: 100%;
    min-width: 0;
  }
  header.nav.nav--with-menu > .menu-toggle {
    grid-column: 2;
    justify-self: center;
    width: 2.55rem;
    height: 2.55rem;
    margin: 0;
  }
  header.nav.nav--with-menu > .btn {
    display: inline-flex;
    grid-column: 3;
    justify-self: end;
    width: auto;
    min-width: 0;
    min-height: 2.55rem;
    max-width: 100%;
    padding: .55rem .75rem;
    font-size: clamp(.62rem, 2.7vw, .75rem);
    white-space: nowrap;
  }
  header.nav.nav--with-menu > .btn::after { margin-left: .4rem; }
  .menu-toggle span { transition: transform .22s ease, opacity .22s ease; }
  .menu-toggle[aria-expanded="true"] span:first-child { transform: translateY(7px) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .menu-toggle[aria-expanded="true"] span:last-child { transform: translateY(-7px) rotate(-45deg); }
}

/* The full-screen mobile menu shares the navigation's dark palette. */
@media (max-width: 900px) {
  .mobile-menu .mobile-menu__panel {
    color: #f7f7f4;
    background: #171917;
  }
  .mobile-menu .mobile-menu__head .brand img { filter: invert(1); }
  .mobile-menu .mobile-menu__links a,
  .mobile-menu .mobile-menu__document-link { color: #f7f7f4; }
  .mobile-menu .mobile-menu__links a:hover { color: #b0ff80; }
  .mobile-menu .mobile-menu__document-link + .mobile-menu__document-link { border-color: rgba(255,255,255,.18); }
  .mobile-menu .mobile-menu__close {
    color: #fff;
    border-color: rgba(255,255,255,.28);
    background: transparent;
  }
  .mobile-menu .mobile-menu__close::before,
  .mobile-menu .mobile-menu__close::after { background: currentColor; }
  .mobile-menu .mobile-menu__close:hover { color: #111; border-color: #b0ff80; background: #b0ff80; }
  .mobile-menu .language-switcher__toggle {
    color: #f7f7f4;
    border-color: rgba(255,255,255,.25);
    background: rgba(255,255,255,.04);
  }
  .mobile-menu .language-switcher__toggle:hover { border-color: rgba(255,255,255,.5); background: rgba(255,255,255,.08); }
  .mobile-menu .language-switcher__menu { border-color: rgba(255,255,255,.2); background: #252825; }
  .mobile-menu .language-switcher__option { color: #f7f7f4; }
  .mobile-menu .language-switcher__option { border: 1px solid transparent; }
  .mobile-menu .language-switcher__option:hover { background: rgba(255,255,255,.06); }
  .mobile-menu .language-switcher__option.is-active {
    color: #f7f7f4;
    border-color: rgba(255,255,255,.45);
    background: transparent;
  }
}