/* assets/css/header-layout.css */

/* === Defaults (werden vom Customizer via :root überschrieben) === */
:root{
  /* Brand (WordPress-Seitenlogo) */
  --brand-x-vw: 0vw;
  --brand-x-px: 0px;
  --brand-y:    0px;
  --brand-scale: 1;

  /* Primary Nav */
  --nav-x-vw: 0vw;
  --nav-x-px: 0px;
  --nav-y:    0px;
  --nav-scale: 1;

  /* Header CTA */
  --intro-nudge: 0px;
  --cta-x-vw: 0vw;
  --cta-x-px: 0px;
  --cta-y:    0px;
  --cta-scale: 1;
}

/* Wir müssen außerhalb des Header-Containers überstehen dürfen */
.site-header__inner{ overflow: visible; }

/* ===== Brand (A-Tag mit Custom Logo) ===== */
.site-header .brand--logo{
  display: inline-block;
  transform-origin: left center;
  transform:
    translate3d(
      calc(var(--brand-x-vw, 0vw) + var(--brand-x-px, 0px)),
      var(--brand-y, 0px),
      0
    );
  will-change: transform;
}

/* Logo-IMG wirklich größer machen -> triggert srcset in hoher Auflösung */
.site-header .brand--logo img{
  width: calc(var(--brand-base-w) * var(--brand-scale, 1));
  height: auto;
}

/* ===== Primary Nav ===== */
.site-header .primary-nav{
  transform-origin: left center;
  transform:
    translate3d(
      calc(var(--nav-x-vw, 0vw) + var(--nav-x-px, 0px)),
      var(--nav-y, 0px),
      0
    )
    scale(var(--nav-scale, 1));
  will-change: transform;
}

/* ===== Header CTA ===== */
.site-header .header-cta{
  transform-origin: right center;
  transform:
    translate3d(
      calc(var(--cta-x-vw, 0vw) + var(--cta-x-px, 0px)),
      var(--cta-y, 0px),
      0
    )
    scale(var(--cta-scale, 1));
  will-change: transform;
}

/* Optional: auf Mobile neutralisieren */
@media (max-width: 768px){
  .site-header .brand--logo,
  .site-header .primary-nav,
  .site-header .header-cta{
    transform: translate3d(0,0,0) scale(1);
  }
}




/* ===== Header fixieren beim Scrollen ===== */
.site-header{
  position: sticky !important; /* bleibt oben im Flow kleben */
  top: 0;
  z-index: 10;                 /* über Slices (z=1) und Content */
  /* optional: leichtes Glass-Feeling
  backdrop-filter: saturate(1.2) blur(6px);
  -webkit-backdrop-filter: saturate(1.2) blur(6px);
  */
}

/* Fallback für Browser ohne sticky */
@supports not (position: sticky){
  .site-header{
    position: fixed !important;
    left: 0; right: 0; top: 0;
  }
  /* Platz für den festen Header schaffen (default; wird unten per JS genauer gesetzt) */
  body{ padding-top: var(--header-h, 80px); }
}

/* Intro-Abstand: gesteuert via --intro-nudge (Customizer) */
body.home .site-intro,
body.front-page .site-intro{
  margin-top: calc(var(--sk-top-offset, 0px) + var(--header-h, 64px) + var(--intro-nudge, 0px));
  margin-bottom: calc(var(--intro-nudge, 0px) * -1);
}