/* Generated by scripts/build_theme.py from design-system/components/bundle.css. Do not edit by hand. */

:where([class*="hdc-"]) {
	--surface: var(--wp--preset--color--surface);
	--surface-raised: var(--wp--preset--color--surface-raised);
	--surface-sunken: var(--wp--preset--color--surface-sunken);
	--ink: var(--wp--preset--color--ink);
	--ink-muted: var(--wp--preset--color--ink-muted);
	--border-subtle: var(--wp--preset--color--border-subtle);
	--border-control: var(--wp--preset--color--border-control);
	--border-floating: var(--wp--preset--color--border-floating);
	--hype-blue: var(--wp--preset--color--hype-blue);
	--hype-blue-hover: var(--wp--preset--color--hype-blue-hover);
	--on-brand: var(--wp--preset--color--on-brand);
	--hype-blue-deep: var(--wp--preset--color--hype-blue-deep);
	--hype-blue-tint: var(--wp--preset--color--hype-blue-tint);
	--coral: var(--wp--preset--color--coral);
	--coral-hover: var(--wp--preset--color--coral-hover);
	--coral-deep: var(--wp--preset--color--coral-deep);
	--coral-tint: var(--wp--preset--color--coral-tint);
	--plum: var(--wp--preset--color--plum);
	--plum-hover: var(--wp--preset--color--plum-hover);
	--plum-deep: var(--wp--preset--color--plum-deep);
	--plum-tint: var(--wp--preset--color--plum-tint);
	--sunshine: var(--wp--preset--color--sunshine);
	--sunshine-deep: var(--wp--preset--color--sunshine-deep);
	--sunshine-tint: var(--wp--preset--color--sunshine-tint);
	--sage-deep: var(--wp--preset--color--sage-deep);
	--sage-tint: var(--wp--preset--color--sage-tint);
	--success-on-inverse: var(--wp--preset--color--success-on-inverse);
	--danger: var(--wp--preset--color--danger);
	--focus-ring: var(--wp--preset--color--focus-ring);
	--inverse-surface: var(--wp--preset--color--inverse-surface);
	--on-inverse: var(--wp--preset--color--on-inverse);
	--space-1: var(--wp--preset--spacing--1);
	--space-2: var(--wp--preset--spacing--2);
	--space-3: var(--wp--preset--spacing--3);
	--space-4: var(--wp--preset--spacing--4);
	--space-5: var(--wp--preset--spacing--5);
	--space-6: var(--wp--preset--spacing--6);
	--space-7: var(--wp--preset--spacing--7);
	--space-8: var(--wp--preset--spacing--8);
	--space-9: var(--wp--preset--spacing--9);
	--space-10: var(--wp--preset--spacing--10);
	--radius-sm: var(--wp--custom--radius--sm);
	--radius-md: var(--wp--custom--radius--md);
	--radius-lg: var(--wp--custom--radius--lg);
	--radius-xl: var(--wp--custom--radius--xl);
	--radius-pill: var(--wp--custom--radius--pill);
	--shadow-card: var(--wp--preset--shadow--card);
	--shadow-raised: var(--wp--preset--shadow--raised);
	--font-display: var(--wp--preset--font-family--display);
	--font-body: var(--wp--preset--font-family--body);
	--tap-target: var(--wp--custom--tap-target);
	--measure: var(--wp--custom--measure);
	--container-max: var(--wp--custom--container-max);
	--header-height: var(--wp--custom--header-height);
}

/* Hype Dance Company — component styles. Class prefix: hdc- */

.hdc-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  position: relative; min-height: var(--tap-target); padding: var(--space-3) var(--space-5);
  font-family: var(--font-body); font-size: 16px; line-height: 20px; font-weight: 700;
  border-radius: var(--radius-pill); border: 2px solid transparent;
  text-decoration: none; cursor: pointer;
  transition: transform 150ms ease-out, box-shadow 150ms ease-out, background-color 150ms ease-out;
}
@media (hover: hover) { .hdc-btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-card); } }
.hdc-btn:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.hdc-btn--primary { background: var(--hype-blue); color: var(--on-brand); }
.hdc-btn--primary:hover { background: var(--hype-blue-hover); }
.hdc-btn--secondary { background: transparent; color: var(--ink); border-color: var(--border-control); }
.hdc-btn--secondary:hover { background: var(--surface-sunken); }
.hdc-btn--warm { background: var(--coral); color: var(--on-brand); }
.hdc-btn--warm:hover { background: var(--coral-hover); }
/* Retired October 2026: there is no plum button. --adult is kept only so older markup shows the primary blue. */
.hdc-btn--adult { background: var(--hype-blue); color: var(--on-brand); }
.hdc-btn--adult:hover { background: var(--hype-blue-hover); }
.hdc-btn--link { background: transparent; color: var(--hype-blue-deep); padding-left: 0; padding-right: 0; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; transition: text-decoration-thickness 150ms ease-out; }
.hdc-btn--link:hover { box-shadow: none; transform: none; }
/* Hover-only effects stay off touch screens, where a tapped link or card would keep them. */
@media (hover: hover) { .hdc-btn--link:hover { text-decoration-thickness: 3px; } }
@media (prefers-reduced-motion: reduce) { .hdc-btn { transition: none; } .hdc-btn:hover { transform: none; } }

