/* ==========================================================================
   Mega menu — Sitoo Design System 1.0 (Figma module/mega_menu)
   Mobile-first; desktop navigation from 1024px.

   Token mapping Figma → theme (all theme vars from css/generic/*):
     Text/text-foreground, Border/border-positive  #102228 → --brand-dark_blue
     Background/background-base                    #fff    → --brand-white
     Background/background-surface                 #f5f6f7 → --gray-10
     Background/background-accent                  #fdca29 → --brand-yellow
     Contrast/contrast-low                         #e7e9ea → --gray-15
     Text/text-placeholder                         #838c90 → --gray-50
     Gap/*            → --gap-xxs/xs/s/m/xl/2xl, Section-gap-global → --gap-global
     Padding/padding-x-large 24 → --padding-xl, padding-small 12 → --padding-s,
     padding-xx-large 32 → --padding-2xl
     Margin/margin-x-small 24→32  → --margin-xs
     Margin/margin-x-large 80@1920 → --margin-xl
     Desktop panel spacing + mobile side padding follow the customer prototype
     (Sizes 9033:101971) as local --mm-* variables — see "Desktop panel layout".

   FLAG: the DS 1.0 type sizes below have no exact equivalent in
   css/elements/_typography.css (theme classes are fluid clamp() and land on other
   values, e.g. .heading-m = 26px @1920 vs Figma 24px). They are kept as local
   --mm-* tokens with the exact Figma values until global DS 1.0 type tokens exist.
   ========================================================================== */

.mega-menu {
  /* Mobile (375) values — from the customer prototype ("Sitoo – To Sitoo", Menu-Mobile),
     which supersedes the smaller DS 1.0 mobile variables (12/14/18). */
  --mm-fs-nav: 14px;          /* Utility/label-medium */
  --mm-fs-accordion: 22px;    /* accordion title, Bold, line-height 1 */
  --mm-fs-explore: 20px;      /* column 1 links, Bold, line-height 1 (desktop: Heading/small) */
  --mm-fs-heading-xs: 20px;   /* CTA title */
  --mm-fs-text-xxl: 24px;     /* Text/text-xx-large */
  --mm-fs-text-s: 16px;       /* list links, Text/small */
  --mm-fs-text-xs: 14px;      /* column titles / CTA subtitle */
  --mm-fs-label-l: 14px;      /* Utility/label-large (pagination) */

  --mm-color: var(--brand-dark_blue);
  --mm-bg: transparent;
  --mm-divider: var(--gray-10);   /* prototype Line 46 / accordion borders #F5F6F7 */
  --mm-ease: cubic-bezier(.4, 0, .2, 1);
  /* Motion from the customer prototype (Figma "Sitoo – To Sitoo", Menu-dark) */
  --mm-ease-menu: cubic-bezier(.5, 0, .5, 1);           /* sheet, content fade, CTA */
  --mm-ease-link: cubic-bezier(.47, .14, .335, .965);   /* panel link hovers */
  --mm-bar-height: 73px;          /* mobile: 64px bar (72 while open) + divider */
  --mm-side: 24px;                /* mobile drawer/search side padding — 24 at 375 and 768 (prototype Sizes) */

  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 5000;
  color: var(--mm-color);
  transition: transform .45s var(--mm-ease);
}

@media (min-width: 1024px) {
  .mega-menu {
    --mm-fs-explore: 26px;    /* prototype (all desktop sizes); DS Heading/small = 24 */
    --mm-fs-heading-xs: 20px;
    --mm-fs-text-xxl: 28px;
    --mm-fs-text-s: 16px;
    --mm-fs-text-xs: 14px;
    --mm-fs-label-l: 16px;
  }
}

.mega-menu *,
.mega-menu *::before,
.mega-menu *::after {
  box-sizing: border-box;
}

.mega-menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.mega-menu p {
  margin: 0;
}

.mega-menu a {
  color: inherit;
  text-decoration: none;
}

.mega-menu button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

