/*
 * Header and footer — patterns/chrome-header.php, patterns/chrome-footer.php.
 *
 * Values lifted from Home.dc.html / HomeMobile.dc.html (overlay header,
 * footer) and Villa.dc.html / VillaMobile.dc.html (solid header). Tokens where
 * one exists: body-s 15px, body-xs 14px, caption 13px, brand, brand-deep, ink,
 * line, white. What has no token is written as the artboard writes it:
 * - the wordmark sizes (27/30/22/26px, tagline 9/8/7px);
 * - the footer's text colour #B9C1CC and its white-alpha hairlines;
 * - the 12px column headings (the eyebrow token is 11px at phone width, the
 *   artboard keeps 12);
 * - line-height: the artboards leave most chrome text at the browser's
 *   `normal`, not the theme's 1.7, and a footer column is a stack of lines,
 *   so matching the artboard's height means matching that.
 *
 * Breakpoints: the menu folds into the panel below 1024px (the row stops
 * fitting at about 960px); phone sizes below 782px, core's own stacking
 * breakpoint.
 */

/* ---------------------------------------------------------------------------
 * Seams. Declaring blockGap makes core put 24px above every .wp-site-blocks
 * child but the first; theme.css zeroes that for .alignfull bands, but the
 * template-part wrappers and <main> are not bands. The artboards butt header,
 * body and footer edge to edge.
 * ------------------------------------------------------------------------ */
:root :where( .wp-site-blocks ) > .wp-block-template-part,
:root :where( .wp-site-blocks ) > header.wp-block-template-part + * {
	margin-block-start: 0;
}

.mvr-header > *,
.mvr-header-menu > *,
.mvr-footer > * {
	margin-block: 0;
}

/* ---------------------------------------------------------------------------
 * The wordmark (header and footer). Live text, per design-language.md.
 * theme.css gives .mvr-logo line-height 0 (for an image logo); every line
 * here sets its own.
 * ------------------------------------------------------------------------ */
.mvr-logo {
	color: inherit;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 3px;
	text-decoration: none;
}

.mvr-logo:hover {
	color: inherit;
}

.mvr-logo-name {
	font-family: var( --wp--preset--font-family--display );
	font-size: 27px;
	font-weight: 400;
	letter-spacing: 0.01em;
	line-height: 1;
}

.mvr-logo-line {
	font-size: 9px;
	font-weight: 600;
	letter-spacing: 0.42em;
	line-height: normal;
	opacity: 0.85;
	text-transform: uppercase;
}

/* ===========================================================================
 * HEADER
 * ======================================================================== */
.mvr-header {
	--mvr-header-fg: var( --wp--preset--color--ink );
	--mvr-book-bg: var( --wp--preset--color--brand );
	--mvr-book-fg: var( --wp--preset--color--white );
	align-items: center;
	background: var( --wp--preset--color--white );
	border-bottom: 1px solid var( --wp--preset--color--line );
	box-sizing: border-box;
	color: var( --mvr-header-fg );
	display: flex;
	height: 92px;
	justify-content: space-between;
	line-height: normal;
	padding: 0 max( var( --wp--preset--spacing--gutter ), calc( ( 100% - 1200px ) / 2 ) );
	position: relative;
	z-index: 20;
}

/*
 * Overlay: the page body opens with a hero band. Transparent, white, laid
 * over the hero — Home, Location, Calheta and Contact on the canvas.
 */
.wp-site-blocks:has( .wp-block-post-content > .mvr-hero:first-child ) .mvr-header:not( .is-menu-open ) {
	--mvr-header-fg: var( --wp--preset--color--white );
	--mvr-book-bg: var( --wp--preset--color--white );
	--mvr-book-fg: var( --wp--preset--color--brand );
	background: transparent;
	border-bottom-color: transparent;
}

.wp-site-blocks:has( .wp-block-post-content > .mvr-hero:first-child ) .mvr-header {
	left: 0;
	position: absolute;
	right: 0;
	top: 0;
}

