/*
 * Villa Olivia shared site header — v3.10.0
 * One geometry/component system across Homepage, Accommodation, Nearby,
 * Contact and Checkout. Light pages use a uniform vertical metallic-grey
 * finish so the header never washes out into white from left to right.
 */

/* =============================
   Shared desktop shell
   ============================= */
.voh-homepage .voh-hero__header,
.voa-header,
.voc .voa-header {
	position: fixed !important;
	z-index: 99980 !important;
	top: clamp(12px, 1.4vw, 24px) !important;
	right: clamp(14px, 1.7vw, 30px) !important;
	bottom: auto !important;
	left: clamp(14px, 1.7vw, 30px) !important;
	display: grid !important;
	grid-template-columns: 1fr auto 1fr !important;
	align-items: center !important;
	width: auto !important;
	height: 68px !important;
	min-height: 68px !important;
	margin: 0 !important;
	padding: 0 clamp(14px, 1.5vw, 27px) !important;
	transform: none !important;
	overflow: hidden !important;
	border: 1px solid rgba(255, 255, 255, .30) !important;
	border-radius: 24px !important;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, .38),
		inset 0 -1px 0 rgba(0, 0, 0, .10),
		0 18px 48px rgba(0, 12, 24, .17) !important;
	-webkit-backdrop-filter: blur(18px) saturate(145%) !important;
	backdrop-filter: blur(18px) saturate(145%) !important;
	color: #fff !important;
}

/* Homepage stays deep and transparent over the hero photography. */
.voh-homepage .voh-hero__header {
	background: rgba(6, 28, 49, .64) !important;
}

/*
 * All light-page headers use the same metallic grey from edge to edge.
 * The gradient only runs vertically, never left-to-right, so the right side
 * cannot fade into white on ivory/white page backgrounds.
 */
.voa-header,
.voc .voa-header {
	background: linear-gradient(
		180deg,
		rgba(129, 138, 147, .97) 0%,
		rgba(105, 115, 124, .97) 48%,
		rgba(88, 98, 107, .98) 100%
	) !important;
}

/* Remove old page-specific reflection/radial layers that caused uneven washout. */
.voa-header::before,
.voa-header::after,
.voc .voa-header::before,
.voc .voa-header::after,
.voh-homepage .voh-hero__header::before,
.voh-homepage .voh-hero__header::after {
	content: none !important;
	display: none !important;
}

.voh-homepage .voh-hero__header > *,
.voa-header > *,
.voc .voa-header > * {
	position: relative !important;
	z-index: 1 !important;
}

body.admin-bar .voh-homepage .voh-hero__header,
body.admin-bar .voa-header,
body.admin-bar .voc .voa-header {
	top: calc(32px + clamp(12px, 1.4vw, 24px)) !important;
}

/* =============================
   Brand / monogram
   ============================= */
.voh-homepage .voh-hero__monogram,
.voa-header__brand,
.voc .voa-header__brand {
	display: grid !important;
	width: 46px !important;
	height: 46px !important;
	min-width: 46px !important;
	min-height: 46px !important;
	place-items: center !important;
	justify-self: start !important;
	border: 1px solid rgba(255, 255, 255, .22) !important;
	border-radius: 50% !important;
	background: rgba(255, 255, 255, .08) !important;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .20) !important;
	color: #fff !important;
	font-size: 18px !important;
	font-weight: 500 !important;
	line-height: 1 !important;
	letter-spacing: -.13em !important;
	text-decoration: none !important;
}

.voh-homepage .voh-hero__monogram span,
.voa-header__brand span,
.voc .voa-header__brand span {
	position: relative !important;
}

.voh-homepage .voh-hero__monogram span::before,
.voh-homepage .voh-hero__monogram span::after,
.voa-header__brand span::before,
.voa-header__brand span::after,
.voc .voa-header__brand span::before,
.voc .voa-header__brand span::after {
	position: absolute !important;
	right: -7px !important;
	left: -9px !important;
	height: 1px !important;
	content: "" !important;
	background: currentColor !important;
}

