{% import '../_variables.css' as var %}

/* Component */

.mnav {
  display: flex;
}

/* 'Open' button */

.mnav__open {
  appearance: none;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  outline-offset: 1px;
}

.mnav__open,
.mnav__open:hover {
  text-decoration: none;
}

/* Overlay */

.mnav__overlay {
  display: none;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 7;
}

.mnav-active .mnav__overlay {
  display: block;
  animation: .2s ease-in-out forwards mnavOverlay;
}

@keyframes mnavOverlay {
  from {
    opacity: 0;
  }
  to {
    opacity: .5;
  }
}

/* Popup */

.mnav__popup {
  display: none;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 8;
  width: 100%;
  max-width: 400px;
  padding-top: calc(px + rem);
  overflow-x: hidden;
  overflow-y: auto;
  box-shadow: -32px 0 64px rgba(, .05), -16px 0 32px rgba(, .05);
}

{% if var.rtl_ready %}
  [dir="rtl"] .mnav__popup {
    right: auto;
    left: 0;
    box-shadow: 32px 0 64px rgba(, .05), 16px 0 32px rgba(, .05);
  }
{% endif %}

.mnav-active .mnav__popup {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  animation: .38s cubic-bezier(0.16, 1, 0.3, 1) forwards mnavPopup;
}

{% if var.rtl_ready %}
  [dir="rtl"] .mnav-active .mnav__popup {
    animation: .38s cubic-bezier(0.16, 1, 0.3, 1) forwards mnavPopup_rtl;
  }
{% endif %}

