/*
 * Alodia Basketball Programs - front end styles.
 *
 * Colour and type live in the custom properties below so the whole look can
 * be retuned from one place. Selectors stay to a single class wherever
 * possible so this file does not have to out-specificity Beaver Builder
 * just to be readable; the two places a structural override is genuinely
 * needed are marked and explained where they occur.
 *
 * COLOUR NOTES, because these were measured rather than chosen by eye.
 *
 * The brand accent (#78acd2) cannot sit behind text: white on it measures
 * 2.4:1, which fails AA and fails even the 3:1 large text allowance. It is
 * used for the row edge, small marks, and anything on a dark ground, where
 * it is fine (7.9:1 on the deep navy). Every button and pill that carries
 * text uses navy instead, which measures 14.5:1 with white. Each status
 * colour was checked at 4.5:1 or better against white text.
 *
 * Fonts are inherited rather than declared, so the theme's Barlow and
 * area-normal come through and this listing cannot drift out of step with
 * the rest of the site.
 */

.abp-programs {
	/* Brand, read from the live site rather than guessed. */
	--abp-navy: #000e29;
	--abp-navy-mid: #13294c;
	--abp-accent: #78acd2;
	--abp-tint: #eef4fa;
	--abp-surface: #ffffff;
	--abp-surface-alt: #f8f8f8;

	--abp-text: #14181f;
	--abp-muted: #5a6472;          /* 6.0:1 on white */
	--abp-border: #e2e6eb;
	--abp-border-strong: #cdd4dd;
	--abp-focus: #13294c;

	/* Every one of these clears 4.5:1 behind white text. */

	/* Notice band. Faint enough that the client's own red still carries:
	   the muted text measures 5.7:1 on it and a strong red 5.3:1. */
	--abp-notice-bg: #f5f9fd;
	--abp-notice-border: #dde8f4;
	--abp-notice-accent: #78acd2;

	--abp-icon-size: 0.875rem;
	--abp-icon-color: #8b97a8;
	--abp-shadow: 0 1px 2px rgba(0, 14, 41, .05), 0 4px 12px rgba(0, 14, 41, .05);

	--abp-font: inherit;
	--abp-fs-title: 1.125rem;
	--abp-fs-base: 0.9375rem;
	--abp-fs-small: 0.8125rem;
	--abp-fs-tiny: 0.6875rem;

	--abp-space-xs: 0.25rem;
	--abp-space-sm: 0.5rem;
	--abp-space-md: 1rem;
	--abp-space-lg: 1.5rem;
	--abp-space-xl: 2rem;

	--abp-radius: 6px;
	--abp-radius-pill: 999px;

	font-family: var(--abp-font);
	color: var(--abp-text);
	font-size: var(--abp-fs-base);
	line-height: 1.45;
}

.abp-programs *,
.abp-programs *::before,
.abp-programs *::after {
	box-sizing: border-box;
}

/*
 * The hidden attribute has to win here.
 *
 * A declared display value outranks the user agent stylesheet's
 * [hidden] { display: none }, so every element this file gives a display to
 * ignores the attribute entirely. That is not theoretical: the active filter
 * count rendered as a "0" badge on load, and the chips container and the
 * grid list would both have stayed visible when the script hid them. One
 * rule fixes the whole class of bug, and this is a legitimate use of
 * !important since it exists precisely to beat a display on the same
 * element.
 */
.abp-programs [hidden] {
	display: none !important;
}

.abp-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ---------------------------------------------------------------- Toolbar */

.abp-toolbar-wrap {
	margin-bottom: var(--abp-space-md);
}

/* The mobile disclosure. Hidden above the breakpoint, where the bar is
   always open and needs no toggle. */
.abp-toolbar-toggle {
	display: none;
	align-items: center;
	gap: var(--abp-space-sm);
	font: inherit;
	font-size: var(--abp-fs-base);
	font-weight: 600;
	padding: 0.6875rem var(--abp-space-md);
	width: 100%;
	justify-content: center;
	border: 1px solid var(--abp-border-strong);
	border-radius: var(--abp-radius-pill);
	background: var(--abp-surface);
	color: var(--abp-navy-mid);
	cursor: pointer;
}