.mm-visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.mm-skip-link {
  position: absolute;
  left: var(--margin-xs);
  top: -100px;
  z-index: 2;
  padding: var(--padding-s) var(--padding-m);
  background: var(--brand-yellow);
  color: var(--brand-dark_blue) !important;
  font-weight: 700;
}

.mm-skip-link:focus {
  top: var(--gap-xs);
}

/* ---------- States: scroll / dark hero / open ---------- */

.mega-menu.is-hidden {
  transform: translateY(-100%);
}

.mega-menu.is-scrolled,
.mega-menu.is-open {
  --mm-bg: var(--brand-white);
}

/* White text + icons on a dark hero (Figma "Closed – on dark hero"), only while
   transparent at the top of the page and nothing is open. */
.mega-menu.is-negative:not(.is-open):not(.is-scrolled) {
  --mm-color: var(--brand-white);
}

/* ---------- Navbar ---------- */

.mm-bar {
  position: relative;
  z-index: 2;
  background: var(--mm-bg);
  /* Logo, links and icons inherit this colour, so white → dark on a dark hero fades
     with the background (prototype Menu-light, 600ms) instead of snapping. */
  color: var(--mm-color);
  transition: background-color .6s var(--mm-ease-menu), color .6s var(--mm-ease-menu);
}

/* Page overlay while a panel or search is open (prototype "Overlay": #102228).
   Opacity is set in the editor (Styling → Page overlay opacity, default 6%).
   pointer-events: none — clicking or hovering the page counts as outside the menu. */
.mm-overlay {
  position: fixed;
  inset: 0;
  z-index: -1;
  background: var(--brand-dark_blue);
  opacity: 0;
  pointer-events: none;
  transition: opacity .6s var(--mm-ease-menu);
}

.mega-menu.is-open .mm-overlay {
  opacity: var(--mm-overlay-opacity, .06);
}

.mm-bar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--padding-m) var(--margin-xs);
  transition: padding-bottom .6s var(--mm-ease-menu);
}

/* Prototype Menu-Mobile: 64px bar, grows to 72px while the menu/search is open */
.mega-menu.is-open .mm-bar__inner {
  padding-bottom: var(--padding-xl);
}

@media (min-width: 1024px) {
  .mega-menu {
    --mm-bar-height: 81px;
  }

  /* prototype: 24px vertical / 32px horizontal at 1024, 1440 and 1920 */
  .mm-bar__inner,
  .mega-menu.is-open .mm-bar__inner {
    padding: var(--padding-xl) var(--padding-2xl);
  }
}

.mm-logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  color: inherit !important; /* inherits the animated bar colour */
}

.mm-logo__svg {
  display: block;
  width: 108px;
  height: 32px;
}

.mm-bar__right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--margin-xs);
}

/* Prototype: no divider while the bar is transparent; it fades in with the white
   sheet (and stays on the white scrolled bar). */
.mm-divider {
  height: 1px;
  background: var(--mm-divider);
  opacity: 0;
  transition: opacity .6s var(--mm-ease-menu);
}

.mega-menu.is-open .mm-divider,
.mega-menu.is-scrolled .mm-divider {
  opacity: 1;
}

/* Top-level links (desktop only) */
.mm-nav {
  display: none;
}

.mm-nav__list {
  display: flex;
  align-items: center;
  gap: var(--gap-xl);
}

.mm-nav__link {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 var(--padding-s);
  color: inherit !important;
}

.mm-nav__text {
  font-size: var(--mm-fs-nav);
  font-weight: 700;
  line-height: 1.56;
  text-transform: uppercase;
  white-space: nowrap;
  color: inherit;
}

/* 2px underline under the label: active/open = full width, hover grows from centre */
.mm-nav__text::after {
  content: "";
  display: block;
  height: 2px;
  background: currentColor;
  margin: 0 2px; /* prototype: line is inset 2px from the label edges */
  opacity: 0;
  transform: scaleX(0);
  transition: transform .3s ease-out, opacity .3s ease-out;
}

