/**
 * Programs catalog styles.
 *
 * Visual design ported from the "البرامج" (programs) listing mockup: purple
 * accent, IBM Plex Sans Arabic, rounded cards, custom checkbox / radio controls,
 * a custom sort dropdown and collapsible filter groups. Structural class names
 * (.rwaq-programs, .rwaq-program-card, …) are the plugin's stable contract shared
 * with programs-catalog.php and programs.js — only the styling changed.
 *
 * The catalog targets Arabic (RTL) pages; layout uses flex/grid so it follows
 * the page direction. A few text alignments assume RTL, matching the mockup.
 *
 * The IBM Plex Sans Arabic webfont is enqueued separately (see
 * programs_register_assets() in programs-catalog.php), not @imported here.
 */

/* ==========================================================================
   SHARED COLOR PALETTE
   Single source of truth for every program surface. Both the catalog
   (.rwaq-programs) and the detail page (.rwaq-pd) inherit the full set, so a
   variable defined for one scope resolves in the other and can be used freely
   across both. Both naming conventions (--rwaq-* and --rwaq-pd-*) are kept so
   existing selectors in either section keep working. Variables stay scoped to
   the program roots — nothing leaks onto :root or into the theme.
   ========================================================================== */
.rwaq-programs,
.rwaq-pd {
	/* Catalog palette */
	--rwaq-primary: #565199;
	--rwaq-primary-soft: #EFEEFA;
	--rwaq-text: #242424;
	--rwaq-heading: #242424;
	--rwaq-carrot: #242424;
	--rwaq-muted: #616161;
	--rwaq-placeholder: #9E9E9E;
	--rwaq-icon: #616161;
	--rwaq-border: #D1D1D1;
	--rwaq-divider: #EDEDED;
	--rwaq-featured: #F2B07F;

	/* Detail-page palette */
	--rwaq-pd-gray: #424242;
	--rwaq-pd-purple-dark: #4a3d96;
	--rwaq-pd-orange2: #F2B07F;
}

.rwaq-programs {
	position: relative;
	margin: 0 0 2rem;
	color: var(--rwaq-text);
	font-family: 'IBM Plex Sans Arabic', sans-serif;
	-webkit-font-smoothing: antialiased;
}

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

/* Width-constrained wrapper used by the /programs/ archive template
   (templates/archive-program.php). Matches the site's Elementor content width. */
.rwaq-programs-archive {
	max-width: 1280px;
	margin-inline: auto;
	padding: 25px 15px;
}

/* Overlay shown while a search / sort / filter reloads the whole list. */
.rwaq-programs__overlay {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, 0.7);
	backdrop-filter: blur(1px);
}

.rwaq-programs__overlay[hidden] {
	display: none;
}

.rwaq-programs__overlay .rwaq-programs__spinner {
	position: sticky;
	top: 40%;
	width: 2rem;
	height: 2rem;
}

/* ---- Header: title + total badge ---- */
.rwaq-programs__header {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-bottom: 22px;
}

.rwaq-programs__title {
	margin: 0;
	font-size: 32px;
	line-height: 40px;
	font-weight: 600;
	color: var(--rwaq-heading);
}

.rwaq-programs__total-badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: var(--rwaq-primary-soft);
	color: var(--rwaq-primary);
	border-radius: 999px;
	padding: 6px 14px;
	font-size: 14px;
	line-height: 20px;
	font-weight: 600;
	white-space: nowrap;
}

/* ---- Search bar ----
   The border lives on the <input> itself (so :focus can highlight it); the
   icon is absolutely positioned over the input's start (right in RTL). */
.rwaq-programs__searchbar {
	position: relative;
	margin-bottom: 34px;
}

.rwaq-programs__search-icon {
	position: absolute;
	inset-inline-start: 20px;
	top: 50%;
	transform: translateY(-50%);
	display: inline-flex;
	color: var(--rwaq-icon);
	pointer-events: none;
}

/* Compound selector + input element keep these winning over theme / Elementor
   input styles. */
.rwaq-programs input.rwaq-programs__search-input {
	width: 100%;
	height: 56px;
	border: 1px solid var(--rwaq-border);
	border-radius: 14px;
	outline: none;
	box-shadow: none;
	background: #fff;
	font-family: inherit;
	font-size: 16px;
	font-weight: 400;
	color: var(--rwaq-text);
	/* Leave room for the absolutely-positioned icon on the start side. */
	padding-inline-start: 52px;
	padding-inline-end: 20px;
	transition: border-color 0.15s, box-shadow 0.15s;
}

.rwaq-programs input.rwaq-programs__search-input:focus {
	border-color: var(--rwaq-primary);
}

