/* =============================================================================
   Archive / Taxonomy / Search / 404 Templates — Shared Styles
   Loaded on: is_archive(), is_tax(), is_search(), is_404(),
              page-template-program-categories.php,
              page-template-program-audiences.php
   ============================================================================= */

/* -----------------------------------------------------------------------------
   Hero banner — used by taxonomy and archive pages
   ----------------------------------------------------------------------------- */
.ac-archive-hero {
	background:  var(--ac-color-primary);
	color:       var(--ac-color-white);
	padding-block: var(--ac-space-6) var(--ac-space-5);
}

/* Breadcrumb — colour overrides for use on dark hero banners.
   Structural styles (flex, font-size, separator) live in base.css. */
.ac-archive-hero .ac-breadcrumb {
	color: rgba( 255, 255, 255, 0.75 );
}

.ac-archive-hero .ac-breadcrumb__sep {
	color: rgba( 255, 255, 255, 0.45 );
}

.ac-archive-hero .ac-breadcrumb a {
	color:                 rgba( 255, 255, 255, 0.9 );
	text-decoration-color: rgba( 255, 255, 255, 0.4 );
}

.ac-archive-hero .ac-breadcrumb a:hover,
.ac-archive-hero .ac-breadcrumb a:focus-visible {
	color: var(--ac-color-white);
}

/* Hero title */
.ac-archive-hero__title {
	display:     flex;
	align-items: center;
	gap:         var(--ac-space-3);
	font-size:   clamp( var(--ac-font-size-2xl), 5vw, var(--ac-font-size-3xl) );
	font-weight: var(--ac-font-weight-bold);
	color:       var(--ac-color-white);
	margin:      0 0 var(--ac-space-3);
	line-height: var(--ac-line-height-tight);
}

.ac-archive-hero__desc {
	max-width:   62ch;
	margin:      0;
	font-size:   var(--ac-font-size-base);
	color:       rgba( 255, 255, 255, 0.85 );
	line-height: var(--ac-line-height-loose);
}

/* -----------------------------------------------------------------------------
   Category filter bar (archive-program.php)
   ----------------------------------------------------------------------------- */
.ac-archive-filter {
	background:     var(--ac-color-white);
	border-bottom:  1px solid var(--ac-color-border);
	padding-block:  var(--ac-space-5);
}

.ac-archive-filter__label {
	display:        block;
	text-align:     center;
	font-size:      0.7rem;
	font-weight:    var(--ac-font-weight-semibold);
	color:          var(--ac-color-text-muted);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	margin-bottom:  var(--ac-space-3);
}

.ac-archive-filter__list {
	list-style:      none;
	margin:          0;
	padding:         0;
	display:         flex;
	flex-wrap:       wrap;
	gap:             var(--ac-space-2);
	justify-content: center;
}

.ac-archive-filter__item a {
	display:         inline-flex;
	align-items:     center;
	gap:             var(--ac-space-2);
	padding:         var(--ac-space-2) var(--ac-space-4);
	/* WCAG 2.5.5 — minimum 44px touch/click target */
	min-height:      44px;
	border:          2px solid var(--ac-color-border);
	border-radius:   999px;
	font-size:       var(--ac-font-size-sm);
	font-weight:     var(--ac-font-weight-semibold);
	color:           var(--ac-color-text);
	text-decoration: none;
	transition:
		background-color 0.18s ease,
		border-color     0.18s ease,
		color            0.18s ease;
}

.ac-archive-filter__item a:hover,
.ac-archive-filter__item a:focus-visible {
	border-color: var(--ac-color-primary);
	color:        var(--ac-color-primary);
	background:   color-mix( in srgb, var(--ac-color-primary) 6%, transparent );
}

.ac-archive-filter__item a[aria-current="page"] {
	background:   var(--ac-color-primary);
	border-color: var(--ac-color-primary);
	color:        var(--ac-color-white);
}

.ac-archive-filter__item a:focus-visible {
	outline:        3px solid var(--ac-color-focus-ring, var(--ac-color-primary));
	outline-offset: 2px;
	/* pill-shaped focus ring matches chip shape */
	border-radius:  999px;
}

/* -----------------------------------------------------------------------------
   Archive body
   ----------------------------------------------------------------------------- */
.ac-archive {
	padding-block: var(--ac-space-6);
}

