/* Page-level pieces the design system's components.css doesn't cover: bands, section heads,
   hero, brand name, quote, header and footer. Hand-written; token variables only. */

/* ---------- Bands: one topic per full-width band ---------- */

/* Spectra containers size with their padding included. */
.wp-block-spectra-container[class*="hdc-"] {
	box-sizing: border-box;
}
/* Spectra pads every container by 10px. Layout-only containers get none, so everything in a band
   lines up on the same left edge; bands, cards and the hero photo set their own padding. */
.wp-block-spectra-container:is(.hdc-band__inner, .hdc-grid, .hdc-section-head, .hdc-hero, .hdc-hero__text,
	.hdc-measure, .hdc-quote, .hdc-card__tags, .hdc-band__more) {
	padding: 0;
}

/* Bands run edge to edge. The content wrapper has no side padding here, so WordPress's
   negative alignfull margins (and Spectra's 100% max-width) would shift bands sideways; reset them. */
.wp-block-post-content.has-global-padding > .wp-block-spectra-container.hdc-band.alignfull {
	margin-left: 0;
	margin-right: 0;
	width: auto;
	max-width: none;
}
.wp-block-spectra-container.hdc-band {
	padding: var(--space-7) var(--space-4);
	gap: 0;
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--ink);
}
@media (min-width: 640px) {
	.wp-block-spectra-container.hdc-band {
		padding: var(--space-8) var(--space-5);
	}
}
@media (min-width: 1024px) {
	.wp-block-spectra-container.hdc-band {
		padding: var(--space-9) var(--space-6);
	}
}
/* Slim band: a one-line strip (the search box at the top of the Contact page). */
.wp-block-spectra-container.hdc-band.hdc-band--slim {
	padding-block: var(--space-4);
}
.wp-block-spectra-container.hdc-band--sunken {
	background: var(--wp--preset--color--surface-sunken);
}
.wp-block-spectra-container.hdc-band--inverse {
	background: var(--wp--preset--color--inverse-surface);
	color: var(--wp--preset--color--on-inverse);
}
.hdc-band--inverse :where(h1, h2, h3, h4, a:not(.wp-element-button)) {
	color: var(--wp--preset--color--on-inverse);
}

/* Content inside a band stays within container-max; running text within measure. */
.wp-block-spectra-container.hdc-band__inner {
	width: 100%;
	max-width: var(--wp--custom--container-max);
	margin-inline: auto;
	align-self: center;
	gap: var(--wp--preset--spacing--6);
}
/* Link or button row at the foot of a band (the design system's Band: wrapping row, space-3 gap). */
.wp-block-spectra-container.hdc-band__more {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-3);
}

/* Bands that hold an Amelia booking form are core Groups, not Spectra containers: Spectra strips the
   <script> Amelia prints beside each form, so a form inside any Spectra container never loads.
   Same look as the Spectra bands above. */
.wp-block-post-content.has-global-padding > .wp-block-group.hdc-band.alignfull {
	margin-left: 0;
	margin-right: 0;
	width: auto;
	max-width: none;
}
/* Spectra Blocks zeroes the side padding of every core Group (`.wp-block-group.is-layout-flow.wp-block-group-is-layout-flow`),
   so the padding rule needs the extra specificity of the post-content prefix. */
.wp-block-post-content > .wp-block-group.hdc-band.alignfull {
	padding: var(--space-7) var(--space-4);
}
@media (min-width: 640px) {
	.wp-block-post-content > .wp-block-group.hdc-band.alignfull {
		padding: var(--space-8) var(--space-5);
	}
}
@media (min-width: 1024px) {
	.wp-block-post-content > .wp-block-group.hdc-band.alignfull {
		padding: var(--space-9) var(--space-6);
	}
}
.wp-block-group.hdc-band {
	box-sizing: border-box;
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--ink);
}
.wp-block-group.hdc-band--sunken {
	background: var(--wp--preset--color--surface-sunken);
}
.wp-block-group.hdc-band__inner {
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: var(--wp--custom--container-max);
	margin-inline: auto;
	gap: var(--wp--preset--spacing--6);
}

/* Stacks space their children with gap only; no stray paragraph or heading margins. */
.wp-block-spectra-container[class*="hdc-"] > .wp-block-spectra-content {
	margin-block: 0;
}
.wp-block-spectra-container.hdc-measure {
	gap: var(--wp--preset--spacing--4);
}
.hdc-measure {
	max-width: var(--wp--custom--measure);
}

/* Bullet lists (Spectra list): the bullet sits on the text's left edge, not indented by the list's
   40px padding and the item container's default 10px. */
.wp-block-spectra-list.hdc-list {
	padding-left: 0;
}
.hdc-list .spectra-list-item > .wp-block-spectra-container {
	padding: 0;
}
/* Each bullet sits beside the item's first line, not halfway down a long item. */
.hdc-list .spectra-list-item {
	align-items: flex-start;
}
.hdc-list .spectra-list-icon {
	height: var(--wp--custom--type--body--line-height);
	align-items: center;
}

/* ---------- Section head: eyebrow, heading, intro ---------- */

/* Text styles on Spectra content blocks repeat the selector with .wp-block-spectra-content: Spectra's inline
   ".wp-block-spectra-content:not(h1, …) { line-height: inherit }" otherwise outranks a single class. */

.wp-block-spectra-container.hdc-section-head {
	gap: var(--wp--preset--spacing--3);
	max-width: var(--wp--custom--measure);
}

.hdc-eyebrow,
.wp-block-spectra-content.hdc-eyebrow {
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--custom--type--eyebrow--font-size);
	line-height: var(--wp--custom--type--eyebrow--line-height);
	font-weight: var(--wp--custom--type--eyebrow--font-weight);
	letter-spacing: var(--wp--custom--type--eyebrow--letter-spacing);
	text-transform: uppercase;
	color: var(--wp--preset--color--hype-blue-deep);
}

.hdc-intro,
.wp-block-spectra-content.hdc-intro {
	margin: 0;
	font-size: var(--wp--preset--font-size--body-lg);
	line-height: var(--wp--custom--type--body-lg--line-height);
}

/* ---------- Brand name and tagline ---------- */

.hdc-brand-name {
	display: inline-flex;
	flex-direction: column;
	align-self: flex-start;
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	color: var(--wp--preset--color--ink);
	text-transform: uppercase;
}
.hdc-brand-name__main {
	font-size: var(--wp--custom--type--brand-name--font-size);
	line-height: var(--wp--custom--type--brand-name--line-height);
	font-weight: var(--wp--custom--type--brand-name--font-weight);
	letter-spacing: var(--wp--custom--type--brand-name--letter-spacing);
}
/* "COMPANY" at about 70% of the name, right-aligned under "DANCE" as in the logo. */
.hdc-brand-name__sub {
	align-self: flex-end;
	margin-top: var(--wp--preset--spacing--2);
	margin-right: calc(var(--wp--custom--type--wordmark-light--letter-spacing) * -1);
	font-size: calc(var(--wp--custom--type--brand-name--font-size) * 0.7);
	line-height: 1;
	font-weight: var(--wp--custom--type--wordmark-light--font-weight);
	letter-spacing: var(--wp--custom--type--wordmark-light--letter-spacing);
}

.hdc-tagline,
.wp-block-spectra-content.hdc-tagline {
	margin: 0;
	font-size: var(--wp--preset--font-size--body-lg);
	line-height: var(--wp--custom--type--body-lg--line-height);
	color: var(--wp--preset--color--ink-muted);
}

/* ---------- Hero: text beside a photo on a hype-blue disc ---------- */

.wp-block-spectra-container.hdc-hero {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--wp--preset--spacing--7);
	align-items: center;
}
.wp-block-spectra-container.hdc-hero__text {
	gap: var(--wp--preset--spacing--5);
}
.wp-block-spectra-container.hdc-hero__media {
	position: relative;
	isolation: isolate;
	padding: var(--wp--preset--spacing--5) var(--wp--preset--spacing--5) 0 0;
}
/* The signature disc, echoing the logo, sitting behind the photo. */
.wp-block-spectra-container.hdc-hero__media::before {
	content: "";
	position: absolute;
	z-index: -1;
	top: 0;
	right: 0;
	width: 72%;
	aspect-ratio: 1;
	border-radius: 50%;
	background: var(--wp--preset--color--hype-blue);
}
.hdc-hero__img,
.hdc-hero__img img {
	margin: 0;
	width: 100%;
	height: auto;
	border-radius: var(--wp--custom--radius--lg);
}
@media (min-width: 1024px) {
	.wp-block-spectra-container.hdc-hero {
		grid-template-columns: 1fr 1fr;
		gap: var(--wp--preset--spacing--9);
	}
}

