/* ==========================================================================
   WBI Nav Menu
   A WordPress menu with dropdowns and mega panels on wide screens and a side
   panel with accordions on narrow ones.

   The render prints both menus: the bar (.wbi-nav__bar) and the mobile panel
   (.wbi-nav__drawer, with .wbi-nav__toggle and .wbi-nav__overlay). The panel
   side is hidden here; a <style> printed as the first child of the element
   shows it and hides the bar at the chosen width (see breakpoint_css() in the
   element), so nothing flashes before the script runs.

   Tokens live in :where() (zero specificity) so any rule Bricks generates on
   the root (#brxe-xxx { --token: ... }) always wins, whatever the load order.
   Sizes are in px or in em against --wbi-nav-base, never in rem: Bricks sets
   the root to 10px and the menu would silently shrink.

   Default values reproduce the design at 1440 and 402 px.
   ========================================================================== */

:where(.wbi-nav) {
  --wbi-nav-base: 16px;
  /* Theme Styles > WBI Elements > Font (see wbi-fonts.css) */
  --wbi-nav-font: var(--wbi-font), system-ui, -apple-system, "Segoe UI", sans-serif;
  --wbi-nav-focus: #3E94B9;
  --wbi-nav-duration: 240ms;
  --wbi-nav-ease: cubic-bezier(0.22, 1, 0.36, 1); /* quick start, soft landing */
  --wbi-nav-z: 999;

  /* --- Bar ---------------------------------------------------------------
     Text colors are defaults only: each Typography control writes `color`
     on its selector and wins over them. */
  --wbi-nav-justify: flex-start;
  --wbi-nav-gap: 64px;
  --wbi-nav-link-color: #0D1115;
  --wbi-nav-link-deco: underline;   /* on hover */
  --wbi-nav-caret-size: 20px;
  --wbi-nav-caret-color: currentColor;
  --wbi-nav-caret-gap: 4px;

  /* --- Panels ------------------------------------------------------------ */
  --wbi-nav-panel-bg: #FFFFFF;
  --wbi-nav-panel-gap: 8px;         /* below the header (or the menu) */
  --wbi-nav-heading-color: #535353;
  --wbi-nav-heading-gap: 24px;

  /* --- First level: dropdown items, mega tabs, mobile rows ---------------- */
  --wbi-nav-card-gap: 16px;
  --wbi-nav-card-radius: 8px;
  --wbi-nav-card-bg-active: #EDEFF3;
  --wbi-nav-title-color: #27272A;
  --wbi-nav-title-active: #18181B;
  --wbi-nav-desc-color: #535353;
  --wbi-nav-icon-size: 24px;
  --wbi-nav-icon-color: #2A2B35;
  --wbi-nav-icon-stroke: 1.5;
  --wbi-nav-icon-gap: 8px;

  /* --- Dropdown ---------------------------------------------------------- */
  --wbi-nav-drop-w: 390px;
  --wbi-nav-drop-left: 0%;          /* 0% start, 50% center, 100% end */
  --wbi-nav-drop-dx: 0px;

  /* --- Mega menu --------------------------------------------------------- */
  --wbi-nav-mega-w: 1060px;
  --wbi-nav-mega-left: 0%;
  --wbi-nav-mega-dx: 0px;
  --wbi-nav-tabs-w: 353px;
  --wbi-nav-arrow-size: 20px;
  --wbi-nav-arrow-color: #27272A;
  --wbi-nav-arrow-inset: 24px;
  --wbi-nav-divider: #EDEFF3;
  --wbi-nav-divider-w: 1px;
  --wbi-nav-content-pad: 24px;
  --wbi-nav-cols: 2;
  --wbi-nav-col-gap: 40px;
  --wbi-nav-sublink-color: #27272A;
  --wbi-nav-sublink-hover: #0D1115;
  --wbi-nav-sublink-gap: 15px;
  --wbi-nav-sublink-line: #E4E4E7;
  --wbi-nav-sublink-line-w: 1px;
  --wbi-nav-deep-indent: 24px;

  /* --- Menu button ------------------------------------------------------- */
  --wbi-nav-toggle-size: 24px;
  --wbi-nav-toggle-box: 44px;       /* tap area */
  --wbi-nav-toggle-color: #0D1115;
  --wbi-nav-toggle-bg: transparent;
  --wbi-nav-toggle-radius: 8px;
  --wbi-nav-toggle-bar: 2px;
  --wbi-nav-toggle-gap: 5px;

  /* --- Mobile panel ------------------------------------------------------ */
  --wbi-nav-drawer-w: 303px;
  --wbi-nav-drawer-bg: #FFFFFF;
  --wbi-nav-drawer-gap: 8px;        /* below the header */
  --wbi-nav-drawer-gap-bottom: 8px;
  --wbi-nav-overlay: rgba(0, 0, 0, 0.68);
  --wbi-nav-m-link-color: #0D1115;
  --wbi-nav-m-arrow-size: 20px;
  --wbi-nav-m-arrow-color: #0D1115;
  --wbi-nav-m-sub-color: #27272A;
  --wbi-nav-m-deep-indent: 20px;
}