.mm-nav__link:hover .mm-nav__text::after,
.mm-nav__link:focus-visible .mm-nav__text::after,
.mm-nav__link[aria-expanded="true"] .mm-nav__text::after,
.mm-nav__link[aria-current="page"] .mm-nav__text::after {
  opacity: 1;
  transform: scaleX(1);
}

/* On a dark hero the label fades white → dark as the white sheet opens. The underline
   takes the final dark colour straight away so it never flashes white first — while
   open, and on hover of items that open a panel (hover opens it on desktop). */
.mega-menu.is-open .mm-nav__text::after {
  background: var(--brand-dark_blue);
}

@media (hover: hover) and (pointer: fine) and (min-width: 1024px) {
  .mm-nav__link[data-mm-panel-toggle]:hover .mm-nav__text::after {
    background: var(--brand-dark_blue);
  }
}

/* Icon buttons */
.mm-actions {
  display: flex;
  align-items: center;
  gap: var(--gap-s);
  /* durations set from module.js (mobile open/close sequence) */
  transition: opacity .6s var(--mm-ease-menu);
}

.mm-actions.is-faded {
  opacity: 0;
}

.mm-icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  color: inherit !important;
}

.mm-icon {
  display: block;
  width: 24px;
  height: 24px;
}

/* Hamburger (two 20×2 lines at y 10/16) morphs into an X — prototype MenuIcon, 600ms */
.mm-burger {
  position: relative;
  display: block;
  width: 24px;
  height: 24px;
}

.mm-burger span {
  position: absolute;
  left: 2px;
  width: 20px;
  height: 2px;
  background: currentColor;
  transition: top .6s var(--mm-ease-menu), transform .6s var(--mm-ease-menu);
}

.mm-burger span:first-child {
  top: 9px;
}

.mm-burger span:last-child {
  top: 15px;
}

/* X while the drawer is open — and while the mobile search is open, where the
   hamburger closes the search (prototype Menu-Mobile Search/Open) */
.mm-menu-toggle[aria-expanded="true"] .mm-burger span:first-child,
.mega-menu.is-search-open .mm-burger span:first-child {
  top: 12px;
  transform: rotate(45deg);
}

.mm-menu-toggle[aria-expanded="true"] .mm-burger span:last-child,
.mega-menu.is-search-open .mm-burger span:last-child {
  top: 12px;
  transform: rotate(-45deg);
}

/* Search icon ⇄ close (prototype Menu/Search Default → Close, smart animate 600ms).
   SVG geometry is the X; the magnifier is built from it with transforms:
   - lens: full size, shrinks into the centre and fades out when open
   - a ("\\"): scaled to the 4px handle at 17–21 (translate 15, scale 1/3), grows to 6–18
   - b ("/"): a 2px stub in the centre, invisible, grows + fades in
   Strokes keep 2px while scaling (non-scaling-stroke). */
.mm-sicon__glass,
.mm-sicon__lens,
.mm-sicon__a,
.mm-sicon__b {
  transition: transform .6s var(--mm-ease-menu), opacity .6s var(--mm-ease-menu);
}

.mm-sicon__lens,
.mm-sicon__a,
.mm-sicon__b {
  vector-effect: non-scaling-stroke;
}

.mm-sicon__glass {
  transform-origin: 11.5px 11.5px;
}

.mm-sicon__lens {
  transform-origin: 12px 12px;
}

.mm-sicon__a {
  transform-origin: 0 0;
  transform: translate(15px, 15px) scale(.3333);
}

.mm-sicon__b {
  transform-origin: 12px 12px;
  transform: scale(.1667);
  opacity: 0;
}

.mm-search-toggle[aria-expanded="true"] .mm-sicon__lens {
  transform: scale(.12);
  opacity: 0;
}

.mm-search-toggle[aria-expanded="true"] .mm-sicon__a {
  transform: none;
}

