/**
 * Service pages, the booking panel, and the contact page.
 *
 * Loaded on a service page and on any page carrying the booking or contact-form block (see
 * inc/enqueue.php). The three share a field grid, a card treatment and a sidebar column, so they
 * share a stylesheet rather than each asking for its own request.
 *
 * The step rail, the choice rows and the step navigation live in components.css — the recommender
 * uses them too.
 */

/* --------------------------------------------------------- service page ---- */

/*
 * The service hero is the About page's ink hero with a lockup: an icon in brand green beside the
 * title, and the session's shape underneath when it is bookable.
 *
 * The ink treatment belongs here rather than to `.fb-page-hero`, which only carries padding —
 * every other page that uses it sits inside a `.fb-section--ink` wrapper. This one is emitted by a
 * block with no wrapper to inherit from, so without this the breadcrumb rendered pale grey on
 * white.
 */
.fb-page-hero--service {
	background: var(--surface-inverse);
	color: var(--text-inverse);
}

.fb-page-hero--service .fb-page-hero__title { color: var(--text-inverse); }

.fb-page-hero--service .fb-lede { color: var(--steel-300); }

.fb-page-hero--service .fb-crumbs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-2);
	font-size: var(--text-caption);
	color: var(--steel-400);
	margin-bottom: var(--space-6);
}

.fb-page-hero--service .fb-crumbs a { color: var(--steel-300); }
.fb-page-hero--service .fb-crumbs a:hover { color: var(--text-inverse); }
.fb-page-hero--service .fb-crumbs [aria-current] { color: var(--text-inverse); }

.fb-page-hero__lockup {
	display: flex;
	align-items: center;
	gap: var(--space-3);
}

.fb-page-hero__icon {
	flex: none;
	color: var(--fb-green);
}

.fb-page-hero__meta {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	margin: var(--space-5) 0 0;
	font-family: var(--font-mono);
	font-size: var(--text-body-sm);
	color: var(--steel-300);
}

/* The two-column body: copy on the left, booking on the right, side by side from 900px. */
.fb-service-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--space-8);
	align-items: start;
}

@media (min-width: 900px) {
	.fb-service-layout {
		grid-template-columns: minmax(0, 1fr) 400px;
		gap: var(--space-12);
	}

	/*
	 * Sticky within the grid row, so a long service description scrolls past a panel that stays
	 * where the buyer can reach it. `align-items: start` above is what makes this possible — a
	 * stretched grid item is already full height and cannot stick.
	 */
	.fb-service-aside {
		position: sticky;
		top: var(--space-6);
	}
}

.fb-service-details__title {
	font-size: var(--text-h2);
	margin: var(--space-10) 0 var(--space-5);
}

.fb-service-details__title:first-child { margin-top: 0; }

.fb-ticklist {
	display: grid;
	gap: var(--space-3);
	margin: 0;
	padding: 0;
	list-style: none;
}

.fb-ticklist li {
	display: flex;
	align-items: flex-start;
	gap: var(--space-3);
	font-size: var(--text-body);
}

.fb-ticklist .fb-icon {
	flex: none;
	margin-top: 2px;
	color: var(--fb-green-700);
}

.fb-service-details__standards {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
}

/* ------------------------------------------------------- booking panel ---- */

.fb-booking { padding: var(--space-6); }

/*
 * The panel on the Services index, where it is a section rather than a sidebar. Capped at the
 * kit's 560px: stretched across the full 1265px shell, two session choices and a five-day strip
 * read as a form that has lost its container.
 */
.fb-booking-section {
	max-width: 560px;
	margin-top: var(--space-8);
}

.fb-booking__title {
	margin: var(--space-2) 0 var(--space-5);
	font-size: var(--text-h3);
}

.fb-booking__body { margin-top: var(--space-6); }

.fb-booking__chosen {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--space-2);
	margin: 0 0 var(--space-4);
	font-size: var(--text-body-sm);
}

.fb-booking__note {
	margin: var(--space-3) 0 0;
	font-size: var(--text-caption);
	color: var(--text-muted);
}

/* The date strip: arrows either side of a week of days. */
.fb-daystrip {
	display: flex;
	align-items: stretch;
	gap: var(--space-2);
}

.fb-daystrip__nav {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 32px;
	border: var(--border-width) solid var(--border-default);
	border-radius: var(--radius-md);
	background: var(--surface-card);
	color: var(--text-primary);
	transition: var(--transition-control);
}