/* Undeclared tokens
   The `dimensions` controls (paddings) emit one token per side and only for
   the sides the editor fills in; declaring them would pin every side and the
   fallback would never apply. They are read as var(--x-top, default):
   --wbi-nav-link-pad-*, --wbi-nav-panel-pad-*, --wbi-nav-card-pad-*,
   --wbi-nav-sublink-pad-*, --wbi-nav-drawer-pad-*, --wbi-nav-slot-pad-*,
   --wbi-nav-m-link-pad-*, --wbi-nav-m-cards-pad-*, --wbi-nav-m-sub-pad-*,
   --wbi-nav-m-links-pad-*.
   The script sets --wbi-nav-top, --wbi-nav-bridge and --wbi-nav-shift on an
   open panel and --wbi-nav-drawer-top on the root. */

/* ==========================================================================
   Root
   ========================================================================== */

.wbi-nav {
  position: relative;
  display: flex;
  align-items: center;
  font-family: var(--wbi-nav-font);
  font-size: var(--wbi-nav-base);
  line-height: 1.5;
  -webkit-tap-highlight-color: transparent;
}

.wbi-nav *,
.wbi-nav *::before,
.wbi-nav *::after {
  box-sizing: border-box;
}

/* Resets at the specificity of one class: they beat the theme's `button`,
   `a` or `ul` rules and lose to every component class below them. */
.wbi-nav :where(ul) {
  margin: 0;
  padding: 0;
  list-style: none;
}

.wbi-nav :where(li) {
  margin: 0;
}

.wbi-nav :where(a) {
  color: inherit;
  text-decoration: none;
}

.wbi-nav :where(button) {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-align: inherit;
  text-transform: inherit;
  cursor: pointer;
  touch-action: manipulation;
}

/* Icons from the Bricks icon controls: font icons size with the font. */
.wbi-nav :where(i) {
  font-size: inherit;
  line-height: 1;
}

.wbi-nav :is(a, button):focus-visible {
  outline: 2px solid var(--wbi-nav-focus);
  outline-offset: 2px;
}

/* ==========================================================================
   Bar
   ========================================================================== */

.wbi-nav__bar {
  display: flex;
  align-items: center;
  gap: var(--wbi-nav-gap);
  min-width: 0;
}

.wbi-nav__menu {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: var(--wbi-nav-justify);
  column-gap: var(--wbi-nav-gap);
  row-gap: 0;
}

.wbi-nav__menu > li {
  position: relative;
  display: flex;
  align-items: center;
}

/* A mega panel sizes and places itself against the whole menu. */
.wbi-nav__menu > .wbi-nav__item--mega,
.wbi-nav__menu > .wbi-nav__item--template {
  position: static;
}

/* Items printed by other plugins (wp_nav_menu_items) look the same. */
.wbi-nav__link,
.wbi-nav__menu > li > a {
  display: inline-flex;
  align-items: center;
  gap: var(--wbi-nav-caret-gap);
  padding: var(--wbi-nav-link-pad-top, 12px) var(--wbi-nav-link-pad-right, 0px) var(--wbi-nav-link-pad-bottom, 12px) var(--wbi-nav-link-pad-left, 0px);
  font-size: 1em;
  font-weight: 600;
  line-height: 1.5;
  color: var(--wbi-nav-link-color);
  white-space: nowrap;
  text-underline-offset: 6px;
  text-decoration-thickness: 1.5px;
  transition: color var(--wbi-nav-duration) ease;
}