/* Links in running text: 1px underline that thickens to 3px on hover. */
.hdc-prose a { color: var(--hype-blue-deep); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; transition: text-decoration-thickness 150ms ease-out; }
@media (hover: hover) { .hdc-prose a:hover { text-decoration-thickness: 3px; } }
@media (prefers-reduced-motion: reduce) { .hdc-prose a, .hdc-btn--link { transition: none; } }

/* Category label: a coloured dot and coloured text, no background. Pills are for buttons only. */
.hdc-tag {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-family: var(--font-body); font-size: 13px; line-height: 16px; font-weight: 700; letter-spacing: 0.02em;
  white-space: nowrap; background: none; padding: 0;
}
.hdc-tag::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.hdc-tag--syllabus { color: var(--hype-blue-deep); }
.hdc-tag--kids { color: var(--sunshine-deep); }
.hdc-tag--adult { color: var(--plum-deep); }
.hdc-tag--hire { color: var(--sage-deep); }

.hdc-card {
  display: flex; flex-direction: column; gap: var(--space-3);
  background: var(--surface-raised); color: var(--ink);
  border-radius: var(--radius-lg); padding: var(--space-5);
  box-shadow: var(--shadow-card); font-family: var(--font-body);
}
/* Card photo: a 4:3 slot, edge to edge at the top of the card; an empty slot shows the tint. */
.hdc-card__media {
  margin: calc(var(--space-5) * -1) calc(var(--space-5) * -1) 0;
  aspect-ratio: 4 / 3; flex: none; border-radius: var(--radius-lg) var(--radius-lg) 0 0; overflow: hidden; position: relative;
  background: var(--hype-blue-tint);
}
.hdc-card__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Every card: 16px (space-4) from the photo to the first line of text (the card gap is space-3, plus space-1 here). */
.hdc-card__media, .hdc-card__avatar { margin-bottom: var(--space-1); }
/* News cards use a 16:9 photo, like the Post featured photo. */
.hdc-post-card .hdc-card__media { aspect-ratio: 16 / 9; }
/* Round 96px profile photo at the top of a card (teacher cards). */
.hdc-card__avatar { flex: none; align-self: flex-start; width: 96px; height: 96px; border-radius: 50%; overflow: hidden; background: var(--hype-blue-tint); }
.hdc-card__avatar img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Clickable card: the title link's ::after covers the whole card; one tab stop, no button. */
.hdc-card--link { position: relative; transition: box-shadow 150ms ease-out, transform 150ms ease-out; }
.hdc-card--link .hdc-card__link { color: inherit; text-decoration: none; }
.hdc-card--link .hdc-card__link::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: var(--radius-lg); }
@media (hover: hover) { .hdc-card--link:hover { box-shadow: var(--shadow-raised); transform: translateY(-1px); } }
.hdc-card--link:hover .hdc-card__link { text-decoration: underline; text-underline-offset: 3px; }
.hdc-card--link .hdc-card__link:focus-visible { outline: none; }
.hdc-card--link .hdc-card__link:focus-visible::after { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .hdc-card--link { transition: none; } .hdc-card--link:hover { transform: none; } }
.hdc-card__title { font-family: var(--font-display); font-size: 26px; line-height: 34px; font-weight: 700; margin: 0; }
.hdc-card__meta { font-size: 15px; line-height: 22px; color: var(--ink-muted); margin: 0; }
.hdc-card__body { font-size: 17px; line-height: 28px; margin: 0; }
.hdc-card__actions { margin-top: auto; padding-top: var(--space-2); display: flex; gap: var(--space-3); flex-wrap: wrap; }

.hdc-timetable { font-family: var(--font-body); color: var(--ink); background: var(--surface-raised); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); overflow: hidden; }
/* Day heading: the day in the h4 style on a hype-blue-tint strip, so each day reads as a title. */
.hdc-timetable__day { font-family: var(--font-display); font-size: 22px; line-height: 30px; font-weight: 700; color: var(--ink); background: var(--hype-blue-tint); padding: var(--space-4) var(--space-5); margin: 0; }
.hdc-timetable__list { list-style: none; margin: 0; padding: 0; }
.hdc-timetable__row { display: grid; grid-template-columns: 112px 1fr auto; gap: var(--space-4); align-items: center; min-height: var(--tap-target); padding: var(--space-3) var(--space-5); border-top: 1px solid var(--border-subtle); }
.hdc-timetable__time { font-weight: 600; font-variant-numeric: tabular-nums; }
.hdc-timetable__class { font-weight: 600; }
.hdc-timetable__detail { display: block; font-weight: 400; font-size: 15px; line-height: 22px; color: var(--ink-muted); }
@media (max-width: 560px) {
  .hdc-timetable__row { grid-template-columns: 1fr; gap: var(--space-1); }
}

