/* ============================================================
   Site footer (footer.php)
   Design: home-desktop-v4 y 8165-8740 (576 tall) and home-mobile-v4
   y 13037-14509 (1472 tall); spec docs/homepage-build-brief.md 5.
   Primary Navy band in three parts, split by full-width 1px Grey Dark
   dividers:
     top     stacked logo, FOLLOW US + socials, accreditation logos
     main    Explore / About / Company menus + the newsletter sign-up
     bottom  copyright left, credit right (centred on two lines on phones)
   Mobile (single column): logo, follow, divider, logos, divider,
   newsletter, the three menus (42px inset), divider, copyright.
   Tablet 768-1023 (brief proposal 5.3): logo with the socials beside it
   and the logos centred beneath; three menu columns with the newsletter
   full width below; bottom bar as desktop.
   Desktop 1024+: logos left / stacked logo centre / follow right; four
   columns on the design's spacing (x 82, 421, 724, 1047 at 1440, drawn
   2px inside the 80px container edge, so built at 80, 419, 722, 1045).
   ============================================================ */

.site-footer {
	background-color: var(--color-surface-dark);
	color: var(--color-text-on-dark);
	font-size: var(--fs-small);
	line-height: var(--lh-body);
}

/* Zero specificity, so the BEM rules below can set list margins. */
:where(.site-footer ul) {
	margin: 0;
	padding: 0;
	list-style: none;
}

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

.site-footer__top {
	display: grid;
	justify-items: center;
	padding-top: 30px;
	text-align: center;
}

.site-footer__logo {
	display: block;
}

/* Placeholder PNG lockup (QH12): 177 tall, 123.7 wide (design 127 x 177). */
.site-footer__logo img {
	width: auto;
	height: 177px;
}

.site-footer__follow {
	display: grid;
	justify-items: center;
	gap: 5px;
	margin-top: 57px;
}

/* Koulen 20, White; line-height 1 keeps the caps inside the box. */
.site-footer__follow-title {
	color: var(--color-heading-on-dark);
	font-size: var(--fs-card-title);
	line-height: 1;
}

.site-footer__social {
	display: flex;
	gap: 6px;
}

/* 44px tap targets around 31-33px glyphs (visible gaps about 18px). */
.site-footer__social-link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--tap-target);
	height: var(--tap-target);
	color: var(--color-heading-on-dark);
	transition: color var(--transition);
}

.site-footer__social-link:hover,
.site-footer__social-link:focus-visible {
	color: var(--color-link-hover-on-dark);
}

/* Tripadvisor is drawn as the owl cut out of a White disc: the disc takes
   the link colour (so it follows the hover), the owl the band colour. */
.site-footer__social-disc {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background-color: currentColor;
}

.site-footer__social-disc .icon {
	color: var(--color-surface-dark);
}

/* Accreditation logos: one centred row between two full-width dividers
   (the negative margins take the top rule to the screen edges). Each
   logo fits a 62px-tall slot up to 177px wide: the round badges come out
   62 x 62, the Mountain Training wordmark 177 x 59 (keep the slot in step
   with the sizes attribute in footer.php). */
.site-footer__accreditations {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	justify-self: stretch;
	gap: 15px;
	margin: 21px calc(-1 * var(--gutter)) 0;
	padding: 39px var(--gutter) 41px;
	border-top: var(--border-hairline) solid var(--color-divider-on-dark);
}

.site-footer__accreditation-link {
	display: block;
	transition: opacity var(--transition);
}

.site-footer__accreditation-link:hover {
	opacity: 0.75;
}

.site-footer__accreditation-logo {
	width: auto;
	height: 62px;
	max-width: 177px;
	object-fit: contain;
}

/* ---------- Main band: menus + newsletter ---------- */

.site-footer__main {
	border-top: var(--border-hairline) solid var(--color-divider-on-dark);
}

