/**
 * Footer layout styles
 *
 * Sits on the page background rather than a panel of its own — the two
 * hairline rules are inset to the container, so they never run full-bleed.
 */

.site-footer {
	padding-block: var(--space-16) var(--space-10);
}

/* --- Top row: mark / newsletter / contact --- */

.site-footer__main {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr);
	gap: var(--space-10);
	align-items: start;
	padding-top: var(--space-16);
	border-top: var(--border-width) solid var(--color-border);
}

.site-footer__mark img {
	display: block;
	width: auto;
	max-width: 5.5rem;
	height: auto;
}

.site-footer__wordmark {
	font-family: var(--font-heading);
	font-size: var(--text-sm);
	font-weight: var(--weight-semibold);
	letter-spacing: 0.4em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--color-heading);
}

/* --- Newsletter --- */

.site-footer__newsletter {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-8);
	text-align: center;
}

.site-footer__pitch {
	max-width: 26rem;
	font-size: var(--text-md);
	line-height: var(--line-snug);
	color: var(--color-heading);
	text-wrap: balance;
	margin: 0;
}

.footer-subscribe {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
	width: min(100%, 30rem);
}

.footer-subscribe__input {
	flex: 1 1 12rem;
	min-height: var(--control-height-sm);
	padding: var(--space-2) var(--space-4);
	font-family: var(--font-body);
	font-size: var(--text-sm);
	color: var(--color-text);
	background: var(--color-surface);
	border: var(--border-width) solid var(--color-border);
	border-radius: var(--radius-none);
	transition: border-color var(--transition-fast);
}

.footer-subscribe__input::placeholder {
	color: var(--color-muted);
	opacity: 1;
}

.footer-subscribe__input:focus {
	outline: none;
	border-color: var(--color-border-strong);
}

.footer-subscribe__submit {
	flex: 0 0 auto;
	min-height: var(--control-height-sm);
	padding: var(--space-2) var(--space-6);
	font-family: var(--font-body);
	font-size: var(--text-sm);
	line-height: 1;
	color: var(--color-inverse);
	background: var(--ink);
	border: var(--border-width) solid var(--ink);
	border-radius: var(--radius-none);
	cursor: pointer;
	transition: background var(--transition-fast), border-color var(--transition-fast);
}

.footer-subscribe__submit:hover {
	background: var(--ink-dark);
	border-color: var(--ink-dark);
}

.footer-subscribe__submit:focus-visible {
	outline: var(--border-width-strong) solid var(--color-border-strong);
	outline-offset: 2px;
}

/* --- Contact --- */

.site-footer__contact {
	justify-self: end;
	text-align: left;
}

.site-footer__contact-title {
	font-family: var(--font-mono);
	font-size: var(--text-2xs);
	font-weight: var(--weight-semibold);
	letter-spacing: var(--tracking-wider);
	text-transform: uppercase;
	color: var(--color-heading);
	margin: 0 0 var(--space-6);
}

.site-footer__contact-line {
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	letter-spacing: var(--tracking-wide);
	margin: 0 0 var(--space-3);
}

.site-footer__contact-line:last-child {
	margin-bottom: 0;
}

.site-footer__contact-line a {
	color: var(--color-heading);
	text-decoration: none;
}

.site-footer__contact-line a:hover {
	text-decoration: underline;
	text-underline-offset: 0.3em;
}

/* The email address reads as a link even before hover. */
.site-footer__email {
	text-decoration: underline !important;
	text-underline-offset: 0.3em;
}

/* --- Bottom row: links / social / copyright --- */

.site-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-6) var(--space-16);
	margin-top: var(--space-16);
	padding-top: var(--space-8);
	border-top: var(--border-width) solid var(--color-border);
}

.site-footer__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-4) var(--space-8);
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-footer__list a {
	font-size: var(--text-sm);
	color: var(--color-text);
	text-decoration: none;
}

.site-footer__list a:hover {
	color: var(--color-primary);
	text-decoration: underline;
	text-underline-offset: 0.25em;
}

.site-footer__note {
	margin: 0 0 0 auto;
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	letter-spacing: var(--tracking-wide);
	color: var(--color-muted);
}

@media (max-width: 60rem) {
	.site-footer {
		padding-block: var(--space-12) var(--space-8);
	}

	.site-footer__main {
		grid-template-columns: 1fr;
		gap: var(--space-10);
		padding-top: var(--space-10);
	}

	.site-footer__newsletter {
		align-items: flex-start;
		text-align: left;
	}

	.site-footer__contact {
		justify-self: start;
	}

	.site-footer__bottom {
		gap: var(--space-6);
		margin-top: var(--space-10);
	}

	/* Copyright drops to its own line instead of being pushed right. */
	.site-footer__note {
		flex-basis: 100%;
		margin-left: 0;
	}
}

/* Optional dark footer. */
.site-footer--inverse {
	background: var(--color-surface-inverse);
	color: var(--color-inverse);
}

.site-footer--inverse .site-footer__main,
.site-footer--inverse .site-footer__bottom {
	border-top-color: rgba(255, 255, 255, 0.2);
}

.site-footer--inverse .site-footer__wordmark,
.site-footer--inverse .site-footer__pitch,
.site-footer--inverse .site-footer__contact-title,
.site-footer--inverse .site-footer__contact-line a,
.site-footer--inverse .site-footer__list a {
	color: var(--color-inverse);
}

.site-footer--inverse .site-footer__note {
	color: var(--sage);
}