/* Portable Liquid Navigation. Original glass/motion inspiration: @coding.stella.
   Site placement and the optional Cult UI skin live in site-navigation.css. */
.pd-liquid-nav {
  --liquid-nav-font-size: 14px;
  --liquid-nav-icon-size: 20px;
  --liquid-nav-compact-icon-size: 28px;
  --liquid-nav-item-height: 52px;
  --liquid-nav-item-padding: 16px;
  --liquid-nav-content-gap: 8px;
  --liquid-nav-gap: 4px;
  --liquid-nav-padding: 6px;
  --liquid-nav-duration: 620ms;
  --liquid-nav-ease: cubic-bezier(.22, 1, .36, 1);
  --liquid-glass-frost: 10px;
  --liquid-glass-edge-blur: 10px;
  --liquid-glass-edge-spread: -5px;
  --liquid-glass-edge-color: rgb(255 255 255 / 0%); /* --liquid-glass-edge-color: rgba(255, 255, 255, .44); */
  position: relative;
  display: flex;
  align-items: center;
  justify-self: center;
  box-sizing: border-box;
  width: max-content;
  max-width: 100%;
  padding: var(--liquid-nav-padding);
  border-radius: 99px;
  background: transparent;
  box-shadow: 0 6px 24px rgba(0, 0, 0, .2);
  isolation: isolate;
}
.pd-liquid-nav *, .pd-liquid-nav *::before, .pd-liquid-nav *::after { box-sizing: border-box; }
.pd-liquid-nav::before, .pd-liquid-nav::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: transparent;
  pointer-events: none;
}
.pd-liquid-nav::before {
  box-shadow: inset 0 0 var(--liquid-glass-edge-blur) var(--liquid-glass-edge-spread) var(--liquid-glass-edge-color);
  z-index: 0;
}
.pd-liquid-nav::after {
  -webkit-backdrop-filter: blur(var(--liquid-glass-frost));
  backdrop-filter: blur(var(--liquid-glass-frost));
  filter: var(--liquid-glass-filter, none);
  z-index: -1;
}
.pd-liquid-nav__filters { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; }
.pd-liquid-nav__glare-wrap { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; pointer-events: none; z-index: 5; }
.pd-liquid-nav__glare {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .3s ease;
  background: radial-gradient(circle 90px at var(--x, 50%) var(--y, 50%), rgba(255, 255, 255, .15), transparent);
  mix-blend-mode: overlay;
}
.pd-liquid-nav__items { position: relative; display: flex; width: 100%; min-width: 0; z-index: 3; }
.pd-liquid-nav[data-nav-anchored] .pd-liquid-nav__items {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: var(--liquid-nav-gap);
}
.pd-liquid-nav__side {
  display: flex;
  align-items: center;
  gap: var(--liquid-nav-gap);
  min-width: 0;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.pd-liquid-nav__side::-webkit-scrollbar { display: none; }
.pd-liquid-nav__side[data-nav-side="start"] { justify-content: safe flex-end; }
.pd-liquid-nav__pill {
  position: absolute;
  left: 0;
  top: 0;
  height: var(--liquid-nav-item-height);
  width: 0;
      border: 1px solid rgb(255 255 255 / 12%);
  border-radius: 99px;
  background: linear-gradient(135deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .008));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .025), 0 0 14px rgba(255, 255, 255, .035);
  pointer-events: none;
  opacity: 0;
  z-index: 1;
  transition: opacity 220ms ease;
}
.pd-liquid-nav[data-nav-reveal] .pd-liquid-nav__pill { transition-delay: 340ms; }
.pd-liquid-nav .pd-liquid-nav__link {
  position: relative;
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: var(--liquid-item-width, var(--liquid-nav-item-height));
  min-width: 44px;
  max-width: 100%;
  height: var(--liquid-nav-item-height);
  padding: 0;
  border: 0;
  border-radius: 99px;
  background: transparent;
  font-family: inherit;
  font-size: var(--liquid-nav-font-size);
  font-weight: 600;
  color: #b5b7be;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  z-index: 2;
}
.pd-liquid-nav[data-liquid-ready],
.pd-liquid-nav[data-liquid-ready] .pd-liquid-nav__link {
  transition: width var(--liquid-nav-duration) var(--liquid-nav-ease), color 250ms ease;
}
.pd-liquid-nav .pd-liquid-nav__link:is([aria-current], [data-nav-preview], :hover, :focus-visible) { color: #fff; }
.pd-liquid-nav .pd-liquid-nav__link:focus-visible { outline: 2px solid #e1e4ea; outline-offset: -3px; }
.pd-liquid-nav__content {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  width: 100%;
  max-width: 100%;
  padding-inline: var(--liquid-nav-item-padding);
  line-height: 1.2;
  white-space: nowrap;
  text-shadow: 0 1px 4px rgba(0, 0, 0, .5);
  pointer-events: none;
}
.pd-liquid-nav .pd-liquid-nav__icon {
  flex: 0 0 var(--liquid-nav-icon-size);
  width: var(--liquid-nav-icon-size);
  height: var(--liquid-nav-icon-size);
  transform: scale(calc(var(--liquid-nav-compact-icon-size) / var(--liquid-nav-icon-size)));
  transition: transform var(--liquid-nav-duration) var(--liquid-nav-ease);
}
.pd-liquid-nav__label {
  display: block;
  min-width: 0;
  max-width: 0;
  margin-left: 0;
  overflow: hidden;
  opacity: 0;
  filter: blur(5px);
  clip-path: inset(-6px 100% -6px -6px);
  transform: translateX(-7px);
  transition: max-width var(--liquid-nav-duration) var(--liquid-nav-ease),
    margin-left var(--liquid-nav-duration) var(--liquid-nav-ease),
    opacity 170ms ease, filter 220ms ease, clip-path 220ms ease, transform 220ms ease;
}
.pd-liquid-nav__text { display: block; overflow: hidden; text-overflow: ellipsis; }
.pd-liquid-nav [data-nav-expanded] .pd-liquid-nav__label,
.pd-liquid-nav:not([data-liquid-ready]) [data-nav-mobile-mode="wide"] .pd-liquid-nav__label {
  max-width: var(--liquid-label-width, 240px);
  margin-left: var(--liquid-nav-content-gap);
  opacity: 1;
  filter: blur(0);
  clip-path: inset(-6px -6px -6px -6px);
  transform: translateX(0);
  transition: max-width var(--liquid-nav-duration) var(--liquid-nav-ease),
    margin-left var(--liquid-nav-duration) var(--liquid-nav-ease),
    opacity 360ms ease 100ms, filter 420ms ease 80ms,
    clip-path 440ms var(--liquid-nav-ease) 80ms, transform 420ms var(--liquid-nav-ease) 80ms;
}
.pd-liquid-nav [data-nav-expanded] .pd-liquid-nav__icon,
.pd-liquid-nav:not([data-liquid-ready]) [data-nav-mobile-mode="wide"] .pd-liquid-nav__icon { transform: scale(1); }
.pd-liquid-nav:not([data-liquid-ready]) [data-nav-mobile-mode="wide"] { width: auto; padding-inline: var(--liquid-nav-item-padding); }
.pd-liquid-nav:not([data-liquid-ready]) [aria-current] { outline: 1px solid rgba(255, 255, 255, .57); outline-offset: -1px; }
.pd-liquid-nav [data-nav-fixed] .pd-liquid-nav__content,
.pd-liquid-nav [data-nav-fixed] .pd-liquid-nav__icon,
.pd-liquid-nav [data-nav-fixed] .pd-liquid-nav__label { transition: none; }
.pd-liquid-nav[data-nav-instant], .pd-liquid-nav[data-nav-instant] * { transition: none !important; }
@media (hover: hover) and (pointer: fine) { .pd-liquid-nav:hover .pd-liquid-nav__glare { opacity: 1; } }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .pd-liquid-nav::after { filter: none; } }
@media (prefers-reduced-motion: reduce) {
  .pd-liquid-nav, .pd-liquid-nav * { transition: none !important; scroll-behavior: auto !important; }
}