/*
 * 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);
	z-index: 1;
}

/*
 * The Koivukylä map watermark (brief 04 §4): the district's own asemakaava
 * line-work, green-tinted, bleeding off the bottom-right corner. Kaisa's own
 * reference was a minimalist wood-cut city-map wall art — this is that idea
 * as a quiet background texture rather than a foreground graphic, which is
 * why the opacity is this low and the edges dissolve via the mask instead of
 * ending in a hard rectangle. --footer-watermark is set inline by footer.php
 * (a theme asset URL, not something this stylesheet can know on its own).
 *
 * Sits BEHIND the real content (z-index 0, while .site-footer__inner and
 * .site-footer__bottom get z-index 1) — without that, ::after paints last in
 * box order and would sit on top and swallow the footer's own text.
 */
.site-footer::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background-image: var(--footer-watermark);
	background-repeat: no-repeat;
	background-position: right -70px bottom -70px;
	background-size: min(62vw, 700px);
	/* Felix, 18.8: make it more visible. Raised from 0.1, and chosen by
	   measurement rather than eye. The asset is line work in Koivu's own green
	   (#73A220) covering ~7% of its area, so at 0.26 over the footer's #101C15
	   the densest line composites to rgb(42,63,24). White footer text over that
	   still measures 11.5:1 and the muted tone 5.2:1, both clear of AA — which
	   is the constraint that caps this, since the mark sits behind the contact
	   column. Opacity and fade live here, not baked into the file, so the
	   treatment stays tunable without re-exporting the map. */
	opacity: 0.26;
	-webkit-mask-image: radial-gradient(circle at bottom right, #000 0%, #000 36%, transparent 78%);
	mask-image: radial-gradient(circle at bottom right, #000 0%, #000 36%, transparent 78%);
}

/* The optional "Koivukylä" caption — see KOIVU_WATERMARK_LABELLED in footer.php. */
.site-footer__watermark-label {
	position: absolute;
	right: var(--container-pad);
	bottom: var(--s-6);
	z-index: 0;
	font-family: var(--font-display);
	font-size: var(--fs-small);
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--accent-on-dark);
	opacity: 0.55;
}

.site-footer__inner {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	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 {
	max-width: 100%;
	overflow-wrap: anywhere;
	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;
	flex-wrap: wrap;
	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 {
	position: relative;
	z-index: 1;
	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);
	}
}

/* ---- Phone: compaction pass (27.7.2026) ----
 *
 * Measured against their saved site at 390px: their mobile footer is 740px,
 * ours was 1218px. The difference was not one big thing — it was the standing
 * desktop rhythm (48px block gaps, 48px band padding) repeated down a single
 * column, plus a tagline their footer does not carry.
 *
 * Everything here is spacing or a duplicate line. No contact detail, legal
 * identifier or link is dropped: on a phone the footer is where people look up
 * the opening hours and the Y-tunnus, so the content stays and only the air
 * between it is tightened.
 */
@media (max-width: 767.98px) {
	.site-footer__inner {
		gap: var(--s-8);
		padding-block: var(--s-8);
	}

	/*
	 * Content cut on the phone, on the client's instruction ("too much info").
	 * Each of these is either a duplicate of something else on screen or a
	 * detail their own mobile footer does not carry. All of it is still in the
	 * HTML and still shown from 768px up — this hides, it does not delete.
	 *
	 *   tagline     — repeats the hero line
	 *   nav         — 204px of links; the header drawer and the sticky
	 *                 Pyydä tarjous / Soita bar already cover navigation, and
	 *                 their mobile footer has no link columns at all
	 *   entrance    — a detail for people already at the door
	 *   copyright   — boilerplate; the Y-tunnus is the identifier that matters
	 *
	 * The hours notes used to be cut here too (27.7, when the only note was the
	 * summer-Friday exception). Since 19.10.2026 they say that Fridays and
	 * Midsummer and Christmas Eve are closed, which a phone visitor needs as much
	 * as the two rows, so they stay, set small (21.10.2026).
	 */
	.site-footer__tagline,
	.footer-nav,
	.footer-contact__entrance,
	.site-footer__copyright {
		display: none;
	}

	.footer-hours__note {
		margin-top: var(--s-2);
		font-size: var(--fs-small);
		line-height: 1.45;
	}

	.footer-contact__lines {
		margin-bottom: var(--s-4);
	}

	.footer-contact__address {
		margin-bottom: var(--s-5);
	}

	.footer-hours__row {
		padding-block: var(--s-1);
	}

	.site-footer__bottom-inner {
		padding-block: var(--s-4);
	}

	/*
	 * The legal line is dot-separated because on a wide screen it is one row.
	 * On a phone the items stack, which left a dot orphaned at the end of a
	 * line. Stack them properly and drop the separators.
	 */
	.site-footer__legal {
		flex-direction: column;
		gap: var(--s-1);
	}

	.site-footer__legal span:not(:last-child)::after {
		content: none;
	}
}