/**
 * RESET Booking plugin - theme skin.
 *
 * The plugin renders its own markup and re-renders the timetable body over
 * REST whenever a filter or the week changes, so this file reskins that
 * markup rather than replacing it. Booking, filtering, week navigation and
 * the slide-over panel all keep working.
 *
 * Loaded after the plugin's own stylesheet. Most of the work is done by
 * overriding the custom properties the plugin declares on `.reset` - the
 * documented way to retheme it - with targeted rules only where the design
 * needs a different shape.
 */

/* ==========================================================================
   Retheme via the plugin's own custom properties
   ========================================================================== */

.reset {
	--reset-paper: var(--sand);
	--reset-sand: var(--sand-card);
	--reset-stone: var(--sand-deep);
	--reset-ink: var(--ink);
	--reset-clay: var(--clay);

	--reset-muted: var(--ink-muted);
	--reset-quiet: var(--ink-nav);
	--reset-faint: #9A9385;
	--reset-line: rgba(73, 68, 56, 0.16);
	--reset-line-strong: rgba(73, 68, 56, 0.35);

	--reset-font: var(--body);
	--reset-serif: var(--display);

	/*
	 * The plugin labels everything in IBM Plex Mono, and uses sage for labels,
	 * links and confirmations. Both come straight from the brand guidelines,
	 * but neither appears in any of the page designs - so on this site they
	 * read as belonging to something else. Jost and the nav grey instead.
	 */
	--reset-mono: var(--body);
	--reset-sage: var(--ink-nav);

	--reset-radius: var(--radius);
	--reset-max: none;

	font-weight: 400;
	font-size: 16px;
	line-height: 1.44;
}

/* The plugin centres itself; the theme container already does that. */
.reset { margin-inline: 0; }

/* ==========================================================================
   Filter chips
   ========================================================================== */

.reset .reset-filters {
	gap: 12px;
	margin-bottom: 42px;
}

.reset .reset-chip {
	min-height: 46px;
	padding: 0 30px;
	border-color: var(--reset-line-strong);
	color: var(--dark);
	font-family: var(--body);
	font-size: clamp(11px, 0.68vw, 13px);
	font-weight: 400;
	letter-spacing: 0.14em;
}

.reset .reset-chip:hover,
.reset .reset-chip:focus {
	background: rgba(73, 68, 56, 0.06);
	border-color: var(--dark);
	color: var(--dark);
}

.reset .reset-chip.is-active,
.reset .reset-chip[aria-current="true"] {
	background: var(--dark);
	border-color: var(--dark);
	color: var(--on-dark);
}

/* ==========================================================================
   Week navigation
   The design does not show it, but browsing weeks matters - so it sits
   quietly above the grid rather than disappearing.
   ========================================================================== */

.reset .reset-weeknav {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 20px;
	margin-bottom: 18px;
	border: 0;
	padding: 0;
}

.reset .reset-weeknav__label {
	order: -1;
	margin-right: auto;
	font-family: var(--body);
	font-size: 13px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ink-nav);
}

.reset .reset-weeknav__btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--body);
	font-size: 13px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ink-nav);
	border: 0;
	background: none;
	padding: 6px 2px;
}
.reset .reset-weeknav__btn:hover:not(.is-disabled) { color: var(--dark); }
.reset .reset-weeknav__btn.is-disabled { opacity: 0.4; }

/* ==========================================================================
   The week grid - a bordered panel of equal day columns
   ========================================================================== */

.reset .reset-week {
	/* grid-auto-flow makes one equal column per day, whether the studio's
	   week is five days or seven. */
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 1fr;
	gap: 0;
	border: 1px solid var(--tt-panel-line, #D6CDBF);
	border-radius: var(--radius);
	overflow: hidden;
	background: transparent;
}

.reset .reset-day {
	display: flex;
	flex-direction: column;
	padding: 28px 20px 31px;
	min-width: 0;
	container-type: inline-size;
}

.reset .reset-day + .reset-day {
	border-left: 1px solid var(--tt-panel-line, #D6CDBF);
}

.reset .reset-day__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 5px;
	padding-bottom: 16px;
	margin-bottom: 13px;
	border-bottom: 1px solid var(--tt-panel-line, #D6CDBF);
}

.reset .reset-day__name,
.reset .reset-day__date {
	font-family: var(--body);
	font-size: 11px;
	font-weight: 400;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ink-nav);
}

.reset .reset-day__today {
	font-family: var(--body);
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--clay);
	margin-left: auto;
}

.reset .reset-day.is-today .reset-day__head {
	border-bottom-color: var(--clay);
}

.reset .reset-day__empty {
	font-size: 13px;
	color: var(--ink-nav);
}

/* ==========================================================================
   One class card
   ========================================================================== */

.reset .reset-card {
	display: flex;
	flex-direction: column;
	grid-template-columns: none;
	grid-template-areas: none;
	align-items: stretch;
	gap: 0;
	min-height: 159px;
	padding: 18px 20px;
	margin: 0 0 12px;
	background: var(--sand-card);
	border: 1px solid transparent;
	border-radius: var(--radius);
}

