/**
 * Site footer: regulatory block, audience warning, purple socket.
 *
 * Brand purple is declared once as --narthex-purple (var(--narthex-primary, #8a034f), the fill used in the supplied SVG
 * icons) so nothing has to repeat the hex.
 */

/*
 * The whole footer breaks out of its container and paints its own white ground.
 *
 * The break-out lives here rather than on the individual rows for a reason: this block renders
 * inside Enfold's dark #footer, so any row narrower than the viewport lets that dark background
 * show through beside it. Giving the text rows a white background of their own produced exactly
 * that - a white band with dark blocks either side of it.
 *
 * Negative calc margins rather than width:100vw, because a 100vw element is wider than the
 * content area whenever a vertical scrollbar is present and adds a horizontal one.
 */
.narthex-footer {
	background: #fff;
	margin: 0 calc(50% - 50vw);
	width: auto;
	overflow-x: clip;
}

/*
 * The text column.
 *
 * The wrapper above spans the viewport, so this row is what pulls the text back to the width of
 * the page's own content column. When the theme's container class is on this element (Enfold's
 * `container`, added by Narthex_Footer::inner_class()), the theme's own rule sets the width and
 * the product code lines up with the page content above it at every breakpoint, whatever content
 * width the theme is configured for.
 *
 * The max-width below is only the fallback for when no container class was applied, which is why
 * it is guarded: unguarded, it would compete with the theme's rule at the same specificity and
 * the winner would depend on stylesheet order.
 */
.narthex-footer__inner:not(.container) {
	max-width: 70rem;
	margin: 0 auto;
	padding: 0 1.25rem;
}

/* Rows are transparent: the wrapper above owns the background, edge to edge. */
.narthex-footer__legal {
	color: var(--narthex-ink, #1d1d1b);
	font-size: 0.75rem;
	line-height: 1.5;
	/* No horizontal padding: the column above owns the left edge, and the code aligns to it. */
	padding: 1.5rem 0 0.5rem;
}

.narthex-footer__legal p {
	margin: 0 0 0.35rem;
}

.narthex-footer__warning {
	color: var(--narthex-heading, #2b1a4a);
	font-weight: 700;
	text-align: center;
	padding: 0.75rem 0 1.5rem;
	margin: 0;
}

/*
 * Flush against the bottom of the content: no white gap underneath. It needs no break-out of
 * its own now, because .narthex-footer is already the full width of the viewport.
 */
.narthex-footer__socket {
	background: var(--narthex-primary, var(--narthex-primary, #8a034f));
	padding: 0.9rem 1.25rem;
	margin: 0;
}

.narthex-footer__links {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 0 0.5rem;
}

.narthex-footer__links li {
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
}

.narthex-footer__links a {
	color: var(--narthex-on-primary, #fff);
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-size: 0.8rem;
	font-weight: 600;
	padding: 0.15rem 0;
}

.narthex-footer__links a:hover,
.narthex-footer__links a:focus {
	color: var(--narthex-on-primary, #fff);
	text-decoration: underline;
}

/* Separator between items, dropped after the last one and when the list wraps. */
.narthex-footer__links li:not(:last-child)::after {
	content: "-";
	color: var(--narthex-on-primary, #fff);
	margin-left: 0.5rem;
	opacity: 0.8;
}

@media (max-width: 600px) {
	.narthex-footer__links {
		gap: 0.25rem 0.5rem;
	}

	.narthex-footer__links a {
		font-size: 0.72rem;
	}
}