/* =============================================================================
   BASE HEADER
   ============================================================================= */

header {
  position: sticky;
  top: 0;
  width: 100%;
  z-index: 50;
}

/* kratzen-header uses position: relative so inner elements can use position: absolute */
header.kratzen-header {
  position: relative;
}

/* global inline padding for non-home headers */
header:not(.kratzen-header) .kratzen-outer-wrapper {
  padding-inline: var(--wp--custom--global-outer-padding-inline, 0px) !important;
}

/* =============================================================================
   HERO IMAGE
   ============================================================================= */

.kratzen-hero-image {
  max-height: 1028px;
  height: 100dvh;
  min-height: unset;
}

@media (max-width: 640px) {
  .kratzen-hero-image {
    max-height: 650px;
  }
}

/* =============================================================================
   HERO STATE  (kratzen-header, not unified)
   ============================================================================= */

/* outer-wrapper sits on top of the hero image via absolute positioning */
header.kratzen-header .kratzen-outer-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  border-bottom: none !important;
}

/* wrapper must fill the outer-wrapper so nav's flex-grow pushes Kratzen to the bottom */
header.kratzen-header .kratzen-outer-wrapper:not(.unified) .kratzen-wrapper {
  height: 100%;
}

/* inline padding */
header.kratzen-header .kratzen-wrapper {
  padding-inline: var(--wp--custom--global-outer-padding-inline, 0px) !important;
  width: 100%;
}

/* nav fills remaining space and aligns to the end (top-right) */
header.kratzen-header .kratzen-wrapper nav {
  flex-grow: 1;
  align-self: flex-end;
  z-index: 2;
}

/* Kratzen heading sits below the nav */
/* opacity: 0 als CLS-Schutz – JS setzt opacity: 1 sobald die korrekte Font-Size berechnet ist */
header.kratzen-header .kratzen-wrapper .kratzen {
  z-index: 1;
  pointer-events: none; /* not clickable in hero state */
  opacity: 0;
  transition: opacity 0.15s ease;
}

/* Desktop-Nav-ul im Hero State: startet unsichtbar, wird von JS enthüllt (CLS-Schutz) */
header.kratzen-header .kratzen-outer-wrapper:not(.unified) nav:not(.mobileNav) ul {
  opacity: 0;
  transition: opacity 0.15s ease;
}

/* hide mobile nav ul in hero state (makeNavMenu.js controls this) */
header.kratzen-header .kratzen-wrapper nav.mobileNav ul {
  opacity: 0;
  pointer-events: none;
}

/* navdown arrow */
header.kratzen-header .kratzen-outer-wrapper .kratzen-wrapper .navdown {
  transition: opacity 1s ease-in-out;
}
header.kratzen-header .kratzen-outer-wrapper .kratzen-wrapper .navdown.disappear {
  opacity: 0;
}

/* =============================================================================
   UNIFIED STATE  (kratzen-header + .unified on outer-wrapper, added by JS)
   ============================================================================= */

header.kratzen-header .kratzen-outer-wrapper.unified {
  position: fixed;
  height: auto;
  background-color: var(--wp--preset--color--background, black);
}

header.kratzen-header .kratzen-outer-wrapper.unified .kratzen-wrapper {
  flex-direction: row-reverse;
  justify-content: space-between;
}

header.kratzen-header .kratzen-outer-wrapper.unified .kratzen-wrapper:has(nav.mobileNav) {
  flex-direction: row-reverse;
  align-items: center;
}

/* nav resets in unified state */
header.kratzen-header .kratzen-outer-wrapper.unified .kratzen-wrapper nav {
  flex-grow: 0;
  align-self: center;
  visibility: visible;
}

header.kratzen-header .kratzen-outer-wrapper.unified .kratzen-wrapper nav.mobileNav {
  align-items: flex-end;
}

header.kratzen-header .kratzen-outer-wrapper.unified .kratzen-wrapper nav ul {
  flex-direction: row;
  color: var(--wp--preset--color--foreground, white) !important;
}

header.kratzen-header .kratzen-outer-wrapper.unified .kratzen-wrapper nav.navOpen ul {
  display: flex;
}