.abp-toolbar-toggle-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.375rem;
	height: 1.375rem;
	padding: 0 0.375rem;
	border-radius: var(--abp-radius-pill);
	background: var(--abp-navy-mid);
	color: #fff;
	font-size: var(--abp-fs-tiny);
	font-weight: 700;
}

/*
 * The bar itself: a white card with a soft shadow. The reference design
 * floats a white bar on a grey page; this page is white, so the border and
 * shadow are what make it read as a distinct surface instead of dissolving
 * into the background.
 *
 * overflow is visible on purpose. The date popover is positioned inside this
 * container, and any overflow value other than visible would clip it.
 */
.abp-toolbar {
	display: flex;
	align-items: center;
	gap: var(--abp-space-md);
	padding: 0.875rem var(--abp-space-md);
	background: var(--abp-surface);
	border: 1px solid var(--abp-border);
	border-radius: 14px;
	box-shadow: var(--abp-shadow);
	overflow: visible;
}

.abp-toolbar-label {
	white-space: nowrap;
	font-size: var(--abp-fs-tiny);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--abp-muted);
	flex: 0 0 auto;
}

.abp-toolbar-controls {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--abp-space-sm);
	flex: 1 1 auto;
	min-width: 0;
}

/* ---- Pills ---- */

.abp-pill {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 0.4375rem;
	padding: 0.4375rem 0.75rem;
	border: 1px solid var(--abp-border-strong);
	border-radius: var(--abp-radius-pill);
	background: var(--abp-surface);
	color: var(--abp-text);
	font-size: var(--abp-fs-small);
	line-height: 1.2;
	max-width: 100%;
	transition: border-color 120ms ease, background-color 120ms ease;
}

.abp-pill:hover {
	border-color: var(--abp-navy-mid);
}

/* Focus lives on the wrapper, since the real control inside is borderless
   and its own outline would sit oddly within the pill. */
.abp-pill:focus-within {
	border-color: var(--abp-navy-mid);
	box-shadow: 0 0 0 3px rgba(19, 41, 76, .18);
}

/*
 * The active state. The reference outlines an applied filter in its brand
 * colour and puts a clear button inside it, which is the pattern worth
 * copying: the state sits on the control that owns it rather than in a
 * separate list somewhere else on the page.
 */
.abp-pill.is-active {
	border-color: var(--abp-navy-mid);
	background: var(--abp-tint);
	color: var(--abp-navy-mid);
	font-weight: 600;
}

.abp-pill > .abp-ico {
	flex: 0 0 auto;
	color: var(--abp-muted);
}

.abp-pill.is-active > .abp-ico {
	color: var(--abp-navy-mid);
}

/*
 * Native input and select, stripped back so the pill provides the frame.
 *
 * The !important flags are the structural override this file is allowed:
 * themes and Beaver Builder set width, border, padding and background on
 * every form control with selectors specific enough to beat a single class,
 * and a control that keeps its theme border inside a pill renders as a box
 * within a box.
 */
.abp-programs .abp-pill input,
.abp-programs .abp-pill select {
	font: inherit !important;
	font-size: var(--abp-fs-small) !important;
	font-weight: inherit !important;
	color: inherit !important;
	width: auto !important;
	max-width: 100% !important;
	min-width: 0 !important;
	height: auto !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: none !important;
	background-color: transparent !important;
	box-shadow: none !important;
	outline: none !important;
	appearance: none;
	-webkit-appearance: none;
}

.abp-programs .abp-pill--search input {
	width: 9.5rem !important;
}

/*
 * Hide the browser's own clear button on a search input. Chrome and Safari
 * draw one, which sat right next to the pill's own clear button and gave the
 * search field two X's doing the same job. The pill's version is kept
 * because it is the one that matches the other filters and carries a proper
 * accessible name.
 */
