.menu>.menu__trigger {
  align-self: flex-end;
  visibility: visible;
  position: relative;
  transform: scale(1);
  z-index: 1;
}

.menu>.menu__panel {
  visibility: visible;
  position: absolute;
  transform: scale(0);
}

.menu {
  display: flex;
  flex-direction: column;
  color: var(--color-light);

  a {
    color: var(--color-light);
  }
}

.menu:has(.menu__trigger[aria-expanded='true']) {
  visibility: visible;
  position: fixed;
  inset: 0;
  transform: scale(1);
  background: linear-gradient(0deg,
      rgba(255, 255, 255, 0.3) 0%,
      rgba(255, 255, 255, 0.3) 100%),
    rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(16.5px);

  &>.menu__panel {
    visibility: visible;
    position: relative;
    transform: scale(1);
  }

  &>.menu__trigger {
    margin-block: calc(clamp(2rem, 1.65rem + 1.43vw, 3rem) + 0.5rem);
    margin-inline: calc(var(--gutter) + 0.5rem);
  }
}

.menu div.menu__panel nav.navigation ul.navigation__list {
  margin-block: 0;
  list-style: none;
}

.menu ul.wp-block-navigation-submenu {
  list-style: none;
  display: flex;
  flex-direction: column;
  visibility: hidden;
  position: absolute;
  transform: scale(0);
  padding: 0;
}

.menu ul.wp-block-navigation-submenu.is-open {
  visibility: visible;
  position: relative;
  transform: scale(1);
}

.menu ul.wp-block-navigation-submenu.is-open ul.wp-block-navigation-submenu {
  visibility: visible;
  position: relative;
  transform: scale(1);
}

/* First level menu items */

.menu div.menu__panel nav.navigation ul.navigation__list>li {
  position: relative;
  font-size: var(--size-body-s);
}

.menu div.menu__panel nav.navigation ul.navigation__list>li a {
  text-decoration: none;
  padding-inline: calc(1.25 * var(--space-l));
  padding-block: 0.5rem;
  display: inline-flex;
  align-items: center;

  & span::before {
    content: '';
    flex-shrink: 0;
    flex-grow: 0;
    display: inline-block;
    width: 6px;
    height: 6px;
    background-color: transparent;
    border-radius: 50%;
    padding-block-end: 0.1rem;
  }

  & span {
    display: flex;
    flex-wrap: nowrap;
    white-space: nowrap;
    align-items: center;
    gap: 0.5rem;
  }

  & span::after {
    transform-origin: center 45%;
    transition: transform var(--transition-base);
    content: '';
    display: inline-block;
    width: 14px;
    height: 8px;
    flex-shrink: 0;
    flex-grow: 0;
    background-color: currentColor;
    transition: background-color var(--transition-base);
    mask-image: url(../../assets/icons/chevron-down.svg);
    mask-repeat: no-repeat;
    mask-size: contain;
  }
}

.menu div.menu__panel nav.navigation ul.navigation__list>li:has(.is-open)>a>span::after {
  transform: rotate(180deg);
}

.menu div.menu__panel nav.navigation ul.navigation__list>li a:hover,
.menu div.menu__panel nav.navigation ul.navigation__list>li a:focus-visible,
.menu div.menu__panel nav.navigation ul.navigation__list>li a[aria-current='page'] {
  & span::before {
    background-color: var(--color-orange-100) !important;
  }
}

.menu div.menu__panel nav.navigation ul.navigation__list>li>ul>li:has(ul)>a {
  pointer-events: none;
  font-weight: bold;
  padding-block-start: 1rem;
}

.menu div.menu__panel nav.navigation ul.navigation__list>li>ul>li a {
  width: 100%;

  & span::after {
    content: none;
  }
}

.menu div.menu__panel nav.navigation ul.navigation__list li.show-description>a .wp-block-navigation-item__label {
  visibility: hidden;
  position: absolute;
  transform: scale(0);
}

.menu div.menu__panel nav.navigation ul.navigation__list>li>ul>li.overview>a {
  & span::after {
    content: none;
  }

  & span::before {
    width: 12px;
    height: 12px;
    background-color: currentColor;
    mask-repeat: no-repeat;
    mask-size: contain;
    mask-image: url(../../assets/icons/arrow-right.svg);
  }
}