.ac-archive__count {
	text-align:    center;
	font-size:     var(--ac-font-size-sm);
	color:         var(--ac-color-text-muted);
	margin-bottom: var(--ac-space-6);
}

.ac-archive__empty {
	text-align:  center;
	padding-block: var(--ac-space-6);
}

.ac-archive__empty p {
	font-size:     var(--ac-font-size-base);
	color:         var(--ac-color-text-muted);
	margin-bottom: var(--ac-space-6);
}

/* Listing page wrapper (page-template-program-*.php) */
.ac-listing-page {
	padding-block: var(--ac-space-6);
}

/* -----------------------------------------------------------------------------
   Pagination — targets WordPress paginate_links() markup
   ----------------------------------------------------------------------------- */
.ac-pagination {
	display:         flex;
	justify-content: center;
	align-items:     center;
	gap:             var(--ac-space-1);
	margin-top:      var(--ac-space-10);
	flex-wrap:       wrap;
}

.ac-pagination .page-numbers {
	display:         inline-flex;
	align-items:     center;
	justify-content: center;
	min-width:       44px;
	min-height:      44px;
	padding:         var(--ac-space-2) var(--ac-space-3);
	border:          1px solid var(--ac-color-border);
	border-radius:   var(--ac-radius-md, 8px);
	font-size:       var(--ac-font-size-sm);
	font-weight:     var(--ac-font-weight-medium);
	color:           var(--ac-color-text);
	text-decoration: none;
	line-height:     1;
	transition:
		background-color 0.18s ease,
		border-color     0.18s ease,
		color            0.18s ease;
}

.ac-pagination .page-numbers:is(a):hover,
.ac-pagination .page-numbers:is(a):focus-visible {
	border-color: var(--ac-color-primary);
	color:        var(--ac-color-primary);
	background:   color-mix( in srgb, var(--ac-color-primary) 6%, transparent );
}

.ac-pagination .page-numbers:is(a):focus-visible {
	outline:        3px solid var(--ac-color-focus-ring, var(--ac-color-primary));
	outline-offset: 2px;
}

.ac-pagination .page-numbers.current {
	background:   var(--ac-color-primary);
	border-color: var(--ac-color-primary);
	color:        var(--ac-color-white);
	font-weight:  var(--ac-font-weight-bold);
}

.ac-pagination .page-numbers.dots {
	border:          none;
	background:      transparent;
	pointer-events:  none;
	min-width:       unset;
	padding-inline:  var(--ac-space-1);
}

/* -----------------------------------------------------------------------------
   404 page
   ----------------------------------------------------------------------------- */
.ac-404 {
	padding-block: var(--ac-space-8) var(--ac-space-10);
	text-align:    center;
}

.ac-404__code {
	display:     block;
	font-size:   clamp( 5rem, 20vw, 10rem );
	font-weight: var(--ac-font-weight-bold);
	line-height: 1;
	margin:      0 0 var(--ac-space-4);
	/* Subtle ghost text — visible but not alarming */
	color:       color-mix( in srgb, var(--ac-color-primary) 20%, var(--ac-color-border) );
}

.ac-404__title {
	font-size:   clamp( var(--ac-font-size-xl), 4vw, var(--ac-font-size-2xl) );
	font-weight: var(--ac-font-weight-bold);
	color:       var(--ac-color-primary);
	margin:      0 0 var(--ac-space-4);
}

.ac-404__desc {
	font-size:   var(--ac-font-size-base);
	color:       var(--ac-color-text-muted);
	max-width:   48ch;
	margin:      0 auto var(--ac-space-8);
	line-height: var(--ac-line-height-loose);
}

.ac-404__actions {
	display:         flex;
	gap:             var(--ac-space-3);
	justify-content: center;
	flex-wrap:       wrap;
	margin-bottom:   var(--ac-space-10);
}

.ac-404__search {
	max-width: 480px;
	margin:    0 auto;
}

/* -----------------------------------------------------------------------------
   Search results page
   ----------------------------------------------------------------------------- */
.ac-search-results {
	padding-block: var(--ac-space-5);
}

.ac-search-results__header {
	margin-bottom: var(--ac-space-8);
	text-align:    center;
}

