/**
 * Single program page.
 *
 * Self-contained on purpose. The site's existing single program CSS is scoped
 * to .page-id-1608 and the Impreza column grid, because the old plugin
 * rendered onto that page rather than a post of its own. This template is a
 * real CPT single, so it carries its own layout and inherits only typography.
 *
 * Colours come from Impreza's CSS custom properties where they exist, with
 * plain fallbacks, so it follows the theme rather than hard-coding a palette.
 */

/* ------------------------------------------------------- page top spacing

   A hh_program single has no page-builder content, so Impreza falls back to
   its default section height: 253px of padding on .l-section plus another
   130px on .l-section-h, which put 383px of empty space above the title.
   There is exactly one .l-section inside .l-main on this template, so this
   is safe to reach for by name. */

body.single-hh_program .l-main > .l-section {
	padding-top: 0;
}

/* The 130px that remains on .l-section-h is not padding, it is the clearance
   for the fixed header, set by Impreza as
   .l-header.pos_fixed ~ .l-main > .l-section:first-of-type > .l-section-h.
   Do not remove it: the title slides under the nav. The breathing room below
   the header is added on the article instead, further down. */

.hh-single-program {
	--hh-gap: clamp(1.5rem, 4vw, 3rem);
	--hh-rule: var(--color-content-border, #e2ded5);
	--hh-muted: var(--color-content-faded, #6b6b6b);
	/* Impreza's header clearance leaves the title flush against the nav, so
	   the gap the page actually reads as "top spacing" is this one. */
	--hh-header: var(--header-height, 130px);
	max-width: 1180px;
	margin: 0 auto;
	padding: 2.5rem 1rem 3rem;
}

.hh-single-grid {
	display: grid;
	grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
	gap: var(--hh-gap);
	align-items: start;
}

@media (max-width: 900px) {
	.hh-single-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ---------------------------------------------------------------- main */

.hh-single-main .rs-program-title {
	margin: 0 0 0.35em;
	line-height: 1.15;
}

.hh-single-main .rs-program-teacher {
	margin: 0 0 0.5em;
	font-weight: 400;
	opacity: 0.85;
}

.hh-single-main .rs-program-date {
	margin: 0 0 1.5rem;
	color: var(--hh-muted);
}

.hh-single-main .hh-single-body {
	margin-top: 2rem;
}

.hh-single-main .hh-single-body > *:first-child {
	margin-top: 0;
}

/* --------------------------------------------------------------- aside */

/* The column is taller than most viewports once the image, dates, package
   copy and the Register button are all in it (1507px against a 1037px window
   on a 15in laptop). Plain `position: sticky` therefore never engaged: the
   aside just sat there and the Register button scrolled away with everything
   else. Capping the height and letting the column scroll inside itself is
   what makes it actually travel with the page. */

.hh-single-aside {
	position: sticky;
	/* Clear the fixed header, or the column slides under the nav as soon as
	   the page scrolls. */
	top: calc(var(--hh-header) + 1.5rem);
	min-width: 0;
	max-height: calc(100vh - var(--hh-header) - 3rem);
	overflow-y: auto;
	scrollbar-width: thin;
	padding: 1.75rem;
	background: var(--color-alt-content-bg, #f4f1ea);
	border-radius: 4px;
}

/* Logged-in staff also have the 32px admin bar above the header. */
body.admin-bar .hh-single-aside {
	top: calc(var(--hh-header) + 32px + 1.5rem);
	max-height: calc(100vh - var(--hh-header) - 32px - 3rem);
}

.hh-single-aside::-webkit-scrollbar {
	width: 6px;
}

.hh-single-aside::-webkit-scrollbar-thumb {
	border-radius: 3px;
	background: var(--hh-rule);
}

/* Short enough to fit: no inner scrollbar, no clipped corners. */
@media (min-width: 901px) {
	.hh-single-aside:not(:hover) {
		scrollbar-color: var(--hh-rule) transparent;
	}
}

@media (max-width: 900px) {
	.hh-single-aside {
		position: static;
		max-height: none;
		overflow: visible;
	}
}

/* Featured image, bled to the edges of the padded box so it reads as the top
   of the card rather than a picture floating inside it. */

.hh-aside-image {
	margin: -1.75rem -1.75rem 0;
}

.hh-aside-image img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 4px 4px 0 0;
}

/* The divider under the image is the normal .hh-aside-block rule and reads
   as a deliberate edge to the picture, so it is left alone. */

.hh-aside-block + .hh-aside-block {
	margin-top: 1.5rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--hh-rule);
}

.hh-aside-block .rs-program-label {
	display: block;
	margin: 0 0 0.5rem;
	font-size: 0.92rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.hh-aside-block p {
	margin: 0 0 0.75rem;
}

.hh-aside-block p:last-child {
	margin-bottom: 0;
}

.hh-aside-block br:first-child {
	display: none;
}

/* ------------------------------------------------------------- buttons */

.hh-single-program .hh-register {
	display: inline-block;
	padding: 0.85em 2em;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-decoration: none;
	border-radius: 3px;
	background: var(--color-content-primary, #1b3a4b);
	color: var(--color-content-bg, #fff) !important;
	transition: opacity 0.15s ease;
}

.hh-single-program .hh-register:hover {
	opacity: 0.85;
}

.hh-single-aside .hh-register {
	display: block;
	text-align: center;
}

/* Absorbed from the plugin's rs.css, so the page keeps these once it is gone. */

.hh-single-program .rs-program-teacher,
.hh-single-program .rs-program-title {
	line-height: 1.2;
	clear: none;
}

.hh-single-program .rs-regsitration-wrap {
	margin: 0 0 1.25rem;
}

/* ------------------------------------------------------ price summary */

.hh-price-summary {
	margin: 0 0 1.5rem;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.5rem;
}

.hh-price-amount {
	font-size: 1.35rem;
	font-weight: 700;
}

.hh-price-note {
	color: var(--hh-muted);
}

/* ------------------------------------------------------ pricing table */

.hh-pricing {
	margin-top: 3rem;
	padding-top: 2rem;
	border-top: 1px solid var(--hh-rule);
}

.hh-pricing-heading {
	margin: 0 0 0.75rem;
}

.hh-pricing-intro {
	margin: 0 0 1.5rem;
	color: var(--hh-muted);
}

.hh-pricing-table {
	width: 100%;
	border-collapse: collapse;
	margin: 0 0 1rem;
	font-size: 0.97rem;
}

.hh-pricing-table caption {
	text-align: left;
}

.hh-pricing-table th,
.hh-pricing-table td {
	padding: 0.85rem 0.75rem;
	text-align: left;
	vertical-align: top;
	border-bottom: 1px solid var(--hh-rule);
}

.hh-pricing-table thead th {
	font-size: 0.82rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	border-bottom-width: 2px;
	white-space: nowrap;
}

.hh-pricing-table tbody tr:last-child th,
.hh-pricing-table tbody tr:last-child td {
	border-bottom: none;
}

.hh-pricing-table .hh-col-option {
	font-weight: 400;
	padding-left: 0;
}

.hh-option-name {
	display: block;
	font-weight: 600;
}

.hh-option-desc {
	display: block;
	margin-top: 0.25rem;
	font-size: 0.88rem;
	line-height: 1.45;
	color: var(--hh-muted);
}

.hh-pricing-table .hh-col-sleeps {
	width: 5.5rem;
	text-align: center;
	white-space: nowrap;
}

.hh-pricing-table .hh-col-price {
	width: 7.5rem;
	text-align: right;
	padding-right: 0;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.hh-pricing-table tbody .hh-col-price {
	font-weight: 600;
}

.hh-pricing-foot {
	margin: 0;
	font-size: 0.88rem;
	color: var(--hh-muted);
}

/* On a phone a three column table stops being a table. Each row becomes a
   card, with the column names carried in via data-label. */
@media (max-width: 600px) {
	.hh-pricing-table,
	.hh-pricing-table tbody,
	.hh-pricing-table tr,
	.hh-pricing-table th,
	.hh-pricing-table td {
		display: block;
		width: auto;
	}

	.hh-pricing-table thead {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(1px, 1px, 1px, 1px);
	}

	.hh-pricing-table tr {
		padding: 1rem 0;
		border-bottom: 1px solid var(--hh-rule);
	}

	.hh-pricing-table th,
	.hh-pricing-table td {
		padding: 0;
		border: none;
	}

	.hh-pricing-table td {
		margin-top: 0.4rem;
		text-align: left;
	}

	.hh-pricing-table td::before {
		content: attr(data-label) ": ";
		font-weight: 600;
	}
}

/* -------------------------------------------------------- back to list */

.hh-back-link {
	margin: 2.5rem 0 0;
}

/* ---------------------------------------------------------- presenters */

.hh-presenters {
	margin-top: 3rem;
	padding-top: 2rem;
	border-top: 1px solid var(--hh-rule);
}

.hh-presenters-heading {
	margin: 0 0 1.5rem;
}

.hh-presenter {
	display: grid;
	grid-template-columns: 140px minmax(0, 1fr);
	gap: 1.5rem;
	align-items: start;
}

.hh-presenter + .hh-presenter {
	margin-top: 2rem;
}

/* Only a presenter with no photo drops to one column. This used to also
   match :only-child, which meant the single-presenter case — the common one —
   lost the two column layout and stacked the headshot above the bio. */
.hh-presenter:not(:has(.hh-presenter-photo)) {
	grid-template-columns: minmax(0, 1fr);
}

@media (max-width: 600px) {
	.hh-presenter {
		grid-template-columns: minmax(0, 1fr);
	}
}

.hh-presenter-photo img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 50%;
}

.hh-presenter .rs-teacher-name {
	margin: 0 0 0.5rem;
}

/* ------------------------------------------------------- bio "read more" */

.hh-bio-more {
	margin-top: 0.25rem;
}

.hh-bio-more > summary {
	display: inline-block;
	list-style: none;
	cursor: pointer;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.hh-bio-more > summary::-webkit-details-marker {
	display: none;
}

.hh-bio-more > summary:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

/* One element, two labels, swapped by the open state via the data attribute
   so the wording lives in the markup rather than in this file. */
.hh-bio-more[open] > summary .hh-bio-more-label {
	font-size: 0;
}

.hh-bio-more[open] > summary .hh-bio-more-label::after {
	content: attr(data-open);
	font-size: 1rem;
}

.hh-bio-rest {
	margin-top: 0.75rem;
}

/* [hh_program_presenters more="link"]: same look as the fold's summary */
.hh-bio-link {
	margin: 0.25rem 0 0;
}

.hh-bio-link a {
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.hh-bio-rest > *:last-child {
	margin-bottom: 0;
}