/* ---------- Grids of cards: 1 / 2 / 3 columns ---------- */

.wp-block-spectra-container.hdc-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--wp--preset--spacing--6);
	align-items: stretch;
}
/* Cards fill their grid cell so every card in a row is the same height. */
.wp-block-spectra-container.hdc-grid > * {
	height: auto;
	min-width: 0;
	align-self: stretch;
}
@media (min-width: 640px) {
	.wp-block-spectra-container.hdc-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
@media (min-width: 1024px) {
	.wp-block-spectra-container.hdc-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
	/* A pair of cards (e.g. the adult and kids timetables) stays two across. */
	.wp-block-spectra-container.hdc-grid--2 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* ---------- Timetables: one panel per day (Timetable component), two across on desktop ---------- */

.hdc-timetable-grid {
	display: grid;
	width: 100%; /* Spectra's flex column would otherwise shrink it to its content. */
	grid-template-columns: 1fr;
	gap: var(--wp--preset--spacing--6);
	align-items: start;
}
@media (min-width: 1024px) {
	.hdc-timetable-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}
/* The row's Book or Contact link: a full tap target, lined up with the row's text on phones. */
.hdc-timetable__action.hdc-btn--link {
	justify-self: start;
	min-height: var(--wp--custom--tap-target);
}
/* Phones: the component stacks every cell; keep the link beside the time and class so each row stays short. */
@media (max-width: 560px) {
	.hdc-timetable__row:has(.hdc-timetable__action) {
		grid-template-columns: 1fr auto;
		column-gap: var(--wp--preset--spacing--4);
	}
	.hdc-timetable__row:has(.hdc-timetable__action) > :not(.hdc-timetable__action) {
		grid-column: 1;
	}
	.hdc-timetable__row > .hdc-timetable__action {
		grid-column: 2;
		grid-row: 1 / span 2;
		align-self: center;
	}
}

/* Tags and buttons keep their own width inside vertical stacks. */
.hdc-card > .hdc-tag,
.hdc-card__tags,
.wp-block-spectra-buttons {
	align-self: flex-start;
}
.wp-block-spectra-container.hdc-card__tags {
	flex-direction: row;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--2);
}
.hdc-card .wp-block-spectra-buttons {
	margin-top: auto;
	padding-top: var(--wp--preset--spacing--2);
}

/* Spectra buttons carry WordPress's button classes; the hdc-btn variants decide the look. */
.wp-block-spectra-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--3);
}
.wp-block-spectra-button.hdc-btn:not(.hdc-btn--link) {
	min-height: var(--wp--custom--tap-target);
	padding: var(--wp--preset--spacing--3) var(--wp--preset--spacing--5);
}

/* ---------- Post cards (What's on and the News listing) ---------- */

/* Like every card (ClassCard README): the text sits in the card's space-5 padding with no padding of its own,
   the 16:9 photo is pulled out to the card's edges at the top, and the photo sits space-4 above the text. */
.hdc-post-card,
.wp-block-spectra-container.hdc-post-card {
	padding: var(--wp--preset--spacing--5);
	gap: var(--wp--preset--spacing--4);
	overflow: hidden;
	height: 100%;
}
/* An explicit width, not stretch alone: the Spectra card's flex column uses align-items: flex-start, and Safari
   on iPhone otherwise sized the first (eagerly loaded) photo from the image, at about half the card. */
.hdc-post-card .wp-block-post-featured-image {
	margin: calc(-1 * var(--wp--preset--spacing--5)) calc(-1 * var(--wp--preset--spacing--5)) 0;
	align-self: stretch;
	width: calc(100% + 2 * var(--wp--preset--spacing--5));
}
.hdc-post-card .wp-block-post-featured-image img {
	border-radius: 0;
}
.wp-block-spectra-container.hdc-post-card__body {
	padding: 0;
	gap: var(--wp--preset--spacing--3);
}
.hdc-post-card .wp-block-post-title {
	margin: 0;
	font-size: var(--wp--preset--font-size--h-3);
	line-height: var(--wp--custom--type--h-3--line-height);
}
.hdc-post-card .wp-block-post-title a {
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}
.hdc-post-card .wp-block-post-title a:hover {
	text-decoration: underline;
}
.hdc-post-card .wp-block-post-excerpt,
.hdc-post-card .wp-block-post-excerpt__excerpt {
	margin: 0;
	color: var(--wp--preset--color--ink-muted);
}

/* ---------- Pull quote ----------
   The Quote component (mark, grid, type) lives in components.css. Spectra renders the figure as a flex
   container and gives its content blocks inherited line-height and no margins, so restore the component's
   grid, type and credit spacing here. Sizes come from the `quote` text style (mobile sizes in tokens.css). */

.wp-block-spectra-container.hdc-quote {
	display: grid;
	column-gap: var(--wp--preset--spacing--6);
	row-gap: 0;
}
.wp-block-spectra-container.hdc-quote > .wp-block-spectra-content.hdc-quote__text {
	font-size: var(--wp--custom--type--quote--font-size);
	line-height: var(--wp--custom--type--quote--line-height);
	font-weight: var(--wp--custom--type--quote--font-weight);
}
.wp-block-spectra-container.hdc-quote > .wp-block-spectra-content.hdc-quote__cite {
	margin-top: var(--wp--preset--spacing--4);
	line-height: var(--wp--custom--type--small--line-height);
}

/* ---------- Header ---------- */

/* The template part's wrapper is what sticks: the header's panels and drawer are positioned inside .hdc-header. */
header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 100;
}
.admin-bar header.wp-block-template-part {
	top: var(--wp-admin--admin-bar--height, 32px);
}
/* Phones (600px and under): WordPress lets the admin bar scroll away, so the header sticks at the very top.
   Logged-in customers see the admin bar too, so this isn't admin-only. */
@media (max-width: 600px) {
	.admin-bar header.wp-block-template-part {
		top: 0;
	}
}
/* The open phone/tablet menu covers the whole screen, so it must sit above the admin bar (z-index 99999),
   or the bar hides the menu's close button. The drawer lives inside the sticky header, which sets its own
   stacking level, so lift the header while the drawer is open. */
.admin-bar header.wp-block-template-part:has(.hdc-drawer:not([hidden])) {
	z-index: 100000;
}
/* The header is 64px high on phones (the drawer's top row matches). */
@media (max-width: 1023px) {
	:root {
		--wp--custom--header-height: 64px;
	}
}
/* Phones: logo, Book now and the menu button. Book now sits beside the menu button, on the right. */
.hdc-header .hdc-header__inner > * {
	margin-block: 0;
}
/* Phones and tablets: no Book now in the bar (Alex, 2026-10-25). It wrapped onto two lines on small phones,
   and the open menu has its own full-width Book now. The menu button sits on the right. */
@media (max-width: 1023px) {
	.hdc-header .hdc-header__book {
		display: none;
	}
}
/* The panels sit above the scrim that dims the page (the scrim is z-index 40). */
.hdc-mega {
	z-index: 45;
	/* The panel continues the header in one solid colour (Alex, 2026-10-25): no shadow cast upwards onto it… */
	clip-path: inset(0 -64px -64px -64px);
}
/* …and no header rule between them while a menu is open. */
.admin-bar .hdc-scrim {
	top: calc(var(--header-height) + var(--wp-admin--admin-bar--height, 32px));
}
/* Column one holds a second group under a rule; See all classes sits at the foot of the Adults column. */
/* Menu links in regular weight, so the bold group headings stand apart from them (Alex, 2026-10-25).
   "See all classes" keeps its own 600 weight. */
.hdc-mega__links a,
.hdc-drawer__sub a:not(.hdc-btn) {
	font-weight: 400;
}
/* Tie each heading to its own list: drop the column gap under the heading. The links' 10px padding
   (part of their 48px tap area) is then the only space between heading and first link. */
/* Focus rings are for keyboard use only: none after a mouse click or tap. */
.hdc-drawer__row:focus-visible,
.hdc-drawer__close:focus-visible,
.hdc-drawer__sub a:focus-visible,
.hdc-mega a:focus-visible,
.hdc-feature a:focus-visible {
	outline: 3px solid var(--wp--preset--color--focus-ring);
	outline-offset: -3px;
}
/* About's list opens under its own button. */
/* The featured card is a plain article in the panel and a link in the drawer. */
.hdc-feature p {
	margin: 0;
}
.hdc-feature .hdc-btn {
	align-self: flex-start;
	margin-top: var(--wp--preset--spacing--2);
}
.hdc-drawer__top .hdc-logo img {
	height: 48px; /* same as the header logo */
}
.hdc-drawer__top .hdc-header__menu {
	margin-left: 0;
}

