/*
 * 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,
.ylb-footer > .ssel-block-edit-wrap {
	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;
}

/* In the editor each button block sits in a wrapper with its own 12px padding. */
.ylb-footer > .ssel-block-edit-wrap > div {
	display: flex;
	padding: 0 !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, .ssel-block-edit-wrap),
.ylb-footer > :is(.ssel-block-wrap, .ssel-align-wrap, .ssel-shortcode-row, .ssel-user-links, .ssel-row, .ssel-block-edit-wrap) + :is(.ssel-block-wrap, .ssel-align-wrap, .ssel-shortcode-row, .ssel-user-links, .ssel-row, .ssel-block-edit-wrap, .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, .ssel-block-edit-wrap)) {
		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, .ssel-block-edit-wrap)) > :not(.ylb-footer__social, .ssel-block-wrap, .ssel-align-wrap, .ssel-shortcode-row, .ssel-user-links, .ssel-row, .ssel-block-edit-wrap) {
		flex: 0 0 100%;
	}

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

/* ==========================================================================
 * Dark mode (Darkify)
 * Darkify's engine turns every SSEL button into a grey card (grey text, flat
 * grey gradient, neutral shadow). These rules put the plugin's own colours
 * back, read from the same variables the plugin uses (--ssel-color,
 * --ssel-color-rgb, --ssel-btn-alpha, --ssel-list-text), so every preset and
 * scheme looks as it does in light mode. Scoped under
 * html.darkify_dark_mode_enabled. (The footer is skipped by Darkify and keeps
 * the plugin's colours without any of this.)
 *
 * Darkify also writes an INLINE background-image: ... !important on the four
 * gradient networks (Instagram, TikTok, Pocket, iTunes) which no stylesheet
 * can beat, so their real gradients are painted by a ::before layer instead (as SVG images, because Darkify also darkens CSS gradients it finds in stylesheets)
 * (not in Linkfire lists, which already use ::before for their gradient ring).
 * Adding the darkify_ignore class to .ssel-list / .ssel-btn in PHP would make
 * all of this unnecessary.
 * ========================================================================== */

/* Solid brand colour for every button; text and icon in the plugin's colours. */
html.darkify_dark_mode_enabled a.ssel-btn.ssel-btn {
	background-color: var(--ssel-color, #555) !important;
	color: #fff !important;
	isolation: isolate;
}

html.darkify_dark_mode_enabled a.ssel-btn.ssel-btn:is(:hover, :focus, :focus-visible, :active, :visited) {
	color: #fff !important;
}

html.darkify_dark_mode_enabled a.ssel-btn.ssel-btn[data-network="snapchat"],
html.darkify_dark_mode_enabled a.ssel-btn.ssel-btn[data-network="snapchat"]:is(:hover, :focus, :focus-visible, :active, :visited) {
	color: #000 !important;
}

html.darkify_dark_mode_enabled .ssel-btn :is(.ssel-btn__label, .ssel-btn__icon, svg) {
	color: inherit !important;
}

html.darkify_dark_mode_enabled .ssel-btn svg {
	fill: currentColor !important;
}

/* In a list the fill follows the list's Button Opacity setting. */
html.darkify_dark_mode_enabled .ssel-list a.ssel-btn.ssel-btn:not([data-network="instagram"], [data-network="tiktok"], [data-network="pocket"], [data-network="itunes"]) {
	background-color: rgba(var(--ssel-color-rgb), var(--ssel-btn-alpha, 1)) !important;
}

/* Linkfire: outlined buttons, text and icon in the brand colour. */
html.darkify_dark_mode_enabled .ssel-list[data-preset="linkfire"] a.ssel-btn.ssel-btn {
	background-color: transparent !important;
	color: var(--ssel-color) !important;
}

html.darkify_dark_mode_enabled .ssel-list[data-preset="linkfire"] a.ssel-btn.ssel-btn:not([data-network="instagram"], [data-network="tiktok"], [data-network="pocket"], [data-network="itunes"]) {
	border-color: rgba(var(--ssel-color-rgb), var(--ssel-btn-alpha, 1)) !important;
}

/* Gradient networks: paint the real gradient on a layer under the content. */
html.darkify_dark_mode_enabled a.ssel-btn.ssel-btn:is([data-network="instagram"], [data-network="tiktok"], [data-network="pocket"], [data-network="itunes"]):not(:where(.ssel-list[data-preset="linkfire"] *))::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
}

html.darkify_dark_mode_enabled a.ssel-btn.ssel-btn[data-network="instagram"]::before { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' viewBox='0 0 1 1'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0.8' x2='1' y2='0.2'%3E%3Cstop offset='0' stop-color='%23fcb045'/%3E%3Cstop offset='0.5' stop-color='%23fd1d1d'/%3E%3Cstop offset='1' stop-color='%23833ab4'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='1' height='1' fill='url%28%23g%29'/%3E%3C/svg%3E") center / 100% 100% no-repeat; }
html.darkify_dark_mode_enabled a.ssel-btn.ssel-btn[data-network="tiktok"]::before { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' viewBox='0 0 1 1'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0.2' x2='1' y2='0.8'%3E%3Cstop offset='0' stop-color='%2325f4ee'/%3E%3Cstop offset='0.4' stop-color='%23010101'/%3E%3Cstop offset='1' stop-color='%23fe2c55'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='1' height='1' fill='url%28%23g%29'/%3E%3C/svg%3E") center / 100% 100% no-repeat; }
html.darkify_dark_mode_enabled a.ssel-btn.ssel-btn[data-network="pocket"]::before { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' viewBox='0 0 1 1'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0.3' x2='1' y2='0.7'%3E%3Cstop offset='0' stop-color='%23ff6b6b'/%3E%3Cstop offset='0.55' stop-color='%23ef3f56'/%3E%3Cstop offset='1' stop-color='%23c0202f'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='1' height='1' fill='url%28%23g%29'/%3E%3C/svg%3E") center / 100% 100% no-repeat; }
html.darkify_dark_mode_enabled a.ssel-btn.ssel-btn[data-network="itunes"]::before { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' viewBox='0 0 1 1'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0.2' x2='1' y2='0.8'%3E%3Cstop offset='0' stop-color='%23fb5bc5'/%3E%3Cstop offset='0.5' stop-color='%23b465da'/%3E%3Cstop offset='1' stop-color='%232e8de1'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='1' height='1' fill='url%28%23g%29'/%3E%3C/svg%3E") center / 100% 100% no-repeat; }

/* The card text: the plugin's own value for dark schemes; light for light schemes (the card itself is dark in dark mode). */
html.darkify_dark_mode_enabled .ssel-list[data-scheme="dark"] :is(.ssel-list__header, .ssel-list__name) {
	color: #fff !important;
}

html.darkify_dark_mode_enabled .ssel-list[data-scheme="dark"] .ssel-list__bio {
	color: rgba(255, 255, 255, 0.7) !important;
}

html.darkify_dark_mode_enabled .ssel-list[data-scheme="light"] :is(.ssel-list__header, .ssel-list__name) {
	color: #eadfce !important;
}

html.darkify_dark_mode_enabled .ssel-list[data-scheme="light"] .ssel-list__bio {
	color: rgba(234, 223, 206, 0.7) !important;
}

/* Hover glow stays visible on the dark card. */
html.darkify_dark_mode_enabled a.ssel-btn.ssel-btn:is(:hover, :focus-visible) {
	box-shadow: 0 0 0 3px var(--ylb-ssel-glow) !important;
}