/*
 * Menu overlay — SD-21
 * Figma: Menü (node 7105-64997)
 * Full-screen Secondary-01 panel toggled by the nav-bar menu button.
 * Top-level direct links + expandable groups (menu-item component).
 */

.dk-menu {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  background-color: var(--dk-color-brand-secondary-01);
  color: var(--dk-color-black);
  /* Panel chrome stays put; .dk-menu__inner scrolls so nav items can travel
     under the floating bar all the way to the top (Feedback 7999:4828). */
  overflow: hidden;
}

.dk-menu[hidden] {
  display: none;
}

.dk-menu__inner {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  gap: 4rem; /* 64px */
  min-block-size: 0;
  max-block-size: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--dk-space-04);
}

/* CTA + services pill sit on one row (Figma: 841px wide at L, single line,
   same 44px height as everything in it) — nowrap so the bar never wraps;
   panel width is fixed at L (below), so CTA presence only shifts the bar
   contents, not the panel.
   Sticky over the scrolling panel: list travels underneath up to the top.
   No bar background — the floating pills sit over the pink panel so content
   can show through beside them. Negative margins cancel .dk-menu__inner
   padding so the sticky hit-area reaches the panel edge.
   pointer-events only on children so empty bar space doesn't block links. */
.dk-menu__bar {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  flex-shrink: 0;
  align-items: center;
  flex-wrap: nowrap;
  gap: var(--dk-space-03);
  margin-block-start: calc(-1 * var(--dk-space-04));
  margin-inline: calc(-1 * var(--dk-space-04));

  padding-block-end: var(--dk-space-03);
  padding-inline: var(--dk-space-04);
  background-color: transparent;
  pointer-events: none;
}

.dk-menu__bar > * {
  pointer-events: auto;
}

/* Primary CTA in the open menu's top bar — brand-primary, distinct from the
   generic (black) cta-primary component used elsewhere on the site. */
.dk-menu__cta {
  display: inline-flex;
  align-items: center;
  block-size: 2.75rem;
  padding-inline: var(--dk-space-04);
  border: 1px solid var(--dk-color-black);
  border-radius: 999px;
  background-color: var(--dk-color-brand-primary);
  color: var(--dk-color-black);
  text-decoration: none;
  transition: background-color 0.2s ease;
}

.dk-menu__cta:hover,
.dk-menu__cta:active {
  background-color: var(--dk-color-white);
}

.dk-menu__cta:hover .dk-menu__cta-text,
.dk-menu__cta:active .dk-menu__cta-text {
  text-decoration: underline;
}

.dk-menu__cta:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--dk-color-black), 0 0 0 4px var(--dk-color-white), 0 0 0 8px var(--dk-color-focus);
}

/* Service/language/search cluster — the exact same component as the closed
   nav-bar pill (.dk-navbar-pill): one white bordered pill wrapping both the
   items group and the black close button flush at its end, not two
   separate elements side by side. Padding only on the leading edge — the
   close button's own black pill provides the trailing edge. */
.dk-menu__services {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: var(--dk-space-03);
  margin-inline-start: auto;
  border-radius: 999px;
  background-color: var(--dk-color-white);
  border: 1px solid var(--dk-color-black);
  color: var(--dk-color-black);
  padding-inline-start: var(--dk-space-01);
}

.dk-menu__services-items {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

/* Close button — own solid-black pill inset in the white bar (Figma: Menü
   node 6598-56284), unlike its lime default elsewhere (e.g. gallery
   lightbox). Fixed block-size (not min + padding-block), centered by flex,
   matching .dk-navbar-menu. */
.dk-menu__bar .dk-close-button {
  block-size: 2.75rem;
  inline-size: 145px;  /* fixed width — matches Menü button so nav doesn't shift */
  padding-block: 0;
  border-radius: 999px;
  border: 1px solid transparent;
  background-color: var(--dk-color-black);
  color: var(--dk-color-white);
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.dk-menu__bar .dk-close-button:hover {
  background-color: var(--dk-color-brand-secondary-01);
  border-color: var(--dk-color-black);
  color: var(--dk-color-black);
}

.dk-menu__bar .dk-close-button:hover .dk-close-button-text,
.dk-menu__bar .dk-close-button:active .dk-close-button-text {
  text-decoration-color: transparent;
}

.dk-menu__bar .dk-close-button-icon {
  display: none;
}

.dk-menu__service-link {
  display: inline-flex;
  align-items: center;
  block-size: 2.75rem;
  padding-inline: var(--dk-space-02);
  color: var(--dk-color-black);
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 0.15em;
  transition: text-decoration-color 0.2s ease;
}

.dk-menu__service-link:hover,
.dk-menu__service-link:active {
  text-decoration-color: currentColor;
}

.dk-menu__services .dk-search-button {
  block-size: 2.75rem;
  padding-inline: var(--dk-space-02);
  background-color: transparent;
  color: var(--dk-color-black);
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 0.15em;
  transition: text-decoration-color 0.2s ease;
}

.dk-menu__services .dk-search-button:hover,
.dk-menu__services .dk-search-button:active {
  background-color: transparent;
  text-decoration-color: currentColor;
}

/* Shared search-button component defaults its label to UI M — Figma
   specifies UI S here, matching the other service/language links. */
.dk-menu__services .dk-search-button-text {
  font-size: var(--dk-text-ui-s-size);
  font-weight: var(--dk-text-ui-s-weight);
}

.dk-menu__social {
  flex-shrink: 0;
  margin-top: auto;
  /* Break out of inner padding so border goes edge-to-edge and bar sits flush at bottom */
  margin-inline: calc(-1 * var(--dk-space-04));
  margin-block-end: calc(-1 * var(--dk-space-04));
  border-top: 1px solid var(--dk-color-black);
  /* Match marquee/newsticker bar height (Figma: 104px) */
  block-size: 105px;
  display: flex;
  align-items: center;
  padding-inline: var(--dk-space-04);
}

/* Nav grows so the social row stays at the panel bottom when the list is
   short; scrolling itself lives on .dk-menu__inner so items can pass under
   the sticky bar. */
.dk-menu__nav {
  flex: 1 1 auto;
}

.dk-menu__socialList {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--dk-space-05);
}

.dk-menu__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--dk-space-01);
}

