/**
 * @file menu.css
 * Wellen-Header (SN8 2026), Navigation, grüner Hamburger und mobiles Dropdown.
 *
 * Der Header ist fixiert und teiltransparent; seine markante Form entsteht aus
 * drei Flächen + einer Wellen-SVG (siehe .header-shape in page.html.twig):
 *   - hoher linker Balken (.hb-left)
 *   - Wellen-SVG dazwischen (.header-wave)
 *   - niedriger rechter Balken (.hb-right)
 *   - durchgehender Füllbalken in kompakter Höhe (.hb-fill), damit beim
 *     Einfahren der Welle kein „Loch" entsteht.
 *
 * Mobile-first: Navigation steckt im Dropdown und klappt per Hamburger auf.
 * Ab 1024px wird sie zur horizontalen Leiste, der Hamburger verschwindet.
 * Die Maße stehen als Tokens in tokens.css (--header-h, --wave-h …).
 */

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-header);
  color: var(--color-pure-white);
  /* Keine Hintergrundfarbe – die Form kommt aus .header-shape (teiltransparent),
     sodass der Hero darunter durchscheint. */
}

.toolbar-horizontal header {
    margin-top: 3rem;
}

.toolbar-horizontal.toolbar-tray-open header {
    margin-top: 6rem;
}

/* ========================================================================
   Header-Form (rein dekorativ)
   ======================================================================== */