.wbi-nav__link:hover,
.wbi-nav__menu > li > a:hover {
  text-decoration-line: var(--wbi-nav-link-deco);
}

.wbi-nav__caret,
.wbi-nav__chevron {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  color: var(--wbi-nav-caret-color);
  font-size: var(--wbi-nav-caret-size);
}

/* The arrow button next to a link: a 24px target (WCAG 2.2) around the icon. */
.wbi-nav__caret {
  min-width: 24px;
  min-height: 24px;
  margin-left: var(--wbi-nav-caret-gap);
  border-radius: 4px;
}

.wbi-nav__caret svg,
.wbi-nav__chevron svg {
  width: var(--wbi-nav-caret-size);
  height: var(--wbi-nav-caret-size);
  stroke-width: 1.5;
}

.wbi-nav__caret > *,
.wbi-nav__chevron > * {
  transition: transform var(--wbi-nav-duration) var(--wbi-nav-ease);
}

/* Arrows turn with the state screen readers get, whatever wraps them. */
.wbi-nav__caret[aria-expanded="true"] > *,
[aria-expanded="true"] > .wbi-nav__chevron > * {
  transform: rotate(180deg);
}

.wbi-nav__bar-end {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* ==========================================================================
   Panels (dropdowns and mega menus)
   ========================================================================== */

.wbi-nav__panel {
  position: absolute;
  z-index: var(--wbi-nav-z);
  /* --wbi-nav-top: set by the script to reach the bottom of the header.
     Editor values never go inside calc(): Bricks writes a zero as a bare 0,
     and calc(10px + 0) is invalid. Hence margins for the gap and offsets. */
  top: var(--wbi-nav-top, 100%);
  margin-top: var(--wbi-nav-panel-gap);
  padding: var(--wbi-nav-panel-pad-top, 12px) var(--wbi-nav-panel-pad-right, 12px) var(--wbi-nav-panel-pad-bottom, 12px) var(--wbi-nav-panel-pad-left, 12px);
  border: 1px solid #EDEFF3;
  border-radius: 8px;
  background: var(--wbi-nav-panel-bg);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  text-align: left;
  white-space: normal;
  cursor: auto;
  /* Out of the layout while closed: a hidden panel wider than the room left
     of it would still widen the page and bring a horizontal scrollbar. The
     display change waits for the fade (allow-discrete); browsers without it
     just skip the animation. Closing takes two thirds of the opening. */
  display: none;
  opacity: 0;
  transform: translateY(6px);
  transition:
    opacity calc(var(--wbi-nav-duration) * 0.66) ease,
    transform calc(var(--wbi-nav-duration) * 0.66) ease,
    display 0s linear calc(var(--wbi-nav-duration) * 0.66);
  transition-behavior: allow-discrete;
}

.wbi-nav__item.is-open > .wbi-nav__panel {
  display: block;
  opacity: 1;
  transform: none;
  transition:
    opacity var(--wbi-nav-duration) var(--wbi-nav-ease),
    transform var(--wbi-nav-duration) var(--wbi-nav-ease),
    display 0s;
  transition-behavior: allow-discrete;
}

/* Where the opening fade starts from, now that the panel was not rendered. */
@starting-style {
  .wbi-nav__item.is-open > .wbi-nav__panel {
    opacity: 0;
    transform: translateY(6px);
  }
}

/* Hover bridge: covers the gap between the item and the panel, so the
   pointer can travel down without leaving the item. */
.wbi-nav__panel::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: var(--wbi-nav-bridge, 12px);
}

.wbi-nav__panel--dropdown {
  left: var(--wbi-nav-drop-left);
  /* --wbi-nav-shift: set by the script to keep the panel on screen. */
  translate: calc(var(--wbi-nav-drop-left) * -1 + var(--wbi-nav-shift, 0px)) 0;
  margin-left: var(--wbi-nav-drop-dx);
  width: min(var(--wbi-nav-drop-w), calc(100vw - 16px));
}