.abp-programs .abp-pill--search input::-webkit-search-cancel-button,
.abp-programs .abp-pill--search input::-webkit-search-decoration {
	-webkit-appearance: none;
	appearance: none;
	display: none;
}

.abp-programs .abp-pill select {
	/* Room for the chevron that sits after it. */
	padding-right: 0.125rem !important;
	cursor: pointer;
}

.abp-pill-chevron {
	display: inline-flex;
	flex: 0 0 auto;
	color: var(--abp-muted);
	pointer-events: none;
}

.abp-pill.is-active .abp-pill-chevron {
	color: var(--abp-navy-mid);
}

.abp-pill-clear {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 1.125rem;
	height: 1.125rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--abp-navy-mid);
	color: #fff;
	cursor: pointer;
}

.abp-pill-clear:hover {
	background: var(--abp-navy);
}

.abp-pill-clear:focus-visible {
	outline: 3px solid var(--abp-focus);
	outline-offset: 2px;
}

.abp-pill-clear .abp-ico {
	width: 0.625rem;
	height: 0.625rem;
	color: currentColor;
}

/* ---- Segmented control ---- */

/* Pushed to the right hand end of the bar, which is where the reference
   design puts its toggles: dropdowns on the left, toggles on the right. The
   auto margin collapses harmlessly once the controls wrap or stack. */
.abp-seg {
	margin-left: auto;
	display: inline-flex;
	align-items: center;
	padding: 3px;
	gap: 2px;
	background: var(--abp-surface-alt);
	border: 1px solid var(--abp-border);
	border-radius: var(--abp-radius-pill);
}

.abp-seg-option {
	display: inline-flex;
	align-items: center;
	padding: 0.3125rem 0.75rem;
	border-radius: var(--abp-radius-pill);
	font-size: var(--abp-fs-small);
	color: var(--abp-muted);
	cursor: pointer;
	white-space: nowrap;
	transition: background-color 120ms ease, color 120ms ease;
}

.abp-seg-option:hover {
	color: var(--abp-navy-mid);
}

/* The radio itself is visually hidden but still the real control, so
   keyboard use, arrow keys between options and the accessible group name all
   come from the browser rather than from script. */
.abp-seg input:checked + .abp-seg-option {
	background: var(--abp-surface);
	color: var(--abp-navy-mid);
	font-weight: 700;
	box-shadow: 0 1px 2px rgba(0, 14, 41, .12);
}

.abp-seg input:focus-visible + .abp-seg-option {
	outline: 3px solid var(--abp-focus);
	outline-offset: 1px;
}

/* ---- Date popover ---- */

/*
 * The date pill is a details element, so it is the summary inside that needs
 * the pill styling rather than the wrapper. inline-block, not the flex it
 * would inherit from .abp-pill: as a flex container it left the summary
 * seven pixels short of the wrapper, which showed up as one control not
 * lining up with the rest once they stacked.
 */
.abp-pill--dates {
	display: inline-block;
	padding: 0;
	border: 0;
	background: none;
	overflow: visible;
}

.abp-pill--dates > summary {
	display: inline-flex;
	align-items: center;
	gap: 0.4375rem;
	padding: 0.4375rem 0.75rem;
	border: 1px solid var(--abp-border-strong);
	border-radius: var(--abp-radius-pill);
	background: var(--abp-surface);
	font-size: var(--abp-fs-small);
	color: var(--abp-text);
	cursor: pointer;
	list-style: none;
	white-space: nowrap;
}

.abp-pill--dates > summary::-webkit-details-marker {
	display: none;
}

.abp-pill--dates > summary:hover {
	border-color: var(--abp-navy-mid);
}

.abp-pill--dates > summary:focus-visible {
	outline: 3px solid var(--abp-focus);
	outline-offset: 2px;
}

.abp-pill--dates.is-active > summary {
	border-color: var(--abp-navy-mid);
	background: var(--abp-tint);
	color: var(--abp-navy-mid);
	font-weight: 600;
}

