:root,
:host {
  --color-nav-background-base: var(--color-background-gradient-top);
  --color-nav-background-alpha: 0.54;
  --color-nav-background-open-alpha: 0.82;
  --color-nav-border-mix: 55%;
  --color-nav-border-alpha: 0.28;
  --color-nav-border-base: color-mix(
    in srgb,
    var(--color-nav-background-base) var(--color-nav-border-mix),
    var(--color-white)
  );
  --color-nav-background: rgb(
    from var(--color-nav-background-base) r g b / var(--color-nav-background-alpha)
  );
  --color-nav-background-open: rgb(
    from var(--color-nav-background-base) r g b / var(--color-nav-background-open-alpha)
  );
  --color-nav-border: rgb(
    from var(--color-nav-border-base) r g b / var(--color-nav-border-alpha)
  );
  --color-nav-link: var(--color-space);
  --color-nav-link-hover: var(--color-white);
  --color-nav-link-hover-background: var(--color-blue-dark);
  --color-nav-submenu-background-base: var(--color-nav-background-base);
  --color-nav-submenu-background-alpha: 0.9;
  --color-nav-submenu-border-alpha: 0.2;
  --color-nav-submenu-background: rgb(
    from var(--color-nav-submenu-background-base) r g b / var(--color-nav-submenu-background-alpha)
  );
  --color-nav-submenu-border: rgb(
    from var(--color-nav-border-base) r g b / var(--color-nav-submenu-border-alpha)
  );
  --color-nav-submenu-link: var(--color-space);
  --color-nav-submenu-icon: var(--color-white);
  --color-nav-submenu-icon-background: var(--color-blue-dark);
  --color-nav-submenu-icon-hover-background: var(--color-space);
  --color-nav-control: var(--color-nav-link);
  --color-nav-control-hover: var(--color-white);
  --color-nav-control-hover-background: var(--color-blue);

  --color-footer-background: var(--color-blue);
  --color-footer-link: var(--color-white);
  --color-footer-link-hover: var(--color-ice);
  --color-footer-text: var(--color-white);
}

.dark {
  --color-nav-background-base: var(--color-space);
  --color-nav-background-alpha: 0.54;
  --color-nav-background-open-alpha: 0.82;
  --color-nav-border-mix: 45%;
  --color-nav-border-alpha: 0.32;
  --color-nav-link: var(--color-white);
  --color-nav-link-hover: var(--color-white);
  --color-nav-link-hover-background: var(--color-copper);
  --color-nav-submenu-background-alpha: 0.88;
  --color-nav-submenu-border-alpha: 0.16;
  --color-nav-submenu-link: var(--color-white);
  --color-nav-submenu-icon: var(--color-white);
  --color-nav-submenu-icon-background: var(--color-copper);
  --color-nav-submenu-icon-hover-background: var(--color-navy-dark);
  --color-nav-control: var(--color-nav-link);
  --color-nav-control-hover: var(--color-white);
  --color-nav-control-hover-background: var(--color-blue);

  --color-footer-background: var(--color-space);
  --color-footer-link: var(--color-white);
  --color-footer-link-hover: var(--color-copper);
  --color-footer-text: var(--color-white);
}

.site-nav {
  position: sticky;
  top: 0.5rem;
  width: min(calc(100% - 1rem), var(--content-inner-width));
  margin: 0.5rem auto 0;
  color: var(--color-nav-link);
  background: var(--color-nav-background);
  background-color: var(--color-nav-background) !important;
  border-color: var(--color-nav-border) !important;
  border-radius: 999px;
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
}

@media (min-width: 768px) {
  .site-nav {
    width: min(
      calc(100% - 2rem),
      calc(var(--content-inner-width) - 2rem)
    );
  }
}

.site-nav > div,
.site-nav #menuItems {
  background: transparent;
  background-color: transparent;
}

@media (max-width: 767px) {
  .site-nav:has(#menuItems.flex) {
    background: var(--color-nav-background-open);
    background-color: var(--color-nav-background-open) !important;
    border-radius: 1.25rem;
  }
}

.site-nav #menuItems > a:not(.site-nav-control),
.site-nav #menuItems > div > button:not(.site-nav-control) {
  color: var(--color-nav-link);
}

.site-nav button[aria-label="Toggle navigation menu"] {
  color: var(--color-nav-link);
}

.site-nav-brand-row {
  padding-top: 0.5rem;
  padding-bottom: 0.7rem;
}