.wbi-nav__panel--mega {
  left: var(--wbi-nav-mega-left);
  translate: calc(var(--wbi-nav-mega-left) * -1 + var(--wbi-nav-shift, 0px)) 0;
  margin-left: var(--wbi-nav-mega-dx);
  width: min(var(--wbi-nav-mega-w), calc(100vw - 16px));
}

.wbi-nav__heading {
  display: block;
  margin: 0 0 var(--wbi-nav-heading-gap);
  padding: 0 var(--wbi-nav-card-pad-left, 8px);
  font-size: 0.875em;
  font-weight: 400;
  line-height: 1.4286;
  color: var(--wbi-nav-heading-color);
}

a.wbi-nav__heading:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* ==========================================================================
   First level: dropdown items and mega tabs
   ========================================================================== */

.wbi-nav__drop-list {
  display: flex;
  flex-direction: column;
  gap: var(--wbi-nav-card-gap);
}

.wbi-nav__drop-link,
.wbi-nav__tab {
  display: flex;
  align-items: center;
  gap: var(--wbi-nav-icon-gap);
  width: 100%;
  padding: var(--wbi-nav-card-pad-top, 15px) var(--wbi-nav-card-pad-right, 8px) var(--wbi-nav-card-pad-bottom, 15px) var(--wbi-nav-card-pad-left, 8px);
  border-radius: var(--wbi-nav-card-radius);
  color: var(--wbi-nav-title-color);
  transition: background-color var(--wbi-nav-duration) ease;
}

.wbi-nav__drop-link:hover,
.wbi-nav__tab:hover,
.wbi-nav__tab-item.is-active > .wbi-nav__tab {
  background-color: var(--wbi-nav-card-bg-active);
}

.wbi-nav__text {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
}

.wbi-nav__title {
  font-size: 1em;
  font-weight: 500;
  line-height: 1.5;
  color: var(--wbi-nav-title-color);
  transition: color var(--wbi-nav-duration) ease;
}

/* Active first-level rows: the same list as active_cards() in the element,
   which the color controls use. */
:is(
  .wbi-nav__drop-link:hover,
  .wbi-nav__tab:hover,
  .wbi-nav__tab-item.is-active > .wbi-nav__tab,
  .wbi-nav__m-card-item.is-open .wbi-nav__m-card,
  .wbi-nav__m-card-item.current-menu-item > .wbi-nav__m-card
) .wbi-nav__title {
  color: var(--wbi-nav-title-active);
}

.wbi-nav__desc {
  font-size: 1em;
  font-weight: 400;
  line-height: 1.5;
  color: var(--wbi-nav-desc-color);
}

.wbi-nav__icon {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: var(--wbi-nav-icon-size);
  height: var(--wbi-nav-icon-size);
  color: var(--wbi-nav-icon-color);
  transition: color var(--wbi-nav-duration) ease;
}

.wbi-nav__icon svg,
.wbi-nav__icon img {
  display: block;
  width: 100%;
  height: 100%;
}

.wbi-nav__icon img {
  object-fit: contain;
}

.wbi-nav__icon--builtin svg {
  stroke-width: var(--wbi-nav-icon-stroke);
}

/* SVG icons from the Media Library keep their colors unless asked. */
.wbi-nav[data-icon-recolor="stroke"] .wbi-nav__icon--svg :is(svg[stroke], [stroke]):not([stroke="none"]),
.wbi-nav[data-icon-recolor="both"] .wbi-nav__icon--svg :is(svg[stroke], [stroke]):not([stroke="none"]) {
  stroke: currentColor;
}

.wbi-nav[data-icon-recolor="fill"] .wbi-nav__icon--svg svg,
.wbi-nav[data-icon-recolor="both"] .wbi-nav__icon--svg svg,
.wbi-nav[data-icon-recolor="fill"] .wbi-nav__icon--svg [fill]:not([fill="none"]),
.wbi-nav[data-icon-recolor="both"] .wbi-nav__icon--svg [fill]:not([fill="none"]) {
  fill: currentColor;
}

