/**
 * Site chrome: header (Figma "Navigation" 10:12082), phone menu ("Mobile navigation / 390"
 * 10:9312), the phone's fixed button ("Fixed CTA · Request these dates" 10:8622) and footer
 * ("M15 Mega footer" 10:6412) with the "Letters from the lake" newsletter. The same markup is
 * printed by the site header and footer widgets inside Elementor templates and by the theme's
 * own templates. Loaded on every page (sw_page_parts()).
 */

/* ------------------------------------------------------------------ */
/* Header: 72 high, mist, wordmark left, links and the ink button right */
/* ------------------------------------------------------------------ */

.sw-main:focus {
	outline: 0;
}

.sw-header {
	position: relative;
	z-index: 50;
	background: var(--sw-header-bg, var(--sw-c-mist));
	color: var(--sw-header-text, var(--sw-c-ink));
	font-family: var(--sw-sans);
}

.sw-header ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.sw-header__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	height: 72px;
}

/* Wordmark: Instrument Serif h3 28/36. */
.sw-logo {
	display: flex;
	align-items: center;
	min-height: 44px;
	color: inherit;
	font-family: var(--sw-serif);
	font-size: var(--sw-fs-h3);
	line-height: var(--sw-lh-h3);
	font-weight: 400;
	text-decoration: none;
	white-space: nowrap;
}

.sw-logo--image a {
	display: flex;
	align-items: center;
}

.sw-logo--image img {
	display: block;
	width: auto;
	max-height: 36px;
}

/* "Links" frame: the four links and the button in one row, 12 apart (834: 8). */
.sw-header__links {
	display: flex;
	align-items: center;
	gap: 12px;
}

.sw-nav__list {
	display: flex;
	align-items: center;
	gap: 12px;
}

/* Link boxes 44 high, the text 16 from either side (PLAN.md B3 Q10f: "Local guide" too). */
.sw-nav__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0 16px;
	color: inherit;
	font-size: var(--sw-fs-small);
	line-height: var(--sw-lh-small);
	font-weight: 400;
	text-decoration: none;
	white-space: nowrap;
}

/* "Plan your stay": 158 x 48 at 1440 (text 110 + 24 either side), 134 at 834. */
.sw-header__cta {
	flex: none;
	white-space: nowrap;
}

.sw-header__toggle {
	display: none;
}

@media (max-width: 1024px) {
	.sw-header__links,
	.sw-nav__list {
		gap: 8px;
	}

	.sw-header__cta {
		padding: 0 12px;
	}
}

@media (max-width: 767px) {
	.sw-header__links {
		display: none;
	}

	/* "Menu": the ink button, 90 x 48; the same button while the menu is open (Q12). */
	.sw-js .sw-header__toggle {
		display: inline-flex;
		flex: none;
		margin: 0;
		font-family: var(--sw-sans);
	}

	.sw-header__toggle-close,
	.sw-header__toggle[aria-expanded="true"] .sw-header__toggle-open {
		display: none;
	}

	.sw-header__toggle[aria-expanded="true"] .sw-header__toggle-close {
		display: inline;
	}

	/* Without JavaScript the menu cannot open: the links wrap under the wordmark instead. */
	html:not(.sw-js) .sw-header__bar {
		flex-wrap: wrap;
		height: auto;
		min-height: 72px;
		padding: 12px 0;
	}

	html:not(.sw-js) .sw-header__links {
		display: flex;
		flex-wrap: wrap;
	}

	html:not(.sw-js) .sw-nav__list {
		flex-wrap: wrap;
	}
}

/* ------------------------------------------------------------------ */
/* Phone menu: five outlined buttons in place of the page content      */
/* ------------------------------------------------------------------ */

.sw-menu[hidden] {
	display: none;
}

/* "Navigation choices": padding 64 / 20, buttons 350 x 48, 24 apart. */
.sw-menu__nav {
	padding: 64px 0;
}

