/* ===== Root & Vars ===== */
.mtool-custom-menu-root {
  --mtool-font-size: 12px;
  --mtool-font-size-mobile: 20px;
  --mtool-active: var(--wp--preset--color--palette-color-5);
  --mtool-active-ancestor: var(--wp--preset--color--palette-color-5);
  --mtool-gap: 20px;
  --mtool-overlay: rgba(54,54,54,.75);
  --mtool-sidewidth: 65vw;
  --mtool-sidewidth-mobile: 90vw;
  --mtool-z: 1000;
  --mtool-font-color: var(--wp--preset--color--palette-color-2);
  --mtool-font-color-akzent: var(--wp--preset--color--palette-color-5);
  position: relative;
  text-align: right;
}

/* Sichtbarkeit wird per JS via data-current="desktop|mobile" gesetzt */
.mtool-custom-menu-root .mtool-mode-desktop { display: none; }
.mtool-custom-menu-root .mtool-custom-menu-burger { display: inline-flex; }

.mtool-custom-menu-root[data-current="desktop"] .mtool-mode-desktop { display: block; }
.mtool-custom-menu-root[data-current="desktop"] .mtool-custom-menu-burger,
.mtool-custom-menu-root[data-current="desktop"] .mtool-custom-menu-drawer,
.mtool-custom-menu-root[data-current="desktop"] .mtool-custom-menu-overlay { display: none; }

/* ===== Desktop Nav ===== */
.mtool-custom-menu-row {
  display: flex;
  gap: var(--mtool-gap);
  align-items: center;
  justify-content: flex-end;
}

.mtool-custom-menu-list {
  display: flex;
  gap: var(--mtool-gap);
  list-style: none;
  margin: 0;
  padding: 0;
  align-items: center;
}
.mtool-custom-menu-item { position: relative; }
.mtool-custom-menu-link {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  line-height: 1.4;
}

a.mtool-custom-menu-link {
    font-size: var(--mtool-font-size);
    color: var(--mtool-font-color);
    font-weight: 700;
}
a.mtool-custom-menu-link:hover,
a.mtool-custom-menu-link:active {
    color: var(--mtool-font-color-akzent);
}

.mtool-mode-mobile a.mtool-custom-menu-link {
    font-size: var(--mtool-font-size-mobile);
}

/* Dezente Trennlinie zwischen Top-Level Items wenn hr=true */
.mtool-custom-menu-root[data-hr="true"] .mtool-custom-menu-list > .mtool-custom-menu-item + .mtool-custom-menu-item {
  padding-inline-start: var(--mtool-gap); /* no extra padding */
  border-left: 1px solid rgba(0,0,0,.15);
}

.mtool-custom-menu-root[data-hr="true"] .mtool-custom-menu-list.mtool-custom-menu-submenu > .mtool-custom-menu-item + .mtool-custom-menu-item {
    padding-inline-start: 0px;
    border-left: none;
}

.mtool-custom-menu-root[data-hr="true"] .mtool-mode-mobile .mtool-custom-menu-list > .mtool-custom-menu-item + .mtool-custom-menu-item {
  padding-inline-start: calc(var(--mtool-gap) - var(--mtool-gap)); /* no extra padding */
  border-left: none;
}

/* Dropdown Caret */
.mtool-custom-menu-caret {
  display: inline-flex;
  margin-inline-start: .4em;
}