/* ==========================================================================
   Mega menu
   Tabs on the left, the submenu of the active tab on the right. Each tab and
   its submenu share an <li> (keyboard order: tab, then its links), so the
   <li> spans the whole grid as a subgrid: the tab sits in its row of the
   first column and every submenu stacks in the second column across all the
   rows. The hidden submenus still size the grid, so the panel keeps one
   height whatever the tab.
   ========================================================================== */

.wbi-nav__tabs {
  display: grid;
  grid-template-columns: minmax(0, var(--wbi-nav-tabs-w)) minmax(0, 1fr);
  grid-template-rows: repeat(var(--wbi-nav-rows, 1), auto) 1fr;
}

/* The divider: one line down the start of the second column. */
.wbi-nav__tabs::before {
  content: "";
  grid-column: 2;
  grid-row: 1 / -1;
  border-left: var(--wbi-nav-divider-w) solid var(--wbi-nav-divider);
  pointer-events: none;
}

.wbi-nav__tab-item {
  display: grid;
  grid-column: 1 / -1;
  grid-row: 1 / -1;
  grid-template-columns: subgrid;
  grid-template-rows: subgrid;
  /* Every <li> covers the whole grid: only its own children take pointers. */
  pointer-events: none;
}

.wbi-nav__tab {
  grid-column: 1;
  grid-row: var(--wbi-nav-row, 1);
  pointer-events: auto;
}

.wbi-nav__tab-item:not(:first-child) > .wbi-nav__tab {
  margin-top: var(--wbi-nav-card-gap);
}

.wbi-nav__arrow {
  display: inline-flex;
  flex: 0 0 auto;
  margin-right: var(--wbi-nav-arrow-inset);
  color: var(--wbi-nav-arrow-color);
  font-size: var(--wbi-nav-arrow-size);
}

.wbi-nav__arrow svg {
  width: var(--wbi-nav-arrow-size);
  height: var(--wbi-nav-arrow-size);
  stroke-width: 1.5;
}

.wbi-nav__tabpanel {
  grid-column: 2;
  grid-row: 1 / -1;
  min-width: 0;
  padding-left: var(--wbi-nav-content-pad);
  visibility: hidden;
  opacity: 0;
  pointer-events: auto;
  transition:
    opacity calc(var(--wbi-nav-duration) * 0.66) ease,
    visibility 0s linear calc(var(--wbi-nav-duration) * 0.66);
}

.wbi-nav__tab-item.is-active > .wbi-nav__tabpanel {
  visibility: visible;
  opacity: 1;
  transition: opacity var(--wbi-nav-duration) var(--wbi-nav-ease), visibility 0s;
}

/* Links in columns, top to bottom then the next column. */
.wbi-nav__cols {
  columns: var(--wbi-nav-cols);
  column-gap: var(--wbi-nav-col-gap);
}

/* An item with its own links never splits between columns. Margins at a
   column break are dropped, so every column starts at the top. */
.wbi-nav__col-item {
  break-inside: avoid;
}

.wbi-nav__col-item + .wbi-nav__col-item,
.wbi-nav__group > li + li {
  margin-top: var(--wbi-nav-sublink-gap);
}

.wbi-nav__group {
  margin-top: var(--wbi-nav-sublink-gap);
}

.wbi-nav__sublink {
  display: block;
  padding: var(--wbi-nav-sublink-pad-top, 8px) var(--wbi-nav-sublink-pad-right, 0px) var(--wbi-nav-sublink-pad-bottom, 8px) var(--wbi-nav-sublink-pad-left, 0px);
  border-bottom: var(--wbi-nav-sublink-line-w) solid var(--wbi-nav-sublink-line);
  font-size: 1em;
  font-weight: 400;
  line-height: 1.5;
  color: var(--wbi-nav-sublink-color);
  transition: color var(--wbi-nav-duration) ease;
}

.wbi-nav__sublink:hover {
  color: var(--wbi-nav-sublink-hover);
}

/* Deeper levels: the text moves in, the line keeps the column width. An
   indent of 0 makes this invalid, which leaves the padding at 0 as well. */
