/*
 * Contents
 * 1. Bar
 * 2. Stacked
 * 3. Calendar
 * 4. Popovers and mobile sheet
 * 5. Guests stepper
 * 6. Dialog
 * 7. Enquiry form
 * 8. States
 * 9. Reduced motion
 */

/* 1. Bar */
.haldane-booking,
.haldane-pop,
.haldane-dialog,
.haldane-book-button,
.haldane-enquiry,
.haldane-booking-button {
	--haldane-base: var(--wp--preset--color--base, #F8F5EF);
	--haldane-base-2: var(--wp--preset--color--base-2, #EFE9DF);
	--haldane-line: var(--wp--preset--color--base-3, #E3DACB);
	--haldane-ink: var(--wp--preset--color--contrast, #1B1D1C);
	--haldane-text: var(--wp--preset--color--contrast-2, #424744);
	--haldane-muted: var(--wp--preset--color--contrast-3, #6B706C);
	--haldane-primary: var(--wp--preset--color--primary, #1F4060);
	--haldane-primary-hover: var(--wp--preset--color--primary-2, #162F48);
	--haldane-body: var(--wp--preset--font-family--body, sans-serif);
	--haldane-heading: var(--wp--preset--font-family--heading, Georgia, serif);
	box-sizing: border-box;
	color: var(--haldane-text);
	font-family: var(--haldane-body);
	font-size: var(--wp--preset--font-size--medium, 1.0625rem);
	line-height: 1.6;
}

.haldane-booking *,
.haldane-pop *,
.haldane-dialog *,
.haldane-book-button * {
	box-sizing: border-box;
}

.haldane-booking {
	position: relative;
	margin: 0;
}

.haldane-booking__fields {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
	border: 1px solid var(--haldane-line);
	background: var(--haldane-base);
}

.haldane-booking__field {
	display: grid;
	align-content: center;
	gap: .25rem;
	min-inline-size: 0;
	min-block-size: 5.5rem;
	padding: 1rem 1.5rem;
	border: 0;
	border-inline-end: 1px solid var(--haldane-line);
	border-radius: 0;
	background: transparent;
	color: var(--haldane-ink);
	font: inherit;
	text-align: start;
	cursor: pointer;
}

.haldane-booking__label {
	font-size: .8125rem;
	font-weight: 600;
	color: var(--haldane-text);
}

.haldane-booking__value {
	overflow: hidden;
	font-family: var(--haldane-heading);
	font-size: clamp(1.125rem, 1rem + .6vw, 1.5rem);
	line-height: 1.3;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.haldane-booking-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	min-block-size: 2.75rem;
	padding: .9em 1.5em;
	border: 1px solid var(--wp--preset--color--primary, #1F4060);
	border-radius: 2px;
	background: var(--wp--preset--color--primary, #1F4060);
	color: var(--wp--preset--color--base, #F8F5EF);
	font-family: var(--wp--preset--font-family--body, sans-serif);
	font-size: .95rem;
	font-weight: 600;
	line-height: 1.4;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
}

.haldane-booking-button:hover:not(:disabled) {
	background: var(--wp--preset--color--primary-2, #162F48);
	border-color: var(--wp--preset--color--primary-2, #162F48);
}

.haldane-booking__submit {
	border-radius: 0;
}

.haldane-booking-button--outline {
	border-color: currentColor;
	background: transparent;
	color: var(--wp--preset--color--primary, #1F4060);
}

.haldane-booking-button--outline:hover:not(:disabled) {
	border-color: var(--wp--preset--color--primary, #1F4060);
	background: var(--wp--preset--color--primary, #1F4060);
	color: var(--wp--preset--color--base, #F8F5EF);
}

.haldane-booking-button--light {
	border-color: var(--wp--preset--color--base, #F8F5EF);
	background: var(--wp--preset--color--base, #F8F5EF);
	color: var(--wp--preset--color--contrast, #1B1D1C);
}

.haldane-booking-button--light:hover:not(:disabled) {
	border-color: var(--wp--preset--color--base-2, #EFE9DF);
	background: var(--wp--preset--color--base-2, #EFE9DF);
}

.haldane-book-button--full,
.haldane-book-button--full > button {
	inline-size: 100%;
}

.haldane-text-button {
	min-block-size: 2.75rem;
	padding: .5rem .25rem;
	border: 0;
	background: transparent;
	color: var(--wp--preset--color--primary, #1F4060);
	font: inherit;
	font-size: .9rem;
	text-decoration: underline;
	text-underline-offset: .2em;
	cursor: pointer;
}

.haldane-booking__status {
	margin-block: .75rem 0;
	font-size: .9rem;
}

.haldane-booking__status:empty {
	display: none;
}

@media (max-width: 860px) {
	.haldane-booking--bar .haldane-booking__fields {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.haldane-booking--bar .haldane-booking__field {
		min-block-size: 4.5rem;
		padding: .875rem 1rem;
	}

	.haldane-booking--bar [data-haldane-open="guests"],
	.haldane-booking--bar .haldane-booking__submit {
		grid-column: 1 / -1;
		border-inline-end: 0;
		border-block-start: 1px solid var(--haldane-line);
	}

	.haldane-booking--bar .haldane-booking__submit {
		min-block-size: 3.5rem;
	}
}

/* 2. Stacked */
.haldane-booking--stacked {
	display: grid;
	gap: 1.25rem;
}

.haldane-booking--stacked .haldane-booking__fields {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.haldane-booking--stacked .haldane-booking__field {
	min-block-size: 4.5rem;
	padding: .875rem 1rem;
}

.haldane-booking--stacked [data-haldane-departure] {
	border-inline-end: 0;
}

.haldane-booking--stacked [data-haldane-open="guests"] {
	grid-column: 1 / -1;
	border-block-start: 1px solid var(--haldane-line);
	border-inline-end: 0;
}

.haldane-booking--stacked > .haldane-pop {
	padding: 0;
	border: 0;
	background: transparent;
}

.haldane-booking--stacked .haldane-booking__submit {
	inline-size: 100%;
	min-block-size: 3.5rem;
	border-radius: 2px;
}

/* 3. Calendar */
.haldane-calendar {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.25rem 1.75rem;
}

.haldane-calendar__navigation {
	display: flex;
	grid-column: 1 / -1;
	justify-content: space-between;
	gap: 1rem;
}

.haldane-calendar__navigation button {
	min-block-size: 2.75rem;
	padding: .5rem .75rem;
	border: 1px solid var(--haldane-line);
	border-radius: 2px;
	background: var(--haldane-base);
	color: var(--haldane-ink);
	font: inherit;
	font-size: .8125rem;
	cursor: pointer;
}

.haldane-calendar__month {
	min-inline-size: 0;
}

.haldane-calendar__grid {
	inline-size: 100%;
	margin: 0;
	border: 0;
	border-collapse: collapse;
	table-layout: fixed;
	color: var(--haldane-ink);
}

.haldane-calendar__grid caption {
	padding-block: 0 .875rem;
	font-family: var(--haldane-heading);
	font-size: 1.4rem;
	font-weight: 500;
	line-height: 1.3;
	text-align: center;
}

.haldane-calendar__grid th {
	overflow: hidden;
	padding: .25rem 0 .625rem;
	border: 0;
	color: var(--haldane-muted);
	font-size: .75rem;
	font-weight: 600;
	text-align: center;
	text-overflow: clip;
}

.haldane-calendar__grid td {
	block-size: 3rem;
	padding: 1px;
	border: 0;
	vertical-align: middle;
}

.haldane-calendar__day {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: .2rem;
	inline-size: 100%;
	min-inline-size: 0;
	min-block-size: 3rem;
	padding: .25rem 0;
	border: 1px solid transparent;
	border-radius: 2px;
	background: transparent;
	color: var(--haldane-ink);
	font: inherit;
	font-size: .9rem;
	font-variant-numeric: tabular-nums;
	line-height: 1.1;
	cursor: pointer;
}

.haldane-calendar__price {
	max-inline-size: 100%;
	font-size: .625rem;
	line-height: 1.2;
	overflow-wrap: anywhere;
}

.haldane-calendar__note {
	margin-block: 1rem 0;
	color: var(--haldane-text);
	font-size: .8125rem;
}

@media (max-width: 860px) {
	.haldane-calendar {
		grid-template-columns: minmax(0, 1fr);
	}

	.haldane-calendar__day,
	.haldane-calendar__grid td {
		min-block-size: 3.25rem;
	}

	.haldane-calendar__price {
		font-size: .6875rem;
	}
}

/* 4. Popovers and mobile sheet */
.haldane-pop {
	padding: 1.5rem;
	border: 1px solid var(--haldane-line);
	background: var(--haldane-base);
}

.haldane-pop--floating {
	position: fixed;
	z-index: 100010;
	inset-block-start: var(--haldane-pop-top, 1rem);
	inset-inline-start: var(--haldane-pop-inline, 1rem);
	inline-size: min(48rem, calc(100vw - 1rem));
	max-block-size: calc(100dvh - 1rem);
	overflow-y: auto;
	box-shadow: 0 .75rem 2.5rem rgb(0 0 0 / 14%);
}

.haldane-pop--guests.haldane-pop--floating {
	inline-size: min(26rem, calc(100vw - 1rem));
}

.haldane-pop__footer {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: .75rem;
	margin-block-start: 1rem;
	padding-block-start: 1rem;
	border-block-start: 1px solid var(--haldane-line);
}

.haldane-pop__footer > [data-haldane-summary] {
	flex: 1 1 auto;
	font-size: .8125rem;
}

.haldane-pop__note {
	margin-block: 1rem 0;
	font-size: .875rem;
}

.haldane-booking-scrim {
	position: fixed;
	z-index: 100009;
	inset: 0;
	background: rgb(0 0 0 / 55%);
}

.haldane-pop--sheet {
	position: fixed;
	z-index: 100010;
	inset-inline: 0;
	inset-block-end: 0;
	inline-size: 100%;
	max-block-size: 90vh;
	max-block-size: 90dvh;
	padding: 1.25rem max(1rem, env(safe-area-inset-right)) calc(1rem + env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
	overflow-y: auto;
	overscroll-behavior: contain;
	border-block-end: 0;
	animation: haldane-sheet-enter .18s ease-out;
}

.haldane-booking-locked {
	overflow: hidden;
}

@keyframes haldane-sheet-enter {
	from {
		opacity: 0;
		transform: translateY(1rem);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@media (max-width: 480px) {
	.haldane-pop__footer {
		flex-wrap: wrap;
	}

	.haldane-pop__footer > [data-haldane-summary] {
		flex-basis: 100%;
	}
}

/* 5. Guests stepper */
.haldane-stepper {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding-block: .875rem;
}

.haldane-stepper + .haldane-stepper {
	border-block-start: 1px solid var(--haldane-line);
}

.haldane-stepper strong,
.haldane-stepper small {
	display: block;
}

.haldane-stepper strong {
	color: var(--haldane-ink);
	font-weight: 600;
}

.haldane-stepper small {
	margin-block-start: .125rem;
	color: var(--haldane-text);
	font-size: .8125rem;
}

.haldane-stepper__controls {
	display: flex;
	align-items: center;
	gap: .75rem;
}

.haldane-stepper__controls button {
	inline-size: 2.75rem;
	block-size: 2.75rem;
	padding: 0;
	border: 1px solid var(--haldane-line);
	border-radius: 2px;
	background: transparent;
	color: var(--haldane-ink);
	font: inherit;
	font-size: 1.25rem;
	cursor: pointer;
}

.haldane-stepper output {
	min-inline-size: 2ch;
	text-align: center;
	font-variant-numeric: tabular-nums;
}

/* 6. Dialog */
.haldane-dialog {
	position: fixed;
	inline-size: min(54rem, calc(100vw - 2rem));
	max-inline-size: none;
	max-block-size: calc(100vh - 2rem);
	max-block-size: calc(100dvh - 2rem);
	margin: auto;
	padding: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	border: 1px solid var(--haldane-line);
	border-radius: 2px;
	background: var(--haldane-base);
}

.haldane-dialog::backdrop {
	background: rgb(0 0 0 / 60%);
}

.haldane-dialog__inner {
	position: relative;
	padding: clamp(1.5rem, 4vw, 3rem);
}

.haldane-dialog__title {
	margin: 0;
	margin-block-end: 1.5rem;
	padding-inline-end: 2rem;
	color: var(--haldane-ink);
	font-family: var(--haldane-heading);
	font-size: clamp(2rem, 1.5rem + 2vw, 3rem);
	font-weight: 400;
	line-height: 1.1;
	letter-spacing: -.015em;
}

.haldane-dialog__close {
	position: absolute;
	inset-block-start: .5rem;
	inset-inline-end: .5rem;
	display: grid;
	place-items: center;
	inline-size: 2.75rem;
	block-size: 2.75rem;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--haldane-ink);
	font: inherit;
	font-size: 2rem;
	cursor: pointer;
}

.haldane-dialog__contact {
	margin-block-start: 1.5rem;
	padding-block-start: 1rem;
	border-block-start: 1px solid var(--haldane-line);
	font-size: .875rem;
}

.haldane-dialog__contact p {
	margin-block: 0 .5rem;
}

.haldane-dialog__contact ul {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem 1.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.haldane-dialog__contact a {
	color: var(--haldane-ink);
	text-underline-offset: .2em;
}

/* 7. Enquiry form */
.haldane-enquiry fieldset {
	display: grid;
	gap: .5rem;
	min-inline-size: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.haldane-enquiry label {
	margin-block-start: .75rem;
	color: var(--haldane-ink);
	font-size: .9rem;
	font-weight: 600;
}

.haldane-enquiry input:not([type="hidden"]),
.haldane-enquiry textarea {
	inline-size: 100%;
	max-inline-size: 100%;
	min-block-size: 2.75rem;
	padding: .75rem;
	border: 1px solid var(--haldane-muted);
	border-radius: 2px;
	background: var(--haldane-base);
	color: var(--haldane-ink);
	font: inherit;
}

.haldane-enquiry textarea {
	resize: vertical;
}

.haldane-enquiry__privacy,
.haldane-enquiry__status,
[data-haldane-enquiry-summary] {
	font-size: .9rem;
}

.haldane-enquiry__privacy {
	margin-block: .75rem;
}

.haldane-enquiry__status {
	margin-block: 1rem;
}

.haldane-enquiry__trap {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	overflow: hidden;
	clip-path: inset(50%);
}

/* 8. States */
.haldane-booking [hidden],
.haldane-pop[hidden],
.haldane-dialog [hidden],
.haldane-dialog:not([open]) {
	display: none !important;
}

.haldane-booking button:focus-visible,
.haldane-pop button:focus-visible,
.haldane-dialog :is(button, input, textarea, a, [tabindex]):focus-visible,
.haldane-book-button button:focus-visible {
	outline: 2px solid var(--wp--preset--color--contrast, #1B1D1C);
	outline-offset: 3px;
	box-shadow: 0 0 0 3px var(--wp--preset--color--base, #F8F5EF);
}

.haldane-booking__field:hover,
.haldane-booking__field[aria-expanded="true"],
.haldane-calendar__navigation button:hover:not(:disabled),
.haldane-stepper button:hover:not(:disabled) {
	background: var(--haldane-base-2);
}

.haldane-calendar__day:hover:not(:disabled),
.haldane-calendar__day.in-range,
.haldane-calendar__day.in-preview {
	background: var(--haldane-base-2);
}

.haldane-calendar__day.is-today {
	border-color: var(--haldane-muted);
	font-weight: 700;
}

.haldane-calendar__day.is-start,
.haldane-calendar__day.is-end {
	background: var(--haldane-primary);
	color: var(--haldane-base);
}

.haldane-calendar__day.is-closed .haldane-calendar__number {
	text-decoration: line-through;
	text-decoration-thickness: 1px;
}

.haldane-calendar__day:disabled {
	color: var(--haldane-muted);
	cursor: default;
}

.haldane-calendar__day:disabled .haldane-calendar__price {
	visibility: hidden;
}

.haldane-booking-button:disabled,
.haldane-calendar__navigation button:disabled,
.haldane-stepper button:disabled,
.haldane-text-button:disabled {
	opacity: .5;
	cursor: default;
}

.haldane-enquiry__status.is-error {
	color: var(--haldane-ink);
	font-weight: 600;
}

.haldane-screen-reader-text {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	border: 0;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* 9. Reduced motion */
@media (prefers-reduced-motion: reduce) {
	.haldane-pop--sheet {
		animation: none;
	}

	.haldane-dialog,
	.haldane-pop {
		scroll-behavior: auto;
	}
}