.mm-search-toggle[aria-expanded="true"] .mm-sicon__b {
  transform: none;
  opacity: 1;
}

@media (hover: hover) {
  /* Hamburger hover (prototype MenuIcon Hover): the lines spread 2px, 300ms ease-out */
  .mega-menu:not(.is-search-open) .mm-menu-toggle[aria-expanded="false"]:hover .mm-burger span {
    transition-duration: .3s;
    transition-timing-function: ease-out;
  }

  .mega-menu:not(.is-search-open) .mm-menu-toggle[aria-expanded="false"]:hover .mm-burger span:first-child {
    top: 7px;
  }

  .mega-menu:not(.is-search-open) .mm-menu-toggle[aria-expanded="false"]:hover .mm-burger span:last-child {
    top: 17px;
  }

  /* prototype Search=hover: lens 17 → 14px, handle follows (600ms) */
  .mm-search-toggle[aria-expanded="false"]:hover .mm-sicon__glass {
    transform: scale(.82);
  }
}

/* The search icon fades out while the mobile menu or mobile search is open */
.mm-search-toggle {
  transition: opacity .6s var(--mm-ease-menu);
}

.mega-menu.is-drawer-open .mm-search-toggle {
  opacity: 0;
  pointer-events: none;
}

@media (max-width: 1023px) {
  .mega-menu.is-search-open .mm-search-toggle {
    opacity: 0;
    pointer-events: none;
  }
}

.mega-menu :focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* The search input signals focus through its underline instead of an outline */
.mega-menu .mm-search-field__control:focus,
.mega-menu .mm-search-field__control:focus-visible {
  outline: none;
}

@media (min-width: 1024px) {
  .mm-nav {
    display: block;
  }

  .mm-menu-toggle {
    display: none;
  }

  .mm-actions {
    gap: var(--margin-xs);
  }
}

/* ---------- Dropdown container ---------- */

.mm-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 0;
  overflow: hidden;
  /* Prototype (Menu-dark Start → Solution Start, smart animate): the white background
     fades in while the sheet grows, and fades out while it collapses. */
  background-color: rgba(255, 255, 255, 0);
  /* duration is set per state from module.js (editor fields: Styling → Animation) */
  transition: height .6s var(--mm-ease-menu), background-color .6s var(--mm-ease-menu);
}

.mega-menu.is-open .mm-dropdown {
  background-color: var(--brand-white);
}

/* No bottom line on the sheet (prototype has none). The former inset box-shadow was
   fully opaque while the background was still fading in, so on a dark hero it showed
   as a white line sliding down with the sheet. */

/* Panels are stacked in the sheet so the outgoing and incoming panel can cross-fade
   while the sheet animates to the new height. */
.mm-panel,
.mm-search,
.mm-drawer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  opacity: 0;
  transition: opacity var(--mm-fade-in, .8s) var(--mm-ease-menu);
}

.mm-panel.is-visible,
.mm-search.is-visible,
.mm-drawer.is-visible {
  opacity: 1;
}

.mm-panel[hidden],
.mm-search[hidden],
.mm-drawer[hidden] {
  display: none;
}

@keyframes mm-reveal {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .mega-menu,
  .mega-menu *,
  .mega-menu *::before,
  .mega-menu *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* ---------- Shared typography inside panels ---------- */

/* Column titles: 14px Bold, line-height 1 (prototype NewMenuText "Lable") */
.mm-group-heading {
  font-size: var(--mm-fs-text-xs);
  font-weight: 700;
  line-height: 1;
  color: var(--brand-dark_blue);
}

/* Hover underline (2px for large links, 1px for list links) */
.mm-line-link {
  display: inline;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0 2px;
  padding-bottom: var(--gap-xxs);
  transition: background-size .4s var(--mm-ease-link);
}

.mm-line-link--thin {
  background-size: 0 1px;
}

.mm-line-link:hover,
.mm-line-link:focus-visible,
.mm-quicklink:hover .mm-line-link,
.mm-quicklink:focus-visible .mm-line-link {
  background-size: 100% 2px;
}

.mm-line-link--thin:hover,
.mm-line-link--thin:focus-visible,
.mm-quicklink:hover .mm-line-link--thin,
.mm-quicklink:focus-visible .mm-line-link--thin {
  background-size: 100% 1px;
}

/* ---------- Mega panel content (shared by desktop panel + mobile accordion) ---------- */

.mm-panel__grid {
  display: flex;
  flex-direction: column;
  gap: var(--gap-xl);
}

.mm-panel__links {
  display: flex;
  flex-direction: column;
  gap: var(--gap-xl);
}

.mm-explore,
.mm-list {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--gap-s);
}