.wbi-nav__sublink--deep {
  padding-left: calc(var(--wbi-nav-deep-indent) * var(--wbi-nav-depth, 1));
}

/* A Bricks template fills the panel as designed. */
.wbi-nav__panel--template .wbi-nav__template {
  width: 100%;
}

/* ==========================================================================
   Menu button
   ========================================================================== */

.wbi-nav__toggle {
  position: relative;
  display: none; /* shown by the width switch */
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: var(--wbi-nav-toggle-box);
  height: var(--wbi-nav-toggle-box);
  /* The tap area grows around the icon without moving it. */
  margin: calc((var(--wbi-nav-toggle-size) - var(--wbi-nav-toggle-box)) / 2);
  border-radius: var(--wbi-nav-toggle-radius);
  background: var(--wbi-nav-toggle-bg);
  color: var(--wbi-nav-toggle-color);
  font-size: var(--wbi-nav-toggle-size);
}

.wbi-nav__burger {
  position: relative;
  display: block;
  width: var(--wbi-nav-toggle-size);
  height: calc(var(--wbi-nav-toggle-bar) * 3 + var(--wbi-nav-toggle-gap) * 2);
}

.wbi-nav__burger > span {
  position: absolute;
  left: 0;
  width: 100%;
  height: var(--wbi-nav-toggle-bar);
  border-radius: var(--wbi-nav-toggle-bar);
  background: currentColor;
  transition:
    transform var(--wbi-nav-duration) var(--wbi-nav-ease),
    opacity calc(var(--wbi-nav-duration) * 0.66) ease;
}

.wbi-nav__burger > span:nth-child(1) {
  top: 0;
}

.wbi-nav__burger > span:nth-child(2) {
  top: calc(50% - var(--wbi-nav-toggle-bar) / 2);
}

.wbi-nav__burger > span:nth-child(3) {
  bottom: 0;
}

.wbi-nav__toggle[aria-expanded="true"] .wbi-nav__burger > span:nth-child(1) {
  transform: translateY(calc(var(--wbi-nav-toggle-bar) + var(--wbi-nav-toggle-gap))) rotate(45deg);
}

.wbi-nav__toggle[aria-expanded="true"] .wbi-nav__burger > span:nth-child(2) {
  opacity: 0;
}

.wbi-nav__toggle[aria-expanded="true"] .wbi-nav__burger > span:nth-child(3) {
  transform: translateY(calc((var(--wbi-nav-toggle-bar) + var(--wbi-nav-toggle-gap)) * -1)) rotate(-45deg);
}

.wbi-nav__toggle-icon {
  display: inline-flex;
}

.wbi-nav__toggle-icon svg {
  width: var(--wbi-nav-toggle-size);
  height: var(--wbi-nav-toggle-size);
}

.wbi-nav__toggle-icon--close,
.wbi-nav__toggle[aria-expanded="true"] .wbi-nav__toggle-icon--open {
  display: none;
}

.wbi-nav__toggle[aria-expanded="true"] .wbi-nav__toggle-icon--close {
  display: inline-flex;
}

/* ==========================================================================
   Mobile panel
   ========================================================================== */

.wbi-nav__drawer {
  position: fixed;
  z-index: var(--wbi-nav-z);
  /* --wbi-nav-drawer-top: bottom of the header (0 for a full-height
     panel), set by the script. */
  top: var(--wbi-nav-drawer-top, 0px);
  margin-top: var(--wbi-nav-drawer-gap);
  right: 0;
  bottom: var(--wbi-nav-drawer-gap-bottom);
  display: none; /* shown by the width switch */
  width: min(var(--wbi-nav-drawer-w), 100vw);
  padding: var(--wbi-nav-drawer-pad-top, 8px) var(--wbi-nav-drawer-pad-right, 8px) var(--wbi-nav-drawer-pad-bottom, 8px) var(--wbi-nav-drawer-pad-left, 8px);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid #EDEFF3;
  background: var(--wbi-nav-drawer-bg);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  text-align: left;
  visibility: hidden;
  transform: translateX(calc(100% + 24px));
  transition:
    transform calc(var(--wbi-nav-duration) * 0.66) ease-in,
    visibility 0s linear calc(var(--wbi-nav-duration) * 0.66);
}

