/* ==========================================================
   KLOOS HEADER / OFF-CANVAS MENU
   Source navigation stays editable in the Gutenberg template
   part "header". JS clones it into this frontend sidebar.
   ========================================================== */

:root {
  --kloos-menu-bg: var(--wp--preset--color--new-blue, #0f172a);
  --kloos-menu-active: var(--wp--preset--color--yellow, #ffb000);
  --kloos-menu-white: var(--wp--preset--color--white, #ffffff);
  --kloos-menu-ink: var(--wp--preset--color--dark-gray, #292929);
  --kloos-menu-panel-width: clamp(440px, 37vw, 560px);
  --kloos-menu-motion: 360ms cubic-bezier(.22, .61, .36, 1);
}

.kloos-site-header {
  position: relative;
  z-index: 9000;
  width: 100%;
}

.kloos-header-template {
  position: relative;
  z-index: 1;
}

/* Keep the Gutenberg header editable, but remove its visible navigation on the
   frontend once our JS enhancement is available. If JS ever fails to load, the
   original Navigation block remains visible as a safe fallback. */
html.kloos-menu-js .kloos-header-template .wp-block-navigation {
  display: none !important;
  pointer-events: none !important;
}

.kloos-menu-trigger,
.kloos-menu-close {
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  cursor: pointer;
  text-decoration: none;
  text-transform: none;
  letter-spacing: normal;

  /* Fallback exactly matching the MCG "menu" style shown in the design.
     The class "menu" remains on the buttons/links so the MCG rule can win
     wherever it is generated. */
  font-family: Inter, sans-serif;
  font-size: var(--wp--preset--font-size--menu, 25px);
  font-weight: 700;
  line-height: 1.5;
}

.kloos-menu-trigger {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 10;
  padding: 20px 26px;
  background: transparent !important;
  background-color: transparent !important;
  color: var(--kloos-menu-ink);
}

.kloos-menu-dot {
  display: block;
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: currentColor;
}

.kloos-menu-overlay[hidden] {
  display: none !important;
}

.kloos-menu-overlay {
  position: fixed;
  inset: 0;
  z-index: 999999;
  display: block;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--kloos-menu-motion), visibility var(--kloos-menu-motion);
}

.kloos-menu-overlay.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.kloos-menu-backdrop {
  appearance: none;
  -webkit-appearance: none;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: rgba(13, 18, 29, .62);
  cursor: pointer;
}

.kloos-menu-panel {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  width: var(--kloos-menu-panel-width);
  max-width: 100vw;
  height: 100vh;
  height: 100dvh;
  padding: 20px 24px 40px;
  box-sizing: border-box;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--kloos-menu-bg);
  color: var(--kloos-menu-white);
  transform: translateX(100%);
  transition: transform var(--kloos-menu-motion);
}

.kloos-menu-overlay.is-open .kloos-menu-panel {
  transform: translateX(0);
}

.kloos-menu-panel__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex: 0 0 auto;
  margin: 0 0 16px;
}

.kloos-menu-language,
.kloos-menu-close {
  color: var(--kloos-menu-white);
}

.kloos-menu-language {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 42px;
  font-family: Inter, sans-serif;
  font-size: var(--wp--preset--font-size--menu, 25px);
  font-weight: 700;
  line-height: 1.5;
}

.kloos-menu-language__chevron {
  display: block;
  width: 9px;
  height: 9px;
  margin-top: -5px;
  border-right: 3px solid currentColor;
  border-bottom: 3px solid currentColor;
  transform: rotate(45deg);
}

.kloos-menu-close {
  padding: 0;
  background: transparent;
}

.kloos-sidebar-navigation {
  flex: 1 1 auto;
  min-height: 0;
}

/* The cloned Gutenberg list. */
.kloos-menu-list,
.kloos-menu-list ul {
  margin: 0;
}

.kloos-menu-list {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  width: 100%;
  padding: 0;
  list-style: none;
}

.kloos-menu-list > li {
  display: grid;
  grid-template-columns: minmax(0, auto) auto;
  align-items: center;
  justify-content: start;
  width: 100%;
  margin: 0;
  padding: 0;
}

.kloos-menu-list > li > a {
  min-width: 0;
  max-width: 100%;
  padding: 1px 0;
  color: var(--kloos-menu-white) !important;
  text-decoration: none !important;
  white-space: normal;

  /* MCG "menu" typography fallback. JS uses has-menu-font-size only,
     so no MCG color class can override the menu state colors. */
  font-family: Inter, sans-serif;
  font-size: var(--wp--preset--font-size--menu, 25px);
  font-weight: 700;
  line-height: 1.5;
}

.kloos-menu-list > li > a:hover,
.kloos-menu-list > li > a:focus-visible {
  color: var(--kloos-menu-active) !important;
}

.kloos-menu-list > li.is-current > a,
.kloos-menu-list > li.is-current-ancestor > a,
.kloos-menu-list > li > a[aria-current="page"],
.kloos-menu-list > li > a[aria-current="true"] {
  color: var(--kloos-menu-active) !important;
}

.kloos-submenu-toggle {
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin: 0 0 0 5px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--kloos-menu-white);
  cursor: pointer;
}

