/* Global footer. Ported from the web prototype's .site-footer (Feature 1d). */
.site-footer {
	background: var(--color-ink);
	color: var(--color-cream);
	padding: 80px var(--spacing-page) 24px;
	flex-direction: column;
	gap: 175px;
	display: flex;
	width: 100%;
}

.footer-top {
	justify-content: space-between;
	align-items: stretch;
	gap: 48px;
	display: flex;
	width: 100%;
}

.footer-brand {
	flex-direction: column;
	flex-shrink: 0;
	gap: 69px;
	display: flex;
}

.footer-logo {
	aspect-ratio: 257 / 66;
	width: 257px;
	max-width: 100%;
	height: auto;
	display: block;
}

.footer-news {
	flex-direction: column;
	gap: 56px;
	width: 448px;
	max-width: 100%;
	display: flex;
}

.footer-news-text {
	flex-direction: column;
	gap: 16px;
	display: flex;
}

.footer-news-text h2 {
	max-width: 420px;
	color: var(--color-cream);
}

.footer-news-text p {
	max-width: 387px;
	color: var(--color-cream);
}

.footer-links {
	align-items: stretch;
	gap: 72px;
	display: flex;
}

.footer-stack {
	flex-direction: column;
	justify-content: space-between;
	gap: 40px;
	display: flex;
}

.footer-col {
	flex-direction: column;
	gap: 20px;
	min-width: 0;
	display: flex;
}

.footer-list {
	white-space: nowrap;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
	font-size: var(--fs-14);
	line-height: 1.4;
	display: flex;
}

/* The loop row wraps its link, so it must not add a gap when a row is dropped. */
.footer-social-row {
	display: contents;
}

.footer-list a,
.footer-legal-links a,
.footer-legal-link {
	position: relative;
}

.footer-list a:before,
.footer-legal-links a:before,
.footer-legal-link:before {
	content: "";
	position: absolute;
	inset: -12px -6px;
}

.footer-legal-links a:before,
.footer-legal-link:before {
	inset: -14px -6px;
}

.underline-link {
	text-underline-position: from-font;
	text-decoration: underline;
}

.footer-contact-label {
	display: none;
}

.footer-contact {
	flex-direction: column;
	gap: 16px;
	display: flex;
}

.footer-address {
	width: 256px;
	max-width: 100%;
	font-size: var(--fs-14);
	line-height: 1.4;
}

.footer-legal {
	width: 100%;
	color: var(--color-sand);
	white-space: nowrap;
	justify-content: space-between;
	align-items: flex-end;
	gap: 16px;
	display: flex;
}

.footer-legal-links {
	align-items: center;
	gap: 24px;
	display: flex;
}

.site-footer a:focus-visible {
	outline: 1px solid currentcolor;
	outline-offset: 2px;
}

@media (max-width: 1279px) {
	.site-footer {
		gap: 24px;
		padding-top: 72px;
	}

	.footer-top {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		grid-template-areas:
			"news news news"
			"dest explore contact"
			"dest explore follow"
			"logo logo logo";
		gap: 0 24px;
		display: grid;
	}

	.footer-brand,
	.footer-links,
	.footer-stack {
		display: contents;
	}

	.footer-news {
		grid-area: news;
		gap: 40px;
		width: 100%;
		margin-bottom: 80px;
	}

	.footer-dest {
		grid-area: dest;
	}

	.footer-explore {
		grid-area: explore;
	}

	.footer-contact-col {
		grid-area: contact;
	}

	.footer-contact-label {
		display: block;
	}

	.footer-address {
		order: 1;
	}

	.footer-follow {
		grid-area: follow;
		margin-top: 40px;
	}

	.footer-logo {
		grid-area: logo;
		width: 100%;
		margin-top: 96px;
	}
}

@media (max-width: 767px) {
	.site-footer {
		padding: 56px var(--spacing-page) 24px;
	}

	.footer-top {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas: "news" "dest" "explore" "contact" "follow" "logo";
	}

	.footer-explore,
	.footer-contact-col,
	.footer-follow {
		margin-top: 32px;
	}

	.footer-logo {
		margin-top: 72px;
	}

	.footer-list {
		white-space: normal;
	}

	.footer-legal {
		text-align: center;
		white-space: normal;
		flex-direction: column;
		align-items: center;
		gap: 12px;
	}
}

/*
 * The newsletter is Fluent Forms form 2. Fluent Forms renders its own markup, so the
 * prototype's rules are mapped onto it: form.newsletter = .ff-t-container,
 * .newsletter-field = the email column's .ff-el-input--content.
 * Every rule is scoped to .newsletter so the Contact form keeps Fluent Forms' defaults.
 */
.newsletter {
	width: min(403px, 100%);
}

