/* CSS-only Liquid Glass for the navigation layer. */
.site-layout {
  background:
    radial-gradient(ellipse 330px 480px at -70px 8%, #cfdeeb, transparent 85%),
    radial-gradient(ellipse 260px 330px at 80px 88%, #e3dfec, transparent 85%),
    #f2f5f8;
  background-attachment: fixed;
}

.site-layout .content-shell { background: #fff; }

.site-layout .sidebar {
  inset: 14px auto 14px 12px;
  width: 196px;
  padding: 30px 18px 24px;
  border: 1px solid rgba(255, 255, 255, .85);
  border-radius: 28px;
  background: #f1f4f8;
  box-shadow:
    inset 0 1px 1px #fff,
    inset 1px 0 0 rgba(255, 255, 255, .72),
    inset -1px -1px 1px rgba(133, 153, 176, .16),
    0 12px 36px rgba(37, 57, 80, .08),
    0 2px 6px rgba(37, 57, 80, .045);
  isolation: isolate;
}

@supports ((backdrop-filter: blur(20px)) or (-webkit-backdrop-filter: blur(20px))) {
  .site-layout .sidebar {
    background: linear-gradient(145deg, rgba(255, 255, 255, .76), rgba(250, 252, 255, .48) 44%, rgba(246, 249, 253, .67));
    -webkit-backdrop-filter: blur(22px) saturate(155%);
    backdrop-filter: blur(22px) saturate(155%);
  }
}

.site-layout .sidebar::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(ellipse 160px 260px at 10% 0%, rgba(255, 255, 255, .58), transparent 90%);
}

.site-layout .site-tagline { font-size: .82rem; color: #58636e; }
.site-layout .site-nav { gap: 8px; }

.site-layout .site-nav a {
  padding: 11px 15px;
  margin-inline: -6px;
  border: 1px solid transparent;
  border-radius: 999px;
  color: #424e59;
  transition: background-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.site-layout .site-nav a:hover,
.site-layout .site-nav a:focus-visible {
  border-color: rgba(255, 255, 255, .75);
  background: rgba(255, 255, 255, .4);
  box-shadow: inset 0 1px 0 #fff, 0 3px 10px rgba(51, 70, 95, .045);
  text-decoration: none;
}

.site-layout .site-nav a[data-active],
.site-layout .site-nav a[aria-current="page"] {
  border-color: rgba(255, 255, 255, .95);
  background: linear-gradient(165deg, rgba(255, 255, 255, .9), rgba(255, 255, 255, .48));
  color: #1953a4;
  font-weight: 600;
  box-shadow: inset 0 1px 1px #fff, inset 0 -1px 1px rgba(118, 145, 173, .1), 0 3px 10px rgba(51, 70, 95, .075);
}

.site-layout .site-nav a:active { transform: scale(.975); }

@media (max-width: 920px) {
  .site-layout .sidebar {
    position: static;
    inset: auto;
    width: auto;
    margin: 12px 16px 0;
    padding: 18px 22px;
    border-radius: 26px;
  }

  .site-layout .content-shell { margin-top: 18px; }
  .site-layout .site-nav { gap: 10px; }
  .site-layout .site-nav a { margin-inline: 0; padding: 9px 17px; }
}

@media (max-width: 540px) {
  .site-layout .sidebar { margin: 10px 12px 0; padding: 16px 18px; border-radius: 24px; }
  .site-layout .site-nav { gap: 8px; }
  .site-layout .sidebar-links { margin-top: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .site-layout .site-nav a { transition: none; }
  .site-layout .site-nav a:active { transform: none; }
}

@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  .site-layout .sidebar {
    border-color: #b4bec8;
    background: #f4f6f8;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .site-layout .sidebar::before { display: none; }
  .site-layout .site-nav a[data-active],
  .site-layout .site-nav a[aria-current="page"] { border-color: #8d9bab; background: #fff; }
}