/* Shared native footer blocks. The wave occupies its own space above the text. */
.outloud-footer {
	border-top: 0;
	background: var(--wp--custom--footer--background);
	color: var(--wp--preset--color--auris-navy);
}

.outloud-footer::before {
	content: "";
	display: block;
	height: var(--wp--custom--footer--wave--height);
	background-image: url("../images/outloud-footer-wave.svg");
	background-repeat: repeat-x;
	background-size: calc(var(--wp--custom--footer--wave--height) * 32 / 3) 100%;
	background-position: var(--wp--custom--footer--wave--offset-x) top;
	pointer-events: none;
}

.outloud-footer-content {
	margin-block-start: 0;
	padding-block: var(--wp--custom--footer--padding-top) var(--wp--custom--footer--padding-bottom);
	padding-inline: var(--wp--style--root--padding-left, 1.5rem) var(--wp--style--root--padding-right, 1.5rem);
}

.outloud-footer .wp-block-columns.outloud-footer-columns {
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr));
	column-gap: var(--wp--custom--spacing--columns);
	row-gap: var(--wp--custom--footer--heading-gap);
	margin-block: 0;
}

.outloud-footer .outloud-footer-columns > .wp-block-column > :first-child { align-self: center; }

.outloud-footer .outloud-footer-body {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--30);
}
.outloud-footer .outloud-footer-body > * { margin: 0; }
.outloud-footer .outloud-footer-brand .outloud-footer-body { gap: var(--wp--preset--spacing--40); }

.outloud-footer .outloud-footer-brand p {
	max-width: 40ch;
}

@media (min-width: 62.501rem) {
	.outloud-footer .outloud-footer-brand p { max-width: 48ch; }
}

.outloud-footer .outloud-footer-links {
	gap: 0;
}

.outloud-footer .outloud-footer-links:not(.wp-block-navigation__container) {
	margin: 0;
}

.outloud-footer-links .wp-block-navigation-item__content {
	display: flex;
	align-items: flex-start;
	padding: 0;
	min-height: var(--wp--custom--button--compact--min-height);
	line-height: inherit;
}

.outloud-footer .wp-block-site-logo img {
	display: block;
	max-width: 100%;
	height: auto;
}

.outloud-footer .outloud-footer-social {
	gap: .75rem;
	margin-block: 0;
}

.outloud-footer .outloud-footer-social .wp-social-link {
	background: transparent;
	color: var(--wp--preset--color--auris-navy);
	border-radius: 0;
	transform: none;
	transition: none;
}

.outloud-footer .outloud-footer-social .wp-social-link a {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	min-height: var(--wp--custom--button--compact--min-height);
	padding: var(--wp--custom--button--compact--padding-block) var(--wp--custom--button--compact--padding-inline);
	border: 0;
	border-radius: 0;
	background: transparent;
	color: var(--wp--preset--color--auris-navy);
	font-size: var(--wp--custom--button--compact--font-size);
	font-weight: var(--wp--custom--button--weight);
	line-height: var(--wp--custom--button--line-height);
	text-decoration-line: underline;
	text-decoration-thickness: .08em;
	text-underline-offset: .2em;
}

.outloud-footer .outloud-footer-social .wp-social-link .wp-block-social-link-label {
	font-size: inherit;
	margin: 0;
}

.outloud-footer .outloud-footer-social .wp-social-link svg {
	width: 1.25rem;
	height: 1.25rem;
}

/* Named social links follow the text-link role, without a button surface. */
.outloud-footer .outloud-footer-social .wp-social-link a:is(:hover, :active) {
	text-decoration-line: underline;
	text-decoration-thickness: .14em;
}

.outloud-footer .outloud-footer-social .wp-social-link a:focus-visible {
	outline: var(--wp--custom--focus--width) solid var(--wp--custom--focus--color);
	outline-offset: var(--wp--custom--focus--offset);
	box-shadow: 0 0 0 var(--wp--custom--focus--offset) var(--wp--preset--color--auris-white);
}

@media (max-width: 62.5rem) {
	.outloud-footer {
		--wp--custom--footer--padding-top: var(--wp--custom--footer--compact--padding-top);
		/* Keep the lower breathing room independent of the tighter space above. */
		--wp--custom--footer--padding-bottom: var(--wp--custom--footer--compact--padding-bottom);
	}
	.outloud-footer .wp-block-columns.outloud-footer-columns {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.outloud-footer-columns > .outloud-footer-brand {
		grid-column: 1 / -1;
		margin-block-end: calc(var(--wp--custom--footer--compact--group-gap) - var(--wp--custom--footer--heading-gap));
	}
	.outloud-footer .outloud-footer-body { gap: var(--wp--custom--spacing--content); }
	.outloud-footer .outloud-footer-brand .outloud-footer-body { gap: var(--wp--preset--spacing--50); }
	.outloud-footer .outloud-footer-links { gap: var(--wp--preset--spacing--20); }
}
@media (max-width: 37.5rem) {
	.outloud-footer .wp-block-columns.outloud-footer-columns {
		grid-template-columns: minmax(0, 1fr);
		row-gap: var(--wp--custom--footer--compact--group-gap);
	}
	.outloud-footer .wp-block-columns.outloud-footer-columns > .wp-block-column {
		grid-row: auto;
		grid-template-rows: auto auto;
		row-gap: var(--wp--custom--footer--heading-gap);
		margin: 0;
	}
}

@media (forced-colors: active) {
	.outloud-footer .outloud-footer-social .wp-social-link a {
		border-color: ButtonText;
	}
	.outloud-footer .outloud-footer-social .wp-social-link a:focus-visible {
		outline-color: Highlight;
		box-shadow: none;
	}
	.outloud-footer::before { display: none; }
}