.abp-pill--dates > summary .abp-ico {
	color: var(--abp-muted);
}

.abp-pill--dates.is-active > summary .abp-ico {
	color: var(--abp-navy-mid);
}

.abp-pill--dates[open] > summary .abp-pill-chevron {
	transform: rotate(180deg);
}

.abp-pop {
	position: absolute;
	z-index: 20;
	top: calc(100% + 6px);
	left: 0;
	min-width: 15rem;
	padding: var(--abp-space-md);
	background: var(--abp-surface);
	border: 1px solid var(--abp-border-strong);
	border-radius: 10px;
	box-shadow: 0 8px 24px rgba(0, 14, 41, .14);
}

.abp-pop-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--abp-space-sm);
	margin-bottom: var(--abp-space-sm);
}

.abp-pop-row label {
	font-size: var(--abp-fs-tiny);
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--abp-muted);
}

/* Inside the popover the date inputs do need a visible frame, unlike the
   controls that sit inside a pill. */
.abp-programs .abp-pop input {
	font: inherit !important;
	font-size: var(--abp-fs-small) !important;
	padding: 0.375rem 0.5rem !important;
	border: 1px solid var(--abp-border-strong) !important;
	border-radius: var(--abp-radius) !important;
	background-color: var(--abp-surface) !important;
	color: var(--abp-text) !important;
	width: auto !important;
}

/* Beaver Builder styles every bare <button> inside builder content as a page
   button, white label and all, at a higher specificity than a single class.
   That turned this link white on white. Same override the date inputs above
   already need, and for the same reason. */
.abp-programs .abp-pop .abp-pop-clear {
	font: inherit !important;
	font-size: var(--abp-fs-small) !important;
	padding: 0 !important;
	border: 0 !important;
	background: none !important;
	color: var(--abp-navy-mid) !important;
	text-decoration: underline !important;
	cursor: pointer;
}

/* ------------------------------------------------------------ Result count line */

.abp-countline {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--abp-space-sm);
	margin-bottom: var(--abp-space-md);
}

.abp-count {
	margin: 0;
	font-size: var(--abp-fs-small);
	font-weight: 600;
	color: var(--abp-muted);
}

.abp-clear {
	font: inherit;
	font-size: var(--abp-fs-small);
	padding: 0;
	border: 0;
	background: none;
	color: var(--abp-navy-mid);
	text-decoration: underline;
	cursor: pointer;
}

.abp-no-results {
	padding: var(--abp-space-xl) var(--abp-space-md);
	text-align: center;
	color: var(--abp-muted);
	background: var(--abp-surface-alt);
	border-radius: var(--abp-radius);
}

/* ------------------------------------------------------------------ Icons */

/*
 * Icons sit at the start of a line and never shift when its text wraps,
 * which is why the line is a flex row with the icon fixed and aligned to the
 * first line rather than an inline element in a paragraph.
 */
.abp-ico {
	width: var(--abp-icon-size);
	height: var(--abp-icon-size);
	flex: 0 0 auto;
}

.abp-row-overline,
.abp-row-location,
.abp-attr {
	display: flex;
	align-items: flex-start;
	gap: 0.375rem;
}

.abp-row-overline > .abp-ico,
.abp-row-location > .abp-ico,
.abp-attr > .abp-ico {
	/* Nudged down so it centres on the first line of text rather than on the
	   whole wrapped block. */
	margin-top: 0.18em;
	color: var(--abp-icon-color);
}

.abp-row-date > .abp-ico {
	color: var(--abp-muted);
}

.abp-attr--type > .abp-ico {
	color: var(--abp-accent);
}

/* ------------------------------------------------------------- Row layout */

.abp-programs--list .abp-list {
	border-top: 1px solid var(--abp-border);
}

.abp-row {
	position: relative;
	border-bottom: 1px solid var(--abp-border);
	padding: var(--abp-space-md) var(--abp-space-md) var(--abp-space-md) var(--abp-space-lg);
	transition: background-color 120ms ease;
}