.voh-homepage .voh-hero__monogram span::before,
.voa-header__brand span::before,
.voc .voa-header__brand span::before {
	top: 6px !important;
	transform: rotate(3deg) !important;
}

.voh-homepage .voh-hero__monogram span::after,
.voa-header__brand span::after,
.voc .voa-header__brand span::after {
	bottom: 6px !important;
	transform: rotate(-2deg) !important;
}

/* =============================
   Desktop navigation
   ============================= */
.voh-homepage .voh-hero__desktop-nav,
.voa-header__nav,
.voc .voa-header__nav {
	display: flex !important;
	align-items: center !important;
	gap: clamp(8px, .7vw, 13px) !important;
	margin: 0 !important;
	padding: 5px !important;
	border: 1px solid rgba(255, 255, 255, .14) !important;
	border-radius: 999px !important;
	background: rgba(20, 28, 35, .20) !important;
}

.voh-homepage .voh-hero__desktop-nav a,
.voa-header__nav a,
.voc .voa-header__nav a {
	position: relative !important;
	padding: 10px 15px !important;
	border-radius: 999px !important;
	background: transparent !important;
	color: #fff !important;
	font-size: 16px !important;
	font-weight: 500 !important;
	line-height: 1 !important;
	opacity: 1 !important;
	text-decoration: none !important;
	transition: background .25s ease, opacity .25s ease !important;
}

.voh-homepage .voh-hero__desktop-nav a::after,
.voa-header__nav a::after,
.voc .voa-header__nav a::after {
	display: none !important;
}

.voh-homepage .voh-hero__desktop-nav a:hover,
.voh-homepage .voh-hero__desktop-nav a.is-active,
.voa-header__nav a:hover,
.voa-header__nav a.is-active,
.voc .voa-header__nav a:hover,
.voc .voa-header__nav a.is-active {
	background: rgba(255, 255, 255, .15) !important;
	color: #fff !important;
	opacity: 1 !important;
}

/* =============================
   Actions / language / CTA
   ============================= */
.voh-homepage .voh-hero__header-actions,
.voa-header__actions,
.voc .voa-header__actions {
	display: flex !important;
	align-items: center !important;
	justify-self: end !important;
	gap: 15px !important;
}

.voh-homepage .voh-hero__language,
.voa-header__language,
.voc .voa-header__language {
	color: #fff !important;
	font-size: 16px !important;
	font-weight: 500 !important;
	line-height: 1 !important;
	opacity: 1 !important;
	text-decoration: none !important;
}

.voh-homepage .voh-hero__book-pill,
.voa-header .voa-pill,
.voc .voa-header .voa-pill {
	display: inline-flex !important;
	min-width: 0 !important;
	min-height: 42px !important;
	height: 42px !important;
	padding: 0 6px 0 17px !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 14px !important;
	border: 1px solid rgba(255, 255, 255, .62) !important;
	border-radius: 999px !important;
	background: rgba(255, 255, 255, .94) !important;
	box-shadow: inset 0 1px 0 #fff, 0 8px 22px rgba(0, 15, 30, .14) !important;
	color: #111820 !important;
	font-size: 16px !important;
	font-weight: 500 !important;
	line-height: 1 !important;
	white-space: nowrap !important;
	text-decoration: none !important;
}

.voh-homepage .voh-hero__book-pill .voh-hero__round-arrow,
.voa-header .voa-pill span,
.voa-header .voa-pill i,
.voc .voa-header .voa-pill span,
.voc .voa-header .voa-pill i {
	display: grid !important;
	width: 34px !important;
	height: 34px !important;
	min-width: 34px !important;
	min-height: 34px !important;
	place-items: center !important;
	border-radius: 50% !important;
	background: #061d31 !important;
	color: #fff !important;
}

/* ============================================================
   v3.10.2 — restore the proven v3.9.9 tablet/mobile header.
   Desktop shared header above stays untouched. On phones/tablets,
   desktop navigation is removed and the original compact MENU pill
   returns exactly as in the pre-unification plugin.
   ============================================================ */
