/* ==========================================================
   SITE MENU
   The "header" template part is the menu: the brand, the "menü" button, and the panel they open,
   with the Navigation block in it. How it all looks — colours, fonts, spacing, the panel's width
   at each screen size, the current page in yellow — is Von Block's, on those blocks, and is edited
   in the Site Editor. inc/site-header.php prints the part once on every page, in a layer of its
   own that covers the window. This file is how it sits there and how it opens (only there: in the
   Site Editor the part is shown as it is, open); script.js opens and closes it.
   ========================================================== */

/* The window, minus the admin bar when logged in. A Von Block container, so the blocks inside
   find their screen sizes against it; the page itself is not in it, so nothing here is held in
   the page's box. Two classes: over the framework's own container width. */
.vonblock-container.kloos-site-menu-layer {
  position: fixed;
  inset: var(--wp-admin--admin-bar--height, 0px) 0 0;
  z-index: 999999;
  max-width: none;
  margin: 0;
  pointer-events: none;
}

.kloos-site-menu-layer > .kloos-site-menu {
  margin: 0;
}

.kloos-site-menu-layer .kloos-global-brand,
.kloos-site-menu-layer .kloos-menu-trigger {
  position: absolute;
  z-index: 2;
  margin: 0;
  pointer-events: auto;
}

/* Where the brand sits is its own (a custom style), the button sits in the corner */
.kloos-site-menu-layer .kloos-global-brand {
  transition: color 220ms ease;
}

.kloos-site-menu-layer .kloos-menu-trigger {
  top: 0;
  right: 0;
}

body.kloos-menu-open .kloos-site-menu-layer .kloos-global-brand {
  color: var(--mcg-color-text-on-dark);
}

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

/* ----------------------------------------------------------
   The panel slides in from the right over a dimmed page
   ---------------------------------------------------------- */
.kloos-site-menu-layer .kloos-menu-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 360ms cubic-bezier(.22, .61, .36, 1), visibility 360ms cubic-bezier(.22, .61, .36, 1);
}

.kloos-site-menu-layer .kloos-menu-overlay[hidden] {
  display: none;
}

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

.kloos-site-menu-layer .kloos-menu-panel {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  max-width: 100vw;
  margin: 0;
  box-sizing: border-box;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  transform: translateX(100%);
  transition: transform 360ms cubic-bezier(.22, .61, .36, 1);
}

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

body.kloos-menu-open {
  overflow: hidden !important; /* over style.css's overflow-x: clip !important on phones */
  touch-action: none;
}

/* ----------------------------------------------------------
   Submenus open in place, smoothly, rather than as core's dropdowns; script.js sets
   .is-submenu-open and --kloos-submenu-height
   ---------------------------------------------------------- */
/* The second selector is over core's rules for an open submenu, which let it overflow */
.kloos-site-menu-layer .kloos-menu-nav .has-child .wp-block-navigation__submenu-container,
.kloos-site-menu-layer .kloos-menu-nav .has-child > [aria-expanded] ~ .wp-block-navigation__submenu-container {
  position: static;
  width: 100%;
  min-width: 0;
  height: auto;
  max-height: 0;
  overflow: hidden;
  visibility: visible;
  opacity: 0;
  border: 0;
  background: none;
  transition:
    max-height 340ms cubic-bezier(.22, .61, .36, 1),
    opacity 220ms ease,
    margin 340ms cubic-bezier(.22, .61, .36, 1);
}

/* The submenus take the menu's own colour (its Von Block colour class). Core paints them black
   when the Navigation block has no WordPress text colour (.wp-block-navigation:not(.has-text-color)
   .wp-block-navigation__submenu-container), so this is one class more specific than that */
.kloos-site-menu-layer .kloos-menu-nav.wp-block-navigation .has-child .wp-block-navigation__submenu-container {
  color: inherit;
}

.kloos-site-menu-layer .kloos-menu-nav .has-child.is-submenu-open > .wp-block-navigation__submenu-container {
  max-height: var(--kloos-submenu-height, 600px);
  opacity: 1;
}

/* The chevron is a button of its own here (core's lets clicks through) */
.kloos-site-menu-layer .kloos-menu-nav .has-child.open-on-click > .wp-block-navigation-submenu__toggle + .wp-block-navigation__submenu-icon {
  pointer-events: auto;
  cursor: pointer;
}

/* ----------------------------------------------------------
   The "menü" button's label and dot in white where the page behind the button is dark: a white
   copy on top, which script.js masks to the dark parts
   ---------------------------------------------------------- */
.kloos-site-menu-layer .kloos-menu-trigger .wp-block-button__link {
  position: relative;
  isolation: isolate;
}

.kloos-menu-trigger__contrast {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: inherit;
  box-sizing: border-box;
  padding: inherit;
  color: var(--mcg-color-text-on-dark);
  pointer-events: none;
  user-select: none;
  mask-repeat: no-repeat;
  mask-position: 0 0;
  mask-size: 100% 100%;
}

/* The same dot as the button's own (its ::after), at the same size for the same type */
.kloos-menu-trigger__contrast::after {
  content: "";
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: .72em;
  width: .72em;
  height: .72em;
  border-radius: 50%;
  background: currentColor;
}

/* ----------------------------------------------------------
   In the Site Editor: every submenu shown, open, so all the items can be edited at once
   ---------------------------------------------------------- */
/* !important: over the editor's own rules for a selected submenu (width: auto, min-width: 200px),
   which would put it beside its item */
.editor-styles-wrapper .kloos-menu-panel .kloos-menu-nav .has-child .wp-block-navigation__submenu-container {
  position: static;
  width: 100% !important;
  min-width: 0 !important;
  height: auto;
  overflow: visible;
  visibility: visible;
  opacity: 1;
  border: 0;
  background: none;
}

.editor-styles-wrapper .kloos-menu-panel .kloos-menu-nav .has-child > .wp-block-navigation__submenu-icon::before {
  margin-top: 5px;
  transform: rotate(225deg);
}

@media (prefers-reduced-motion: reduce) {
  .kloos-site-menu-layer .kloos-menu-overlay,
  .kloos-site-menu-layer .kloos-menu-panel,
  .kloos-site-menu-layer .kloos-menu-nav .has-child .wp-block-navigation__submenu-container {
    transition-duration: 1ms;
  }
}