/* =============================================
   EML Base – Header Behaviors
   Klassen werden per PHP/Meta auf <header> gesetzt
   ============================================= */

/* ---- ADMIN BAR OFFSET ------------------------------
   Berücksichtigt die WordPress Admin-Bar für angemeldete
   Benutzer, damit der Header nicht dahinter verschwindet.
   --------------------------------------------------- */
:root {
	--eml-admin-bar-height: 0px;
}

body.admin-bar {
	--eml-admin-bar-height: 32px;
}

@media screen and (max-width: 782px) {
	body.admin-bar {
		--eml-admin-bar-height: 46px;
	}
}

@media screen and (max-width: 600px) {
	body.admin-bar {
		--eml-admin-bar-height: 0px;
	}
}

/* ---- STICKY ----------------------------------------
   Header klebt beim Scrollen oben (kein Layout-Shift)
   --------------------------------------------------- */
.eml-header-sticky {
	position: sticky;
	top: var(--eml-admin-bar-height, 0px);
	z-index: 100;
	width: 100%;
}

/* ---- AUTOHIDE ---------------------------------------
   Versteckt sich beim Scrollen nach unten,
   erscheint sofort wieder beim Scrollen nach oben
   --------------------------------------------------- */
.eml-header-autohide {
	position: sticky;
	top: var(--eml-admin-bar-height, 0px);
	z-index: 100;
	width: 100%;
	will-change: transform;
	transform: translateY(0);
	transition:
		transform 0.45s cubic-bezier(0.4, 0, 0.2, 1),
		box-shadow 0.3s ease;
}

.eml-header-autohide.eml-header--scrolled {
	box-shadow: 0 2px 24px rgba(0, 0, 0, 0.08);
}

.eml-header-autohide.eml-header--hidden {
	transform: translateY(-110%);
	box-shadow: none;
}

/* ---- OVERLAY ----------------------------------------
   Header überlagert den ersten Seitenabschnitt
   (z.B. Hero-Bild) – kein Platz wird reserviert
   --------------------------------------------------- */
.wp-site-blocks:has(> header.eml-header-overlay) {
	position: relative;
}

.eml-header-overlay {
	position: absolute;
	inset-inline: 0;
	top: var(--eml-admin-bar-height, 0px);
	z-index: 100;
	width: 100%;
	background: transparent !important;
}

/* ---- OVERLAY + STICKY ------------------------------
   Startet transparent, wird beim Scrollen sichtbar
   --------------------------------------------------- */
.eml-header-overlay.eml-header-sticky {
	position: fixed;
	top: var(--eml-admin-bar-height, 0px);
	background: transparent !important;
	transition:
		background-color 0.4s ease,
		box-shadow 0.4s ease;
}

.eml-header-overlay.eml-header-sticky.eml-header--scrolled {
	background: var(--wp--preset--color--base, #fff) !important;
	box-shadow: 0 2px 24px rgba(0, 0, 0, 0.08);
}

/* ---- OVERLAY + AUTOHIDE ----------------------------
   Transparent, wird bei Scroll sichtbar + versteckt sich
   --------------------------------------------------- */
.eml-header-overlay.eml-header-autohide {
	position: fixed;
	top: var(--eml-admin-bar-height, 0px);
	background: transparent !important;
	will-change: transform;
	transition:
		transform 0.45s cubic-bezier(0.4, 0, 0.2, 1),
		background-color 0.4s ease,
		box-shadow 0.3s ease;
}

.eml-header-overlay.eml-header-autohide.eml-header--scrolled {
	background: var(--wp--preset--color--base, #fff) !important;
	box-shadow: 0 2px 24px rgba(0, 0, 0, 0.08);
}

.eml-header-overlay.eml-header-autohide.eml-header--hidden {
	transform: translateY(-110%);
	box-shadow: none;
}

/* ---- ALLE DREI --------------------------------------
   Overlay + Sticky + Autohide: autohide übernimmt
   --------------------------------------------------- */
.eml-header-overlay.eml-header-sticky.eml-header-autohide {
	position: fixed;
	top: var(--eml-admin-bar-height, 0px);
	background: transparent !important;
	will-change: transform;
	transition:
		transform 0.45s cubic-bezier(0.4, 0, 0.2, 1),
		background-color 0.4s ease,
		box-shadow 0.3s ease;
}

.eml-header-overlay.eml-header-sticky.eml-header-autohide.eml-header--scrolled {
	background: var(--wp--preset--color--base, #fff) !important;
	box-shadow: 0 2px 24px rgba(0, 0, 0, 0.08);
}

.eml-header-overlay.eml-header-sticky.eml-header-autohide.eml-header--hidden {
	transform: translateY(-110%);
	box-shadow: none;
}

/* ---- OVERLAY: Intelligente Inhaltspositionierung ---
   1. Standardmäßig erhält <main> bei Overlay-Header einen oberen Innenabstand,
      damit normale Seiten ohne Banner (z.B. Datenschutzerklärung, Impressum, Textseiten)
      SAUBER UNTERHALB des Headers beginnen und nicht verdeckt werden.
   2. NUR wenn die Seite direkt mit einem Cover-Block, Video oder einem Banner mit
      Hintergrundfarbe/Bild startet, rückt dieser visuelle Hero-Block ganz nach oben
      hinter den transparenten Header.
   --------------------------------------------------- */
body:has(header.eml-header-overlay) .wp-site-blocks > main {
	padding-top: calc(var(--eml-header-height, 80px) + var(--wp--preset--spacing--30, 1.5rem)) !important;
}

/* Seite startet mit einem visuellen Cover-, Video- oder Hintergrund-Banner: hinter den Header schieben */
body:has(header.eml-header-overlay) .wp-site-blocks > main:has(.entry-content > .wp-block-cover:first-child),
body:has(header.eml-header-overlay) .wp-site-blocks > main:has(.entry-content > .has-background:first-child),
body:has(header.eml-header-overlay) .wp-site-blocks > main:has(.entry-content > .wp-block-video:first-child),
body:has(header.eml-header-overlay) .wp-site-blocks > main:has(.wp-block-post-content > .wp-block-cover:first-child),
body:has(header.eml-header-overlay) .wp-site-blocks > main:has(.wp-block-post-content > .has-background:first-child),
body:has(header.eml-header-overlay) .wp-site-blocks > main:has(.wp-block-post-content > .wp-block-video:first-child),
body:has(header.eml-header-overlay) .wp-site-blocks > main:has(> .wp-block-cover:first-child),
body:has(header.eml-header-overlay) .wp-site-blocks > main:has(> .has-background:first-child),
body:has(header.eml-header-overlay) .wp-site-blocks > main:has(> .wp-block-video:first-child),
body:has(header.eml-header-overlay) .wp-site-blocks > main:has(> article > .wp-block-post-content > .wp-block-cover:first-child),
body:has(header.eml-header-overlay) .wp-site-blocks > main:has(> article > .wp-block-post-content > .has-background:first-child) {
	padding-top: 0 !important;
}

/* ---- REDUCED MOTION -------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.eml-header-autohide,
	.eml-header-overlay.eml-header-sticky,
	.eml-header-overlay.eml-header-autohide,
	.eml-header-overlay.eml-header-sticky.eml-header-autohide {
		transition: none !important;
	}
}