.rwaq-programs__search-input::placeholder {
	color: var(--rwaq-placeholder);
}

/* Hide the browser's native type="search" clear (×) button and decoration. */
.rwaq-programs__search-input::-webkit-search-cancel-button,
.rwaq-programs__search-input::-webkit-search-decoration {
	-webkit-appearance: none;
	appearance: none;
}

/* ---- Layout: filter sidebar + results ---- */
.rwaq-programs__layout {
	display: flex;
	gap: 24px;
	align-items: flex-start;
}

.rwaq-programs__sidebar {
	flex: 0 0 280px;
	width: 280px;
	border: 1px solid var(--rwaq-border);
	border-radius: 18px;
	padding: 22px 22px 26px;
}

.rwaq-programs__main {
	flex: 1 1 auto;
	min-width: 0;
}

/* Sidebar head */
.rwaq-programs__sidebar-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 24px;
}

.rwaq-programs__sidebar-title {
	display: flex;
	align-items: center;
	gap: 9px;
	font-size: 16px;
	line-height: 22px;
	font-weight: 600;
	color: var(--rwaq-text);
}

.rwaq-programs__clear {
	background: none;
	border: none;
	font-family: inherit;
	color: var(--rwaq-primary);
	font-size: 14px;
	line-height: 20px;
	font-weight: 600;
	cursor: pointer;
	padding: 0;
}

/* Keep transparent on hover / focus (override theme / Elementor button styles). */
.rwaq-programs .rwaq-programs__clear:hover,
.rwaq-programs .rwaq-programs__clear:focus {
	background: none;
	color: var(--rwaq-primary);
}

/* Filter groups */
.rwaq-programs__filter-group {
	margin-top: 17px;
	padding-top: 17px;
	border-top: 1px solid var(--rwaq-divider);
}

.rwaq-programs__filter-title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: 0;
	font-size: 14px;
	font-weight: 600;
	line-height: 20px;
	color: var(--rwaq-text);
	cursor: pointer;
	user-select: none;
}

.rwaq-programs__filter-chevron {
	display: inline-flex;
	color: var(--rwaq-carrot);
	transition: transform 0.18s ease;
}

/* Collapsed state: hide options + the "show more" toggle, flip the chevron. */
.rwaq-programs__filter-group.is-collapsed .rwaq-programs__filter-options,
.rwaq-programs__filter-group.is-collapsed .rwaq-programs__show-more {
	display: none;
}

.rwaq-programs__filter-group.is-collapsed .rwaq-programs__filter-chevron {
	transform: rotate(180deg);
}

.rwaq-programs__filter-options {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin-top: 14px;
}

.rwaq-programs__filter-option {
	display: flex;
	align-items: center;
	gap: 11px;
	font-size: 14px;
	font-weight: 400;
	line-height: 22px;
	color: var(--rwaq-text);
	cursor: pointer;
}

/* Honor the `hidden` attribute on overflow options — the class's display:flex
   otherwise overrides the browser's built-in [hidden] { display: none } rule. */
.rwaq-programs__filter-option[hidden] {
	display: none;
}

/* Visually hide the native control while keeping it accessible / focusable. */
.rwaq-programs__filter-input {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

/* Custom checkbox / radio box */
.rwaq-programs__filter-box {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	border: 1.5px solid var(--rwaq-border);
	border-radius: 6px;
	background: #fff;
	transition: background 0.12s, border-color 0.12s;
}

.rwaq-programs__filter-box svg {
	opacity: 0;
}

.rwaq-programs__filter-input:checked+.rwaq-programs__filter-box {
	background: var(--rwaq-primary);
	border-color: var(--rwaq-primary);
}

.rwaq-programs__filter-input:checked+.rwaq-programs__filter-box svg {
	opacity: 1;
}

/* Focus ring on the custom box when the hidden input is focused via keyboard. */
.rwaq-programs__filter-input:focus-visible+.rwaq-programs__filter-box {
	box-shadow: 0 0 0 3px rgba(108, 93, 211, 0.25);
}

/* Radio variant */
.rwaq-programs__filter-box--radio {
	border-radius: 50%;
}

.rwaq-programs__filter-box--radio::after {
	content: "";
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--rwaq-primary);
	opacity: 0;
	transition: opacity 0.12s;
}

.rwaq-programs__filter-input:checked+.rwaq-programs__filter-box--radio {
	background: #fff;
	border-color: var(--rwaq-primary);
}

.rwaq-programs__filter-input:checked+.rwaq-programs__filter-box--radio::after {
	opacity: 1;
}

.rwaq-programs__filter-label {
	flex: 1 1 auto;
}

.rwaq-programs__filter-count {
	flex: 0 0 auto;
	color: var(--rwaq-muted);
	font-size: 12px;
	line-height: 16px;
	font-weight: 400;
	font-variant-numeric: tabular-nums;
}

