/*
 * Simple Social & Entrepreneurial Links (SSEL).
 *
 * 1. Everywhere: the same gentle hover as the theme's buttons (lift 2px and a
 *    soft gold glow), without movement for visitors who prefer reduced motion.
 * 2. In the footer: icon buttons look exactly like the footer's core Social
 *    Icons (circle, size, shadow, spacing) and stay in one centred row.
 *    Sizes mirror .ylb-footer__social in header-footer.css.
 */

:root {
	--ylb-ssel-size: clamp(28px, 3.32vw, 47px);
	--ylb-ssel-icon: clamp(14px, 1.7vw, 24px);
	--ylb-ssel-gap: clamp(8px, 1.2vw, 17px);
	--ylb-ssel-footer-gap: clamp(14px, 2.4vw, 34px);
	--ylb-ssel-glow: rgba(236, 162, 37, 0.38);
}

/* ---------- Hover (all SSEL buttons) ---------- */
a.ssel-btn {
	transition: transform 0.25s ease, box-shadow 0.25s ease, filter 0.25s ease;
}

a.ssel-btn:hover,
a.ssel-btn:focus-visible {
	transform: translateY(-2px);
	box-shadow: 0 0 0 3px var(--ylb-ssel-glow);
	filter: brightness(1.07);
}

a.ssel-btn:active {
	transform: translateY(0);
}

a.ssel-btn:focus-visible {
	outline: 2px solid var(--ssel-color, currentColor);
	outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
	a.ssel-btn,
	a.ssel-btn:hover,
	a.ssel-btn:focus-visible,
	a.ssel-btn:active {
		transition: none;
		transform: none;
	}
}

/* ---------- Footer: icon buttons match the core Social Icons ---------- */
.ylb-footer a.ssel-btn--small {
	width: var(--ylb-ssel-size);
	height: var(--ylb-ssel-size);
	border-radius: 50%;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.35);
	color: #fff;
}

.ylb-footer a.ssel-btn--small:hover,
.ylb-footer a.ssel-btn--small:focus-visible {
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.35), 0 0 0 3px var(--ylb-ssel-glow);
}

.ylb-footer .ssel-btn--small .ssel-btn__icon {
	width: 100%;
	height: 100%;
}

.ylb-footer .ssel-btn--small .ssel-btn__icon svg {
	width: var(--ylb-ssel-icon);
	height: var(--ylb-ssel-icon);
}

@media (prefers-reduced-motion: reduce) {
	.ylb-footer a.ssel-btn--small:hover,
	.ylb-footer a.ssel-btn--small:focus-visible {
		box-shadow: 0 2px 5px rgba(0, 0, 0, 0.35), 0 0 0 3px var(--ylb-ssel-glow);
	}
}

/* Wrappers that sit directly in the footer row: hug the buttons. */
.ylb-footer > .ssel-block-wrap,
.ylb-footer > .ssel-align-wrap,
.ylb-footer > .ssel-shortcode-row,
.ylb-footer > .ssel-user-links,
.ylb-footer > .ssel-row {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: auto;
	margin-block: 0;
	line-height: 0;
	gap: var(--ylb-ssel-gap) !important;
}

/* The footer's column gap is wider than the icon gap: pull neighbours in. */
.ylb-footer > .ylb-footer__social + :is(.ssel-block-wrap, .ssel-align-wrap, .ssel-shortcode-row, .ssel-user-links, .ssel-row),
.ylb-footer > :is(.ssel-block-wrap, .ssel-align-wrap, .ssel-shortcode-row, .ssel-user-links, .ssel-row) + :is(.ssel-block-wrap, .ssel-align-wrap, .ssel-shortcode-row, .ssel-user-links, .ssel-row, .ylb-footer__social) {
	margin-inline-start: calc(var(--ylb-ssel-gap) - var(--ylb-ssel-footer-gap)) !important;
}

/* ---------- Footer on mobile: keep icons in one centred row ---------- */
@media (max-width: 781px) {
	.ylb-footer:has(> :is(.ssel-block-wrap, .ssel-align-wrap, .ssel-shortcode-row, .ssel-user-links, .ssel-row)) {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		justify-content: center;
	}

	.ylb-footer:has(> :is(.ssel-block-wrap, .ssel-align-wrap, .ssel-shortcode-row, .ssel-user-links, .ssel-row)) > :not(.ylb-footer__social, .ssel-block-wrap, .ssel-align-wrap, .ssel-shortcode-row, .ssel-user-links, .ssel-row) {
		flex: 0 0 100%;
	}

	.ylb-footer:has(> :is(.ssel-block-wrap, .ssel-align-wrap, .ssel-shortcode-row, .ssel-user-links, .ssel-row)) > .ylb-footer__social {
		flex: 0 0 auto;
	}

	.ylb-footer:has(> :is(.ssel-block-wrap, .ssel-align-wrap, .ssel-shortcode-row, .ssel-user-links, .ssel-row)) > .wp-block-image.ylb-footer__books {
		display: flex;
		justify-content: center;
	}
}