/* Featured quote: squared coral quote mark to the left of the text (drawn with a CSS mask so it takes the `coral` token in both themes), Hanken Grotesk Light text. Stacks on phones. */
.hdc-quote { margin: 0; display: grid; grid-template-columns: 72px minmax(0, 1fr); column-gap: var(--space-6); max-width: calc(var(--measure, 680px) + 104px); color: var(--ink); }
.hdc-quote::before {
  content: ""; grid-column: 1; grid-row: 1 / span 2; width: 72px; height: 63px; margin-top: 4px;
  background: var(--coral);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 199 173'%3E%3Cpath d='M0 0H91V89H48C48 115 62 128 91 136L71 173C27 160 0 128 0 90Z M108 0H199V89H156C156 115 170 128 199 136L179 173C135 160 108 128 108 90Z'/%3E%3C/svg%3E") no-repeat left top / contain;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 199 173'%3E%3Cpath d='M0 0H91V89H48C48 115 62 128 91 136L71 173C27 160 0 128 0 90Z M108 0H199V89H156C156 115 170 128 199 136L179 173C135 160 108 128 108 90Z'/%3E%3C/svg%3E") no-repeat left top / contain;
}
.hdc-quote__text { grid-column: 2; margin: 0; font-family: var(--font-display); font-size: 26px; line-height: 38px; font-weight: 300; }
.hdc-quote__text p { margin: 0; }
.hdc-quote__cite { grid-column: 2; margin-top: var(--space-4); font-family: var(--font-body); font-size: 15px; line-height: 22px; color: var(--ink-muted); }
@media (max-width: 639px) {
  .hdc-quote { grid-template-columns: minmax(0, 1fr); }
  .hdc-quote::before { grid-row: auto; width: 46px; height: 40px; margin: 0 0 var(--space-4); }
  .hdc-quote__text, .hdc-quote__cite { grid-column: 1; }
  .hdc-quote__text { font-size: 22px; line-height: 32px; }
}

/* ===== Page structure: bands, section head, measure ===== */
/* Band: one full-width topic band. Gutter and padding step up at 640px and 1024px. */
.hdc-band { box-sizing: border-box; background: var(--surface); color: var(--ink); padding: var(--space-7) var(--space-4); }
.hdc-band--sunken { background: var(--surface-sunken); }
.hdc-band--inverse { background: var(--inverse-surface); color: var(--on-inverse); }
.hdc-band--inverse :where(h1, h2, h3, h4, a:not(.hdc-btn)) { color: var(--on-inverse); }
@media (min-width: 640px) { .hdc-band { padding: var(--space-8) var(--space-5); } }
@media (min-width: 1024px) { .hdc-band { padding: var(--space-9) var(--space-6); } }
.hdc-band + .hdc-band { margin-top: 0; }
.hdc-band__inner { display: flex; flex-direction: column; gap: var(--space-6); width: 100%; max-width: var(--container-max); margin-inline: auto; }
.hdc-band__more { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
/* Slim band: a utility strip (search) above the first band. */
.hdc-band.hdc-band--slim { padding-block: var(--space-4); }
.hdc-search { width: 100%; max-width: var(--measure); margin: 0; }

/* Section head: eyebrow, heading and intro at the top of a band. */
.hdc-section-head { display: flex; flex-direction: column; gap: var(--space-3); max-width: var(--measure); }
.hdc-section-head :where(h1, h2, h3) { margin: 0; }
.hdc-eyebrow { margin: 0; font-family: var(--font-display); font-size: 13px; line-height: 16px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--hype-blue-deep); }
.hdc-intro { margin: 0; font-size: 20px; line-height: 32px; }
.hdc-measure { display: flex; flex-direction: column; gap: var(--space-4); max-width: var(--measure); }
.hdc-measure > :where(h2, h3) { margin-block: 0 var(--space-1); }

/* ===== Split: text beside a panel or photo ===== */
.hdc-split { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); align-items: start; }
.hdc-split__main { display: flex; flex-direction: column; gap: var(--space-5); min-width: 0; }
.hdc-split__media { min-width: 0; }
.hdc-split__media img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-lg); }
@media (min-width: 1024px) { .hdc-split { grid-template-columns: minmax(0, var(--measure)) minmax(0, 420px); column-gap: var(--space-9); } }

/* Panel: the side box in a split (Cost / How to start): a raised card like hdc-card. */
.hdc-panel { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-5); background: var(--surface-raised); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); }
.hdc-panel > * { margin: 0; }