/* The logo: light version by default; the reversed one where the ground is dark. */
.hdc-logo {
	display: block;
	margin: 0;
	line-height: 0;
}
.hdc-logo img {
	display: block;
	width: auto;
	height: 48px;
}
.hdc-logo--reversed {
	display: none;
}

/* ---------- Footer ---------- */

/* The component's own CSS (.hdc-footer, __grid, __col, __note, __legal) comes from the design system bundle in
   components.css. These rules fit it to WordPress: core Groups add flow margins, the logo is a pair of images,
   the social icons sit on navy, and a few lines the bundle leaves to the page. */
.hdc-footer__grid > *,
.hdc-footer__col > *,
.hdc-footer__col p,
.hdc-footer__legal p {
	margin-block: 0;
}
/* Newsletter strip: heading and line beside Fluent Form 2 (email field and Sign up), wrapping on phones.
   The bundle lays out the strip; these rules fit the Fluent form into it on navy. */
.hdc-footer__news-inner > * {
	margin-block: 0;
}
.hdc-footer__news-form .fluentform,
.hdc-footer__news-form .fluentform form {
	margin: 0;
}
.hdc-footer__news-form .fluentform fieldset {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--3);
	margin: 0;
	padding: 0;
	border: 0;
}
/* Fluent's hidden legend and empty helper paragraphs would each take a gap in the row. */
.hdc-footer__news-form .fluentform fieldset > :not(.ff-el-group) {
	position: absolute;
}
.hdc-footer__news-form .fluentform .ff-el-group {
	flex: 1 1 220px;
	margin-bottom: 0;
}
.hdc-footer__news-form .fluentform .ff_submit_btn_wrapper {
	flex: 0 0 auto;
	margin: 0;
	/* Line the button up with the field, below the label: label line height plus its gap. */
	padding-top: calc(22px + var(--wp--preset--spacing--2));
}
.hdc-footer__news-form .fluentform .ff-el-input--label {
	display: block;
	margin-bottom: var(--wp--preset--spacing--2);
	padding: 0;
	line-height: 22px;
}
/* The field matches the 48px Sign up button. */
.hdc-footer__news-form .fluentform .ff-el-form-control {
	min-height: var(--wp--custom--tap-target);
}
.hdc-footer__news-form .fluentform .ff-el-input--label label {
	display: block;
	color: var(--on-inverse);
	font-size: 15px;
	line-height: 22px;
	font-weight: 600;
}
.hdc-footer__news-form .fluentform .ff-el-input--label.ff-el-is-required.asterisk-right label::after {
	color: var(--on-inverse);
}
/* Messages on navy: the error under the field and the thank-you that replaces the form. */
.hdc-footer__news-form .fluentform .error,
.hdc-footer__news-form .fluentform .text-danger {
	color: var(--on-inverse);
	font-size: 15px;
	line-height: 22px;
	margin-top: var(--wp--preset--spacing--2);
}
/* The thank-you on navy: no pale panel (too loud here) but the same tick and a thin outline in the design system's
   success-on-inverse (8.8:1 on navy). Text stays on-inverse. The extra .hdc-footer outranks the general panel rule
   in fluent-forms.css, which loads after this file. */
.hdc-footer .hdc-footer__news-form .ff-message-success {
	margin: 0;
	padding: var(--wp--preset--spacing--3) var(--wp--preset--spacing--4) var(--wp--preset--spacing--3) calc(var(--wp--preset--spacing--4) + 32px);
	border: 1px solid var(--success-on-inverse);
	border-radius: var(--wp--custom--radius--lg);
	background: transparent;
	color: var(--on-inverse);
	font-size: 15px;
	line-height: 22px;
	/* Two even lines rather than one word ("up.") left on its own. */
	text-wrap: balance;
}
.hdc-footer .hdc-footer__news-form .ff-message-success::before {
	left: var(--wp--preset--spacing--3);
	top: calc(var(--wp--preset--spacing--3) - 1px);
	background-color: var(--success-on-inverse);
}
.hdc-footer .hdc-logo--reversed {
	display: block;
}
.hdc-footer .hdc-logo--light {
	display: none;
}
.hdc-footer .hdc-logo img {
	display: block;
	height: 64px;
	width: auto;
}
.hdc-footer__tagline {
	font-size: var(--wp--preset--font-size--body-lg);
	line-height: var(--wp--custom--type--body-lg--line-height);
}
/* Column text is quiet, like the bundle's .hdc-footer__note (on-inverse at 78%, 15px): only the headings stand out.
   Links take the same colour and brighten to on-inverse on hover. The tagline keeps its own size. */
.hdc-footer .hdc-footer__col :is(address, p:not(.hdc-footer__tagline), ul:not(.hdc-social) li) {
	color: color-mix(in srgb, var(--on-inverse) 78%, var(--inverse-surface));
	font-size: 15px;
	line-height: 22px;
}
.hdc-footer .hdc-footer__col :is(address, p, ul:not(.hdc-social)) a {
	color: inherit;
	text-decoration: none;
}
.hdc-footer .hdc-footer__col :is(address, p, ul:not(.hdc-social)) a:hover {
	color: var(--on-inverse);
	text-decoration: underline;
}
.hdc-footer .hdc-footer__quiet {
	color: inherit;
	text-decoration: none;
}
/* Spectra One zeroes the padding of flow Groups (.wp-block-group.is-layout-flow…), so the grid's padding from the
   bundle is set again here at a higher specificity. The side padding is the bundle's page gutter (--hdc-gutter,
   16 / 24 / 32px), outside the 1200px content box, so the columns line up with the page text (Alignment rules). */
.hdc-footer .wp-block-group.hdc-footer__grid.is-layout-flow {
	box-sizing: content-box;
	padding: var(--wp--preset--spacing--7) var(--hdc-gutter) var(--wp--preset--spacing--6);
}
/* The newsletter strip's inner Group gets the same fix, so it lines up with the columns below. */
.hdc-footer .wp-block-group.hdc-footer__news-inner.is-layout-flow {
	box-sizing: content-box;
	padding: var(--wp--preset--spacing--6) var(--hdc-gutter);
}
/* The bundle's column lists stack vertically; the social icons stay in a row, white on navy, with the first
   icon lined up with the text above. */
.hdc-footer .hdc-footer__col ul.wp-block-social-links.hdc-social {
	flex-direction: row;
	gap: 0;
	margin-inline-start: calc(-1 * (var(--tap-target) - 24px) / 2);
}
.hdc-footer .wp-block-social-links.hdc-social .wp-social-link,
.hdc-footer .wp-block-social-links.hdc-social .wp-social-link a {
	color: var(--wp--preset--color--on-inverse);
}

/* ---------- Page rhythm ---------- */

/* Bands sit edge to edge: no block gap between them, the header, main and footer. */
.wp-block-post-content > .hdc-band,
.wp-block-post-content > .hdc-band + .hdc-band {
	margin-block: 0;
}
.wp-site-blocks > .hdc-main,
.wp-site-blocks > footer {
	margin-block-start: 0;
}

/* PageHero (CSS in the design-system bundle) sits edge to edge like a band. */
.wp-block-post-content > .hdc-page-hero,
.wp-block-post-content > .hdc-page-hero + * {
	margin-block: 0;
}
/* WordPress pulls alignfull blocks out by the root padding, which post content doesn't have here (as for core bands). */
.wp-block-post-content.has-global-padding > .hdc-page-hero.alignfull {
	margin-left: 0;
	margin-right: 0;
	width: auto;
	max-width: none;
}
/* Paragraphs that follow the hero's intro, in the reading column under the panel. */

.hdc-note,
.wp-block-spectra-content.hdc-note,
.wp-block-spectra-content.hdc-card__meta {
	font-size: var(--wp--preset--font-size--small);
	line-height: var(--wp--custom--type--small--line-height);
	color: var(--wp--preset--color--ink-muted);
}

/* Hero logo: the full logo in place of typed text; reversed version in dark mode (dark.css). */
.hdc-hero__logo {
	margin: 0;
	line-height: 0;
}
.hdc-hero__logo img {
	display: block;
	width: auto;
	height: 80px;
}
.hdc-hero__logo .hdc-logo--reversed {
	display: none;
}
@media (min-width: 1024px) {
	.hdc-hero__logo img {
		height: 112px;
	}
}

