/**
 * Burgermenu Component
 *
 * Slide-in navigation drawer. Trust background (Ebene 1), Trust-500 sub-panels (Ebene 2).
 * Figma node ID: 863:29142
 */

/* ── Overlay ─────────────────────────────────────────────────────── */

.menu-slide-in {
  position: fixed;
  inset: 0;
  z-index: 500;
  pointer-events: none;
}

.menu-slide-in.is-open {
  pointer-events: auto;
}

/* Semi-transparent backdrop behind the drawer */
.menu-slide-in__scrim {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  opacity: 0;
  transition: opacity 0.35s ease;
}

.menu-slide-in.is-open .menu-slide-in__scrim {
  opacity: 1;
}

/* ── Drawer ──────────────────────────────────────────────────────── */

.menu-slide-in__drawer {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(560px, 100%);
  overflow: hidden;
  transform: translateX(100%);
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: row;
}

.menu-slide-in.is-open .menu-slide-in__drawer {
  transform: translateX(0);
}

/* ── Main panel (Ebene 1) ─────────────────────────────────────────── */

.menu-slide-in__panel--main {
  flex: 0 0 100%;
  width: 100%;
  padding: 0 var(--spacing-300, 24px);
  background: var(--trust, #550a2d);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
}

.menu-slide-in .navigation-link {
  display: flex;
  width: 100%;
  justify-content: space-between;
}
/* ── Sub-panels (Ebene 2, appended by JS) ────────────────────────── */

.menu-slide-in__panel--sub {
  position: absolute;
  inset: 0;
  background: var(--trust-500, #440824);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
  gap: var(--spacing-300);
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.menu-slide-in__panel--sub.is-active {
  transform: translateX(0);
}

/* ── Header ──────────────────────────────────────────────────────── */

.menu-slide-in__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 17px var(--spacing-050, 4px) 0 var(--spacing-200, 16px);
  flex-shrink: 0;
}

.menu-slide-in__logo {
  width: 38px;
  height: 46px;
  overflow: hidden;
  flex-shrink: 0;
  color: var(--white, #ffffff);
  transition: color 0.2s ease;
}

.menu-slide-in__logo:hover {
  color: var(--attitude);
}

.menu-slide-in__logo svg {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.menu-slide-in__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  padding: var(--spacing-100, 8px) var(--spacing-200, 16px);
  background: transparent;
  border: none;
  border-radius: var(--border-radius-m, 4px);
  color: var(--white, #ffffff);
  cursor: pointer;
  opacity: var(--opacity-visible, 1);
  transition: color 0.2s ease, background-color 0.2s ease;
  flex-shrink: 0;
}

.menu-slide-in__close:hover {
  color: var(--attitude);
  background: var(--trust-500);
}

.menu-slide-in__panel .navigation-link {
  width: 100%;
}


.menu-slide-in__panel .navigation-link:hover,
.menu-slide-in__panel .menu-slide-in__close:hover {
  color: var(--attitude);
  background: var(--trust-600);
}

/* ── Navigation (Ebene 1) ────────────────────────────────────────── */

.menu-slide-in__nav {
  margin-top: 60px;
}

/* Reset Drupal menu defaults */
.menu-slide-in__nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.menu-slide-in__nav ul li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: var(--border-radius-m, 4px);
  margin-bottom: var(--spacing-300, 24px);
  position: relative;
}

.menu-slide-in__nav ul li:last-child {
  margin-bottom: 0;
}

/* Hide nested sub-menus from the main panel — JS moves them to sub-panels */
.menu-slide-in__nav ul li ul {
  display: none;
}

/* Expand button (added by JS for items with sub-menus) */
.menu-slide-in__expand {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  background: transparent;
  border: none;
  border-radius: var(--border-radius-m, 4px);
  color: var(--white, #ffffff);
  cursor: pointer;
  transition: background-color 0.2s ease;
  margin-right: var(--spacing-100, 8px);
}

/* ── Footer: language switch ─────────────────────────────────────── */

.menu-slide-in__footer {
  flex-shrink: 0;
  padding: var(--spacing-400, 32px) var(--spacing-200, 16px) 70px;
}

/* ── Sub-panel header (Ebene 2) ──────────────────────────────────── */

.menu-slide-in__panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 17px var(--spacing-050, 4px) 0 var(--spacing-050, 4px);
  flex-shrink: 0;
  gap: var(--spacing-100, 8px);
}

.menu-slide-in__panel-header .navigation-link {
  flex-direction: row-reverse;
  width: 100%;
  justify-content: flex-end;
}

.menu-slide-in__panel-header .navigation-link__icon {
  transform: rotate(180deg);
}


.menu-slide-in__back {
  display: flex;
  align-items: center;
  gap: var(--spacing-150, 12px);
  flex: 1 0 0;
  min-width: 0;
  padding: var(--spacing-100, 8px) var(--spacing-150, 12px);
  background: transparent;
  border: none;
  border-radius: var(--border-radius-m, 4px);
  color: var(--white, #ffffff);
  cursor: pointer;
  font-family: 'Bosch Sans', sans-serif;
  font-weight: 700;
  font-size: var(--text-size-links-link-text-l, 26px);
  line-height: 1.4;
  letter-spacing: -0.39px;
  font-feature-settings: 'zero' 1;
  text-align: left;
  transition: background-color 0.2s ease;
}

.menu-slide-in__back:hover {
  background: rgba(255, 255, 255, 0.08);
}

.menu-slide-in__back-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
}

.menu-slide-in__panel-title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Sub-panel nav (Ebene 2) ─────────────────────────────────────── */

.menu-slide-in__sub-nav {
  padding: 40px var(--spacing-300, 24px) var(--spacing-500, 40px) var(--spacing-500, 40px);
}

.menu-slide-in__sub-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.menu-slide-in__sub-nav ul li {
  display: block;
  margin-bottom: var(--spacing-050, 4px);
}

.menu--main__submenu.menu-slide-in__sub-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-300)
}

.menu-slide-in__sub-nav .navigation-link:has(+ .menu--main__submenu) {
  font-weight: var(--font-weight-bold);
}

/* ── Responsive ──────────────────────────────────────────────────── */

@media (max-width: 560px) {
  .menu-slide-in__drawer {
    width: 100%;
  }
}