/* ===== Card grid ===== */
.hdc-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); align-items: stretch; }
.hdc-grid > * { min-width: 0; margin: 0; }
@media (min-width: 640px) { .hdc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .hdc-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .hdc-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ===== Gallery ===== */
.hdc-gallery { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); margin: 0; }
.hdc-gallery figure { margin: 0; }
.hdc-gallery img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-lg); }
/* Tall photo: crop from the top so faces stay in. */
.hdc-gallery .hdc-gallery__img--top img { object-position: center top; }
@media (min-width: 640px) { .hdc-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .hdc-gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ===== FAQ: questions as raised cards (native details/summary) ===== */
.hdc-faq { display: flex; flex-direction: column; gap: var(--space-3); max-width: var(--measure); }
.hdc-faq__item { margin: 0; padding: var(--space-4) var(--space-5); background: var(--surface-raised); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); font-family: var(--font-body); color: var(--ink); }
.hdc-faq__item { transition: box-shadow 150ms ease-out; }
@media (hover: hover) { .hdc-faq__item:hover { box-shadow: var(--shadow-raised); } }
.hdc-faq__item summary { min-height: var(--tap-target); display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); cursor: pointer; font-weight: 700; list-style: none; }
.hdc-faq__item summary::-webkit-details-marker { display: none; }
.hdc-faq__item summary::marker { content: ""; }
/* Open/close cue: a plus in a tinted circle that turns into a minus when open. */
.hdc-faq__item summary::after { content: ""; flex: none; width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(var(--hype-blue-deep), var(--hype-blue-deep)) center / 14px 2px no-repeat, linear-gradient(var(--hype-blue-deep), var(--hype-blue-deep)) center / 2px 14px no-repeat, var(--hype-blue-tint); transition: background-size 150ms ease-out; }
.hdc-faq__item[open] summary::after { background-size: 14px 2px, 2px 0, auto; }
.hdc-faq__item summary:hover { color: var(--hype-blue-deep); }
@media (prefers-reduced-motion: reduce) { .hdc-faq__item, .hdc-faq__item summary::after { transition: none; } }
.hdc-faq__item summary:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; border-radius: var(--radius-sm); }
.hdc-faq__item[open] summary { margin-bottom: var(--space-3); }
.hdc-faq__item p { margin: 0 0 var(--space-4); }
.hdc-faq__item p:last-child { margin-bottom: 0; }
.hdc-faq__item ul { margin: 0 0 var(--space-4); padding-left: var(--space-5); }
/* FAQ group: an h3 topic heading with its cards; groups repeat down the page. */
.hdc-faq-group { display: flex; flex-direction: column; gap: var(--space-4); }
.hdc-faq-group :where(h3) { margin: 0; }
.hdc-faq-group + .hdc-faq-group { margin-top: var(--space-7); }

/* ===== Inline quote: the quieter second testimonial, marked by a thin coral line down the left (no quote mark, no box) ===== */
.hdc-inline-quote { margin: 0; display: flex; flex-direction: column; gap: var(--space-2); max-width: var(--measure); border-left: 3px solid var(--coral); padding-left: var(--space-5); }
@media (max-width: 639px) { .hdc-inline-quote { padding-left: var(--space-4); } }
/* Extra room so inline quotes in a band column sit space-7 (48px) from photos, each other and the text after them. */
.hdc-inline-quote { margin-top: var(--space-4); }
.hdc-inline-quote:not(:has(+ .hdc-inline-quote)) { margin-bottom: var(--space-4); }
.hdc-inline-quote__text { margin: 0; font-size: 20px; line-height: 32px; color: var(--ink); }
.hdc-inline-quote__text p { margin: 0; }
.hdc-inline-quote__cite { font-size: 15px; line-height: 22px; color: var(--ink-muted); }

/* ===== Small bits ===== */
.hdc-note { font-size: 15px; line-height: 22px; color: var(--ink-muted); }
/* Bullet list: blue dot on the text's left edge. Plain lists only; a Spectra list draws its own icon, so it is left alone. */
ul.hdc-list:not(.wp-block-spectra-list) { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
ul.hdc-list:not(.wp-block-spectra-list) > li { position: relative; padding-left: var(--space-5); }
ul.hdc-list:not(.wp-block-spectra-list) > li::before { content: ""; position: absolute; left: 4px; top: 11px; width: 6px; height: 6px; border-radius: 50%; background: var(--hype-blue-deep); }
.hdc-social { display: flex; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
/* Social icons: one colour, one size, logo only (no brand colours, no background). */
.hdc-social a { display: inline-flex; align-items: center; justify-content: center; min-width: var(--tap-target); min-height: var(--tap-target); color: var(--hype-blue-deep); background: none; }
.hdc-social svg { width: 24px; height: 24px; fill: currentColor; }
.hdc-social a:hover { color: var(--ink); }
.hdc-social a:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; border-radius: var(--radius-sm); }
.hdc-band--inverse .hdc-social a { color: var(--on-inverse); }

/* ===== Navigation: header, mega panel, featured card, mobile drawer ===== */
.hdc-header { position: relative; z-index: 50; background: var(--surface-raised); border-bottom: 1px solid var(--border-subtle); font-family: var(--font-body); }
.hdc-header__inner { max-width: var(--container-max); height: var(--header-height); margin: 0 auto; padding: 0 var(--space-4); display: flex; align-items: center; gap: var(--space-6); }
.hdc-header__logo img { display: block; height: 44px; width: auto; }
.hdc-header__nav { flex: 1; display: none; align-items: stretch; height: var(--header-height); gap: var(--space-2); }
.hdc-header__item { display: inline-flex; align-items: center; gap: 6px; padding: 0 var(--space-3); border: 0; border-bottom: 3px solid transparent; background: none; color: var(--ink); font: 600 16px/20px var(--font-body); text-decoration: none; cursor: pointer; }
.hdc-header__item[aria-expanded="true"], .hdc-header__item[aria-current="page"] { border-bottom-color: var(--hype-blue); }
.hdc-header__item:focus-visible, .hdc-header__menu:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: -3px; }
.hdc-header__item svg { transition: transform 150ms ease-out; }
.hdc-header__item[aria-expanded="true"] svg { transform: rotate(180deg); }
.hdc-header__menu { margin-left: auto; width: var(--tap-target); height: var(--tap-target); display: inline-flex; align-items: center; justify-content: center; border: 0; background: none; color: var(--ink); cursor: pointer; }
@media (min-width: 1024px) {
  .hdc-header__inner { padding: 0 var(--space-6); gap: var(--space-7); }
  .hdc-header__nav { display: flex; }
  .hdc-header__menu { display: none; }
}