/* Align submenu labels horizontally regardless of marker:
   the .overview row uses a 12px arrow as ::before, every other submenu
   row uses a 6px dot — without this fix, the text after the dot starts
   6px further left than after the arrow, breaking alignment.
   Add 6px end-margin to the non-overview dots so the text column starts
   at the same x. Applies to all 2nd-level submenus (About, Solutions, …). */

.menu div.menu__panel nav.navigation ul.navigation__list>li>ul>li:not(.overview)>a span::before {
  margin-inline-end: 6px;
}

/* Third level menu items */

.menu div.menu__panel nav.navigation ul.navigation__list>li>ul>li>ul>li>a {
  font-size: var(--size-button-s);
  color: rgba(255 255 255 / 0.75);
  padding-block: 0.33rem;
  /* padding-inline-start matches 2nd-level (1.5rem = 24px, set on
     line ~285 for `>li.wp-block-navigation-item>ul.wp-block-navigation-submenu>li>a`)
     so all submenu items in the Solutions panel start their text at the same x */
  padding-inline: 1.5rem 2.5rem;

  span {
    white-space: unset;
    min-width: 16.3ch;
  }

  /* Same dot+margin as 2nd-level non-overview rows — gives the marker
     block the same 12px width as the overview arrow, so text columns
     align under both "Overview" and "Solution by Technology". */
  & span::before {
    margin-inline-end: 6px;
  }
}

/* DESKTOP STYLES */

@media screen and (min-width: 64rem) {
  .menu {
    position: relative !important;
    visibility: visible !important;
    display: flex;
    align-items: start;
    color: var(--color-light);
    border-radius: 36px;
    padding: 0.5rem;

    &:after {
      content: '';
      position: absolute;
      inset: 0;
      z-index: -1;

      border-radius: 36px;
      background: rgba(255, 255, 255, 0.24);
      backdrop-filter: blur(16.5px);
    }
  }

  .menu .menu__panel {
    visibility: visible;
    position: relative;
    transform: scale(1);
  }

  .menu div.menu__panel nav.navigation ul.navigation__list {
    list-style: none;
    display: flex;
    align-items: center;
    gap: var(--space-m);
  }

  .menu ul.wp-block-navigation-submenu.is-open {
    visibility: visible;
    position: absolute;
    transform: scale(1);
    left: -0.5rem;
    top: 100%;
  }

  .menu div.menu__panel nav.navigation ul.navigation__list ul.third-level-box {
    display: grid;
    grid-template-columns: auto auto;

    &>li {
      flex-direction: column;
    }

    &>li:nth-child(1) {
      grid-column: 1 / -1;
    }

    &>li:nth-child(2) {
      grid-column: span 1;
    }

    &>li:nth-child(3) {
      grid-column: span 1;
    }
  }

  .menu div.menu__panel nav.navigation ul.navigation__list>li>ul>li>ul>li:last-child>a {
    padding-block-end: 1.5rem;
  }

  .menu .navigation__list>li>ul.wp-block-navigation-submenu {
    margin-top: 1.5rem;
    border-radius: 1rem;
    background: linear-gradient(0deg,
        rgba(255, 255, 255, 0.3) 0%,
        rgba(255, 255, 255, 0.3) 100%),
      rgba(0, 0, 0, 0.25);
    background-blend-mode: normal, multiply;
    backdrop-filter: blur(16.5px);
  }

  .menu div.menu__panel ul.navigation__list>li.wp-block-navigation-item>ul.wp-block-navigation-submenu>li>a {
    padding: 0.57rem 2.5rem 0.57rem 1.5rem;
  }

  .menu div.menu__panel ul.navigation__list>li.wp-block-navigation-item>ul.wp-block-navigation-submenu>li:first-child a {
    padding-block-start: 1.5rem;
  }

  .menu div.menu__panel ul.navigation__list>li.wp-block-navigation-item>ul.wp-block-navigation-submenu>li:not(.has-child):last-child>a {
    padding-block-end: 1.5rem;
  }

  .menu button.menu__trigger {
    visibility: hidden;
    position: absolute;
    transform: scale(0);
  }
}

/* MOBILE STYLE */