.rwaq-programs__show-more {
	margin-top: 14px;
	background: none;
	border: none;
	font-family: inherit;
	color: var(--rwaq-primary);
	font-size: 14px;
	font-weight: 600;
	line-height: 20px;
	cursor: pointer;
	padding: 0;
}

/* Keep transparent on hover / focus (override theme / Elementor button styles). */
.rwaq-programs .rwaq-programs__show-more:hover,
.rwaq-programs .rwaq-programs__show-more:focus {
	background: none;
	color: var(--rwaq-primary);
}

/* ---- Active filter chips ---- */
.rwaq-programs__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 4px;
	min-height: 32px;
}

.rwaq-programs__chips:empty {
	display: none;
}

.rwaq-programs__chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 32px;
	padding: 0 12px;
	background: #fff;
	border: 1px solid var(--rwaq-border);
	border-radius: 8px;
	font-family: inherit;
	font-size: 12px;
	font-weight: 600;
	line-height: 20px;
	color: var(--rwaq-muted);
	cursor: pointer;
}

/* Keep the same background on hover (override theme / Elementor button hover). */
.rwaq-programs .rwaq-programs__chip:hover,
.rwaq-programs .rwaq-programs__chip:focus {
	background: #fff;
	color: var(--rwaq-muted);
	border-color: var(--rwaq-border);
}

.rwaq-programs__chip-x {
	display: inline-flex;
	color: #6b7280;
	line-height: 1;
}

/* ---- Controls: result count + sort ---- */
.rwaq-programs__controls {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin: 20px 0 24px;
	flex-wrap: wrap;
}

.rwaq-programs__result-count {
	font-size: 14px;
	font-weight: 600;
	line-height: 20px;
	color: var(--rwaq-text);
}

/* ---- Sort control (custom dropdown backed by a hidden native <select>) ---- */
.rwaq-programs__sort {
	position: relative;
}