.ac-search-results__title {
	font-size:   clamp( var(--ac-font-size-xl), 4vw, var(--ac-font-size-2xl) );
	font-weight: var(--ac-font-weight-bold);
	color:       var(--ac-color-primary);
	margin:      0 0 var(--ac-space-2);
}

.ac-search-results__count {
	font-size: var(--ac-font-size-sm);
	color:     var(--ac-color-text-muted);
}

.ac-search-results__refine {
	max-width: 540px;
	margin:    var(--ac-space-5) auto 0;
}

.ac-search-results__none {
	text-align:  center;
	padding-block: var(--ac-space-14);
}

.ac-search-results__none-icon {
	display:      block;
	font-size:    3rem;
	color:        var(--ac-color-text-muted);
	margin-bottom: var(--ac-space-4);
}

.ac-search-results__none-title {
	font-size:   var(--ac-font-size-xl);
	font-weight: var(--ac-font-weight-bold);
	color:       var(--ac-color-primary);
	margin:      0 0 var(--ac-space-4);
}

.ac-search-results__none-desc {
	color:       var(--ac-color-text-muted);
	max-width:   44ch;
	margin:      0 auto var(--ac-space-8);
	line-height: var(--ac-line-height-loose);
}

/* Post-card grid reuse on search results — .ac-related__grid already defined globally */

/* -----------------------------------------------------------------------------
   Search form — shared by 404 + search pages
   ----------------------------------------------------------------------------- */
