/*
 * Cookie consent (includes/consent.php). The bar: a slim, full-width strip along the bottom of every screen, in the site's
 * own navy with its film grain and a thin gold line on top, like the footer it sits above (Cody, 2026-11-04: "well designed
 * and feels apart of the website"). Shown only under html.hb-consent-pending, which the inline head script sets before
 * first paint when there is no stored choice. 44 px targets. It never blocks the page.
 *
 * --hb-consent-h (the bar's height, kept by consent.js) lifts everything else that sits at the bottom of the screen, gives
 * the page room to scroll clear of the bar, and keeps keyboard focus above it (WCAG 2.4.11).
 */
.hb-consent {
	--hb-consent-mode: bar;
	display: none;
	position: fixed;
	inset-inline: 0;
	bottom: 0;
	z-index: 60; /* over the sticky booking bars (40), under dialogs and the menu (top layer) */
	box-sizing: border-box;
	max-height: 50vh;
	overflow: auto;
	gap: 8px;
	margin: 0;
	padding: 10px var(--wp--custom--gutter, 20px) calc(10px + env(safe-area-inset-bottom));
	border-top: 1px solid var(--wp--preset--color--gold, #b98a2f);
	background-color: var(--wp--preset--color--navy, #16293a);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.07'/%3E%3C/svg%3E");
	box-shadow: 0 -14px 34px rgba(15, 29, 41, .22);
	color: var(--wp--preset--color--white, #fff);
	font: 400 .875rem/1.45 var(--wp--preset--font-family--body, "Jost", sans-serif);
	text-align: start;
}
.hb-consent-pending .hb-consent {
	display: grid;
	animation: hb-consent-in .5s cubic-bezier(.16, 1, .3, 1) both;
}
/* Rises from below the screen, solid the whole way: no fade, so nothing shows through it. */
@keyframes hb-consent-in {
	from { transform: translateY(100%); }
}
.hb-consent *,
.hb-consent-dlg * { box-sizing: border-box; }
.hb-consent p { margin: 0; color: inherit; font: inherit; }
.hb-consent a,
.hb-consent-dlg a {
	color: var(--wp--preset--color--lantern, #e9d9ae);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}
.hb-consent a:hover,
.hb-consent-dlg a:hover { color: var(--wp--preset--color--white, #fff); }
.hb-consent__btns { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
/* The site's own buttons: thin, uppercase, letter-spaced. */
.hb-consent__btn {
	flex: 1 1 auto;
	min-width: 0;
	min-height: 44px;
	margin: 0;
	padding: 0 14px;
	border: 1px solid var(--wp--preset--color--white, #fff);
	border-radius: var(--wp--custom--radius, 2px);
	background: var(--wp--preset--color--white, #fff);
	color: var(--wp--preset--color--navy, #16293a);
	font: 500 .75rem/1 var(--wp--preset--font-family--body, "Jost", sans-serif);
	letter-spacing: .18em;
	text-transform: uppercase;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease;
}
.hb-consent__btn:hover { background: var(--wp--preset--color--lantern, #e9d9ae); border-color: var(--wp--preset--color--lantern, #e9d9ae); }
.hb-consent__btn--ghost { background: transparent; color: var(--wp--preset--color--white, #fff); }
.hb-consent__btn--ghost:hover { background: transparent; border-color: var(--wp--preset--color--lantern, #e9d9ae); color: var(--wp--preset--color--lantern, #e9d9ae); }
/* Accept and Decline are the same size; Choose is the quieter link beside them. */
.hb-consent .hb-consent__btn:not(.hb-consent__btn--text) { flex: 1 1 0; min-width: 6.25rem; }
.hb-consent__btn--text,
.hb-consent .hb-consent__btn--text {
	flex: 0 0 auto;
	padding-inline: 8px;
	border-color: transparent;
	background: transparent;
	color: var(--wp--preset--color--white, #fff);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-decoration-color: var(--wp--preset--color--gold, #b98a2f);
	text-underline-offset: 6px;
}
.hb-consent__btn--text:hover { background: transparent; border-color: transparent; color: var(--wp--preset--color--lantern, #e9d9ae); }
.hb-consent :focus-visible,
.hb-consent-dlg :focus-visible,
.hb-consent-open:focus-visible {
	outline: 2px solid var(--wp--preset--color--lantern, #e9d9ae);
	outline-offset: 2px;
}

/* The narrowest phones: Accept, Decline and Choose still share one row. */
@media (max-width: 359px) {
	.hb-consent .hb-consent__btn { padding-inline: 6px; letter-spacing: .12em; }
	.hb-consent .hb-consent__btn:not(.hb-consent__btn--text) { min-width: 5rem; }
}
/* Tablets and up: the sentence on the left, the choices on the right. Below this (and at 200% zoom on a laptop) the
   sentence takes the full width, so it stays short. */
@media (min-width: 768px) {
	.hb-consent { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px 24px; }
	.hb-consent .hb-consent__btns { flex-wrap: nowrap; }
	.hb-consent .hb-consent__btn:not(.hb-consent__btn--text) { flex: 0 0 auto; min-width: 7.5rem; }
}
@media (min-width: 900px) {
	.hb-consent { gap: 8px 40px; padding-block: 12px calc(12px + env(safe-area-inset-bottom)); font-size: .9375rem; }
	.hb-consent .hb-consent__btn:not(.hb-consent__btn--text) { min-width: 8.5rem; }
}

/* Largest text, or a narrow screen: the buttons may wrap rather than run off. */
html[data-hb-text] .hb-consent .hb-consent__btns { flex-wrap: wrap; }
html[data-hb-text] .hb-consent .hb-consent__btn { letter-spacing: .12em; }
@media (max-width: 1023px) {
	html[data-hb-text] .hb-consent { grid-template-columns: minmax(0, 1fr); }
}

/* High contrast: no grain; the line stays the mode's yellow through the token. */
html[data-hb-display="high"] .hb-consent { background-image: none; box-shadow: none; border-top-width: 2px; }
html[data-hb-display="high"] .hb-consent .hb-consent__btn--text { text-decoration-color: currentColor; text-decoration-thickness: 2px; }

/* ---------- Everything else moves clear of the bar while it shows ---------- */
/* When the bar goes, the hero's text settles back rather than jumps. */
.hb-consent-on .hb-hero__content,
.hb-consent-on .hb-hero__pause { transition: padding-bottom 400ms cubic-bezier(.16, 1, .3, 1), bottom 400ms cubic-bezier(.16, 1, .3, 1); }
.hb-consent-pending { scroll-padding-bottom: calc(var(--hb-consent-h, 0px) + 16px); }
.hb-consent-pending body { padding-bottom: var(--hb-consent-h, 0px); }
@media (max-width: 899px) {
	.hb-consent-pending .hb-booking-cta.is-sticky { bottom: var(--hb-consent-h, 0px); }
}
@media (max-width: 1023px) {
	.hb-consent-pending .hb-rmap__panel { bottom: var(--hb-consent-h, 0px); }
}
@media (min-width: 1024px) {
	.hb-consent-pending .hb-rmap__panel { max-height: calc(100vh - var(--rm-above, 236px) - var(--hb-consent-h, 0px)); }
}
/* The floating find-your-stay bar. */
.hb-consent-pending .hb-ss__bar { bottom: calc(max(16px, env(safe-area-inset-bottom)) + var(--hb-consent-h, 0px)); }
/* The video hero's pause button and scroll cue; on phones its heading and buttons too. */
@media (min-width: 768px) {
	.hb-consent-pending .hb-hero__pause { bottom: calc(24px + var(--hb-consent-h, 0px)); }
	.hb-consent-pending .hb-hero__scroll { bottom: calc(20px + var(--hb-consent-h, 0px)); }
	.hb-consent-pending .hb-hero__content { padding-bottom: calc(96px + var(--hb-consent-h, 0px)); }
}
@media (max-width: 767px) {
	.hb-consent-pending .hb-hero__content { padding-bottom: calc(max(5svh, 32px) + var(--hb-consent-h, 0px)); }
	.hb-consent-pending .hb-hero--masked .hb-hero__content { padding-bottom: calc(var(--hb-ui, 0px) + max(env(safe-area-inset-bottom, 0px), 0px) + 28px + var(--hb-consent-h, 0px)); }
	.hb-consent-pending .hb-hero--masked .hb-hero__pause { bottom: calc(var(--hb-ui, 0px) + max(env(safe-area-inset-bottom, 0px), 0px) + 30px + var(--hb-consent-h, 0px)); }
}

/* Choose: a modal dialog (focus stays inside; Esc closes), a sheet from the bottom on phones. */
.hb-consent-dlg {
	box-sizing: border-box;
	width: min(100%, 520px);
	max-width: 100%;
	max-height: min(100%, 100dvh);
	margin: auto auto 0;
	padding: 0;
	border: 0;
	border-top: 1px solid var(--wp--preset--color--navy-500, #3d566b);
	border-radius: var(--wp--custom--radius, 2px) var(--wp--custom--radius, 2px) 0 0;
	background: var(--wp--preset--color--navy, #16293a);
	color: var(--wp--preset--color--white, #fff);
	font: 400 15px/1.4 var(--wp--preset--font-family--body, "Jost", sans-serif);
	overflow: auto;
}
.hb-consent-dlg::backdrop { background: rgba(15, 29, 41, .6); }
.hb-consent-dlg[open] { animation: hb-consent-in .3s cubic-bezier(.16, 1, .3, 1) both; }
@media (min-width: 900px) {
	.hb-consent-dlg { margin: auto; border: 1px solid var(--wp--preset--color--navy-500, #3d566b); border-radius: var(--wp--custom--radius, 2px); }
}
.hb-consent-dlg__in {
	position: relative;
	display: grid;
	gap: 14px;
	padding: 20px 18px calc(16px + env(safe-area-inset-bottom));
}
@media (min-width: 900px) { .hb-consent-dlg__in { padding: 28px; } }
.hb-consent-dlg__title {
	margin: 0;
	padding-inline-end: 48px;
	color: inherit;
	font: 400 1.75rem/1.1 var(--wp--preset--font-family--display, "Cormorant Garamond", serif);
}
.hb-consent-dlg__close {
	position: absolute;
	top: 10px;
	right: 10px;
	width: 44px;
	height: 44px;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	color: inherit;
	font: 300 28px/1 var(--wp--preset--font-family--body, "Jost", sans-serif);
	cursor: pointer;
}
.hb-consent-dlg p { margin: 0; color: inherit; }
.hb-consent-dlg__gpc { padding: 10px 12px; border-left: 2px solid var(--wp--preset--color--lantern, #e9d9ae); background: rgba(255, 255, 255, .06); font-size: 14px; }
.hb-consent-dlg__gpc[hidden] { display: none; }
.hb-consent-row {
	position: relative;
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: center;
	gap: 2px 16px;
	min-height: 44px;
	padding: 12px 0;
	border-top: 1px solid var(--wp--preset--color--navy-500, #3d566b);
}
label.hb-consent-row { cursor: pointer; }
.hb-consent-row__name { grid-column: 1; font-weight: 500; }
.hb-consent-row__desc { grid-column: 1; font-size: 14px; color: var(--wp--preset--color--navy-200, #c3d0da); }
.hb-consent-row__always { grid-column: 2; grid-row: 1 / span 2; font-size: 13px; color: var(--wp--preset--color--navy-200, #c3d0da); }
/* The real checkbox covers the switch (still a native, focusable control); the switch is drawn under it. */
.hb-consent-row__input,
.hb-consent-row__switch {
	grid-column: 2;
	grid-row: 1 / span 2;
	width: 52px;
	height: 44px;
	margin: 0;
}
.hb-consent-row__input { position: relative; z-index: 1; opacity: 0; cursor: pointer; }
.hb-consent-row__switch {
	position: relative;
	pointer-events: none;
}
.hb-consent-row__switch::before {
	content: "";
	position: absolute;
	inset: 7px 0;
	border: 2px solid var(--wp--preset--color--white, #fff);
	border-radius: 15px;
	transition: background-color 200ms ease, border-color 200ms ease;
}
.hb-consent-row__switch::after {
	content: "";
	position: absolute;
	top: 12px;
	left: 5px;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--wp--preset--color--white, #fff);
	transition: transform 200ms ease;
}
.hb-consent-row__input:checked + .hb-consent-row__switch::before { background: var(--wp--preset--color--lantern, #e9d9ae); border-color: var(--wp--preset--color--lantern, #e9d9ae); }
.hb-consent-row__input:checked + .hb-consent-row__switch::after { transform: translateX(22px); background: var(--wp--preset--color--navy, #16293a); }
.hb-consent-row__input:focus-visible { outline: none; }
.hb-consent-row__input:focus-visible + .hb-consent-row__switch::before { outline: 2px solid var(--wp--preset--color--lantern, #e9d9ae); outline-offset: 3px; }
.hb-consent-dlg .hb-consent__btns { padding-top: 4px; }
.hb-consent-dlg .hb-consent__btn { flex: 1 1 0; }
.hb-consent-dlg__more { font-size: 14px; }

/* The footer's "Cookie settings": looks like its Privacy · Terms · Accessibility links. Hidden while the banner is off. */
.hb-consent-open {
	display: inline-block;
	margin: 0;
	padding: 12px 0; /* as the links beside it: 12 px + the 20 px line = 44 px */
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	letter-spacing: inherit;
	text-decoration: inherit;
	cursor: pointer;
}
html:not(.hb-consent-on) .hb-consent-open { display: none; }

.hb-consent-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

@media print {
	.hb-consent { display: none !important; }
	.hb-consent-pending body { padding-bottom: 0; }
}
@media (prefers-reduced-motion: reduce) {
	.hb-consent-on .hb-hero__content,
	.hb-consent-on .hb-hero__pause { transition: none; }
	.hb-consent-pending .hb-consent,
	.hb-consent-dlg[open] { animation: none; }
	.hb-consent,
	.hb-consent__btn,
	.hb-consent-row__switch::before,
	.hb-consent-row__switch::after { transition: none; }
}