/*
 * Logged in, WordPress pushes the page down by the admin bar's height (32px,
 * 46px up to 782px wide) and publishes it as a variable. An absolute header
 * measures from the page's top edge instead, so without this it sits under
 * the bar. At any width the bar and this header both start at the top of the
 * document, so the same offset holds whether the bar is fixed or scrolls.
 */
.admin-bar .wp-site-blocks:has( .wp-block-post-content > .mvr-hero:first-child ) .mvr-header {
	top: var( --wp-admin--admin-bar--height, 0px );
}

.mvr-header .mvr-logo {
	flex: none;
}

/* Desktop: the menu wrapper dissolves, so nav and button are row items. */
.mvr-header-menu {
	display: contents;
}

.mvr-header .mvr-nav {
	font-size: var( --wp--preset--font-size--body-s );
	font-weight: 600;
	letter-spacing: 0.02em;
	margin-inline: auto;
	order: 2;
}

.mvr-header .mvr-nav .wp-block-navigation__container {
	gap: 40px;
}

/* Core prints a chevron beside a click-to-open submenu even with
   showSubmenuIcon off; the artboard draws "Locations" as a plain word. */
.mvr-header .mvr-nav .wp-block-navigation__submenu-icon {
	display: none;
}

.mvr-header .mvr-nav .wp-block-navigation-item__content,
.mvr-header .mvr-nav .wp-block-navigation-submenu__toggle {
	background: none;
	border: 0;
	color: var( --mvr-header-fg );
	cursor: pointer;
	font: inherit;
	letter-spacing: inherit;
	padding: 0;
}

.mvr-header .mvr-nav .wp-block-navigation-item__content:hover {
	text-decoration: underline;
	text-underline-offset: 6px;
}

.mvr-header .mvr-nav .wp-block-navigation__submenu-container {
	background: var( --wp--preset--color--white );
	border: 1px solid var( --wp--preset--color--line );
	border-radius: 2px;
	min-width: 180px;
	padding: 8px 0;
	top: calc( 100% + 12px );
}

.mvr-header .mvr-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	color: var( --wp--preset--color--ink );
	padding: 8px 20px;
}

.mvr-header-actions {
	align-items: center;
	display: flex;
	flex: none;
	gap: 24px;
	order: 3;
}

.mvr-header-book {
	background: var( --mvr-book-bg );
	border-radius: 2px;
	color: var( --mvr-book-fg );
	flex: none;
	font-size: var( --wp--preset--font-size--body-xs );
	font-weight: 700;
	letter-spacing: 0.12em;
	line-height: normal;
	margin-inline-start: 24px;
	order: 4;
	padding: 14px 24px;
	text-transform: uppercase;
}

.mvr-header-book:hover,
.mvr-header-book:focus {
	background: var( --mvr-book-bg );
	color: var( --mvr-book-fg );
	opacity: 0.88;
}

/* The language switcher. */
.mvr-lang {
	position: relative;
}

.mvr-lang summary {
	align-items: center;
	color: var( --mvr-header-fg );
	cursor: pointer;
	display: flex;
	font-size: var( --wp--preset--font-size--body-xs );
	font-weight: 700;
	gap: 6px;
	letter-spacing: 0.08em;
	list-style: none;
	padding: 0;
}

.mvr-lang summary::-webkit-details-marker {
	display: none;
}

.mvr-lang[open] .mvr-lang-chevron {
	transform: rotate( 180deg );
}

.mvr-lang-list {
	background: var( --wp--preset--color--white );
	border: 1px solid var( --wp--preset--color--line );
	border-radius: 2px;
	list-style: none;
	margin: 0;
	min-width: 180px;
	padding: 8px 0;
	position: absolute;
	right: 0;
	top: calc( 100% + 12px );
	z-index: 30;
}

.mvr-lang-list a {
	color: var( --wp--preset--color--ink );
	display: flex;
	font-size: var( --wp--preset--font-size--body-xs );
	gap: 12px;
	padding: 8px 20px;
}

.mvr-lang-list a[aria-current] {
	font-weight: 700;
}