.reset .reset-day > .reset-card:last-child { margin-bottom: 0; }

.reset a.reset-card:hover,
.reset a.reset-card:focus {
	background: #DED7C9;
	border-color: transparent;
}

/* Full, finished and cancelled classes recede - the words still say why. */
.reset .reset-card.is-full,
.reset .reset-card.is-past,
.reset .reset-card.is-cancelled {
	opacity: 0.55;
}

.reset .reset-card__time {
	font-family: var(--body);
	font-size: 20px;
	font-weight: 400;
	line-height: 1.15;
	letter-spacing: 0;
	color: var(--ink);
	align-self: flex-start;
}

.reset .reset-card__name {
	font-family: var(--display);
	font-size: 22px;
	font-weight: 400;
	line-height: 1.2;
	color: var(--ink);
	margin-top: 12px;
}

.reset .reset-card__meta {
	font-size: 13px;
	line-height: 1.35;
	color: var(--ink-nav);
	margin-top: 12px;
}

.reset .reset-card .reset-status {
	margin-top: auto;
	padding-top: 18px;
}

/* ==========================================================================
   Status: words, no dot - the design carries meaning in the label alone
   ========================================================================== */

.reset .reset-status {
	font-family: var(--body);
	font-size: 11px;
	font-weight: 400;
	letter-spacing: 0.14em;
	gap: 0;
}

.reset .reset-status::before { display: none; }

.reset .reset-card .reset-status--available,
.reset .reset-card .reset-status--ok { color: var(--ink-nav); }

.reset .reset-card .reset-status--low,
.reset .reset-card .reset-status--full,
.reset .reset-card .reset-status--warn { color: var(--clay); }

.reset .reset-card .reset-status--cancelled,
.reset .reset-card .reset-status--past { color: var(--ink-nav); }

/* ==========================================================================
   The booking panel - inherit the page's type, keep the plugin's behaviour
   ========================================================================== */

.reset .reset-panel__title,
.reset .reset-h2,
.reset .reset-h3 {
	font-family: var(--display);
	font-weight: 400;
	color: var(--ink);
}

.reset .reset-btn {
	font-family: var(--body);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	border-radius: 999px;
}

