/* ==========================================================================
   Enhanced Navbar - vanilla CSS (framework-agnostic, themeable via custom props)
   SEO & WCAG 2.1 AA oriented. No dependencies.
   Pattern: ARIA APG "Disclosure Navigation Menu".

   THEMING: every font, size and color is a CSS custom property defined in the
   `.en-navbar` token block below. Override any of them in your own stylesheet
   on `.en-navbar` (or a wrapper element) to restyle the whole component.
   ========================================================================== */

.en-navbar {
  /* ==========================================================================
     DESIGN TOKENS — grouped by concern, each with a short description.
     ========================================================================== */

  /* ---- Fonts ------------------------------------------------------------ */
  --en-font-family:
    "Brockmann", sans-serif; /* Font family used across the whole navbar */
  --en-font-size: inherit; /* Base font size (inherits from the page by default) */
  --en-font-weight: 700; /* Default link / text weight */
  --en-font-weight-current: 600; /* Weight of the current-page link */
  --en-font-weight-promoted: 700; /* Weight of promoted ("featured") links */
  --en-line-height: 1.2; /* Line height of links */

  /* ---- Colors ----------------------------------------------------------- */
  --en-bg: rgba(255, 255, 255, 0); /* Navbar bar background */
  --en-fg: rgba(0, 0, 0); /* Default text / link color */
  --en-fg-muted: #52606d; /* Muted text: disclosure caret, icons */
  --en-accent: #c20244; /* Accent: hover / current / active-parent link color (AA on light backgrounds) */
  --en-accent-strong: #8f0030; /* Strong accent: submenu link hover, markers, dividers */
  --en-hover-bg: rgba(255, 255, 255, 0); /* Link hover background */
  --en-current-bg: rgba(255, 255, 255, 0); /* Current-page link background */
  --en-border: #e4e7eb; /* Border color (hamburger, dropdown outline) */
  --en-border-width: 1px; /* Border thickness */
  --en-submenu-bg: rgba(212, 210, 194, 1); /* Dropdown panel background */
  --en-submenu-fg: var(--en-fg); /* Dropdown link text color */
  --en-mobile-menu-bg: #ffffff; /* Full-screen mobile menu background */
  --en-underline-color: #000; /* Underline color of active-parent labels */
  --en-divider-color: var(--en-accent-strong); /* Vertical divider color */
  --en-marker-color: var(
    --en-accent-strong
  ); /* Submenu arrow marker color (hover) */
  --en-marker-color-current: var(
    --en-fg
  ); /* Submenu arrow marker color (current page) */

  /* ---- Sizes: bar & links ---------------------------------------------- */
  --en-navbar-padding: 0.825rem 1rem; /* Padding around the whole bar */
  --en-gap: 0.5rem; /* Horizontal gap between top-level items */
  --en-link-min-height: 44px; /* Link touch-target height (WCAG 2.5.5) */
  --en-link-gap: 0.4rem; /* Gap between icon and label inside links */
  --en-disclosure-gap: 0.5rem; /* Space between disclosure button and link */

  /* ---- Sizes: hamburger & close (mobile) -------------------------------- */
  --en-toggle-min-height: 44px; /* Hamburger touch-target height (WCAG 2.5.5) */
  --en-toggle-padding: 0.55rem 0.75rem; /* Hamburger padding */
  --en-toggle-gap: 0.5rem; /* Gap between hamburger icon and its label */
  --en-toggle-icon-size: 1.25rem; /* Hamburger icon width */
  --en-toggle-icon-height: 2px; /* Hamburger line thickness */
  --en-toggle-icon-gap: 6px; /* Vertical space between hamburger lines */
  --en-toggle-icon-radius: 2px; /* Hamburger line corner radius */
  --en-close-size: 2.75rem; /* Mobile close button size (touch target) */
  --en-close-offset: 0.75rem; /* Close button / logo offset from the screen edge */
  --en-close-icon-size: 1.5rem; /* Close icon (X) size */
  --en-close-icon-width: 2px; /* Close icon (X) line thickness */
  --en-close-icon-radius: 1px; /* Close icon (X) line corner radius */
  --en-mobile-logo-height: 50px; /* Max height of the logo in the mobile close header */

  /* ---- Sizes: disclosure caret & submenu markers ------------------------ */
  --en-caret-size: 0.75rem; /* Disclosure caret chevron size */
  --en-caret-width: 2px; /* Disclosure caret chevron thickness */
  --en-disclosure-min-size: 44px; /* Disclosure caret touch target (WCAG 2.5.5) */
  --en-caret-transition: 300ms; /* Caret rotation speed (intentionally slower than --en-transition) */
  --en-marker-size: 0.8rem; /* Submenu arrow marker size */
  --en-marker-width: 2px; /* Submenu arrow marker thickness */
  --en-marker-offset-x: -1.25rem; /* Submenu arrow marker left offset */

  /* ---- Sizes: surfaces -------------------------------------------------- */
  --en-radius: 0; /* Border radius for links, buttons, panels */
  --en-radius-small: calc(
    var(--en-radius) - 2px
  ); /* Radius for dropdown links */
  --en-submenu-min: 20rem; /* Minimum dropdown panel width */
  --en-submenu-indent: 2rem; /* Dropdown left indent (room for markers) */
  --en-submenu-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.25); /* Dropdown shadow */

  /* ---- Sizes: mobile panel & close header ------------------------------- */
  --en-mobile-panel-pad-top: 4.25rem; /* Panel top padding (room for close button) */
  --en-mobile-panel-pad-x: 1rem; /* Panel side padding */
  --en-mobile-panel-pad-bottom: 1.5rem; /* Panel bottom padding (+ safe-area inset) */

  /* ---- Sizes: underline & dividers -------------------------------------- */
  --en-underline-height: 2px; /* Current / hover label underline thickness */
  --en-underline-transition: transform 0.3s ease; /* Underline slide-in animation */
  --en-divider-width: 2px; /* Vertical divider thickness */
  --en-divider-inset: 0.35rem; /* Vertical divider inset from top/bottom */
  --en-divider-height: 1.2em; /* Vertical divider height */

  /* ---- Focus (WCAG 2.4.7) ----------------------------------------------- */
  --en-focus-ring: 0 0 0 3px rgba(37, 99, 235, 0.45); /* Visible focus ring (box-shadow) */
  --en-focus-outline: 2px solid transparent; /* Focus outline style */
  --en-focus-offset: 2px; /* Focus outline offset */

  /* ---- High-contrast overrides (prefers-contrast: more) ----------------- */
  --en-contrast-border: #000; /* Border color in high-contrast mode */
  --en-contrast-fg: #000; /* Text color in high-contrast mode */
  --en-contrast-accent: #0b3d91; /* Accent color in high-contrast mode */

  /* ---- Motion & layering ------------------------------------------------ */
  --en-transition: 160ms ease; /* Default transition for hover states */
  --en-submenu-duration: 200ms; /* Dropdown reveal/close duration */
  --en-submenu-easing: cubic-bezier(
    0.2,
    0.7,
    0.3,
    1
  ); /* Dropdown reveal/close easing */
  --en-z-submenu: 200001; /* Dropdown panels (above almost everything) */
  --en-z-mobile-menu: 1000; /* Full-screen mobile menu panel */
  --en-z-close: 1001; /* Mobile close button */
  --en-z-mobile-logo: 1002; /* Logo in the mobile close header */

  position: relative;
  font-family: var(--en-font-family);
  font-size: var(--en-font-size);
  color: var(--en-fg);
  background: var(--en-bg);
  padding: var(--en-navbar-padding);
}
.en-navbar *,
.en-navbar *::before,
.en-navbar *::after {
  box-sizing: border-box;
  font-family: var(--en-font-family);
  font-weight: var(--en-font-weight);
}