.mm-explore__list {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--gap-m);
}

/* Heading/small (desktop 24) · Heading/x-small (mobile 18) */
/* List items are flex so the theme's li line-height adds no extra strut space */
.mm-explore__list > li,
.mm-list__links > li,
.mm-quicklinks__list > li {
  display: flex;
}

.mm-explore__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  font-size: var(--mm-fs-explore);
  font-weight: 700;
  line-height: 1;
  color: var(--brand-dark_blue);
}

/* Hover (prototype NewMenuText Large, 400ms): an 18px 45° arrow slides in diagonally
   and fades in on the left while the label shifts 26px right (18 arrow + 8 gap). */
.mm-explore__text {
  color: inherit;
  font: inherit;
  transition: transform .4s var(--mm-ease-link);
}

.mm-explore__arrow {
  position: absolute;
  top: 50%;
  left: 0;
  width: 18px;
  height: 18px;
  margin-top: -9px;
  overflow: hidden;
  opacity: 0;
  transition: opacity .4s var(--mm-ease-link);
}

.mm-explore__link:hover .mm-explore__text,
.mm-explore__link:focus-visible .mm-explore__text {
  transform: translateX(26px);
}

.mm-explore__link:hover .mm-explore__arrow,
.mm-explore__link:focus-visible .mm-explore__arrow {
  opacity: 1;
}

/* Shared diagonal arrow swap (explore links, quicklinks): the visible arrow leaves
   top-right while a second one enters from bottom-left. */
.mm-arrow-in,
.mm-arrow-out {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  transition: transform .4s var(--mm-ease-link);
}

.mm-arrow-in {
  transform: translate(-100%, 100%);
}

.mm-explore__link:hover .mm-arrow-in,
.mm-explore__link:focus-visible .mm-arrow-in,
.mm-quicklink:hover .mm-arrow-in,
.mm-quicklink:focus-visible .mm-arrow-in {
  transform: translate(0, 0);
}

.mm-explore__link:hover .mm-arrow-out,
.mm-explore__link:focus-visible .mm-arrow-out,
.mm-quicklink:hover .mm-arrow-out,
.mm-quicklink:focus-visible .mm-arrow-out {
  transform: translate(100%, -100%);
}

.mm-lists {
  display: flex;
  flex-direction: column;
  gap: var(--gap-2xl);
}

.mm-list__links {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--gap-xs);
}

/* Text/small */
.mm-list__link {
  font-size: var(--mm-fs-text-s);
  font-weight: 300;
  line-height: 1.375; /* 22px at 16px — prototype list rows are 26px (22 + 4 underline gap) */
  color: var(--brand-dark_blue);
}

/* CTA box (menu/mega-cta) */
.mm-cta {
  display: flex;
  align-items: center;
  gap: var(--gap-xs);
  padding: var(--padding-xl);
  background: var(--brand-yellow);
  color: var(--brand-dark_blue) !important;
  align-self: stretch;
}

.mm-cta__content {
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  min-width: 0;
}

/* Utility/button */
.mm-cta__title {
  font-size: var(--mm-fs-heading-xs);
  font-weight: 700;
  line-height: 1;
  color: inherit;
}

/* Text/x-small */
.mm-cta__subtitle {
  font-size: var(--mm-fs-text-xs);
  font-weight: 300;
  line-height: 1.4;
  color: inherit;
}