@media screen and (max-width: 64rem) {
  html.nav-is-visible {
    body {
      overflow: clip;
    }
  }

  .menu {
    overflow: auto;
  }

  .bg-rounded-blur {
    border-radius: 5rem;
    padding: 0.5rem;
    position: relative;

    &:after {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: 5rem;
      background: linear-gradient(0deg,
          rgba(255, 255, 255, 0.3) 0%,
          rgba(255, 255, 255, 0.3) 100%),
        rgba(0, 0, 0, 0.25);
      background-blend-mode: normal, multiply;
      backdrop-filter: blur(16.5px);
    }

    .nav-is-visible & {
      &:after {
        content: none;
        display: none;
      }
    }
  }

  /* Mobile menu trigger: schiefer pill with animated Menu ↔ close swap.
     Both spans share one grid cell so the button keeps a stable width
     and the toggle visually cross-fades + rotates instead of jump-cutting
     between the two states. */
  .menu .menu__trigger.button {
    --button-bg: var(--color-schiefer);
    --button-bg-hover: var(--color-schiefer);
    display: grid;
    place-items: center;
  }

  .menu .menu__trigger.button > .button-text {
    grid-area: 1 / 1;
    transition:
      opacity 220ms ease,
      transform 280ms cubic-bezier(0.4, 0, 0.2, 1);
    will-change: opacity, transform;
  }

  /* Closed: show "Menu", hide close icon (rotated into position) */
  .menu .menu__trigger[aria-expanded='false'] .navigation__toggle-label {
    opacity: 1;
    transform: rotate(0) scale(1);
    pointer-events: auto;
  }
  .menu .menu__trigger[aria-expanded='false'] .navigation__toggle-icon {
    opacity: 0;
    transform: rotate(-90deg) scale(0.4);
    pointer-events: none;
  }

  /* Open: show close icon, hide "Menu" label */
  .menu .menu__trigger[aria-expanded='true'] .navigation__toggle-label {
    opacity: 0;
    transform: scale(0.6);
    pointer-events: none;
  }
  .menu .menu__trigger[aria-expanded='true'] .navigation__toggle-icon {
    opacity: 1;
    transform: rotate(0) scale(1);
    pointer-events: auto;
  }

  /* The close SVG itself: size and color inherit from the button text */
  .menu .menu__trigger .navigation__toggle-icon svg {
    display: block;
    width: 16px;
    height: 16px;
    color: var(--color-light);
  }

  .menu div.menu__panel {
    margin-inline: calc(var(--gutter) + 0.5rem);
  }

  /*LEVEL1*/
  .menu div.menu__panel nav.navigation ul.navigation__list>li {
    position: relative;
    font-size: var(--size-body-l);
    font-weight: 300;
    flex-direction: column;
  }

  .menu div.menu__panel nav.navigation ul.navigation__list>li>a {
    padding-block: 1.5rem 0.5rem;
  }

  /*LEVEL2*/
  .menu div.menu__panel nav.navigation ul.navigation__list>li>ul>li {
    position: relative;
    font-size: var(--size-body);
    font-weight: 300;
    flex-direction: column;
  }

  .menu div.menu__panel nav.navigation ul.navigation__list>li>ul>li a {
    padding-inline: calc(1.25 * var(--space-l) + 14px);
  }

  /*LEVEL3*/
  .menu div.menu__panel nav.navigation ul.navigation__list>li>ul>li>ul>li {
    position: relative;
    font-size: var(--size-body-s);
    font-weight: 300;
    flex-direction: column;
  }

  .menu div.menu__panel nav.navigation ul.navigation__list>li>ul>li>ul>li a {
    padding-inline: calc(1.25 * var(--space-l) + 14px);
  }

  .menu div.menu__panel nav.navigation ul.navigation__list>a.button {
    margin-top: 2rem;
    margin-inline-start: calc(1.25 * var(--space-l) + 12px);
  }

  /* ─── Mobile open/close animations ────────────────────────────────
     Goal: a smooth, modern reveal instead of an instant jump.
     - Backdrop blur fades up from 0
     - Each first-level item slides down + fades in with a stagger
     - Submenus expand via grid-template-rows so the chevron-down
       gesture has a fluid "open" feeling
     We honour prefers-reduced-motion further below. */

  /* Backdrop: animate when the trigger becomes expanded */
  .menu:has(.menu__trigger[aria-expanded='true']) {
    animation: nav-backdrop-in 280ms ease-out both;
  }

  @keyframes nav-backdrop-in {
    from {
      background: rgba(0, 0, 0, 0);
      backdrop-filter: blur(0);
    }
    to {
      background: linear-gradient(0deg,
          rgba(255, 255, 255, 0.3) 0%,
          rgba(255, 255, 255, 0.3) 100%),
        rgba(0, 0, 0, 0.5);
      backdrop-filter: blur(16.5px);
    }
  }

  /* First-level menu items: cascade in from above */
  .menu:has(.menu__trigger[aria-expanded='true']) .navigation__list > li,
  .menu:has(.menu__trigger[aria-expanded='true']) .navigation__list > a.button {
    animation: nav-item-in 420ms cubic-bezier(0.2, 0.7, 0.3, 1) backwards;
  }

  /* Stagger — each subsequent item is delayed a touch more than the last */
  .menu:has(.menu__trigger[aria-expanded='true']) .navigation__list > *:nth-child(1) { animation-delay: 140ms; }
  .menu:has(.menu__trigger[aria-expanded='true']) .navigation__list > *:nth-child(2) { animation-delay: 200ms; }
  .menu:has(.menu__trigger[aria-expanded='true']) .navigation__list > *:nth-child(3) { animation-delay: 260ms; }
  .menu:has(.menu__trigger[aria-expanded='true']) .navigation__list > *:nth-child(4) { animation-delay: 320ms; }
  .menu:has(.menu__trigger[aria-expanded='true']) .navigation__list > *:nth-child(5) { animation-delay: 380ms; }
  .menu:has(.menu__trigger[aria-expanded='true']) .navigation__list > *:nth-child(6) { animation-delay: 440ms; }
  .menu:has(.menu__trigger[aria-expanded='true']) .navigation__list > *:nth-child(7) { animation-delay: 500ms; }
  .menu:has(.menu__trigger[aria-expanded='true']) .navigation__list > *:nth-child(n+8) { animation-delay: 560ms; }

  @keyframes nav-item-in {
    from {
      opacity: 0;
      transform: translateY(-12px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  /* Submenu expand/collapse — drop the `position: absolute / scale(0)`
     hide trick on mobile and use a max-height + opacity transition so
     the panel grows fluidly from 0 to its natural height. max-height
     is set to a value larger than any expected submenu; the transition
     only animates up to the actual content height. */
  .menu ul.wp-block-navigation-submenu {
    /* Override the desktop hide: keep in flow, just collapsed */
    visibility: visible;
    position: relative;
    transform: none;
    display: flex;
    flex-direction: column;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition:
      max-height 420ms cubic-bezier(0.2, 0.7, 0.3, 1),
      opacity 260ms ease-out 80ms;
  }

  .menu ul.wp-block-navigation-submenu.is-open {
    /* Larger than any real submenu — only animates up to actual height */
    max-height: 1200px;
    opacity: 1;
    transform: none;
    position: relative;
  }

  /* Nested submenus (3rd level inside a 2nd-level submenu) don't get
     their own `.is-open` class — the JS only toggles top-level entries.
     Reveal them implicitly when their parent is open. */
  .menu ul.wp-block-navigation-submenu.is-open ul.wp-block-navigation-submenu {
    max-height: 1200px;
    opacity: 1;
    transform: none;
    position: relative;
  }

  /* Chevron rotation: link's ::after icon flips when submenu is open */
  .menu .navigation__list > li > a span::after {
    transition: transform 320ms cubic-bezier(0.2, 0.7, 0.3, 1);
  }
  .menu .navigation__list > li:has(> ul.is-open) > a span::after {
    transform: rotate(180deg);
  }

  /* Reduced-motion: replace cascades with instant reveal */
  @media (prefers-reduced-motion: reduce) {
    .menu:has(.menu__trigger[aria-expanded='true']),
    .menu:has(.menu__trigger[aria-expanded='true']) .navigation__list > li,
    .menu:has(.menu__trigger[aria-expanded='true']) .navigation__list > a.button {
      animation: none;
    }
    .menu ul.wp-block-navigation-submenu {
      transition: none;
    }
  }
}