.reset .reset-btn--primary {
	background: var(--dark);
	border-color: var(--dark);
	color: var(--on-dark);
}
.reset .reset-btn--primary:hover { background: #383429; border-color: #383429; }

/* ==========================================================================
   Narrow screens - the grid becomes a stack of days
   ========================================================================== */

@media (max-width: 1080px) {
	.reset .reset-day { padding: 24px 18px 26px; }
	.reset .reset-card { min-height: 0; padding: 16px 18px; }
	.reset .reset-card__name { font-size: 20px; }
	.reset .reset-card__time { font-size: 18px; }
}

@media (max-width: 900px) {
	.reset .reset-week {
		grid-auto-flow: row;
		grid-auto-columns: auto;
		border: 0;
		border-radius: 0;
		overflow: visible;
		gap: 0;
	}

	.reset .reset-day {
		padding: 26px 0;
		border-top: 1px solid var(--tt-panel-line, #D6CDBF);
	}
	.reset .reset-day + .reset-day { border-left: 0; }

	.reset .reset-day__head { padding-bottom: 14px; margin-bottom: 14px; }

	.reset .reset-card { min-height: 0; }

	.reset .reset-filters { gap: 8px; margin-bottom: 28px; }
	.reset .reset-chip { min-height: 40px; padding: 0 20px; }

	.reset .reset-weeknav { justify-content: space-between; }
	.reset .reset-weeknav__label { width: 100%; order: -1; margin-bottom: 8px; }
}

/* ==========================================================================
   The card type scales to the column it is in.

   The design draws a five-day week at 280px a column; a seven-day week is
   200px, where the design's 22px class name wraps mid-name. A container
   query keeps names on one line either way.
   ========================================================================== */

@container (max-width: 250px) {
	.reset .reset-card { min-height: 142px; padding: 16px 18px; }
	.reset .reset-card__time { font-size: 18px; }
	.reset .reset-card__name { font-size: 18px; margin-top: 10px; }
	.reset .reset-card__meta { margin-top: 10px; font-size: 12px; }
	.reset .reset-card .reset-status { padding-top: 14px; }
}

@container (max-width: 190px) {
	.reset .reset-card__name { font-size: 16px; }
	.reset .reset-card__time { font-size: 17px; }
}

/* ==========================================================================
   The account and enquiry screens

   The timetable was reskinned piece by piece, so it already looked right.
   These two screens are the plugin's own forms, and they were the places
   still showing through underneath.
   ========================================================================== */

/*
 * A page's content is capped at a comfortable reading measure. That is right
 * for prose and wrong for an interface, which was squeezing these screens
 * into 653px of a 1400px page.
 *
 * Named one screen at a time rather than released for every .reset: the
 * booking terms are prose, and at the full width they ran to about 200
 * characters a line. Browsers without :has() keep the narrow measure, which
 * is only how it looked before, so nothing breaks.
 */
.entry-content:has(> .reset-account),
.entry-content:has(> .reset-room_enquiry),
.entry-content:has(> .reset-passes) { max-width: none; }

/* The terms stay a reading measure, at the size the rest of the site reads. */
.reset-terms p,
.reset-terms li { font-size: clamp(15px, 0.84vw, 16px); line-height: 1.6; }

/* --- Labels, legends and eyebrows ---------------------------------------- */

.reset .reset-eyebrow,
.reset .reset-field label,
.reset .reset-fieldset legend {
	font-size: clamp(11px, 0.63vw, 12px);
	font-weight: 400;
	letter-spacing: 0.18em;
	color: var(--ink-nav);
	margin-bottom: 10px;
}

/* --- Supporting copy and headings ---------------------------------------- */

.reset .reset-help {
	font-size: clamp(15px, 0.84vw, 16px);
	line-height: 1.44;
	color: var(--ink-muted);
}

.reset .reset-help--tiny { font-size: 13px; }

.reset .reset-h2 {
	font-size: clamp(28px, 1.1rem + 1.7vw, 48px);
	line-height: 1.21;
}

.reset .reset-h3 {
	font-size: clamp(23px, 0.9rem + 1.1vw, 32px);
	line-height: 1.25;
}

/* --- Tabs ---------------------------------------------------------------- */

.reset .reset-tab {
	font-size: clamp(11px, 0.63vw, 12px);
	font-weight: 400;
	letter-spacing: 0.18em;
	color: var(--ink-nav);
}

.reset .reset-tab:hover { color: var(--ink); }

.reset .reset-tab.is-active {
	color: var(--ink);
	border-bottom-color: var(--ink);
}

/* --- Fields --------------------------------------------------------------- */

.reset input[type="text"],
.reset input[type="email"],
.reset input[type="tel"],
.reset input[type="password"],
.reset input[type="number"],
.reset input[type="search"],
.reset textarea,
.reset select {
	min-height: 52px;
	padding: 13px 16px;
	font-size: 16px;
	font-weight: 400;
	background: var(--sand);
	border-color: rgba(24, 24, 24, 0.18);
}

.reset textarea { min-height: 132px; }

/* Sage was carrying the focus state; on this palette clay is what shows. */
.reset input:focus,
.reset textarea:focus,
.reset select:focus { border-color: var(--clay); }

.reset input:focus-visible,
.reset textarea:focus-visible,
.reset select:focus-visible {
	outline: 2px solid var(--clay);
	outline-offset: 2px;
}

/* --- The enquiry form ----------------------------------------------------- */

/*
 * The form sits in the same sand panel as the café menu and the opening
 * hours, so a short form reads as a deliberate block on the page rather than
 * as a page that ran out of content. The fields keep a readable measure
 * inside it instead of stretching the full width.
 */
.reset-room_enquiry .reset-help { max-width: 615px; }

.reset-room_enquiry .reset-form {
	/* 640px of field plus its padding: the panel hugs the form rather than
	   leaving a stretch of empty sand beside it. */
	max-width: 720px;
	margin-top: clamp(22px, 1.7vw, 32px);
	padding: clamp(24px, 2.2vw, 40px);
	background: var(--sand-card);
	border-radius: var(--radius);
}

.reset-room_enquiry .reset-form .reset-field,
.reset-room_enquiry .reset-form .reset-fieldset { max-width: 640px; }

/* A pill sized to its words, not stretched across the panel. */
.reset-room_enquiry .reset-form .reset-btn { width: auto; }

/* --- Signing in ----------------------------------------------------------- */

.reset-account > .reset-auth {
	max-width: 620px;
	padding: clamp(24px, 2.2vw, 40px);
	background: var(--sand-card);
	border-radius: var(--radius);
}

.reset-account > .reset-auth .reset-h3:first-child { margin-top: 0; }

/* The divider's label sits on the panel now, so it takes the panel's colour. */
.reset-account > .reset-auth .reset-or span { background: var(--sand-card); }

/* Full-width buttons are right inside a narrow sign-in panel. */
.reset-account > .reset-auth .reset-form--tiny .reset-btn { width: auto; }

/* --- Small type ----------------------------------------------------------- */

/*
 * The plugin sets a lot of its labels and meta at 9-10px, which suited a
 * monospace caption and is too small for Jost. These are the ones that appear
 * on the account, enquiry and booking screens; the timetable's own labels are
 * sized further up this file.
 */
.reset .reset-or span,
.reset .reset-policy__link,
.reset .reset-list__day,
.reset .reset-receipt__lines dt,
.reset .reset-total span,
.reset .reset-terms__number { font-size: 11px; }

.reset .reset-btn__note,
.reset .reset-deadline,
.reset .reset-option__note,
.reset .reset-pass__note,
.reset .reset-price__summary,
.reset .reset-booking__when,
.reset .reset-move__when { font-size: 12px; }