/*
 * footer.css — the deep-green closing band.
 *
 * Owns only the footer. Colour comes from the dark-surface tokens in tokens.css
 * (--ink-deep / --on-dark / --accent-on-dark) so the band can be reused by the
 * closing CTA later. Layout is CSS Grid: one column on phones, two on tablets,
 * an asymmetric three on desktop. Nothing animates but colour.
 */

.site-footer {
	position: relative;
	background: var(--ink-deep);
	color: var(--on-dark);
	font-size: var(--fs-small);
}

/* The birch-line accent: a hairline across the top that starts as a short green
   stroke, marking where the page closes. Replaces the old tree-ring motif. */
.site-footer::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 2px;
	background: linear-gradient(90deg, var(--accent-on-dark) 0 96px, var(--on-dark-line) 96px);
}

.site-footer__inner {
	display: grid;
	gap: var(--s-12);
	padding-block: clamp(var(--s-12), 6vw, var(--s-24));
}

/* ---- Brand block ---- */
.site-footer__logo {
	display: inline-block;
}

.site-footer__logo img {
	height: 104px;
	width: auto;
}

.site-footer__tagline {
	margin: var(--s-6) 0 var(--s-8);
	max-width: 24ch;
	font-family: var(--font-display);
	font-size: 1.25rem;
	line-height: var(--lh-heading);
	color: var(--on-dark);
}

/* ---- Shared column heading ---- */
.footer-heading {
	margin: 0 0 var(--s-4);
	font-family: var(--font-body);
	font-size: var(--fs-eyebrow);
	font-weight: 600;
	letter-spacing: var(--tracking-eyebrow);
	text-transform: uppercase;
	color: var(--on-dark-muted);
}

/* ---- Link columns ---- */
.footer-nav {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--s-8) var(--s-6);
}

.footer-nav__list {
	margin: 0;
	padding: 0;
	max-width: none;
	list-style: none;
}

.footer-nav__list li {
	margin: 0;
}

.footer-nav__list a,
.footer-contact a,
.site-footer__privacy {
	color: var(--on-dark);
	text-decoration: none;
}

.footer-nav__list a {
	display: block;
	padding-block: var(--s-2); /* keeps tap targets comfortable on phones */
	font-size: var(--fs-body);
}

.footer-nav__list a:hover,
.footer-contact a:hover,
.site-footer__privacy:hover {
	color: var(--accent-on-dark);
	text-decoration: underline;
	text-underline-offset: 4px;
}

/* ---- Contact ---- */
.footer-contact__lines {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--s-2);
	margin: 0 0 var(--s-6);
	max-width: none;
}

.footer-contact__strong {
	font-size: var(--fs-body-lg);
	font-weight: 600;
	padding-block: var(--s-1);
}

.footer-contact__address {
	margin: 0 0 var(--s-8);
	font-style: normal;
	line-height: var(--lh-body);
}

.footer-contact__entrance {
	color: var(--on-dark-muted);
}

/* Opening hours — the reason most people scroll down here, so it gets its own
   ruled block with the display face on the times. */
.footer-hours {
	margin: 0;
}

.footer-hours__row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--s-4);
	padding-block: var(--s-2);
	border-bottom: 1px solid var(--on-dark-line);
}

.footer-hours__row dt {
	color: var(--on-dark-muted);
}

.footer-hours__row dd {
	margin: 0;
	font-family: var(--font-display);
	font-size: var(--fs-body);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.footer-hours__note {
	margin: var(--s-3) 0 0;
	max-width: none;
	color: var(--on-dark-muted);
}

/* ---- Social ---- */
.social-links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-2);
	margin: 0;
	padding: 0;
	max-width: none;
	list-style: none;
}

.social-links li {
	margin: 0;
}

.social-links__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	color: var(--on-dark);
	border: 1px solid var(--on-dark-line);
	border-radius: var(--radius-pill);
	transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}

.social-links__link:hover {
	color: var(--accent-on-dark);
	border-color: var(--accent-on-dark);
}

/* ---- Legal bottom bar ---- */
.site-footer__bottom {
	border-top: 1px solid var(--on-dark-line);
}

.site-footer__bottom-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--s-3) var(--s-6);
	padding-block: var(--s-6);
}

.site-footer__legal {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-1) var(--s-2);
	margin: 0;
	max-width: none;
	color: var(--on-dark-muted);
}

.site-footer__legal span:not(:last-child)::after {
	content: "·";
	margin-left: var(--s-2);
}

/* ---- Tablet: brand and contact pair up, the links run as a band beneath ---- */
@media (min-width: 768px) and (max-width: 1023.98px) {
	.site-footer__inner {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--s-16) var(--s-12);
	}

	.site-footer__brand {
		grid-area: 1 / 1;
	}

	.footer-contact {
		grid-area: 1 / 2;
	}

	.footer-nav {
		grid-area: 2 / 1 / auto / -1;
	}
}

/* ---- Desktop: asymmetric three-column band ---- */
@media (min-width: 1024px) {
	.site-footer__inner {
		grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.4fr) minmax(0, 1.25fr);
		gap: var(--s-12);
	}
}