/* Mega panel: opens under the header; Classes only gets the full panel. */
.hdc-mega { position: absolute; left: 0; right: 0; top: 100%; max-width: var(--container-max); margin: 0 auto; box-sizing: border-box; background: var(--surface-raised); border-radius: 0 0 var(--radius-lg) var(--radius-lg); box-shadow: var(--shadow-raised); padding: var(--space-6) var(--space-7) var(--space-6); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) 340px; gap: var(--space-6); }
.hdc-mega[hidden] { display: none; }
.hdc-mega--simple { left: auto; right: auto; width: 280px; grid-template-columns: minmax(0, 1fr); padding: var(--space-4) var(--space-5); }
.hdc-mega__col { display: flex; flex-direction: column; gap: var(--space-3); }
.hdc-mega__col h2 { margin: 0; font-family: var(--font-display); font-size: 22px; line-height: 30px; font-weight: 700; color: var(--ink); }
.hdc-mega__links { list-style: none; margin: 0; padding: 0; }
.hdc-mega__links a { display: block; padding: 10px 0; color: var(--ink); font-weight: 400; text-decoration: none; }
/* The heading sits with its own list: no column gap between them. */
.hdc-mega__col h2 + .hdc-mega__links, .hdc-mega__group h2 + .hdc-mega__links { margin-top: calc(var(--space-3) * -1); }
.hdc-mega__links a:hover { color: var(--hype-blue-deep); text-decoration: underline; text-underline-offset: 3px; }
.hdc-mega__foot { grid-column: 1 / span 3; border-top: 1px solid var(--border-subtle); padding-top: var(--space-5); display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-6); font-weight: 600; }
.hdc-mega__foot a { color: var(--ink); text-decoration: none; }
.hdc-mega__foot .hdc-mega__all { margin-left: auto; color: var(--hype-blue-deep); text-decoration: underline; text-underline-offset: 3px; }
.hdc-scrim { position: fixed; inset: var(--header-height) 0 0 0; background: rgba(18, 41, 58, 0.35); z-index: 40; }
.hdc-scrim[hidden] { display: none; }

/* Featured card: the one promoted item, shared by the mega panel and the drawer. */
.hdc-feature { grid-row: 1 / span 2; grid-column: 4; display: flex; flex-direction: column; background: var(--surface-sunken); border-radius: var(--radius-lg); overflow: hidden; color: var(--ink); }
.hdc-feature img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.hdc-feature__body { padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-2); }
.hdc-feature .hdc-eyebrow { color: var(--coral-deep); }
.hdc-feature h2 { margin: 0; font-family: var(--font-display); font-size: 22px; line-height: 30px; font-weight: 700; }
.hdc-feature--compact { flex-direction: row; align-items: center; gap: var(--space-3); padding: var(--space-2); background: var(--surface-raised); box-shadow: var(--shadow-card); text-decoration: none; }
.hdc-feature--compact img { flex: none; width: 88px; height: 66px; aspect-ratio: auto; border-radius: var(--radius-md); }
.hdc-feature--compact .hdc-feature__body { padding: 0; gap: 2px; }
.hdc-feature--compact h2 { font-family: var(--font-body); font-size: 16px; line-height: 22px; }

/* Mobile drawer: full screen under 1024px. */
.hdc-drawer { position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column; background: var(--surface-raised); color: var(--ink); font-family: var(--font-body); }
.hdc-drawer[hidden] { display: none; }
.hdc-drawer__top { flex: none; height: 64px; display: flex; align-items: center; justify-content: space-between; padding: 0 var(--space-2) 0 var(--space-4); border-bottom: 1px solid var(--border-subtle); }
.hdc-drawer__list { flex: 1; overflow-y: auto; list-style: none; margin: 0; padding: var(--space-2) var(--space-4); }
.hdc-drawer__list > li { border-bottom: 1px solid var(--border-subtle); }
.hdc-drawer__list > li:last-child { border-bottom: 0; }
.hdc-drawer__row { width: 100%; min-height: 56px; display: flex; align-items: center; justify-content: space-between; padding: 0; border: 0; background: none; color: var(--ink); font: 600 20px/28px var(--font-display); text-align: left; text-decoration: none; cursor: pointer; }
.hdc-drawer__row[aria-expanded="true"] svg { transform: rotate(180deg); }
.hdc-drawer__sub { margin: 0 calc(var(--space-4) * -1); padding: var(--space-3) var(--space-4) var(--space-4); background: var(--surface-sunken); display: flex; flex-direction: column; gap: var(--space-3); }
.hdc-drawer__sub[hidden] { display: none; }
.hdc-drawer__sub a:not(.hdc-btn) { display: flex; align-items: center; min-height: 44px; color: var(--ink); font-weight: 400; text-decoration: none; }
.hdc-drawer__foot { flex: none; padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-3); background: var(--surface-sunken); }
.hdc-drawer__foot .hdc-btn { width: 100%; box-sizing: border-box; }
@media (prefers-reduced-motion: reduce) { .hdc-header__item svg, .hdc-drawer__row svg { transition: none; } }

