/* Orphit Scarcity Topbar – Styling & Layout.
 * Anzeige: das Bricks-Section-Template `status_bar` (Klasse `.orphit-topbar`)
 * wird vor dem Header eingefügt und bleibt beim Scrollen oben sticky.
 * Diese Datei stellt sicher, dass das Styling die Bricks-Inline-Styles
 * (z. B. `max-height: 0` aus dem Template) überstimmt.
 */
.orphit-topbar {
	/* Basis-Layout (Shortcode-Fallback; das Bricks-Template überschreibt
	 * Details über seine Inline-Styles mit höherer Spezifität). */
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 0.6rem;
	padding: 0.65rem 1.25rem;
	background: var(--bg, #FFF8F0);
	color: var(--text, #25211f);
	border-bottom: 1px solid var(--divider, rgba(31, 39, 43, 0.12));
	font-family: 'Supria Sans', system-ui, sans-serif;
	font-size: 1.15rem;
	line-height: 1.4;

	/* Sticky oben: bleibt beim Scrollen am oberen Rand hängen. */
	position: sticky !important;
	top: 0;
	z-index: 9999;

	/* Platz ist IMMER reserviert (max-height voll). Der Banner wird beim
	 * Annähern an den Seitenanfang von oben hereingeschoben: `translateY`
	 * nutzt Element-Prozente (100% = eigene Höhe), also verschiebt er sich
	 * um (Bannerhöhe − Offset) nach oben. Bei Offset 0 (gescrollt) liegt er
	 * komplett über dem Viewport, mit wachsendem Offset wird er von unten
	 * sichtbar – dadurch wächst der var-bg-Streifen graduell bis zur vollen
	 * Bannerhöhe ganz oben. Kein transition auf transform (scroll-gekoppelt). */
	max-height: 200px !important;
	overflow: hidden;
	transform: translateY(calc(var(--orphit-topbar-h, 0px) - 100%));
}

/* Banner-Inhalt nur ganz oben einblenden (scrollY <= 0 → .is-visible via
 * topbar.js). Beim Hereingleiten bleibt der Streifen reine Fläche (var-bg),
 * der Text/CTA erscheint erst an der Oberkante. visibility hält halb
 * sichtbare Elemente klickbar-frei. */
.orphit-topbar > * {
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.4s ease, visibility 0s linear 0.4s;
}

.orphit-topbar.is-visible > * {
	opacity: 1 !important;
	visibility: visible;
	transition: opacity 0.4s ease, visibility 0s linear 0s;
}

/* Header klebt unter dem Banner statt ihn zu verdecken.
 * Der Offset (--orphit-topbar-h) wird von topbar.js an der Bannerhöhe
 * gemessen. Greift nur, wenn ein .orphit-topbar-Element als Geschwister
 * vor dem Header existiert (nur auf der konfigurierten Seite).
 */
.orphit-topbar ~ #brx-header,
.orphit-topbar ~ #brx-header #header-nav {
	top: var(--orphit-topbar-h, 0px) !important;
}

/* Bricks' Sticky-Header togglet `.slide-up` ohne Hysterese exakt an
 * `data-slide-up-after` (300px) – das erzeugt bei kleinen Scroll-Jittern am
 * Haltepunkt Springen. Den Bricks-Transform neutralisieren und stattdessen
 * das Ausblenden über die eigene Klasse `.orphit-topbar-header-hidden`
 * steuern (topbar.js, mit Toter Zone). Sanfte Ein-/Ausblende-Bewegung über
 * eine Transition auf `transform`. */
#brx-header.brx-sticky.slide-up {
	transform: none !important;
}

#brx-header.brx-sticky {
	transition: transform 0.4s ease;
	will-change: transform;
}

#brx-header.brx-sticky.orphit-topbar-header-hidden {
	transform: translateY(calc(-100% - var(--orphit-topbar-h, 0px))) !important;
}

/* Kein Schließen möglich (FOMO-Banner) – X-Button ausblenden.
 * Bricks-Template-Element `brxe-tb0clx` bzw. Fallback-Klasse.
 */
.orphit-topbar-close,
#brxe-tb0clx {
	display: none !important;
}

/* Platz für den ausgeblendeten X-Button rechts wieder symmetrisch machen. */
#brxe-tb0s01.orphit-topbar {
	padding-right: 16px !important;
}

/* Bricks-Template `status_bar`: Hintergrund auf Seitenfarbe (var(--bg), aus
 * der Palette bricks-styles-color-palette-orphit26.json) statt var(--surface).
 * Spezifität (1,1,0) schlägt die Template-Inline-Style (1,0,0). */
#brxe-tb0s01.orphit-topbar {
	background-color: var(--bg, #FFF8F0) !important;
}

/* Seitenhintergrund (body) auf die Seitenfarbe var(--bg) setzen, solange der
 * Topbar aktiv ist – sonst scheint der weiße Body durch den vor dem Fade-in
 * transparenten Banner-Streifen (weißer Streifen beim Seitenladen). */
body:has(.orphit-topbar) {
	background-color: var(--bg, #FFF8F0);
}

/* Header-Leiste (#header-nav) ebenfalls auf var(--bg) angleichen (statt der
 * Inline-#ffffff); beim Scrollen bleibt die transluzente .scrolling-Optik
 * von Bricks erhalten. */
.orphit-topbar ~ #brx-header #header-nav {
	background-color: var(--bg, #FFF8F0);
}
.orphit-topbar ~ #brx-header.brx-sticky.scrolling #header-nav {
	background-color: rgba(247, 248, 249, 0.72);
}

.orphit-topbar-icon {
	display: inline-flex;
	color: var(--accent, #f59962);
	flex-shrink: 0;
}

.orphit-topbar-icon svg {
	display: block;
}

.orphit-topbar-label {
	color: var(--textmuted, #5e676b);
}

.orphit-topbar-days {
	font-weight: 700;
	color: var(--accent, #f59962);
}

.orphit-topbar-suffix {
	color: var(--textmuted, #5e676b);
}

/* Bricks-Template `status_bar`: Schriftgröße anheben + Farben festlegen
 * (überschreibt die Template-Inline-Styles, die zu klein bzw. ohne Farbe sind).
 */
#brxe-tb0lbl,
#brxe-tb0day,
#brxe-tb0sfx,
#brxe-tb0cta {
	font-size: 1.15rem !important;
}

#brxe-tb0lbl,
#brxe-tb0sfx {
	color: var(--textmuted, #5e676b) !important;
}

#brxe-tb0day {
	color: var(--accent, #f59962) !important;
	font-weight: 700;
}

.orphit-topbar-cta {
	color: var(--link, #3b6c73);
	font-weight: 600;
	text-decoration: none;
	border-bottom: 1px solid currentColor;
}

.orphit-topbar-cta:hover {
	color: var(--accent, #f59962);
}

@media (max-width: 767px) {
	.orphit-topbar {
		padding-left: 0.75rem;
		padding-right: 2.4rem;
		font-size: 1rem;
		justify-content: flex-start;
	}
}

@media (prefers-reduced-motion: reduce) {
	.orphit-topbar,
	.orphit-topbar > *,
	.orphit-topbar.is-visible > * {
		transition: none !important;
	}
}