/* Cross-browser / iOS interactive resets: remove tap highlight + 300ms delay,
   normalize button rendering, and prevent text-size auto-inflation on iOS. */
.en-navbar :where(a, button) {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

.en-navbar :where(button) {
  -webkit-appearance: none;
  appearance: none;
  font: inherit;
}

/* ---- Lists -------------------------------------------------------------- */
.en-menu,
.en-submenu {
  list-style: none;
  margin: 0;
  padding: 0;
}

.en-item {
  position: relative;
  margin: 0;
}

.en-item.has-children {
  display: flex;
  flex-direction: row;
  align-items: center;
}

/* ---- Links -------------------------------------------------------------- */
.en-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--en-link-gap);
  min-height: var(
    --en-link-min-height
  ); /* WCAG 2.5.5 / iOS HIG minimum touch target */
  color: var(--en-fg);
  text-decoration: none;
  line-height: var(--en-line-height);
  transition:
    color var(--en-transition),
    background-color var(--en-transition);
}
.en-label {
  display: inline-block;
}
/* Underline indicator for current / hover labels (color follows the link). */
.en-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: var(--en-underline-height);
  background: currentColor;
  width: 100%;
  transform: scaleX(0);
  transform-origin: left;
  transition: var(--en-underline-transition);
}

.en-link:hover,
.en-link:focus-visible {
  background: var(--en-hover-bg);
  color: var(--en-accent);
}