/* The accent edge, on rows you can register for now. It reinforces the
   Register button rather than replacing it, so no meaning rests on colour. */
.abp-row--open::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 4px;
	background: var(--abp-accent);
}

.abp-row:hover {
	background: var(--abp-surface-alt);
}

.abp-row.is-hidden-by-filter,
.abp-card.is-hidden-by-filter {
	display: none;
}

/*
 * Fixed widths on the attribute and action columns, not `auto`.
 *
 * Each row is its own grid, so sizing those columns to their content makes
 * every row size them differently: "One Day Tournament" then starts at a
 * different x position on each line and the list looks subtly broken when
 * scanned. Fixed widths are what make the columns line up down the page,
 * which is the whole reason a row layout beats a card grid for scanning.
 */
.abp-row-inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 220px 176px;
	gap: var(--abp-space-md);
	align-items: start;
}

.abp-programs--has-dates .abp-row-inner {
	grid-template-columns: 56px minmax(0, 1fr) 220px 176px;
}

/* When the set has images, the media column is reserved on every row so the
   text columns stay aligned; rows without one simply leave it blank. */
.abp-programs--has-media .abp-row-inner {
	grid-template-columns: 88px minmax(0, 1fr) 220px 176px;
}

.abp-programs--has-dates.abp-programs--has-media .abp-row-inner {
	grid-template-columns: 56px 88px minmax(0, 1fr) 220px 176px;
}

/*
 * The date block: month over day, so the list scans like a schedule. Navy on
 * rows open for registration, the pale tint on rows not open yet, which is
 * the same distinction the accent edge and the Register button make.
 */
.abp-row-when {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 60px;
	border-radius: 10px;
	background: var(--abp-tint);
	color: var(--abp-navy);
	line-height: 1;
	text-align: center;
}

.abp-when-month {
	font-size: var(--abp-fs-tiny);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--abp-navy-mid);
}

.abp-when-day {
	margin-top: 0.25rem;
	font-size: 1.5rem;
	font-weight: 800;
}

.abp-row--open .abp-row-when {
	background: var(--abp-navy-mid);
	color: #ffffff;
}

.abp-row--open .abp-when-month {
	color: #c4dbee; /* 10:1 on the navy */
}

.abp-row-when--none {
	background: transparent;
}

.abp-row-media {
	width: 88px;
	height: 88px;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	border-radius: var(--abp-radius);
}

.abp-row-media img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	/* contain, never cover: these are logos, and cropping a logo to fill a
	   square mangles it. */
	object-fit: contain;
}

.abp-row-main {
	min-width: 0;
}

.abp-row-overline {
	margin: 0 0 0.125rem;
	font-size: var(--abp-fs-tiny);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--abp-muted);
}

.abp-row-title {
	margin: 0 0 0.25rem;
	font-size: var(--abp-fs-title);
	font-weight: 700;
	line-height: 1.25;
	color: var(--abp-navy);
}

.abp-row-date {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--abp-space-sm);
	margin: 0 0 0.125rem;
	font-size: var(--abp-fs-base);
	font-weight: 600;
	color: var(--abp-text);
}

.abp-daypill {
	display: inline-block;
	font-size: var(--abp-fs-tiny);
	font-weight: 700;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	padding: 0.1875rem 0.5rem;
	border-radius: var(--abp-radius-pill);
	background: var(--abp-tint);
	color: var(--abp-navy-mid); /* 13:1 on the tint */
	white-space: nowrap;
}

.abp-row-location,
.abp-row-summary {
	margin: 0;
	font-size: var(--abp-fs-small);
	color: var(--abp-muted);
}

.abp-row-summary {
	margin-top: 0.25rem;
}

.abp-row-attrs {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	font-size: var(--abp-fs-small);
	color: var(--abp-muted);
}

/* Type, gender and ages as pills. Cost stays a text line beneath them. */
.abp-attr-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 0.375rem;
}