/* Link-style buttons line up with the text above them (no 2px side border from the filled-button base). */
.wp-block-spectra-button.hdc-btn--link {
	border-left-width: 0;
	border-right-width: 0;
}

/* ---------- Links page (/links/): the social media "link in bio", page-links template ---------- */

.hdc-links-main {
	min-height: 100vh;
}
.wp-block-spectra-container.hdc-links {
	box-sizing: border-box;
	max-width: calc(440px + 2 * var(--wp--preset--spacing--4));
	margin: 0 auto;
	padding: var(--wp--preset--spacing--7) var(--wp--preset--spacing--4);
	align-items: center;
	gap: var(--wp--preset--spacing--3);
	text-align: center;
}
.hdc-links__logo img {
	height: 96px;
}
.wp-block-spectra-content.hdc-links__intro {
	margin: 0;
}
.wp-block-spectra-container.hdc-links__buttons {
	width: 100%;
	padding: 0;
	margin: var(--wp--preset--spacing--5) 0;
}
.hdc-links__buttons .wp-block-spectra-buttons {
	flex-direction: column;
	align-self: stretch;
	width: 100%;
}
.hdc-links__buttons .wp-block-spectra-button {
	width: 100%;
	justify-content: center;
	text-align: center;
}
.wp-block-spectra-content.hdc-links__site {
	margin: 0;
}

/* Maintenance mode (/maintenance-mode/): the Links column, centred on a full-height screen. */
.wp-block-spectra-container.hdc-maintenance {
	min-height: 100vh;
	justify-content: center;
	gap: var(--wp--preset--spacing--6);
}
.hdc-maintenance h1 {
	margin: 0;
}
.hdc-maintenance .wp-block-spectra-container.hdc-links__buttons {
	max-width: 280px;
	margin: var(--wp--preset--spacing--4) 0 0;
}
/* Jump links (e.g. "Jump to the timetable") land below the sticky header, not under it. */
.hdc-main [id] {
	scroll-margin-top: calc(var(--wp--custom--header-height) + var(--wp--preset--spacing--5));
}

/* ---------- Contact page (/contact-hype-dance-company/) ---------- */

/* FAQ: core Details blocks as raised cards, one per question. */
.wp-block-group.hdc-faq {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--3);
	max-width: var(--wp--custom--measure);
}
.hdc-faq .wp-block-details.hdc-faq__item {
	margin: 0;
	padding: var(--wp--preset--spacing--4) var(--wp--preset--spacing--5);
	background: var(--wp--preset--color--surface-raised);
	border-radius: var(--wp--custom--radius--lg);
	box-shadow: var(--wp--preset--shadow--card);
}
/* The card rule above outranks the design system's :hover, so repeat it here (hover devices only, as there). */
@media (hover: hover) {
	.hdc-faq .wp-block-details.hdc-faq__item:hover {
		box-shadow: var(--wp--preset--shadow--raised);
	}
}
.hdc-faq .hdc-faq__item summary {
	min-height: var(--wp--custom--tap-target);
	display: flex;
	align-items: center;
	cursor: pointer;
	font-weight: 700;
}
.hdc-faq .hdc-faq__item[open] summary {
	margin-bottom: var(--wp--preset--spacing--3);
}
.hdc-faq .hdc-faq__item p {
	margin: 0 0 var(--wp--preset--spacing--4);
}
.hdc-faq .hdc-faq__item p:last-child {
	margin-bottom: 0;
}
.hdc-faq .hdc-faq__item ul {
	margin: 0 0 var(--wp--preset--spacing--4);
	padding-left: var(--wp--preset--spacing--5);
}

/* FAQ grouped under h3 headings: each group is its heading plus its cards. */
.wp-block-group.hdc-faq-group {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--4);
}
.hdc-faq-group > :is(.wp-block-spectra-content, .wp-block-heading) {
	margin-block: 0;
	scroll-margin-top: var(--wp--preset--spacing--6);
}

/* Form and contact details side by side on desktop. */
.wp-block-group.hdc-contact {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--wp--preset--spacing--7);
	align-items: start;
}
.wp-block-group.hdc-contact__form,
.wp-block-group.hdc-contact__details {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--5);
	min-width: 0;
}
.wp-block-spectra-container.hdc-contact__item {
	padding: 0;
	gap: var(--wp--preset--spacing--2);
}
.hdc-contact__item > .wp-block-spectra-content {
	margin-block: 0;
}
@media (min-width: 1024px) {
	.wp-block-group.hdc-contact {
		grid-template-columns: 3fr 2fr;
		gap: var(--wp--preset--spacing--9);
	}
}

/* Trustindex's Google widget is styled for a dark page: its header (logo, name, "49 Google reviews") is white text.
   On our light band, darken just that header; the review cards keep their own dark style. */
.hdc-band .ti-widget.ti-goog .ti-footer :is(.ti-name, .ti-rating-text, .ti-rating-text strong, .ti-rating-text span) {
	color: var(--wp--preset--color--ink);
}

/* Social icons (design system hdc-social): logos only, one colour, 24px in a 48px tap target, no brand colours or
   background. Core's Logos only style still colours each network (e.g. `.is-style-logos-only .wp-social-link-facebook`),
   so the colour is set on the link and the logo takes it through currentColor. */
.wp-block-social-links.hdc-social {
	gap: var(--space-2);
	margin: 0;
	padding: 0;
}
.wp-block-social-links.hdc-social .wp-social-link {
	background: none;
	color: var(--hype-blue-deep);
}
.hdc-social .wp-social-link a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: var(--tap-target);
	min-height: var(--tap-target);
	padding: 0;
	color: var(--hype-blue-deep);
	background: none;
}
.hdc-social .wp-social-link svg {
	width: 24px;
	height: 24px;
	fill: currentColor;
}
.hdc-social .wp-social-link a:hover {
	color: var(--ink);
}
.hdc-social .wp-social-link a:focus-visible {
	outline: 3px solid var(--focus-ring);
	outline-offset: 2px;
	border-radius: var(--radius-sm);
}
.hdc-band--inverse .hdc-social .wp-social-link a {
	color: var(--on-inverse);
}

/* Getting to us: directions, then the map. */
.wp-block-group.hdc-map {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--5);
}
.hdc-map .hdc-map__frame {
	display: block;
	width: 100%;
	height: 500px;
	border: 0;
	border-radius: var(--wp--custom--radius--lg);
}
@media (max-width: 639px) {
	.hdc-map .hdc-map__frame {
		height: 360px;
	}
}
/* Leaflet map (assets/js/map.js). No-JS fallback: the address, centred in the empty box. */
.hdc-map .hdc-map__map {
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--wp--preset--color--surface-sunken);
	font-family: var(--wp--preset--font-family--body);
	z-index: 0; /* keep Leaflet's panes under the sticky header */
}
.hdc-map .hdc-map__map.leaflet-container {
	display: block;
}
/* Our pin: a hype-blue drop with a white centre, point at the door. */
.hdc-map__pin span {
	display: block;
	width: 32px;
	height: 32px;
	border-radius: 50% 50% 50% 0;
	background: var(--wp--preset--color--hype-blue);
	border: 3px solid #fff;
	box-shadow: var(--wp--preset--shadow--card);
	transform: rotate(-45deg);
	box-sizing: border-box;
}
.hdc-map__pin span::after {
	content: "";
	position: absolute;
	inset: 0;
	margin: auto;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #fff;
}
/* The name label above the pin, always shown. */
.leaflet-tooltip.hdc-map__label {
	padding: 6px 12px;
	border: 0;
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--hype-blue);
	color: var(--wp--preset--color--on-brand);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	box-shadow: var(--wp--preset--shadow--card);
}
.leaflet-tooltip-top.hdc-map__label::before {
	border-top-color: var(--wp--preset--color--hype-blue);
}

/* ---------- Beginner course pages (/beginner-…-course-in-sheffield/) ---------- */

/* Long reading. Contemporary: each h2 and its paragraphs is one hdc-measure column, topics space-7 apart and a
   heading space-5 from its text (space-4 gap + space-1). Tap: sections of heading + text on one band. */