.newsletter .frm-fluent-form fieldset {
	display: block;
}

.newsletter .frm-fluent-form .ff-t-container {
	align-items: flex-start;
	gap: 16px;
	width: 100%;
	margin: 0;
	display: flex;
}

/* Fluent Forms sets flex-basis inline on each column, so only !important can replace it. */
.newsletter .frm-fluent-form .ff-t-column-1 {
	flex: 1 1 0 !important;
}

.newsletter .frm-fluent-form .ff-t-column-2 {
	flex: 0 0 auto !important;
	width: auto;
}

.newsletter .frm-fluent-form .ff-t-cell {
	min-width: 0;
	margin: 0;
	padding: 0;
	display: block;
}

.newsletter .frm-fluent-form .ff-el-group {
	margin: 0;
}

/* The label stays for screen readers; the prototype shows only the placeholder. */
.newsletter .frm-fluent-form .ff-el-input--label {
	clip-path: inset(50%);
	white-space: nowrap;
	width: 1px;
	height: 1px;
	margin: 0;
	padding: 0;
	position: absolute;
	overflow: hidden;
}

.newsletter .frm-fluent-form .ff-t-column-1 .ff-el-input--content {
	border-bottom: .5px solid var(--color-cream);
	cursor: text;
	align-items: flex-start;
	min-width: 0;
	height: 44px;
	margin-top: -22px;
	padding-top: 22px;
	display: flex;
	position: relative;
}

.newsletter .frm-fluent-form .ff-t-column-1 .ff-el-input--content:focus-within {
	border-bottom-color: var(--color-white);
}

.newsletter .frm-fluent-form .ff-el-form-control,
.newsletter-status.is-sent {
	width: 100%;
	height: 17px;
	min-height: 0;
	color: var(--color-cream);
	font-family: var(--font-body);
	letter-spacing: .01em;
	background: 0 0;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	outline: 0;
	margin: 0;
	padding: 0;
	font-size: 14px;
	line-height: normal;
}

.newsletter .frm-fluent-form .ff-el-form-control::placeholder {
	color: var(--color-muted);
	opacity: 1;
}

.newsletter .frm-fluent-form .ff-el-form-control:focus-visible {
	outline: 0;
	background: 0 0;
}

.newsletter .frm-fluent-form .ff-el-form-control:-webkit-autofill {
	-webkit-text-fill-color: var(--color-cream);
	transition: background-color 9999s;
}

/* Field errors and request failures: the accepted 1c error style, under the line so the layout does not move. */
.newsletter .frm-fluent-form .ff-el-input--content .error,
.newsletter-status.is-error {
	pointer-events: none;
	color: var(--color-cream);
	font-family: var(--font-body);
	font-size: 12px;
	line-height: 1.4;
	white-space: normal;
	margin: 0;
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
}

.newsletter-status {
	margin: 0;
	position: absolute;
}

.newsletter-status:empty {
	display: none;
}

.newsletter-status:focus {
	outline: 0;
}

.newsletter-status.is-sent {
	top: 22px;
	left: 0;
}

/* footer.js shows a request failure in the status, so a stale field error must not sit under it. */
.newsletter .frm-fluent-form .ff-el-input--content:has(.newsletter-status.is-error) .error {
	display: none;
}

.newsletter.is-sent .frm-fluent-form .ff-el-form-control {
	visibility: hidden;
}

/* footer.js shows every outcome in its own status, so Fluent Forms' boxes stay hidden. */
.newsletter .ff-message-success,
.newsletter .ff-errors-in-stack {
	display: none !important;
}

/* The submit button is a text link. A flex row, so the inline button adds no line-height strut above it. */
.newsletter .frm-fluent-form .ff_submit_btn_wrapper {
	align-items: flex-start;
	margin: 0;
	display: flex;
}

.newsletter .frm-fluent-form .ff-btn-submit.newsletter-submit {
	color: var(--color-cream);
	font-family: var(--font-display);
	letter-spacing: .01em;
	text-transform: uppercase;
	cursor: pointer;
	background: 0 0;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	min-width: 0;
	min-height: 0;
	margin: 0;
	padding: 0;
	font-size: 14px;
	font-weight: inherit;
	line-height: normal;
	opacity: 1;
}

.newsletter .frm-fluent-form .ff-btn-submit.newsletter-submit:disabled {
	cursor: default;
	opacity: .6;
}

.newsletter .frm-fluent-form .ff-btn-submit.ff-working:after {
	display: none;
}

@media (prefers-reduced-motion: reduce) {
	.newsletter-submit .text-link-label,
	.newsletter-submit .text-link-line:before,
	.newsletter-submit .text-link-line:after {
		transition: none;
	}
}