.abp-attr-pills .abp-attr {
	align-items: center;
	padding: 0.25rem 0.625rem;
	border-radius: var(--abp-radius-pill);
	background: #f1f3f6;
	color: var(--abp-text);
	font-size: 0.75rem;
	font-weight: 600;
	line-height: 1.3;
}

.abp-attr-pills .abp-attr > .abp-ico {
	margin-top: 0;
	width: 0.8125rem;
	height: 0.8125rem;
}

.abp-attr-pills .abp-attr--type {
	background: var(--abp-tint);
	color: var(--abp-navy-mid);
	font-weight: 700;
}

.abp-attr--age,
.abp-attr--cost {
	font-weight: 600;
	color: var(--abp-text);
}

.abp-row-attrs > .abp-attr-pills + .abp-attr,
.abp-card .abp-attr-pills + .abp-attr {
	margin-top: 0.125rem;
}

.abp-row-attrs > .abp-attr + .abp-attr {
	margin-top: -0.25rem; /* age and cost read as one block */
}

.abp-attr {
	margin: 0;
}

.abp-attr--type {
	font-weight: 700;
	color: var(--abp-text);
}

.abp-row-action {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: var(--abp-space-sm);
}

/* The button fills the fixed action column so every row's button is the same
   width. Left to hug its own text, "Join Waitlist" and "View Details" sit
   further left than "Register" and the right edge of the list goes ragged. */
.abp-row-action .abp-register {
	align-self: stretch;
}

/*
 * The Register button. Navy rather than the brand accent, because white on
 * the accent is 2.4:1. Hover darkens instead of lightening: moving toward
 * the accent would walk straight back into the contrast problem.
 *
 * The !important here is the second structural override. A theme styling
 * every <a> inside content with its own colour and text-decoration will
 * otherwise turn this into a plain blue link.
 */
.abp-programs .abp-register {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	white-space: nowrap;
	font: inherit;
	gap: 0.4375rem;
	font-size: var(--abp-fs-base) !important;
	font-weight: 700 !important;
	padding: 0.75rem 1.25rem !important;
	border-radius: var(--abp-radius-pill) !important; /* matches the filter pills */
	box-shadow: 0 1px 2px rgba(0, 14, 41, .12);
	background-color: var(--abp-navy-mid) !important;
	color: #ffffff !important;
	text-decoration: none !important;
	border: 0 !important;
	transition: background-color 120ms ease, transform 120ms ease;
}

.abp-programs .abp-register:hover {
	background-color: var(--abp-navy) !important;
	transform: translateY(-1px);
}

.abp-programs .abp-register:focus-visible {
	outline: 3px solid var(--abp-focus);
	outline-offset: 2px;
}

/* Where the Register button would be when there is no link yet. Muted and
   unboxed so it never reads as a button someone should try to press. */
/* The same footprint as the button, so rows line up, but flat grey with no
   shadow, so it reads as a status and not as something to press. */
.abp-reg-soon {
	display: block;
	width: 100%;
	padding: 0.8125rem 0.5rem;
	border-radius: var(--abp-radius-pill);
	background: #f1f3f6;
	font-size: 0.75rem;
	line-height: 1.3;
	white-space: nowrap;
	font-weight: 600;
	color: var(--abp-muted); /* 5.4:1 on the grey */
	text-align: center;
}

.abp-programs .abp-register .abp-ico {
	width: 0.8125rem;
	height: 0.8125rem;
}

/* --------------------------------------------------------------- Notice */

.abp-notice {
	margin-top: var(--abp-space-sm);
	padding-top: var(--abp-space-sm);
	border-top: 1px solid var(--abp-border);
	font-size: var(--abp-fs-small);
	line-height: 1.45;
	color: var(--abp-muted);
}

/*
 * The tinted band, on by default in the row layout.
 *
 * Negative side margins pull it out to the row's own padding so it reads as a
 * band across the row rather than a box floating inside it. The bottom
 * margin is applied only via :last-child, because the More details element
 * can follow the notice and a permanent negative bottom margin would then
 * pull that up into it. Letting the selector decide means the band closes
 * the row when it is last and behaves as an ordinary block when it is not.
 */