/* Submenu (Desktop) */
.mtool-custom-menu-submenu {
  position: absolute;
  left: 0;
  top: calc(100% + 0px);
  min-width: max-content; /* so breit wie Inhalt */
  list-style: none;
  margin: 0;
  padding: 20px 20px;
  background: var(--dropdown-background-color, #fff);
  border-radius: var(--theme-border-radius, 0 0 2px 2px);
  box-shadow: var(--theme-box-shadow, 0 10px 20px rgba(41,51,61,.1));
  border: 1px solid rgba(0,0,0,.06);
  display: none;
  z-index: calc(var(--mtool-z) + 1);
}

.mtool-custom-menu-submenu > .mtool-custom-menu-item {
  display: block;
}
.mtool-custom-menu-submenu > .mtool-custom-menu-item + .mtool-custom-menu-item {
  border-top: var(--dropdown-divider, 1px solid rgba(0,0,0,.08));
}

.mtool-custom-menu-submenu .mtool-custom-menu-link {
  display: block;
  padding: 8px 14px;
}

/* Hover öffnet Submenu auf Desktop */
@media (hover:hover) {
  .mtool-custom-menu-root[data-current="desktop"] .mtool-custom-menu-item.has-children:hover > .mtool-custom-menu-submenu {
    display: block;
  }
}

/* ===== Hamburger Button ===== */
.mtool-custom-menu-burger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .4rem .5rem;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.mtool-hamburger-icon rect {
  transition: width .25s ease;
}
.mtool-custom-menu-burger:hover .mtool-hamburger-icon rect:first-child,
.mtool-custom-menu-burger:focus-visible .mtool-hamburger-icon rect:first-child { width: 18px; }
.mtool-custom-menu-burger:hover .mtool-hamburger-icon rect:last-child,
.mtool-custom-menu-burger:focus-visible .mtool-hamburger-icon rect:last-child { width: 18px; }

/* ===== Overlay ===== */
.mtool-custom-menu-overlay {
  position: fixed;
  inset: 0;
  background: var(--mtool-overlay);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
  z-index: var(--mtool-z);
}
.mtool-custom-menu-overlay.is-active {
  opacity: 1;
  pointer-events: auto;
}

/* ===== Drawer (Mobile) ===== */
.mtool-custom-menu-drawer[hidden] { display: block; } /* allow transitions while hidden attr toggles */
.mtool-custom-menu-drawer {
  position: fixed;
  inset: 0;
  z-index: calc(var(--mtool-z) + 1);
  pointer-events: none;
}
.mtool-custom-menu-drawer-inner {
  position: absolute;
  top: 0;
  right: 0;
  width: var(--mtool-sidewidth);
  max-width: 100%;
  height: 100%;
  background: var(--drawer-bg, #fff);
  transform: translateX(100%);
  transition: transform .3s ease;
  box-shadow: -10px 0 20px rgba(0,0,0,.1);
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  padding: 35px;
}
.mtool-custom-menu-drawer.is-open .mtool-custom-menu-drawer-inner {
  transform: translateX(0);
}

.mtool-custom-menu-drawer-head {
  display: flex;
  justify-content: flex-end;
  padding: 20px 10px 10px;
  border-bottom: 1px solid rgba(0,0,0,.08);
}
.mtool-custom-menu-close {
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: .4rem;
}

.mtool-custom-menu-close .mtool-icon {
  transform-origin: 50% 50%;
  transform-box: fill-box;           /* wichtig bei SVG */
}

.mtool-custom-menu-close:hover .mtool-icon,
.mtool-custom-menu-close:focus-visible .mtool-icon {
  animation: mtool-x-wobble .35s ease both;
}

@keyframes mtool-x-wobble {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(90deg); }   /* zurück */
}

/* Barrierefreiheit: Bewegung abschalten */
@media (prefers-reduced-motion: reduce) {
  .mtool-custom-menu-close .mtool-icon { animation: none !important; }
}
.mtool-mode-mobile {
  overflow-y: auto;
}
/* Mobile Nav List, Subtoggle rechts */
.mtool-custom-menu.mtool-mode-mobile .mtool-custom-menu-list {
  display: block;
  padding: 10px 0;
}
.mtool-custom-menu.mtool-mode-mobile .mtool-custom-menu-item {
  display: block;
  border-bottom: 1px solid rgba(0,0,0,.08);
  text-align: left;
}
.mtool-custom-menu.mtool-mode-mobile .mtool-custom-menu-link {
  display: block;
  padding: 12px 16px;
}
.mtool-custom-menu-subtoggle {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 6px;
}
.mtool-custom-menu.mtool-mode-mobile .mtool-custom-menu-item.has-children {
  position: relative;
}

/* Mobile Submenus sind einklappbar */
.mtool-custom-menu.mtool-mode-mobile .mtool-custom-menu-item > .mtool-custom-menu-submenu {
  position: static;
  display: none;
  padding: 0;
  border: 0;
  box-shadow: none;
}
.mtool-custom-menu.mtool-mode-mobile .mtool-custom-menu-item > .mtool-custom-menu-submenu .mtool-custom-menu-link {
  padding: 10px 16px 10px 26px; /* Einzug */
}
.mtool-custom-menu-subtoggle[aria-expanded="true"] .toggle-icon {
  transform: rotate(180deg);
  transition: transform .2s ease;
}

/* ===== Utilities ===== */
.mtool-visually-hidden {
  position: absolute !important;
  height: 1px; width: 1px;
  overflow: hidden; clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}

/* Body Scroll Lock, wenn Drawer offen */
.mtool-no-scroll { overflow: hidden; }


/* aktive Seite (genauer Treffer) */
.mtool-custom-menu-item.current-menu-item > .mtool-custom-menu-head > .mtool-custom-menu-link {
  color: var(--mtool-active, #d22);
  font-weight: 600;
}

/* Eltern/Ancestor geöffnet/aktiv markieren */
.mtool-custom-menu-item.current-menu-ancestor > .mtool-custom-menu-link,
.mtool-custom-menu-item.current-menu-parent > .mtool-custom-menu-link,
.mtool-custom-menu-item.current_page_parent > .mtool-custom-menu-link {
  color: var(--mtool-active-ancestor, #b11);
}

/* optional: im Drawer (mobile) etwas kräftiger */
.mtool-custom-menu.mtool-mode-mobile 
.mtool-custom-menu-item.current-menu-item > .mtool-custom-menu-link {
  background: rgba(0,0,0,.05);
  /*border-left: 3px solid var(--mtool-active, #d22);*/
}

/* --- Sichtbarkeit je Modus --- */
.mtool-custom-menu-root[data-current="desktop"] .mtool-custom-menu-subtoggle { display: none; }
.mtool-custom-menu-root[data-current="mobile"]  .mtool-custom-menu-caret    { display: none !important; }

.mtool-custom-menu-caret { transform: translateY(-.125em); }
/* --- Head-Zeile: hält Höhe stabil, icons positioniert relativ zum Head --- */
.mtool-custom-menu-head {
  display: flex;
  align-items: center;
  gap: .4rem;
  position: relative; /* -> Anker für den Subtoggle */
}

/* Desktop-Top-Level Layout bleibt wie gehabt */
/*
.mtool-custom-menu.mtool-mode-desktop .mtool-custom-menu-link {
  padding: 35px;
}*/

@media (max-width:600px){ .mtool-custom-menu-drawer-inner { width: var(--mtool-sidewidth-mobile); } }