.site-nav-logo {
  height: 42px;
  width: auto;
}

.site-nav-logo--dark {
  display: none;
}

.dark .site-nav-logo--light {
  display: none;
}

.dark .site-nav-logo--dark {
  display: block;
}

@media (max-width: 767px) {
  .site-nav #menuItems {
    align-items: center;
    text-align: center;
  }

  .site-nav #menuItems > a:not(.site-nav-control),
  .site-nav #menuItems > div {
    width: 100%;
  }

  .site-nav-dropdown-trigger {
    justify-content: center;
  }

  .site-nav-submenu-link {
    text-align: center;
  }
}

.site-nav-dropdown-trigger {
  color: var(--color-nav-link);
  border-radius: 0.5rem;
  overflow: hidden;
}

.site-nav-dropdown-link,
.site-nav-dropdown-button {
  color: var(--color-nav-link);
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.site-nav-dropdown-link {
  padding-right: 0.25rem;
}

.site-nav-dropdown-button {
  padding-left: 0.25rem;
  padding-right: 0.75rem;
}

.site-nav-dropdown-panel {
  position: static;
  width: 100%;
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
}

@media (min-width: 768px) {
  .site-nav-dropdown-panel {
    position: absolute;
    right: 0;
  }
}

.site-nav #menuItems > a:not(.site-nav-control):hover,
.site-nav #menuItems > a:not(.site-nav-control):focus,
.site-nav #menuItems > div > button:not(.site-nav-control):hover,
.site-nav #menuItems > div > button:not(.site-nav-control):focus {
  color: var(--color-nav-link-hover);
  background: var(--color-nav-link-hover-background);
}

.site-nav-dropdown-trigger:hover,
.site-nav-dropdown-trigger:focus-within {
  color: var(--color-nav-link-hover);
  background: var(--color-nav-link-hover-background);
}

.site-nav-dropdown-link:hover,
.site-nav-dropdown-link:focus,
.site-nav-dropdown-button:hover,
.site-nav-dropdown-button:focus {
  color: inherit;
  background: transparent;
  box-shadow: none;
}

.site-nav-submenu {
  color: var(--color-nav-submenu-link);
  background: var(--color-nav-submenu-background);
  background-color: var(--color-nav-submenu-background) !important;
  border: 1px solid var(--color-nav-submenu-border);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
}

.site-nav-submenu-link {
  color: var(--color-nav-submenu-link);
}

.site-nav-submenu-link:hover,
.site-nav-submenu-link:focus {
  color: var(--color-nav-link-hover);
  background: var(--color-nav-link-hover-background);
}

.site-nav-submenu-icon {
  color: var(--color-nav-submenu-icon);
  background: var(--color-nav-submenu-icon-background);
}

.site-nav-submenu-link:hover .site-nav-submenu-icon,
.site-nav-submenu-link:focus .site-nav-submenu-icon {
  background: var(--color-nav-submenu-icon-hover-background);
}

.site-nav-control {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 0.5rem;
  min-width: 2.5rem;
  min-height: 2.25rem;
  padding: 0.5rem 0.75rem;
  color: var(--color-nav-control);
  background: transparent;
  border: 0;
  border-radius: 0.5rem;
  box-shadow: none;
  line-height: 1;
}

.site-nav #menuItems > .site-nav-control,
.site-nav #theme-toggle {
  color: var(--color-nav-control);
}

@media (min-width: 768px) {
  .site-nav-control {
    margin-top: 0;
    margin-left: 0.5rem;
  }
}

.site-nav #menuItems > .site-nav-control:hover,
.site-nav #menuItems > .site-nav-control:focus,
.site-nav #theme-toggle:hover,
.site-nav #theme-toggle:focus {
  color: var(--color-nav-control-hover);
  background: var(--color-nav-control-hover-background);
  box-shadow: none;
}

.site-language-button {
  font-size: 0.75rem;
  font-weight: 700;
}

.site-nav-control svg {
  width: 1.25rem;
  height: 1.25rem;
}

.site-footer {
  color: var(--color-footer-text);
  background: var(--color-footer-background);
  background-color: var(--color-footer-background) !important;
}

.site-footer a {
  color: var(--color-footer-link);
}

.site-footer a:hover,
.site-footer a:focus {
  color: var(--color-footer-link-hover);
}

.site-footer-copyright {
  color: var(--color-footer-text);
}