.wp-block-spectra-container.hdc-article {
	padding: 0;
	gap: var(--wp--preset--spacing--7);
}
.wp-block-spectra-container.hdc-measure > .wp-block-spectra-content:is(h2, h3) {
	margin-bottom: var(--wp--preset--spacing--1);
}
/* Core headings (anchored_heading, for jump links, e.g. the terms page) sit the same way. */
.wp-block-spectra-container.hdc-measure > .wp-block-heading:is(h2, h3) {
	margin-block: 0 var(--wp--preset--spacing--1);
}
.wp-block-spectra-container:is(.hdc-prose, .hdc-prose__section) {
	padding: 0;
}
.wp-block-spectra-container.hdc-prose {
	gap: var(--wp--preset--spacing--7);
}
.wp-block-spectra-container.hdc-prose__section {
	gap: var(--wp--preset--spacing--5);
}

/* Photos on all three course pages: 1 / 2 / 3 columns, all cropped to 4:3 with the shared 12px corner.
   Ballet puts core Image blocks in an hdc-grid; contemporary and tap use a core Gallery, whose images core
   sizes with an id-weighted :not(#individual-image) selector, so the overrides repeat it. */
.hdc-gallery .wp-block-image {
	margin: 0;
}
.hdc-band .wp-block-gallery.has-nested-images.hdc-gallery {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--wp--preset--spacing--6);
	margin: 0;
}
/* Every photo fills its grid cell whatever the count. !important because core gives a two-image gallery 50% widths
   (":first-child:nth-last-child(2)" and its "~" sibling, two :not(#id)s, in a media query), which out-rank this. */
.hdc-band .wp-block-gallery.has-nested-images.hdc-gallery figure.wp-block-image:not(#individual-image) {
	width: auto !important;
	margin: 0;
}
.hdc-gallery .wp-block-image img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: var(--wp--custom--radius--lg);
}
@media (min-width: 640px) {
	.hdc-band .wp-block-gallery.has-nested-images.hdc-gallery {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (min-width: 1024px) {
	.hdc-band .wp-block-gallery.has-nested-images.hdc-gallery {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* Amelia's "Book the course" trigger: a core button with inline padding and radius that has to stay as
   Amelia saved it. Styled here as the blue primary button (hdc-btn--primary), 48px tall; !important beats the
   inline style. One rule, so the Ballet, Contemporary and Tap course buttons and the Christmas intensive's match.
   (Plum until 2026-10-27, when the design system retired the adult button: every filled button is blue.) */
.amelia-events-list-booking-button-trigger .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--wp--custom--tap-target);
	padding: var(--wp--preset--spacing--3) var(--wp--preset--spacing--5) !important;
	border: 2px solid transparent;
	border-radius: var(--wp--custom--radius--pill) !important;
	background: var(--wp--preset--color--hype-blue);
	color: var(--wp--preset--color--on-brand);
	font-family: var(--wp--preset--font-family--body);
	font-size: 16px;
	line-height: 20px;
	font-weight: 700;
	text-decoration: none;
	cursor: pointer;
	transition: transform 150ms ease-out, box-shadow 150ms ease-out, background-color 150ms ease-out;
}
.amelia-events-list-booking-button-trigger .wp-block-button__link:hover {
	background: var(--wp--preset--color--hype-blue-hover);
	color: var(--wp--preset--color--on-brand);
}
@media (hover: hover) {
	.amelia-events-list-booking-button-trigger .wp-block-button__link:hover {
		transform: translateY(-1px);
		box-shadow: var(--wp--preset--shadow--card);
	}
}
.amelia-events-list-booking-button-trigger .wp-block-button__link:focus-visible {
	outline: 3px solid var(--wp--preset--color--focus-ring);
	outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
	.amelia-events-list-booking-button-trigger .wp-block-button__link {
		transition: none;
	}
	.amelia-events-list-booking-button-trigger .wp-block-button__link:hover {
		transform: none;
	}
}

/* ---------- Dance classes overview (/dance-classes-in-sheffield/) ---------- */

/* ---------- Class group (pattern `class-group`) ----------
   One full-width band per group of classes. Text on the left within the measure; the Cost / How to start
   panel on the right (the design system's raised card, `hdc-card`), under the text on phones. Bands
   alternate surface and sunken down the page, so the edge between groups shows when scrolling. */

.wp-block-spectra-container:is(.hdc-split, .hdc-split__main) {
	padding: 0;
}
.wp-block-spectra-container.hdc-split {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--wp--preset--spacing--6);
	align-items: start;
}
.wp-block-spectra-container.hdc-split__main {
	gap: var(--wp--preset--spacing--5);
	min-width: 0;
}
.wp-block-spectra-container.hdc-panel {
	padding: var(--wp--preset--spacing--5);
	gap: var(--wp--preset--spacing--3);
}
.wp-block-spectra-container.hdc-panel > .wp-block-spectra-content {
	margin: 0;
}
@media (min-width: 1024px) {
	.wp-block-spectra-container.hdc-split {
		grid-template-columns: minmax(0, var(--wp--custom--measure)) minmax(0, 420px);
		column-gap: var(--wp--preset--spacing--9);
	}
}
/* A featured quote under the text gets a generous gap above it (the band's own gap is the 24px between blocks). */
.wp-block-spectra-container:is(.hdc-split, .hdc-grid) ~ .wp-block-spectra-container.hdc-quote {
	margin-top: var(--wp--preset--spacing--7);
}

/* A second, quieter quote inside a section, for a page's second testimonial (the featured Quote is the first).
   No coral mark and no rule: it's set apart by size and its credit line alone. */
/* The design system's coral line down the left (3px; space-5 before the text, space-4 on phones). Spectra sets its
   own container padding, so it is repeated here. */
.wp-block-spectra-container.hdc-inline-quote {
	margin: 0;
	padding: 0 0 0 var(--wp--preset--spacing--5);
	border-left: 3px solid var(--coral);
	gap: var(--wp--preset--spacing--2);
	max-width: var(--wp--custom--measure);
}
@media (max-width: 639px) {
	.wp-block-spectra-container.hdc-inline-quote {
		padding-left: var(--wp--preset--spacing--4);
	}
}
/* Breathing space: 16px more above each inline quote and below the last of a run, so in a 32px band column they sit
   48px (space-7) from the photos, from each other and from the text after them (Alex, 2026-10-30). */
.wp-block-spectra-container.hdc-inline-quote {
	margin-top: var(--wp--preset--spacing--4);
}
.wp-block-spectra-container.hdc-inline-quote:not(:has(+ .hdc-inline-quote)) {
	margin-bottom: var(--wp--preset--spacing--4);
}
.wp-block-spectra-container.hdc-inline-quote > .wp-block-spectra-content.hdc-inline-quote__text {
	margin: 0;
	font-size: var(--wp--preset--font-size--body-lg);
	line-height: var(--wp--custom--type--body-lg--line-height);
	color: var(--wp--preset--color--ink);
}
.wp-block-spectra-container.hdc-inline-quote > .wp-block-spectra-content.hdc-inline-quote__text p {
	margin: 0;
}
.wp-block-spectra-container.hdc-inline-quote > .wp-block-spectra-content.hdc-inline-quote__cite {
	font-size: var(--wp--preset--font-size--small);
	line-height: var(--wp--custom--type--small--line-height);
	color: var(--wp--preset--color--ink-muted);
}

/* ---------- Block editor only ----------
   On the front end a Spectra container's children are its direct children. In the editor they sit inside
   `.block-editor-inner-blocks > .wp-block-spectra-container-is-layout-flex`, so a grid on the container
   has a single item and everything lands in the first column (the featured quote's text was squeezed into
   its 72px mark column). Make those two wrappers disappear for the containers we lay out as grids.
   Flex containers are left alone: Spectra puts their flex layout on the inner wrapper. */
.editor-styles-wrapper :is(.wp-block-spectra-container.hdc-hero, .wp-block-spectra-container.hdc-grid,
	.wp-block-spectra-container.hdc-quote,
	.wp-block-spectra-container.hdc-split)
	> .block-editor-inner-blocks,
.editor-styles-wrapper :is(.wp-block-spectra-container.hdc-hero, .wp-block-spectra-container.hdc-grid,
	.wp-block-spectra-container.hdc-quote,
	.wp-block-spectra-container.hdc-split)
	> .block-editor-inner-blocks > .wp-block-spectra-container-is-layout-flex {
	display: contents;
}

/* Editor only: Spectra gives a container with no Spectra parent (`spectra-is-root-container`) auto side
   margins. Inside our core Group bands, which are flex columns, that shrinks each one to its content and
   centres it (the contact details, one block per item). The front end has no such margins. */
.editor-styles-wrapper .wp-block-group > .wp-block-spectra-container.spectra-is-root-container {
	margin-left: 0;
	margin-right: 0;
}
/* Editor only: the HTML block's preview is a flex item in `.hdc-map` (align-items: flex-start), so the map
   shrank to a narrow box. On the front end the iframe itself is width: 100%. */
.editor-styles-wrapper .hdc-map > .wp-block-html {
	width: 100%;
	align-self: stretch;
}

/* Editor only: the editor marks a Spectra container with no Spectra parent (every one inside our core Group
   bands) as `spectra-is-root-container alignfull`, and Spectra's `body .spectra-is-root-container.alignfull
   { max-width: none }` (0,2,1) then beats our own width limits. Theme editor styles aren't prefixed in the
   iframe editor, so restate them with `.editor-styles-wrapper` (0,3,0). Same values as the rules above. */
.editor-styles-wrapper .wp-block-spectra-container.hdc-measure,
.editor-styles-wrapper .wp-block-spectra-container.hdc-section-head,
.editor-styles-wrapper .wp-block-spectra-container.hdc-inline-quote {
	max-width: var(--wp--custom--measure);
}
.editor-styles-wrapper .wp-block-spectra-container.hdc-quote {
	max-width: calc(var(--wp--custom--measure) + 104px);
}
/* A news post's body (hdc-prose) is a root container too. On the front end the post's constrained layout caps it at
   the measure; in the editor it lost that cap, grew as wide as its longest line and, centred, ran off both edges
   (Alex, 2026-10-26). Same column as the front end: the full measure, centred. The editor also treats it as a
   full-width block: Spectra's editor CSS has `.block-editor-block-list__layout.is-root-container >
   .spectra-is-root-container.alignfull { max-width: none !important }` (0,4,0), loaded after the theme. This rule is
   !important and one class more specific (0,5,0) so it wins (checked in Alex's editor, 2026-10-26). Saving from the
   editor can also write "align":"full" into the post (seen on live, 2026-10-30), so the front-end rule below covers that. */
.block-editor-block-list__layout.is-root-container > .wp-block-spectra-container.hdc-prose.spectra-is-root-container.alignfull {
	box-sizing: border-box;
	width: 100% !important;
	max-width: var(--wp--custom--measure) !important;
	margin-left: auto !important;
	margin-right: auto !important;
}
/* The Links page and maintenance page column (hdc-links) is a root container too, so in the editor it spread across
   the whole canvas and ran off the left edge (Alex, 2026-10-27). Same (0,5,0) !important fix, same width as the front
   end. Spectra also puts a flex container's layout on its inner wrapper in the editor, so centre the column there. */
.block-editor-block-list__layout.is-root-container > .wp-block-spectra-container.hdc-links.spectra-is-root-container.alignfull {
	box-sizing: border-box;
	width: 100% !important;
	max-width: calc(440px + 2 * var(--wp--preset--spacing--4)) !important;
	margin-left: auto !important;
	margin-right: auto !important;
}
/* Front end: when a post is saved from the editor, Spectra can store "align":"full" on the post body (hdc-prose) or the
   Links column (hdc-links). WordPress then lifts the width limit and pulls the block out to the page edge, so the text
   sat hard left (post 2702, Alex, 2026-10-30). These columns are never meant to be full width: keep their usual width,
   centred. (0,3,1) beats WordPress's `.is-layout-constrained > .alignfull` / `.has-global-padding > .alignfull` and
   Spectra's `body .spectra-is-root-container.alignfull`. */
body .wp-block-spectra-container.hdc-prose.alignfull {
	max-width: var(--wp--custom--measure);
	margin-left: auto;
	margin-right: auto;
}
body .wp-block-spectra-container.hdc-links.alignfull {
	max-width: calc(440px + 2 * var(--wp--preset--spacing--4));
	margin-left: auto;
	margin-right: auto;
}
/* Front end: the same happens to Spectra containers inside our core-Group bands (the bands that hold Amelia forms).
   Saving from the editor stores "align":"full" on them, and Spectra's `body .spectra-is-root-container.alignfull
   { max-width: none }` (0,2,1) then stretched Make a booking's section heads and intro text across the page (live,
   Alex, 2026-10-30). Keep their usual widths: (0,3,1). */
body .wp-block-spectra-container.alignfull:is(.hdc-measure, .hdc-section-head, .hdc-inline-quote) {
	max-width: var(--wp--custom--measure);
}
body .wp-block-spectra-container.hdc-quote.alignfull {
	max-width: calc(var(--wp--custom--measure) + 104px);
}
.editor-styles-wrapper .wp-block-spectra-container.hdc-links > .block-editor-inner-blocks > .wp-block-spectra-container-is-layout-flex {
	align-items: center;
	gap: var(--wp--preset--spacing--3);
	text-align: center;
}

/* ---------- Studio hire (/dance-studio-hire-in-sheffield/) ---------- */

/* Amelia's "Book a studio" / "Book appointment" triggers (step-booking buttons): core buttons whose inline
   padding and radius have to stay as Amelia saved them. Styled as the blue primary button (hdc-btn--primary),
   48px tall, since studio hire isn't an adult-only page; !important beats the inline style. */
.amelia-step-booking-button-trigger .wp-block-button__link {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--wp--custom--tap-target);
	padding: var(--wp--preset--spacing--3) var(--wp--preset--spacing--5) !important;
	border: 2px solid transparent;
	border-radius: var(--wp--custom--radius--pill) !important;
	background: var(--wp--preset--color--hype-blue);
	color: var(--wp--preset--color--on-brand);
	font-family: var(--wp--preset--font-family--body);
	font-size: 16px;
	line-height: 20px;
	font-weight: 700;
	text-decoration: none;
	cursor: pointer;
	transition: transform 150ms ease-out, box-shadow 150ms ease-out, background-color 150ms ease-out;
}
.amelia-step-booking-button-trigger .wp-block-button__link:hover {
	background: var(--wp--preset--color--hype-blue-hover);
	color: var(--wp--preset--color--on-brand);
}
@media (hover: hover) {
	.amelia-step-booking-button-trigger .wp-block-button__link:hover {
		transform: translateY(-1px);
		box-shadow: var(--wp--preset--shadow--card);
	}
}
.amelia-step-booking-button-trigger .wp-block-button__link:focus-visible {
	outline: 3px solid var(--wp--preset--color--focus-ring);
	outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
	.amelia-step-booking-button-trigger .wp-block-button__link {
		transition: none;
	}
	.amelia-step-booking-button-trigger .wp-block-button__link:hover {
		transform: none;
	}
}