.rwaq-programs__sort-select {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

.rwaq-programs__sort-trigger {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	border: 1px solid var(--rwaq-border);
	border-radius: 12px;
	padding: 10px 16px;
	background: #fff;
	font-family: inherit;
	font-size: 14px;
	cursor: pointer;
}

/* Keep the same background on hover (override theme / Elementor button hover). */
.rwaq-programs .rwaq-programs__sort-trigger:hover,
.rwaq-programs .rwaq-programs__sort-trigger:focus {
	background: #fff;
	color: inherit;
}

.rwaq-programs__sort-caption {
	color: var(--rwaq-muted);
	font-weight: 400;
}

.rwaq-programs__sort-value {
	min-width: 92px;
	font-weight: 600;
	color: var(--rwaq-text);
	text-align: right;
}

.rwaq-programs__sort-chevron {
	display: inline-flex;
	color: #242424;
	transition: transform 0.15s;
}

.rwaq-programs__sort.is-open .rwaq-programs__sort-chevron {
	transform: rotate(180deg);
}

.rwaq-programs__sort-menu {
	position: absolute;
	top: calc(100% + 8px);
	inset-inline-start: 0;
	width: 240px;
	max-width: 80vw;
	background: #fff;
	border: 1px solid #e5e5e5;
	border-radius: 12px;
	box-shadow: 0 12px 28px rgba(16, 24, 40, 0.14);
	padding: 8px;
	z-index: 20;
	display: none;
}

.rwaq-programs__sort.is-open .rwaq-programs__sort-menu {
	display: block;
}

.rwaq-programs__sort-option {
	padding: 10px 14px;
	border-radius: 8px;
	font-size: 15px;
	color: var(--rwaq-text);
	text-align: right;
	cursor: pointer;
}

.rwaq-programs__sort-option:hover {
	background: #f4f4f6;
}

.rwaq-programs__sort-option.is-selected {
	font-weight: 700;
	background: #f4f4f6;
}

/* ---- Cards grid (flexbox: N per row, wrapping) ---- */
.rwaq-programs__grid {
	--rwaq-programs-gap: 15px;
	display: flex;
	flex-wrap: wrap;
	gap: var(--rwaq-programs-gap);
}

/* ---- Card ---- */
.rwaq-program-card {
	/* N columns per row (from the shortcode's `columns` attribute, default 3),
	   accounting for the gaps between them. */
	flex: 0 0 calc((100% - (var(--rwaq-programs-columns, 3) - 1) * var(--rwaq-programs-gap, 15px)) / var(--rwaq-programs-columns, 3));
	min-width: 0;
	display: flex;
	flex-direction: column;
	border: 1px solid var(--rwaq-border);
	border-radius: 18px;
	padding: 16px;
	background: #fff;
	box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
	transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.rwaq-program-card:hover {
	box-shadow: 0 8px 22px rgba(16, 24, 40, 0.1);
	transform: translateY(-2px);
}

.rwaq-program-card__media {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 145px;
	border-radius: 12px;
	overflow: hidden;
	color: #b6bccb;
}

.rwaq-program-card__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.rwaq-program-card__placeholder {
	display: inline-flex;
}

.rwaq-program-card__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 0;
}

/* Organization row */
.rwaq-program-card__org {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 16px;
}

.rwaq-program-card__logo {
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
}

.rwaq-program-card__org-logo {
	height: 22px;
	width: auto;
	max-width: 90px;
	object-fit: contain;
}

.rwaq-program-card__org-name {
	font-size: 14px;
	font-weight: 600;
	color: #5b6472;
}

.rwaq-program-card__title {
	margin: 12px 0 0;
	font-size: 16px;
	font-weight: 600;
	line-height: 22px;
	color: var(--rwaq-heading);
}

.rwaq-program-card__title a {
	color: inherit;
	text-decoration: none;
}

.rwaq-program-card__title a:hover {
	color: var(--rwaq-primary);
}

/* Meta list */
.rwaq-program-card__meta {
	list-style: none;
	margin: 16px 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 11px;
}

.rwaq-program-card__meta:empty {
	display: none;
}

.rwaq-program-card__meta-item {
	display: flex;
	align-items: center;
	gap: 9px;
	font-size: 12px;
	font-weight: 400;
	line-height: 16px;
	color: var(--rwaq-muted);
}

.rwaq-program-card__meta-item .rwaq-icon {
	flex: 0 0 auto;
	color: var(--rwaq-placeholder);
}

/* Footer badges */
.rwaq-program-card__badges {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 18px;
}

.rwaq-program-card__type {
	border: 1px solid var(--rwaq-border);
	border-radius: 9px;
	padding: 7px 16px;
	font-size: 12px;
	font-weight: 600;
	line-height: 20px;
	color: var(--rwaq-text);
	background: #fff;
}

.rwaq-program-card__featured {
	border: none;
	border-radius: 9px;
	padding: 7px 16px;
	font-size: 12px;
	font-weight: 600;
	line-height: 20px;
	color: var(--rwaq-text);
	background: var(--rwaq-featured);
}

/* ---- AJAX loader (append spinner on scroll) ---- */
.rwaq-programs__loader {
	display: flex;
	justify-content: center;
	padding: 1.5rem 0;
}

.rwaq-programs__loader[hidden] {
	display: none;
}

.rwaq-programs__spinner {
	width: 2rem;
	height: 2rem;
	fill: var(--rwaq-primary);
	animation: rwaq-programs-spin 0.9s linear infinite;
}

@keyframes rwaq-programs-spin {
	to {
		transform: rotate(360deg);
	}
}

@media (prefers-reduced-motion: reduce) {
	.rwaq-programs__spinner {
		animation-duration: 2.4s;
	}
}

/* Sentinel is a zero-height scroll trigger; keep it out of the layout. */
.rwaq-programs__sentinel {
	height: 1px;
}

/* Status message (no results) */
.rwaq-programs__status {
	text-align: center;
	color: #52525b;
	font-size: 0.95rem;
	margin-top: 1rem;
}

.rwaq-programs__status:empty {
	display: none;
}

/* States */
.rwaq-programs--empty,
.rwaq-programs--error {
	padding: 1.5rem;
	border: 1px dashed #d4d4d8;
	border-radius: 8px;
	text-align: center;
	color: #52525b;
}

.rwaq-programs--error {
	border-color: #fca5a5;
	color: #b91c1c;
}

/* ============================================================
   Responsive
   ============================================================ */

/* Tablet: stack the filters panel above the results. */
@media (max-width: 900px) {
	.rwaq-programs__layout {
		flex-direction: column;
		gap: 24px;
	}

	.rwaq-programs__sidebar {
		flex: 0 0 auto;
		width: 100%;
	}
}

/* Small screens: one card per row (full width). */
@media (max-width: 767px) {
	.rwaq-program-card {
		flex: 0 0 100%;
	}
}

/* Landscape phone / small tablet. */
@media (max-width: 680px) {
	.rwaq-programs__header {
		flex-wrap: wrap;
		gap: 12px;
	}

	.rwaq-programs__title {
		font-size: 26px;
	}

	.rwaq-programs__controls {
		flex-direction: column;
		align-items: stretch;
		gap: 14px;
	}

	.rwaq-programs__sort {
		width: 100%;
	}

	.rwaq-programs__sort-trigger {
		width: 100%;
		justify-content: flex-start;
	}

	.rwaq-programs__sort-value {
		min-width: 0;
		flex: 1;
	}

	.rwaq-programs__sort-menu {
		width: 100%;
		max-width: none;
	}
}

/* Phone. */
@media (max-width: 460px) {
	.rwaq-programs__search-icon {
		inset-inline-start: 14px;
	}

	.rwaq-programs input.rwaq-programs__search-input {
		padding-inline-start: 44px;
		padding-inline-end: 14px;
	}

	.rwaq-programs__sidebar {
		padding: 18px 16px 22px;
	}

	.rwaq-program-card__title {
		font-size: 17px;
	}
}

/* ==========================================================================
   PROGRAM DETAIL — BEGIN
   Styles for the single-program view ([rwaq_program_detail], see
   includes/programs/programs-detail.php). Enqueued by the shortcode. Adapted
   from the program-page design; every selector is prefixed .rwaq-pd* and the
   custom properties are scoped to the program roots (see SHARED COLOR PALETTE
   near the top), so nothing (variables, resets, generic class names) leaks into
   the theme. Colors are shared with the catalog — this scope only adds layout
   vars (--rwaq-pd-pad / --rwaq-pd-max). RTL layout — the shortcode sets
   dir="rtl" on the root, so the flex rows mirror automatically.
   ========================================================================== */

.rwaq-pd {
	/* Colors live in the shared palette above; only layout vars are scoped here. */
	--rwaq-pd-pad: 40px;
	--rwaq-pd-max: 1232px;

	margin: 0 0 2rem;
	color: var(--rwaq-text);
	font-family: 'IBM Plex Sans Arabic', sans-serif;
	-webkit-font-smoothing: antialiased;
	line-height: 1.6;
}

.rwaq-pd *,
.rwaq-pd *::before,
.rwaq-pd *::after {
	box-sizing: border-box;
}

.rwaq-pd a {
	color: var(--rwaq-primary);
	text-decoration: none;
}

.rwaq-pd a:hover {
	color: var(--rwaq-pd-purple-dark);
}

.rwaq-pd img {
	display: block;
	max-width: 100%;
}

/* Safety net: embeds (esp. iframes) never exceed their container. Without this
   a YouTube iframe in the WYSIWYG overview keeps its width="560" attribute and
   forces a horizontal scrollbar on phones. */
.rwaq-pd iframe,
.rwaq-pd video,
.rwaq-pd embed,
.rwaq-pd object {
	max-width: 100%;
}

/* Embedded videos inside the overview prose: full-width, responsive 16:9. */
.rwaq-pd__prose iframe,
.rwaq-pd__prose video {
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	border: 0;
	border-radius: 12px;
}

/* Breadcrumb bar — full-width white background, content in the 1232 container */
.rwaq-pd__breadcrumb-bar {
	background: #fff;
	color: #616161;
	font-size: 12px;
	line-height: 16px;
	padding: 12px 0;
}

.rwaq-pd__breadcrumb {
	max-width: var(--rwaq-pd-max);
	margin: 0 auto;
	padding: 0;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	color: #616161;
}

.rwaq-pd__breadcrumb a {
	color: #565199;
}

.rwaq-pd__breadcrumb a:hover {
	color: #454084;
}

.rwaq-pd__sep {
	color: #9a9aa0;
	font-size: 11px;
}

.rwaq-pd__current {
	color: #616161;
}

/* Header bar + tabs — full-width dark background + sticky, content centered */
.rwaq-pd__header-bar {
	background: #292929;
	color: #fff;
	border-top: 1px solid #292929;
	position: sticky;
	top: 0;
	z-index: 6;
}

.rwaq-pd__header-inner {
	max-width: var(--rwaq-pd-max);
	margin: 0 auto;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
}

.rwaq-pd__header-title {
	margin: 0;
	padding: 18px 0;
	font-size: 16px;
	font-weight: 600;
	line-height: 22px;
	/* Truncate the title to keep the sticky bar single-line. */
	max-width: 280px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.rwaq-pd__tabs {
	display: flex;
	gap: 34px;
}

/* Scoped under .rwaq-pd__tabs so the color beats the generic `.rwaq-pd a`
   rule (the tabs are links). */
.rwaq-pd__tabs .rwaq-pd__tab {
	position: relative;
	padding: 24px 10px;
	font-size: 14px;
	line-height: 20px;
	color: #fff;
}

.rwaq-pd__tabs .rwaq-pd__tab:hover {
	color: #fff;
}

.rwaq-pd__tabs .rwaq-pd__tab--active {
	font-weight: 600;
}

.rwaq-pd__tab--active::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 3px;
	background: #fff;
	border-radius: 3px 3px 0 0;
}

/* Layout: content + sticky sidebar — centered in the 1232 container */
.rwaq-pd__layout {
	max-width: var(--rwaq-pd-max);
	margin: 0 auto;
	display: flex;
	gap: 64px;
	align-items: flex-start;
	padding: 0;
}

.rwaq-pd__content {
	flex: 1;
	min-width: 0;
	margin-top: 48px;
}

.rwaq-pd__sidebar {
	width: 372px;
	flex-shrink: 0;
	position: sticky;
	/* Clear the sticky header bar (~68px) plus a small gap, so the card doesn't
	   tuck under it when stuck. */
	top: 88px;
	margin-top: 48px;
}

/* Hero — inline promo video (YouTube iframe) or fallback card image */
.rwaq-pd__hero {
	position: relative;
	aspect-ratio: 720 / 320;
	border-radius: 16px;
	overflow: hidden;
	margin-bottom: 32px;
	background: linear-gradient(135deg, #4a4a5c 0%, #2e2e3c 60%, #3a3648 100%);
}

.rwaq-pd__hero-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.rwaq-pd__hero-video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* Badges */
.rwaq-pd__badges {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 20px;
}

.rwaq-pd__badge-featured {
	background-color: var(--rwaq-pd-orange2);
	color: var(--rwaq-text);
	font-size: 12px;
	font-weight: 600;
	padding: 6px 14px;
	border-radius: 8px;
	border: 1 px solid var(--rwaq-pd-orange2);
}

.rwaq-pd__badge-level {
	background: #F1F0F8;
	color: var(--rwaq-primary);
	font-size: 12px;
	font-weight: 500;
	padding: 6px 16px;
	border-radius: 8px;
	border: 1 px solid #F1F0F8;
}

.rwaq-pd__title {
	margin: 0 0 20px;
	font-size: 32px;
	color: var(--rwaq-text);
	font-weight: 600;
	line-height: 40px;
}

.rwaq-pd__lead {
	margin: 0 0 30px;
	font-size: 14px;
	font-weight: 400;
	line-height: 28px;
	color: var(--rwaq-pd-gray);
	max-width: 720px;
}

/* Provider (organization) */
.rwaq-pd__provider {
	display: flex;
	align-items: center;
	gap: 22px;
	margin-bottom: 8px;
}

.rwaq-pd__provider-logo {
	border: 1px solid var(--rwaq-border);
	border-radius: 10px;
	padding: 12px 20px;
	display: flex;
	align-items: center;
}

.rwaq-pd__provider-logo img {
	max-height: 34px;
	width: auto;
}

.rwaq-pd__provider-small {
	font-size: 10px;
	font-weight: 400;
	color: var(--rwaq-pd-gray);
}

.rwaq-pd__provider-name {
	font-size: 14px;
	color: #565199;
	font-weight: 400;
}

/* Sections */
.rwaq-pd__section {
	margin-top: 48px;
}

.rwaq-pd__section-title {
	margin: 0 0 20px;
	font-size: 28px;
	line-height: 36px;
	font-weight: 600;
	color: #000
}

.rwaq-pd__prose {
	font-size: 14px;
	line-height: 28px;
	color: var(--rwaq-pd-gray);
	max-width: 830px;
}

.rwaq-pd__prose p {
	margin: 0 0 16px;
}

.rwaq-pd__prose p:last-child {
	margin-bottom: 0;
}

/* Course timeline */
.rwaq-pd__timeline {
	display: flex;
	flex-direction: column;
	max-width: 1000px;
}

.rwaq-pd__tl-row {
	display: flex;
	align-items: stretch;
	gap: 24px;
}

.rwaq-pd__tl-node {
	display: flex;
	flex-direction: column;
	align-items: center;
	flex-shrink: 0;
	width: 46px;
}

.rwaq-pd__tl-circle {
	width: 46px;
	height: 46px;
	border-radius: 50%;
	border: 1px solid var(--rwaq-border);
	background: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
	line-height: 20px;
	font-weight: 600;
	flex-shrink: 0;
}

.rwaq-pd__tl-line {
	flex: 1;
	width: 0;
	border-right: 1px solid var(--rwaq-border);
	margin: 4px 0;
}

/* Last course has no trailing connector. */
.rwaq-pd__tl-row:last-child .rwaq-pd__tl-line {
	display: none;
}

.rwaq-pd__tl-card {
	flex: 1;
	border: 1px solid var(--rwaq-border);
	border-radius: 12px;
	padding: 20px 24px;
	margin-bottom: 18px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

.rwaq-pd__tl-title {
	font-size: 14px;
	font-weight: 600;
	line-height: 20px;
	color: #000;
}

.rwaq-pd__tl-sub {
	margin-top: 4px;
	font-size: 12px;
	line-height: 16px;
	font-weight: 400;
	color: #616161;
}

.rwaq-pd__detail-btn {
	border: 1px solid var(--rwaq-border);
	background: #fff;
	border-radius: 6px;
	padding: 10px 18px;
	font-size: 14px;
	line-height: 20px;
	font-weight: 600;
	color: var(--rwaq-text) !important;
	white-space: nowrap;
	transition: border-color 0.15s, background 0.15s;
}

/* Keep flat on hover/focus and beat WordPress theme button overrides. */
.rwaq-pd__detail-btn:hover,
.rwaq-pd__detail-btn:focus,
.rwaq-pd__detail-btn:focus-visible,
.rwaq-pd__detail-btn:active {
	border-color: var(--rwaq-border) !important;
	background: #fff !important;
	color: var(--rwaq-text) !important;
	outline: none;
	box-shadow: none;
	-webkit-box-shadow: none;
}

/* Certificate banner (timeline tail) */
.rwaq-pd__tl-circle--cert {
	color: var(--rwaq-pd-gray);
}

.rwaq-pd__tl-circle--cert svg {
	width: 22px;
	height: 22px;
	display: block;
}

.rwaq-pd__cert-banner {
	flex: 1;
	margin-bottom: 18px;
	background: #292929;
	color: #fff;
	border-radius: 10px;
	padding: 26px 32px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 30px;
	flex-wrap: wrap;
	border: 1px solid var(--rwaq-border)
}

.rwaq-pd__cert-text {
	flex: 1;
	min-width: 200px;
}

.rwaq-pd__cert-title {
	font-size: 14px;
	font-weight: 600;
	line-height: 20px;
}

.rwaq-pd__cert-desc {
	margin-top: 6px;
	font-size: 12px;
	line-height: 16px;
	color: #fff;
}

.rwaq-pd__cert-logo {
	flex-shrink: 0;
	background: #fff;
	border-radius: 8px;
	border: 1px solid var(--rwaq-border);
	padding: 14px 22px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.rwaq-pd__cert-logo img {
	max-height: 40px;
	width: auto;
}

.rwaq-pd__cert-logo-text {
	color: #706D6E;
	font-size: 18px;
	font-weight: 700;
}

/* Sidebar card */
.rwaq-pd__side-card {
	border: 1px solid var(--rwaq-border);
	border-radius: 14px;
	overflow: hidden;
	background: #fff;
	box-shadow: 0 2px 10px rgba(20, 20, 40, 0.04);
}

.rwaq-pd__video-thumb {
	position: relative;
	aspect-ratio: 372 / 240;
	background: linear-gradient(135deg, #4a4a5c 0%, #2e2e3c 60%, #3a3648 100%);
}

.rwaq-pd__video-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.rwaq-pd__side-body {
	padding: 22px;
}

.rwaq-pd__enroll {
	display: block;
	width: 100%;
	background: var(--rwaq-primary);
	color: #fff;
	border: none;
	-webkit-appearance: none;
	appearance: none;
	-webkit-tap-highlight-color: transparent;
	border-radius: 8px;
	padding: 15px;
	font-family: inherit;
	font-size: 16px;
	line-height: 22px;
	font-weight: 600;
	text-align: center;
	cursor: pointer;
	transition: background 0.15s;
	/* Divider below the button: 24px above the border, 24px below (see
	   .rwaq-pd__info-list padding-top). */
	margin-bottom: 24px;
}

/* Enroll button also renders as an <a> (logged-out / login and go-to variants). */
.rwaq-pd__enroll--login,
.rwaq-pd__enroll--goto {
	text-decoration: none;
}

/* Both <a> variants sit on the purple button fill, so force white text to beat
   the generic `.rwaq-pd a { color: var(--rwaq-primary) }` link rule. */
.rwaq-pd__side-body a.rwaq-pd__enroll.rwaq-pd__enroll--goto,
.rwaq-pd__side-body a.rwaq-pd__enroll.rwaq-pd__enroll--login {
	color: #fff;
}

/* "Go to program" is the primary action once enrolled; it sits directly above
   the (secondary) unenroll button, so tighten the gap between the two. */
.rwaq-pd__enroll--goto {
	margin-bottom: 12px;
}

/* Enrolled state: the unenroll action reads as a secondary/destructive button. */
.rwaq-pd__enroll--unenroll {
	background: #fff;
	color: var(--rwaq-primary);
	border: 1px solid var(--rwaq-primary);
}

/* Keep the button flat on hover/focus: match the normal-state colors and beat
   any WordPress theme button hover overrides with !important. */
.rwaq-pd__enroll:hover,
.rwaq-pd__enroll:focus,
.rwaq-pd__enroll:focus-visible,
.rwaq-pd__enroll:active {
	background: var(--rwaq-primary) !important;
	color: #fff !important;
	outline: none;
	box-shadow: none;
	-webkit-box-shadow: none;
}

.rwaq-pd__enroll--unenroll:hover,
.rwaq-pd__enroll--unenroll:focus,
.rwaq-pd__enroll--unenroll:focus-visible,
.rwaq-pd__enroll--unenroll:active {
	background: #fff !important;
	color: var(--rwaq-primary) !important;
	border-color: var(--rwaq-primary) !important;
}

.rwaq-pd__enroll:disabled {
	opacity: 0.65;
	cursor: default;
}

/* Feedback line under the button (success / error), announced via aria-live. */
.rwaq-pd__enroll-message {
	margin-top: -12px;
	margin-bottom: 20px;
	font-size: 13px;
	line-height: 1.5;
	color: #444;
	min-height: 0;
}

.rwaq-pd__enroll-message:empty {
	display: none;
}

.rwaq-pd__info-list {
	list-style: none;
	margin: 0;
	padding: 24px 0 0;
	border-top: 1px solid var(--rwaq-border);
}

.rwaq-pd__info-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	padding: 9px 0;
	font-size: 14px;
}

.rwaq-pd_inner-info-container {
	display: flex;
	gap: 16px;
}

.rwaq-pd__info-ico {
	width: 20px;
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #616161;
}

.rwaq-pd__info-ico svg {
	width: 20px;
	height: 20px;
	display: block;
}

.rwaq-pd__info-label {
	color: #616161;
	font-size: 14px;
	line-height: 22px;
	font-weight: 400;
	width: 88px;
	flex-shrink: 0;
}

.rwaq-pd__info-value {
	color: var(--rwaq-text);
	font-size: 14px;
	line-height: 22px;
	font-weight: 400;
}

.single-program .rwaq-program-single {
	max-width: 100%;
}

.site-main.rwaq-program-single {
	max-width: 100% !important;
}

/* Responsive */
/* On large screens the containers run flush to the 1232px max-width (no gutter).
   Once the viewport dips below that, add side padding so content doesn't touch
   the screen edges. --rwaq-pd-pad shrinks further at the breakpoints below. */
@media (max-width: 1232px) {
	.rwaq-pd__breadcrumb,
	.rwaq-pd__header-inner,
	.rwaq-pd__layout {
		padding-inline: var(--rwaq-pd-pad);
	}
}

@media (max-width: 1100px) {
	.rwaq-pd {
		--rwaq-pd-pad: 20px;
	}

	.rwaq-pd__layout {
		flex-direction: column-reverse;
		gap: 32px;
		/* Stop the stacked content from touching the screen edges on tablets —
		   the base rule zeroes this out for the desktop centered container. */
		padding-inline: var(--rwaq-pd-pad);
	}

	.rwaq-pd__sidebar {
		width: 100%;
		position: static;
	}

	/* Once stacked, a full-width enroll card blows the video thumbnail up to
	   tablet-width. Cap and center it so it reads as a card, not a banner. */
	.rwaq-pd__side-card {
		max-width: 460px;
		margin-inline: auto;
	}

	.rwaq-pd__title {
		font-size: 30px;
	}

	.rwaq-pd__tabs {
		gap: 24px;
	}
}



/* Phones — tighten padding, scale down the display headings and hero. */
@media (max-width: 600px) {
	.rwaq-pd {
		--rwaq-pd-pad: 16px;
	}

	.rwaq-pd__title {
		font-size: 26px;
		line-height: 34px;
	}

	.rwaq-pd__section {
		margin-top: 36px;
	}

	.rwaq-pd__section-title {
		font-size: 22px;
		line-height: 30px;
	}

	.rwaq-pd__hero {
		border-radius: 12px;
		margin-bottom: 24px;
	}

	/* Shrink the sticky bar so it doesn't eat vertical space on small screens. */
	.rwaq-pd__header-title {
		padding: 14px 0;
		max-width: 160px;
	}

	.rwaq-pd__tabs .rwaq-pd__tab {
		padding: 16px 8px;
	}
}

@media (max-width: 460px) {
	.rwaq-program-single {
		padding: 0px !important;
	}
	.rwaq-pd__layout{
		padding: 0px 15px;
	}

}

/* Error state (shared by the shortcode's WP_Error fallbacks) */
.rwaq-program-detail--error {
	padding: 1.5rem;
	border: 1px dashed #fca5a5;
	border-radius: 8px;
	text-align: center;
	color: #b91c1c;
}

/* ==========================================================================
   PROGRAM DETAIL — END
   ========================================================================== */