/* Animated 45° arrow — same mechanic as .btn-icon-animation-first/second */
.mm-cta__arrow {
  position: relative;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  overflow: hidden;
}

.mm-cta__arrow-icon {
  position: absolute;
  inset: 0;
  width: 32px;
  height: 32px;
  transition: transform .4s var(--mm-ease-menu);
}

.mm-cta__arrow-icon--in {
  transform: translate(-100%, 100%);
}

.mm-cta:hover .mm-cta__arrow-icon--in,
.mm-cta:focus-visible .mm-cta__arrow-icon--in {
  transform: translate(0, 0);
}

.mm-cta:hover .mm-cta__arrow-icon--out,
.mm-cta:focus-visible .mm-cta__arrow-icon--out {
  transform: translate(100%, -100%);
}

/* ---------- Desktop panel layout ----------
   Customer prototype "Sitoo – To Sitoo", section Sizes (9033:101971):
            padding   explore  gap   list gap  CTA
     1024   64 / 64   212      64    80        255, own row bottom-right (40px above)
     1440   80 / 136  235      32    64        228, right of the lists
     1920   80 / 164  330      120   136       280, right of the lists
   Lists hug their content and take the remaining width; below 1024 the mobile
   drawer is used (768 = mobile layout). */

.mm-panel {
  display: none;
}

@media (min-width: 1024px) {
  .mega-menu {
    --mm-panel-pad-y: 64px;
    --mm-panel-pad-x: 64px;
    --mm-explore-w: 212px;
    --mm-panel-gap: 64px;
    --mm-lists-gap: 80px;
    --mm-cta-w: 255px;
  }

  .mm-panel {
    display: block;
  }

  .mm-panel__inner {
    padding: var(--mm-panel-pad-y) var(--mm-panel-pad-x);
  }

  /* 1024–1439: links row, CTA on its own row aligned bottom-right */
  .mm-panel__grid {
    display: flex;
    flex-direction: column;
    gap: var(--gap-global);
  }

  .mm-panel__links {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: var(--mm-panel-gap);
    flex: 1 1 auto;
    min-width: 0;
  }

  .mm-explore {
    flex: 0 0 var(--mm-explore-w);
    min-width: 0;
  }

  .mm-lists {
    display: flex;
    align-items: flex-start;
    flex-direction: row;
    gap: var(--mm-lists-gap);
    flex: 1 1 auto;
    min-width: 0;
  }

  .mm-list {
    flex: 0 1 auto;
    min-width: 0;
  }

  .mm-cta {
    flex: 0 0 auto;
    width: var(--mm-cta-w);
    align-self: flex-end;
  }
}

/* 1440+: CTA moves up next to the lists */
@media (min-width: 1440px) {
  .mega-menu {
    --mm-panel-pad-y: 80px;
    --mm-panel-pad-x: 136px;
    --mm-explore-w: 235px;
    --mm-panel-gap: 32px;
    --mm-lists-gap: 64px;
    --mm-cta-w: 228px;
  }

  .mm-panel__grid {
    flex-direction: row;
    align-items: flex-start;
    gap: var(--mm-panel-gap);
  }

  .mm-cta {
    align-self: flex-start;
  }
}

@media (min-width: 1920px) {
  .mega-menu {
    --mm-panel-pad-x: 164px;
    --mm-explore-w: 330px;
    --mm-panel-gap: 120px;
    --mm-lists-gap: 136px;
    --mm-cta-w: 280px;
  }
}

/* ---------- Mobile drawer / accordion ---------- */

/* Prototype Menu-Mobile: the white sheet always fills the viewport below the bar,
   regardless of how many items are open; the content scrolls inside it. The sheet
   (.mm-dropdown) animates to this panel's height from module.js. */
.mm-drawer {
  height: calc(100vh - var(--mm-bar-height));
  height: calc(100dvh - var(--mm-bar-height));
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-bottom: var(--padding-xl);
}