.ac-search-form {
	display:    flex;
	border:     2px solid var(--ac-color-border);
	border-radius: var(--ac-radius-xl, 16px);
	overflow:   hidden;
	background: var(--ac-color-white);
	transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.ac-search-form:focus-within {
	border-color: var(--ac-color-primary);
	box-shadow:   0 0 0 3px color-mix( in srgb, var(--ac-color-primary) 15%, transparent );
}

.ac-search-form__input {
	flex:        1;
	min-width:   0;
	border:      none;
	background:  transparent;
	padding:     var(--ac-space-3) var(--ac-space-4);
	font-family: var(--ac-font-family-ui, inherit);
	font-size:   var(--ac-font-size-base);
	color:       var(--ac-color-text);
	outline:     none;
	min-height:  52px;
}

.ac-search-form__input::placeholder {
	color: var(--ac-color-text-muted);
}

.ac-search-form__btn {
	flex-shrink: 0;
	display:     inline-flex;
	align-items: center;
	gap:         var(--ac-space-2);
	padding:     var(--ac-space-3) var(--ac-space-5);
	background:  var(--ac-color-primary);
	color:       var(--ac-color-white);
	border:      none;
	font-family: var(--ac-font-family-ui, inherit);
	font-size:   var(--ac-font-size-sm);
	font-weight: var(--ac-font-weight-semibold);
	cursor:      pointer;
	white-space: nowrap;
	transition:  background-color 0.18s ease;
}

.ac-search-form__btn:hover {
	background: color-mix( in srgb, var(--ac-color-primary) 85%, black );
}

.ac-search-form__btn:focus-visible {
	outline:        3px solid var(--ac-color-focus-ring, var(--ac-color-primary));
	outline-offset: -3px;
}

/* Program-search page: secondary (pink) submit button */
.ac-archive-hero .ac-search-form__btn {
	background: var(--ac-color-secondary);
}
.ac-archive-hero .ac-search-form__btn:hover {
	background: var(--ac-color-secondary-dark);
}
.ac-archive-hero .ac-search-form__btn:focus-visible {
	outline-color: var(--ac-color-secondary);
}

/* -----------------------------------------------------------------------------
   Hero search bar
   ----------------------------------------------------------------------------- */
.ac-archive-hero__search {
	max-width:  100%;
	margin-top: var(--ac-space-7);
}

/* Audience-coloured pills — picks up --ac-pill-colour if set */
.ac-archive-filter__item--audience a {
	border-color: var(--ac-pill-colour, var(--ac-color-border));
}

.ac-archive-filter__item--audience a:hover,
.ac-archive-filter__item--audience a:focus-visible {
	background:   color-mix( in srgb, var(--ac-pill-colour, var(--ac-color-primary)) 10%, transparent );
	border-color: var(--ac-pill-colour, var(--ac-color-primary));
	color:        var(--ac-pill-colour, var(--ac-color-primary));
}

/* Second filter bar sits flush against the first — remove double border */
.ac-archive-filter + .ac-archive-filter {
	border-top: none;
}

/* -----------------------------------------------------------------------------
   Autosuggest dropdown
   ----------------------------------------------------------------------------- */

/* Wrapper: positioning context for the floating listbox */
.ac-autosuggest-wrap {
	position: relative;
}

/* Listbox */
.ac-autosuggest {
	position:     absolute;
	top:          calc( 100% + 6px );
	left:         0;
	right:        0;
	z-index:      1200;
	list-style:   none;
	margin:       0;
	padding:      var(--ac-space-2) 0;
	background:   var(--ac-color-white);
	color:        var(--ac-color-text);   /* reset — parent hero has white text */
	border:       1px solid var(--ac-color-border);
	border-radius: var(--ac-radius-lg, 12px);
	box-shadow:   0 12px 32px rgba( 0, 0, 0, 0.14 );
	overflow:     hidden;
}

/* Drop-in animation — only added when not prefers-reduced-motion */
@keyframes ac-sg-drop {
	from { opacity: 0; transform: translateY( -8px ); }
	to   { opacity: 1; transform: translateY( 0 ); }
}

.ac-autosuggest.ac-autosuggest--animate {
	animation: ac-sg-drop 0.18s cubic-bezier( 0.22, 1, 0.36, 1 ) both;
}

@media ( prefers-reduced-motion: reduce ) {
	.ac-autosuggest.ac-autosuggest--animate {
		animation: none !important;
	}
}

/* Each suggestion row */
.ac-autosuggest__item {
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	gap:             var(--ac-space-3);
	padding:         var(--ac-space-3) var(--ac-space-4);
	cursor:          pointer;
	transition:      background-color 0.12s ease;
}

.ac-autosuggest__item.is-highlighted,
.ac-autosuggest__item:hover {
	background: color-mix( in srgb, var(--ac-color-primary) 6%, transparent );
}

/* Name text */
.ac-autosuggest__name {
	flex:          1;
	font-size:     var(--ac-font-size-sm);
	font-weight:   var(--ac-font-weight-medium);
	color:         var(--ac-color-text);
	white-space:   nowrap;
	overflow:      hidden;
	text-overflow: ellipsis;
}

/* Type badge pill */
.ac-autosuggest__badge {
	flex-shrink:    0;
	font-size:      0.65rem;
	font-weight:    var(--ac-font-weight-bold);
	text-transform: uppercase;
	letter-spacing: 0.07em;
	padding:        2px 9px;
	border-radius:  999px;
	color:          var(--ac-color-white);
	background:     var(--ac-color-primary);
}

/* Distinct colours per type */
.ac-autosuggest__badge--program {
	background: var(--ac-color-primary);
}

.ac-autosuggest__badge--category {
	background: #2a7d4f; /* accessible green */
}

.ac-autosuggest__badge--audience {
	background: #7c3d8f; /* plum/purple */
}

/* -----------------------------------------------------------------------------
   Dark mode overrides
   Selector must match dark-mode.css: html[data-color-scheme="dark"]
   AND the system-preference media query with the same token overrides.
   ----------------------------------------------------------------------------- */

/* ── Filter bar ──────────────────────────────────────────────────────────── */
html[data-color-scheme="dark"] .ac-archive-filter,
html[data-color-scheme="dark"] .ac-archive-filter + .ac-archive-filter {
	background:   var(--ac-color-surface);
	border-color: var(--ac-color-border);
}

html[data-color-scheme="dark"] .ac-archive-filter__label {
	color: var(--ac-color-text-muted);
}

html[data-color-scheme="dark"] .ac-archive-filter__item a {
	color:        var(--ac-color-text);
	border-color: var(--ac-color-border);
	background:   transparent;
}

/* Hover / focus: navy primary is invisible on dark bg — swap to secondary */
html[data-color-scheme="dark"] .ac-archive-filter__item a:hover,
html[data-color-scheme="dark"] .ac-archive-filter__item a:focus-visible {
	border-color: var(--ac-color-secondary);
	color:        var(--ac-color-white);
	background:   var(--ac-color-secondary);
}

/* Active chip: primary (navy) is near-invisible on dark bg — swap to secondary */
html[data-color-scheme="dark"] .ac-archive-filter__item a[aria-current="page"] {
	background:   var(--ac-color-secondary);
	border-color: var(--ac-color-secondary);
	color:        var(--ac-color-white);
}

/* Audience pills use a custom colour — ensure text stays white on active */
html[data-color-scheme="dark"] .ac-archive-filter__item--audience a {
	border-color: var(--ac-pill-colour, var(--ac-color-border));
	color:        var(--ac-pill-colour, var(--ac-color-text));
}

html[data-color-scheme="dark"] .ac-archive-filter__item--audience a:hover,
html[data-color-scheme="dark"] .ac-archive-filter__item--audience a:focus-visible {
	background:   var(--ac-pill-colour, var(--ac-color-secondary));
	border-color: var(--ac-pill-colour, var(--ac-color-secondary));
	color:        var(--ac-color-white);
}

html[data-color-scheme="dark"] .ac-archive-filter__item--audience a[aria-current="page"] {
	background:   var(--ac-pill-colour, var(--ac-color-secondary));
	border-color: var(--ac-pill-colour, var(--ac-color-secondary));
	color:        var(--ac-color-white);
}

/* ── Pagination ──────────────────────────────────────────────────────────── */
html[data-color-scheme="dark"] .ac-pagination .page-numbers:not(.current) {
	border-color: var(--ac-color-border);
	color:        var(--ac-color-text);
	background:   transparent;
}

html[data-color-scheme="dark"] .ac-pagination .page-numbers.current {
	background:   var(--ac-color-secondary);
	border-color: var(--ac-color-secondary);
}

/* =============================================================================
   Program Search — multi-section result layout
   ============================================================================= */

/* Divider between result sections */
.ac-search-section {
	padding-block: var(--ac-space-5) var(--ac-space-4);
	border-top:    2px solid var(--ac-color-border);
}

.ac-search-section:first-of-type {
	border-top: none;
}

/* Section heading — icon + label + count inline */
.ac-search-section__heading {
	display:       flex;
	align-items:   center;
	gap:           var(--ac-space-3);
	font-size:     var(--ac-font-size-xl);
	font-weight:   var(--ac-font-weight-bold);
	color:         var(--ac-color-text);
	margin:        0 0 var(--ac-space-6);
}

.ac-search-section__heading i {
	color:       var(--ac-color-primary);
	font-size:   1em;
	flex-shrink: 0;
}

.ac-search-section__count {
	font-size:   var(--ac-font-size-sm);
	font-weight: var(--ac-font-weight-normal);
	color:       var(--ac-color-text-muted);
}

/* "View all X activities →" link below the preview grid */
.ac-search-section__more {
	margin-top: var(--ac-space-6);
	text-align: center;
}

/* Program Search autocomplete — thumbnail + type badge item layout */
.ac-ps-suggest__item {
	display:         flex;
	align-items:     center;
	justify-content: flex-start;  /* override base space-between */
	gap:             var(--ac-space-3);
}

.ac-ps-suggest__thumb {
	width:         40px;
	height:        40px;
	border-radius: var(--ac-radius-sm);
	object-fit:    cover;
	flex-shrink:   0;
}

.ac-ps-suggest__thumb--icon {
	display:         flex;
	align-items:     center;
	justify-content: center;
	background:      var(--ac-color-surface);
	border:          1px solid var(--ac-color-border);
	color:           var(--ac-color-primary);
	font-size:       1rem;
}

.ac-ps-suggest__text {
	display:        flex;
	flex-direction: row;
	align-items:    center;
	justify-content: space-between;
	gap:            var(--ac-space-2);
	flex:           1;
	min-width:      0;
}

.ac-ps-suggest__title {
	flex:          1;
	min-width:     0;
	font-size:     var(--ac-font-size-sm);
	font-weight:   var(--ac-font-weight-medium);
	color:         var(--ac-color-text);
	white-space:   nowrap;
	overflow:      hidden;
	text-overflow: ellipsis;
}

/* Activity badge colour */
.ac-autosuggest__badge--activity {
	background: var(--ac-color-blue);  /* #0081C9 medium blue */
}


/* ── Search form ─────────────────────────────────────────────────────────── */
html[data-color-scheme="dark"] .ac-search-form {
	background:   var(--ac-color-surface);
	border-color: var(--ac-color-border);
}

html[data-color-scheme="dark"] .ac-search-form__input {
	color: var(--ac-color-text);
}

html[data-color-scheme="dark"] .ac-search-form__input::placeholder {
	color: var(--ac-color-text-muted);
}

/* ── Autosuggest ─────────────────────────────────────────────────────────── */
html[data-color-scheme="dark"] .ac-autosuggest {
	background:   var(--ac-color-surface);
	border-color: var(--ac-color-border);
	box-shadow:   0 12px 32px rgba( 0, 0, 0, 0.4 );
}

html[data-color-scheme="dark"] .ac-autosuggest__name {
	color: var(--ac-color-text);
}

html[data-color-scheme="dark"] .ac-autosuggest__item.is-highlighted,
html[data-color-scheme="dark"] .ac-autosuggest__item:hover {
	background: color-mix( in srgb, var(--ac-color-secondary) 12%, transparent );
}

/* ── System-preference dark (no explicit user choice) ────────────────────── */
@media (prefers-color-scheme: dark) {
	html:not([data-color-scheme="light"]) .ac-archive-filter,
	html:not([data-color-scheme="light"]) .ac-archive-filter + .ac-archive-filter { background: var(--ac-color-surface); border-color: var(--ac-color-border); }
	html:not([data-color-scheme="light"]) .ac-archive-filter__label               { color: var(--ac-color-text-muted); }
	html:not([data-color-scheme="light"]) .ac-archive-filter__item a              { color: var(--ac-color-text); border-color: var(--ac-color-border); background: transparent; }
	html:not([data-color-scheme="light"]) .ac-archive-filter__item a:hover,
	html:not([data-color-scheme="light"]) .ac-archive-filter__item a:focus-visible { border-color: var(--ac-color-secondary); color: var(--ac-color-white); background: var(--ac-color-secondary); }
	html:not([data-color-scheme="light"]) .ac-archive-filter__item a[aria-current="page"] { background: var(--ac-color-secondary); border-color: var(--ac-color-secondary); color: var(--ac-color-white); }
	html:not([data-color-scheme="light"]) .ac-archive-filter__item--audience a              { border-color: var(--ac-pill-colour, var(--ac-color-border)); color: var(--ac-pill-colour, var(--ac-color-text)); }
	html:not([data-color-scheme="light"]) .ac-archive-filter__item--audience a:hover,
	html:not([data-color-scheme="light"]) .ac-archive-filter__item--audience a:focus-visible { background: var(--ac-pill-colour, var(--ac-color-secondary)); border-color: var(--ac-pill-colour, var(--ac-color-secondary)); color: var(--ac-color-white); }
	html:not([data-color-scheme="light"]) .ac-archive-filter__item--audience a[aria-current="page"] { background: var(--ac-pill-colour, var(--ac-color-secondary)); border-color: var(--ac-pill-colour, var(--ac-color-secondary)); color: var(--ac-color-white); }
	html:not([data-color-scheme="light"]) .ac-pagination .page-numbers:not(.current)        { border-color: var(--ac-color-border); color: var(--ac-color-text); background: transparent; }
	html:not([data-color-scheme="light"]) .ac-pagination .page-numbers.current              { background: var(--ac-color-secondary); border-color: var(--ac-color-secondary); }
	html:not([data-color-scheme="light"]) .ac-search-form                                   { background: var(--ac-color-surface); border-color: var(--ac-color-border); }
	html:not([data-color-scheme="light"]) .ac-search-form__input                            { color: var(--ac-color-text); }
	html:not([data-color-scheme="light"]) .ac-search-form__input::placeholder               { color: var(--ac-color-text-muted); }
	html:not([data-color-scheme="light"]) .ac-autosuggest                                   { background: var(--ac-color-surface); border-color: var(--ac-color-border); box-shadow: 0 12px 32px rgba(0,0,0,0.4); }
	html:not([data-color-scheme="light"]) .ac-autosuggest__name                             { color: var(--ac-color-text); }
	html:not([data-color-scheme="light"]) .ac-autosuggest__item.is-highlighted,
	html:not([data-color-scheme="light"]) .ac-autosuggest__item:hover                       { background: color-mix( in srgb, var(--ac-color-secondary) 12%, transparent ); }
}

/* =============================================================================
   Activity card chips  (archive-program.php)
   Small inline tags below the excerpt showing Program / Category / Audience.
   ============================================================================= */

.ac-related-card__chips {
	display:    flex;
	flex-wrap:  wrap;
	gap:        var(--ac-space-1);
	list-style: none;
	margin:     auto 0 0; /* push to bottom of flex column */
	padding:    var(--ac-space-3) 0 0;
}

.ac-related-card__chip {
	display:       inline-flex;
	align-items:   center;
	gap:           var(--ac-space-1);
	padding:       2px var(--ac-space-2);
	border-radius: 999px;
	font-size:     var(--ac-font-size-xs, 0.7rem);
	font-weight:   var(--ac-font-weight-medium);
	line-height:   1.4;
	white-space:   nowrap;
}

.ac-related-card__chip i {
	font-size: 0.75em;
}

/* Program chip — primary blue */
.ac-related-card__chip--program {
	background: color-mix( in srgb, var(--ac-color-primary) 12%, transparent );
	color:      var(--ac-color-primary);
}

/* Category chip — secondary (pink) */
.ac-related-card__chip--category {
	background: color-mix( in srgb, var(--ac-color-secondary) 12%, transparent );
	color:      var(--ac-color-secondary);
}

/* Audience chip — blue accent */
.ac-related-card__chip--audience {
	background: color-mix( in srgb, var(--ac-color-blue) 12%, transparent );
	color:      var(--ac-color-blue);
}

/* =============================================================================
   Chip-filter bar  (archive-program.php)
   Three compact chip buttons (Category / Audience / By Program) each opening
   a floating dropdown list of options.
   ============================================================================= */

/* ── Bar container ─────────────────────────────────────────────────────────── */
.ac-filter-bar {
	background:    var(--ac-color-white);
	border-bottom: 1px solid var(--ac-color-border);
	padding-block: var(--ac-space-4);
	position:      sticky;
	top:           0;
	z-index:       100;
}

/* ── Chip row ──────────────────────────────────────────────────────────────── */
.ac-filter-chips {
	display:     flex;
	align-items: center;
	gap:         var(--ac-space-2);
	flex-wrap:   wrap;
}

.ac-filter-chips__clear {
	display:       inline-flex;
	align-items:   center;
	gap:           var(--ac-space-1);
	margin-left:   auto;
	font-size:     var(--ac-font-size-sm);
	color:         var(--ac-color-text-muted);
	text-decoration: none;
	transition:    color 0.15s ease;
}

.ac-filter-chips__clear:hover,
.ac-filter-chips__clear:focus-visible {
	color: var(--ac-color-secondary);
}

/* ── Individual chip wrapper ───────────────────────────────────────────────── */
.ac-chip-filter {
	position: relative;
}

/* ── Chip trigger button ───────────────────────────────────────────────────── */
.ac-chip-filter__trigger {
	display:     inline-flex;
	align-items: center;
	gap:         var(--ac-space-2);
	padding:     var(--ac-space-2) var(--ac-space-4);
	background:  var(--ac-color-white);
	border:      1.5px solid var(--ac-color-border);
	border-radius: 999px;
	font-size:    var(--ac-font-size-sm);
	font-weight:  var(--ac-font-weight-medium);
	font-family:  inherit;
	color:        var(--ac-color-text);
	cursor:       pointer;
	white-space:  nowrap;
	transition:   border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.ac-chip-filter__trigger:hover {
	border-color: var(--ac-color-primary);
	color:        var(--ac-color-primary);
}

.ac-chip-filter__trigger:focus-visible {
	outline:        2px solid var(--ac-color-primary);
	outline-offset: 2px;
}

/* Open state */
.ac-chip-filter__trigger[aria-expanded="true"] {
	border-color: var(--ac-color-primary);
	background:   var(--ac-color-primary);
	color:        var(--ac-color-white);
}

/* Active (has a value selected) — keep border coloured when closed */
.ac-chip-filter--active .ac-chip-filter__trigger {
	border-color: var(--ac-color-primary);
	color:        var(--ac-color-primary);
}

.ac-chip-filter--active .ac-chip-filter__trigger[aria-expanded="true"] {
	background: var(--ac-color-primary);
	color:      var(--ac-color-white);
}

/* Chevron rotation */
.ac-chip-filter__chevron {
	font-size:  0.65em;
	transition: transform 0.2s ease;
}

.ac-chip-filter__trigger[aria-expanded="true"] .ac-chip-filter__chevron {
	transform: rotate(180deg);
}

/* ── Dropdown panel ────────────────────────────────────────────────────────── */
.ac-chip-filter__dropdown {
	position:   absolute;
	top:        calc(100% + 6px);
	left:       0;
	min-width:  200px;
	max-width:  280px;
	max-height: 300px;
	overflow-y: auto;
	background: var(--ac-color-white);
	border:     1px solid var(--ac-color-border);
	border-radius: var(--ac-radius-lg);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
	z-index:    200;
	padding:    var(--ac-space-2) 0;
}

.ac-chip-filter__list {
	list-style: none;
	margin:     0;
	padding:    0;
}

/* ── Dropdown items ─────────────────────────────────────────────────────────── */
.ac-chip-filter__item a {
	display:         flex;
	align-items:     center;
	gap:             var(--ac-space-2);
	padding:         var(--ac-space-2) var(--ac-space-4);
	font-size:       var(--ac-font-size-sm);
	color:           var(--ac-color-text);
	text-decoration: none;
	transition:      background 0.1s ease;
	white-space:     nowrap;
	overflow:        hidden;
	text-overflow:   ellipsis;
}

.ac-chip-filter__item a:hover,
.ac-chip-filter__item a:focus-visible {
	background: var(--ac-color-surface);
	color:      var(--ac-color-primary);
}

/* Active / selected item */
.ac-chip-filter__item--active a {
	color:       var(--ac-color-primary);
	font-weight: var(--ac-font-weight-semibold);
}

.ac-chip-filter__item--active a::after {
	content:       '';
	display:       inline-block;
	margin-left:   auto;
	flex-shrink:   0;
	width:         8px;
	height:        8px;
	background:    var(--ac-color-primary);
	border-radius: 50%;
}

/* ── Dark mode ─────────────────────────────────────────────────────────────── */
html[data-color-scheme="dark"] .ac-filter-bar {
	background:    var(--ac-color-surface);
	border-color:  var(--ac-color-border);
}

html[data-color-scheme="dark"] .ac-chip-filter__trigger {
	background:   var(--ac-color-surface);
	border-color: var(--ac-color-border);
	color:        var(--ac-color-text);
}

html[data-color-scheme="dark"] .ac-chip-filter__trigger:hover {
	border-color: var(--ac-color-primary);
	color:        var(--ac-color-primary);
}

html[data-color-scheme="dark"] .ac-chip-filter__trigger[aria-expanded="true"] {
	background:   var(--ac-color-primary);
	border-color: var(--ac-color-primary);
	color:        var(--ac-color-white);
}

html[data-color-scheme="dark"] .ac-chip-filter__dropdown {
	background:   var(--ac-color-surface);
	border-color: var(--ac-color-border);
	box-shadow:   0 8px 24px rgba(0, 0, 0, 0.4);
}

html[data-color-scheme="dark"] .ac-chip-filter__item a {
	color: var(--ac-color-text);
}

html[data-color-scheme="dark"] .ac-chip-filter__item a:hover,
html[data-color-scheme="dark"] .ac-chip-filter__item a:focus-visible {
	background: rgba(255,255,255,0.06);
}

@media (prefers-color-scheme: dark) {
	html:not([data-color-scheme="light"]) .ac-filter-bar                             { background: var(--ac-color-surface); border-color: var(--ac-color-border); }
	html:not([data-color-scheme="light"]) .ac-chip-filter__trigger                   { background: var(--ac-color-surface); border-color: var(--ac-color-border); color: var(--ac-color-text); }
	html:not([data-color-scheme="light"]) .ac-chip-filter__trigger:hover             { border-color: var(--ac-color-primary); color: var(--ac-color-primary); }
	html:not([data-color-scheme="light"]) .ac-chip-filter__trigger[aria-expanded="true"] { background: var(--ac-color-primary); border-color: var(--ac-color-primary); color: var(--ac-color-white); }
	html:not([data-color-scheme="light"]) .ac-chip-filter__dropdown                  { background: var(--ac-color-surface); border-color: var(--ac-color-border); box-shadow: 0 8px 24px rgba(0,0,0,0.4); }
	html:not([data-color-scheme="light"]) .ac-chip-filter__item a                    { color: var(--ac-color-text); }
	html:not([data-color-scheme="light"]) .ac-chip-filter__item a:hover              { background: rgba(255,255,255,0.06); }
}