/**
 * Site footer
 *
 * A dark panel in two bands. The top band is centred (menu + intro paragraph);
 * the bottom band is a three-column grid — secondary menu, gold tagline,
 * secondary menu — aligned to a shared baseline at the foot of the page.
 *
 * The gap between the bands is what gives the footer its height, so it breathes
 * on tall viewports without a fixed min-height to maintain.
 *
 * @package Norwegian_Flagstone
 */

.site-footer {
	background-color: var(--nf-mork-sort);
	color: var(--nf-lys);
	overflow: hidden;
	padding-block: 3.75rem 2.8125rem; /* 60px / 45px */
	position: relative;
}

/* Background pattern ------------------------------------------------------- */

/*
 * A fixed brand asset, not editorial content, so it is a theme file rather than
 * an uploadable field. The 3% opacity and the gold fill are baked into the SVG
 * itself — there is no opacity layer here to keep in sync with it.
 *
 * Scaled to the footer's height and tiled sideways, so the motif always reads
 * as a complete form rather than a cropped one.
 */
.site-footer {
	background-image: url("../img/footer-pattern.svg");
	background-position: top center;
	background-repeat: repeat-x;
	background-size: auto 100%;
}

@media (max-width: 767px) {

	/*
	 * A narrow, tall footer would scale a single tile far wider than the screen
	 * and show one stray diagonal. Pin it to a fixed size and tile both ways.
	 */
	.site-footer {
		background-repeat: repeat;
		background-size: 15rem auto;
	}
}

.site-footer__inner {
	display: flex;
	flex-direction: column;

	/*
	 * The band separation, and therefore the footer's height. The maximum is the
	 * design value of 170px, reached at ~1546px and held above it, so it reads
	 * as a fixed gap on desktop while still scaling down on smaller screens.
	 */
	gap: clamp(3rem, 11vw, 10.625rem); /* 48 → 170px */
	position: relative;
	z-index: var(--nf-z-content);
}

/* Top band ----------------------------------------------------------------- */

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

/* Figma: Cabin 500, 16px / 140%, Aksent gold, centred, 563px wide. */
.site-footer__intro {
	color: var(--nf-gull);
	font-size: var(--nf-fs-body);
	font-weight: var(--nf-font-weight-medium);
	line-height: var(--nf-lh-body);
	max-width: 35.1875rem; /* 563px */
}

.site-footer__intro p + p {
	margin-top: var(--nf-space-2xs);
}

/* Bottom band -------------------------------------------------------------- */

.site-footer__bottom {
	align-items: end;
	display: grid;
	gap: var(--nf-space-m);
	grid-template-columns: 1fr auto 1fr;
}

.site-footer__tagline {
	color: var(--nf-gull);
	font-size: var(--nf-fs-h2);
	grid-column: 2;
	line-height: var(--nf-lh-heading);
	margin: 0;
	max-width: 24ch;
	text-align: center;
}

/* Menus -------------------------------------------------------------------- */

.footer-navigation ul {
	display: flex;
	flex-wrap: wrap;
	gap: var(--nf-space-m);
	justify-content: center;
	list-style: none;
	margin: 0;
	padding: 0;
}

.footer-navigation li {
	margin: 0;
}

.footer-navigation a {
	color: var(--nf-lys);
	font-size: var(--nf-fs-nav);
	text-decoration: none;
}

.footer-navigation a:hover,
.footer-navigation a:focus {
	color: var(--nf-gull);
}

.footer-navigation .current-menu-item > a,
.footer-navigation .current_page_item > a {
	color: var(--nf-gull);
}

/* The two bottom menus are smaller and hug the outer edges. */
.footer-navigation--left,
.footer-navigation--right {
	align-self: end;
}

.footer-navigation--left {
	grid-column: 1;
	justify-self: start;
}

.footer-navigation--right {
	grid-column: 3;
	justify-self: end;
}

.footer-navigation--left ul,
.footer-navigation--right ul {
	gap: var(--nf-space-s);
}

.footer-navigation--left a,
.footer-navigation--right a {
	font-size: var(--nf-fs-small);
}

/* Small screens ----------------------------------------------------------- */

@media (max-width: 767px) {

	.site-footer__bottom {
		grid-template-columns: 1fr;
		justify-items: center;
		text-align: center;
	}

	/* Tagline leads, then the two secondary menus stack under it. */
	.site-footer__tagline {
		grid-column: 1;
		order: 1;
	}

	.footer-navigation--left {
		grid-column: 1;
		justify-self: center;
		order: 2;
	}

	.footer-navigation--right {
		grid-column: 1;
		justify-self: center;
		order: 3;
	}
}