.en-link.is-current::after,
.en-link:hover::after {
  transform: scaleX(1);
}
.spored {
  display: none;
}
/* ==========================================================================
   TREE HIGHLIGHTING — when a page is active, its whole branch is marked with
   distinct classes (the module outputs these on the <li> and/or the <a>):

     .is-current        the active page itself (also gets aria-current="page")
     .is-active-parent  every ancestor of the active page, all the way up
     .is-root-parent    the top-level ancestor (root of the active branch)

   Style each class independently; every color below is a theme token.
   ========================================================================== */

/* Active page: accent color, bolder weight, subtle background. */
.en-link.is-current,
.en-link[aria-current="page"],
.en-item.is-current > .en-link {
  background: var(--en-current-bg);
  color: var(--en-accent);
  font-weight: var(--en-font-weight-current);
}

/* Every ancestor of the active page (all levels): accent color. */
.en-link.is-active-parent,
.en-item.is-active-parent > .en-link {
  color: var(--en-accent);
}

/* Ancestors keep their label underline permanently visible. */
.en-item.is-active-parent > .en-link::after {
  color: var(--en-underline-color);
  transform: scaleX(1);
}

/* Root of the active branch (top-level ancestor): stronger, distinct accent
   so the active section is obvious in the main bar. */
.en-item.is-root-parent > .en-link {
  color: var(--en-accent-strong);
}
.en-item.is-root-parent > .en-link::after {
  color: var(--en-accent-strong);
  transform: scaleX(1);
}
/* ---- Disclosure (submenu toggle) button --------------------------------- */
.en-disclosure {
  /* Visually place the caret before the link (left side). The DOM keeps the
     link first for a sensible tab order; `order` only affects visual layout. */
  order: -1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--en-disclosure-min-size);
  min-height: var(--en-disclosure-min-size);
  margin-right: var(--en-disclosure-gap);
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--en-fg-muted);
  cursor: pointer;
  border-radius: var(--en-radius);
  line-height: 1;
  transition:
    background-color var(--en-transition),
    color var(--en-transition);
}

.en-disclosure:hover,
.en-disclosure:focus-visible {
  background: var(--en-hover-bg);
  color: var(--en-accent);
}

/* Caret chevron — drawn with borders so its color follows the disclosure
   button (--en-fg-muted, --en-accent on hover) and size is fully variable.
   Base rotation points down (the submenu opens below). */
.en-caret {
  display: block;
  /* width: var(--en-caret-size); */
  /* height: var(--en-caret-size); */
  /* border-right: var(--en-caret-width) solid currentColor; */
  /* border-bottom: var(--en-caret-width) solid currentColor; */
  transform: rotate(90deg);
  transition: transform var(--en-caret-transition);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='currentColor' stroke='%23000' viewBox='0 0 29 50'%3E%3Cpath fill='%23e5e3d3' d='m0 47.775 3.23 2.153 24.84-22.77v-4.389L3.23 0 0 2.152l10.35 22.77z'/%3E%3C/svg%3E");
  height: 18px;
  width: 25px;
  background-repeat: no-repeat;
  background-position: center center;
  margin-right: 0.25rem;
}