@media (min-width: 1024px) {
  .mm-drawer {
    display: none !important;
  }
}

.mm-accordion__item {
  border-bottom: 1px solid var(--mm-divider);
  transition: background-color .4s ease-out, border-color .4s ease-out;
}

.mm-accordion__item.is-expanded {
  background: var(--gray-10);
  border-bottom-color: transparent;
}

/* 32px top/bottom when closed (88px row); 24px gap to the content when expanded */
.mm-accordion__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-m);
  width: 100%;
  padding: var(--padding-2xl) var(--mm-side);
  text-align: left;
  transition: padding-bottom .4s ease-out;
}

.mm-accordion__header[aria-expanded="true"] {
  padding-bottom: var(--padding-xl);
}

.mm-accordion__title {
  font-size: var(--mm-fs-accordion);
  font-weight: 700;
  line-height: 1;
  color: var(--brand-dark_blue);
}

/* Plus / minus: two 16×2 bars in a 24 box (prototype Icon, Rectangle 368/369) */
.mm-plus {
  position: relative;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
}

.mm-plus::before,
.mm-plus::after {
  content: "";
  position: absolute;
  background: var(--brand-dark_blue);
  transition: transform .4s ease-out;
}

.mm-plus::before {
  left: 4px;
  top: 11px;
  width: 16px;
  height: 2px;
}

.mm-plus::after {
  left: 11px;
  top: 4px;
  width: 2px;
  height: 16px;
}

.mm-accordion__header[aria-expanded="true"] .mm-plus::after {
  transform: scaleY(0);
}

/* Height is animated from module.js (400ms ease-out, prototype MenuText → Open) */
.mm-accordion__panel {
  overflow: hidden;
  transition: height .4s ease-out;
}

.mm-accordion__panel > .mm-panel__grid {
  padding: 0 var(--mm-side) var(--padding-2xl);
}

.mm-accordion__panel[hidden] {
  display: none;
}

.mm-drawer__cta {
  display: flex;
  padding: var(--gap-xl) var(--mm-side) 0;
}

.mm-drawer__cta .mm-cta {
  flex: 1 1 auto;
}

/* ---------- Search panel ---------- */

.mm-search {
  max-height: calc(100vh - var(--mm-bar-height));
  max-height: calc(100dvh - var(--mm-bar-height));
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* Mobile: full-height white sheet, same as the drawer */
@media (max-width: 1023px) {
  .mm-search {
    height: calc(100vh - var(--mm-bar-height));
    height: calc(100dvh - var(--mm-bar-height));
  }
}

.mm-search__inner {
  padding: var(--gap-global) var(--mm-side);
}

.mm-search__column {
  display: flex;
  flex-direction: column;
  gap: var(--gap-xl);
}

@media (min-width: 1024px) {
  .mm-search__inner {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gap-global);
    padding: var(--mm-panel-pad-y) var(--mm-panel-pad-x);
  }

  /* col 4 / span 6 = 780px at 1920 (--rich_text_width) */
  .mm-search__column {
    grid-column: 4 / span 6;
    gap: var(--gap-global);
  }
}

/* Search field (menu/search-field) — shared with the search results page */
.mm-search-field {
  display: flex;
  flex-direction: column;
  gap: var(--gap-m);
  margin: 0;
}

.mm-search-field__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-m);
}

.mm-search-field__input {
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  min-width: 0;
  gap: var(--gap-m);
  margin: 0;
  color: var(--brand-dark_blue);
}

.mm-search-field__icon {
  flex-shrink: 0;
}

/* Text/xx-large */
.mm-search-field__control {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  outline: 0;
  background: transparent;
  box-shadow: none;
  font-family: inherit;
  font-size: var(--mm-fs-text-xxl);
  font-weight: 300;
  line-height: 1.4;
  color: var(--brand-dark_blue);
  caret-color: var(--brand-dark_blue);
  -webkit-appearance: none;
  appearance: none;
}