.abp-programs--notice-band.abp-programs--list .abp-notice {
	margin-top: var(--abp-space-md);
	margin-left: calc(var(--abp-space-lg) * -1);
	margin-right: calc(var(--abp-space-md) * -1);
	padding: 0.625rem var(--abp-space-md) 0.625rem var(--abp-space-lg);
	background: var(--abp-notice-bg);
	border-top: 1px solid var(--abp-notice-border);
}

.abp-programs--notice-band.abp-programs--list .abp-notice:last-child {
	margin-bottom: calc(var(--abp-space-md) * -1);
}

/* In the card grid there is no row padding to bleed into, so the band is a
   contained callout with the brand accent down its edge. */
.abp-programs--notice-band.abp-programs--grid .abp-notice {
	margin-top: var(--abp-space-sm);
	padding: 0.5rem 0.625rem;
	border-top: 0;
	border-left: 3px solid var(--abp-notice-accent);
	border-radius: 0 var(--abp-radius) var(--abp-radius) 0;
	background: var(--abp-notice-bg);
	width: 100%;
}

.abp-notice > :first-child { margin-top: 0; }
.abp-notice > :last-child { margin-bottom: 0; }
.abp-notice p { margin: 0 0 var(--abp-space-xs); }

.abp-notice ul,
.abp-notice ol {
	margin: 0 0 var(--abp-space-xs);
	padding-left: 1.2em;
}

/* Underlined rather than colour only, so a link stays identifiable even
   when the client has coloured the text around it. */
.abp-programs .abp-notice a {
	color: var(--abp-navy-mid);
	text-decoration: underline;
}

.abp-programs .abp-notice a:focus-visible {
	outline: 3px solid var(--abp-focus);
	outline-offset: 2px;
}

/* --------------------------------------------------------------- Details */

.abp-detail {
	margin-top: var(--abp-space-sm);
	font-size: var(--abp-fs-small);
}

.abp-detail summary {
	cursor: pointer;
	font-weight: 700;
	color: var(--abp-navy-mid);
	width: fit-content;
}

.abp-detail summary:focus-visible {
	outline: 3px solid var(--abp-focus);
	outline-offset: 2px;
}

.abp-detail-inner {
	margin-top: var(--abp-space-sm);
	color: var(--abp-muted);
}

.abp-detail-line {
	margin: 0 0 var(--abp-space-xs);
}

/* ------------------------------------------------------------ Grid layout */

.abp-programs--grid .abp-list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: var(--abp-space-md);
}

.abp-card {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--abp-border);
	border-radius: var(--abp-radius);
	overflow: hidden;
	background: var(--abp-surface);
}

.abp-card-media img {
	display: block;
	width: 100%;
	height: auto;
}

.abp-card-body {
	padding: var(--abp-space-md);
	display: flex;
	flex-direction: column;
	gap: var(--abp-space-xs);
	align-items: flex-start;
}

.abp-programs--grid .abp-row-attrs {
	margin-top: var(--abp-space-xs);
}

/* ----------------------------------------------------------- Breakpoints */

@media (max-width: 900px) {
	.abp-programs--has-media .abp-row-inner,
	.abp-row-inner {
		grid-template-columns: 88px 1fr;
		grid-template-areas:
			"media main"
			"attrs action";
	}

	.abp-row-media { grid-area: media; }
	.abp-row-main { grid-area: main; }

	.abp-row-attrs {
		grid-area: attrs;
		align-items: flex-start;
	}

	.abp-row-action {
		grid-area: action;
		flex-direction: row;
		align-items: center;
		justify-content: flex-end;
	}

	/* With no images in the set there is no media column to sit beside, so
	   the two stacked rows become single column. */
	.abp-programs:not(.abp-programs--has-media) .abp-row-inner {
		grid-template-columns: 1fr;
		grid-template-areas: "main" "attrs" "action";
	}

	/* The date block keeps its own column down the left of the row, and
	   everything else stacks beside it. */
	.abp-programs--has-dates:not(.abp-programs--has-media) .abp-row-inner {
		grid-template-columns: 48px minmax(0, 1fr);
		grid-template-areas:
			"when main"
			"when attrs"
			"when action";
		column-gap: 0.875rem;
	}

	.abp-programs--has-dates.abp-programs--has-media .abp-row-inner {
		grid-template-columns: 48px 64px minmax(0, 1fr);
		grid-template-areas:
			"when media main"
			"when attrs attrs"
			"when action action";
	}

	.abp-row-when {
		grid-area: when;
		width: 48px;
		height: 54px;
	}

	.abp-when-day {
		font-size: 1.3125rem;
	}
}