.mvr-lang-code {
	color: var( --wp--preset--color--muted );
	font-weight: 700;
	letter-spacing: 0.08em;
	min-width: 2em;
}

.mvr-menu-toggle {
	background: none;
	border: 0;
	color: var( --mvr-header-fg );
	cursor: pointer;
	display: none;
	padding: 10px 0 10px 6px;
}

.mvr-menu-toggle svg {
	display: block;
}

.mvr-menu-toggle .mvr-menu-close,
.mvr-header.is-menu-open .mvr-menu-toggle .mvr-menu-bars {
	display: none;
}

.mvr-header.is-menu-open .mvr-menu-toggle .mvr-menu-close {
	display: inline;
}

/* ---------------------------------------------------------------------------
 * Below 1024px: the nav and "Book a stay" move into a panel under the bar,
 * opened by the menu button (assets/js/chrome-menu.js).
 * ------------------------------------------------------------------------ */
@media ( max-width: 1023px ) {
	.mvr-menu-toggle {
		display: flex;
	}

	.mvr-header-actions {
		gap: 14px;
		margin-inline-start: auto;
	}

	.mvr-header-menu {
		background: var( --wp--preset--color--white );
		box-sizing: border-box;
		display: none;
		flex-direction: column;
		gap: var( --wp--preset--spacing--m );
		inset: 100% 0 auto;
		max-height: calc( 100vh - 100% );
		overflow-y: auto;
		padding-block: var( --wp--preset--spacing--m ) var( --wp--preset--spacing--l );
		padding-inline: inherit;
		position: absolute;
		border-top: 1px solid var( --wp--preset--color--line );
		border-bottom: 1px solid var( --wp--preset--color--line );
	}

	.mvr-header.is-menu-open .mvr-header-menu {
		display: flex;
	}

	/* The open menu stops at the bottom of the screen, less the admin bar when logged in. */
	.admin-bar .mvr-header-menu {
		max-height: calc( 100vh - 100% - var( --wp-admin--admin-bar--height, 0px ) );
	}

	.mvr-header .mvr-nav {
		font-family: var( --wp--preset--font-family--display );
		font-size: var( --wp--preset--font-size--display-s );
		font-weight: 400;
		letter-spacing: 0;
		margin-inline: 0;
	}

	.mvr-header .mvr-nav .wp-block-navigation__container {
		align-items: flex-start;
		flex-direction: column;
		gap: 16px;
	}

	.mvr-header .mvr-nav .wp-block-navigation-item__content,
	.mvr-header .mvr-nav .wp-block-navigation-submenu__toggle {
		color: var( --wp--preset--color--ink );
	}

	.mvr-header .mvr-nav .wp-block-navigation-submenu__toggle {
		cursor: default;
		pointer-events: none;
	}

	/* Submenus are always open in the panel, under their label. */
	.mvr-header .mvr-nav .has-child {
		align-items: flex-start;
		flex-direction: column;
	}

	.mvr-header .mvr-nav .has-child .wp-block-navigation__submenu-container {
		background: none;
		border: 0;
		gap: 12px;
		height: auto;
		min-width: 0;
		opacity: 1;
		overflow: visible;
		padding: 12px 0 0 20px;
		position: static;
		visibility: visible;
		width: auto;
	}

	.mvr-header .mvr-nav .has-child .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
		font-size: var( --wp--preset--font-size--heading );
		padding: 0;
	}

	.mvr-header-book {
		--mvr-book-bg: var( --wp--preset--color--brand );
		--mvr-book-fg: var( --wp--preset--color--white );
		align-self: stretch;
		margin-inline-start: 0;
		text-align: center;
	}
}

/* Phone: the mobile artboards' bar. */
@media ( max-width: 781px ) {
	.mvr-header {
		height: 68px;
		padding-inline: 20px;
	}

	.mvr-header .mvr-logo-name {
		font-size: 22px;
	}

	.mvr-header .mvr-logo-line {
		font-size: 7px;
	}

	.mvr-lang summary {
		font-size: var( --wp--preset--font-size--caption );
		gap: 4px;
		padding: 12px 0;
	}

	.mvr-lang-globe {
		display: none;
	}

	.mvr-lang-chevron {
		height: 12px;
		width: 12px;
	}

	.mvr-lang-list {
		top: 100%;
	}
}