/* Card grid and cards built from core Groups, for cards that hold an Amelia button (the Prices cards).
   Same look as the Spectra grid and hdc-card. Spectra zeroes a core Group's side padding, hence the long
   selector for the card's padding. */
.wp-block-group.hdc-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--wp--preset--spacing--6);
	align-items: stretch;
}
.wp-block-group.hdc-grid > * {
	min-width: 0;
	margin: 0;
}
@media (min-width: 640px) {
	.wp-block-group.hdc-grid--2 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
.hdc-band__inner .wp-block-group.hdc-card.is-layout-flow.wp-block-group-is-layout-flow {
	padding: var(--wp--preset--spacing--5);
}
.wp-block-group.hdc-card > * {
	margin-block: 0;
}
.wp-block-group.hdc-card > .wp-block-spectra-content {
	margin-block: 0;
}
/* The card's button sits at the bottom, so buttons line up across the row. */
.wp-block-group.hdc-card > :is(.wp-block-amelia-step-booking-button-gutenberg-block, .wp-block-spectra-buttons) {
	margin-top: auto;
	padding-top: var(--wp--preset--spacing--2);
}

/* A single photo beside the text (Studio 3, the waiting area), under it on phones. */
.wp-block-spectra-container.hdc-split__media {
	padding: 0;
	min-width: 0;
}
.hdc-split__media .wp-block-image {
	margin: 0;
}
.hdc-split__media .wp-block-image img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: var(--wp--custom--radius--lg);
}

/* Card photo slot (the design system's hdc-card__media, here 4:3 rather than a 140px strip) on a Spectra card: the container's own padding,
   and the figure's margin, are reset so the photo fills the slot edge to edge. Empty placeholders keep the tint. */
.wp-block-spectra-container.hdc-card__media {
	box-sizing: border-box;
	width: calc(100% + var(--wp--preset--spacing--5) * 2);
	max-width: none;
	align-self: stretch;
	padding: 0;
	margin: calc(var(--wp--preset--spacing--5) * -1) calc(var(--wp--preset--spacing--5) * -1) 0;
	height: auto;
	aspect-ratio: 4 / 3;
	flex: none;
	overflow: hidden;
	border-radius: var(--wp--custom--radius--lg) var(--wp--custom--radius--lg) 0 0;
	background: var(--hype-blue-tint);
}
.hdc-card__media .wp-block-image {
	margin: 0;
	width: 100%;
	max-width: none;
}
.hdc-card__media .wp-block-image img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