/* Kratzen heading is now clickable in unified state */
header.kratzen-header .kratzen-outer-wrapper.unified .kratzen-wrapper .kratzen {
  pointer-events: auto;
}

/* navdown arrow hidden in unified state */
header.kratzen-header .kratzen-outer-wrapper.unified .kratzen-wrapper .navdown {
  display: none;
}

/* hide mobile nav ul by default in unified state */
header.kratzen-header .kratzen-outer-wrapper.unified nav.mobileNav ul,
header .kratzen-outer-wrapper nav.mobileNav ul {
  display: none;
}

/* =============================================================================
   MOBILE NAV OPEN STATE  (.navOpen added by makeNavMenu.js)
   ============================================================================= */

header .kratzen-outer-wrapper .kratzen-wrapper nav.mobileNav.navOpen ul,
header .kratzen-outer-wrapper nav.mobileNav.navOpen ul {
  pointer-events: auto;
  display: flex;
  opacity: 0; /* JS animiert auf 1 */
  transform: translateY(-6px); /* JS animiert auf translateY(0) */
  transition:
    opacity 0.22s ease,
    transform 0.22s ease;
  position: fixed;
  width: 100%;
  left: 0;
  top: calc(var(--unified-height, 60px) - 2px);
  flex-direction: column;
  align-items: center;
  background-color: var(--wp--preset--color--background, black);
  color: var(--wp--preset--color--foreground, white) !important;
  padding-top: var(--padding-top-desktop, 0px);
  padding-bottom: var(--padding-bottom-desktop, 0px);
  padding-inline: var(--wp--custom--global-outer-padding-inline, 0px);
  border-bottom: 1px solid var(--wp--preset--color--foreground, white) !important;
}

/* hero state: nav opens below the hamburger button position */
header.kratzen-header
  .kratzen-outer-wrapper:not(.unified)
  .kratzen-wrapper
  nav.mobileNav.navOpen
  ul {
  padding-top: calc(var(--nav-initial-top, 0px) + var(--padding-top-desktop, 0px));
  padding-bottom: var(--padding-bottom-desktop, 0px);
  padding-inline: var(--wp--custom--global-outer-padding-inline, 0px);
}

@media (max-width: 1024px) {
  header.kratzen-header
    .kratzen-outer-wrapper:not(.unified)
    .kratzen-wrapper
    nav.mobileNav.navOpen
    ul {
    padding-top: calc(var(--nav-initial-top, 0px) + var(--wp--preset--spacing--xl, 3rem));
    padding-bottom: var(--wp--preset--spacing--medium);
  }

  header .kratzen-outer-wrapper .kratzen-wrapper nav.mobileNav.navOpen ul,
  header .kratzen-outer-wrapper nav.mobileNav.navOpen ul {
    padding-top: var(--wp--preset--spacing--xl, 3rem);
    padding-bottom: var(--wp--preset--spacing--medium);
  }
}

@media (max-width: 640px) {
  /* header.kratzen-header
    .kratzen-outer-wrapper:not(.unified)
    .kratzen-wrapper
    nav.mobileNav.navOpen
    ul {
    padding-top: var(--wp--preset--spacing--large-responsive, 0px);
  }

  header .kratzen-outer-wrapper .kratzen-wrapper nav.mobileNav.navOpen ul,
  header .kratzen-outer-wrapper nav.mobileNav.navOpen ul {
    padding-top: var(--wp--preset--spacing--large-responsive, 0px);
    padding-bottom: var(
      --padding-bottom-mobile,
      var(--padding-bottom-tablet, var(--padding-bottom-desktop, 0px))
    );
  } */
}

/* =============================================================================
   MISC
   ============================================================================= */

/* nav link hover in hero state (desktop only) */
@media (min-width: 1025px) {
  header.kratzen-header .kratzen-outer-wrapper:not(.unified) .kratzen-wrapper nav ul li a:hover {
    color: var(--wp--preset--color--background, black) !important;
  }
}

/* remove padding on mobile for unified header */
@media (max-width: 1024px) {
  header .kratzen-outer-wrapper {
    padding-inline: 0px !important;
  }
}