/**
 * VDX Footer – Styling für template-parts/footer-vdx.php
 *
 * Farben und Typo kommen aus den VDX-ThemeOptions-Tokens
 * (vdx-themeoptions-vars.css); die Hex-/Pixelwerte sind reine Fallbacks.
 *
 * @package BuddyBoss_Theme_Child
 */

.vdx-footer {
	/*
	 * Farben: keine lokalen Variablen mehr. '.vdx-layout-footer' am <footer>
	 * bindet die stufenlosen Rollen an die Footer-Flaeche (ADR-20):
	 * --vdx-on-canvas (Text), --vdx-on-canvas-muted (gedaempft),
	 * --vdx-canvas-border (Trennlinie). Rolle ohne Stufe = die Flaeche, auf der
	 * du liegst. Akzent bleibt --vdx-primary (flaechenunabhaengig, gesynct).
	 */

	/* Abstand zwischen zwei Menuezeilen (zusaetzlich zur Zeilenhoehe). */
	--vdx-footer-menu-gap: 6px;

	/*
	 * Seitlicher Innenabstand des Containers. Das Theme gibt '.container' 10px
	 * (theme.css) - dafuer gibt es weder in den BuddyBoss-Theme-Options noch in
	 * Elementor eine Einstellung, der Wert gehoert also hierher. Auf dem Desktop
	 * buendig mit dem Seitenraster (0), ab Tablet abwaerts 30px Luft zum
	 * Displayrand (siehe Responsive-Block, Breakpoint 'lg' = 1024px).
	 */
	--vdx-footer-inline-padding: 0px;

	color: var(--vdx-on-canvas-muted, #A7A9A9);
	padding: 30px 0 60px;
	/* Fliesstext: Typo-Role body.md (14/20). */
	font-family: var(--vdx-role-body-md-font, inherit);
	font-size: var(--vdx-role-body-md-size, 14px);
	line-height: var(--vdx-role-body-md-line-height, 20px);
}

.vdx-footer > .container {
	padding-left: var(--vdx-footer-inline-padding);
	padding-right: var(--vdx-footer-inline-padding);
}

/* ---- Grid ------------------------------------------------------------- */
.vdx-footer__main {
	display: grid;
	/* Brand-Spalte breit genug fuer die Social-Icons in einer Zeile. */
	grid-template-columns: 1.8fr 0.9fr 0.9fr 1.5fr;
	gap: 40px;
}

/*
 * Newsletter-Widgetbereich leer: die Linklisten sollen ihre schmale Breite
 * behalten und nach rechts ruecken, statt den frei werdenden Platz zu fuellen.
 * Spalte 2 bleibt deshalb als Weissraum leer, die Listen starten in Spalte 3.
 */
.vdx-footer__main--no-newsletter {
	grid-template-columns: 1.7fr 0.6fr 1fr 1fr;
}

.vdx-footer__main--no-newsletter > .vdx-footer__brand + .vdx-footer__col {
	grid-column: 3;
}

/*
 * Spaltenueberschriften: Typo-Role title.md (16/24). Im Entwurf gleich gross wie
 * die Links darunter, abgesetzt nur ueber Gewicht und Farbe. title.md liefert
 * weight 500; mehr Kontrast zu den Links gehoert in die Role-Definition
 * (ThemeOptions), nicht als Override hierher.
 *
 * Der .vdx-footer-Prefix ist noetig, nicht kosmetisch: das Elementor-Kit setzt
 * '.elementor-kit-<id> h3' (0,1,1) und wuerde eine reine Klassenregel (0,1,0)
 * ueberstimmen. Mit Prefix (0,2,x) gewinnt der Footer ohne !important.
 */
.vdx-footer .vdx-footer__title,
.vdx-footer .widget-title,
.vdx-footer .vdx-footer__col h2,
.vdx-footer .vdx-footer__col h3,
.vdx-footer .vdx-footer__col h4,
.vdx-footer .vdx-footer__col .wp-block-heading {
	margin: 0 0 18px;
	color: var(--vdx-on-canvas, #FFFFFF);
	font-family: var(--vdx-role-title-md-font, inherit);
	font-size: var(--vdx-role-title-md-size, 16px);
	font-weight: var(--vdx-role-title-md-weight, 500);
	line-height: var(--vdx-role-title-md-line-height, 24px);
	text-transform: var(--vdx-role-title-md-transform, none);
}

/* ---- Brand-Spalte ---------------------------------------------------- */
.vdx-footer__logo {
	/* footer_logo_size (Theme-Options) setzt diese Variable per inline style. */
	--vdx-footer-logo-width: auto;

	margin-bottom: 18px;
}

.vdx-footer__logo a {
	display: inline-flex;
	align-items: center;
	color: var(--vdx-on-canvas, #FFFFFF);
	font-size: 22px;
	font-weight: 700;
	line-height: 1;
}

/*
 * Gleiche Absicherung wie BuddyBoss sie im Header ueber ".site-title img" trifft:
 * ein SVG ohne Groessenangaben wuerde sonst als 1x1px gerendert.
 */
.vdx-footer__logo img.bb-logo {
	width: var(--vdx-footer-logo-width);
	max-width: 100%;
	max-height: 56px;
	min-height: 32px;
	height: auto;
	object-fit: contain;
	object-position: left center;
}

.vdx-footer .vdx-footer__desc p,
.vdx-footer .vdx-footer__tagline {
	margin: 0 0 16px;
	font-size: var(--vdx-role-body-md-size, 14px);
	line-height: var(--vdx-role-body-md-line-height, 20px);
}

/* Die Beschreibung steht jetzt unten und leitet zu den Social-Icons ueber. */
.vdx-footer__desc {
	margin-top: 20px;
}

.vdx-footer .vdx-footer__desc p:last-child {
	margin-bottom: 15px;
}

/* ---- Social-Icons ---------------------------------------------------- */
/*
 * Social-Icons: eine Zeile. flex-wrap bleibt aus, damit die Reihe nicht umbricht;
 * wird der Platz doch zu knapp, scrollt sie statt zu springen.
 */
.vdx-footer__socials {
	display: flex;
	flex-wrap: nowrap;
	gap: 8px;
	margin: 8px 0 0;
	padding: 0;
	list-style: none;
	overflow-x: auto;
	scrollbar-width: none;
}

.vdx-footer__socials::-webkit-scrollbar {
	display: none;
}

.vdx-footer__socials > li {
	flex: 0 0 auto;
}

.vdx-footer__socials a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--vdx-canvas-border, #383C3C);
	color: var(--vdx-on-canvas, #FFFFFF);
	transition: background-color .15s ease, transform .15s ease;
}

.vdx-footer__socials a:hover {
	background: var(--vdx-primary, #0D5F65);
	transform: translateY(-2px);
}

.vdx-footer__socials i {
	margin: 0;
	/* Icon-Token des Frameworks statt fester Groesse. */
	font-size: var(--vdx-icon-nav-sm-size, 18px);
}

/* ---- Link-Listen (Nav-Menü-Widgets) --------------------------------- */
.vdx-footer__menu,
.vdx-footer__col ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.vdx-footer__menu li,
.vdx-footer__col li {
	margin: 0 0 var(--vdx-footer-menu-gap);
}

.vdx-footer__menu li:last-child,
.vdx-footer__col li:last-child {
	margin-bottom: 0;
}

/*
 * Menuelinks: Typo-Role body.md (14/20/400). Nicht cta.* - das hat weight 500
 * und wuerde die Hierarchie zur Spaltenueberschrift (title.md, ebenfalls 500)
 * einebnen. cta bleibt den Buttons vorbehalten.
 */
.vdx-footer a {
	color: var(--vdx-on-canvas-muted, #A7A9A9);
	text-decoration: none;
	transition: color .15s ease;
}

.vdx-footer .vdx-footer__menu a {
	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);
	/*
	 * Zeilenhoehe bewusst enger als die Role-Vorgabe (24px): Menueeintraege sind
	 * einzeilig, die volle Fliesstext-Zeilenhoehe wuerde die Liste auseinanderziehen.
	 */
	line-height: 1.35;
	display: inline-block;
}

.vdx-footer a:hover,
.vdx-footer a:focus {
	color: var(--vdx-on-canvas, #FFFFFF);
}

/* ---- Newsletter-Widget (Shortcode) ----------------------------------- */
.vdx-footer__col--newsletter input[type="email"],
.vdx-footer__col--newsletter input[type="text"] {
	width: 100%;
	padding: 12px 14px;
	border: 0;
	border-radius: 6px;
	background: var(--vdx-on-canvas, #FFFFFF);
	color: var(--vdx-canvas, #181C1C);
	font-size: 15px;
}

.vdx-footer__col--newsletter button,
.vdx-footer__col--newsletter input[type="submit"] {
	background: var(--vdx-primary, #0D5F65);
	color: var(--vdx-on-primary, #FFFFFF);
	border: 0;
	border-radius: 6px;
	padding: 12px 16px;
	cursor: pointer;
}

/* ---- Fusszeile ------------------------------------------------------- */
/*
 * Prefix noetig: das Elementor-Kit setzt '.elementor-kit-<id> hr' (0,1,1) meist
 * mit height + background-color und wuerde eine reine Klassenregel (0,1,0)
 * ueberstimmen - die Linie erschiene dann weiss und dick. Beide Eigenschaften
 * werden hier ausdruecklich zurueckgesetzt, die Linie kommt allein aus border-top.
 */
.vdx-footer .vdx-footer__divider {
	height: 0;
	border: 0;
	border-top: 1px solid var(--vdx-canvas-border, #383C3C);
	background: none;
	margin: 40px 0 24px;
	opacity: 1;
}

.vdx-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 24px;
	justify-content: space-between;
	align-items: center;
	/* Fusszeile: Typo-Role body.sm (12/16) - Copyright und Rechtliches-Menue. */
	font-family: var(--vdx-role-body-sm-font, inherit);
	font-size: var(--vdx-role-body-sm-size, 12px);
	font-weight: var(--vdx-role-body-sm-weight, 400);
	line-height: var(--vdx-role-body-sm-line-height, 16px);
}

/*
 * Die Groesse muss hier explizit stehen: '.bb-footer li a' (BuddyBoss, 0,1,2)
 * setzt 13px direkt am Link und schlaegt damit die vom .vdx-footer__bottom
 * vererbte Groesse. Mit Prefix erreicht die Regel (0,2,1) und gewinnt.
 */
.vdx-footer .vdx-footer__legal a,
.vdx-footer .vdx-footer__copyright a {
	font-family: var(--vdx-role-body-sm-font, inherit);
	font-size: var(--vdx-role-body-sm-size, 12px);
	font-weight: var(--vdx-role-body-sm-weight, 400);
	line-height: var(--vdx-role-body-sm-line-height, 16px);
}

.vdx-footer__legal {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Trenner "|" zwischen den Legal-Links, wie im Zielentwurf. */
.vdx-footer__legal li:not(:last-child)::after {
	content: "|";
	margin-left: 8px;
	color: var(--vdx-canvas-border, #383C3C);
}

/* ---- Responsive ------------------------------------------------------ */
/*
 * Grenzen = VDX-Breakpoints 'xl' (1280), 'lg' (1024) und 'sm' (640) aus
 * json/defaults/breakpoints-default.json. Die Werte stehen hier als Zahl, weil
 * CSS-Variablen in Media-Query-Bedingungen nicht ausgewertet werden (vgl.
 * docs/BREAKPOINTS.md). Aendern sich die Stufen, muessen diese Zahlen mit.
 */
@media (max-width: 1280px) { /* xl */
	/* Ab 'xl' abwaerts: Luft zum Displayrand (gilt via Kaskade auch darunter). */
	.vdx-footer {
		--vdx-footer-inline-padding: 30px;
	}
}

@media (max-width: 1024px) { /* lg */
	.vdx-footer__main {
		grid-template-columns: 1fr 1fr;
		gap: 32px;
	}
	.vdx-footer__brand {
		grid-column: 1 / -1;
	}

	/* Spacer-Spalte gibt es hier nicht mehr: Positionierung zuruecksetzen. */
	.vdx-footer__main--no-newsletter {
		grid-template-columns: 1fr 1fr;
	}

	.vdx-footer__main--no-newsletter > .vdx-footer__brand + .vdx-footer__col {
		grid-column: auto;
	}
}

@media (max-width: 640px) { /* sm */
	.vdx-footer {
		padding: 40px 0 28px;
	}
	.vdx-footer__main {
		grid-template-columns: 1fr;
	}
	.vdx-footer__bottom {
		flex-direction: column;
		align-items: flex-start;
	}
}