.header-shape {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: var(--wave-h);
  z-index: 0;
  color: var(--color-header);   /* speist currentColor von Balken + Welle */
  opacity: 0.82;                /* gemeinsame Transparenz – keine Nahtdopplung */
  pointer-events: none;
  transition: opacity 0.35s ease, height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Solide Balken links/rechts der Welle. */
.hb {
  position: absolute;
  top: 0;
  background: currentColor;
  transition: height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Durchgehender Füllbalken in kompakter Höhe. */
.hb-fill {
  left: 0;
  right: 0;
  height: var(--header-c);
  z-index: 0;
}

/* Balken enden bündig an den Wellenrändern (2px Überlappung deckt die Welle ab). */
.hb-left {
  left: 0;
  width: calc(var(--wave-left) + 2px);
  height: var(--wave-h);
}

.hb-right {
  left: calc(var(--wave-left) + var(--wave-w) - 2px);
  right: 0;
  height: var(--header-h);
}

.header-wave {
  position: absolute;
  top: 0;
  left: var(--wave-left);
  width: var(--wave-w);
  height: var(--wave-h);
  display: block;
  z-index: 1;                   /* deckt die 2px-Überlappung der Balken ab */
  color: var(--color-header);
  transform-origin: top center;
  transition: height 0.4s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.3s ease,
              transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ========================================================================
   Header-Bar (Logo · Navigation · Hamburger)
   ======================================================================== */
.header-bar {
  position: relative;
  z-index: 1;                   /* über der Form */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  min-height: var(--header-h);
  padding-block: 1.1rem;
  transition: min-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.site-branding {
  display: inline-flex;
  align-items: center;
}

.site-branding a {
  display: inline-flex;
  align-items: center;
  color: var(--color-pure-white);
  text-decoration: none;
}

.site-branding img {
  height: 42px;
  width: auto;
  display: block;
  transition: height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Drupal gibt im Branding-Block zusätzlich den Site-Namen als Textlink aus.
   Das Logo zeigt die Marke bereits – den Text-Link daher visuell ausblenden,
   aber für Screenreader/SEO im DOM behalten. (Der Logo-Link enthält ein <img>,
   der Namens-Link nicht – darüber unterscheiden wir sie.) */
.site-branding a:not(:has(img)) {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ========================================================================
   Hamburger – zwei grüne Balken, die zum X klappen
   ======================================================================== */
.menu-toggle {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  padding: 6px;
  background: none;
  border: none;
  cursor: pointer;
}

.menu-toggle span {
  display: block;
  width: 30px;
  height: 7px;
  background: var(--color-accent);
  border-radius: 40px;
  transition: transform 0.25s ease, opacity 0.2s ease;
}

.site-header.is-menu-open .menu-toggle span:first-child {
  transform: translateY(6px) rotate(8deg);
}

.site-header.is-menu-open .menu-toggle span:last-child {
  transform: translateY(-7px) rotate(-8deg);
}

/* ========================================================================
   Navigation – Drupal rendert ul.menu > li.menu__item > a.menu__link
   ========================================================================
   Mobile-first: das Dropdown klappt unter der Bar auf. */
.menu-drawer {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: var(--z-drawer);
  background: var(--color-dark);
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.site-header.is-menu-open .menu-drawer {
  max-height: 70vh;
  overflow-y: auto;
}

/* Wrapper aus Region/Block neutralisieren. */
.menu-drawer .region,
.menu-drawer .block {
  margin: 0;
  padding: 0;
}

.menu {
  list-style: none;
  margin: 0;
  padding: 0.5rem var(--container-padding) 1rem;
}

.menu .menu {
  padding: 0 0 0 var(--space-sm);   /* Untermenü mobil eingerückt */
}

.menu__item {
  position: relative;
}

.menu__link {
  display: block;
  padding: 0.7rem 0;
  text-decoration: none;
  color: var(--color-pure-white);
  font-size: 0.95rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* "====" Unterstrich (grün) bei aktiv/hover – ASCII-Look des Prototyps. */
.menu__link.is-active,
.menu__link:hover,
.menu__link:focus-visible {
  color: var(--color-pure-white);
}

/* Overlay des alten Off-Canvas-Drawers wird hier nicht gebraucht. */
.menu-drawer-overlay {
  display: none;
}

/* ========================================================================
   Scroll-Zustand: Welle fährt ein, Header wird kompakt
   ======================================================================== */
.site-header.scrolled .header-shape {
  height: var(--header-c);
  opacity: 0.94;
}

.site-header.scrolled .hb-left,
.site-header.scrolled .hb-right {
  height: var(--header-c);
}

.site-header.scrolled .header-wave {
  opacity: 0;
  transform: translateX(-160%);
}

.site-header.scrolled .header-bar {
  min-height: var(--header-c);
}

.site-header.scrolled .site-branding img {
  height: 30px;
}

/* ========================================================================
   Desktop ab 1024px: horizontale Navigationsleiste
   ======================================================================== */
@media (min-width: 1024px) {
  .menu-toggle {
    display: none;
  }

  .menu-drawer {
    position: static;
    max-height: none;
    overflow: visible;
    background: transparent;
    margin-left: auto;          /* Navigation nach rechts */
  }

  /* Oberste Menüliste horizontal (verschachtelte Untermenüs ausgenommen). */
  .menu-drawer .menu:not(.menu .menu) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: clamp(0.8rem, 2vw, 1.8rem);
    padding: 0;
  }

  .menu-drawer .menu:not(.menu .menu) > .menu__item > .menu__link {
    padding: 0 0 0.4rem;
    position: relative;
  }

  /* "====" Unterstrich als Pseudo-Element. */
  .menu-drawer .menu__link.is-active::after,
  .menu-drawer .menu__link:hover::after,
  .menu-drawer .menu__link:focus-visible::after {
    content: "===========";
    position: absolute;
    left: 0;
    bottom: -0.3rem;
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    color: var(--color-accent);
    font-size: 0.7rem;
    letter-spacing: 0;
  }

  /* Untermenü als Dropdown. */
  .menu-drawer .menu .menu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 12rem;
    padding: var(--space-2xs) var(--space-sm);
    background: var(--color-dark);
    box-shadow: var(--shadow-md);
    border-radius: var(--radius-sm);
    display: none;
  }

  .menu-drawer .menu__item:hover > .menu,
  .menu-drawer .menu__item:focus-within > .menu {
    display: block;
  }
}