/* Round profile photo at the top of a card (teacher cards). Empty placeholders keep the tint. */
.hdc-card__avatar,
.wp-block-spectra-container.hdc-card__avatar {
	box-sizing: border-box;
	width: 96px;
	height: 96px;
	max-width: none;
	flex: none;
	align-self: flex-start;
	margin: 0;
	padding: 0;
	overflow: hidden;
	border-radius: 50%;
	background: var(--hype-blue-tint);
}

/* Clickable card (hdc-card--link): the title is the card's one link, and its ::after covers the whole card,
   so the photo and role are tappable too. Hover raises the card (shadow-raised); keyboard focus rings the card. */
.wp-block-spectra-container.hdc-card--link {
	position: relative;
	transition: box-shadow 150ms ease-out, transform 150ms ease-out;
}
/* Spectra gives every child of a container position: relative, which would shrink the link's ::after to the
   title. Unset it inside the card so the ::after covers the whole card. */
.wp-block-spectra-container.hdc-card--link > * {
	position: static;
}
@media (prefers-reduced-motion: reduce) {
	.wp-block-spectra-container.hdc-card--link { transition: none; }
}

/* Team cards: the role under each name is a step larger than the usual card meta line (body, not small). */
.hdc-grid--team .wp-block-spectra-content.hdc-card__meta {
	font-size: var(--wp--preset--font-size--body);
	line-height: var(--wp--custom--type--body--line-height);
}

/* Team grid (About page): the first two cards (the directors) share a row, then rows of three.
   Six columns on desktop: the first two cards span three each, the rest two each. Two across from 640px. */
@media (min-width: 1024px) {
	.wp-block-spectra-container.hdc-grid--team {
		grid-template-columns: repeat(6, minmax(0, 1fr));
	}
	.wp-block-spectra-container.hdc-grid--team > * {
		grid-column: span 2;
	}
	.wp-block-spectra-container.hdc-grid--team > :nth-child(-n + 2) {
		grid-column: span 3;
	}
	/* Editor only: the cards sit inside two wrappers (made display: contents in the editor section below), so the
	   spans above miss them and each card took one of the six columns (Alex, 2026-10-27). Same spans, on the cards. */
	.editor-styles-wrapper .wp-block-spectra-container.hdc-grid--team > .block-editor-inner-blocks > .wp-block-spectra-container-is-layout-flex > * {
		grid-column: span 2;
	}
	.editor-styles-wrapper .wp-block-spectra-container.hdc-grid--team > .block-editor-inner-blocks > .wp-block-spectra-container-is-layout-flex > :nth-child(-n + 2) {
		grid-column: span 3;
	}
}

/* The Prices quote follows the card grid (a core Group, so the Spectra split rule above doesn't reach it). */
.wp-block-group.hdc-grid ~ .wp-block-spectra-container.hdc-quote {
	margin-top: var(--wp--preset--spacing--7);
}

/* ---------- News post template (templates/single.html) ---------- */

/* The band is a template-level core Group, so it needs its own padding (the .hdc-band rules above only reach
   bands inside post content). One surface from top to bottom. The extra .hdc-band outranks WordPress's
   ".wp-block-group.is-layout-flow … { padding-left: 0 }", which would remove the side gutter. */
.hdc-main > .wp-block-group.hdc-band.hdc-post {
	box-sizing: border-box;
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--ink);
	padding: var(--space-7) var(--space-4);
}
@media (min-width: 640px) {
	.hdc-main > .wp-block-group.hdc-band.hdc-post {
		padding: var(--space-8) var(--space-5);
	}
}
@media (min-width: 1024px) {
	.hdc-main > .wp-block-group.hdc-band.hdc-post {
		padding: var(--space-9) var(--space-6);
	}
}
/* Category eyebrow, title and date stack within the measure; the photo and the content follow space-6 apart. */
.hdc-post .wp-block-group.hdc-band__inner {
	gap: var(--wp--preset--spacing--6);
}
.hdc-post__head {
	box-sizing: border-box;
	width: 100%;
	max-width: var(--wp--custom--measure);
	margin-inline: auto;
	padding-inline: 0;
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--3);
}
/* WordPress's constrained layout centres children with !important auto margins, which centre shrink-wrapped
   items in this flex column; the head reads left-aligned, like the text below it. */
.hdc-post__head > * {
	margin: 0 !important;
	text-align: left;
}
.hdc-post__head .wp-block-post-terms a {
	color: inherit;
	text-decoration: none;
}
.hdc-post__img,
.hdc-post__img img {
	width: 100%;
	border-radius: var(--wp--custom--radius--lg);
}
/* The photo sits in the reading column, lined up with the title and text (Alex, 2026-10-25). Outranks the
   block's "wide" alignment from WordPress's constrained layout. */
.hdc-post .wp-block-post-featured-image.hdc-post__img {
	max-width: var(--wp--custom--measure);
	margin-inline: auto;
}
.hdc-post__img img {
	display: block;
	height: 100%;
	object-fit: cover;
}
/* The post's own blocks sit in the measure column with the same stack gap as a Spectra stack. */
.hdc-post .wp-block-post-content {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--5);
}
.hdc-post .wp-block-post-content > * {
	margin-block: 0;
}

/* ---------- News listing (the posts page) ----------
   A core Query so it can paginate. Two columns from 640px; on page 1 (no `paged` body class) the newest post
   is the wide feature card: photo left, text right. Cards are core Groups; the listing has no Amelia. */

.hdc-news-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--wp--preset--spacing--6);
	margin: 0;
	padding: 0;
	list-style: none;
}
.hdc-news-grid > li {
	margin: 0;
	min-width: 0;
}
/* Kept although the bundle has the same rule: the base rule above sets one column and loads after the bundle, so
   this repeat is what makes two columns from 640px. */
@media (min-width: 640px) {
	.hdc-news-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
.hdc-post-card .wp-block-post-featured-image img {
	display: block;
	width: 100%;
	height: auto;
	object-fit: cover;
}
.wp-block-group.hdc-post-card__body {
	display: flex;
	flex-direction: column;
	padding: 0;
	gap: var(--wp--preset--spacing--3);
}
.hdc-news-grid .hdc-post-card {
	display: flex;
	flex-direction: column;
	gap: 0;
}
.hdc-news-grid .hdc-post-card__body {
	flex: 1;
}

/* A post with no featured image: WordPress prints a grey placeholder icon; hide it so the card is just text. */
.hdc-post-card a:has(> figure.is-placeholder),
.hdc-post-card figure.is-placeholder {
	display: none;
}

/* Feature card (page 1 only). An image-less feature is just the text, full width. */
@media (min-width: 768px) {
	body:not(.paged) .hdc-news-grid > li:first-child {
		grid-column: 1 / -1;
	}
	body:not(.paged) .hdc-news-grid > li:first-child .hdc-post-card:has(.wp-block-post-featured-image) {
		display: grid;
		grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
		align-items: stretch;
	}
	body:not(.paged) .hdc-news-grid > li:first-child .wp-block-post-featured-image,
	body:not(.paged) .hdc-news-grid > li:first-child .wp-block-post-featured-image a {
		height: 100%;
	}
	body:not(.paged) .hdc-news-grid > li:first-child .wp-block-post-featured-image img {
		height: 100%;
		aspect-ratio: auto;
	}
	body:not(.paged) .hdc-news-grid > li:first-child .hdc-post-card__body {
		justify-content: center;
	}
	body:not(.paged) .hdc-news-grid > li:first-child .wp-block-post-title {
		font-size: var(--wp--preset--font-size--h-2);
		line-height: var(--wp--custom--type--h-2--line-height);
	}
}

/* Pagination: 48px pill links, current page filled (design system: ClassCard README, bundle.css).
   WordPress drops the className from core/query-pagination, so target the block's own class too. */
:is(.hdc-pagination, .wp-block-query-pagination) {
	margin-top: var(--wp--preset--spacing--7, var(--wp--preset--spacing--6));
	gap: var(--wp--preset--spacing--2);
}
:is(.hdc-pagination, .wp-block-query-pagination) .wp-block-query-pagination-numbers {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--wp--preset--spacing--2);
}
:is(.hdc-pagination, .wp-block-query-pagination) :is(a, .page-numbers) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: var(--wp--custom--tap-target);
	min-height: var(--wp--custom--tap-target);
	box-sizing: border-box;
	padding: 0 var(--wp--preset--spacing--3);
	border-radius: var(--wp--custom--radius--pill);
	font-weight: 700;
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}
:is(.hdc-pagination, .wp-block-query-pagination) a:hover {
	background: var(--wp--preset--color--surface-sunken);
}
:is(.hdc-pagination, .wp-block-query-pagination) .page-numbers.current {
	background: var(--wp--preset--color--hype-blue);
	color: var(--wp--preset--color--on-brand);
}
/* Previous/next arrows: Figtree's arrow character sits high, so draw Lucide's arrow-right (16px, the old character's size, currentColor) instead. */
:is(.hdc-pagination, .wp-block-query-pagination) :is(.wp-block-query-pagination-next-arrow, .wp-block-query-pagination-previous-arrow) {
	display: inline-block;
	flex: 0 0 16px;
	width: 16px;
	height: 16px;
	min-width: 0;
	min-height: 0;
	max-width: 16px;
	max-height: 16px;
	padding: 0;
	line-height: 0;
	margin-inline: var(--wp--preset--spacing--2) 0;
	font-size: 0;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E") center / contain no-repeat;
}
:is(.hdc-pagination, .wp-block-query-pagination) .wp-block-query-pagination-previous-arrow {
	margin-inline: 0 var(--wp--preset--spacing--2);
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5'/%3E%3Cpath d='m12 19-7-7 7-7'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5'/%3E%3Cpath d='m12 19-7-7 7-7'/%3E%3C/svg%3E");
}
:is(.hdc-pagination, .wp-block-query-pagination) a:focus-visible {
	outline: 3px solid var(--wp--preset--color--focus-ring);
	outline-offset: 2px;
}

