/**
 * Sundial Bookings — front end.
 *
 * Every colour is a custom property with a plain fallback, so the plugin looks
 * correct on Twenty Twenty-Five and takes a theme's brand where one supplies it. A
 * theme overrides by setting these on any ancestor:
 *
 *   --sundial-ink          text
 *   --sundial-surface      the ground it sits on
 *   --sundial-cta          button fill, which carries white text
 *   --sundial-cta-hover
 *   --sundial-focus        focus ring, needs 3:1 against the surface (WCAG 2.2 SC 1.4.11)
 *   --sundial-brand-text   brand colour used as text, needs 4.5:1
 *   --sundial-band         a tinted surface
 *   --sundial-radius-*     control, card, pill
 *
 * No font is loaded here. A wordpress.org plugin must not call a CDN, and bundling a
 * family is a licence question per family, so type is inherited from the theme.
 */

/* The public token above is read into a private one here, and only the private
 * names are used below. The two names must differ. Writing
 * `--sundial-ink: var(--sundial-ink, #1f2328)` looks like "theme value, else this
 * default" and is in fact a self-reference: a custom property that refers to itself
 * is a cycle, so it is invalid at computed-value time and resolves to nothing at all
 * rather than to the fallback. Every declaration built on it - border, background,
 * border-radius - is then thrown away, and the block renders as unstyled markup with
 * the stylesheet loading correctly and reporting no error anywhere. */