/* Open disclosure: caret points up. Same rotation as the desktop hover state
   (the SVG arrow at rotate(90deg) points down; -90deg points up). */
.en-disclosure[aria-expanded="true"] .en-caret {
  transform: rotate(-90deg);
}

/* ---- Promoted / featured items ------------------------------------------ */
.en-item--promoted > .en-link {
  font-weight: var(--en-font-weight-promoted);
}
/* External toggle: a standalone burger button placed outside the <nav> via
   renderNavbarToggle(). Hidden by default; the JS adds `en-toggle--visible`
   while its associated nav is in mobile mode (mirrors the internal toggle). */
.en-toggle--external {
  display: none;
}
.en-toggle--external.en-toggle--visible {
  display: inline-flex;
}

/* ==========================================================================
   Mobile toggle (hamburger) - hidden on desktop, shown below breakpoint
   ========================================================================== */
.en-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--en-toggle-gap);
  min-height: var(--en-toggle-min-height);
  padding: var(--en-toggle-padding);
  border: var(--en-border-width) solid var(--en-border);
  border-radius: var(--en-radius);
  background: var(--en-bg);
  color: var(--en-fg);
  font: inherit;
  cursor: pointer;
}

/* Hamburger icon: three lines drawn with currentColor (follows --en-fg). */
.en-toggle__icon,
.en-toggle__icon::before,
.en-toggle__icon::after {
  display: block;
  width: var(--en-toggle-icon-size);
  height: var(--en-toggle-icon-height);
  background: currentColor;
  border-radius: var(--en-toggle-icon-radius);
  transition:
    transform var(--en-transition),
    opacity var(--en-transition),
    background-color var(--en-transition);
}

.en-toggle__icon {
  position: relative;
}

.en-toggle__icon::before,
.en-toggle__icon::after {
  content: "";
  position: absolute;
  left: 0;
}

.en-toggle__icon::before {
  top: calc(-1 * var(--en-toggle-icon-gap));
}
.en-toggle__icon::after {
  top: var(--en-toggle-icon-gap);
}

/* Expanded hamburger turns into an X. */
.en-toggle[aria-expanded="true"] .en-toggle__icon {
  background: transparent;
}

.en-toggle[aria-expanded="true"] .en-toggle__icon::before {
  transform: translateY(var(--en-toggle-icon-gap)) rotate(45deg);
}

.en-toggle[aria-expanded="true"] .en-toggle__icon::after {
  transform: translateY(calc(-1 * var(--en-toggle-icon-gap))) rotate(-45deg);
}

/* ==========================================================================
   DESKTOP layout = the default (works without JS on wide viewports).
   JS toggles `.is-mobile` based on the configured breakpoint (see JS file),
   which keeps this stylesheet DRY (no per-breakpoint media duplication).
   ========================================================================== */

/* Vertical dividers between top-level items (opt-in via `en-navbar--dividers`).
   Desktop only: excluded when collapsed to the mobile menu. */
.en-navbar--dividers:not(.is-mobile) > .en-menu > .en-item + .en-item {
  margin-left: var(--en-divider-inset);
  padding-left: calc(var(--en-divider-inset) + var(--en-gap));
}
.en-navbar--dividers:not(.is-mobile) > .en-menu > .en-item + .en-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: var(--en-divider-width);
  height: var(--en-divider-height);
  background: var(--en-divider-color);
  border-radius: var(--en-divider-width);
}
.en-navbar .en-toggle {
  display: none;
}
.en-navbar > .en-menu {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--en-gap);
}