@keyframes mnavPopup {
  from {
    opacity: 0;
    transform: translateX(100%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

{% if var.rtl_ready %}
  @keyframes mnavPopup_rtl {
    from {
      opacity: 0;
      transform: translateX(-100%);
    }
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }
{% endif %}

@media (max-width: px) {
  .mnav__popup {
    width: auto;
    max-width: none;
    left: 0;
  }
  
  .mnav-active .mnav__popup {
    animation: .2s ease-in-out forwards uiPop;
  }

  {% if var.rtl_ready %}
    [dir="rtl"] .mnav__popup {
      right: 0;
      left: 0;
    }
  {% endif %}
}

/* 'Close' button */

.mnav__close {
  position: absolute;
  top: px;
  right: px;
  padding: 0;
  appearance: none;
  background: none;
  border: 0;
  cursor: pointer;
}

.mnav__close,
.mnav__close:hover {
  text-decoration: none;
}

{% if var.rtl_ready %}
  [dir="rtl"] .mnav__close {
    right: auto;
    left: px;
  }
{% endif %}


/* Section */

.mnav__section {
  padding: px;
  border-bottom: 1px solid;
}

.mnav__section--last {
  border-bottom: none;
}

/* Menu */

.mnav__menu {
  padding: 0;
  border-bottom: none;
  text-align: start;
}

/* Animation */

@keyframes mnavMenu {
  from {
    opacity: 0;
    transform: translateY(-10px) translateZ(0);
  }
  to {
    opacity: 1;
    transform: translateY(0) translateZ(0);
  }
}

/* List */

.mnav__menu__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.mnav__menu__list--child {
  display: none;
}

.mnav__menu__item--expanded > .mnav__menu__list--child {
  display: block;
  animation: .2s ease-in-out forwards mnavMenu;
}

/* Item */

.mnav__menu li {
  position: relative;
}

.mnav__menu__list--level1 > li:not(:first-child) {
  border-top: 1px solid;
}

.mnav__menu__item--expanded {
  box-shadow: ;
}

/* Label */

.mnav__menu__label {
  display: flex;
  align-items: center;
  justify-content: stretch;
  padding: 0 px;
}

/* Link */

.mnav__menu__link {
  display: block;
  width: 100%;
  padding: .83rem 0;
  position: relative;
  text-decoration: none;
}

.mnav__menu__link:hover {
  text-decoration: none;
}

.mnav__menu__list--level2 .mnav__menu__link {
  font-size: rem;
}

.mnav__menu__item--active-branch > .mnav__menu__label > .mnav__menu__link,
.mnav__menu__item--active  > .mnav__menu__label > .mnav__menu__link {
  font-family: ;
  font-style: ;
  font-weight: ;
}

.mnav__menu__item--active-branch > .mnav__menu__label > .mnav__menu__link:before,
.mnav__menu__item--active > .mnav__menu__label > .mnav__menu__link:before {
  content: '';
  display: block;
  width: 4px;
  height: 4px;
  position: absolute;
  left: -.67rem;
  top: 50%;
  margin-top: -2px;
  background: ;
  border-radius: ;
}

{% if var.rtl_ready %}
  [dir="rtl"] .mnav__menu__item--active-branch > .mnav__menu__label > .mnav__menu__link:before,
  [dir="rtl"] .mnav__menu__item--active > .mnav__menu__label > .mnav__menu__link:before {
    left: auto;
    right: -.67rem;
  }
{% endif %}

.mnav__menu__link .badge {
  margin-left: 4px;
}

/* Toggle */

.mnav__menu__toggle {
  width: 24px;
  flex-shrink: 0;
  cursor: pointer;
}

.mnav__menu__item:not(.mnav__menu__item--expanded) > .mnav__menu__label > .mnav__menu__toggle > .mnav__menu__toggle__close-icon,
.mnav__menu__item--expanded > .mnav__menu__label > .mnav__menu__toggle > .mnav__menu__toggle__open-icon {
  display: none;
}

/* Link */

.mnav__links ul {
  margin-bottom: 0;
}

/* Icons */

.mnav__icons a {
  display: inline-flex;
  vertical-align: middle;
}

/* Light scheme */

.mnav--light .mnav__open,
.mnav--light .mnav__open:hover,
body .mnav .mnav__open--light,
body .mnav .mnav__open--light:hover {
  color: ;
}

.mnav--light .mnav__overlay {
  background: ;
}

.mnav--light .mnav__popup {
  background: ;
}

.mnav--light .mnav__close,
.mnav--light .mnav__close:hover {
  color: ;
}

.mnav--light .mnav__section {
  border-color: ;
}

.mnav--light .mnav__menu__list--level1 > li:not(:first-child) {
  border-top-color: ;
}

.mnav--light .mnav__menu__item--expanded {
  background-color: rgba(, .04);
}

.mnav--light .mnav__menu__link,
.mnav--light .mnav__menu__link:hover {
  color: ;
}

.mnav--light .mnav__menu__list--level2 .mnav__menu__link {
  color: ;
}

.mnav--light .mnav__menu__list--level2 .mnav__menu__link:hover {
  color: ;
}

.mnav--light .mnav__menu__item--active-branch > .mnav__menu__label > .mnav__menu__link,
.mnav--light .mnav__menu__item--active > .mnav__menu__label > .mnav__menu__link {
  color: ;
}

.mnav--light .mnav__menu__toggle {
  color: ;
}

/* Dark scheme */

.mnav--dark .mnav__open,
.mnav--dark .mnav__open:hover,
body .mnav .mnav__open--dark,
body .mnav .mnav__open--dark:hover {
  color: ;
}

.mnav--dark .mnav__overlay {
  background: ;
}

.mnav--dark .mnav__popup {
  background: ;
}

.mnav--dark .mnav__close,
.mnav--dark .mnav__close:hover {
  color: ;
}

.mnav--dark .mnav__section {
  border-color: ;
}

.mnav--dark .mnav__menu__list--level1 > li:not(:first-child) {
  border-top-color: ;
}

.mnav--dark .mnav__menu__item--expanded {
  background-color: rgba(, .04);
}

.mnav--dark .mnav__menu__item--active-branch > .mnav__menu__label > .mnav__menu__link,
.mnav--dark .mnav__menu__item--active > .mnav__menu__label > .mnav__menu__link {
  color: ;
}

.mnav--dark .mnav__menu__link,
.mnav--dark .mnav__menu__link:hover {
  color: ;
}

.mnav--dark .mnav__menu__list--level2 .mnav__menu__link {
  color: ;
}

.mnav--dark .mnav__menu__list--level2 .mnav__menu__link:hover {
  color: ;
}

.mnav--dark .mnav__menu__item--active-branch > .mnav__menu__label > .mnav__menu__link,
.mnav--dark .mnav__menu__item--active > .mnav__menu__label > .mnav__menu__link {
  color: ;
}

.mnav--dark .mnav__menu__toggle {
  color: ;
}

/* ══════════════════════════════════════════════════════════════
   4CEE — MOBIELE RESTYLE (Stripe-geïnspireerd)
   ══════════════════════════════════════════════════════════════

   De regels hierboven zijn het generieke, thema-brede mobile-nav-
   bestand (kleuren/marges via var.*-tokens) — hetzelfde bestand dat
   overal wordt gebruikt waar dit type mobiel menu voorkomt. In
   plaats van die regels te overschrijven, staat hieronder een apart,
   duidelijk gemarkeerd 4CEE-blok met hogere specificiteit dat overal
   wint, zodat de originele, generieke regels als referentie leesbaar
   blijven.

   Bewust behouden: het accordion-mechanisme zelf (uitklappen op
   dezelfde plek) — alleen de visuele stijl is aangepast.

   FIX (2e ronde): eerste versie gaf drie zichtbare problemen —
   1) een border-radius aan de linkerkant van het paneel, waardoor
      de rand van het scherm er "afgesneden" uitzag (dit hoort een
      randvullend paneel te zijn, zoals bij Stripe zelf — geen ronde
      hoek nodig);
   2) het actieve-pagina-bolletje oogde als een vierkant blok vóór
      de titel — op verzoek nu volledig verwijderd i.p.v. gefixt;
   3) de sluitknop steunde op var.gutter/var.ui_icon_size en kwam
      links over de eerste titel te staan — nu hardcoded, gegarandeerd
      rechtsboven met vaste marge, los van die tokens.
   ══════════════════════════════════════════════════════════════ */

/* Sluitknop: hardcoded rechtsboven, los van thema-tokens die
   blijkbaar niet klopten. Afgerond vlak met accent-tint, kruisje in
   #6E7FFB. */
.mnav__close {
  position: absolute !important;
  top: 20px !important;
  right: 20px !important;
  left: auto !important;
  z-index: 20;

  display: flex;
  align-items: center;
  justify-content: center;

  width: 40px;
  height: 40px;

  border-radius: 10px;

  transition: background-color .15s ease;
}

.mnav--light .mnav__close,
.mnav--light .mnav__close:hover {
  background: rgba(110, 127, 251, 0.10);
  color: #6E7FFB !important;
}

.mnav--light .mnav__close:hover {
  background: rgba(110, 127, 251, 0.18);
}

.mnav--dark .mnav__close,
.mnav--dark .mnav__close:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff !important;
}

.mnav--dark .mnav__close:hover {
  background: rgba(255, 255, 255, 0.2);
}

.mnav__close svg {
  width: 20px;
  height: 20px;
}

/* 4CEE-logo linksboven, verticaal gecentreerd met de sluitknop
   (zelfde top + zelfde hoogte als .mnav__close, met align-items:
   center — zo blijft het gecentreerd ongeacht de exacte logo-
   afmeting). */
.mnav__brand {
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 20;

  display: flex;
  align-items: center;

  height: 40px;
}

.mnav__brand-logo {
  display: block;
  height: 36px;
  width: auto;
}

/* Ruimte boven het menu: hardcoded, zodat de eerste titel nooit
   onder/achter de sluitknop kan komen, ongeacht wat var.gutter of
   var.ui_icon_size opleveren.
   FIX: 100px liet een te grote lege ruimte onder logo/sluitknop
   zien — teruggebracht naar 76px, net genoeg lucht na de rij van
   40px (sluitknop) op 20px (top), zonder de overdreven kloof. */
.mnav__popup {
  padding-top: 76px !important;
}

/* FIX: max-width: 400px (basisregel, zie boven) liet op bredere
   telefoons (nieuwere iPhones zijn vaak breder dan 400px) een witte
   strook links onbedekt — het paneel bleef rechts plakken, maar werd
   niet breed genoeg om het hele scherm te vullen. De bestaande
   media query op var.sm (verderop in dit bestand) had dit moeten
   opvangen, maar dekt niet elk moderne telefoonformaat. Hier
   hardgecodeerd op een ruimere 500px, zodat elk realistisch
   telefoonscherm volledig gevuld wordt. */
.mnav__popup {
  max-width: 500px !important;
}

/* FIX: het paneel bleek transparant — de hero-pagina erachter
   schemerde er dwars doorheen. De generieke basisregel
   (".mnav--light .mnav__popup { background: ; }",
   bovenaan dit bestand) leek niet door te komen. Hier hardgecodeerd
   met !important, zodat het paneel altijd een dekkende achtergrond
   heeft, los van of die theme-variabele goed resolvet. */
.mnav--light .mnav__popup {
  background: #ffffff !important;
}

.mnav--dark .mnav__popup {
  background: #030024 !important;
}

/* FIX: linker/rechter-marge van de content bleek ook weg te vallen
   — zelfde soort probleem als de ontbrekende achtergrond hierboven.
   Hardgecodeerd op 20px, los van var.gutter. */
/* FIX: had eerder ZOWEL .mnav__section als .mnav__menu__label 20px
   padding gegeven — die stapelden op elkaar (40px voor de tekst),
   terwijl de streepjeslijn (op de <li> zelf) maar één keer die
   inspringing kreeg. Vandaar dat tekst en lijn niet gelijk
   uitlijnden. Nu maar één bron: de menu-container zelf, en de
   tekst zonder eigen extra padding — zo starten lijn én tekst op
   exact dezelfde x-positie. */
.mnav .mnav__menu {
  padding: 0 20px !important;
}

.mnav .mnav__menu__label {
  padding: 0 !important;
}

/* Scheidingslijnen tussen top-level items: van een dikke effen lijn
   naar een streepjeslijn (dashed), zoals bij Stripe.
   FIX: eerst "dotted" gebruikt — dat geeft ronde puntjes, geen
   langwerpige streepjes. Nu "dashed". */
.mnav--light .mnav__menu__list--level1 > li:not(:first-child) {
  border-top-style: dashed;
  border-top-width: 1px;
  border-top-color: #e4e5ef;
}

.mnav--dark .mnav__menu__list--level1 > li:not(:first-child) {
  border-top-style: dashed;
  border-top-width: 1px;
  border-top-color: rgba(255, 255, 255, 0.14);
}

/* Item-tekst: expliciet 4CEE-lettertype/gewicht, i.p.v. afhankelijk
   van thema-tokens die elders al te dik bleken (zie brand-nav: max.
   gewicht 500 overal op de site).
   FIX: nog 3px extra ruimte tussen titel en stippellijn erboven,
   op verzoek (padding-top specifiek verhoogd, bottom ongewijzigd). */
.mnav .mnav__menu__link {
  font-family: 'Onest', system-ui, sans-serif;
  font-size: 17px;
  font-weight: 500;
  line-height: 1.4;
  padding-top: calc(1.35rem + 3px);
  padding-bottom: 1.35rem;
}

.mnav--light .mnav__menu__link,
.mnav--light .mnav__menu__link:hover {
  color: #030024;
}

.mnav--dark .mnav__menu__link,
.mnav--dark .mnav__menu__link:hover {
  color: #ffffff;
}

/* Sub-items (niveau 2+): iets kleiner en gedempter, duidelijk
   onderscheiden van de hoofditems. */
.mnav .mnav__menu__list--level2 .mnav__menu__link {
  font-size: 15px;
  font-weight: 400;
  padding: .8rem 0;
}

.mnav--light .mnav__menu__list--level2 .mnav__menu__link {
  color: rgba(3, 0, 36, 0.65);
}

.mnav--light .mnav__menu__list--level2 .mnav__menu__link:hover {
  color: #6A3FC8;
}

.mnav--dark .mnav__menu__list--level2 .mnav__menu__link {
  color: rgba(255, 255, 255, 0.65);
}

.mnav--dark .mnav__menu__list--level2 .mnav__menu__link:hover {
  color: #9c7fe0;
}

/* Actieve pagina: het bolletje voor de titel is op verzoek volledig
   verwijderd (oogde als een vierkant blok i.p.v. een klein rond
   accentje). Tekstgewicht blijft op het toegestane maximum van 500. */
.mnav .mnav__menu__item--active-branch > .mnav__menu__label > .mnav__menu__link,
.mnav .mnav__menu__item--active > .mnav__menu__label > .mnav__menu__link {
  font-family: 'Onest', system-ui, sans-serif;
  font-style: normal;
  font-weight: 500;
}

.mnav .mnav__menu__item--active-branch > .mnav__menu__label > .mnav__menu__link:before,
.mnav .mnav__menu__item--active > .mnav__menu__label > .mnav__menu__link:before {
  content: none;
  display: none;
}

/* Uitgeklapte staat: geen schaduw en geen achtergrondtint meer — op
   verzoek gewoon wit/transparant, net als de rest van het paneel. */
.mnav .mnav__menu__item--expanded {
  box-shadow: none;
  background-color: transparent !important;
}

/* Chevron-icoontjes: 4CEE-accentkleur i.p.v. gedempt grijs. */
.mnav--light .mnav__menu__toggle,
.mnav--dark .mnav__menu__toggle {
  color: #6E7FFB;
}