/**
 * Blueprint Header Topbar v1
 *
 * Layer ueber der Hauptnavigation. Eigene Custom Properties — entkoppelt
 * von der Hauptnavigation. Reagiert auf Body-Klassen:
 *
 *   .has-topbar                 → Topbar wird gerendert
 *   .has-topbar-transparent     → Topbar im Overlay-Modus (over hero)
 *   .is-scrolled-topbar         → JS-Scroll-State (eigene Farben)
 *   .topbar-hidden-on-scroll    → JS-Scroll-State (Topbar ausgeblendet, hide-on-scroll)
 *   .topbar-vis-{visibility}    → Sichtbarkeitsregeln
 *   .topbar-behavior-{behavior} → Sticky-Verhalten (scrolls-with-header/hide-on-scroll/always-visible)
 *
 * Custom Properties (gesetzt aus header-topbar.php):
 *   --bp-topbar-bg
 *   --bp-topbar-text
 *   --bp-topbar-link
 *   --bp-topbar-link-hover
 *   --bp-topbar-border
 *   --bp-topbar-height
 *   --bp-topbar-container-width
 *
 * @since 1.12.2
 */

/* ─────────────────────────────────────────────────────────────────────────
   1 — BASE
   ───────────────────────────────────────────────────────────────────────── */

.bp-topbar {
	width: 100%;
	min-height: var(--bp-topbar-height, 36px);
	background: var(--bp-topbar-bg, transparent);
	color: var(--bp-topbar-text, inherit);
	font-size: 13px;
	line-height: 1.4;
	position: relative;
	z-index: 11; /* knapp ueber der Navbar — Topbar liegt visuell oben */
}

.bp-topbar__inner {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 16px;
	min-height: var(--bp-topbar-height, 36px);
	padding: 4px 0;
	margin-inline: auto;
	width: 100%;
	max-width: var(--bp-topbar-container-width, 1200px);
	padding-left: 16px;
	padding-right: 16px;
	box-sizing: border-box;
}

/*
 * Container-Typen — entkoppelt von der Navbar-Breite.
 * Die tatsaechliche max-width kommt aus --bp-topbar-container-width
 * (gesetzt in inc/setup/header-topbar.php). Die Marker-Klassen
 * bp-topbar__inner--{type} sind nur Hooks fuer Theming/Padding.
 *
 * narrow=960 / standard=1200 / wide=1400 / full=100% / custom=user-px
 */
.bp-topbar__inner--full {
	max-width: none;
	padding-left: 24px;
	padding-right: 24px;
}

.bp-topbar__pos {
	display: flex;
	align-items: center;
	min-width: 0;
}
.bp-topbar__pos--left   { justify-content: flex-start; }
.bp-topbar__pos--center { justify-content: center; }
.bp-topbar__pos--right  { justify-content: flex-end; }

.bp-topbar__pos:empty { /* leerer Slot: kein Layout-Bruch */
	display: block;
}

.bp-topbar__slot {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	color: inherit;
}

/* ─────────────────────────────────────────────────────────────────────────
   2 — SLOT: KONTAKT
   ───────────────────────────────────────────────────────────────────────── */

.bp-topbar__contact {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--bp-topbar-link, inherit);
	text-decoration: none;
	transition: color .15s ease;
}
.bp-topbar__contact:hover,
.bp-topbar__contact:focus {
	color: var(--bp-topbar-link-hover, inherit);
}
.bp-topbar__contact-label {
	white-space: nowrap;
}
.bp-topbar__icon {
	font-size: 12px;
	opacity: .8;
}

/* ─────────────────────────────────────────────────────────────────────────
   3 — SLOT: SOCIAL
   ───────────────────────────────────────────────────────────────────────── */

.bp-topbar__slot--social {
	gap: 10px;
}
.bp-topbar__social-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--bp-topbar-link, inherit);
	text-decoration: none;
	font-size: 14px;
	width: 24px;
	height: 24px;
	transition: color .15s ease, background-color .15s ease, border-color .15s ease;
}
.bp-topbar__social-link:hover,
.bp-topbar__social-link:focus {
	color: var(--bp-topbar-link-hover, inherit);
}