@media (max-width: 640px) {
	.abp-toolbar-toggle {
		display: flex;
		padding: 0.5rem var(--abp-space-md);
		font-size: var(--abp-fs-small);
	}

	/* Collapsed by default on small screens so the listing itself is not
	   pushed off the screen by the whole bar. */
	.abp-toolbar {
		display: none;
		margin-top: var(--abp-space-sm);
	}

	.abp-toolbar.is-open {
		display: flex;
		flex-direction: column;
		align-items: stretch;
	}

	.abp-toolbar-controls {
		flex-direction: column;
		align-items: stretch;
	}

	.abp-pill,
	.abp-pill--dates > summary,
	.abp-seg {
		width: 100%;
	}

	.abp-pill--dates {
		display: block;
	}

	.abp-pill--select select,
	.abp-programs .abp-pill--search input {
		flex: 1 1 auto;
		width: 100% !important;
	}

	.abp-pill--dates > summary {
		justify-content: flex-start;
	}

	.abp-seg {
		margin-left: 0;
	}

	.abp-seg-option {
		flex: 1 1 0;
		justify-content: center;
	}

	/* Full width on a phone, so it cannot spill off the right edge. */
	.abp-pop {
		left: 0;
		right: 0;
		min-width: 0;
	}

	.abp-programs--has-media .abp-row-inner,
	.abp-row-inner {
		grid-template-columns: 1fr;
		grid-template-areas: "media" "main" "attrs" "action";
	}

	.abp-row {
		padding-left: var(--abp-space-md);
	}

	.abp-row-media {
		width: 64px;
		height: 64px;
	}

	.abp-row-action {
		align-items: stretch;
		flex-direction: column;
	}

}

@media (prefers-reduced-motion: reduce) {
	.abp-row,
	.abp-pill,
	.abp-seg-option,
	.abp-programs .abp-register {
		transition: none;
	}
	.abp-programs .abp-register:hover {
		transform: none;
	}
}


/* --- Beaver Builder bare-button reset -------------------------------------
   Beaver Builder styles every bare <button> inside builder content as a page
   button: its own background and a white label, at a higher specificity than
   the single classes below. On a page with a listing that silently turned the
   toolbar toggle and the clear controls white on white. Re-assert the values
   the rules above already declare, at a specificity BB cannot beat. Colours
   are unchanged; this only stops them being overwritten. */
.abp-programs .abp-toolbar-toggle {
	background: var(--abp-surface) !important;
	color: var(--abp-navy-mid) !important;
	border: 1px solid var(--abp-border-strong) !important;
}
/* BB paints the label span white independently of the button. The count
   badge rule below is more specific, so it still keeps its white. */
.abp-programs .abp-toolbar-toggle span {
	color: inherit !important;
}
.abp-programs .abp-toolbar-toggle .abp-toolbar-toggle-count {
	background: var(--abp-navy-mid) !important;
	color: #fff !important;
}
.abp-programs .abp-pill {
	background: var(--abp-surface) !important;
	color: var(--abp-text) !important;
}
.abp-programs .abp-pill-clear {
	background: var(--abp-navy-mid) !important;
	color: #fff !important;
}
.abp-programs .abp-clear {
	background: none !important;
	color: var(--abp-navy-mid) !important;
}