/*
 * Reveal-style footer.
 *
 * The footer sits fixed at the bottom of the viewport, behind #page (the
 * wrapper around header + all page content). #page is opaque and stacks
 * above the footer, so it visually covers it during normal scrolling.
 * #page gets a margin-bottom equal to the footer's actual rendered height
 * (set as --footer-height by main.js, since the text length — and so the
 * footer's height — varies with whatever's typed into the Customizer).
 * Margin (not padding) is what makes this work: margin is outside #page's
 * painted background, so that trailing strip of the document is left
 * transparent, letting the fixed footer show through once scrolled that far.
 */

#page {
	position: relative;
	z-index: 1;
	background: var(--azpma-white);
	margin-bottom: var(--footer-height, 0px);
}

.site-footer {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	z-index: 0;
	background: var(--azpma-bg-light);
}

.site-footer-inner {
	max-width: var(--ast-normal-container-width, 1200px);
	margin: 0 auto;
	padding: 3.5em 1.5em 2em;
	text-align: center;
}

.site-footer-about {
	max-width: 640px;
	margin: 0 auto 2em;
	color: var(--azpma-text);
	font-size: 0.95rem;
	line-height: 1.7;
}

.site-footer-about p {
	margin: 0 0 1em;
}

.site-footer-about p:last-child {
	margin-bottom: 0;
}

.site-footer-copyright {
	margin: 0;
	font-size: 0.8rem;
	color: var(--azpma-text);
	opacity: 0.65;
}

@media (max-width: 600px) {
	.site-footer-inner {
		padding: 2.5em 1.25em 1.5em;
	}

	.site-footer-about {
		font-size: 0.9rem;
		line-height: 1.6;
	}
}