/* The mobile footer keeps a 42px inset (the page gutter is 14px). */
.site-footer__columns {
	display: grid;
	row-gap: 53px;
	padding-block: 48px 33px;
	padding-inline: max(var(--gutter), var(--inset-card-mobile));
}

/* Footer column headings: the global eyebrow without its rule, as a block
   so no line-box strut adds space above it. */
.site-footer__heading {
	display: flex;
	margin-bottom: 24px;
}

/* 14px links on a 28px pitch (each link a 28px-tall target). */
.site-footer__menu {
	line-height: 2;
}

.site-footer__menu a {
	display: inline-block;
	color: var(--color-link-on-dark);
	text-decoration: none;
	transition: color var(--transition);
}

.site-footer__menu a:hover,
.site-footer__menu a:focus-visible {
	color: var(--color-link-hover-on-dark);
}

/* Newsletter first on phones, as designed. */
.site-footer__newsletter {
	order: -1;
}

.site-footer__newsletter-text {
	margin-bottom: 13px;
}

.site-footer__status {
	margin-bottom: 12px;
	font-weight: var(--fw-semibold);
}

/* Invalid address or failed sign-up: Light Orange (6.05:1 on navy); the
   words carry the meaning, the colour only supports it. */
.site-footer__status--invalid,
.site-footer__status--error {
	color: var(--color-accent);
}