@media (max-width: 1024px) {
	.voh-homepage .voh-hero__header,
	.voh-homepage > .voh-hero__header,
	.voh-hero__header,
	.voa-header,
	.voa .voa-header,
	.voc .voa-header {
		position: fixed !important;
		top: max(9px, env(safe-area-inset-top)) !important;
		right: 10px !important;
		left: 10px !important;
		bottom: auto !important;
		width: auto !important;
		height: 60px !important;
		min-height: 60px !important;
		grid-template-columns: 1fr auto !important;
		padding: 7px 8px 7px 16px !important;
		transform: none !important;
		border-radius: 20px !important;
		overflow: hidden !important;
	}

	/* Original glass treatment used on the homepage hero. */
	.voh-homepage .voh-hero__header,
	.voh-homepage > .voh-hero__header,
	.voh-hero__header {
		background: linear-gradient(115deg, rgba(6, 29, 49, .60), rgba(255, 255, 255, .14)) !important;
		border: 1px solid rgba(255, 255, 255, .32) !important;
		box-shadow: 0 18px 55px rgba(4, 22, 38, .19), inset 0 1px 0 rgba(255, 255, 255, .42) !important;
		-webkit-backdrop-filter: blur(18px) saturate(150%) !important;
		backdrop-filter: blur(18px) saturate(150%) !important;
	}

	/* Original dark liquid-glass header on inner pages. */
	.voa-header,
	.voa .voa-header,
	.voc .voa-header {
		background: linear-gradient(115deg, rgba(255, 255, 255, .17), rgba(255, 255, 255, .045) 38%, rgba(255, 255, 255, .09)), rgba(6, 28, 49, .72) !important;
		border: 1px solid rgba(255, 255, 255, .26) !important;
		box-shadow: inset 0 1px 0 rgba(255, 255, 255, .34), inset 0 -1px 0 rgba(255, 255, 255, .06), 0 18px 48px rgba(0, 12, 24, .20) !important;
		-webkit-backdrop-filter: blur(20px) saturate(165%) !important;
		backdrop-filter: blur(20px) saturate(165%) !important;
	}

	body.admin-bar .voh-homepage .voh-hero__header,
	body.admin-bar .voh-homepage > .voh-hero__header,
	body.admin-bar .voh-hero__header,
	body.admin-bar .voa-header,
	body.admin-bar .voa .voa-header,
	body.admin-bar .voc .voa-header {
		top: calc(46px + max(9px, env(safe-area-inset-top))) !important;
	}

	/* Never allow the desktop navigation back onto a phone/tablet. */
	.voh-homepage .voh-hero__desktop-nav,
	.voh-hero__desktop-nav,
	.voh-homepage .voh-hero__language,
	.voh-hero__language,
	.voh-homepage .voh-hero__book-pill,
	.voh-hero__book-pill,
	.voa-header__nav,
	.voa .voa-header__nav,
	.voc .voa-header__nav,
	.voa-header__language,
	.voa .voa-header__language,
	.voc .voa-header__language,
	.voa-header .voa-pill,
	.voa .voa-header .voa-pill,
	.voc .voa-header .voa-pill {
		display: none !important;
	}

	/* Original compact round monogram. */
	.voh-homepage .voh-hero__monogram,
	.voh-hero__monogram,
	.voa-header__brand,
	.voa .voa-header__brand,
	.voc .voa-header__brand {
		display: grid !important;
		width: 42px !important;
		height: 42px !important;
		min-width: 42px !important;
		min-height: 42px !important;
		place-items: center !important;
		justify-self: start !important;
	}

	/* Exact v3.9.9 MENU pill. */
	.voh-hero__menu-button,
	.voh-homepage .voh-hero__menu-button,
	.voa-header__menu,
	.voa .voa-header__menu,
	.voc .voa-header__menu {
		position: relative !important;
		display: block !important;
		justify-self: end !important;
		width: 88px !important;
		height: 44px !important;
		min-width: 88px !important;
		min-height: 44px !important;
		padding: 0 36px 0 14px !important;
		border: 0 !important;
		border-radius: 999px !important;
		background: #0d4f7c !important;
		box-shadow: none !important;
		color: #fff !important;
	}

	.voh-hero__menu-button::before,
	.voh-homepage .voh-hero__menu-button::before,
	.voa-header__menu::before,
	.voa .voa-header__menu::before,
	.voc .voa-header__menu::before {
		content: "MENU" !important;
		display: block !important;
		position: static !important;
		width: auto !important;
		height: auto !important;
		background: transparent !important;
		color: #fff !important;
		font-size: 11px !important;
		font-weight: 750 !important;
		line-height: 1 !important;
		letter-spacing: .07em !important;
		transform: none !important;
	}

	.voh-hero__menu-button::after,
	.voh-homepage .voh-hero__menu-button::after {
		content: none !important;
		display: none !important;
	}

	.voh-hero__menu-button span,
	.voh-homepage .voh-hero__menu-button span,
	.voa-header__menu i,
	.voa .voa-header__menu i,
	.voc .voa-header__menu i {
		position: absolute !important;
		right: 12px !important;
		left: auto !important;
		display: block !important;
		width: 18px !important;
		height: 1px !important;
		margin: 0 !important;
		background: #fff !important;
		transform: none !important;
	}

	.voh-hero__menu-button span:first-child,
	.voh-homepage .voh-hero__menu-button span:first-child,
	.voa-header__menu i:first-child,
	.voa .voa-header__menu i:first-child,
	.voc .voa-header__menu i:first-child {
		top: 17px !important;
	}

	.voh-hero__menu-button span:last-child,
	.voh-homepage .voh-hero__menu-button span:last-child,
	.voa-header__menu i:last-child,
	.voa .voa-header__menu i:last-child,
	.voc .voa-header__menu i:last-child {
		top: 25px !important;
	}
}