.sw-menu__list {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.sw-menu__link {
	width: 100%;
}

/* While open the page content and the fixed button give way; the footer stays, as in the frame. */
@media (max-width: 767px) {
	html.sw-menu-open .sw-main,
	html.sw-menu-open .sw-sticky-cta {
		display: none;
	}
}

@media (min-width: 768px) {
	.sw-menu {
		display: none;
	}
}

/* ------------------------------------------------------------------ */
/* Phone: button fixed to the bottom of the screen                     */
/* ------------------------------------------------------------------ */

.sw-sticky-cta {
	display: none;
}

/* 76 high, white, a line on the top edge (PLAN.md B3 Q15), padding 14 / 20; the button is ink (Q13). */
@media (max-width: 767px) {
	.sw-sticky-cta {
		position: fixed;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 40;
		display: block;
		padding: 14px var(--sw-gutter);
		border-top: 1px solid var(--sw-c-line);
		background: var(--sw-sticky-bg, var(--sw-c-white));
	}

	.sw-sticky-cta .sw-btn--primary {
		background: var(--sw-c-ink);
		color: var(--sw-c-white);
	}

	/* Room for the bar, so it never covers the end of the footer (the 390 frames end with 76). */
	body:has(.sw-sticky-cta) {
		padding-bottom: 76px;
	}
}

/* ------------------------------------------------------------------ */
/* Footer: ink, white and pale text                                    */
/* ------------------------------------------------------------------ */

.sw-footer {
	padding: var(--sw-footer-pad-t, 96px) 0 var(--sw-footer-pad-b, 48px);
	background: var(--sw-footer-bg, var(--sw-c-ink));
	color: var(--sw-footer-text, var(--sw-c-white));
	font-family: var(--sw-sans);
	font-size: var(--sw-fs-body);
	line-height: var(--sw-lh-body);
}

.sw-footer h2,
.sw-footer p,
.sw-footer ul {
	margin: 0;
}

.sw-footer ul {
	padding: 0;
	list-style: none;
}

.sw-footer a {
	color: inherit;
}

.sw-footer :focus-visible {
	outline-color: var(--sw-c-white);
}

/* Brand 360 beside the four columns (168, 168, 168, 240), 24 apart. */
.sw-footer__top {
	display: grid;
	grid-template-columns: minmax(0, 360fr) minmax(0, 816fr);
	gap: 48px 24px;
}

.sw-footer__brand {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
	min-width: 0;
}

/* Wordmark: h1 56/64 white (390: h2 36/44). */
.sw-footer .sw-logo--footer {
	display: inline-block;
	min-height: 0;
	font-size: var(--sw-fs-h1);
	line-height: var(--sw-lh-h1);
	white-space: normal;
}

.sw-footer .sw-footer__promise {
	font-size: var(--sw-fs-body-lg);
	line-height: var(--sw-lh-body-lg);
}

.sw-footer .sw-footer__promise,
.sw-footer .sw-news__text,
.sw-footer .sw-news__label,
.sw-footer .sw-news__note,
.sw-footer .sw-news__again,
.sw-footer .sw-news__check,
.sw-footer .sw-footer__heading,
.sw-footer .sw-footer__contact,
.sw-footer .sw-footer__legal {
	color: var(--sw-footer-muted, var(--sw-c-pale));
}

/* Newsletter (Figma "STILLWATER/Newsletter" 4:129, Sent 4:138): title, intro, label, field row, 12 apart. */
.sw-news {
	width: 100%;
	min-width: 0;
}

.sw-news__title {
	color: inherit;
	font-family: var(--sw-serif);
	font-size: var(--sw-fs-h3);
	line-height: var(--sw-lh-h3);
	font-weight: 400;
}

.sw-footer .sw-news__text,
.sw-footer .sw-news__form {
	margin-top: 12px;
}

.sw-news__text,
.sw-news__label,
.sw-news__note {
	font-size: var(--sw-fs-small);
	line-height: var(--sw-lh-small);
}

.sw-news__label {
	display: block;
}

.sw-news__form[hidden],
.sw-news__sent[hidden] {
	display: none;
}

.sw-news__row {
	display: flex;
	gap: 8px;
	margin-top: 12px;
}

/* Field 48 high, white, radius 8, padding 0 / 16; the placeholder is ink in Figma. */
.sw-news__input {
	flex: 1 1 auto;
	min-width: 0;
	min-height: 48px;
	margin: 0;
	padding: 0 16px;
	border: 0;
	border-radius: var(--sw-radius-control);
	background: var(--sw-c-white);
	color: var(--sw-c-ink);
	font-family: var(--sw-sans);
	font-size: var(--sw-fs-body);
	line-height: var(--sw-lh-body);
}

.sw-news__input::placeholder {
	color: var(--sw-c-ink);
	opacity: 1;
}

/* "Subscribe": 118 x 48, white with ink text (text 78 + 20 either side). */
.sw-footer .sw-news__submit {
	flex: none;
	padding: 0 20px;
	background: var(--sw-c-white);
	color: var(--sw-c-ink);
}

.sw-footer .sw-news__note {
	margin-top: 8px;
}

.sw-news__note:empty {
	display: none;
}

.sw-news__sent {
	margin-top: 12px;
}

.sw-news__sent:focus {
	outline: 0;
}

/* Sent: check (pale stroke) + the thanks line (body, white), then "Use another address". */
.sw-news__message {
	display: flex;
	align-items: flex-start;
	gap: 12px;
}

.sw-news__check {
	flex: none;
}

.sw-footer .sw-news__again {
	display: inline-flex;
	margin-top: 12px;
	align-items: center;
	min-height: 44px;
	font-size: var(--sw-fs-small);
	line-height: var(--sw-lh-small);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

.sw-footer__cols {
	display: grid;
	grid-template-columns: 168fr 168fr 168fr 240fr;
	gap: 32px 24px;
	align-content: start;
	min-width: 0;
}

.sw-footer__col {
	min-width: 0;
}

/* Column heading: label 12/16, 8 above the first link. */
.sw-footer .sw-footer__heading {
	margin-bottom: 8px;
	font-family: var(--sw-sans);
	font-size: var(--sw-fs-label);
	line-height: var(--sw-lh-label);
	font-weight: 600;
	text-transform: uppercase;
}

/* Links: body 16 white, not underlined, 44 high. */
.sw-footer__links a {
	display: flex;
	align-items: center;
	min-height: 44px;
	text-decoration: none;
	overflow-wrap: anywhere;
}

/* Contact lines: small 14/20 in 28 boxes. */
.sw-footer__contact {
	font-size: var(--sw-fs-small);
	line-height: var(--sw-lh-small);
}

.sw-footer__contact li {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	padding: 4px 0;
}

.sw-footer__icon {
	flex: none;
	width: 20px;
	height: 20px;
}

/* Rule 64 under the columns, legal line 64 under the rule. */
.sw-footer .sw-footer__legal {
	margin-top: var(--sw-footer-gap, 64px);
	padding-top: var(--sw-footer-gap, 64px);
	border-top: 1px solid var(--sw-c-line);
	font-size: var(--sw-fs-small);
	line-height: var(--sw-lh-small);
}

/* 834: padding 64 / 40; wordmark, the tagline 12 under it; newsletter, the columns 2 x 2 (373),
   rule and legal 48 apart. */
@media (max-width: 1024px) {
	.sw-footer {
		--sw-footer-gap: 48px;
		padding-top: var(--sw-footer-pad-t, 64px);
		padding-bottom: var(--sw-footer-pad-b, 40px);
	}

	.sw-footer__brand {
		gap: 12px;
	}

	.sw-footer__brand .sw-news {
		margin-top: 36px;
	}

	.sw-footer__top {
		grid-template-columns: minmax(0, 1fr);
	}

	.sw-footer__cols {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* 390: padding 48 / 32, wordmark h2 36/44, columns 2 x 2 (163). */
@media (max-width: 767px) {
	.sw-footer {
		padding-top: var(--sw-footer-pad-t, 48px);
		padding-bottom: var(--sw-footer-pad-b, 32px);
	}

	.sw-footer .sw-logo--footer {
		font-size: var(--sw-fs-h2);
		line-height: var(--sw-lh-h2);
	}
}