.wbi-nav[data-side="left"] .wbi-nav__drawer {
  right: auto;
  left: 0;
  transform: translateX(calc(-100% - 24px));
}

.wbi-nav.is-drawer-open .wbi-nav__drawer {
  visibility: visible;
  transform: none;
  transition:
    transform calc(var(--wbi-nav-duration) * 1.25) var(--wbi-nav-ease),
    visibility 0s;
}

.wbi-nav__drawer:focus {
  outline: none;
}

.wbi-nav__overlay {
  position: fixed;
  z-index: calc(var(--wbi-nav-z) - 1);
  top: var(--wbi-nav-drawer-top, 0px);
  right: 0;
  bottom: 0;
  left: 0;
  display: none; /* shown by the width switch */
  background: var(--wbi-nav-overlay);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity calc(var(--wbi-nav-duration) * 0.66) ease,
    visibility 0s linear calc(var(--wbi-nav-duration) * 0.66);
}

.wbi-nav[data-drawer-top="screen"] .wbi-nav__overlay {
  top: 0;
}

.wbi-nav.is-drawer-open .wbi-nav__overlay {
  opacity: 1;
  visibility: visible;
  transition: opacity var(--wbi-nav-duration) ease, visibility 0s;
}

.wbi-nav__drawer-head {
  display: flex;
  justify-content: flex-end;
}

.wbi-nav__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--wbi-nav-toggle-box);
  height: var(--wbi-nav-toggle-box);
  border-radius: var(--wbi-nav-toggle-radius);
  color: var(--wbi-nav-toggle-color);
  font-size: var(--wbi-nav-toggle-size);
}

.wbi-nav__close svg {
  width: var(--wbi-nav-toggle-size);
  height: var(--wbi-nav-toggle-size);
}

/* The language selector, templates and widgets from the hooks, above and
   below the menu. */
.wbi-nav__slot {
  padding: var(--wbi-nav-slot-pad-top, 12px) var(--wbi-nav-slot-pad-right, 8px) var(--wbi-nav-slot-pad-bottom, 12px) var(--wbi-nav-slot-pad-left, 8px);
}

/* First in its slot: kept apart from what follows by the slot's own
   bottom padding. */
.wbi-nav__lang:not(:last-child) {
  margin-bottom: var(--wbi-nav-slot-pad-bottom, 12px);
}

/* --- Top level ------------------------------------------------------------ */

.wbi-nav__m-link,
.wbi-nav__m-menu > li > a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  min-height: 44px;
  padding: var(--wbi-nav-m-link-pad-top, 16px) var(--wbi-nav-m-link-pad-right, 8px) var(--wbi-nav-m-link-pad-bottom, 16px) var(--wbi-nav-m-link-pad-left, 8px);
  font-size: 1em;
  font-weight: 600;
  line-height: 1.5;
  color: var(--wbi-nav-m-link-color);
}

.wbi-nav__m-row,
.wbi-nav__m-card-row {
  display: flex;
  align-items: stretch;
}

.wbi-nav__m-row > .wbi-nav__m-link,
.wbi-nav__m-card-row > .wbi-nav__m-card {
  flex: 1 1 auto;
  min-width: 0;
}

/* The arrow button next to a link: 44px wide, as tall as the row. */
.wbi-nav__m-toggle {
  display: inline-flex;
  flex: 0 0 44px;
  align-items: center;
  justify-content: center;
  color: var(--wbi-nav-m-arrow-color);
}

.wbi-nav__m-arrow {
  display: inline-flex;
  flex: 0 0 auto;
  color: var(--wbi-nav-m-arrow-color);
  font-size: var(--wbi-nav-m-arrow-size);
  transition: transform var(--wbi-nav-duration) var(--wbi-nav-ease);
}

.wbi-nav__m-arrow svg {
  width: var(--wbi-nav-m-arrow-size);
  height: var(--wbi-nav-m-arrow-size);
  stroke-width: 1.5;
}

[aria-expanded="true"] > .wbi-nav__m-arrow {
  transform: rotate(180deg);
}