/* Style: circle */
.bp-topbar__slot--social-circle .bp-topbar__social-link {
	width: 26px;
	height: 26px;
	border-radius: 50%;
	border: 1px solid var(--bp-topbar-border, currentColor);
}
.bp-topbar__slot--social-circle .bp-topbar__social-link:hover {
	border-color: var(--bp-topbar-link-hover, currentColor);
}

/* Style: text */
.bp-topbar__slot--social-text .bp-topbar__social-link {
	width: auto;
	height: auto;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	padding: 2px 0;
}
.bp-topbar__social-text { display: inline-block; }

/* ─────────────────────────────────────────────────────────────────────────
   4 — SLOT: MENU
   ───────────────────────────────────────────────────────────────────────── */

.bp-topbar__slot--menu {
	gap: 14px;
}
.bp-topbar__menu-label {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	opacity: .7;
}
.bp-topbar__menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: inline-flex;
	gap: 16px;
}
.bp-topbar__menu li { margin: 0; padding: 0; }
.bp-topbar__menu a {
	color: var(--bp-topbar-link, inherit);
	text-decoration: none;
	transition: color .15s ease;
	white-space: nowrap;
}
.bp-topbar__menu a:hover,
.bp-topbar__menu a:focus,
.bp-topbar__menu .current-menu-item > a {
	color: var(--bp-topbar-link-hover, inherit);
}

/* ─────────────────────────────────────────────────────────────────────────
   5 — SEPARATOR
   ───────────────────────────────────────────────────────────────────────── */

.bp-topbar--sep-bottom-border {
	border-bottom: 1px solid var(--bp-topbar-border, transparent);
}
.bp-topbar--sep-shadow {
	box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}
.bp-topbar--sep-none {
	border: 0;
	box-shadow: none;
}

/* ─────────────────────────────────────────────────────────────────────────
   6 — TRANSPARENT OVERLAY
   ───────────────────────────────────────────────────────────────────────── */

/*
 * Wenn Topbar transparent UND ueber Hero: bg=transparent, Border=transparent,
 * keine Schatten — Topbar ueberlagert den Hero ohne visuelle Unterbrechung.
 *
 * Wenn nicht ueber Hero: CSS-Fallback in den Theme-Background (Solid).
 * Body-Klasse `is-over-hero` wird vom page-top-context gesetzt.
 */
body.has-topbar-transparent.is-over-hero .bp-topbar {
	background: transparent;
	box-shadow: none;
}
body.has-topbar-transparent.is-over-hero .bp-topbar--sep-bottom-border {
	border-bottom-color: transparent;
}

/* Solid-Fallback (Topbar nicht ueber Hero, aber bg_mode=transparent gesetzt):
 * --bp-topbar-bg ist 'transparent' → wir setzen einen sichtbaren Fallback. */