.dk-menu__link {
  display: block;
  padding-block: var(--dk-space-01);
  padding-inline: var(--dk-space-01);
  color: var(--dk-color-black);
  text-decoration: none;
}

.dk-menu__link {
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 0.15em;
  transition: text-decoration-color 0.2s ease;
}

.dk-menu__link:hover,
.dk-menu__link:active {
  text-decoration-color: currentColor;
}

.dk-menu__link[aria-current="page"] {
  text-decoration-color: currentColor;
}

/* tabindex="-1" focus sentinel — no visible ring, screen readers still announce */
.dk-menu__nav:focus {
  outline: none;
}

.dk-menu__link:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--dk-color-black), 0 0 0 4px var(--dk-color-white), 0 0 0 6px var(--dk-color-focus);
  border-radius: 2px;
}

/* Right-aligned panel on L: fixed 880px (Figma menü-open 7105:65013), so
   CTA presence never changes the panel width (Feedback 8120:34233). Page
   behind stays visible on the left. */
/* Dark scrim over the page peeking through on the left (Figma a11y note:
   "Das Menü öffnet sich halb über der Seite, ein Overlay dunkelt die Seite
   im Hintergrund ab. Ein Klick auf das Overlay schließt das Menü." — the
   click-to-close half is wired in menu.js). Exact opacity isn't specified
   in Figma; 45% black is a reasonable scrim value. */
.dk-menu {
  background-color: rgba(0, 0, 0, 0.45);
}

.dk-menu__inner {
  inline-size: 55rem; /* 880px — Figma L, fixed with or without CTA */
  margin-inline-start: auto;
  background-color: var(--dk-color-brand-secondary-01);
}

@media (max-width: 79.9375rem) {
  .dk-menu {
    background-color: var(--dk-color-brand-secondary-01);
  }

  .dk-menu__inner {
    inline-size: auto;
    max-inline-size: none;
    margin-inline-start: 0;
    background-color: transparent;
    gap: 2rem; /* 32px */
    /* No block-start padding: sticky top:0 sticks below the scrollport
       padding, which pushed Schließen 12px lower than Menü. Top inset is
       owned by the bar / close button (same 1rem as .dk-navbar). */
    padding-block: 0 var(--dk-space-03);
    padding-inline: var(--dk-space-03);
  }

  /* Below M, the close button sits in its own row above the CTA/service
     controls (Figma node 7105-65049, "menü-S-02") instead of sharing a row
     with them — pull it out of flow and reserve space for it above.
     Positioned against the sticky bar (containing block), not the panel. */
  .dk-menu__bar {
    flex-wrap: wrap;
    justify-content: flex-start;
    margin-block-start: 0;
    margin-inline: calc(-1 * var(--dk-space-03));
    /* Match .dk-navbar edge inset (1rem S/M) so Schließen sits where Menü was —
       not --dk-space-03, which drops to 12px on S. */
    padding-block-start: calc(2.75rem + 1rem * 2 + env(safe-area-inset-top, 0px));
    padding-block-end: var(--dk-space-03);
    padding-inline: var(--dk-space-03);
  }

  .dk-menu__bar .dk-close-button {
    position: absolute;
    inset-block-start: calc(1rem + env(safe-area-inset-top, 0px));
    inset-inline-end: calc(1rem + env(safe-area-inset-right, 0px));
  }

  .dk-menu__services-items {
    gap: var(--dk-space-01); /* 8px between pills */
  }

  .dk-menu__social {
    block-size: 44px;
  }

  .dk-menu__list {
    gap: 0;
  }

  /* Service/language/search controls become individually outlined pills
     that wrap (Figma: each "item" has its own border, not one shared
     pill) — the merged white-pill look is an L/M-only pattern. */
  .dk-menu__services {
    border: none;
    border-radius: 0;
    background-color: transparent;
    padding-inline: 0;
    padding-block: 0;
    /* Reset L-only flex behaviour: auto-margin right-aligns the block and
       flex-shrink:0 prevents it from fitting on narrow screens → overflow. */
    margin-inline-start: 0;
    flex-shrink: 1;
  }

  .dk-menu__service-link,
  .dk-menu__services .dk-search-button {
    border: 1px solid var(--dk-color-black);
    border-radius: 999px;
    background-color: var(--dk-color-white);
    padding-inline: var(--dk-space-03);
  }

  .dk-menu__services .dk-search-button:hover,
  .dk-menu__services .dk-search-button:active {
    background-color: var(--dk-color-white);
  }
}

/* Lock background scroll while the menu is open */
body.dk-menu-open {
  overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .dk-menu__link,
  .dk-menu__service-link {
    transition: none;
  }
}