/* Stationary glass material, shared by the homepage and secondary pages. */
:is(.frosted-studio, .site-shell) .navbar.navbar-glass {
  --ng-tint: rgba(247, 251, 255, .75);
  --ng-edge: rgba(255, 255, 255, .84);
  --ng-shadow: rgba(0, 25, 60, .12);
  --ng-gloss: rgba(255, 255, 255, .42)
}

:is(.frosted-studio, .site-shell).dark-mode .navbar.navbar-glass {
  --ng-tint: rgba(9, 32, 56, .75);
  --ng-edge: rgba(225, 242, 255, .35);
  --ng-shadow: rgba(0, 5, 16, .30);
  --ng-gloss: rgba(224, 244, 255, .11)
}

:is(.frosted-studio, .site-shell) .navbar.navbar-glass>.container {
  position: relative;
  border-radius: 30px;
  isolation: isolate;
  background: transparent;
  border: 1px solid var(--ng-edge);
  box-shadow: 0 10px 28px var(--ng-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(--ng-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(--ng-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) !important;
    -webkit-backdrop-filter: blur(16px) !important
  }

  .dark-mode .navbar-glass>.container:has(.navbar-collapse.show)::before,
  .dark-mode .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
  }

  :is(.frosted-studio, .site-shell) .navbar.navbar-glass>.container {
    background: Canvas;
    border: 1px solid CanvasText;
    box-shadow: none
  }
}

/* Quiet navigation: color changes without moving or duplicating labels. */
.navbar.navbar-glass .nav-link span,
.navbar.navbar-glass .nav-link:is(:hover, :focus, :focus-visible) span {
  transform: none !important;
  transition: none;
}

.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: 500;
  transition: color .18s ease;
}

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