.solea-site-footer {
	position: relative;
	overflow: hidden;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--brand-text);
	font-family: var(--wp--preset--font-family--jost);
	padding: clamp(48px, 6vw, 88px) clamp(20px, 4vw, 48px) 0;
}

/*
 * Purely decorative, so it's a ::before rather than an empty wp:group with
 * aria-hidden in the markup — core/group has no "aria-hidden" attribute, so
 * that raw HTML attribute doesn't round-trip through block validation and
 * flags the block as invalid ("attempting recovery") in the editor.
 */
.solea-site-footer::before {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	width: 520px;
	height: 340px;
	color: var(--wp--preset--color--brand-accent);
	opacity: 0.12;
	background-image: radial-gradient(currentColor 1.8px, transparent 1.9px);
	background-size: 13px 13px;
	-webkit-mask-image: radial-gradient(circle at 0% 100%, #000, transparent 70%);
	mask-image: radial-gradient(circle at 0% 100%, #000, transparent 70%);
	pointer-events: none;
}

.solea-site-footer__grid {
	position: relative;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 40px;
}

/*
 * The width comes from the wp:site-logo block's own "width" attribute
 * (rendered as an inline style on this element) rather than from CSS, so
 * the image keeps its intrinsic aspect ratio at the size set in the editor.
 */
.solea-site-footer__logo img {
	width: 100%;
	height: auto;
	display: block;
}

.solea-site-footer__tagline {
	margin: 20px 0 0;
	font-size: 1rem;
	line-height: 1.6;
	color: var(--wp--preset--color--brand-text-muted);
	max-width: 300px;
}

.solea-site-footer__social {
	margin-top: 28px;
	gap: 12px;
}

.solea-site-footer__social .wp-block-social-link {
	width: 44px;
	height: 44px;
	background: transparent;
}

/*
 * Core's own .wp-social-link a rule sets display:flex + align-items:center
 * but no justify-content, so the icon sits flush left inside the fixed-size
 * circle instead of centered — override padding/justify-content here.
 */
.solea-site-footer__social .wp-block-social-link a {
	width: 100%;
	height: 100%;
	padding: 0;
	justify-content: center;
	border-radius: 50%;
	color: var(--wp--preset--color--brand-purple);
	border: 1px solid var(--wp--preset--color--brand-neutral-border);
	transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.solea-site-footer__social .wp-block-social-link a:hover {
	background: var(--wp--preset--color--brand-accent);
	border-color: var(--wp--preset--color--brand-accent);
	color: var(--wp--preset--color--base);
}

.solea-site-footer__social .wp-block-social-link svg {
	width: 18px;
	height: 18px;
}

.solea-site-footer__column-title {
	margin: 0;
	font-size: 0.950rem;
	letter-spacing: 0.14em;
	color: var(--wp--preset--color--brand-accent);
	font-weight: 700;
}

.solea-site-footer__links {
	margin-top: 20px;
}

/*
 * .wp-block-navigation__container has "gap: inherit" from the nav block's
 * own layout-support gap (a ~0.5em default we never set explicitly) — set
 * it directly here instead of adding item margin, which would stack with
 * that inherited gap and produce uneven spacing between links.
 */
.solea-site-footer__links .wp-block-navigation__container {
	gap: 12px;
}

.solea-site-footer__links .wp-block-navigation-item {
	margin: 0;
}

.solea-site-footer__links .wp-block-navigation-item__content {
	padding: 0;
	font-size: 1rem;
	color: var(--wp--preset--color--brand-text);
}

.solea-site-footer__links .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--brand-accent);
}

/*
 * Uses the shared ".full-bleed" utility (theme's root style.css, applied via
 * the "solea-site-footer__bottom full-bleed" class in parts/footer.html)
 * rather than relying solely on the "alignfull" block support: the footer's
 * own padding is set in plain CSS (not the block's spacing attribute), so
 * core's automatic negative-margin compensation for alignfull children never
 * triggers here.
 */
.solea-site-footer__bottom {
	position: relative;
	margin-top: 56px;
	padding: 34px clamp(20px, 4vw, 48px);
	background: var(--wp--preset--color--brand-canvas);
	display: flex;
	flex-wrap: wrap;
	gap: 16px 40px;
	align-items: center;
}

.solea-site-footer__copyright {
	margin: 0;
	font-size: 0.9375rem;
	color: var(--wp--preset--color--base);
}

.solea-site-footer__legal {
	margin-left: auto;
	flex-wrap: wrap;
	gap: 14px 32px;
}

.solea-site-footer__legal .wp-block-navigation-item__content {
	padding: 0;
	font-size: 0.9375rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--wp--preset--color--base);
	white-space: nowrap;
}

.solea-site-footer__legal .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--brand-purple-light);
}

@media (max-width: 768px) {
	.solea-site-footer {
		padding: 36px 20px 0;
	}

	.solea-site-footer__grid {
		grid-template-columns: 1fr;
		gap: 24px;
	}

	/* Overrides the wp:site-logo block's inline width (set in the editor for desktop). */
	.solea-site-footer__logo {
		width: 125px !important;
	}

	.solea-site-footer__bottom {
		margin-top: 24px;
	}

	.solea-site-footer__legal {
		margin-left: 0;
	}
}