/* ===== Additions from the theme, 25 October 2026 ===== */
/* Team grid: role at body size; on desktop the first two cards share a row, the rest go three across. */
.hdc-grid--team .hdc-card__meta { font-size: 17px; line-height: 28px; }
@media (min-width: 1024px) { .hdc-grid--team { grid-template-columns: repeat(6, minmax(0, 1fr)); } .hdc-grid--team > * { grid-column: span 2; } .hdc-grid--team > :nth-child(-n + 2) { grid-column: span 3; } }

/* A featured quote after a split or a card grid gets space-7 above it. */
.hdc-split ~ .hdc-quote, .hdc-grid ~ .hdc-quote { margin-top: var(--space-7); }

/* News post: one surface band with eyebrow (category), h1, 16:9 photo and the post's prose, all in the measure. No date. */
.hdc-post__head { width: 100%; max-width: var(--measure); margin-inline: auto; display: flex; flex-direction: column; gap: var(--space-3); }
.hdc-post__head > * { margin: 0; }
.hdc-post__img { width: 100%; max-width: var(--measure); margin: 0 auto; }
.hdc-post__img img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius-lg); }
.hdc-post__body { max-width: var(--measure); margin-inline: auto; display: flex; flex-direction: column; gap: var(--space-5); }
/* Buttons inside prose keep their own colours and no underline. */
.hdc-prose a.hdc-btn:not(.hdc-btn--link) { text-decoration: none; }
.hdc-prose a.hdc-btn--primary, .hdc-prose a.hdc-btn--adult, .hdc-prose a.hdc-btn--warm { color: var(--on-brand); }
.hdc-prose a.hdc-btn--secondary { color: var(--ink); }
.hdc-prose .hdc-btn { margin-block: var(--space-4) calc(var(--space-4) + 20px); }

/* News listing: 1 column, 2 from 640px; on the first page the first post is a wide feature card (photo left from 768px). */
.hdc-news-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
@media (min-width: 640px) { .hdc-news-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .hdc-news-grid > .hdc-post-card--feature { grid-column: 1 / -1; } }
@media (min-width: 768px) { .hdc-post-card--feature { flex-direction: row; } .hdc-post-card--feature .hdc-card__media { margin: calc(var(--space-5) * -1) 0 calc(var(--space-5) * -1) calc(var(--space-5) * -1); width: 50%; border-radius: var(--radius-lg) 0 0 var(--radius-lg); } }
/* Pagination: 48px round links; the current page filled blue. */
.hdc-pagination { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); }
.hdc-pagination a, .hdc-pagination span { min-width: var(--tap-target); min-height: var(--tap-target); padding: 0 var(--space-3); box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-pill); font-weight: 700; color: var(--ink); text-decoration: none; }
.hdc-pagination a:hover { background: var(--surface-sunken); }
.hdc-pagination [aria-current="page"] { background: var(--hype-blue); color: var(--on-brand); }