/* ===========================================================================
 * FOOTER
 * ======================================================================== */
.mvr-footer {
	--mvr-footer-fg: #B9C1CC;
	background: var( --wp--preset--color--brand-deep );
	box-sizing: border-box;
	color: var( --mvr-footer-fg );
	display: flex;
	flex-direction: column;
	gap: 64px;
	line-height: normal;
	padding: 88px max( var( --wp--preset--spacing--gutter ), calc( ( 100% - 1200px ) / 2 ) ) 40px;
}

.mvr-footer a {
	text-decoration: none;
}

.mvr-footer-grid {
	display: grid;
	gap: 48px;
	grid-template-columns: repeat( 4, minmax( 0, 1fr ) );
}

.mvr-footer-brand {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.mvr-footer .mvr-logo {
	color: var( --wp--preset--color--white );
}

.mvr-footer .mvr-logo-name {
	font-size: 30px;
}

.mvr-footer-contact {
	display: flex;
	flex-direction: column;
	font-size: var( --wp--preset--font-size--body-s );
	gap: 10px;
	line-height: 1.5;
}

.mvr-footer-contact-link,
.mvr-footer-contact-link:hover {
	align-items: center;
	color: var( --wp--preset--color--white );
	display: flex;
	gap: 10px;
}

.mvr-footer-contact-link svg {
	flex: none;
}

.mvr-footer-note {
	font-size: var( --wp--preset--font-size--caption );
}

.mvr-footer-col {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.mvr-footer-heading {
	color: var( --wp--preset--color--white );
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.22em;
	margin: 0 0 4px;
	text-transform: uppercase;
}

.mvr-footer-link {
	color: var( --mvr-footer-fg );
	font-size: var( --wp--preset--font-size--body-s );
}

a.mvr-footer-link:hover {
	color: var( --wp--preset--color--white );
}

.mvr-footer-legal {
	align-items: flex-end;
	border-top: 1px solid rgba( 255, 255, 255, 0.14 );
	display: flex;
	font-size: var( --wp--preset--font-size--caption );
	gap: 32px;
	justify-content: space-between;
	line-height: 1.6;
	padding-top: 28px;
}

.mvr-footer-legal p {
	margin: 0;
}

.mvr-footer-credit a,
.mvr-footer-credit a:hover {
	color: var( --wp--preset--color--white );
	font-weight: 700;
	letter-spacing: 0.06em;
}

/* Focus rings on the dark band. */
.mvr-footer :focus-visible {
	outline-color: var( --wp--preset--color--white );
}

@media ( max-width: 781px ) {
	.mvr-footer {
		gap: 40px;
		padding: 56px var( --wp--preset--spacing--gutter ) 32px;
	}

	.mvr-footer-grid {
		gap: 40px 16px;
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	}

	.mvr-footer-brand,
	.mvr-footer-col-legal {
		grid-column: 1 / -1;
	}

	.mvr-footer-brand {
		gap: 20px;
	}

	.mvr-footer .mvr-logo-name {
		font-size: 26px;
	}

	.mvr-footer .mvr-logo-line {
		font-size: 8px;
	}

	.mvr-footer-contact {
		gap: 8px;
		line-height: normal;
	}

	.mvr-footer-contact-link {
		padding: 4px 0;
	}

	.mvr-footer-col {
		gap: 0;
	}

	.mvr-footer-link {
		padding: 6px 0;
	}

	.mvr-footer-legal {
		align-items: stretch;
		flex-direction: column;
		gap: 16px;
		padding-top: 24px;
	}

	/* Two whole lines — copyright, then credit — and no dangling "·". */
	.mvr-footer-credit {
		display: flex;
		flex-direction: column;
	}

	.mvr-footer-credit-sep {
		display: none;
	}
}