:root, :root:where(.editor-styles-wrapper) {
  --vsb-navigation-focus-outline-width: .1875rem;
  --vsb-navigation-focus-outline-offset: .1875rem;
  --vsb-navigation-chevron-size: .5rem;
  --vsb-navigation-chevron-stroke: .125rem;
  --vsb-navigation-chevron-offset: -.125rem;
  --vsb-navigation-badge-padding-block: .125rem;
  --vsb-navigation-badge-padding-inline: .375rem;
  --vsb-navigation-badge-radius: 999px;
  --vsb-navigation-badge-font-size: .75em;
  --vsb-navigation-enter-duration: 180ms;
  --vsb-navigation-enter-easing: ease-out;
  --vsb-navigation-enter-offset: -.625rem;
  --vsb-navigation-item-enter-offset: -.375rem;
  --vsb-navigation-item-stagger: 35ms;
  --vsb-navigation-takeover-z-index: 999;
  --vsb-navigation-toggle-z-index: 1000;
  --vsb-navigation-toggle-min-size: 2.75rem;
  --vsb-navigation-takeover-padding: clamp(4.5rem, 10vw, 7rem) clamp(1rem, 5vw, 4rem) 2rem;
  --vsb-navigation-panel-surface: Canvas;
  --vsb-navigation-submenu-z-index: 20;
  --vsb-navigation-submenu-min-inline-size: 15rem;
  --vsb-navigation-panel-padding: 1.5rem;
  --vsb-navigation-nested-list-padding-inline-start: 1rem;
  --vsb-navigation-mega-rail-min-inline-size: 12rem;
}

.wp-block-vsb-navigation,
.v-navigation {
  position: relative;
}

.v-navigation__mobile-toggle:focus-visible,
.v-navigation__submenu-toggle:focus-visible,
.v-navigation__link:focus-visible {
  outline: var(--vsb-navigation-focus-outline-width) solid currentColor;
  outline-offset: var(--vsb-navigation-focus-outline-offset);
}

.v-navigation__chevron::before {
  display: block;
  width: var(--vsb-navigation-chevron-size);
  height: var(--vsb-navigation-chevron-size);
  border-right: var(--vsb-navigation-chevron-stroke) solid currentColor;
  border-bottom: var(--vsb-navigation-chevron-stroke) solid currentColor;
  content: "";
  transform: rotate(45deg) translateY(var(--vsb-navigation-chevron-offset));
}

.v-navigation__badge {
  display: inline-flex;
  padding: var(--vsb-navigation-badge-padding-block) var(--vsb-navigation-badge-padding-inline);
  border-radius: var(--vsb-navigation-badge-radius);
  font-size: var(--vsb-navigation-badge-font-size);
}

/* Content is visible when enhancement fails. Enhanced disclosures opt into hiding. */
.v-navigation:not([data-enhanced]) .v-navigation__mobile-toggle,
.v-navigation:not([data-enhanced]) .v-navigation__submenu-toggle {
  display: none;
}

.v-navigation[data-enhanced] .v-navigation__panel,
.v-navigation[data-enhanced] .v-navigation__submenu {
  display: none;
}

.v-navigation[data-enhanced][data-mobile-open]>.v-navigation__panel,
.v-navigation[data-enhanced] [data-submenu-open]>.v-navigation__submenu {
  display: var(--vsb-navigation-enter-display, block);
  animation: vsb-navigation-enter var(--vsb-navigation-enter-duration) var(--vsb-navigation-enter-easing) both;
}

.v-navigation[data-enhanced] [data-submenu-open]>.v-navigation__link-wrap .v-navigation__chevron::before {
  transform: rotate(225deg) translate(var(--vsb-navigation-chevron-offset), var(--vsb-navigation-chevron-offset));
}

@keyframes vsb-navigation-enter {
  from {
    opacity: 0;
    transform:
      translateX(var(--vsb-navigation-left-offset, 0))
      translateY(var(--vsb-navigation-enter-offset));
  }

  to {
    opacity: 1;
    transform:
      translateX(var(--vsb-navigation-left-offset, 0))
      translateY(0);
  }
}

