/*
 * Reserve (parts/date-picker.php, date-picker.js). The body has no design
 * yet: the picker in the left half, the line for other bookings in the right
 * half in Body A like the intro text, 140px around. The picker is one card
 * (Stone hairline, the card radius) built from the Figma parts, 430px wide:
 * the Check in / Check out tabs on top (7:89: Stone, the active label dark,
 * the other white, a thin dark line between), the month row (7:70: the
 * name centred with "↓" beside it, a native select over the whole row) and
 * the calendar (22:384: weekday letters in Sky, days in Deep Forest A, past
 * days in Stone), all in Brando Sans with 20px of air inside. The chosen
 * days are Deep Forest A discs, the nights between a Stone band. "Check
 * availability" is an arrow link in Body A under the card.
 */

.reserve {
	row-gap: var(--space-80);
	align-items: start;
	padding-block: var(--space-140);
	color: var(--color-forest-a);
}

.date-picker {
	--picker-pad: var(--space-20);

	display: grid;
	gap: var(--space-20);
	width: 100%;
	max-width: 430px;
	font-family: var(--font-sans);
	font-size: var(--fs-20);
	line-height: var(--lh-sans);
}

/* Without JavaScript: the native date fields. */
.date-picker__fields {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-20);
}

/* display: grid would beat the hidden attribute the script sets. */
.date-picker__fields[hidden] {
	display: none;
}

.date-picker__field {
	display: grid;
	gap: 0.4em;
}

.date-picker__label {
	font-weight: var(--fw-semibold);
	letter-spacing: var(--ls-caps);
	text-transform: uppercase;
	font-size: 0.75em;
}

.date-picker__input {
	padding: 0.4em 0.5em;
	border: var(--stroke-hairline) solid var(--color-stone);
	border-radius: var(--radius);
	color: inherit;
	font: inherit;
}

/* The card the script builds: tabs, month row, calendar. */
.date-picker__ui {
	display: grid;
	overflow: hidden;
	border: var(--stroke-hairline) solid var(--color-stone);
	border-radius: var(--radius);
}

/* Check in / Check out: the top of the card, edge to edge. */
.date-picker__tabs {
	display: grid;
	grid-template-columns: 1fr 1fr;
	background: var(--color-stone);
}

.date-picker__tab {
	display: grid;
	padding: 0.5em 0.75em;
	border: 0;
	background: none;
	color: var(--color-white);
	font: inherit;
	font-weight: var(--fw-text);
	text-align: center;
	cursor: pointer;
	appearance: none;
	transition: color 0.2s ease;
}

.date-picker__tab + .date-picker__tab {
	border-left: var(--stroke-hairline) solid var(--color-forest-a);
}

.date-picker__tab.is-active {
	color: var(--color-forest-a);
}

.date-picker__tab-date {
	font-size: 0.75em;
}

.date-picker__tab:focus-visible {
	outline: 2px solid var(--color-forest-a);
	outline-offset: -4px;
}

/*
 * The month row: the name centred, the Figma arrow after it, a hairline
 * under the row; the native select covers the row so a click anywhere
 * opens it. The arrow needs the name's width, so it hangs off a span
 * sized by the select's text; the select text itself is centred.
 */
.date-picker__month {
	position: relative;
	margin: var(--picker-pad) var(--picker-pad) 0;
	border-bottom: var(--stroke-hairline) solid var(--color-stone);
}

.date-picker__select {
	width: 100%;
	padding: 0.6em 0;
	border: 0;
	background: none;
	color: var(--color-forest-a);
	font: inherit;
	font-weight: var(--fw-text);
	text-align: center;
	text-align-last: center;
	cursor: pointer;
	appearance: none;
}

/* Hidden copy of the chosen name: the script measures it (--month-half) to place the arrow. */
.date-picker__ruler {
	position: absolute;
	visibility: hidden;
	white-space: nowrap;
	font-weight: var(--fw-text);
}

/* The arrow sits a space after the centred name. */
.date-picker__month::after {
	position: absolute;
	top: 50%;
	left: calc(50% + var(--month-half, 4.4em) + 0.5em);
	color: var(--color-forest-a);
	content: "↓";
	pointer-events: none;
	translate: 0 -50%;
}

.date-picker__select:focus-visible {
	outline: 2px solid var(--color-forest-a);
	outline-offset: -2px;
}

/* The calendar: inside the card's padding. */
.date-picker__grid {
	width: calc(100% - var(--picker-pad) * 2);
	margin: var(--picker-pad);
	border-collapse: separate;
	border-spacing: 0 0.2em;
	table-layout: fixed;
	text-align: center;
}

.date-picker__grid th {
	padding-bottom: 0.5em;
	color: var(--color-sky);
	font-weight: var(--fw-text);
}

.date-picker__grid td {
	padding: 0;
}

.date-picker__day {
	width: 2.2em;
	height: 2.2em;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: none;
	color: var(--color-forest-a);
	font: inherit;
	font-weight: var(--fw-text);
	font-feature-settings: "lnum" 1, "tnum" 1;
	cursor: pointer;
	appearance: none;
}

.date-picker__day:disabled {
	color: var(--color-stone);
	cursor: default;
}

.date-picker__day:not(:disabled, .is-start, .is-end):hover {
	background: rgb(205 215 225 / 0.5); /* Stone */
}

.date-picker__day.is-today:not(.is-start, .is-end) {
	box-shadow: inset 0 0 0 var(--stroke-hairline) var(--color-forest-a);
}

/* The nights between: one unbroken band across the cells, running under half of each chosen day's disc. */
.date-picker__grid td.is-between {
	background: rgb(205 215 225 / 0.6); /* Stone */
}

.date-picker__grid td.is-range-start {
	background: linear-gradient(to right, transparent 50%, rgb(205 215 225 / 0.6) 50%);
}

.date-picker__grid td.is-range-end {
	background: linear-gradient(to right, rgb(205 215 225 / 0.6) 50%, transparent 50%);
}

.date-picker__grid td:is(.is-between, .is-range-start, .is-range-end) .date-picker__day {
	position: relative; /* The disc and the hover ring draw over the band. */
}

.date-picker__day.is-start,
.date-picker__day.is-end {
	background: var(--color-forest-a);
	color: var(--color-white);
}

.date-picker__day:focus-visible {
	outline: 2px solid var(--color-cooper-1);
	outline-offset: 1px;
}

/* Chosen with a click: focus moves for screen readers, without the ring (Safari and touch draw one on script focus). */
.date-picker__grid[data-pointer-focus] .date-picker__day:focus-visible {
	outline: none;
}

/* "→ Check availability": an arrow link in Body A. */
.date-picker__submit {
	justify-self: start;
	margin-top: var(--space-40);
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font-family: var(--font-serif);
	font-size: var(--fs-35);
	font-weight: var(--fw-text);
	line-height: var(--lh-body);
	cursor: pointer;
	appearance: none;
	text-box: trim-both cap alphabetic;
}

.date-picker__submit:is(:hover, :focus-visible),
.reserve__link:is(:hover, :focus-visible) {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}

/* The line for other bookings, in Body A. */
.reserve__text,
.reserve__link {
	display: block;
	font-size: var(--fs-35);
	line-height: var(--lh-body);
	text-box: trim-both cap alphabetic;
}

.reserve__link {
	margin-top: 1lh;
	color: inherit;
	text-decoration: none;
}

@media (prefers-reduced-motion: reduce) {
	.date-picker__tab {
		transition: none;
	}
}