/*
 * Social-Links (Partial Social.html): zwei runde Schaltflächen mit Inline-SVG.
 * Eigene kleine Datei, damit der gebaute Gulp-Ausgang (dist/css/styles*.css) unberührt bleibt.
 * Farben: Akzent #96c32d = $primary (src/scss/_variables.scss:12, Footer-Link beim Überfahren: dist/css/styles.css:18191),
 * Kontrast #333 = $dark (src/scss/_variables.scss:14, Footer-Hintergrund: dist/css/styles.css:18177),
 * Footer-Linkfarbe Weiß = $page-footer-link-color (src/scss/layouts/_footer.scss:2).
 */
.social-links {
	--social-fg: #333;
	--social-ring: #333;
	--social-accent: #96c32d;
	--social-on-accent: #333;
}

.page-footer .social-links {
	--social-fg: #fff;
	--social-ring: #fff;
}

.social-links__title {
	margin: 0 0 10px;
	font-size: 18px;
	text-transform: uppercase;
}

.page-footer .social-links__title {
	color: #fff;
}

.social-links__list {
	display: flex;
	flex-wrap: nowrap;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.social-links__item {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 44px;
	height: 44px;
	border: 1.5px solid var(--social-fg);
	border-radius: 50%;
	background-color: transparent;
	color: var(--social-fg);
	text-decoration: none;
	transition: background-color .15s, border-color .15s, color .15s;
}

.social-links__item svg {
	display: block;
	width: 20px;
	height: 20px;
}

/* Spezifität über .page-footer a:hover (dist/css/styles.css:18191), damit der Kreis sich füllt und das Symbol dunkel wird */
.social-links .social-links__item:hover,
.social-links .social-links__item:focus-visible {
	border-color: var(--social-accent);
	background-color: var(--social-accent);
	color: var(--social-on-accent);
}

.social-links .social-links__item:focus-visible {
	outline: 2px solid var(--social-ring);
	outline-offset: 3px;
}

/* Am Ende des Inhaltsbereichs: Zeile Text, daneben die Schaltflächen */
.social-links--inhalt {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px 24px;
	padding-block: 40px;
}

.social-links__text {
	margin: 0;
}

@media (prefers-reduced-motion: reduce) {
	.social-links__item {
		transition: none;
	}
}