/* Accordion: the row track grows from 0fr to 1fr, no height to measure. */
.wbi-nav__m-sub {
  display: grid;
  grid-template-rows: 0fr;
  visibility: hidden;
  transition:
    grid-template-rows calc(var(--wbi-nav-duration) * 0.66) ease,
    visibility 0s linear calc(var(--wbi-nav-duration) * 0.66);
}

/* inherit, not visible: an open accordion (the current section opens on
   load) would otherwise show through the closed drawer, which is only
   visibility: hidden, and its links would take keyboard focus off screen. */
.is-open > .wbi-nav__m-sub {
  grid-template-rows: 1fr;
  visibility: inherit;
  transition:
    grid-template-rows var(--wbi-nav-duration) var(--wbi-nav-ease),
    visibility 0s;
}

.wbi-nav__m-clip {
  min-height: 0;
  overflow: hidden;
}

/* --- First level: icon, title and description ----------------------------- */

.wbi-nav__m-list--cards {
  display: flex;
  flex-direction: column;
  gap: var(--wbi-nav-card-gap);
  padding: var(--wbi-nav-m-cards-pad-top, 6px) var(--wbi-nav-m-cards-pad-right, 0px) var(--wbi-nav-m-cards-pad-bottom, 8px) var(--wbi-nav-m-cards-pad-left, 0px);
}

.wbi-nav__m-card {
  display: flex;
  align-items: center;
  gap: var(--wbi-nav-icon-gap);
  width: 100%;
  padding: var(--wbi-nav-card-pad-top, 15px) var(--wbi-nav-card-pad-right, 8px) var(--wbi-nav-card-pad-bottom, 15px) var(--wbi-nav-card-pad-left, 8px);
  border-radius: var(--wbi-nav-card-radius);
  color: var(--wbi-nav-title-color);
}

.wbi-nav__m-card-row {
  border-radius: var(--wbi-nav-card-radius);
  transition: background-color var(--wbi-nav-duration) ease;
}

.wbi-nav__m-card-item.is-open > .wbi-nav__m-card-row,
.wbi-nav__m-card-item.is-open > .wbi-nav__m-card--button,
.wbi-nav__m-card-item.current-menu-item > .wbi-nav__m-card {
  background-color: var(--wbi-nav-card-bg-active);
}

@media (hover: hover) {
  .wbi-nav__m-card-row:hover,
  .wbi-nav__m-card-item > .wbi-nav__m-card:hover {
    background-color: var(--wbi-nav-card-bg-active);
  }
}

/* --- Second level and below ----------------------------------------------- */

.wbi-nav__m-list--links {
  padding: var(--wbi-nav-m-links-pad-top, 8px) var(--wbi-nav-m-links-pad-right, 0px) var(--wbi-nav-m-links-pad-bottom, 8px) var(--wbi-nav-m-links-pad-left, 0px);
}

.wbi-nav__m-sublink {
  display: block;
  padding: var(--wbi-nav-m-sub-pad-top, 11px) var(--wbi-nav-m-sub-pad-right, 8px) var(--wbi-nav-m-sub-pad-bottom, 11px) var(--wbi-nav-m-sub-pad-left, 16px);
  /* Invalid with an indent of 0, which leaves the margin at 0 too. */
  margin-left: calc(var(--wbi-nav-m-deep-indent) * var(--wbi-nav-depth, 0));
  font-size: 1em;
  font-weight: 400;
  line-height: 1.5;
  color: var(--wbi-nav-m-sub-color);
}

/* ==========================================================================
   Motion and scroll
   ========================================================================== */

/* While the panel is open the page behind it does not scroll. Where the page
   had a scrollbar that takes space, its room stays so nothing shifts. */
html.wbi-nav-locked {
  overflow: hidden;
}

html.wbi-nav-gutter {
  scrollbar-gutter: stable;
}

.wbi-nav--static,
.wbi-nav--static * {
  transition-duration: 0s !important;
  transition-delay: 0s !important;
}

@media (prefers-reduced-motion: reduce) {
  .wbi-nav,
  .wbi-nav * {
    transition-duration: 0s !important;
    transition-delay: 0s !important;
  }
}