.fb-daystrip__nav:hover { border-color: var(--fb-ink); }
.fb-daystrip__nav:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.fb-daystrip__nav.is-disabled { opacity: 0; pointer-events: none; }

.fb-daystrip__days {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: var(--space-1);
	flex: 1;
	margin: 0;
	padding: 0;
	list-style: none;
}

.fb-day {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	min-height: var(--tap-min);
	padding: var(--space-2) 2px;
	border: var(--border-width) solid var(--border-default);
	border-radius: var(--radius-md);
	background: var(--surface-card);
	color: var(--text-primary);
	text-align: center;
	text-decoration: none;
	transition: var(--transition-control);
}

a.fb-day:hover { border-color: var(--fb-ink); }
a.fb-day:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.fb-day.is-selected {
	background: var(--fb-ink);
	border-color: var(--fb-ink);
	color: var(--text-inverse);
}

/*
 * A closed day is shown, not removed. A strip that silently skipped Saturday would leave the
 * buyer counting dates to work out what happened to it.
 */
.fb-day.is-closed {
	background: var(--surface-subtle);
	color: var(--text-muted);
	border-style: dashed;
	cursor: not-allowed;
}

.fb-day__weekday {
	font-size: var(--text-micro);
	letter-spacing: var(--ls-eyebrow);
	text-transform: uppercase;
	opacity: 0.75;
}

.fb-day__date {
	font-size: var(--text-caption);
	font-weight: var(--fw-semibold);
	white-space: nowrap;
}

/* The slot row. Mono, because these are times and should align. */
.fb-slots {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	margin: var(--space-4) 0 0;
	padding: 0;
	list-style: none;
}

.fb-slot {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--tap-min);
	padding: 0 var(--space-4);
	border: var(--border-width) solid var(--border-default);
	border-radius: var(--radius-md);
	background: var(--surface-card);
	color: var(--text-primary);
	font-family: var(--font-mono);
	font-size: var(--text-body-sm);
	font-weight: var(--fw-medium);
	text-decoration: none;
	transition: var(--transition-control);
}

a.fb-slot:hover { border-color: var(--fb-ink); }
a.fb-slot:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.fb-slot.is-selected {
	background: var(--fb-green);
	border-color: var(--fb-ink);
}

.fb-slot.is-taken {
	opacity: 0.4;
	cursor: not-allowed;
	text-decoration: line-through;
}

/* The details form. */
.fb-booking__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: var(--space-4);
	margin-top: var(--space-5);
}

.fb-booking__grid .fb-field--wide { grid-column: 1 / -1; }

/*
 * The honeypot. Positioned off-screen rather than display:none — some bots skip inputs that are
 * not rendered — and out of the tab order and the accessibility tree via the markup.
 */
.fb-booking__hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.fb-booking__summary {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: var(--space-2) var(--space-4);
	margin: var(--space-5) 0 0;
	font-size: var(--text-body-sm);
}

.fb-booking__summary dt {
	color: var(--text-secondary);
	font-weight: var(--fw-medium);
}

.fb-booking__summary dd { margin: 0; }

@media (max-width: 640px) {
	.fb-booking { padding: var(--space-5); }

	/* Under 380px the five cells get tight; drop to four and let the strip wrap to two rows. */
	.fb-daystrip__days { grid-template-columns: repeat(4, minmax(0, 1fr)); }

	.fb-booking__summary { grid-template-columns: 1fr; gap: 2px var(--space-4); }
	.fb-booking__summary dd { margin-bottom: var(--space-2); }
}


/* ------------------------------------------------------- contact page ---- */

/*
 * Form on the left, the facts on the right, side by side from 900px — the same breakpoint and the
 * same shape as a service page, because they are the same layout with different contents.
 */
.fb-contact-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--space-8);
	align-items: start;
}

@media (min-width: 900px) {
	.fb-contact-layout {
		grid-template-columns: minmax(0, 1fr) 380px;
		gap: var(--space-12);
	}
}

.fb-contact-aside {
	display: grid;
	gap: var(--space-4);
}

/*
 * The company name is now `core/site-title` rather than typed text (audit F-3), so it reads
 * Settings → General instead of being a third copy of the same fact. That brings the block's own
 * theme.json styling with it — display face at weight 900 — which is right for the masthead and
 * far too loud for a line inside a contact card. Every property the block would otherwise inherit
 * is therefore restated here rather than left to whichever stylesheet happens to load last.
 */