/* The intro band and the listing under it share one surface: close the double band padding between them. */
.hdc-band:has(+ .hdc-news-band) {
	padding-bottom: var(--wp--preset--spacing--5);
}
.hdc-news-band {
	padding-top: 0;
}
/* The news band is in the template, not the page content, so the band padding rules above don't reach it and
   Spectra's zeroing of core Group padding left it with no gutter: cards ran to the screen edge below 1264px.
   Same gutter and bottom space as every other band (16 / 24 / 32px). */
.hdc-main > .wp-block-group.hdc-band.hdc-news-band.is-layout-flow {
	padding: 0 var(--space-4) var(--space-7);
}
@media (min-width: 640px) {
	.hdc-main > .wp-block-group.hdc-band.hdc-news-band.is-layout-flow {
		padding: 0 var(--space-5) var(--space-8);
	}
}
@media (min-width: 1024px) {
	.hdc-main > .wp-block-group.hdc-band.hdc-news-band.is-layout-flow {
		padding: 0 var(--space-6) var(--space-9);
	}
}
/* News listing cards are core Groups, whose padding Spectra zeroes, so the card model above is set again here:
   space-5 padding, space-4 from the photo to the text, no padding on the text (same as the home What's on cards). */
.hdc-news-grid .wp-block-group.hdc-card.hdc-post-card.is-layout-flow.wp-block-group-is-layout-flow {
	padding: var(--wp--preset--spacing--5);
	overflow: hidden;
	gap: var(--wp--preset--spacing--4);
}
.hdc-news-grid .hdc-post-card .wp-block-group.hdc-post-card__body.is-layout-flow {
	padding: 0;
}
/* .wp-block-group.hdc-card > * (margin-block: 0) would otherwise keep the photo 24px below the card's top edge. */
.hdc-news-grid .hdc-post-card .wp-block-post-featured-image {
	margin-top: calc(-1 * var(--wp--preset--spacing--5));
}
/* The wide feature card (page 1, from 768px): the photo fills the left column out to the card's top, bottom and
   left edges; the text column sits space-4 from it, in the card's own padding. */
@media (min-width: 768px) {
	body:not(.paged) .hdc-news-grid > li:first-child .wp-block-group.hdc-card.hdc-post-card.is-layout-flow.wp-block-group-is-layout-flow {
		gap: var(--wp--preset--spacing--4);
	}
	body:not(.paged) .hdc-news-grid > li:first-child .hdc-post-card .wp-block-post-featured-image {
		margin: calc(-1 * var(--wp--preset--spacing--5)) 0 calc(-1 * var(--wp--preset--spacing--5)) calc(-1 * var(--wp--preset--spacing--5));
		width: calc(100% + var(--wp--preset--spacing--5));
		height: calc(100% + 2 * var(--wp--preset--spacing--5));
	}
}

/* ---------- News post body (hdc-prose) ---------- */

/* A Spectra button is the <a> itself (it carries hdc-btn), and .hdc-prose a (blue, underlined) outranks the
   variant's own colour. Put the variant colours back for filled buttons and drop the underline. */
.hdc-prose a.hdc-btn--primary,
.hdc-prose a.hdc-btn--warm {
	color: var(--wp--preset--color--on-brand);
}
/* Room around a button: more space above and below than between paragraphs. */
.hdc-prose .wp-block-spectra-buttons {
	margin-block: var(--wp--preset--spacing--4) calc(var(--wp--preset--spacing--4) + 20px);
}
/* Details lists (What / Where / Time / Cost): Spectra gives each item a 10px bottom margin on top of the
   list's own spacing, which reads as too loose. One tight gap instead. */
.hdc-prose .wp-block-spectra-list.hdc-list {
	gap: var(--wp--preset--spacing--2);
}
.hdc-prose .hdc-list .wp-block-spectra-list-child-item {
	margin-bottom: 0;
}
.hdc-prose .hdc-list .wp-block-spectra-content {
	margin: 0;
}

/* A post's featured quote sits in its own band, like the quote bands on pages (Alex, 2026-10-27): a sunken stripe
   across the full screen width, with the quote itself kept in the reading column. The quote stays inside the post
   content, so the stripe is painted with a spread shadow clipped to the quote's own height. That reaches both screen
   edges without widening the page (a shadow never adds a scrollbar). */
.hdc-prose .wp-block-spectra-container.hdc-quote {
	--hdc-quote-band: var(--wp--preset--color--surface-sunken);
	margin-block: var(--wp--preset--spacing--5);
	padding-block: var(--wp--preset--spacing--7);
	background: var(--hdc-quote-band);
	box-shadow: 0 0 0 100vmax var(--hdc-quote-band);
	clip-path: inset(0 -100vmax);
}
@media (min-width: 1024px) {
	.hdc-prose .wp-block-spectra-container.hdc-quote {
		padding-block: var(--wp--preset--spacing--8);
	}
}

/* FAQs in a post fill the reading column. The section's flex column sizes each child to its content, so the closed
   cards fitted their questions and jumped wider when one opened (Christmas show post, Alex, 2026-10-27). */
.hdc-prose .wp-block-group.hdc-faq {
	width: 100%;
}

/* Photo galleries in a post sit in the narrow reading column: two across at every width, not three. */
.hdc-prose .wp-block-gallery.has-nested-images.hdc-gallery {
	width: 100%;
}
@media (min-width: 1024px) {
	.hdc-prose .wp-block-gallery.has-nested-images.hdc-gallery {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* News posts that hold a form or an Amelia block use core Groups for the wrapper and the section holding it (Spectra
   containers strip the scripts those print), so the prose layout is repeated for core Groups. */
.wp-block-group:is(.hdc-prose, .hdc-prose__section) {
	display: flex;
	flex-direction: column;
	padding: 0;
	margin: 0;
}
.wp-block-group.hdc-prose {
	gap: var(--wp--preset--spacing--7);
}
.wp-block-group.hdc-prose__section {
	gap: var(--wp--preset--spacing--5);
}
.wp-block-group:is(.hdc-prose, .hdc-prose__section) > * {
	margin-block: 0;
	max-width: 100%;
}

/* ---------- Cookie banner (functions.php, assets/js/consent.js) ----------
   A card pinned to the foot of the screen. It doesn't cover the page or trap focus, so visitors can keep
   reading or booking. Accept and Reject look the same, as the ICO asks. Full width on phones, a 560px card
   in the bottom-left corner from tablet up. Sits above the header (50) and drawer (60), below the admin bar. */
.hdc-consent__text a:focus-visible {
	outline: 3px solid var(--focus-ring);
	outline-offset: 2px;
}
@media print {
	.hdc-consent {
		display: none;
	}
}

/* A tall photo in a gallery: the 4:3 crop keeps the top, where the face is, instead of the middle. */
.hdc-gallery .wp-block-image.hdc-gallery__img--top img {
	object-position: center top;
}