.kloos-menu-list > li.is-current-ancestor > .kloos-submenu-toggle,
.kloos-menu-list > li.is-current > .kloos-submenu-toggle {
  color: var(--kloos-menu-active);
}

.kloos-submenu-toggle::before {
  content: "";
  display: block;
  width: 9px;
  height: 9px;
  margin-top: -5px;
  border-right: 3px solid currentColor;
  border-bottom: 3px solid currentColor;
  transform: rotate(45deg);
  transform-origin: center;
  transition: transform 260ms ease, margin 260ms ease;
}

.kloos-menu-list > li.is-submenu-open > .kloos-submenu-toggle::before {
  margin-top: 5px;
  transform: rotate(225deg);
}

/* Smoothly opening submenu. */
.kloos-menu-list > li > ul {
  grid-column: 1 / -1;
  width: 100%;
  max-height: 0;
  margin: 0;
  padding: 0 0 0 28px;
  box-sizing: border-box;
  overflow: hidden;
  opacity: 0;
  list-style: disc outside;
  transition:
    max-height 340ms cubic-bezier(.22, .61, .36, 1),
    opacity 220ms ease,
    margin 340ms cubic-bezier(.22, .61, .36, 1);
}

.kloos-menu-list > li.is-submenu-open > ul {
  max-height: var(--kloos-submenu-height, 600px);
  margin-top: 4px;
  margin-bottom: 8px;
  opacity: 1;
}

.kloos-menu-list > li > ul > li {
  display: list-item !important;
  margin: 0 0 4px;
  padding: 0 0 0 4px;
  color: var(--kloos-menu-white);
}

.kloos-menu-list > li > ul > li::marker {
  color: var(--kloos-menu-white);
  font-size: .7em;
}

.kloos-menu-list > li > ul a {
  display: inline-block;
  padding: 2px 0;
  color: var(--kloos-menu-white) !important;
  text-decoration: none !important;
  white-space: normal;
  font-family: Inter, sans-serif;
  font-size: var(--wp--preset--font-size--submenu, 18px);
  font-weight: 400;
  line-height: 1.55;
}

.kloos-menu-list > li > ul a:hover,
.kloos-menu-list > li > ul a:focus-visible,
.kloos-menu-list > li > ul li.is-current > a,
.kloos-menu-list > li > ul a[aria-current="page"],
.kloos-menu-list > li > ul a[aria-current="true"] {
  color: var(--kloos-menu-active) !important;
}

body.kloos-menu-open {
  overflow: hidden !important;
  touch-action: none;
}

.kloos-menu-trigger:focus-visible,
.kloos-menu-close:focus-visible,
.kloos-submenu-toggle:focus-visible,
.kloos-menu-list a:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
}

/* Tablet: the panel covers more of the viewport, as in the design. */
@media (max-width: 1200px) {
  :root {
    --kloos-menu-panel-width: max(440px, 47vw);
  }
}