/* Navigation additions: header book button, About list position, drawer eyebrows, panel groups. */
.hdc-header__has-menu { position: relative; display: flex; }
.hdc-header__has-menu .hdc-mega--simple { top: 100%; left: 0; }
.hdc-mega { z-index: 45; }
.hdc-mega > .hdc-feature { grid-row: 1; }
.hdc-mega__group { display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-3); padding-top: var(--space-5); border-top: 1px solid var(--border-subtle); }
.hdc-mega__col > .hdc-mega__all { margin-top: auto; padding-top: var(--space-3); color: var(--ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.hdc-mega__col > .hdc-mega__all:hover { color: var(--hype-blue-deep); }
/* An open panel joins the header as one surface: no header rule, no shadow along the top edge. */
.hdc-mega { clip-path: inset(0 -64px -64px -64px); }
.hdc-header:has(.hdc-header__nav [aria-expanded="true"]) { border-bottom-color: transparent; }
.hdc-drawer__sub .hdc-drawer__eyebrow { margin: var(--space-3) 0 0; }
.hdc-drawer__sub .hdc-drawer__eyebrow:first-child { margin-top: 0; }
.hdc-drawer__top img { height: 48px; width: auto; }
.hdc-header button:focus:not(:focus-visible), .hdc-header a:focus:not(:focus-visible) { outline: none; }
.hdc-drawer__row:focus-visible, .hdc-drawer__sub a:focus-visible, .hdc-mega a:focus-visible, .hdc-feature a:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: -3px; }
/* Phones and tablets: 64px header with logo and menu button only; Book now lives at the foot of the open menu. */
@media (max-width: 1023px) { .hdc-header__inner { height: 64px; } .hdc-header__book { display: none; } .hdc-header__menu { margin-left: auto; } }

/* Form fields: a 1px primary border and a soft glow on focus (buttons and links keep the 3px ring). */
.hdc-field:focus, .hdc-field:focus-visible { outline: none; box-shadow: 0 0 0 1px var(--hype-blue-deep), 0 0 0 4px color-mix(in srgb, var(--focus-ring) 25%, transparent); }

/* Form fields: text at least 16px, so iOS doesn't zoom in on tap. */
.hdc-field, :is(input, select, textarea) { font-size: max(16px, 1em); }

/* Success message after a form is sent: sage panel with a stripe and a circled tick. On navy: a light sage outline and tick, no panel. */
.hdc-success { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-4) var(--space-5); background: var(--sage-tint); border-left: 4px solid var(--sage-deep); border-radius: var(--radius-lg); color: var(--ink); font-weight: 600; }
.hdc-success::before { content: ""; flex: none; width: 24px; height: 24px; background: var(--sage-deep); -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%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m9 12 2 2 4-4'/%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%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E") center / contain no-repeat; }
.hdc-footer .hdc-success { background: none; border: 1px solid var(--success-on-inverse); color: var(--on-inverse); }
.hdc-footer .hdc-success::before { background: var(--success-on-inverse); }

/* Pagination previous/next: Lucide arrow icons at 16px in currentColor, box locked so it can't stretch (text arrows sit high in Figtree). */
.hdc-pagination__next, .hdc-pagination__prev,
: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; font-size: 0; margin-inline: var(--space-2) 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; }
.hdc-pagination__prev,
:is(.hdc-pagination, .wp-block-query-pagination) .wp-block-query-pagination-previous-arrow { margin-inline: 0 var(--space-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"); }

/* ===== Footer: navy band with newsletter strip, four columns and the legal line ===== */
.hdc-footer { background: var(--inverse-surface); color: var(--on-inverse); font-family: var(--font-body); }
.hdc-footer a { color: var(--on-inverse); text-underline-offset: 3px; }
.hdc-footer h2 { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 22px; line-height: 30px; color: var(--on-inverse); }
.hdc-footer__news { border-bottom: 1px solid color-mix(in srgb, var(--on-inverse) 16%, transparent); }
.hdc-footer__news-inner, .hdc-footer__grid, .hdc-footer__legal { max-width: var(--container-max); margin: 0 auto; padding-inline: var(--space-4); box-sizing: border-box; }
.hdc-footer__news-inner { padding-block: var(--space-6); display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-5) var(--space-7); }
.hdc-footer__news h2 { font-size: 26px; line-height: 34px; }
.hdc-footer__news-text { flex: 1 1 320px; display: flex; flex-direction: column; gap: var(--space-2); }
.hdc-footer__news-text p { margin: 0; color: color-mix(in srgb, var(--on-inverse) 78%, var(--inverse-surface)); font-size: 15px; line-height: 22px; }
.hdc-footer__news-form { flex: 1 1 360px; }
.hdc-footer__grid { padding-block: var(--space-7) var(--space-6); display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6) var(--space-7); }
.hdc-footer__col { display: flex; flex-direction: column; gap: var(--space-3); }
.hdc-footer__col ul:not(.hdc-social) { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-1); }
.hdc-footer__col .hdc-social { flex-direction: row; gap: 0; margin-left: calc(var(--space-3) * -1); }
.hdc-footer__col .hdc-social a { color: var(--on-inverse); }
.hdc-footer__tagline { margin: 0; font-size: 20px; line-height: 32px; color: var(--on-inverse); }
.hdc-footer address { font-style: normal; }
/* Column text is quiet so only the headings stand out; links underline on hover only. */
.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__col :is(address, p, ul:not(.hdc-social)) a, .hdc-footer .hdc-footer__quiet { color: inherit; text-decoration: none; }
.hdc-footer__col :is(address, p, ul:not(.hdc-social)) a:hover { color: var(--on-inverse); text-decoration: underline; }
.hdc-footer a:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; border-radius: var(--radius-sm); }
.hdc-footer__legal-links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-4); }
.hdc-footer__note, .hdc-footer__legal { color: color-mix(in srgb, var(--on-inverse) 78%, var(--inverse-surface)); }
.hdc-footer__note { font-size: 15px; line-height: 22px; margin: 0; }
.hdc-footer__legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-3) var(--space-6); padding-block: var(--space-5) var(--space-6); border-top: 1px solid color-mix(in srgb, var(--on-inverse) 16%, transparent); font-size: 13px; line-height: 20px; }
.hdc-footer__legal a { color: inherit; }
@media (min-width: 640px) { .hdc-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .hdc-footer__news-inner, .hdc-footer__grid, .hdc-footer__legal { padding-inline: var(--space-5); } }
@media (min-width: 1024px) { .hdc-footer__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .hdc-footer__news-inner, .hdc-footer__grid, .hdc-footer__legal { padding-inline: var(--space-6); } }