@keyframes vsb-navigation-item-enter {
  from {
    opacity: 0;
    transform: translateY(var(--vsb-navigation-item-enter-offset));
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}


.v-navigation[data-mobile-open]>.v-navigation__panel>.v-navigation__list>[data-navigation-item],
.v-navigation [data-submenu-open]>.v-navigation__submenu>[data-navigation-item] {
  animation: vsb-navigation-item-enter var(--vsb-navigation-enter-duration) var(--vsb-navigation-enter-easing) both;
  animation-delay: calc(var(--vsb-navigation-stagger-index, 0) * var(--vsb-navigation-item-stagger));
}

@media (max-width: 61.999rem) {
  .v-navigation[data-enhanced][data-navigation-interaction="takeover"][data-mobile-open]>.v-navigation__panel {
    position: fixed;
    z-index: var(--vsb-navigation-takeover-z-index);
    inset: var(--vsb-navigation-panel-inset,
        var(--vsb-navigation-panel-top, 0)
        var(--vsb-navigation-panel-right, 0)
        var(--vsb-navigation-panel-bottom, 0)
        var(--vsb-navigation-panel-left, 0)
    );
    height: 100vh;
    height: var(--vsb-navigation-panel-height, 100dvh);
    padding: var(--vsb-navigation-takeover-padding);
    overflow: auto;
    overscroll-behavior: contain;
    background: var(--vsb-navigation-panel-surface);
  }

  .v-navigation[data-navigation-interaction="takeover"]>.v-navigation__mobile-toggle {
    position: relative;
    z-index: var(--vsb-navigation-toggle-z-index);
    min-width: var(--vsb-navigation-toggle-min-size);
    min-height: var(--vsb-navigation-toggle-min-size);
  }

  body.vsb-navigation-takeover-open {
    overflow: hidden;
  }
}

@media (min-width: 62rem) {
  .v-navigation__mobile-toggle {
    display: none;
  }

  .v-navigation[data-enhanced]>.v-navigation__panel {
    display: var(--vsb-navigation-enter-display, block);
  }

  .v-navigation__item[data-depth="0"] {
      position: relative;

      &:after {
        content: "";
        width: 100%;
        height: var(--vsb-navigation-submenu-offset-top);
        position: absolute;
        top: 100%;
        left: 50%;
        transform: translate(-50%, 0);
      }
  }

  .v-navigation__list[data-navigation-level="0"] {
    flex-direction: row;
    align-items: center;
  }

  .v-navigation__submenu {
    position: absolute;
    z-index: var(--vsb-navigation-submenu-z-index);
    top: calc(100% + var(--vsb-navigation-submenu-offset-top, 0));
    left: calc(0 + var(--vsb-navigation-submenu-left, 0));
    min-width: var(--vsb-navigation-submenu-min-inline-size);
  }

  /* CID-style conventional recursion: every submenu below the first flies right. */
  .v-navigation__submenu[data-navigation-level]:not([data-navigation-level="1"]) {
    inset-block-start: 0;
    inset-inline-start: 100%;
  }

  .v-navigation [data-navigation-flip-inline]>.v-navigation__submenu[data-navigation-level="1"] {
    inset-inline-start: auto;
    inset-inline-end: 0;
  }

  .v-navigation [data-navigation-flip-inline]>.v-navigation__submenu[data-navigation-level]:not([data-navigation-level="1"]) {
    inset-inline-start: auto;
    inset-inline-end: 100%;
  }

  .v-navigation[data-enhanced] .v-navigation__item:hover>.v-navigation__submenu,
  .v-navigation[data-enhanced] .v-navigation__item:focus-within>.v-navigation__submenu {
    display: var(--vsb-navigation-enter-display, block);
    animation: vsb-navigation-enter var(--vsb-navigation-enter-duration) var(--vsb-navigation-enter-easing) both;
  }

  /* Wide rich panels align to the viewport-centred project container instead of
     inheriting the depth-0 trigger's inline position. JavaScript supplies the
     block coordinate as the broad-browser fallback for CSS anchors. */
  .v-navigation[data-enhanced] [data-depth="0"]:is([data-branch-layout="columns"], [data-branch-layout="mega-rail"])>.v-navigation__submenu {
    position: fixed;
    inset-block-start: var(--vsb-navigation-panel-block-start, 0);
    inset-inline: max(var(--vsb-navigation-container-gutter, 1rem), calc((100dvi - var(--vsb-navigation-container-max, 80rem)) / 2));
    inline-size: auto;
    max-inline-size: none;
  }

  .v-navigation:not([data-enhanced]) [data-depth="0"]:is([data-branch-layout="columns"], [data-branch-layout="mega-rail"])>.v-navigation__submenu {
    inset-inline-start: auto;
    inset-inline-end: 0;
  }

  /* Puragen outcome: CSS Grid owns the twelve-column panel. Once inside it,
     descendants are static content hierarchy rather than nested flyouts. */
  .v-navigation [data-depth="0"][data-branch-layout="columns"]>.v-navigation__submenu {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    padding: var(--vsb-navigation-panel-padding);
  }

  .v-navigation [data-depth="0"][data-branch-layout="columns"]:hover>.v-navigation__submenu,
  .v-navigation [data-depth="0"][data-branch-layout="columns"]:focus-within>.v-navigation__submenu,
  .v-navigation [data-depth="0"][data-branch-layout="columns"][data-submenu-open]>.v-navigation__submenu {
    display: grid;
  }

  .v-navigation [data-navigation-level="1"][data-branch-layout="columns"]>[data-navigation-item] {
    grid-column: span var(--vsb-navigation-column-span, 4);
  }

  .v-navigation .v-navigation__submenu[data-branch-layout="columns"]:not([data-navigation-level="1"]) {
    position: static;
    display: flex !important;
    min-width: 0;
    padding-inline-start: var(--vsb-navigation-nested-list-padding-inline-start);
    border: 0;
    box-shadow: none;
    animation: none !important;
    transform: none;
  }

  .v-navigation [data-navigation-level="1"][data-branch-layout="columns"] .v-navigation__submenu-toggle {
    display: none;
  }

  /* BlueCat outcome: a left rail controls rich grouped content on the right. */
  .v-navigation [data-depth="0"][data-branch-layout="mega-rail"]>.v-navigation__submenu {
    grid-template-columns: minmax(var(--vsb-navigation-mega-rail-min-inline-size), 1fr) minmax(0, 3fr);
    padding: var(--vsb-navigation-panel-padding);
  }

  .v-navigation [data-depth="0"][data-branch-layout="mega-rail"][data-submenu-open]>.v-navigation__submenu,
  .v-navigation [data-depth="0"][data-branch-layout="mega-rail"]:hover>.v-navigation__submenu,
  .v-navigation [data-depth="0"][data-branch-layout="mega-rail"]:focus-within>.v-navigation__submenu {
    display: grid;
  }

  .v-navigation [data-navigation-level="1"][data-branch-layout="mega-rail"]>[data-navigation-item] {
    grid-column: 1;
  }

  .v-navigation [data-navigation-level="1"][data-branch-layout="mega-rail"]>[data-navigation-item]>[data-navigation-level="2"] {
    position: absolute;
    inset-block: 0;
    inset-inline-start: max(var(--vsb-navigation-mega-rail-min-inline-size), 25%);
    inset-inline-end: 0;
    display: none;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    width: auto;
    min-width: 0;
    padding: var(--vsb-navigation-panel-padding);
  }

  .v-navigation:not([data-enhanced]) [data-navigation-level="1"][data-branch-layout="mega-rail"]>[data-navigation-item]:first-child>[data-navigation-level="2"],
  .v-navigation[data-enhanced] [data-navigation-level="1"][data-branch-layout="mega-rail"]>[data-navigation-active]>[data-navigation-level="2"],
  .v-navigation [data-navigation-level="1"][data-branch-layout="mega-rail"]>[data-navigation-item]:hover>[data-navigation-level="2"],
  .v-navigation [data-navigation-level="1"][data-branch-layout="mega-rail"]>[data-navigation-item]:focus-within>[data-navigation-level="2"],
  .v-navigation [data-navigation-level="1"][data-branch-layout="mega-rail"]>[data-submenu-open]>[data-navigation-level="2"] {
    display: grid;
    animation: none;
    transform: none;
  }

  .v-navigation [data-navigation-level="2"][data-branch-layout="mega-rail"]>[data-navigation-item] {
    grid-column: span var(--vsb-navigation-column-span, 4);
  }

  .v-navigation .v-navigation__submenu[data-branch-layout="mega-rail"]:not([data-navigation-level="1"]):not([data-navigation-level="2"]) {
    position: static;
    display: flex !important;
    min-width: 0;
    padding-inline-start: var(--vsb-navigation-nested-list-padding-inline-start);
    border: 0;
    box-shadow: none;
    animation: none !important;
    transform: none;
  }

  .v-navigation [data-navigation-level="2"][data-branch-layout="mega-rail"] .v-navigation__submenu-toggle {
    display: none;
  }

  .v-navigation[data-enhanced] .v-navigation__item:hover>.v-navigation__submenu>[data-navigation-item],
  .v-navigation[data-enhanced] .v-navigation__item:focus-within>.v-navigation__submenu>[data-navigation-item] {
    animation: vsb-navigation-item-enter var(--vsb-navigation-enter-duration) var(--vsb-navigation-enter-easing) both;
    animation-delay: calc(var(--vsb-navigation-stagger-index, 0) * var(--vsb-navigation-item-stagger));
  }
}

/* CSS Anchor Positioning progressively replaces the geometry fallback. Repeated
   anchor names are scoped to each item so nested simple flyouts can flip at the
   viewport edge without sharing an anchor with their siblings. */
@supports (anchor-name: --vsb-navigation-trigger) and (position-try-fallbacks: flip-inline) {
  @media (min-width: 62rem) {
    .v-navigation [data-navigation-item] {
      anchor-name: --vsb-navigation-trigger;
      anchor-scope: --vsb-navigation-trigger;
    }

    .v-navigation [data-branch-layout="simple"]>.v-navigation__submenu {
      position-anchor: --vsb-navigation-trigger;
      inset:
        calc( 100% + var(--vsb-navigation-submenu-offset-top, 0)) auto auto var(--vsb-navigation-submenu-left, auto);
      position-area: block-end span-inline-end;
      position-try-fallbacks: flip-inline;
    }

    .v-navigation [data-branch-layout="simple"]>.v-navigation__submenu[data-navigation-level]:not([data-navigation-level="1"]) {
      position-area: inline-end span-block-end;
    }

    .v-navigation[data-enhanced] [data-depth="0"]:is([data-branch-layout="columns"], [data-branch-layout="mega-rail"])>.v-navigation__submenu {
      position-anchor: --vsb-navigation-trigger;
      inset-block-start: anchor(bottom);
    }
  }
}

@media (prefers-reduced-motion: reduce) {

  .v-navigation[data-enhanced][data-mobile-open]>.v-navigation__panel,
  .v-navigation[data-enhanced] [data-submenu-open]>.v-navigation__submenu,
  .v-navigation[data-enhanced] .v-navigation__item:hover>.v-navigation__submenu,
  .v-navigation[data-enhanced] .v-navigation__item:focus-within>.v-navigation__submenu,
  .v-navigation[data-mobile-open]>.v-navigation__panel>.v-navigation__list>[data-navigation-item],
  .v-navigation [data-submenu-open]>.v-navigation__submenu>[data-navigation-item],
  .v-navigation[data-enhanced] .v-navigation__item:hover>.v-navigation__submenu>[data-navigation-item],
  .v-navigation[data-enhanced] .v-navigation__item:focus-within>.v-navigation__submenu>[data-navigation-item] {
    animation: none;
    animation-delay: 0ms;
    transform: none;
  }

  .v-navigation__chevron::before {
    transition: none;
  }
}

/* A child may opt out of responsive disclosure entirely. Keep every level in
   normal flow after the desktop positioning rules above, so the menu remains a
   readable list even when the Navigation script is present. */
.v-navigation[data-navigation-interaction="static"]>.v-navigation__panel,
.v-navigation[data-navigation-interaction="static"] .v-navigation__submenu {
  display: block !important;
  position: static !important;
  min-inline-size: 0;
  max-block-size: none;
  overflow: visible;
  padding-inline-start: var(--vsb-navigation-nested-list-padding-inline-start);
  border: 0;
  box-shadow: none;
  animation: none !important;
  transform: none !important;
}

.v-navigation[data-navigation-interaction="static"]>.v-navigation__panel {
  padding-inline-start: 0;
}