.mm-search-field__control::placeholder {
  color: var(--gray-50);
  opacity: 1;
}

.mm-search-field__control::-webkit-search-cancel-button,
.mm-search-field__control::-webkit-search-decoration {
  -webkit-appearance: none;
}

.mm-search-field__clear {
  flex-shrink: 0;
  color: var(--brand-dark_blue) !important;
}

.mm-search-field__clear[hidden] {
  display: none;
}

/* Prototype close-bg-hover: the dark circle grows 20 → 22px, the X stays */
.mm-search-field__clear-bg {
  transform-box: fill-box;
  transform-origin: center;
  transition: transform .6s var(--mm-ease-menu);
}

.mm-search-field__clear:hover .mm-search-field__clear-bg {
  transform: scale(1.1);
}

.mm-search-field__line {
  height: 1px;
  background: var(--brand-dark_blue);
}

.mm-search-field:focus-within .mm-search-field__line {
  box-shadow: 0 1px 0 var(--brand-dark_blue);
}

/* Quicklinks (menu/search-quicklink) */
.mm-quicklinks {
  display: flex;
  flex-direction: column;
  gap: var(--gap-s);
}

.mm-quicklinks[hidden] {
  display: none;
}

.mm-quicklinks__list {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--gap-xs);
}

.mm-quicklink {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-xs);
  font-size: var(--mm-fs-text-s);
  font-weight: 300;
  line-height: 1.4;
  color: var(--brand-dark_blue) !important;
}

.mm-quicklink .mm-line-link {
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
}

.mm-quicklink__arrow {
  position: relative;
  flex-shrink: 0;
  width: 10px;
  height: 10px;
  overflow: hidden;
}

/* Suggestions while typing (menu/search-suggestion) */
.mm-suggestions {
  display: flex;
  flex-direction: column;
  gap: var(--gap-m);
}

.mm-suggestions[hidden] {
  display: none;
}

/* Swapping quicklinks ↔ results fades the new content in (prototype Search-Input, 800ms) */
.mm-suggestions:not([hidden]),
.mm-quicklinks:not([hidden]) {
  animation: mm-reveal var(--mm-fade-in, .8s) var(--mm-ease-menu) both;
}

.mm-suggestions__list {
  display: flex;
  flex-direction: column;
  gap: var(--gap-m);
}

.mm-suggestion {
  display: flex;
  flex-direction: column;
  gap: var(--gap-m);
}

.mm-suggestion::after {
  content: "";
  display: block;
  height: 1px;
  background: #dee0e2; /* prototype result divider (Line 43) */
}

.mm-suggestion__link {
  display: block;
  color: var(--brand-dark_blue) !important;
}

/* Text/small-strong */
.mm-suggestion__title {
  display: block;
  font-size: var(--mm-fs-text-s);
  font-weight: 700;
  line-height: 1.4;
  color: inherit;
}

/* Text/small, truncated (1 line desktop, 2 lines mobile) */
.mm-suggestion__desc {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  font-size: var(--mm-fs-text-s);
  font-weight: 300;
  line-height: 1.4;
  color: inherit;
}

@media (min-width: 1024px) {
  .mm-suggestion__desc {
    -webkit-line-clamp: 1;
  }
}

.mm-suggestion__desc strong,
.mm-suggestion__title strong {
  font-weight: 700;
  color: inherit;
}

.mm-suggestion__link:hover .mm-suggestion__title,
.mm-suggestion.is-active .mm-suggestion__title {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.mm-suggestions__status {
  font-size: var(--mm-fs-text-s);
  font-weight: 300;
  line-height: 1.4;
  color: var(--brand-dark_blue);
}

/* Lock page scroll while the mobile drawer / search is open */
html.mm-scroll-lock,
html.mm-scroll-lock body {
  overflow: hidden;
}

@media (min-width: 1024px) {
  html.mm-scroll-lock,
  html.mm-scroll-lock body {
    overflow: visible;
  }
}