/*
 * The template's header navigation (fc.css: .nav, .mmenu) on Bricks' markup:
 *   Nav Nested + Dropdown  → li.brxe-dropdown > .brx-submenu-toggle (span + button) + ul.brx-dropdown-content
 *   Offcanvas #mmenu       → .mmenu stays the fixed panel under the header, its inner box only scrolls
 * State classes: Bricks sets .open on dropdowns and .brx-open on the offcanvas; bricks-nav.js mirrors them to the
 * template's .is-open / .is-drill, so the rest of fc.css (stagger, drill-down) applies unchanged.
 */

/* ---------- desktop: dropdown trigger = the template's .nav-toggle-sub button ---------- */
.nav .brx-submenu-toggle {
  position: relative; display: inline-flex; align-items: center; gap: .25em; padding: .5rem .55rem; border-radius: var(--r-sm);
  color: var(--text); font: 550 .9rem/1 var(--font-body); letter-spacing: -.005em; white-space: nowrap; cursor: pointer;
}
.nav .brx-submenu-toggle:hover { background: var(--surface-2); }
.nav .brx-submenu-toggle > button { display: inline-flex; padding: 0; background: none; border: 0; color: inherit; cursor: pointer; }
.nav .brx-submenu-toggle > button::after { content: ""; position: absolute; inset: 0; border-radius: inherit; } /* the whole item toggles */
.nav .brx-submenu-toggle svg { width: 16px; height: 16px; flex: none; transform: none; }
.nav .brx-submenu-toggle.aria-current { color: var(--accent-ink); }
.nav li.open > .sub { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.site-header.is-over-media:not(.is-scrolled) .nav .brx-submenu-toggle { color: #fbf9f5; }
.site-header.is-over-media:not(.is-scrolled) .nav .brx-submenu-toggle:hover { background: rgb(255 255 255 / .14); }

/* ---------- mobile menu ---------- */
.mmenu > .mmenu__inner { position: static; inset: auto; width: auto; height: 100%; transform: none; background: none; z-index: auto; transition: none; overflow-x: visible; }
.mmenu__inner { align-items: stretch; flex-wrap: nowrap; } /* Bricks' block defaults would shrink the rows or wrap them into columns */
.mmenu__nav, .mmenu__list { display: block; width: 100%; }
.mmenu__item.brxe-dropdown { position: static; } /* panels are positioned against .mmenu__nav, as in the template */
.mmenu__item > .brx-submenu-toggle {
  position: relative; display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 52px; padding: 15px 0;
  color: var(--text); font: 300 clamp(17px, 4.6vw, 20px)/1.2 var(--font-body); letter-spacing: .04em; text-transform: uppercase; cursor: pointer;
  transition: opacity .25s, transform .35s var(--ease-mm), visibility 0s;
}
.mmenu__item > .brx-submenu-toggle > button { display: flex; padding: 0; background: none; border: 0; color: inherit; cursor: pointer; }
.mmenu__item > .brx-submenu-toggle > button::after { content: ""; position: absolute; inset: 0; }
.mmenu__item > .brx-submenu-toggle svg { width: 18px; height: 18px; flex: none; opacity: .55; transition: transform .3s var(--ease-mm), opacity .3s; }
.mmenu__item > .brx-submenu-toggle:hover svg, .mmenu__item > .brx-submenu-toggle:focus-within svg { opacity: 1; transform: translateX(3px); }
.mmenu__item > .brx-submenu-toggle.aria-current { font-weight: 500; }
.mmenu__nav.is-drill .mmenu__item > .brx-submenu-toggle { opacity: 0; visibility: hidden; transform: translateX(-18%); transition: opacity .2s, transform .35s var(--ease-mm), visibility 0s linear .35s; }
/* width: Bricks may add .brx-submenu-overflow-right (left: auto !important); a full width keeps the panel flush left */
.mmenu__sub { opacity: 1; width: 100%; min-width: 0; margin: 0; padding: 0; list-style: none; background: none; border: 0; box-shadow: none; }
.mmenu__item.open > .mmenu__sub { visibility: visible; transform: none; transition-delay: 0s; }
/* panels always flush with the list, whatever overflow class Bricks computed (it measures against the viewport) */
.mmenu .mmenu__sub.brx-submenu-overflow-right, .mmenu .mmenu__sub.brx-submenu-overflow-left { left: 0 !important; right: auto !important; }
/* never an empty menu: the main rows only step aside while a panel is really open */
.mmenu__nav.is-drill:not(:has(.mmenu__item.open)) .mmenu__item > .brx-submenu-toggle,
.mmenu__nav.is-drill:not(:has(.mmenu__item.open)) .mmenu__item > .mmenu__link { opacity: 1; visibility: visible; transform: none; }
.mmenu__nav.is-drill:not(:has(.mmenu__item.open)) .mmenu__item { border-bottom-color: var(--line); }
@media (prefers-reduced-motion: reduce) { .mmenu__item > .brx-submenu-toggle { transition: none !important; } }