.sundial {
	--_ink: var(--sundial-ink, #1f2328);
	--_surface: var(--sundial-surface, #fff);
	--_cta: var(--sundial-cta, #3a4552);
	--_cta-hover: var(--sundial-cta-hover, #2a323c);
	--_focus: var(--sundial-focus, #3a4552);
	--_brand-text: var(--sundial-brand-text, #4a5259);
	--_band: var(--sundial-band, #f2f3f4);
	--_radius-control: var(--sundial-radius-control, 10px);
	--_radius-card: var(--sundial-radius-card, 14px);
	--_radius-pill: var(--sundial-radius-pill, 999px);

	color: var(--_ink);
	font-family: inherit;
}

.sundial *,
.sundial *::before,
.sundial *::after { box-sizing: border-box; }

.sundial.is-busy { opacity: .6; pointer-events: none; }

.sundial__title { margin: 0 0 .5em; }
.sundial__step-title { margin: 0 0 .75em; font-size: 1.25em; }

/* The heading receives focus when a step changes, so a screen reader lands on the
 * new step rather than staying where the old button was. The outline would be
 * misleading on a heading nobody clicked, so it is removed there and only there. */
.sundial__step-title:focus { outline: none; }

.sundial__lead { margin: 0 0 1em; }
.sundial__note { margin: .5em 0; }
.sundial__hint {
	margin: .5em 0;
	font-size: .875em;
	color: color-mix(in srgb, var(--_ink) 68%, transparent);
}
.sundial__subhead { margin: 1.25em 0 .25em; font-size: 1em; }

.sundial__error {
	margin: 1em 0 0;
	padding: .75em 1em;
	border: 1px solid #c0392b;
	border-radius: var(--_radius-control);
	background: #fdecec;
	color: #7a1c12;
}

.sundial__status {
	position: absolute;
	width: 1px; height: 1px;
	margin: -1px; padding: 0;
	overflow: hidden; clip: rect(0 0 0 0);
	white-space: nowrap; border: 0;
}

/* Focus is never removed. The ring colour is derived to clear 3:1 against both the
 * page and white, because a focus indicator is a UI component under SC 1.4.11. */
.sundial :where(a, button, input, select, textarea, [tabindex]):focus-visible {
	outline: 2px solid var(--_focus);
	outline-offset: 2px;
}

/* ── Choosing a service ─────────────────────────────────────────────────── */

.sundial-choices { list-style: none; margin: 0; padding: 0; }

.sundial-choices__group {
	margin: 1.25em 0 .25em;
	font-size: .75em;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--_brand-text);
}
.sundial-choices__group:first-child { margin-top: 0; }

.sundial-choice {
	display: block;
	width: 100%;
	padding: .85em 1em;
	margin: 0 0 .5em;
	text-align: left;
	background: var(--_surface);
	color: inherit;
	border: 1px solid color-mix(in srgb, var(--_ink) 18%, transparent);
	border-radius: var(--_radius-card);
	cursor: pointer;
	font: inherit;
}
.sundial-choice:hover { border-color: var(--_cta); }
.sundial-choice__name { display: block; font-weight: 600; }
.sundial-choice__meta {
	display: block;
	margin-top: .15em;
	font-size: .875em;
	color: color-mix(in srgb, var(--_ink) 68%, transparent);
}

/* ── Who is it for ──────────────────────────────────────────────────────── */

.sundial-audience {
	margin: 0 0 1em;
	padding: .85em 1em;
	border: 1px solid color-mix(in srgb, var(--_ink) 16%, transparent);
	border-radius: var(--_radius-card);
}
.sundial-audience legend { padding: 0; font-weight: 600; }
.sundial-audience__options { display: flex; flex-wrap: wrap; gap: .5em; }
.sundial-audience__options label {
	display: inline-flex;
	align-items: center;
	gap: .45em;
	padding: .5em .9em;
	border: 1px solid color-mix(in srgb, var(--_ink) 26%, transparent);
	border-radius: var(--_radius-pill);
	cursor: pointer;
}
.sundial-audience__options label:has(input:checked) {
	border-color: var(--_cta);
	background: color-mix(in srgb, var(--_cta) 10%, transparent);
}

/* ── Days ───────────────────────────────────────────────────────────────── */

.sundial-days {
	display: flex;
	gap: .5em;
	overflow-x: auto;
	padding-bottom: .35em;
	margin-bottom: .5em;
}

.sundial-day {
	flex: 0 0 auto;
	padding: .6em .9em;
	background: var(--_surface);
	color: inherit;
	border: 1px solid color-mix(in srgb, var(--_ink) 20%, transparent);
	border-radius: var(--_radius-control);
	cursor: pointer;
	font: inherit;
	text-align: center;
}
.sundial-day[aria-pressed="true"] {
	background: var(--_cta);
	border-color: var(--_cta);
	color: #fff;
}
.sundial-day__date { display: block; font-size: .8125em; white-space: nowrap; }
.sundial-day__count { display: block; font-size: .75em; opacity: .8; }

/* ── Times ──────────────────────────────────────────────────────────────── */

.sundial-slots__part {
	margin: 1em 0 .35em;
	font-size: .75em;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--_brand-text);
}

.sundial-slots__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(5.5em, 1fr));
	gap: .5em;
}

.sundial-slot {
	padding: .7em .35em;
	background: var(--_surface);
	color: inherit;
	border: 1px solid color-mix(in srgb, var(--_ink) 22%, transparent);
	border-radius: var(--_radius-control);
	cursor: pointer;
	font: inherit;
	font-variant-numeric: tabular-nums;
	text-align: center;
}
.sundial-slot:hover:not([disabled]) { border-color: var(--_cta); }

/* State is never carried by colour alone. A taken time is struck through and a
 * blocked one dashed, so both survive greyscale and colour-blindness, and the
 * button's accessible name says which it is. */
.sundial-slot[data-state="taken"] {
	text-decoration: line-through;
	opacity: .5;
	background: color-mix(in srgb, var(--_ink) 6%, transparent);
	cursor: not-allowed;
}
.sundial-slot[data-state="blocked"] {
	border-style: dashed;
	opacity: .55;
	cursor: not-allowed;
}

.sundial-slot__time { display: block; }
.sundial-slot__audience {
	display: block;
	margin-top: .2em;
	font-size: .625em;
	letter-spacing: .08em;
	text-transform: uppercase;
	opacity: .85;
}

/* ── The form ───────────────────────────────────────────────────────────── */

.sundial-summary {
	display: grid;
	gap: .2em;
	padding: .9em 1em;
	margin: 0 0 1.25em;
	background: var(--_band);
	border-radius: var(--_radius-card);
}

.sundial-field { margin: 0 0 .9em; }
.sundial-field label { display: block; margin-bottom: .25em; font-size: .875em; font-weight: 600; }
.sundial-field input {
	width: 100%;
	padding: .65em .8em;
	font: inherit;
	color: inherit;
	background: var(--_surface);
	border: 1px solid color-mix(in srgb, var(--_ink) 26%, transparent);
	border-radius: var(--_radius-control);
}

.sundial-check { display: flex; gap: .6em; align-items: flex-start; margin: 0 0 .75em; }
.sundial-check input { margin-top: .25em; flex: none; width: 1.05em; height: 1.05em; accent-color: var(--_cta); }
.sundial-check label { font-size: .9375em; line-height: 1.5; }

.sundial-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: .75em 1.5em;
	margin-top: .5em;
	background: var(--_cta);
	color: #fff;
	border: 0;
	border-radius: var(--_radius-pill);
	font: inherit;
	font-weight: 500;
	cursor: pointer;
}
.sundial-button:hover { background: var(--_cta-hover); }

.sundial-button--quiet {
	background: transparent;
	color: var(--_ink);
	border: 1px solid color-mix(in srgb, var(--_ink) 30%, transparent);
}
.sundial-button--quiet:hover { background: color-mix(in srgb, var(--_ink) 6%, transparent); }

/* ── Service list ───────────────────────────────────────────────────────── */

.sundial-list__group { margin: 0 0 1.75em; }
.sundial-list__heading { margin: 0 0 .5em; }
.sundial-list__items { list-style: none; margin: 0; padding: 0; }

.sundial-list__item {
	padding: .6em 0;
	border-bottom: 1px solid color-mix(in srgb, var(--_ink) 12%, transparent);
}

.sundial-list__row { display: flex; align-items: baseline; gap: .5em; }
.sundial-list__name { min-width: 0; }

/* Leader dots. Decorative, and hidden from assistive technology, because a row of
 * full stops read aloud is noise. */
.sundial-list__dots {
	flex: 1;
	min-width: 1em;
	border-bottom: 1px dotted color-mix(in srgb, var(--_ink) 38%, transparent);
	transform: translateY(-.2em);
}

.sundial-list__price { font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }

.sundial-list__meta {
	margin: .15em 0 0;
	font-size: .875em;
	color: color-mix(in srgb, var(--_ink) 65%, transparent);
}

.sundial-chip {
	flex: none;
	padding: .35em .9em;
	border: 1px solid var(--_cta);
	border-radius: var(--_radius-pill);
	color: var(--_cta);
	background: transparent;
	font-size: .75em;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
}
.sundial-chip:hover { background: var(--_cta); color: #fff; }

.sundial-chip--quiet {
	border-style: dashed;
	opacity: .8;
	cursor: default;
}
.sundial-chip--quiet:hover { background: transparent; color: var(--_cta); }

/* ── Editor ─────────────────────────────────────────────────────────────── */

.sundial-editor-placeholder {
	padding: 1.25em;
	border: 1px dashed #c3c8cd;
	border-radius: 8px;
	background: #f6f7f7;
}
.sundial-editor-placeholder p { margin: .4em 0 0; color: #646970; font-size: .875em; }

@media (prefers-reduced-motion: reduce) {
	.sundial * { scroll-behavior: auto !important; }
}