.fb-contact-card__name,
p.fb-contact-card__name {
	margin: var(--space-3) 0 var(--space-2);
	font-family: var(--font-body);
	font-size: var(--text-body);
	font-weight: var(--fw-semibold);
	letter-spacing: 0;
	line-height: 1.4;
}

/*
 * Opening hours are optional. The card's heading is markup and the hours are a dynamic block, so
 * when no hours are set the block renders nothing and the heading would sit alone above an empty
 * card. Hiding the card when it has no `.fb-hours` inside keeps that decision in one place instead
 * of asking the pattern to run a PHP conditional it no longer can.
 */
.fb-card--hours:not(:has(.fb-hours)) {
	display: none;
}

.fb-enquiry {
	padding: var(--space-6);
	margin-top: var(--space-8);
}

/*
 * Two columns, not auto-fit. `repeat(auto-fit, minmax(200px, 1fr))` produced three at this width,
 * which split Name/Company/Email across a row and left Mobile alone on the next — the kit pairs
 * them, and pairs read better on a form this short.
 */
.fb-enquiry__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--space-4);
	margin-top: var(--space-5);
}

.fb-enquiry__grid .fb-field--wide { grid-column: 1 / -1; }

.fb-enquiry__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-4);
	margin-top: var(--space-5);
}

.fb-enquiry__promise {
	margin: 0;
	font-size: var(--text-caption);
	color: var(--text-muted);
}

/* Off-screen rather than display:none — some bots skip inputs that are not rendered. */
.fb-enquiry__hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/*
 * The opt-in checkbox borrows the shared choice row but sits inline in a form rather than in a
 * list of alternatives, so it loses the card border and the block padding.
 */
.fb-choice--inline {
	border: 0;
	background: none;
	padding: 0;
	min-height: 0;
	align-items: center;
}

.fb-choice--inline:hover { border-color: transparent; }

.fb-choice--inline .fb-choice__mark { margin-top: 0; }

.fb-choice--inline .fb-choice__label {
	font-weight: var(--fw-regular);
	font-size: var(--text-body-sm);
}

/* ------------------------------------------------------- hours and map ---- */

.fb-hours__list {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: var(--space-1) var(--space-4);
	margin: var(--space-3) 0 0;
	font-size: var(--text-body-sm);
}

.fb-hours__list dt {
	font-weight: var(--fw-semibold);
	white-space: nowrap;
}

.fb-hours__list dd {
	margin: 0;
	font-family: var(--font-mono);
	color: var(--text-secondary);
}

.fb-hours__closed {
	margin: var(--space-3) 0 0;
	font-size: var(--text-caption);
	color: var(--text-muted);
}

.fb-map__frame {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	border: var(--border-width) solid var(--border-default);
	border-radius: var(--radius-lg);
}

/*
 * The no-embed default. Not a placeholder for a map — a usable card that gives the address and a
 * way to get directions, and costs no third-party request.
 */
.fb-map__plate {
	display: flex;
	gap: var(--space-4);
	padding: var(--space-5);
	border: var(--border-width) solid var(--border-default);
	border-radius: var(--radius-lg);
	background: var(--surface-subtle);
	color: var(--text-primary);
	text-decoration: none;
	transition: var(--transition-control);
}

.fb-map__plate:hover { border-color: var(--fb-ink); }
.fb-map__plate:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.fb-map__plate .fb-icon {
	flex: none;
	color: var(--fb-green-700);
}

.fb-map__body {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
	min-width: 0;
}

.fb-map__title {
	font-family: var(--font-display);
	font-size: var(--text-h4);
	font-weight: var(--fw-bold);
}

.fb-map__address {
	font-size: var(--text-body-sm);
	color: var(--text-secondary);
	text-wrap: pretty;
}

.fb-map__cta {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	margin-top: var(--space-2);
	font-size: var(--text-body-sm);
	font-weight: var(--fw-semibold);
}

@media (max-width: 640px) {
	.fb-enquiry { padding: var(--space-5); }

	.fb-enquiry__grid { grid-template-columns: minmax(0, 1fr); }

	.fb-enquiry__actions { flex-direction: column; align-items: stretch; }
	.fb-enquiry__actions .fb-btn { justify-content: center; }
	.fb-enquiry__promise { text-align: center; }
}