/* Rectangular navigation bar and downward menu. */
.nav,
.nav.is-scrolled {
  top:0;
  left:0;
  width:100%;
  max-width:none;
  height:82px;
  padding-inline:max(24px,calc((100vw - 1180px) / 2));
  border:0;
  border-bottom:1px solid rgba(255,255,255,.18);
  border-radius:0;
  background:rgba(12,12,11,.91);
  box-shadow:0 14px 42px rgba(0,0,0,.18);
  transform:translateY(0);
}

.nav.is-hidden {
  transform:translateY(-110%);
}

.nav-links {
  top:100%;
  right:max(24px,calc((100vw - 1180px) / 2));
  left:auto;
  width:292px;
  padding:0;
  border:0;
  border-radius:0;
  background:rgba(13,13,12,.97);
  box-shadow:0 22px 46px rgba(0,0,0,.28);
  transform:translateY(-8px);
  transform-origin:right top;
}

.nav-links.is-open {
  transform:translateY(0);
}

.nav-links a {
  min-height:54px;
  padding:0 20px;
  border-top:1px solid rgba(255,255,255,.12);
}

.nav-links a:first-child {
  border-top:0;
}

@media (max-width:820px) {
  .nav,
  .nav.is-scrolled {
    top:0;
    width:100%;
    height:74px;
    padding-inline:16px;
    border-radius:0;
  }

  .nav .brand {
    width:150px;
    height:52px;
  }

  .nav-language select {
    height:38px;
    padding:0 28px 0 12px;
    font-size:10px;
  }

  .nav-call {
    min-width:78px;
    height:38px;
    padding-inline:12px;
    font-size:10px;
  }

  .nav-actions .menu-button {
    width:40px;
    height:40px;
  }

  .nav-links,
  .nav-links.is-open {
    top:100%;
    right:12px;
    left:auto;
    width:min(276px,calc(100vw - 24px));
    border-radius:0;
  }

  .nav-links a {
    min-height:52px;
    padding-inline:20px;
    font-size:13px;
  }
}

@media (max-width:540px) {
  .nav,
  .nav.is-scrolled {
    height:68px;
    padding-inline:12px;
  }

  .nav .brand {
    width:122px;
    height:46px;
  }

  .nav-actions {
    gap:4px;
  }

  .nav-language select {
    height:36px;
  }

  .nav-call {
    min-width:66px;
    height:36px;
    padding-inline:10px;
  }

  .nav-actions .menu-button {
    width:38px;
    height:38px;
  }

  .nav-links,
  .nav-links.is-open {
    right:8px;
    width:min(252px,calc(100vw - 16px));
  }
}

@media (prefers-reduced-motion:reduce) {
  .nav,
  .nav-links {
    transform:none;
  }
}