.en-navbar .en-submenu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: var(--en-submenu-min);
  background: var(--en-submenu-bg);
  border: var(--en-border-width) solid var(--en-border);
  border-radius: var(--en-radius);
  box-shadow: var(--en-submenu-shadow);
  padding: var(--en-gap);
  padding-left: var(--en-submenu-indent);
  /* Hidden with opacity/visibility (not display) so open/close can animate.
     `visibility` also keeps closed submenu links out of the tab order and
     gives the fade-out a short delay, bridging diagonal mouse travel into
     the panel. */
  opacity: 0;
  visibility: hidden;
  transform: translateY(-0.5rem);
  transition:
    opacity var(--en-submenu-duration) var(--en-submenu-easing),
    transform var(--en-submenu-duration) var(--en-submenu-easing),
    visibility 0s linear var(--en-submenu-duration); /* fade out, then hide */
  z-index: var(--en-z-submenu);
}

.en-navbar .en-submenu .en-link {
  border-radius: var(--en-radius-small);
  color: var(--en-submenu-fg);
  white-space: nowrap;
}
.en-navbar .en-submenu .en-link:hover {
  color: var(--en-accent-strong);
}
/* Current page inside a dropdown: accent color. The arrow marker is only
   shown on items that have children, so this keeps the active leaf visible. */
.en-navbar .en-submenu .en-link.is-current,
.en-navbar .en-submenu .en-link[aria-current="page"] {
  color: var(--en-accent);
}

/* Expand/collapse marker next to submenu parents: points down while the
   item's submenu is closed, up while it is open. Leaf items (no children)
   get no marker — they have nothing to expand. */
.en-navbar .en-submenu .en-item.has-children > .en-link:hover::before,
.en-navbar .en-submenu .en-item.is-open > .en-link::before {
  content: "";
  position: absolute;
  left: var(--en-marker-offset-x);
  top: 50%;
  width: var(--en-marker-size);
  height: var(--en-marker-size);
  border-right: var(--en-marker-width) solid var(--en-marker-color);
  border-bottom: var(--en-marker-width) solid var(--en-marker-color);
  transform: translateY(-50%) rotate(45deg); /* down: closed */
  transition: transform var(--en-transition);
}
/* Open submenu: the parent's marker points up (collapse indicator). */
.en-navbar .en-submenu .en-item.is-open > .en-link::before {
  transform: translateY(-50%) rotate(-135deg);
}

/* Nested submenus open to the side */
.en-navbar .en-submenu .en-submenu {
  top: 0;
  left: 100%;
}

/* Viewport-edge protection: panels are min-width 20rem with nowrap links, so
   items near the right edge would open past the viewport and get cut off.
   The JS measures every panel and toggles .en-submenu--flip (right-aligned);
   without JS the last top-level item is the usual offender, so flip it in CSS. */
.en-navbar:not(.is-mobile) .en-submenu.en-submenu--flip {
  left: auto;
  right: 0;
}
.en-navbar:not(.is-mobile) .en-submenu .en-submenu.en-submenu--flip {
  left: auto;
  right: 100%;
}
.en-navbar:not(.is-mobile):not(.en-js) > .en-menu > .en-item:last-child > .en-submenu {
  left: auto;
  right: 0;
}

/* Open via JS (click/keyboard) - desktop only; these are the primary,
   reliable triggers (incl. iOS / touch). */
.en-navbar:not(.is-mobile) .en-disclosure[aria-expanded="true"] + .en-submenu,
.en-navbar:not(.is-mobile) .en-item.is-open > .en-submenu,
/* No-JS fallback: a submenu also opens while its item holds keyboard focus.
   Once JS is active (.en-js) this must NOT apply, otherwise Escape / ArrowUp
   could never close a submenu while focus is still inside the item. */
.en-navbar:not(.is-mobile):not(.en-js)
  .en-item.has-children:focus-within > .en-submenu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition:
    opacity var(--en-submenu-duration) var(--en-submenu-easing),
    transform var(--en-submenu-duration) var(--en-submenu-easing),
    visibility 0s; /* appear immediately (no close-delay on open) */
}