/* Bots fill every field; people never see this one. */
.site-footer__honeypot {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Email pill: 317 x 53 on phones and tablets, 311 x 53 on desktop; the
   40px submit circle sits 7px inside the right end. */
.site-footer__field {
	position: relative;
	max-width: 317px;
}

.site-footer__input {
	display: block;
	width: 100%;
	height: 53px;
	padding: 0 calc(7px + var(--submit-size) + 8px) 0 16px;
	border: 0;
	border-radius: var(--radius-pill);
	background-color: var(--color-surface-dark-alt);
	color: var(--color-text-on-dark);
	caret-color: var(--color-text-on-dark);
	font-size: var(--fs-small);
	-webkit-appearance: none;
	appearance: none;
}

.site-footer__input::placeholder {
	color: var(--color-text-on-dark);
	opacity: 1;
}

/* Keep the pill navy when the browser autofills the address. */
.site-footer__input:-webkit-autofill {
	-webkit-box-shadow: inset 0 0 0 100px var(--color-surface-dark-alt);
	-webkit-text-fill-color: var(--color-text-on-dark);
}

/* Phones: 16px text so iOS Safari does not zoom the page on focus. */
@media (pointer: coarse) {
	.site-footer__input {
		font-size: var(--fs-body);
	}
}

/* The global .btn supplies the colours, hover and focus (QH4 tokens) and
   slides the chevron on hover / focus; this only shapes it into the
   borderless circle. */
.site-footer__submit {
	position: absolute;
	top: calc((53px - var(--submit-size)) / 2);
	right: 7px;
	width: var(--submit-size);
	height: var(--submit-size);
	padding: 0;
	border-width: 0;
}

/* A 44px hit area around the 40px circle. */
.site-footer__submit::after {
	content: "";
	position: absolute;
	inset: calc((var(--submit-size) - var(--tap-target)) / 2);
	border-radius: 50%;
}

.site-footer__consent {
	margin-top: 12px;
	font-size: var(--fs-label);
}

/* An inline link inside a sentence is underlined so it does not rely on
   colour alone (the design draws it plain). */
.site-footer__consent a {
	color: var(--color-link-on-dark);
	text-decoration: underline;
	white-space: nowrap; /* "Privacy Policy" never splits across lines (320px) */
	transition: color var(--transition);
}

.site-footer__consent a:hover,
.site-footer__consent a:focus-visible {
	color: var(--color-link-hover-on-dark);
}

/* ---------- Bottom bar ---------- */

.site-footer__bottom {
	border-top: var(--border-hairline) solid var(--color-divider-on-dark);
}

.site-footer__bar {
	padding-block: 4px calc(11px + env(safe-area-inset-bottom, 0px));
	line-height: 2;
	text-align: center;
}

.site-footer__credit a {
	color: var(--color-link-on-dark);
	text-decoration: none;
	transition: color var(--transition);
}

.site-footer__credit a:hover,
.site-footer__credit a:focus-visible {
	color: var(--color-link-hover-on-dark);
}

/* No hover on touch screens: underline the text links instead (Brand). */
@media (hover: none) {
	.site-footer__menu a,
	.site-footer__credit a {
		text-decoration: underline;
	}
}

/* ============================================================
   Tablet 768-1023
   ============================================================ */

@media (min-width: 768px) {
	.site-footer__top {
		grid-template-columns: auto auto;
		grid-template-areas:
			"logo follow"
			"accreditations accreditations";
		align-items: center;
		justify-content: center;
		padding-top: 40px;
	}

	.site-footer__logo {
		grid-area: logo;
	}

	/* No social URL set: the socials are not printed, so the logo sits
	   alone above the accreditation logos. */
	.site-footer__top--no-social {
		grid-template-columns: auto;
		grid-template-areas:
			"logo"
			"accreditations";
	}

	.site-footer__follow {
		grid-area: follow;
		justify-items: start;
		gap: 8px;
		margin: 0 0 0 72px;
	}

	.site-footer__accreditations {
		grid-area: accreditations;
		justify-self: center;
		margin: 40px 0 0;
		padding: 0 0 40px;
		border-top: 0;
	}

	.site-footer__accreditation-logo {
		height: 68px;
		max-width: 173px;
	}

	.site-footer__columns {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		column-gap: 32px;
		row-gap: 48px;
		padding-block: 40px 48px;
	}

	/* Full width under the menus, on the same three-column grid: the heading
	   on its own row, then the words in the first column and the form from
	   the second. */
	.site-footer__newsletter {
		order: 0;
		grid-column: 1 / -1;
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		column-gap: 32px;
		align-items: start;
	}

	.site-footer__newsletter > .site-footer__heading {
		grid-column: 1 / -1;
	}

	.site-footer__newsletter-text {
		grid-column: 1;
		margin-bottom: 0;
	}

	/* The form keeps the designed pill width (317, as on phones) instead of
	   stretching across both columns (up to 600px wide at 1023); the status
	   message and consent line share its right edge. */
	.site-footer__form {
		grid-column: 2 / -1;
		max-width: 317px;
	}

	.site-footer__bar {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 24px;
		padding-block: 20px calc(27px + env(safe-area-inset-bottom, 0px));
		padding-inline: max(var(--gutter), var(--inset-card-mobile));
		line-height: var(--lh-body);
		text-align: left;
	}
}

/* ============================================================
   Desktop 1024+
   ============================================================ */

@media (min-width: 1024px) {
	/* The design sits the stacked logo 30px from the top and 38px from the
	   divider, with the two side groups on the band's centre line. */
	.site-footer__top {
		grid-template-columns: 1fr auto 1fr;
		grid-template-areas: "accreditations logo follow";
		column-gap: 24px;
		padding-block: 30px 38px;
		text-align: left;
	}

	.site-footer__follow,
	.site-footer__accreditations {
		margin-top: 12px;
	}

	.site-footer__follow {
		justify-self: end;
		margin-left: 0;
	}

	.site-footer__accreditations {
		justify-self: start;
		flex-wrap: nowrap;
		padding: 0;
	}

	/* The designed column widths (339 / 303 / 323 / 315 at 1440); the
	   newsletter column never narrows below the 311px field. */
	.site-footer__columns {
		grid-template-columns: minmax(0, 339fr) minmax(0, 303fr) minmax(0, 323fr) minmax(311px, 315fr);
		column-gap: 0;
		padding-block: 35px 46px;
	}

	.site-footer__newsletter {
		grid-column: auto;
		display: block;
	}

	.site-footer__newsletter-text {
		margin-bottom: 13px;
	}

	.site-footer__field {
		max-width: 311px;
	}
}