/* Mobile: full-screen menu. */
@media (max-width: 700px) {
  :root {
    --kloos-menu-panel-width: 100vw;
  }

  .kloos-menu-backdrop {
    display: none;
  }

  .kloos-menu-panel {
    padding: 16px 18px 32px;
  }

  .kloos-menu-trigger {
    padding: 16px 20px;
  }

  .kloos-menu-panel__top {
    margin-bottom: 20px;
  }

  .kloos-menu-list > li > ul {
    padding-left: 30px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .kloos-menu-overlay,
  .kloos-menu-panel,
  .kloos-menu-list > li > ul,
  .kloos-submenu-toggle::before {
    transition-duration: 1ms !important;
  }
}

/* ==========================================================
   KLOOS GLOBAL HEADER – TEMPLATE-INDEPENDENT OVERRIDES
   ========================================================== */

/* The Gutenberg template part is only the editable source for the menu.
   It must not take up any space in the frontend. */
.kloos-header-source {
  display: none !important;
}

.kloos-global-header {
  position: static !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Global brand. It stays above the dimmed backdrop on desktop/tablet. */
.kloos-global-brand {
  position: fixed !important;
  top: 20px;
  left: 24px;
  z-index: 1000001;
  display: inline-flex;
  align-items: center;
  color: var(--wp--preset--color--dark-gray, #292929) !important;
  font-family: Inter, sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none !important;
  transition: color 220ms ease;
}

body.kloos-menu-open .kloos-global-brand {
  color: var(--wp--preset--color--white, #fff) !important;
}

/* The closed menu button must be viewport-fixed because the actual page
   template may contain no header region at all. */
.kloos-menu-trigger {
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  z-index: 1000001 !important;
}

body.admin-bar .kloos-menu-trigger {
  top: 32px !important;
}

body.admin-bar .kloos-global-brand {
  top: 52px !important;
}

body.kloos-menu-open .kloos-menu-trigger {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* Keep the overlay below the WordPress admin bar while testing logged in. */
body.admin-bar .kloos-menu-overlay {
  top: 32px !important;
  height: calc(100dvh - 32px) !important;
}

body.admin-bar .kloos-menu-panel,
body.admin-bar .kloos-menu-backdrop {
  height: calc(100dvh - 32px) !important;
}

@media (max-width: 782px) {
  body.admin-bar .kloos-menu-trigger {
    top: 46px !important;
  }

  body.admin-bar .kloos-menu-overlay {
    top: 46px !important;
    height: calc(100dvh - 46px) !important;
  }

  body.admin-bar .kloos-menu-panel,
  body.admin-bar .kloos-menu-backdrop {
    height: calc(100dvh - 46px) !important;
  }

  body.admin-bar .kloos-global-brand {
    top: 66px !important;
  }
}

@media (max-width: 700px) {
  .kloos-global-brand {
    display: none !important;
  }
}


/* v3: closed menu trigger must be completely transparent. */
html body .kloos-menu-trigger,
html body .kloos-menu-trigger:hover,
html body .kloos-menu-trigger:focus,
html body .kloos-menu-trigger:active {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
  color: var(--wp--preset--color--dark-gray, #292929) !important;
}


/* ==========================================================
   KLOOS MENU V4 – TYPOGRAPHY + PIXEL-PRECISE TRIGGER CONTRAST
   ========================================================== */

/*
 * Hauptpunkte = MCG "menu" style from the design:
 * Inter / 25px / 700 / 150%.
 * The explicit !important values prevent the later-generated MCG font classes
 * from accidentally swapping main-menu and submenu typography.
 */
html body .kloos-sidebar-navigation .kloos-menu-list > li > a,
html body .kloos-sidebar-navigation .kloos-menu-list > li > a.menu {
  font-family: Inter, sans-serif !important;
  font-size: 25px !important;
  font-weight: 700 !important;
  line-height: 1.5 !important;
}

/* Unterpunkte = smaller, regular submenu style. */
html body .kloos-sidebar-navigation .kloos-menu-list > li > ul > li > a,
html body .kloos-sidebar-navigation .kloos-menu-list > li > ul > li > a.has-submenu-font-size {
  font-family: Inter, sans-serif !important;
  font-size: 18px !important;
  font-weight: 400 !important;
  line-height: 1.55 !important;
}

/* Keep the submenu bullet visually in proportion with the smaller copy. */
html body .kloos-sidebar-navigation .kloos-menu-list > li > ul > li::marker {
  font-size: .72em !important;
}

/* Closed trigger: always transparent. The dark-gray base is overlaid with an
   exact white duplicate only where JS detects a genuinely dark background. */
html body .kloos-menu-trigger {
  position: fixed !important;
  isolation: isolate;
  background: transparent !important;
  background-color: transparent !important;
  color: var(--wp--preset--color--dark-gray, #292929) !important;
}

.kloos-menu-trigger__contrast {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  box-sizing: border-box;
  padding: inherit;
  color: var(--wp--preset--color--white, #fff) !important;
  pointer-events: none;
  user-select: none;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: 0 0;
  -webkit-mask-size: 100% 100%;
  mask-repeat: no-repeat;
  mask-position: 0 0;
  mask-size: 100% 100%;
}

.kloos-menu-trigger__contrast .kloos-menu-dot {
  background: currentColor !important;
}

/* Base children stay beneath the clipped white duplicate. */
.kloos-menu-trigger > .kloos-menu-trigger__label,
.kloos-menu-trigger > .kloos-menu-dot {
  position: relative;
  z-index: 1;
}

/* ==========================================================
   KLOOS MENU V5 – REAL GUTENBERG HEADER AS SINGLE SOURCE
   ========================================================== */

/* If the page/template already renders the editable Gutenberg Navigation
   block, JS marks ONLY that navigation as the source and hides it. The rest of
   the original header/template part (e.g. logo) is left untouched. */
html.kloos-menu-js .kloos-live-navigation-source {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* The server-rendered copy exists only as a fallback data source and must never
   become visible or create layout space. */
html.kloos-menu-js [data-kloos-menu-source] {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
}

/* V5 menu colors are owned by the sidebar, never by Gutenberg color classes. */
html body .kloos-sidebar-navigation .kloos-menu-list > li > a {
  color: var(--kloos-menu-white) !important;
}

html body .kloos-sidebar-navigation .kloos-menu-list > li.is-current > a,
html body .kloos-sidebar-navigation .kloos-menu-list > li.is-current-ancestor > a,
html body .kloos-sidebar-navigation .kloos-menu-list > li > a[aria-current="page"] {
  color: var(--kloos-menu-active) !important;
}

html body .kloos-sidebar-navigation .kloos-menu-list > li > ul a {
  color: var(--kloos-menu-white) !important;
}

html body .kloos-sidebar-navigation .kloos-menu-list > li > ul li.is-current > a,
html body .kloos-sidebar-navigation .kloos-menu-list > li > ul a[aria-current="page"] {
  color: var(--kloos-menu-active) !important;
}


/* ==========================================================
   KLOOS MENU V6 – COLOR STATE HARDENING
   ----------------------------------------------------------
   MCG's generic `.menu` style also contains color declarations on this
   installation. The cloned sidebar must NOT inherit those colors.

   State rule:
   - all normal main/sub items = white
   - only current page / current ancestor = yellow
   ========================================================== */

html body .kloos-menu-panel .kloos-sidebar-navigation .kloos-menu-list > li > a,
html body .kloos-menu-panel .kloos-sidebar-navigation .kloos-menu-list > li > a:link,
html body .kloos-menu-panel .kloos-sidebar-navigation .kloos-menu-list > li > a:visited {
  color: var(--wp--preset--color--white, #ffffff) !important;
}

html body .kloos-menu-panel .kloos-sidebar-navigation .kloos-menu-list > li > .kloos-submenu-toggle {
  color: var(--wp--preset--color--white, #ffffff) !important;
}

html body .kloos-menu-panel .kloos-sidebar-navigation .kloos-menu-list > li > ul > li,
html body .kloos-menu-panel .kloos-sidebar-navigation .kloos-menu-list > li > ul > li::marker,
html body .kloos-menu-panel .kloos-sidebar-navigation .kloos-menu-list > li > ul a,
html body .kloos-menu-panel .kloos-sidebar-navigation .kloos-menu-list > li > ul a:link,
html body .kloos-menu-panel .kloos-sidebar-navigation .kloos-menu-list > li > ul a:visited {
  color: var(--wp--preset--color--white, #ffffff) !important;
}

/* Selected/current MAIN item. A parent is yellow only when the active page is
   actually inside that submenu. Merely having a submenu/open state is NOT
   enough to make it yellow. */
html body .kloos-menu-panel .kloos-sidebar-navigation .kloos-menu-list > li.is-current > a,
html body .kloos-menu-panel .kloos-sidebar-navigation .kloos-menu-list > li.is-current-ancestor > a,
html body .kloos-menu-panel .kloos-sidebar-navigation .kloos-menu-list > li > a[aria-current="page"],
html body .kloos-menu-panel .kloos-sidebar-navigation .kloos-menu-list > li > a[aria-current="true"] {
  color: var(--wp--preset--color--yellow, #ffb000) !important;
}

html body .kloos-menu-panel .kloos-sidebar-navigation .kloos-menu-list > li.is-current > .kloos-submenu-toggle,
html body .kloos-menu-panel .kloos-sidebar-navigation .kloos-menu-list > li.is-current-ancestor > .kloos-submenu-toggle {
  color: var(--wp--preset--color--yellow, #ffb000) !important;
}

/* Selected/current SUB item. */
html body .kloos-menu-panel .kloos-sidebar-navigation .kloos-menu-list > li > ul li.is-current > a,
html body .kloos-menu-panel .kloos-sidebar-navigation .kloos-menu-list > li > ul a[aria-current="page"],
html body .kloos-menu-panel .kloos-sidebar-navigation .kloos-menu-list > li > ul a[aria-current="true"] {
  color: var(--wp--preset--color--yellow, #ffb000) !important;
}

html body .kloos-menu-panel .kloos-sidebar-navigation .kloos-menu-list > li > ul li.is-current::marker {
  color: var(--wp--preset--color--yellow, #ffb000) !important;
}

@media (hover: hover) and (pointer: fine) {
  html body .kloos-menu-panel .kloos-sidebar-navigation .kloos-menu-list > li:not(.is-current):not(.is-current-ancestor) > a:hover,
  html body .kloos-menu-panel .kloos-sidebar-navigation .kloos-menu-list > li > ul li:not(.is-current) > a:hover {
    color: var(--wp--preset--color--yellow, #ffb000) !important;
  }
}


/* ==========================================================
   KLOOS MENU V7 – CURRENT STATE + FIRST-CLICK FIX
   ========================================================== */

/* Sidebar typography and colors are fully owned here. No Gutenberg/MCG
   utility class is allowed to paint the cloned menu text. */
html body .kloos-menu-panel .kloos-sidebar-navigation .kloos-menu-list > li > a,
html body .kloos-menu-panel .kloos-sidebar-navigation .kloos-menu-list > li > a:link,
html body .kloos-menu-panel .kloos-sidebar-navigation .kloos-menu-list > li > a:visited {
  color: var(--wp--preset--color--white, #fff) !important;
  -webkit-text-fill-color: var(--wp--preset--color--white, #fff) !important;
  font-family: Inter, sans-serif !important;
  font-size: 25px !important;
  font-weight: 700 !important;
  line-height: 1.5 !important;
}

html body .kloos-menu-panel .kloos-sidebar-navigation .kloos-menu-list > li > ul a,
html body .kloos-menu-panel .kloos-sidebar-navigation .kloos-menu-list > li > ul a:link,
html body .kloos-menu-panel .kloos-sidebar-navigation .kloos-menu-list > li > ul a:visited {
  color: var(--wp--preset--color--white, #fff) !important;
  -webkit-text-fill-color: var(--wp--preset--color--white, #fff) !important;
  font-family: Inter, sans-serif !important;
  font-size: 18px !important;
  font-weight: 400 !important;
  line-height: 1.55 !important;
}

/* Yellow ONLY for the genuinely current item / current ancestor. */
html body .kloos-menu-panel .kloos-sidebar-navigation .kloos-menu-list > li.is-current > a,
html body .kloos-menu-panel .kloos-sidebar-navigation .kloos-menu-list > li.is-current-ancestor > a,
html body .kloos-menu-panel .kloos-sidebar-navigation .kloos-menu-list > li > a[aria-current="page"],
html body .kloos-menu-panel .kloos-sidebar-navigation .kloos-menu-list > li > ul li.is-current > a,
html body .kloos-menu-panel .kloos-sidebar-navigation .kloos-menu-list > li > ul a[aria-current="page"] {
  color: var(--wp--preset--color--yellow, #ffb000) !important;
  -webkit-text-fill-color: var(--wp--preset--color--yellow, #ffb000) !important;
}

html body .kloos-menu-panel .kloos-sidebar-navigation .kloos-menu-list > li > .kloos-submenu-toggle {
  color: var(--wp--preset--color--white, #fff) !important;
}

html body .kloos-menu-panel .kloos-sidebar-navigation .kloos-menu-list > li.is-current-ancestor > .kloos-submenu-toggle {
  color: var(--wp--preset--color--yellow, #ffb000) !important;
}

/* Closed = chevron down. Open = chevron up. These are intentionally explicit
   so the first click can never begin from the opposite visual state. */
html body .kloos-menu-panel .kloos-submenu-toggle::before {
  margin-top: -5px !important;
  transform: rotate(45deg) !important;
}

html body .kloos-menu-panel .kloos-menu-list > li.is-submenu-open > .kloos-submenu-toggle::before {
  margin-top: 5px !important;
  transform: rotate(225deg) !important;
}