/* Hover-to-open is a progressive enhancement ONLY where a real hover-capable,
   fine pointer exists. This excludes iOS/Android touch devices, where emulated
   hover would otherwise leave submenus stuck open after a tap. */
@media (hover: hover) and (pointer: fine) {
  .en-navbar:not(.is-mobile) .en-item.has-children:hover > .en-submenu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition:
      opacity var(--en-submenu-duration) var(--en-submenu-easing),
      transform var(--en-submenu-duration) var(--en-submenu-easing),
      visibility 0s;
  }
  /* Submenu open via hover/focus: caret and marker point up (collapse). */
  .en-navbar:not(.is-mobile)
    .en-item.has-children:hover
    > .en-disclosure
    .en-caret,
  .en-navbar:not(.is-mobile):not(.en-js)
    .en-item.has-children:focus-within
    > .en-disclosure
    .en-caret {
    transform: rotate(-90deg);
  }
  .en-navbar:not(.is-mobile) .en-item.has-children:hover > .en-link::before,
  .en-navbar:not(.is-mobile):not(.en-js)
    .en-item.has-children:focus-within
    > .en-link::before {
    transform: translateY(-50%) rotate(-135deg);
  }
}

/* Current-page indicator inside a dropdown: a right-pointing arrow aimed at
   the label ("you are here"). Shown on leaf AND parent items; drawn from an
   SVG data URI so it stays crisp at any size, colored via currentColor
   (--en-marker-color-current). Placed after the expand/collapse rules so it
   wins for current parents that are also hovered/open. */
.en-navbar .en-submenu .en-item > .en-link.is-current::before,
.en-navbar .en-submenu .en-item.has-children > .en-link.is-current::before,
.en-navbar .en-submenu .en-item > .en-link[aria-current="page"]::before,
.en-navbar
  .en-submenu
  .en-item.has-children
  > .en-link[aria-current="page"]::before {
  content: "";
  position: absolute;
  left: var(--en-marker-offset-x);
  top: 50%;
  width: var(--en-marker-size);
  height: var(--en-marker-size);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 29 50'%3E%3Cpath fill='%23c20244' stroke='%23000' d='m0 47.775 3.23 2.153 24.84-22.77v-4.389L3.23 0 0 2.152l10.35 22.77z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  /* color: var(--en-marker-color-current); */
  transform: translateY(-50%);
  border: 0; /* suppress the expand/collapse chevron on current parents */
}

/* Submenu items stack vertically */
.en-navbar .en-submenu .en-item {
  display: block;
}

/* The disclosure caret on submenu parents points down; open points up. */
.en-navbar .en-submenu .en-caret {
  transform: rotate(45deg);
}
.en-navbar .en-submenu .en-disclosure[aria-expanded="true"] .en-caret {
  transform: rotate(-135deg);
}

/* ==========================================================================
   MOBILE behavior - active when JS adds `.is-mobile` (below the breakpoint).
   ========================================================================== */
.en-navbar.is-mobile {
  background: none;
}
.en-navbar.is-mobile .en-toggle {
  display: inline-flex;
}
.en-navbar.is-mobile > .en-menu {
  display: none;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
}