@media (max-width: 767px) {
	.voh-homepage .voh-hero__header,
	.voh-homepage > .voh-hero__header,
	.voh-hero__header,
	.voa-header,
	.voa .voa-header,
	.voc .voa-header {
		height: 58px !important;
		min-height: 58px !important;
		border-radius: 19px !important;
	}
}

/* ============================================================
   v3.10.7 — full Villa Olivia wordmark in every shared header.
   The bundled transparent white logo replaces the legacy VO text mark.
   ============================================================ */
.voh-homepage .voh-hero__monogram,
.voa-header__brand,
.voa .voa-header__brand,
.voc .voa-header__brand {
	display: flex !important;
	width: clamp(154px, 10.4vw, 178px) !important;
	height: 44px !important;
	min-width: clamp(154px, 10.4vw, 178px) !important;
	min-height: 44px !important;
	padding: 0 !important;
	align-items: center !important;
	justify-content: flex-start !important;
	justify-self: start !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	overflow: visible !important;
	text-decoration: none !important;
}

.voh-header-logo {
	display: block !important;
	width: 100% !important;
	height: auto !important;
	max-width: 100% !important;
	max-height: 32px !important;
	margin: 0 !important;
	object-fit: contain !important;
	object-position: left center !important;
}

@media (max-width: 1024px) {
	.voh-homepage .voh-hero__monogram,
	.voh-hero__monogram,
	.voa-header__brand,
	.voa .voa-header__brand,
	.voc .voa-header__brand {
		width: 142px !important;
		height: 38px !important;
		min-width: 142px !important;
		min-height: 38px !important;
	}

	.voh-header-logo {
		max-height: 27px !important;
	}
}

@media (max-width: 360px) {
	.voh-homepage .voh-hero__monogram,
	.voh-hero__monogram,
	.voa-header__brand,
	.voa .voa-header__brand,
	.voc .voa-header__brand {
		width: 126px !important;
		min-width: 126px !important;
	}

	.voh-header-logo {
		max-height: 24px !important;
	}
}