/**
 * VDX Header (assets/css/vdx/V02) – Layout für template-parts/header-vdx.php
 * Farben/Maße bei Bedarf in :root anpassen.
 */

:root {
	/*
	 * Nur was NICHT flaechenabhaengig ist. Flaeche und Textfarben liefern die
	 * Ortsklassen '.vdx-layout-header' / '.vdx-layout-header-alt' am Markup:
	 * sie binden --vdx-canvas / --vdx-on-canvas / --vdx-on-canvas-muted an die
	 * jeweilige Header-Flaeche (ADR-20). Eigene Farbvariablen gibt es hier nicht
	 * mehr - sie muessten ohnehin im Header-Scope stehen, weil var() in ':root'
	 * gegen die ':root'-Werte aufloest.
	 */
	--vdx-header-accent: var(--vdx-primary, #2f6b6b);
	--vdx-header-badge: var(--vdx-status-error, #e53935);
	--vdx-header-row-top: 80px;
	--vdx-header-row-bottom: 48px;
	--vdx-header-search-width: 480px;
}

/*
 * Links normal/hover: BuddyBoss-Werte (per ThemeOptions-Sync gesetzt,
 * style-map-buddyboss.json) haben Vorrang; ohne sie der Textpartner der Flaeche.
 * Bewusst HIER und nicht in ':root', damit die Fallbacks im Header-Kontext
 * aufloesen.
 */
.vdx-header {
	--vdx-header-link: var(--bb-header-links, var(--vdx-on-canvas-muted, #A7A9A9));
	--vdx-header-link-hover: var(--bb-header-links-hover, var(--vdx-on-canvas, #FFFFFF));
}

/*
 * BuddyBoss nutzt --bb-header-height für Logo-, Link- und Containerhöhen.
 * Pro Zeile auf die Zeilenhöhe setzen (Theme-Option bleibt 128 für den Seiten-Offset).
 */
.vdx-header__row--top {
	--bb-header-height: var(--vdx-header-row-top);
}

.vdx-header__row--bottom {
	--bb-header-height: var(--vdx-header-row-bottom);
}

/* ---------- Grundgerüst ---------- */
.site-header--bb:has(.vdx-header) {
	padding: 0;
	box-shadow: none;
	background: var(--vdx-layout-header-bg, #181C1C);
}

/*
 * Die Flaechen setzen die Ortsklassen selbst ('.vdx-layout-header' am Wrapper,
 * '.vdx-layout-header-alt' an Zeile 2) - hier steht nur noch die Geometrie.
 */

.site-header .vdx-header__inner.site-header-container {
	gap: 32px;
	height: var(--vdx-header-row-top);
}

.site-header .vdx-header__row--bottom .vdx-header__inner.site-header-container {
	height: var(--vdx-header-row-bottom);
}

.vdx-header,
.vdx-header a,
.vdx-header .site-title > a {
	color: var(--vdx-on-canvas, #FFFFFF);
}

/* ---------- Zeile 1: Grid, Suche echt mittig ---------- */
.site-header .vdx-header__row--top .vdx-header__inner.site-header-container {
	display: grid;
	/* Seitenspalten nie schmaler als ihr Inhalt: bei wenig Platz schrumpft die Suche statt zu überlappen. */
	grid-template-columns:
		minmax(max-content, 1fr)
		minmax(200px, var(--vdx-header-search-width))
		minmax(max-content, 1fr);
	align-items: center;
}

.vdx-header__start {
	display: flex;
	align-items: center;
	gap: 32px;
	min-width: 0;
}

.site-header .vdx-header__row--top .vdx-header__actions {
	justify-self: end;
}

/*
 * ---------- Logo: linksbündig ----------
 * Bild, Breite (logo_size), Dark-Logo und Sichtbarkeit steuert weiterhin BuddyBoss.
 * Hier nur BB-Abstände (padding-left: 30px) entfernen und das Bild links ausrichten.
 */
.vdx-header__row--top .vdx-header__start {
	justify-self: start;
}

.site-header .vdx-header .site-branding {
	flex: 0 0 auto;
	justify-content: flex-start;
	min-width: 0;
	height: auto;
	margin: 0;
	padding: 0;
}

.vdx-header .site-branding .site-title,
.vdx-header .site-branding .site-title > a {
	display: flex;
	align-items: center;
	margin: 0;
	text-align: left;
}

/* SVG wird sonst innerhalb der Bildbox mittig gezeichnet. */
.vdx-header .site-branding img.bb-logo {
	object-fit: contain;
	object-position: left center;
}

/* ---------- Länderauswahl (Figma: 34px hoch, nur seitliche Linien, 12px Versalien) ---------- */
.vdx-header__country-menu {
	margin: 0;
	padding: 0;
	list-style: none;
}

.vdx-header__country-menu > li {
	position: relative;
}

.site-header .vdx-header .vdx-header__country-menu > li > a {
	display: inline-flex;
	align-items: center;
	gap: 11px;
	height: 34px;
	padding: 0 16px 0 18px;
	border: 0;
	border-inline: 1px solid color-mix(in srgb, var(--vdx-header-accent) 50%, transparent);
	border-radius: 6px;
	background: color-mix(in srgb, var(--vdx-header-accent) 5%, transparent);
	color: var(--vdx-on-canvas, #FFFFFF);
	font-family: var(--vdx-role-label-md-font, "Open Sans"), sans-serif;
	font-size: 12px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	white-space: nowrap;
}

/* Dreieck (10 × 5px) in Akzentfarbe. */
.vdx-header__country-menu > li.menu-item-has-children > a::after {
	content: "";
	border-top: 5px solid var(--vdx-header-accent);
	border-inline: 5px solid transparent;
}

/* ---------- Suche ---------- */
/*
 * Hoehe 36px. Schrift: Typo-Role body.md (14px).
 * Hinweis: iOS zoomt bei Eingabefeldern unter 16px beim Fokussieren hinein.
 * Auf Mobil ist dieses Feld ausgeblendet (BuddyBoss-Mobile-Header), daher unkritisch.
 */
.vdx-header__search {
	--vdx-header-search-height: 36px;

	position: relative;
	width: 100%;
	height: var(--vdx-header-search-height);
}

.vdx-header__search .search-form,
.vdx-header__search .search-form label {
	display: block;
	height: var(--vdx-header-search-height);
	margin: 0;
	padding: 0;
}

.vdx-header__search .search-field-top,
.vdx-header__search .vdx-header__search-field {
	width: 100%;
	height: var(--vdx-header-search-height);
	padding: 0 40px 0 14px;
	border: 0;
	border-radius: 4px;
	background: var(--vdx-on-canvas, #FFFFFF);
	color: var(--vdx-canvas, #181C1C);
	font-family: var(--vdx-role-body-md-font, inherit);
	font-size: var(--vdx-role-body-md-size, 14px);
	font-weight: var(--vdx-role-body-md-weight, 400);
	line-height: var(--vdx-header-search-height);
}

.vdx-header__search > .bb-icon-search {
	position: absolute;
	top: 50%;
	right: 12px;
	transform: translateY(-50%);
	color: var(--vdx-canvas, #181C1C);
	font-size: 20px;
	pointer-events: none;
}

/* ---------- Aktionen (Icon + Label) ---------- */
.site-header .vdx-header__actions {
	flex: 0 0 auto;
	height: auto;
	margin-left: 0;
}

.site-header .vdx-header__actions .header-aside-inner {
	display: flex;
	align-items: center;
	gap: 20px;
	height: auto;
}

/* BuddyBoss-Abstände der einzelnen Elemente neutralisieren. */
.site-header .vdx-header__actions .header-aside-inner > *,
.site-header .vdx-header-action > .notification-wrap,
.site-header .vdx-header-action > .user-wrap-container {
	margin: 0;
	padding: 0;
}

.vdx-header__action-menu {
	display: contents;
}

.vdx-header__action-menu > li {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	list-style: none;
}

/*
 * Link und Label teilen sich eine Grid-Zelle: beide bestimmen die Breite
 * (kein Überlappen), das Label liegt im Klickbereich und reicht Klicks durch.
 */
.vdx-header-action {
	position: relative;
	display: grid;
	justify-items: center;
}

.vdx-header-action > * {
	grid-area: 1 / 1;
}

.vdx-header-action > .vdx-header-action__label {
	align-self: end;
	white-space: nowrap;
	pointer-events: none;
}

.site-header .vdx-header-action .notification-link,
.site-header .vdx-header-action .user-wrap > .user-link,
.site-header .vdx-header-action .vdx-header-action__link {
	display: flex;
	align-items: center;
	justify-content: center;
	height: auto;
	width: 100%;
	min-width: 40px;
	padding: 0 0 24px; /* Platz für das Label (line-height) */
	line-height: 1;
}

.vdx-header__action-menu > li > a {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
}

/*
 * Icons: BuddyBoss-Original (Icon-Font bb-icon-l, 24px, Farbe --bb-header-links)
 * kommt aus theme.css. Nur die eigenen Einträge (Menüs, Login-Link) übernehmen
 * dieselben Werte, damit alle Icons identisch aussehen.
 */
.site-header .vdx-header__action-menu i,
.site-header .vdx-header-action__link i {
	color: var(--vdx-header-link);
	font-size: 24px;
}

.vdx-header-action i,
.vdx-header-action__label {
	transition: color 0.15s ease;
}

/*
 * Icon-Labels: eigener Block (auch ausserhalb des Headers nutzbar).
 * Figma-Sonderloesung: Open Sans SemiCondensed, Regular, 12/24, 0px.
 * Schrift wird lokal ueber VDX Assets geladen; fehlt sie, greift die Typo-Role label.md.
 */
.vdx-action-label {
	font-family: "Open Sans SemiCondensed", var(--vdx-role-label-md-font, "Open Sans"), sans-serif;
	font-size: var(--vdx-role-label-md-size, 12px);
	font-weight: 400;
	line-height: 24px;
	letter-spacing: 0;
}

/* Einpassung im Header (Position und Farbe). */
.vdx-header .vdx-header-action__label {
	color: var(--vdx-header-link);
}

/* Tooltips sind durch Labels überflüssig. */
.vdx-header__actions [data-balloon]::before,
.vdx-header__actions [data-balloon]::after {
	display: none;
}

.site-header .vdx-header__actions .notification-link .count {
	top: -8px;
	right: -10px;
	background: var(--vdx-header-badge);
	color: var(--vdx-on-status-error, #ffffff);
}

/* Profil: kleines Avatar statt Icon, Name ausgeblendet (Label übernimmt). */
.vdx-header-action--account .user-link > .user-name,
.vdx-header-action--account .user-link > .bb-icon-angle-down {
	display: none;
}

.vdx-header-action--account .user-link > img.avatar {
	width: 28px;
	height: 28px;
	border-radius: 50%;
}

/* ---------- Zeile 2: Toggle, Navigation, Buttons ---------- */
.vdx-header__row--bottom .bb-toggle-panel {
	flex: 0 0 auto;
	font-size: 28px;
}

.vdx-header__row--bottom #site-navigation {
	flex: 1 1 auto;
	min-width: 0;
}

.vdx-header__row--bottom #primary-menu > li > a {
	color: var(--vdx-header-link);
	font-size: 18px;
	transition: color 0.15s ease;
}

/*
 * Hover/aktiv: BuddyBoss-Farbe "Header Links Hover" (--bb-header-links-hover).
 * Nötig, weil die Regel oben (ID-Selektor) die BB-Hover-Regel sonst überstimmt.
 */
.vdx-header__row--bottom #primary-menu > li:hover > a,
.vdx-header__row--bottom #primary-menu > li > a:focus-visible,
.vdx-header__row--bottom #primary-menu > li.current-menu-item > a,
.vdx-header__row--bottom #primary-menu > li.current-menu-ancestor > a {
	color: var(--vdx-header-link-hover);
}

/* Aktionen (BB-Originale + eigene Menüs): Icon und Label gemeinsam einfärben. */
.site-header .vdx-header-action:hover i,
.site-header .vdx-header-action:hover .vdx-header-action__label,
.site-header .vdx-header__action-menu > li:hover i,
.site-header .vdx-header__action-menu > li:hover .vdx-header-action__label,
.site-header .vdx-header__action-menu > li > a:focus-visible i {
	color: var(--vdx-header-link-hover);
}

.vdx-header__cta-menu {
	display: flex;
	gap: 10px;
	margin: 0;
	list-style: none;
}

/*
 * Buttons: VDX-Komponente (.vdx-btn .vdx-btn-sm, Klassen per Filter).
 * Im Header etwas flacher als sm-Standard (Figma: ca. 30px hoch).
 */
.vdx-header__cta {
	--vdx-btn-sm-padding: 6px 14px;
}

.vdx-header__cta-menu > li > a.vdx-btn {
	white-space: nowrap;
}

/* Outlined auf dunklem Grund: uebernimmt der Modifier "vdx-btn-inverse" (Plugin). */

/* ===========================================================================
 * Mobil (< 800px): kompletter Originalzustand von BuddyBoss.
 *
 * BuddyBoss blendet unterhalb von 800px '.site-header-container' aus und zeigt
 * stattdessen den eigenen Mobile-Header (template-parts/header-mobile.php, geladen
 * in inc/theme/template-functions.php). Unsere Regeln oben sind spezifischer und
 * wuerden das aushebeln - deshalb hier unser Header ausdruecklich ausblenden.
 * =========================================================================== */
@media (max-width: 799.98px) {

	.site-header .vdx-header {
		display: none;
	}
}