/* Hype Portal: layout for the login and account forms. Token variables only (the child theme defines them,
   light and dark). Fields (.hdc-field) and the error panel (.hdc-error) come from the design system's bundle. */

.hdc-portal-login {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	max-width: 28rem;
}

.hdc-portal-login > h1 {
	margin: 0;
}

.hdc-portal-login > .hdc-intro {
	margin: 0;
}

/* Temporary "First time logging in?" panel (HYPE_PORTAL_FIRST_LOGIN_HELP). */
.hdc-portal-help {
	background: var(--hype-blue-tint);
	border-radius: var(--radius-lg);
	padding: var(--space-5);
	color: var(--ink);
}

.hdc-portal-help__title {
	margin: 0 0 var(--space-2);
	font-family: var(--font-body);
	font-size: inherit;
	line-height: inherit;
	font-weight: 700;
	color: var(--ink);
}

.hdc-portal-help__list {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	margin: 0;
	padding-left: 1.25em;
}

.hdc-portal-help strong {
	font-weight: 700;
}

.hdc-portal-help__note {
	margin: var(--space-3) 0 0;
}

.hdc-portal-help a {
	color: var(--ink);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.hdc-portal-help a:hover {
	text-decoration-thickness: 2px;
}

.hdc-portal-form {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	margin-top: var(--space-2);
}

.hdc-portal-form__row {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
	margin: 0;
}

.hdc-portal-form__row > label {
	font-weight: 600;
	color: var(--ink);
}

.hdc-portal-form__help {
	font-size: 14px;
	line-height: 20px;
	color: var(--ink-muted);
}


.hdc-portal-form__check {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	margin: 0;
}

.hdc-portal-form__check input {
	width: 20px;
	height: 20px;
	margin: 0;
	accent-color: var(--hype-blue-deep);
}

.hdc-portal-form__actions {
	margin: var(--space-2) 0 0;
}

.hdc-portal-form__links {
	margin: 0;
}

.hdc-portal-form__links a {
	color: var(--ink);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.hdc-portal-form__links a:hover {
	color: var(--hype-blue-deep);
}


/* Sign-up's hidden trap field: off-screen for people, still filled in by bots. */
.hdc-portal-form__trap {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* My details: a wider single column for the Fluent Form, with the same heading rhythm as the login forms. */
.hdc-portal-details {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	max-width: 40rem;
}

.hdc-portal-details > h1,
.hdc-portal-details > p {
	margin: 0;
}

.hdc-portal-details .fluentform {
	margin-top: var(--space-2);
}

/* Section headings inside the form: h3-sized, with room above so each person's details read as a block. */
.hdc-portal-details .ff-el-section-break {
	margin-top: var(--space-6);
}

.hdc-portal-details .ff-el-section-break .ff-el-section-title {
	margin: 0 0 var(--space-1);
}

/* The theme lines paired fields up along the bottom (fluent-forms.css, for labels that wrap), but on
   My details the help text under Emergency contact then pushes Phone number down. Top-align here;
   the labels on this form are short enough not to wrap. */
.hdc-portal-details .fluentform .ff-t-container > .ff-t-cell {
	justify-content: flex-start;
}

/* ===== Dashboard (/portal/) ===== */
.hdc-portal-dash {
	display: flex;
	flex-direction: column;
	gap: var(--space-6);
}

.hdc-portal-dash__head h1,
.hdc-portal-dash__head .hdc-intro {
	margin: 0;
}

.hdc-portal-dash__head {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}

/* Small underlined text links: All bookings, Change, Buy a package, Log out. */
.hdc-portal-dash__link {
	color: var(--ink);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.hdc-portal-dash__link:hover {
	color: var(--hype-blue-deep);
}

/* Notices: a blue-tint panel; one row per notice, an icon on the left, an optional action on the right. */
.hdc-notices {
	background: var(--hype-blue-tint);
	border-radius: var(--radius-lg);
	padding: 0 var(--space-5);
}

.hdc-notices__item {
	display: grid;
	grid-template-columns: 24px minmax(0, 1fr) auto;
	align-items: center;
	gap: var(--space-3) var(--space-4);
	padding: var(--space-4) 0;
}

.hdc-notices__item + .hdc-notices__item {
	/* border-subtle barely shows on the blue tint in either theme (Alex, 9 Nov 2026). */
	border-top: 1px solid var(--border-control);
}

.hdc-notices__item::before {
	content: "";
	flex: none;
	width: 24px;
	height: 24px;
	background: var(--hype-blue-deep);
	-webkit-mask: var(--hdc-notice-icon) center / contain no-repeat;
	mask: var(--hdc-notice-icon) center / contain no-repeat;
}

/* Lucide "user" and "megaphone". */
.hdc-notices__item--person {
	--hdc-notice-icon: 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 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E");
}

.hdc-notices__item--news {
	--hdc-notice-icon: 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='m3 11 18-5v12L3 14v-3z'/%3E%3Cpath d='M11.6 16.8a3 3 0 1 1-5.8-1.6'/%3E%3C/svg%3E");
}


.hdc-notices__text p {
	margin: 0;
	font-size: 15px;
	line-height: 22px;
	color: var(--ink-muted);
}

.hdc-notices__text .hdc-notices__title {
	font-size: 17px;
	line-height: 26px;
	font-weight: 600;
	color: var(--ink);
}

/* Phones: the icon sits by the title, and the action goes under the text. */
@media (max-width: 560px) {
	.hdc-notices__item {
		grid-template-columns: 24px minmax(0, 1fr);
		align-items: start;
	}

	.hdc-notices__item > :last-child:not(.hdc-notices__text) {
		grid-column: 2;
		justify-self: start;
	}
}

/* Upcoming bookings: a raised panel with the timetable's row rhythm, rows running edge to edge. */
.hdc-portal-bookings.hdc-panel {
	padding: 0;
	gap: 0;
	overflow: hidden;
}

.hdc-portal-bookings__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--space-2) var(--space-4);
	padding: var(--space-5);
}

.hdc-portal-bookings__head h2 {
	margin: 0;
	font-size: 26px;
	line-height: 34px;
}

.hdc-portal-bookings__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.hdc-portal-bookings__row {
	display: grid;
	grid-template-columns: 160px 1fr auto;
	gap: var(--space-4);
	align-items: center;
	min-height: var(--tap-target);
	padding: var(--space-4) var(--space-5);
	border-top: 1px solid var(--border-subtle);
}

.hdc-portal-bookings__when {
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.hdc-portal-bookings__empty,
.hdc-portal-bookings__more {
	margin: 0;
	padding: var(--space-4) var(--space-5) var(--space-5);
	border-top: 1px solid var(--border-subtle);
	color: var(--ink-muted);
}

@media (max-width: 560px) {
	.hdc-portal-bookings__row {
		grid-template-columns: 1fr auto;
		gap: var(--space-1) var(--space-4);
	}

	.hdc-portal-bookings__row > .hdc-timetable__class {
		grid-row: 2;
	}

	.hdc-portal-bookings__row > :last-child {
		grid-column: 2;
		grid-row: 1 / span 2;
	}
}

/* Book something: the two buttons stacked, each as wide as its label. */
.hdc-portal-dash__stack {
	flex-direction: column;
	align-items: flex-start;
}

/* Your package: big number, a slim bar of classes left. */
.hdc-portal-pass {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}

.hdc-portal-pass > p {
	margin: 0;
}

.hdc-portal-pass__count {
	color: var(--ink-muted);
}

.hdc-portal-pass__left {
	font-family: var(--font-display);
	font-size: 34px;
	line-height: 40px;
	font-weight: 700;
	color: var(--ink);
}

.hdc-portal-pass__bar {
	height: 6px;
	border-radius: var(--radius-pill);
	background: var(--surface-sunken);
	overflow: hidden;
}

.hdc-portal-pass__bar > span {
	display: block;
	height: 100%;
	background: var(--hype-blue);
}

.hdc-portal-dash__foot {
	margin: 0;
	color: var(--ink-muted);
}

/* "Log out" never splits; on phones it sits on its own line under the email (Alex, 12 Nov 2026). */
.hdc-portal-dash__foot .hdc-portal-dash__link {
	white-space: nowrap;
}

@media (max-width: 560px) {
	.hdc-portal-dash__foot .hdc-portal-dash__link {
		display: block;
		width: fit-content;
		margin-top: var(--space-2);
	}
}

/* Booking pages (/portal/book/, /portal/events/, /portal/packages/, /portal/my-bookings/):
   a back link, the heading and intro at reading width, then Amelia's form at full width. */
.hdc-portal-booking {
	display: flex;
	flex-direction: column;
	gap: var(--space-6);
}

/* The flex gap already spaces Amelia's form; drop the theme's top margin for forms in page content (amelia.css),
   which doubled the gap above it (Alex, 12 Nov 2026). (0,3,1) beats the theme's (0,3,0) whatever the load order. */
.wp-block-post-content div.hdc-portal-booking > .amelia-v2-booking {
	margin-block-start: 0;
}

.hdc-portal-booking__head {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	max-width: 44rem;
}

.hdc-portal-booking__head > * {
	margin: 0;
}

.hdc-portal-back {
	margin: 0;
}

/* Buy a package: the passes as cards above the form. */
.hdc-portal-passes {
	display: flex;
	flex-direction: column;
	gap: var(--space-5);
}

.hdc-portal-passes > *,
.hdc-portal-pass > * {
	margin: 0;
}

.hdc-portal-passes > p {
	max-width: 44rem;
}

.hdc-portal-pass__price {
	font-family: var(--font-display);
	font-size: 32px;
	line-height: 1.1;
	font-weight: 700;
	color: var(--ink);
}

/* How it works and Good to know: a full-width sunken band under the form. The shadow and clip carry the
   background to the window edges without widening the page; the bottom margin meets the footer. */
.hdc-portal-booking__band {
	margin-top: var(--space-6);
	margin-bottom: calc(var(--space-7) * -1);
	padding-block: var(--space-7);
	background: var(--surface-sunken);
	box-shadow: 0 0 0 100vmax var(--surface-sunken);
	clip-path: inset(0 -100vmax);
}

.hdc-portal-booking__band section {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
}

.hdc-portal-booking__band section > * {
	margin: 0;
}

.hdc-portal-steps {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	padding-left: var(--space-5);
}

@media (min-width: 640px) {
	.hdc-portal-booking__band {
		margin-bottom: calc(var(--space-8) * -1);
		padding-block: var(--space-8);
	}
}

@media (min-width: 1024px) {
	.hdc-portal-booking__band {
		margin-bottom: calc(var(--space-9) * -1);
	}
}

.hdc-portal-back a {
	color: var(--ink-muted);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.hdc-portal-back a::before {
	content: "← ";
}

/* ===== Saturday graded classes (/portal/idta/ and the Dashboard panel) and Resources (/portal/resources/) ===== */

/* Dates and children's classes use the bookings rows, without the action column. On phones the two parts stack. */
.hdc-portal-dates__row {
	grid-template-columns: 160px 1fr;
}

@media (max-width: 560px) {
	.hdc-portal-dates__row {
		grid-template-columns: 1fr;
		gap: var(--space-1);
	}

	.hdc-portal-bookings__row.hdc-portal-dates__row > * {
		grid-column: 1;
		grid-row: auto;
	}
}

.hdc-portal-dates__classes {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}

.hdc-portal-dates__subhead {
	margin: 0;
	padding: var(--space-4) var(--space-5) var(--space-2);
	border-top: 1px solid var(--border-subtle);
	font-size: 20px;
	line-height: 28px;
}

.hdc-portal-dates__subhead + .hdc-portal-bookings__list > :first-child {
	border-top: 0;
}

/* The Resources heading sits on the page, not in a panel. */
.hdc-portal-dates__resources {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
}

.hdc-portal-dates__resources > p {
	margin: 0;
}

.hdc-portal-bookings__head.hdc-portal-dates__plainhead {
	padding: 0;
}

/* Resource cards: the classes it's for on top, the music line with its links. */
.hdc-portal-resource__track {
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--space-1) var(--space-2);
}

.hdc-portal-resource__links {
	display: inline-flex;
	flex-wrap: wrap;
	gap: var(--space-3);
}

/* Small print under an intro (the Resources note). */
.hdc-portal-note {
	margin: 0;
	font-size: 14px;
	line-height: 20px;
	color: var(--ink-muted);
}

.hdc-portal-note a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Booking confirmation pop-up on the Dashboard (includes/confirmation.php): the confirmation page's own
   content, its full-width bands tightened to fit. */
.hdc-portal-dialog {
	/* Centred: the theme's reset takes away the browser's own centring. */
	position: fixed;
	inset: 0;
	margin: auto !important; /* WordPress's layout rules set block margins on content; this must win. */
	width: min(40rem, calc(100vw - 32px));
	height: fit-content;
	max-height: calc(100dvh - 32px);
	padding: 0;
	border: 0;
	border-radius: var(--radius-lg);
	background: var(--surface);
	color: var(--ink);
	box-shadow: var(--shadow-raised);
	overflow: auto;
}

@media (min-width: 640px) {
	.hdc-portal-dialog {
		max-height: calc(100dvh - 2 * var(--space-8));
	}
}

/* Opening moves focus to the content, not the close button, so no focus ring shows until someone tabs. */
.hdc-portal-dialog__body:focus {
	outline: none;
}

.hdc-portal-dialog::backdrop {
	background: rgb(14 27 37 / 0.6);
}

.hdc-portal-dialog__close-form {
	position: sticky;
	top: 0;
	z-index: 1;
	display: flex;
	justify-content: flex-end;
	height: 0;
}

.hdc-portal-dialog__close {
	width: var(--tap-target, 44px);
	height: var(--tap-target, 44px);
	margin: var(--space-2) var(--space-2) 0 0;
	border: 0;
	border-radius: var(--radius-pill);
	background: var(--surface-sunken);
	color: var(--ink);
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
}

.hdc-portal-dialog__body > h2:first-child,
.hdc-portal-dialog__body > h2:first-child + p {
	margin-inline: var(--space-5);
}

.hdc-portal-dialog__body > h2:first-child {
	margin-top: var(--space-6);
	padding-right: var(--space-7);
}

.hdc-portal-dialog .hdc-band {
	width: auto;
	max-width: none;
	margin: 0 !important;
	padding: var(--space-5) var(--space-5) !important;
}

.hdc-portal-dialog .hdc-band:first-child {
	padding-top: var(--space-6) !important;
	padding-right: var(--space-8) !important;
}

.hdc-portal-dialog .hdc-band__inner {
	max-width: none;
	padding: 0 !important;
}

.hdc-portal-dialog h1 {
	font-size: clamp(26px, 5vw, 32px);
	line-height: 1.2;
}

.hdc-portal-dialog__foot {
	padding: var(--space-4) var(--space-5) var(--space-5);
}

/* My details: everything below "Who do you book for?" waits for an answer (assets/js/details.js). */
.hdc-portal-details--choose .hdc-portal-details__later {
	display: none !important;
}

/* The line under each package in Amelia's package list (assets/js/booking-form.js, Alex 12 Nov 2026). */
.amelia-v2-booking #amelia-container .hype-portal-pkg-note {
	margin: 4px 0 0;
	font-size: 15px;
	line-height: 1.4;
	color: var(--wp--preset--color--ink-muted);
}