/* ==========================================================================
   Stadtkapelle Lahr – Header
   PC/Laptop: bleibt beim Scrollen in voller Größe oben stehen.
   Handy:     bleibt ebenfalls oben, wird beim Scrollen kompakter
              (Klasse .stk-header-compact, gesetzt von assets/js/header.js).
   Hintergrund und Linie folgen der Farbpalette und damit dem Dark Mode.

   Höhe des Headers = Höhe des Logos. Anpassen über --stk-header-h:
   ========================================================================== */

:root {
	--stk-header-h: 88px;      /* PC */
	--stk-logo-abstand: 12px;  /* Luft über und unter dem Logo */
}
@media (max-width: 781px) {
	:root {
		--stk-header-h: 68px;      /* Handy */
		--stk-logo-abstand: 9px;
	}
	:root.stk-header-compact {
		--stk-header-h: 52px;      /* Handy, beim Scrollen */
		--stk-logo-abstand: 6px;
	}
}

/* Das Eltern-Theme begrenzt den Seitencontainer auf eine Bildschirmhöhe.
   Damit würde der Header nach dem ersten Bildschirm wegscrollen. */
body:has(.stk-header) .wp-site-blocks {
	height: auto;
	min-height: 100%;
}

header.wp-block-template-part:has(.stk-header) {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 100;
}

.stk-header {
	min-height: var(--stk-header-h);
	background: var(--wp--preset--color--custom-karten, #ffffff);
	border-bottom: 1px solid var(--wp--preset--color--custom-linien-und-rahmen, rgba(0, 0, 0, .08));
	transition: background-color .3s ease, border-color .3s ease, min-height .25s ease, box-shadow .25s ease;
}

/* Leichter Schatten, sobald gescrollt wurde */
:root.stk-header-scrolled .stk-header {
	box-shadow: 0 4px 16px rgba(0, 0, 0, .08);
}

/* Logo: Header-Höhe abzüglich Abstand oben und unten (--stk-logo-abstand) */
.stk-header .wp-block-site-logo {
	display: flex;
	align-self: stretch;
	align-items: center;
	flex-shrink: 0;
	margin: 0;
	line-height: 0;
}
.stk-header .wp-block-site-logo a,
.stk-header .wp-block-site-logo .custom-logo-link {
	display: flex;
	align-items: center;
	height: var(--stk-header-h);
	transition: height .25s ease;
}
.stk-header .wp-block-site-logo img {
	display: block;
	width: auto !important;
	height: calc(var(--stk-header-h) - 2 * var(--stk-logo-abstand)) !important;
	max-width: none;
	object-fit: contain;
	transition: height .25s ease;
}

/* Logo-Wechsel hell/dunkel (Adressen in functions.php, Abschnitt 6) */
.wp-block-site-logo .stk-logo-dark { display: none !important; }
:root[data-theme="dark"] .wp-block-site-logo .stk-logo-dark  { display: block !important; }
:root[data-theme="dark"] .wp-block-site-logo:has(.stk-logo-dark) .stk-logo-light { display: none !important; }

.stk-header .wp-block-site-title a {
	color: var(--wp--preset--color--custom-haupttext-und-berschriften, inherit);
	text-decoration: none;
}

/* Auf schmalen Handys Titel kürzer halten, damit rechts Platz bleibt */
@media (max-width: 420px) {
	.stk-header .wp-block-site-title {
		font-size: 1rem !important;
	}
}

/* Handy, kompakter Zustand: Titel und Menü-Knopf etwas kleiner */
@media (max-width: 781px) {
	.stk-header .wp-block-site-title {
		transition: font-size .25s ease;
	}
	:root.stk-header-compact .stk-header .wp-block-site-title {
		font-size: .95rem !important;
	}
	.stk-header .stk-hmenu__button {
		transition: transform .25s ease, box-shadow .2s ease, background-color .2s ease;
	}
	:root.stk-header-compact .stk-header .stk-hmenu__button {
		transform: scale(.84);
	}
}

@media (prefers-reduced-motion: reduce) {
	.stk-header,
	.stk-header * {
		transition: none !important;
	}
}

/* Admin-Leiste ist auf Handys nicht fixiert → kein Abstand nötig */
@media (max-width: 600px) {
	header.wp-block-template-part:has(.stk-header) {
		top: 0;
	}
}