/* Full-screen overlay panel when the mobile menu is open. */
.en-navbar.is-mobile.is-open > .en-menu {
  display: flex;
  position: fixed;
  inset: 0;
  z-index: var(--en-z-mobile-menu);
  margin: 0;
  background: var(--en-mobile-menu-bg);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  /* Top padding leaves room for the fixed close button. */
  padding: var(--en-mobile-panel-pad-top) var(--en-mobile-panel-pad-x)
    calc(var(--en-mobile-panel-pad-bottom) + env(safe-area-inset-bottom));
  /* Opacity-only fade so the scrolling panel doesn't jank. */
  animation: en-panel-in var(--en-transition) ease;
  padding-top: 5.5rem;
}
/* Dedicated close button: only visible while the full-screen menu is open. */
.en-close-wrapper > svg {
  position: fixed;
  left: 16px;
  top: 8px;
  display: none;
  z-index: var(--en-z-mobile-logo);
}
.en-navbar.is-mobile.is-open > .en-close-wrapper > svg {
  display: block;
}
.en-navbar.is-mobile.is-open > .en-close-wrapper > .spored {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-items: center;
  position: absolute;
  top: 0.75rem;
  right: 4rem;
  z-index: 10000;
}
.en-close {
  display: none;
}
.en-navbar.is-mobile.is-open > .en-close-wrapper > .en-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  top: 1.4rem;
  right: var(--en-close-offset);
  z-index: var(--en-z-close);
  width: var(--en-close-size);
  height: var(--en-close-size);
  padding: 0;
  color: var(--en-fg);
  cursor: pointer;
  /* Staggered fade-in behind the panel; `backwards` hides it during the delay. */
  animation: en-panel-in var(--en-transition) ease 60ms backwards;
  transition:
    background var(--en-transition),
    color var(--en-transition);
}

/* Close icon (X) — drawn with currentColor (follows --en-fg on .en-close). */
.en-close__icon {
  position: relative;
  display: block;
  width: var(--en-close-icon-size);
  height: var(--en-close-icon-size);
}
.en-close__icon::before,
.en-close__icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: var(--en-close-icon-width);
  background: currentColor;
  border-radius: var(--en-close-icon-radius);
}
.en-close__icon::before {
  transform: rotate(45deg);
}
.en-close__icon::after {
  transform: rotate(-45deg);
}

/* Prevent the page behind a full-screen menu from scrolling. */
.en-scroll-lock {
  overflow: hidden;
}

.en-navbar.is-mobile .en-link {
  border-radius: 0;
  color: var(--en-fg);
}

.en-navbar.is-mobile .en-item.has-children > .en-link {
  flex: 1;
}
.en-navbar.is-mobile .en-item.has-children {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
}

.en-navbar.is-mobile .en-submenu {
  display: none;
  /* In-flow accordion (not an absolute overlay): must reset the desktop
     positioning, the hidden state and its transition. */
  position: static;
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: none; /* mobile uses the open animation instead */
  width: 100%;
  min-width: 0;
  box-shadow: none;
  border: 0;
  border-top: var(--en-border-width) solid var(--en-border);
  border-radius: 0;
  padding: 0 0 0 var(--en-submenu-indent);
  margin-left: 3.225rem;
}

.en-navbar.is-mobile .en-submenu .en-submenu {
  left: 0;
}
.en-navbar.is-mobile .en-disclosure[aria-expanded="true"] + .en-submenu,
.en-navbar.is-mobile .en-item.is-open > .en-submenu {
  display: block;
  animation: en-accordion-in var(--en-transition) ease;
}

/* Mobile reveal animations: fade + small slide; closing is instant (display:none). */
@keyframes en-accordion-in {
  from {
    opacity: 0;
    transform: translateY(-0.35rem);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
/* Full-screen panel reveal: opacity only, so the scrolling panel doesn't jank. */
@keyframes en-panel-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Mobile submenu caret points down; open points up. */
.en-navbar.is-mobile .en-submenu .en-caret {
  transform: rotate(45deg);
}
.en-navbar.is-mobile
  .en-submenu
  .en-disclosure[aria-expanded="true"]
  .en-caret {
  transform: rotate(-135deg);
}

/* ==========================================================================
   WCAG: visible focus, reduced motion, high-contrast
   ========================================================================== */
.en-navbar :where(a, button):focus-visible {
  outline: var(--en-focus-outline);
  box-shadow: var(--en-focus-ring);
  outline-offset: var(--en-focus-offset);
}

@media (prefers-reduced-motion: reduce) {
  .en-navbar *,
  .en-navbar *::before,
  .en-navbar *::after {
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

@media (prefers-contrast: more) {
  .en-navbar {
    --en-border: var(--en-contrast-border);
    --en-fg: var(--en-contrast-fg);
    --en-accent: var(--en-contrast-accent);
  }
}

/* Screen-reader-only utility (available for custom labels if needed) */
.en-sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}