/* ===== Cookie banner: a card pinned to the foot of the screen, not a modal; Accept and Reject carry equal weight. ===== */
.hdc-consent { position: fixed; z-index: 70; left: var(--space-4); right: var(--space-4); bottom: var(--space-4); display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-5); background: var(--surface-raised); color: var(--ink); border: 1px solid var(--border-floating); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); font-family: var(--font-body); }
.hdc-consent[hidden] { display: none; }
.hdc-consent__text { margin: 0; font-size: 15px; line-height: 22px; }
.hdc-consent__text a { color: var(--hype-blue-deep); text-underline-offset: 3px; }
.hdc-consent__actions { display: flex; gap: var(--space-3); }
.hdc-consent__actions .hdc-btn { flex: 1 1 0; }
@media (min-width: 640px) { .hdc-consent { right: auto; max-width: 560px; bottom: var(--space-5); left: var(--space-5); } .hdc-consent__actions .hdc-btn { flex: 0 0 auto; min-width: 120px; } }

/* ===== Alignment: header and footer share the body's edges =====
   Content is at most container-max (1200px) wide with the page gutter OUTSIDE it, as in Band.
   The gutter steps 16 / 24 / 32px (phone / from 640px / from 1024px). */
.hdc-header, .hdc-footer { --hdc-gutter: var(--space-4); }
@media (min-width: 640px) { .hdc-header, .hdc-footer { --hdc-gutter: var(--space-5); } }
@media (min-width: 1024px) { .hdc-header, .hdc-footer { --hdc-gutter: var(--space-6); } }
.hdc-header__inner, .hdc-footer__news-inner, .hdc-footer__grid, .hdc-footer__legal { box-sizing: content-box; padding-inline: var(--hdc-gutter); }
/* Themes that make children inherit box-sizing (Spectra One does) would otherwise grow buttons past 48px. */
:is(.hdc-header__inner, .hdc-footer__news-inner, .hdc-footer__grid, .hdc-footer__legal) > * { box-sizing: border-box; }
/* The legal line's rule spans the content width only, not the gutters. */
.hdc-footer__legal { position: relative; border-top: 0; }
.hdc-footer__legal::before { content: ""; position: absolute; top: 0; left: var(--hdc-gutter); right: var(--hdc-gutter); border-top: 1px solid color-mix(in srgb, var(--on-inverse) 16%, transparent); }

/* Featured quote in a news post: its own sunken band across the full screen width, the quote kept in the reading column.
   The band is a spread shadow clipped to the quote's height, so there is no sideways scroll. */
.hdc-prose .hdc-quote { margin-block: var(--space-5); padding-block: var(--space-7); background: var(--surface-sunken); box-shadow: 0 0 0 100vmax var(--surface-sunken); clip-path: inset(0 -100vmax); }
@media (min-width: 1024px) { .hdc-prose .hdc-quote { padding-block: var(--space-8); } }
/* An FAQ in a reading column fills the column, so closed cards don't jump wider when one opens. */
.hdc-prose .hdc-faq { width: 100%; }

/* ===== Page hero: a full-width photo with the page heading on a surface panel overlapping its lower left (1024px+), the bottom of the h1 level with the bottom of the photo; under 1024px the photo, then the heading. ===== */
.hdc-page-hero { margin: 0; padding-bottom: var(--space-7); background: var(--surface); color: var(--ink); }
.hdc-page-hero__media { display: block; }
.hdc-page-hero__media img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.hdc-page-hero__inner { max-width: var(--container-max); margin: 0 auto; box-sizing: content-box; padding-inline: var(--space-4); }
.hdc-page-hero__panel { display: flex; flex-direction: column; gap: var(--space-4); padding-top: var(--space-6); max-width: var(--measure); }
.hdc-page-hero__panel h1 { margin: 0; }
.hdc-page-hero__intro { margin: 0; font-size: 20px; line-height: 32px; }
/* Optional: paragraphs that continue the opening, in the reading column below the panel. */
.hdc-page-hero__after { display: flex; flex-direction: column; gap: var(--space-4); max-width: var(--measure); margin-top: var(--space-4); }
.hdc-page-hero__after > * { margin: 0; }
@media (min-width: 640px) {
  .hdc-page-hero__media img { aspect-ratio: 12 / 5; max-height: 640px; }
  .hdc-page-hero__inner { padding-inline: var(--space-5); }
}
/* Overlap only from 1024px. The panel rises by its top padding plus the h1's line (and the eyebrow and gap, if there is one), so only the heading sits on the photo and the intro starts below it. */
@media (min-width: 1024px) {
  .hdc-page-hero__inner { padding-inline: var(--space-6); }
  .hdc-page-hero__panel { position: relative; box-sizing: border-box; width: min(100% + var(--space-7), 760px); max-width: none; margin-left: calc(-1 * var(--space-7)); padding: var(--space-6) var(--space-7) 0; background: var(--surface); border-radius: var(--radius-lg) var(--radius-lg) 0 0; margin-top: calc(-1 * (var(--space-6) + 54px)); }
  .hdc-page-hero__panel:has(> .hdc-eyebrow) { margin-top: calc(-1 * (var(--space-6) + 16px + var(--space-4) + 54px)); }
}