/* Navigation ribbon. Loaded on every page. */

/* ---------- Navigation ribbon ---------- */

.navbar.navbar-glass>.container {
  position: relative;
  border-radius: 30px;
  isolation: isolate;
  background: transparent;
  border: 1px solid var(--glass-edge);
  box-shadow: 0 10px 28px var(--glass-shadow), inset 0 1px 1px #ffffff65, inset 0 -1px 1px #ffffff18;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.navbar-glass>.container::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  border-radius: inherit;
  background: var(--glass-tint);
  backdrop-filter: blur(3px) saturate(150%);
  -webkit-backdrop-filter: blur(3px) saturate(150%);
}

.navbar-glass>.container::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(135deg, var(--glass-gloss), transparent 21%, transparent 76%, #ffffff12);
  box-shadow: inset 1px -1px 1px -1px #ffffffa0, inset -1px 1px 1px -1px #ffffffc0;
  z-index: 2;
}

.navbar-glass.ng-optical>.container::before {
  backdrop-filter: url("#navbar-glass-refraction") blur(1px);
  -webkit-backdrop-filter: url("#navbar-glass-refraction") blur(1px);
}

@media (max-width: 575px) {
  .navbar-glass>.container:has(.navbar-collapse.show)::before,
  .navbar-glass>.container:has(.navbar-collapse.collapsing)::before {
    background: rgba(245, 249, 254, .97);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
  }

  [data-theme="dark"] .navbar-glass>.container:has(.navbar-collapse.show)::before,
  [data-theme="dark"] .navbar-glass>.container:has(.navbar-collapse.collapsing)::before {
    background: rgba(9, 30, 53, .97);
  }
}

@media (prefers-reduced-transparency: reduce) {
  .navbar-glass>.container::before {
    background: var(--panel-bg) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  .navbar-glass>.container::after {
    display: none;
  }
}

@supports not (backdrop-filter:blur(1px)) {
  .navbar-glass>.container::before {
    background: var(--panel-bg);
  }
}

@media (forced-colors: active) {
  .navbar-glass>.container::before,
  .navbar-glass>.container::after {
    display: none;
  }

  .navbar.navbar-glass>.container {
    background: Canvas;
    border: 1px solid CanvasText;
    box-shadow: none;
  }
}

.navbar.navbar-glass .nav-link span,
.navbar.navbar-glass .nav-link:is(:hover, :focus, :focus-visible) span {
  transform: none;
  transition: none;
  font-weight: 520;
}

.navbar.navbar-glass .nav-link span::before {
  content: none;
  display: none;
}

.navbar.navbar-glass .navbar-nav .nav-link,
.navbar.navbar-glass .navbar-nav .nav-link:is(:hover, :focus, :focus-visible) {
  font-weight: 520;
  transition: color .2s ease-in-out;
}

.navbar.navbar-glass .navbar-nav .nav-link:is(:hover, :focus-visible) {
  color: var(--nav-hover-color, var(--brand-red));
}

.navbar.navbar-glass .navbar-nav .nav-link.nav-touching-grass {
  color: var(--page-text);
}

[data-theme="dark"] .navbar.navbar-glass .navbar-nav .nav-link.nav-touching-grass {
  color: var(--page-text);
}

.navbar.navbar-glass .navbar-nav .nav-link.nav-touching-grass:is(:hover, :focus-visible) {
  color: #224f34;
}

[data-theme="dark"] .navbar.navbar-glass .navbar-nav .nav-link.nav-touching-grass:is(:hover, :focus-visible) {
  color: #73bb84;
}

.navbar.navbar-glass .nav-touching-grass .nav-leaf {
  display: inline-block;
  vertical-align: -2px;
  margin-right: 7px;
  color: #356b46;
}

[data-theme="dark"] .navbar.navbar-glass {
  --nav-hover-color: var(--red-bright);
}

[data-theme="dark"] .navbar.navbar-glass .nav-touching-grass .nav-leaf {
  color: #a4d4ac;
}

@media (max-width: 575px) {
  body .navbar.navbar-glass .navbar-collapse {
    padding-bottom: 0;
  }

  body .navbar.navbar-glass > .container:has(.navbar-collapse.show),
  body .navbar.navbar-glass > .container:has(.navbar-collapse.collapsing) {
    padding-bottom: 6px;
  }

  body .navbar.navbar-glass .navbar-collapse > .navbar-nav:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
  }

  body .navbar.navbar-glass .navbar-collapse .color-mode {
    margin-bottom: 0;
  }
}

/* Colour-mode toggle at the end of the bar. It is a list item, but not text:
   keep it out of the li typography defaults in base.css. */
.nav-tools-item {
  font: inherit;
  color: inherit;
}

/* At the end of the bar on desktop */
@media (min-width: 992px) {
  .nav-tools {
    margin-left: auto;
  }

  .nav-tools-item {
    margin-left: 1.5rem;
  }
}