body.has-topbar-transparent:not(.is-over-hero) .bp-topbar {
	background: var(--bp-color-bg-secondary, #f7f7f8);
}

/* ─────────────────────────────────────────────────────────────────────────
   7 — STICKY VERHALTEN
   ───────────────────────────────────────────────────────────────────────── */

/*
 * scrolls-with-header (Default): Topbar bleibt im Header-Block; Sticky-Header
 * scrollt sie als Teil des Headers mit. Keine Sonderregel — laeuft passiv.
 *
 * hide-on-scroll: Zwei Hide-Mechanismen — kontextabhaengig:
 *
 *   A) NORMALER HEADER-FLUSS (Default, body OHNE .is-over-hero):
 *      max-height-Collapse + opacity + padding-Collapse. Navbar rutscht nach
 *      oben, Content folgt sauber — keine Schwebezustaende.
 *
 *   B) OVERLAY/TRANSPARENT-KONTEXT (body.is-over-hero):
 *      transform: translateY(-100%) + opacity. Topbar slidet ueber die
 *      Viewport-Oberkante. Navbar bleibt an ihrer Position ueber dem
 *      Hero/Page-Header — KEIN Layout-Sprung der Navbar relativ zum
 *      absolut/sticky positionierten Hero darunter. max-height bleibt voll,
 *      damit der Header-Container nicht schrumpft.
 *
 *      Triggers fuer Overlay-Kontext:
 *      - Startseite mit transparentem Hero (page-top-context: builder_hero)
 *      - Unterseite mit Page Header style=image/parallax/video + transparentem Header
 *      Beide setzen body.is-over-hero (siehe inc/setup/page-top-context.php).
 *
 * always-visible: Topbar bleibt sichtbar — JS verzichtet auf hide-Logik,
 * CSS hebt den z-Index, falls Sticky-Header darueber laufen wuerde.
 */

/* ── A) NORMAL FLOW: max-height-Collapse ────────────────────────────────── */
body.topbar-behavior-hide-on-scroll .bp-topbar {
	overflow: hidden;
	max-height: 120px; /* obere Schranke — groesser als realistische Topbar */
	opacity: 1;
	transition: max-height .25s ease, opacity .2s ease, padding .25s ease;
	will-change: max-height, opacity;
}

body.topbar-behavior-hide-on-scroll.topbar-hidden-on-scroll .bp-topbar {
	max-height: 0;
	opacity: 0;
	pointer-events: none;
}
body.topbar-behavior-hide-on-scroll.topbar-hidden-on-scroll .bp-topbar__inner {
	padding-top: 0;
	padding-bottom: 0;
}

/* ── B) OVERLAY CONTEXT: transform-Slide statt Collapse ─────────────────── */
/*
 * Spezifitaets-Hierarchie: zwei Klassen am Body (.topbar-behavior-* +
 * .is-over-hero) ueberbieten die Default-Regel oben mit gleichem .bp-topbar
 * Selektor. Reihenfolge: hier muss spaeter im Stylesheet stehen → tut es.
 */
body.topbar-behavior-hide-on-scroll.is-over-hero .bp-topbar {
	overflow: visible;             /* kein Clip noetig — translate verschiebt */
	max-height: none;              /* Default-Schranke aufheben */
	transform: translateY(0);
	opacity: 1;
	transition: transform .25s ease, opacity .2s ease;
	will-change: transform, opacity;
}

body.topbar-behavior-hide-on-scroll.is-over-hero.topbar-hidden-on-scroll .bp-topbar {
	transform: translateY(-100%);
	opacity: 0;
	max-height: none;              /* explizit: kein Collapse im Overlay */
	pointer-events: none;
}
/* Padding bleibt im Overlay-Hide-State unveraendert — Navbar-Position konstant */
body.topbar-behavior-hide-on-scroll.is-over-hero.topbar-hidden-on-scroll .bp-topbar__inner {
	padding-top: 4px;
	padding-bottom: 4px;
}

/* ── ALWAYS-VISIBLE: Topbar oberhalb von Sticky-Headern halten ──────────── */
body.topbar-behavior-always-visible .bp-topbar {
	position: relative;
	z-index: 12;
}

/* Defensive: Wenn behavior nicht hide-on-scroll, kein transform/transition */
body:not(.topbar-behavior-hide-on-scroll) .bp-topbar {
	transform: none;
}

/* ─────────────────────────────────────────────────────────────────────────
   8 — SICHTBARKEIT (RESPONSIVE)
   ───────────────────────────────────────────────────────────────────────── */

/*
 * desktop-only: ab <992px ausblenden
 * hidden-mobile: ab <768px ausblenden (Tablet bleibt sichtbar)
 * all: immer sichtbar — wechselt auf mobile in kompakte Darstellung
 */
@media (max-width: 991px) {
	body.topbar-vis-desktop-only .bp-topbar { display: none; }
}
@media (max-width: 767px) {
	body.topbar-vis-hidden-mobile .bp-topbar { display: none; }

	/* all: kompakte Darstellung — Center-Slot wandert mit ein, Gaps schrumpfen */
	body.topbar-vis-all .bp-topbar__inner {
		grid-template-columns: 1fr 1fr;
		gap: 8px;
		font-size: 12px;
	}
	body.topbar-vis-all .bp-topbar__pos--center { display: none; }
	body.topbar-vis-all .bp-topbar__menu { gap: 10px; }
	body.topbar-vis-all .bp-topbar__slot--social { gap: 8px; }
	body.topbar-vis-all .bp-topbar__contact-label { font-size: 12px; }
}

/* ─────────────────────────────────────────────────────────────────────────
   9 — INHALTS-OFFSET (PAGE-TOP-CONTEXT INTEGRATION)
   ───────────────────────────────────────────────────────────────────────── */

/*
 * Das Problem: site-header (Topbar + Navbar) wird im Overlay-Modus
 * (body.is-over-hero, definiert in hero-nav.css) auf `position: absolute;
 * top: 0` gesetzt. Beide Children kleben am Viewport-Top. Der Hero
 * darunter beginnt bei y=0 und reserviert intern nur Platz fuer die
 * Navbar — die zusaetzlichen ~36px der Topbar dazwischen werden NICHT
 * abgezogen. Die Navbar wirkt deshalb tiefer im Hero als ohne Topbar.
 *
 * Loesung: das erste sichtbare Content-Wrapper-Element bekommt margin-top
 * in Hoehe der Topbar — aber NUR wenn drei Bedingungen zusammentreffen:
 *
 *   1. body.is-over-hero       — site-header ist absolute (sonst nicht noetig)
 *   2. body.has-topbar          — Topbar ist aktiv und hat Inhalt
 *   3. NICHT .has-topbar-transparent — Topbar ist NICHT im Overlay-Modus
 *
 * WICHTIG zur Selektor-Wahl: zwischen .site-header und dem ersten
 * sichtbaren Content-Wrapper (page-header / site-main / pagebuilder-content)
 * sitzen weitere Siblings im DOM, die KEIN Layout brauchen:
 *   - #mobile-menu (offcanvas, position:fixed, hidden)
 *   - #mobile-backdrop (overlay, position:fixed, hidden)
 * Adjacent-sibling-Selector `.site-header + X` matcht deshalb NICHT —
 * stattdessen wird der Content-Wrapper direkt per Klassenname/ID
 * angesprochen.
 *
 * Drei Template-Wrapper:
 *   - template-pagebuilder.php (Homepage)         → #pagebuilder-content
 *   - page.php (regulaere Page)                   → .site-main
 *   - Page mit Page-Header-Overlay                → .page-header (Sibling)
 *
 * Effekt im Overlay-Modus mit opaker Topbar:
 *   y=0..topbar_height       Topbar (opak)
 *   y=topbar_height..h       Navbar (transparent ueber Hero-Top)
 *   y=topbar_height          Hero/Page-Header startet hier visuell
 */

body.is-over-hero.has-topbar:not(.has-topbar-transparent) .site-main,
body.is-over-hero.has-topbar:not(.has-topbar-transparent) .page-header,
body.is-over-hero.has-topbar:not(.has-topbar-transparent) #pagebuilder-content {
	margin-top: var(--bp-topbar-height, 36px);
}

/*
 * Override: Wenn .page-header als eigener Sibling existiert und
 * #pagebuilder-content danach kommt (Template-Pagebuilder mit aktivem
 * Page-Header), dann bekommt NUR .page-header den margin — der nachfolgende
 * #pagebuilder-content soll NICHT auch noch verschoben werden.
 *
 * Reihenfolge im DOM: site-header → mobile-menu → mobile-backdrop →
 * page-header → pagebuilder-content. Die `~`-Selector matcht jeden
 * #pagebuilder-content der NACH einem .page-header in der gleichen
 * Eltern-Hierarchie kommt.
 */

body.is-over-hero.has-topbar:not(.has-topbar-transparent) .page-header ~ #pagebuilder-content {
	margin-top: 0;
}

/* ─────────────────────────────────────────────────────────────────────────
   10 — PRINT
   ───────────────────────────────────────────────────────────────────────── */

@media print {
	.bp-topbar { display: none; }
}