/* =========================
   Hamburger styles
========================= */

/* 
Hamburger settings
*/
/* button */
header .nav_menu_button_wrapper .nav_menu_button {
  width: var(--size-hamburger, 32px);
  height: var(--size-hamburger, 32px);
  flex-direction: column;
  justify-content: center;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  position: relative;
  background: transparent;
}
/* lines */
header .nav_menu_button_wrapper .nav_menu_button span.line {
  display: block;
  height: 3px;
  width: 100%;
  border-radius: 2px;
  background-color: var(--wp--preset--color--foreground, white);

  position: absolute;
  left: 0;
  top: 50%;
  margin-top: -1.5px;

  transition:
    transform 0.3s ease,
    opacity 0.3s ease;
  transform-origin: center;
  will-change: transform, opacity;
}
/* Top Line: Move UP by 32px (25% of 128px container) */
header .nav_menu_button_wrapper .nav_menu_button span.line:nth-child(1) {
  transform: translateY(calc(-0.25 * var(--size-hamburger, 32px)));
}
/* Middle Line: Stay in center */
header .nav_menu_button_wrapper .nav_menu_button span.line:nth-child(2) {
  transform: translateY(0);
}
/* Bottom Line: Move DOWN by 32px */
header .nav_menu_button_wrapper .nav_menu_button span.line:nth-child(3) {
  transform: translateY(calc(0.25 * var(--size-hamburger, 32px)));
}

/* 
Visibility - turn on in mobileNav state
*/
header .kratzen-outer-wrapper nav .nav_menu_button_wrapper {
  display: none;
}
header .kratzen-outer-wrapper nav.mobileNav .nav_menu_button_wrapper {
  display: flex;
}

/* 
Position - go from fixed (when not unified) to normal (when unified)
(JAVASCRIPT)
Give nav round background when not unified
*/
header
  .kratzen-outer-wrapper
  .kratzen-wrapper
  nav.mobileNav
  .nav_menu_button_wrapper {
  background-color: var(--wp--preset--color--background, black);
  padding: 1rem;
  border-radius: 8px;
}

/* nav hamburger => animate lines to cross*/
/* Line 1: Move to center (0px) and Rotate */
header nav.mobileNav.navOpen .line:nth-child(1) {
  transform: translateY(0) rotate(45deg);
}

/* Line 2: Fade out */
header nav.mobileNav.navOpen .line:nth-child(2) {
  opacity: 0;
}

/* Line 3: Move to center (0px) and Rotate */
header nav.mobileNav.navOpen .line:nth-child(3) {
  transform: translateY(0) rotate(-45deg);
}

/* header
  .kratzen-outer-wrapper.unified
  nav.mobileNav
  .nav_menu_button_wrapper {
  background-color: unset;
  padding: unset;
  border-radius: unset;
} */