/**
 * Course Sahi Components: component styles (single stylesheet, see ADR-011).
 *
 * Element selectors are written as `.csh-{block} .csh-{element}` (specificity
 * 0,2,0). That beats theme and Elementor Kit rules such as
 * `.elementor-kit-N h2` or `.elementor-kit-N button` (0,1,1) without !important.
 */

/*
 * Tokens: brand palette from the client's logo (2026-10-08): Deep Navy #1B2A4A,
 * Accent Orange #F38A1D, Charcoal #4A4A4A, White. Shades/tints derived from them.
 * Orange CTA uses white text by client decision (2026-10-08): 2.48:1, below WCAG AA (see DECISIONS).
 * Never use orange for text or thin lines on white (2.48:1); use --csh-color-accent-text for orange-toned text.
 */
:root {
	--csh-color-primary: #1b2a4a; /* Deep Navy */
	--csh-color-primary-dark: #121d35; /* Navy hover */
	--csh-color-primary-soft: #e8ecf4; /* Navy tint */
	--csh-color-on-primary: #fff;
	--csh-color-accent: #f38a1d; /* Accent Orange (CTA background) */
	--csh-color-accent-dark: #e07812; /* Orange hover */
	--csh-color-on-accent: #fff; /* Text on orange (client decision) */
	--csh-color-accent-soft: #fef1e4; /* Orange tint (university card strip) */
	--csh-color-accent-text: #a8500c; /* Darker orange for text/icons: 4.95:1 on accent-soft, 5.5:1 on white */
	--csh-color-eyebrow-text: #f38a1e; /* Section eyebrow labels, client decision (2026-10-14): 2.21:1, below AA */
	--csh-color-eyebrow-bg: #f38a1e21; /* Orange at 13% opacity */
	--csh-color-heading: #1b2a4a;
	--csh-color-text: #4a4a4a; /* Charcoal */
	--csh-color-surface: #fff;
	--csh-color-surface-muted: #f4f6fa; /* Light grey card background */
	--csh-color-border: #e2e6ee;
	--csh-color-border-strong: #c5cddc;
	--csh-color-overlay: #071a35; /* Dark navy photo overlay (blog banner), client decision 2026-10-15 */
	--csh-color-on-overlay-muted: #dbe2ec; /* Soft white text on the overlay */
	--csh-radius: 1rem;
	--csh-radius-control: 0.625rem;
	--csh-shadow: 0 1px 2px rgba(27, 42, 74, 0.04), 0 4px 14px rgba(27, 42, 74, 0.04);
	--csh-shadow-hover: 0 14px 30px rgba(27, 42, 74, 0.12);
	--csh-transition: 160ms ease;

	/* Layout: one content width for the header and every section. */
	--csh-container-max: 80rem; /* 1280px: maximum content width, not a fixed width. */
	--csh-container-gutter: 2rem; /* 32px from 48rem (768px). */
	--csh-container-gutter-mobile: 1.25rem; /* 20px below 48rem. */
	--csh-section-space: 2.75rem; /* Baseline vertical section padding: 44px mobile, 56px tablet, 68px desktop. */
}

@media (min-width: 48rem) {
	:root {
		--csh-section-space: 3.5rem;
	}
}

@media (min-width: 64rem) {
	:root {
		--csh-section-space: 4.25rem;
	}
}

/* ==========================================================================
   Layout
   .csh-container: shared content boundary. Centered, fluid below the max
   width; margin-inline: auto produces the outer space naturally.
   .csh-section: baseline vertical spacing for a full-width section band
   (its background can span the viewport; its content uses .csh-container).
   ========================================================================== */

.csh-container {
	width: min(100% - 2 * var(--csh-container-gutter-mobile), var(--csh-container-max));
	margin-inline: auto;
}

@media (min-width: 48rem) {
	.csh-container {
		width: min(100% - 2 * var(--csh-container-gutter), var(--csh-container-max));
	}
}

.csh-section {
	padding-block: var(--csh-section-space);
}

/*
 * Plugin icons are stroke (outline) icons: their fill="none" attribute loses to
 * any CSS such as Elementor's `.elementor-element svg { fill: currentColor; width: 1em }`
 * (0,1,1). `svg[aria-hidden]` under a block is 0,2,1, so these rules win.
 */
.csh-blog svg[aria-hidden],
.csh-blog svg[aria-hidden] *,
.csh-courses svg[aria-hidden],
.csh-courses svg[aria-hidden] *,
.csh-faq svg[aria-hidden],
.csh-faq svg[aria-hidden] *,
.csh-header svg[aria-hidden],
.csh-header svg[aria-hidden] *,
.csh-post svg[aria-hidden],
.csh-post svg[aria-hidden] *,
.csh-testimonials svg[aria-hidden],
.csh-testimonials svg[aria-hidden] *,
.csh-universities svg[aria-hidden],
.csh-universities svg[aria-hidden] * {
	fill: none;
	stroke: currentColor;
}

.csh-blog svg[aria-hidden],
.csh-courses svg[aria-hidden],
.csh-faq svg[aria-hidden],
.csh-header svg[aria-hidden],
.csh-post svg[aria-hidden],
.csh-testimonials svg[aria-hidden],
.csh-universities svg[aria-hidden] {
	flex-shrink: 0;
}

/* Utility */
.csh-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ==========================================================================
   Courses: [csh_courses]
   ========================================================================== */

/* The section is the full-width band; .csh-courses__inner (= .csh-container) holds the content. */
.csh-courses {
	box-sizing: border-box;
	width: 100%;
	color: var(--csh-color-text);
}

/* Container queries measure the content width, not the full band. */
.csh-courses .csh-courses__inner {
	container-type: inline-size;
}

.csh-courses *,
.csh-courses *::before,
.csh-courses *::after {
	box-sizing: inherit;
}

/* Header: intro first, filters below; side by side from 48rem (see below). */
.csh-courses .csh-courses__header {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 1.25rem;
	margin: 0 0 1.5rem;
}

.csh-courses .csh-courses__intro {
	min-width: 0;
}

.csh-courses .csh-courses__eyebrow {
	display: inline-block;
	margin: 0 0 0.75rem;
	padding: 0.3125rem 0.75rem;
	color: var(--csh-color-eyebrow-text);
	background: var(--csh-color-eyebrow-bg);
	border-radius: 999px;
	font-size: 0.8125rem;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: 0.01em;
}

.csh-courses .csh-courses__title {
	margin: 0;
	color: var(--csh-color-heading);
	font-size: 1.75rem;
	font-size: clamp(1.625rem, 1.1rem + 2cqi, 2.375rem);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.015em;
}

.csh-courses .csh-courses__description {
	max-width: 42.5rem; /* Readable line length (~680px) inside the container. */
	margin: 0.5rem 0 0;
	color: var(--csh-color-text);
	font-size: 1rem;
	line-height: 1.6;
}

/* Filters: one compact segmented control, full width on narrow containers. */
.csh-courses .csh-courses__filters {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem;
	width: 100%;
	margin: 0;
	padding: 0.25rem;
	background: var(--csh-color-surface);
	border: 1px solid var(--csh-color-border);
	border-radius: calc(var(--csh-radius-control) + 0.25rem);
	box-shadow: var(--csh-shadow);
}

.csh-courses .csh-courses__filter {
	flex: 1 1 auto;
	min-width: 0;
	min-height: 2.5rem;
	margin: 0;
	padding: 0.5rem 0.875rem;
	font: inherit;
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: normal;
	text-transform: none;
	cursor: pointer;
	transition: background-color var(--csh-transition), color var(--csh-transition);
}

/* Colours repeat on :focus to override theme/Kit `button:focus` backgrounds. */
.csh-courses .csh-courses__filter,
.csh-courses .csh-courses__filter:focus {
	color: var(--csh-color-heading);
	background: transparent;
	border: 0;
	border-radius: var(--csh-radius-control);
	box-shadow: none;
	text-decoration: none;
}

.csh-courses .csh-courses__filter:hover {
	color: var(--csh-color-primary);
	background: var(--csh-color-primary-soft);
}

.csh-courses .csh-courses__filter[aria-pressed="true"],
.csh-courses .csh-courses__filter[aria-pressed="true"]:hover,
.csh-courses .csh-courses__filter[aria-pressed="true"]:focus {
	color: var(--csh-color-on-primary);
	background: var(--csh-color-primary);
}

/* Without JavaScript the filters can't work, so hide them (every card stays visible). */
@media (scripting: none) {
	.csh-courses .csh-courses__filters {
		display: none;
	}
}

/* Grid: 1 → 2 → 3 → 5 columns by container width (9 courses: 3 × 3, then 5 + 4). */
.csh-courses .csh-courses__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 1rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.csh-courses .csh-courses__item {
	margin: 0;
	padding: 0;
}

.csh-courses .csh-courses__item[hidden] {
	display: none;
}

/* Card: image on top, details below, CTA pinned to the bottom so rows line up. */
.csh-courses .csh-course-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	margin: 0;
	background: var(--csh-color-surface);
	border: 1px solid var(--csh-color-border);
	border-radius: var(--csh-radius);
	box-shadow: var(--csh-shadow);
}

/* Fixed ratio (images are cropped, never stretched); width/height attributes avoid layout shift. */
.csh-courses .csh-course-card__image {
	display: block;
	width: 100%;
	max-width: none;
	height: auto;
	aspect-ratio: 16 / 9;
	margin: 0;
	object-fit: cover;
	background: var(--csh-color-primary-soft);
	border: 0;
	border-radius: calc(var(--csh-radius) - 1px) calc(var(--csh-radius) - 1px) 0 0;
	box-shadow: none;
}

/* Shown until a course has its own image. */
.csh-courses .csh-course-card__image--placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--csh-color-primary);
}

.csh-courses .csh-course-card__placeholder-icon {
	width: 2.5rem;
	height: 2.5rem;
	opacity: 0.45;
}

.csh-courses .csh-course-card__content {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 0.875rem;
	padding: 1rem 1rem 1.125rem;
}

.csh-courses .csh-course-card__title {
	margin: 0;
	color: var(--csh-color-heading);
	font-size: 1.125rem;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: normal;
	text-transform: none;
}

.csh-courses .csh-course-card__meta {
	display: grid;
	gap: 0.5rem;
	margin: 0;
	padding: 0.75rem 0 0;
	border-top: 1px solid var(--csh-color-border);
}

.csh-courses .csh-course-card__meta-item {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.75rem;
	margin: 0;
	font-size: 0.875rem;
	line-height: 1.4;
}

.csh-courses .csh-course-card__fee {
	font-size: 0.9375rem;
}

.csh-courses .csh-course-card__meta-label {
	margin: 0;
	color: var(--csh-color-text);
	font-weight: 400;
}

.csh-courses .csh-course-card__meta-value {
	margin: 0;
	color: var(--csh-color-heading);
	font-weight: 600;
	text-align: right;
}

.csh-courses .csh-course-card__cta {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	min-height: 2.75rem;
	margin-top: auto;
	padding: 0.625rem 1rem;
	border-radius: var(--csh-radius-control);
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	transition: background-color var(--csh-transition);
}

/* Colours repeat on :visited/:focus to override theme/Kit link states. */
.csh-courses .csh-course-card__cta,
.csh-courses .csh-course-card__cta:visited,
.csh-courses .csh-course-card__cta:focus {
	color: var(--csh-color-on-accent);
	background: var(--csh-color-accent);
	text-decoration: none;
}

.csh-courses .csh-course-card__cta:hover {
	color: var(--csh-color-on-accent);
	background: var(--csh-color-accent-dark);
}

.csh-courses .csh-course-card__cta-icon {
	width: 1rem;
	height: 1rem;
	transition: transform var(--csh-transition);
}

.csh-courses .csh-course-card__cta:hover .csh-course-card__cta-icon {
	transform: translateX(3px);
}

/* Optional "View All Courses" link below the grid (only when view_all_url is set). */
.csh-courses .csh-courses__footer {
	display: flex;
	justify-content: center;
	margin-top: 2rem;
}

.csh-courses .csh-courses__view-all,
.csh-courses .csh-courses__view-all:visited {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	min-height: 2.75rem;
	padding: 0.5rem 1.125rem;
	color: var(--csh-color-primary);
	background: var(--csh-color-primary-soft);
	border-radius: var(--csh-radius-control);
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	transition: background-color var(--csh-transition), color var(--csh-transition);
}

.csh-courses .csh-courses__view-all:hover {
	color: var(--csh-color-on-primary);
	background: var(--csh-color-primary);
}

.csh-courses .csh-courses__view-all-icon {
	width: 1rem;
	height: 1rem;
	transition: transform var(--csh-transition);
}

.csh-courses .csh-courses__view-all:hover .csh-courses__view-all-icon {
	transform: translateX(3px);
}

/* Focus */
.csh-courses .csh-courses__filter:focus-visible,
.csh-courses .csh-course-card__cta:focus-visible,
.csh-courses .csh-courses__view-all:focus-visible {
	outline: 2px solid var(--csh-color-primary);
	outline-offset: 2px;
}

/* Wider containers */
@container (min-width: 34rem) {
	.csh-courses .csh-courses__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@container (min-width: 42rem) {
	.csh-courses .csh-courses__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 1.25rem;
	}
}

@container (min-width: 48rem) {
	.csh-courses .csh-courses__header {
		flex-direction: row;
		align-items: flex-end;
		justify-content: space-between;
		gap: 2rem;
		margin-bottom: 1.75rem;
	}

	.csh-courses .csh-courses__filters {
		flex: 0 0 auto;
		flex-wrap: nowrap;
		width: auto;
	}

	.csh-courses .csh-courses__filter {
		flex: 0 0 auto;
		min-width: 4.5rem;
		padding: 0.5rem 1.125rem;
	}
}

@container (min-width: 70rem) {
	.csh-courses .csh-courses__grid {
		grid-template-columns: repeat(5, minmax(0, 1fr));
	}
}

@media (prefers-reduced-motion: reduce) {
	/* Every component transition uses this token, so 0s disables them all. */
	:root {
		--csh-transition: 0s;
	}

	.csh-courses .csh-course-card__cta:hover .csh-course-card__cta-icon,
	.csh-courses .csh-courses__view-all:hover .csh-courses__view-all-icon {
		transform: none;
	}
}

/* ==========================================================================
   Testimonials: [csh_testimonials]
   Infinite carousel: 1 card + peek → 2 → 3 per view by container width. With
   JS (data-csh-ready) only the previous/next buttons and swipe move it, looping
   both ways. Without JS the same row falls back to native scrolling (scroll snap).
   ========================================================================== */

.csh-testimonials {
	box-sizing: border-box;
	width: 100%;
	color: var(--csh-color-text);
}

.csh-testimonials .csh-testimonials__inner {
	container-type: inline-size;
}

.csh-testimonials *,
.csh-testimonials *::before,
.csh-testimonials *::after {
	box-sizing: inherit;
}

.csh-testimonials .csh-testimonials__header {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 1.25rem;
	margin: 0 0 1.25rem;
}

.csh-testimonials .csh-testimonials__intro {
	min-width: 0;
}

.csh-testimonials .csh-testimonials__eyebrow {
	display: inline-block;
	margin: 0 0 0.75rem;
	padding: 0.3125rem 0.75rem;
	color: var(--csh-color-eyebrow-text);
	background: var(--csh-color-eyebrow-bg);
	border-radius: 999px;
	font-size: 0.75rem;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.csh-testimonials .csh-testimonials__title {
	margin: 0;
	color: var(--csh-color-heading);
	font-size: 1.75rem;
	font-size: clamp(1.625rem, 1.1rem + 2cqi, 2.375rem);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.015em;
}

.csh-testimonials .csh-testimonials__description {
	max-width: 42.5rem; /* Readable line length (~680px) inside the container. */
	margin: 0.5rem 0 0;
	color: var(--csh-color-text);
	font-size: 1rem;
	line-height: 1.6;
}

.csh-testimonials .csh-testimonials__controls {
	display: flex;
	flex: 0 0 auto;
	gap: 0.5rem;
}

.csh-testimonials .csh-testimonials__controls[hidden] {
	display: none;
}

.csh-testimonials .csh-testimonials__control {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	margin: 0;
	padding: 0;
	cursor: pointer;
	transition: background-color var(--csh-transition), color var(--csh-transition);
}

/* Colours repeat on :focus to override theme/Kit `button:focus` backgrounds. */
.csh-testimonials .csh-testimonials__control,
.csh-testimonials .csh-testimonials__control:focus {
	color: var(--csh-color-primary);
	background: var(--csh-color-primary-soft);
	border: 0;
	border-radius: 50%;
	box-shadow: none;
}

.csh-testimonials .csh-testimonials__control:hover {
	color: var(--csh-color-on-primary);
	background: var(--csh-color-primary);
}

.csh-testimonials .csh-testimonials__control-icon {
	width: 1.25rem;
	height: 1.25rem;
}

/*
 * The list bleeds 0.5rem past the container (negative margin + equal padding) so
 * card shadows and the focus ring aren't clipped by overflow. Content still
 * aligns with .csh-container; the gutter (≥1.25rem) absorbs the bleed.
 */
.csh-testimonials .csh-testimonials__grid {
	display: flex;
	gap: 1rem;
	margin: 0 -0.5rem;
	padding: 0.25rem 0.5rem 1rem;
	list-style: none;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: 0.5rem;
	scrollbar-width: none; /* A carousel, not a scroller: hidden from the start, so nothing shifts when JS starts. */
}

/*
 * Carousel mode: no free scrolling; vertical page swipes still pass through. Snapping is
 * off because the script positions cards exactly and reorders them for the infinite loop.
 */
.csh-testimonials[data-csh-ready] .csh-testimonials__grid {
	overflow-x: hidden;
	scroll-snap-type: none;
	touch-action: pan-y;
}

/* Without JavaScript there are no buttons, so show a thin scrollbar as the affordance. */
@media (scripting: none) {
	.csh-testimonials .csh-testimonials__grid {
		scrollbar-color: var(--csh-color-border-strong) transparent;
		scrollbar-width: thin;
	}
}

.csh-testimonials .csh-testimonials__item {
	display: flex;
	flex: 0 0 85%;
	margin: 0;
	padding: 0;
	scroll-snap-align: start;
}

.csh-testimonials .csh-testimonials__item:only-child {
	flex-basis: 100%;
}

/* Card: person on top, then rating and quote. Cards in a row share one height. */
.csh-testimonials .csh-testimonial-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 1rem;
	width: 100%;
	margin: 0;
	padding: 1.5rem;
	background: var(--csh-color-surface);
	border: 1px solid var(--csh-color-border);
	border-radius: var(--csh-radius);
	box-shadow: var(--csh-shadow);
}

/* Decorative quote mark; the empty alt text keeps it out of the accessibility tree. */
.csh-testimonials .csh-testimonial-card::before {
	content: "\201C";
	content: "\201C" / "";
	position: absolute;
	top: 0.75rem;
	right: 1.25rem;
	color: var(--csh-color-primary-soft);
	font-family: Georgia, serif;
	font-size: 4rem;
	line-height: 1;
	pointer-events: none;
}

.csh-testimonials .csh-testimonial-card__person {
	display: flex;
	align-items: center;
	gap: 0.875rem;
	padding-right: 2.5rem; /* Clear of the quote mark. */
}

/* Fixed square, cropped to a circle; width/height attributes avoid layout shift. */
.csh-testimonials .csh-testimonial-card__avatar {
	display: flex;
	flex: 0 0 3.5rem;
	align-items: center;
	justify-content: center;
	width: 3.5rem;
	max-width: none;
	height: 3.5rem;
	margin: 0;
	object-fit: cover;
	background: var(--csh-color-primary-soft);
	border: 0;
	border-radius: 50%;
	box-shadow: none;
}

.csh-testimonials .csh-testimonial-card__initials {
	color: var(--csh-color-primary);
	font-size: 1.125rem;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.02em;
}

.csh-testimonials .csh-testimonial-card__identity {
	min-width: 0;
}

.csh-testimonials .csh-testimonial-card__name {
	margin: 0;
	color: var(--csh-color-heading);
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: normal;
	text-transform: none;
}

.csh-testimonials .csh-testimonial-card__course {
	margin: 0.125rem 0 0;
	color: var(--csh-color-text);
	font-size: 0.875rem;
	line-height: 1.4;
}

/* Filled stars use the darker orange: 3.06:1 on white (non-text minimum is 3:1). */
.csh-testimonials .csh-testimonial-card__rating {
	display: flex;
	gap: 0.125rem;
	margin: 0;
	color: var(--csh-color-accent-dark);
}

.csh-testimonials .csh-testimonial-card__star {
	width: 1.125rem;
	height: 1.125rem;
}

/* Stars are solid: overrides the outline-icon rule at the top of this file. */
.csh-testimonials .csh-testimonial-card__star[aria-hidden] * {
	fill: currentColor;
}

.csh-testimonials .csh-testimonial-card__star--empty {
	color: var(--csh-color-border-strong);
}

/* Reset theme blockquote styles (borders, italics, quote marks, indents). */
.csh-testimonials .csh-testimonial-card__quote {
	margin: 0;
	padding: 0;
	color: var(--csh-color-text);
	background: none;
	border: 0;
	font-size: 1rem;
	font-style: normal;
	line-height: 1.65;
	quotes: none;
}

.csh-testimonials .csh-testimonial-card__quote::before,
.csh-testimonials .csh-testimonial-card__quote::after {
	content: none;
}

/* Focus */
.csh-testimonials .csh-testimonials__control:focus-visible,
.csh-testimonials .csh-testimonials__grid:focus-visible {
	outline: 2px solid var(--csh-color-primary);
	outline-offset: 2px;
}

/* Wider containers */
@container (min-width: 36rem) {
	.csh-testimonials .csh-testimonials__item {
		flex-basis: calc((100% - 1rem) / 2);
	}
}

@container (min-width: 48rem) {
	.csh-testimonials .csh-testimonials__header {
		flex-direction: row;
		align-items: flex-end;
		justify-content: space-between;
		gap: 2rem;
		margin-bottom: 1.5rem;
	}
}

@container (min-width: 60rem) {
	.csh-testimonials .csh-testimonials__grid {
		gap: 1.5rem;
	}

	.csh-testimonials .csh-testimonials__item {
		flex-basis: calc((100% - 3rem) / 3);
	}

	.csh-testimonials .csh-testimonial-card {
		padding: 1.75rem;
	}
}

/* ==========================================================================
   Universities: [csh_universities]
   Compact logo cards, 2 → 3 → 4 → 6 columns by container width. Cards after
   the first `visible` (--more) stay hidden until "View More Universities".
   ========================================================================== */

.csh-universities {
	box-sizing: border-box;
	width: 100%;
	color: var(--csh-color-text);
}

.csh-universities .csh-universities__inner {
	container-type: inline-size;
}

.csh-universities *,
.csh-universities *::before,
.csh-universities *::after {
	box-sizing: inherit;
}

.csh-universities .csh-universities__header {
	margin: 0 0 1.5rem;
}

.csh-universities .csh-universities__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	margin: 0 0 0.75rem;
	padding: 0.3125rem 0.75rem;
	color: var(--csh-color-eyebrow-text);
	background: var(--csh-color-eyebrow-bg);
	border-radius: 999px;
	font-size: 0.8125rem;
	font-weight: 600;
	line-height: 1.3;
}

.csh-universities .csh-universities__eyebrow-icon {
	width: 1.125rem;
	height: 1.125rem;
}

.csh-universities .csh-universities__title {
	margin: 0;
	color: var(--csh-color-heading);
	font-size: 1.75rem;
	font-size: clamp(1.625rem, 1.1rem + 2cqi, 2.375rem);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.015em;
	text-transform: none;
}

.csh-universities .csh-universities__description {
	max-width: 42.5rem; /* Readable line length (~680px) inside the container. */
	margin: 0.5rem 0 0;
	color: var(--csh-color-text);
	font-size: 1rem;
	line-height: 1.6;
}

.csh-universities .csh-universities__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.75rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.csh-universities .csh-universities__item {
	margin: 0;
	padding: 0;
}

.csh-universities .csh-universities__item--more {
	display: none;
}

.csh-universities[data-csh-expanded] .csh-universities__item--more {
	display: block;
}

/* Card: white logo box, then name and location; course count in a tinted strip at the bottom. */
.csh-universities .csh-university-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 0.625rem;
	height: 100%;
	margin: 0;
	padding: 0.625rem 0.625rem 0.75rem;
	background: var(--csh-color-surface-muted);
	border: 0;
	border-radius: var(--csh-radius);
	box-shadow: none;
	transition: transform var(--csh-transition), background-color var(--csh-transition);
}

.csh-universities .csh-university-card--link:hover {
	background: var(--csh-color-primary-soft);
	transform: translateY(-2px);
}

/* Every logo sits in the same white box (20px padding); the arrow marks the external link. */
.csh-universities .csh-university-card__logo-box {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1.25rem;
	background: var(--csh-color-surface);
	border-radius: var(--csh-radius-control);
}

/* Logos are 3:1; the width/height attributes and aspect-ratio reserve the space (no layout shift). */
.csh-universities .csh-university-card__logo {
	display: block;
	width: 100%;
	max-width: 10.5rem;
	height: auto;
	aspect-ratio: 3 / 1;
	margin: 0;
	object-fit: contain;
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

.csh-universities .csh-university-card__logo--placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--csh-color-primary);
	background: var(--csh-color-primary-soft);
	border-radius: var(--csh-radius-control);
}

.csh-universities .csh-university-card__placeholder-icon {
	width: 1.5rem;
	height: 1.5rem;
	opacity: 0.45;
}

/* 13px on one line, long names end in "…" (the full name stays in the HTML for screen readers and search). */
.csh-universities .csh-university-card__name {
	overflow: hidden;
	margin: 0 0.25rem;
	color: var(--csh-color-heading);
	font-size: 0.8125rem !important; /* 13px. !important: client request, see the link rule below. */
	font-weight: 600;
	line-height: 1.35 !important;
	letter-spacing: normal;
	text-overflow: ellipsis;
	text-transform: none;
	white-space: nowrap;
}

/*
 * One link per card, stretched over the whole card (docs/ACCESSIBILITY.md).
 * Font size and line height use !important (client request, 2026-10-14): the live
 * Elementor Kit sets `.elementor-kit-13 a { font-size: 16px; line-height: 1.6px }`,
 * which collapses the name's lines if it ever wins the cascade.
 */
.csh-universities .csh-university-card__link,
.csh-universities .csh-university-card__link:visited,
.csh-universities .csh-university-card__link:hover,
.csh-universities .csh-university-card__link:focus {
	color: inherit;
	font-family: inherit;
	font-size: 0.8125rem !important;
	font-style: normal;
	font-weight: inherit;
	line-height: 1.35 !important;
	letter-spacing: inherit;
	text-decoration: none;
	text-transform: none;
	outline: 0;
}

/*
 * The hidden "(opens in a new tab)" text is absolutely positioned (relative to the card),
 * so the name's overflow doesn't clip it; pin it inside the card or a long one-line name
 * pushes it past the viewport and the page scrolls sideways.
 */
.csh-universities .csh-visually-hidden {
	top: 0;
	left: 0;
}

.csh-universities .csh-university-card__link::after {
	content: "";
	position: absolute;
	inset: -1px;
	border-radius: var(--csh-radius);
}

.csh-universities .csh-university-card__location {
	margin: -0.5rem 0.25rem 0; /* Sits close under the name, inside the card gap. */
	color: var(--csh-color-text);
	font-size: 0.75rem;
	line-height: 1.4;
}

.csh-universities .csh-university-card__location-icon {
	display: inline-block;
	width: 0.875rem;
	height: 0.875rem;
	margin-right: 0.125rem;
	color: var(--csh-color-accent-text);
	vertical-align: -0.1875em;
}

.csh-universities .csh-university-card__courses {
	margin: auto -0.625rem -0.75rem;
	padding: 0.4375rem 0.875rem;
	color: var(--csh-color-accent-text);
	background: var(--csh-color-accent-soft);
	border-radius: 0 0 calc(var(--csh-radius) - 1px) calc(var(--csh-radius) - 1px);
	font-size: 0.75rem;
	font-weight: 700;
	line-height: 1.4;
}

/* Hidden until the card is hovered or its link focused; then it fades in and rises into the corner. */
.csh-universities .csh-university-card__arrow {
	position: absolute;
	top: 0.4375rem;
	right: 0.4375rem;
	width: 0.875rem;
	height: 0.875rem;
	color: var(--csh-color-accent-text);
	opacity: 0;
	transform: translate(-4px, 4px);
	transition: opacity 220ms ease, transform 220ms ease;
}

.csh-universities .csh-university-card--link:hover .csh-university-card__arrow,
.csh-universities .csh-university-card--link:focus-within .csh-university-card__arrow {
	opacity: 1;
	transform: none;
}

.csh-universities .csh-universities__footer {
	display: flex;
	justify-content: center;
	margin-top: 2rem;
}

.csh-universities .csh-universities__toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	min-height: 2.75rem;
	margin: 0;
	padding: 0.5rem 1.25rem;
	font: inherit;
	font-size: 0.875rem;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color var(--csh-transition), color var(--csh-transition);
}

/* Colours repeat on :focus to override theme/Kit `button:focus` backgrounds. */
.csh-universities .csh-universities__toggle,
.csh-universities .csh-universities__toggle:focus {
	color: var(--csh-color-primary);
	background: var(--csh-color-primary-soft);
	border: 0;
	border-radius: var(--csh-radius-control);
	box-shadow: none;
}

.csh-universities .csh-universities__toggle:hover {
	color: var(--csh-color-on-primary);
	background: var(--csh-color-primary);
}

.csh-universities .csh-universities__toggle[aria-expanded="true"] .csh-universities__toggle-more,
.csh-universities .csh-universities__toggle[aria-expanded="false"] .csh-universities__toggle-less {
	display: none;
}

.csh-universities .csh-universities__toggle-icon {
	width: 1rem;
	height: 1rem;
	transition: transform var(--csh-transition);
}

.csh-universities .csh-universities__toggle[aria-expanded="true"] .csh-universities__toggle-icon {
	transform: rotate(180deg);
}

/* Without JavaScript the button can't work, so show every card instead. */
@media (scripting: none) {
	.csh-universities .csh-universities__item--more {
		display: block;
	}

	.csh-universities .csh-universities__footer {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	/* Cards don't lift; the arrow only fades. */
	.csh-universities .csh-university-card--link:hover,
	.csh-universities .csh-university-card__arrow {
		transform: none;
	}
}

/* Focus */
.csh-universities .csh-university-card__link:focus-visible::after,
.csh-universities .csh-universities__toggle:focus-visible {
	outline: 2px solid var(--csh-color-primary);
	outline-offset: 2px;
}

/* Wider containers */
@container (min-width: 36rem) {
	.csh-universities .csh-universities__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 1rem;
	}
}

@container (min-width: 52rem) {
	.csh-universities .csh-universities__grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

@container (min-width: 70rem) {
	.csh-universities .csh-universities__grid {
		grid-template-columns: repeat(6, minmax(0, 1fr));
	}
}

/* ==========================================================================
   FAQ: [csh_faq]
   Native <details>/<summary> accordion: every answer is in the HTML and it
   works without JavaScript (the section ships no JS). Intro above the list;
   intro beside it (sticky) from a 60rem container.
   ========================================================================== */

/* The container is the band itself (not __inner), so __inner can switch to two columns. */
.csh-faq {
	box-sizing: border-box;
	width: 100%;
	color: var(--csh-color-text);
	container-type: inline-size;
}

/* Explicit (not `inherit`): <summary> inherits through the <details> shadow slot, which is content-box. */
.csh-faq *,
.csh-faq *::before,
.csh-faq *::after {
	box-sizing: border-box;
}

.csh-faq .csh-faq__inner {
	display: grid;
	gap: 1.5rem;
}

.csh-faq .csh-faq__header {
	min-width: 0;
}

.csh-faq .csh-faq__eyebrow {
	display: inline-block;
	margin: 0 0 0.75rem;
	padding: 0.3125rem 0.75rem;
	color: var(--csh-color-eyebrow-text);
	background: var(--csh-color-eyebrow-bg);
	border-radius: 999px;
	font-size: 0.75rem;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.csh-faq .csh-faq__title {
	margin: 0;
	color: var(--csh-color-heading);
	font-size: 1.75rem;
	font-size: clamp(1.625rem, 1.1rem + 2cqi, 2.375rem);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.015em;
	text-transform: none;
}

.csh-faq .csh-faq__description {
	max-width: 42.5rem; /* Readable line length (~680px) inside the container. */
	margin: 0.5rem 0 0;
	color: var(--csh-color-text);
	font-size: 1rem;
	line-height: 1.6;
}

/* Optional "View All FAQs" link (only when view_all_url is set). */
.csh-faq .csh-faq__view-all,
.csh-faq .csh-faq__view-all:visited {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	min-height: 2.75rem;
	margin-top: 1.25rem;
	padding: 0.5rem 1.125rem;
	color: var(--csh-color-primary);
	background: var(--csh-color-primary-soft);
	border-radius: var(--csh-radius-control);
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	transition: background-color var(--csh-transition), color var(--csh-transition);
}

.csh-faq .csh-faq__view-all:hover {
	color: var(--csh-color-on-primary);
	background: var(--csh-color-primary);
}

.csh-faq .csh-faq__view-all-icon {
	width: 1rem;
	height: 1rem;
}

.csh-faq .csh-faq__list {
	display: grid;
	gap: 0.75rem;
	min-width: 0;
}

/* Each question is a card; the open one gets a firmer border and shadow. */
.csh-faq .csh-faq__item {
	margin: 0;
	padding: 0;
	background: var(--csh-color-surface);
	border: 1px solid var(--csh-color-border);
	border-radius: var(--csh-radius);
	box-shadow: var(--csh-shadow);
	transition: border-color var(--csh-transition), box-shadow var(--csh-transition);
}

.csh-faq .csh-faq__item:hover,
.csh-faq .csh-faq__item[open] {
	border-color: var(--csh-color-border-strong);
}

.csh-faq .csh-faq__item[open] {
	box-shadow: 0 6px 18px rgba(27, 42, 74, 0.08);
}

/* The whole row is the toggle: at least 56px tall, so it's easy to tap. */
.csh-faq .csh-faq__question {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	min-height: 3.5rem;
	margin: 0;
	padding: 0.875rem 1rem 0.875rem 1.125rem;
	color: var(--csh-color-heading);
	border-radius: calc(var(--csh-radius) - 1px); /* Not `inherit`: see the box-sizing note above. Shapes the focus ring. */
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.4;
	list-style: none; /* Hides the default marker (with display: flex). */
	cursor: pointer;
}

.csh-faq .csh-faq__item[open] .csh-faq__question {
	border-end-start-radius: 0;
	border-end-end-radius: 0;
}

.csh-faq .csh-faq__question::-webkit-details-marker {
	display: none; /* Safari's marker. */
}

.csh-faq .csh-faq__question-text {
	min-width: 0;
	overflow-wrap: break-word;
}

/* Chevron in a tinted circle; navy and turned up when open. */
.csh-faq .csh-faq__icon {
	width: 2rem;
	height: 2rem;
	padding: 0.4375rem;
	color: var(--csh-color-accent-text);
	background: var(--csh-color-accent-soft);
	border-radius: 50%;
	transition: transform var(--csh-transition), background-color var(--csh-transition), color var(--csh-transition);
}

.csh-faq .csh-faq__item[open] .csh-faq__icon {
	color: var(--csh-color-on-primary);
	background: var(--csh-color-primary);
	transform: rotate(180deg);
}

.csh-faq .csh-faq__answer {
	margin: 0 1.125rem;
	padding: 1rem 0 1.125rem;
	color: var(--csh-color-text);
	border-top: 1px solid var(--csh-color-border);
	font-size: 0.9375rem;
	line-height: 1.65;
}

/* Answer content is limited HTML from data/faqs.php: reset theme spacing. */
.csh-faq .csh-faq__answer > * {
	margin: 0 0 0.75rem;
}

.csh-faq .csh-faq__answer > :last-child {
	margin-bottom: 0;
}

.csh-faq .csh-faq__answer ul,
.csh-faq .csh-faq__answer ol {
	padding: 0 0 0 1.25rem;
}

.csh-faq .csh-faq__answer li {
	margin: 0 0 0.25rem;
	padding: 0;
}

.csh-faq .csh-faq__answer a,
.csh-faq .csh-faq__answer a:visited {
	color: var(--csh-color-primary);
	text-decoration: underline;
}

/* Focus */
.csh-faq .csh-faq__question:focus-visible,
.csh-faq .csh-faq__view-all:focus-visible,
.csh-faq .csh-faq__answer a:focus-visible {
	outline: 2px solid var(--csh-color-primary);
	outline-offset: 2px;
}

/* Wider containers: intro beside the list, kept in view while the list scrolls. */
@container (min-width: 60rem) {
	.csh-faq .csh-faq__inner {
		grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
		align-items: start;
		gap: 4rem;
	}

	.csh-faq .csh-faq__header {
		position: sticky;
		top: calc(var(--wp-admin--admin-bar--height, 0px) + 1.5rem);
	}

	/* No intro (title, eyebrow and description all empty): the list takes the full width. */
	.csh-faq .csh-faq__list:only-child {
		grid-column: 1 / -1;
	}

	.csh-faq .csh-faq__question {
		padding: 1rem 1.25rem 1rem 1.5rem;
		font-size: 1.0625rem;
	}

	.csh-faq .csh-faq__answer {
		margin-inline: 1.5rem;
		font-size: 1rem;
	}
}

/* ==========================================================================
   Blog: [csh_blog]
   Native WordPress posts (ADR-014), no JS: category links, search and
   pagination are normal URLs. Intro panel, then the articles with the
   sidebar below them; side by side (about 74% / 26%) from a 60rem container.
   ========================================================================== */

.csh-blog {
	box-sizing: border-box;
	width: 100%;
	color: var(--csh-color-text);
}

.csh-blog *,
.csh-blog *::before,
.csh-blog *::after {
	box-sizing: inherit;
}

/*
 * The outer layout uses viewport media queries, not a container query: inline-size
 * containment on this wrapper makes an Elementor container set to "Wrap" measure the
 * widget at the wrong width and give it thousands of pixels of empty height (seen live,
 * 2026-10-15). Breakpoints = the former content widths + the container gutters.
 * Only the article column (.csh-blog__main) stays a container, for the card grid.
 */

/*
 * Intro banner: title and subtitle centred; 200px → 220px → 420px tall.
 * With a photo (`image` attribute, default the client's Media Library photo)
 * it covers the banner under a navy overlay; without one, a light tinted panel.
 */
.csh-blog .csh-blog__hero {
	position: relative;
	isolation: isolate; /* The photo and overlay (negative z-index) stay inside the banner. */
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 12.5rem;
	margin: 0 0 1.75rem;
	padding: 2rem 1.25rem;
	overflow: hidden;
	text-align: center;
	background: linear-gradient(135deg, var(--csh-color-primary-soft) 0%, var(--csh-color-surface-muted) 65%, var(--csh-color-accent-soft) 100%);
	border: 1px solid var(--csh-color-border);
	border-radius: var(--csh-radius);
}

.csh-blog .csh-blog__intro {
	min-width: 0;
	max-width: 46rem;
}

/* Navy until the photo arrives, so the white text is readable from the first paint. */
.csh-blog .csh-blog__hero--image {
	background: var(--csh-color-overlay);
	border-color: transparent;
}

/* Overlay: darkest behind the centred text (about 78%), lighter towards the edges (about 58%) so the photo stays visible. */
.csh-blog .csh-blog__hero--image::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: radial-gradient(ellipse 65% 95% at 50% 50%, color-mix(in srgb, var(--csh-color-overlay) 78%, transparent), color-mix(in srgb, var(--csh-color-overlay) 58%, transparent));
}

/* Covers the banner like a background image; faces sit in the photo's upper half, hence 35%. */
.csh-blog .csh-blog__hero-image {
	position: absolute;
	inset: 0;
	z-index: -2;
	display: block;
	width: 100%;
	max-width: none;
	height: 100%;
	margin: 0;
	object-fit: cover;
	object-position: 50% 35%;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

.csh-blog .csh-blog__eyebrow {
	display: inline-block;
	margin: 0 0 0.75rem;
	padding: 0.3125rem 0.75rem;
	color: var(--csh-color-eyebrow-text);
	background: var(--csh-color-eyebrow-bg);
	border-radius: 999px;
	font-size: 0.75rem;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.csh-blog .csh-blog__title {
	margin: 0;
	color: var(--csh-color-heading);
	font-size: 1.75rem;
	font-size: clamp(1.75rem, 1.2rem + 2.4vw, 3rem); /* 28px on phones → 48px on desktop. */
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.015em;
	text-transform: none;
	overflow-wrap: break-word;
}

/* Short orange accent between heading and subtitle (decorative; orange only as a background). */
.csh-blog .csh-blog__title::after {
	content: "";
	display: block;
	width: 3rem;
	height: 3px;
	margin: 0.875rem auto 0;
	background: var(--csh-color-accent);
	border-radius: 3px;
}

.csh-blog .csh-blog__description {
	max-width: 42.5rem; /* Readable line length (~680px) inside the container. */
	margin: 0.875rem auto 0;
	color: var(--csh-color-text);
	font-size: 0.9375rem;
	line-height: 1.6;
}

.csh-blog .csh-blog__hero--image .csh-blog__title {
	color: var(--csh-color-on-primary);
	text-shadow: 0 2px 16px rgba(7, 26, 53, 0.45);
}

.csh-blog .csh-blog__hero--image .csh-blog__description {
	color: var(--csh-color-on-overlay-muted);
	text-shadow: 0 1px 10px rgba(7, 26, 53, 0.5);
}

.csh-blog .csh-blog__layout {
	display: grid;
	gap: 2.5rem;
}

.csh-blog .csh-blog__main {
	min-width: 0;
	container: csh-blog-main / inline-size;
}

/* Category links: one scrollable row on narrow columns, wrapped from 40rem. */
.csh-blog .csh-blog__categories {
	margin: 0 0 1.5rem;
}

.csh-blog .csh-blog__category-list {
	display: flex;
	gap: 0.5rem;
	margin: -0.25rem -0.25rem 0; /* Room for focus rings inside the scroll area. */
	padding: 0.25rem 0.25rem 0.5rem;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	list-style: none;
	scrollbar-color: var(--csh-color-border-strong) transparent;
	scrollbar-width: thin;
}

.csh-blog .csh-blog__category-item {
	flex: 0 0 auto;
	margin: 0;
	padding: 0;
}

/* Colours repeat on :visited/:focus to override theme/Kit link states. */
.csh-blog .csh-blog__category-link,
.csh-blog .csh-blog__category-link:visited,
.csh-blog .csh-blog__category-link:focus {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	min-height: 2.5rem;
	padding: 0.5rem 1rem;
	color: var(--csh-color-heading);
	background: var(--csh-color-surface);
	border: 1px solid var(--csh-color-border);
	border-radius: 999px;
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color var(--csh-transition), border-color var(--csh-transition), color var(--csh-transition);
}

.csh-blog .csh-blog__category-link:hover {
	color: var(--csh-color-primary);
	background: var(--csh-color-primary-soft);
	border-color: var(--csh-color-border-strong);
}

/* Current category: filled and marked with a check icon, not by colour alone. */
.csh-blog .csh-blog__category-link[aria-current],
.csh-blog .csh-blog__category-link[aria-current]:hover,
.csh-blog .csh-blog__category-link[aria-current]:focus {
	color: var(--csh-color-on-primary);
	background: var(--csh-color-primary);
	border-color: var(--csh-color-primary);
}

.csh-blog .csh-blog__category-icon {
	width: 0.875rem;
	height: 0.875rem;
	stroke-width: 2.5;
}

/* Results: what is listed (all, a category or a search) and how many. */
.csh-blog .csh-blog__results-header {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.25rem 1rem;
	margin: 0 0 1.25rem;
}

.csh-blog .csh-blog__results-title {
	margin: 0;
	color: var(--csh-color-heading);
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: normal;
	text-transform: none;
	overflow-wrap: anywhere;
}

.csh-blog .csh-blog__results-count {
	margin: 0;
	color: var(--csh-color-text);
	font-size: 0.875rem;
	line-height: 1.4;
}

.csh-blog .csh-blog__clear,
.csh-blog .csh-blog__clear:visited,
.csh-blog .csh-blog__clear:focus {
	color: var(--csh-color-primary);
	font-size: 0.875rem;
	font-weight: 600;
	text-decoration: underline;
}

/* Grid: 1 → 2 → 3 columns by the article column's width. */
.csh-blog .csh-blog__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 1.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.csh-blog .csh-blog__item {
	margin: 0;
	padding: 0;
}

/* Card: the title link is stretched over the whole card (its one link, see ACCESSIBILITY).
   Flat by client decision (2026-10-15): no shadow and no hover lift. Scoped to its own block
   (sections/blog-card.php), so the blog listing and related articles on posts share it. */
.csh-blog-card {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	margin: 0;
	background: var(--csh-color-surface);
	border: 1px solid var(--csh-color-border);
	border-radius: var(--csh-radius);
	box-shadow: none;
}

/* Fixed ratio (images are cropped, never stretched); width/height attributes avoid layout shift. */
.csh-blog-card .csh-blog-card__image {
	display: block;
	width: 100%;
	max-width: none;
	height: auto;
	aspect-ratio: 16 / 9;
	margin: 0;
	object-fit: cover;
	background: var(--csh-color-primary-soft);
	border: 0;
	border-radius: calc(var(--csh-radius) - 1px) calc(var(--csh-radius) - 1px) 0 0;
	box-shadow: none;
}

/* Shown when a post has no featured image. */
.csh-blog-card .csh-blog-card__image--placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--csh-color-primary);
	background: linear-gradient(135deg, var(--csh-color-primary-soft), var(--csh-color-accent-soft));
}

.csh-blog-card .csh-blog-card__placeholder-icon {
	width: 2.5rem;
	height: 2.5rem;
	opacity: 0.45;
}

.csh-blog-card .csh-blog-card__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 0.625rem;
	padding: 1rem 1.125rem 1.25rem;
}

.csh-blog-card .csh-blog-card__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	flex-wrap: nowrap; /* Category and date share one line; a long category name is cut with an ellipsis. */
	gap: 0.5rem;
	font-size: 0.8125rem;
	line-height: 1.3;
}

.csh-blog-card .csh-blog-card__category {
	min-width: 0;
	padding: 0.1875rem 0.5rem;
	overflow: hidden;
	color: var(--csh-color-accent-text);
	background: var(--csh-color-accent-soft);
	border-radius: 999px;
	font-size: 0.75rem;
	font-weight: 600;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.csh-blog-card .csh-blog-card__date {
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	gap: 0.3125rem;
	color: var(--csh-color-text);
	white-space: nowrap;
}

.csh-blog-card .csh-blog-card__date-icon {
	width: 0.875rem;
	height: 0.875rem;
}

/* At most 2 lines: a longer title is cut with an ellipsis (the full title is still the link text for
   screen readers). Always 2 lines tall, so excerpts and "Read More" line up across a row. The stretched
   link's ::after is not clipped: its containing block is the card, outside this overflow box. */
.csh-blog-card .csh-blog-card__title {
	display: -webkit-box;
	min-height: calc(2 * 1.35em);
	margin: 0;
	overflow: hidden;
	color: var(--csh-color-heading);
	font-size: 1.125rem;
	font-weight: 700;
	line-height: 1.35;
	letter-spacing: normal;
	text-transform: none;
	overflow-wrap: break-word;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
}

.csh-blog-card .csh-blog-card__link,
.csh-blog-card .csh-blog-card__link:visited,
.csh-blog-card .csh-blog-card__link:focus {
	color: var(--csh-color-heading);
	text-decoration: none;
	outline: none; /* The focus ring is drawn on ::after, around the whole card (see Focus). */
}

.csh-blog-card .csh-blog-card__link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	border-radius: var(--csh-radius);
}

/* No underline or colour change on hover; this also beats theme/Kit `a:hover` styles. */
.csh-blog-card:hover .csh-blog-card__link {
	color: var(--csh-color-heading);
	text-decoration: none;
}

/* Always 3 lines tall: longer excerpts are cut with an ellipsis, shorter ones keep the space, so cards line up. */
.csh-blog-card .csh-blog-card__excerpt {
	display: -webkit-box;
	min-height: calc(3 * 1.6em);
	margin: 0;
	overflow: hidden;
	color: var(--csh-color-text);
	font-size: 0.9375rem;
	line-height: 1.6;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	line-clamp: 3;
}

/* "Read More" is inside the stretched link's area, so clicking it opens the article. */
.csh-blog-card .csh-blog-card__more {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	margin-top: auto;
	padding-top: 0.25rem;
	color: var(--csh-color-accent-text);
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.2;
}

.csh-blog-card .csh-blog-card__more-icon {
	width: 1rem;
	height: 1rem;
	transition: transform var(--csh-transition);
}

.csh-blog-card:hover .csh-blog-card__more-icon {
	transform: translateX(3px);
}

/* Pagination: paginate_links() output, so its core classes are styled (.page-numbers, .current, .dots). */
.csh-blog .csh-blog__pagination {
	margin-top: 2rem;
}

.csh-blog .csh-blog__pages {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.375rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.csh-blog .csh-blog__page {
	margin: 0;
	padding: 0;
}

.csh-blog .page-numbers,
.csh-blog a.page-numbers:visited,
.csh-blog a.page-numbers:focus {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.375rem;
	min-width: 2.75rem;
	min-height: 2.75rem;
	padding: 0.5rem 0.75rem;
	color: var(--csh-color-heading);
	background: var(--csh-color-surface);
	border: 1px solid var(--csh-color-border);
	border-radius: var(--csh-radius-control);
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	transition: background-color var(--csh-transition), border-color var(--csh-transition), color var(--csh-transition);
}

.csh-blog a.page-numbers:hover {
	color: var(--csh-color-primary);
	background: var(--csh-color-primary-soft);
	border-color: var(--csh-color-border-strong);
}

.csh-blog .page-numbers.current {
	color: var(--csh-color-on-primary);
	background: var(--csh-color-primary);
	border-color: var(--csh-color-primary);
}

.csh-blog .page-numbers.dots {
	min-width: 0;
	padding-inline: 0.25rem;
	background: transparent;
	border-color: transparent;
}

.csh-blog .csh-blog__page-icon {
	width: 1rem;
	height: 1rem;
}

/* Empty states: no posts, empty category, no search matches, page out of range. */
.csh-blog .csh-blog__empty {
	padding: 2rem 1.5rem;
	text-align: center;
	background: var(--csh-color-surface-muted);
	border: 1px dashed var(--csh-color-border-strong);
	border-radius: var(--csh-radius);
}

.csh-blog .csh-blog__empty-text {
	max-width: 32rem;
	margin: 0 auto;
	color: var(--csh-color-heading);
	font-size: 1rem;
	line-height: 1.6;
	overflow-wrap: anywhere;
}

.csh-blog .csh-blog__empty-link,
.csh-blog .csh-blog__empty-link:visited,
.csh-blog .csh-blog__empty-link:focus {
	display: inline-flex;
	align-items: center;
	min-height: 2.75rem;
	margin-top: 1rem;
	padding: 0.5rem 1.125rem;
	color: var(--csh-color-primary);
	background: var(--csh-color-primary-soft);
	border-radius: var(--csh-radius-control);
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	transition: background-color var(--csh-transition), color var(--csh-transition);
}

.csh-blog .csh-blog__empty-link:hover {
	color: var(--csh-color-on-primary);
	background: var(--csh-color-primary);
}

/* Sidebar: search, latest articles, categories. */
.csh-blog .csh-blog__sidebar {
	display: grid;
	align-content: start;
	gap: 1.25rem;
	min-width: 0;
}

.csh-blog .csh-blog__widget {
	min-width: 0;
	padding: 1.25rem;
	background: var(--csh-color-surface);
	border: 1px solid var(--csh-color-border);
	border-radius: var(--csh-radius);
	box-shadow: var(--csh-shadow);
}

.csh-blog .csh-blog__widget-title {
	position: relative;
	margin: 0 0 1rem;
	padding: 0 0 0.75rem;
	color: var(--csh-color-heading);
	border-bottom: 1px solid var(--csh-color-border);
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: normal;
	text-transform: none;
}

/* Decorative orange accent on the title rule (orange only as a background). */
.csh-blog .csh-blog__widget-title::after {
	content: "";
	position: absolute;
	bottom: -1px;
	left: 0;
	width: 2.5rem;
	height: 3px;
	background: var(--csh-color-accent);
	border-radius: 3px;
}

.csh-blog .csh-blog__search {
	display: flex;
	gap: 0.5rem;
	margin: 0;
}

.csh-blog .csh-blog__search-input {
	flex: 1;
	min-width: 0;
	min-height: 2.75rem;
	margin: 0;
	padding: 0.5rem 0.875rem;
	color: var(--csh-color-heading);
	background: var(--csh-color-surface);
	border: 1px solid var(--csh-color-border-strong);
	border-radius: var(--csh-radius-control);
	box-shadow: none;
	font: inherit;
	font-size: 1rem; /* ≥16px avoids iOS zoom on focus. */
}

.csh-blog .csh-blog__search-input:focus {
	border-color: var(--csh-color-primary);
	outline: 2px solid var(--csh-color-primary);
	outline-offset: 1px;
}

.csh-blog .csh-blog__search-submit {
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	min-height: 2.75rem;
	margin: 0;
	padding: 0;
	border-radius: var(--csh-radius-control);
	cursor: pointer;
	transition: background-color var(--csh-transition), border-color var(--csh-transition);
}

/* Colours repeat on :focus to override theme/Kit `button:focus` backgrounds. */
.csh-blog .csh-blog__search-submit,
.csh-blog .csh-blog__search-submit:focus {
	color: var(--csh-color-on-primary);
	background: var(--csh-color-primary);
	border: 1px solid var(--csh-color-primary);
	box-shadow: none;
}

.csh-blog .csh-blog__search-submit:hover {
	color: var(--csh-color-on-primary);
	background: var(--csh-color-primary-dark);
	border-color: var(--csh-color-primary-dark);
}

.csh-blog .csh-blog__search-icon {
	width: 1.25rem;
	height: 1.25rem;
}

/* Latest articles: thumbnail + title; the title link is stretched over the row. */
.csh-blog .csh-blog__latest {
	display: grid;
	gap: 1rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.csh-blog .csh-blog__latest-item {
	position: relative;
	display: grid;
	grid-template-columns: 4rem minmax(0, 1fr);
	align-items: center;
	gap: 0.75rem;
	margin: 0;
	padding: 0;
}

.csh-blog .csh-blog__latest-image {
	display: block;
	width: 4rem;
	max-width: none;
	height: 4rem;
	margin: 0;
	object-fit: cover;
	background: var(--csh-color-primary-soft);
	border: 0;
	border-radius: var(--csh-radius-control);
	box-shadow: none;
}

.csh-blog .csh-blog__latest-image--placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--csh-color-primary);
}

.csh-blog .csh-blog__latest-icon {
	width: 1.25rem;
	height: 1.25rem;
	opacity: 0.5;
}

.csh-blog .csh-blog__latest-text {
	display: grid;
	gap: 0.25rem;
	min-width: 0;
}

.csh-blog .csh-blog__latest-link,
.csh-blog .csh-blog__latest-link:visited,
.csh-blog .csh-blog__latest-link:focus {
	display: -webkit-box;
	overflow: hidden;
	color: var(--csh-color-heading);
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.35;
	text-decoration: none;
	outline: none; /* The focus ring is drawn on ::after, around the row (see Focus). */
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
}

.csh-blog .csh-blog__latest-link::after {
	content: "";
	position: absolute;
	inset: -0.25rem;
	border-radius: var(--csh-radius-control);
}

.csh-blog .csh-blog__latest-item:hover .csh-blog__latest-link {
	color: var(--csh-color-primary);
	text-decoration: underline;
}

.csh-blog .csh-blog__latest-date {
	color: var(--csh-color-text);
	font-size: 0.8125rem;
	line-height: 1.3;
}

/* Categories with their real post counts (empty categories are not listed). */
.csh-blog .csh-blog__topics {
	margin: 0;
	padding: 0;
	list-style: none;
}

.csh-blog .csh-blog__topic {
	margin: 0;
	padding: 0.125rem 0;
	border-bottom: 1px solid var(--csh-color-border);
}

.csh-blog .csh-blog__topic:last-child {
	border-bottom: 0;
}

.csh-blog .csh-blog__topic-link,
.csh-blog .csh-blog__topic-link:visited,
.csh-blog .csh-blog__topic-link:focus {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	min-height: 2.75rem;
	padding: 0.5rem 0.625rem;
	color: var(--csh-color-heading);
	border-radius: var(--csh-radius-control);
	font-size: 0.9375rem;
	font-weight: 500;
	line-height: 1.3;
	text-decoration: none;
	transition: background-color var(--csh-transition), color var(--csh-transition);
}

.csh-blog .csh-blog__topic-link:hover {
	color: var(--csh-color-primary);
	background: var(--csh-color-primary-soft);
}

/* Current category: bold with an orange side bar, not by colour alone. */
.csh-blog .csh-blog__topic-link[aria-current],
.csh-blog .csh-blog__topic-link[aria-current]:focus {
	color: var(--csh-color-primary);
	background: var(--csh-color-primary-soft);
	box-shadow: inset 3px 0 0 var(--csh-color-accent);
	font-weight: 700;
}

.csh-blog .csh-blog__topic-name {
	min-width: 0;
	overflow-wrap: break-word;
}

.csh-blog .csh-blog__topic-count {
	flex-shrink: 0;
	min-width: 2rem;
	padding: 0.125rem 0.5rem;
	color: var(--csh-color-primary);
	background: var(--csh-color-primary-soft);
	border-radius: 999px;
	font-size: 0.8125rem;
	font-weight: 600;
	text-align: center;
}

.csh-blog .csh-blog__topic-link:hover .csh-blog__topic-count,
.csh-blog .csh-blog__topic-link[aria-current] .csh-blog__topic-count {
	color: var(--csh-color-on-primary);
	background: var(--csh-color-primary);
}

/* Focus */
.csh-blog .csh-blog__category-link:focus-visible,
.csh-blog .csh-blog__clear:focus-visible,
.csh-blog .csh-blog__empty-link:focus-visible,
.csh-blog .csh-blog__search-submit:focus-visible,
.csh-blog .csh-blog__topic-link:focus-visible,
.csh-blog a.page-numbers:focus-visible,
.csh-blog-card .csh-blog-card__link:focus-visible::after,
.csh-blog .csh-blog__latest-link:focus-visible::after {
	outline: 2px solid var(--csh-color-primary);
	outline-offset: 2px;
}

/* Wider article column */
@container csh-blog-main (min-width: 34rem) {
	.csh-blog .csh-blog__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@container csh-blog-main (min-width: 40rem) {
	.csh-blog .csh-blog__category-list {
		flex-wrap: wrap;
		overflow: visible;
		padding-bottom: 0.25rem;
	}
}

@container csh-blog-main (min-width: 52rem) {
	.csh-blog .csh-blog__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* Wider screens: taller banner (220px on tablets, 420px from 960px), larger subtitle. */
@media (min-width: 42.5rem) {
	.csh-blog .csh-blog__hero {
		min-height: 13.75rem;
		margin-bottom: 2rem;
		padding: 2.5rem;
	}

	.csh-blog .csh-blog__description {
		font-size: 1rem;
	}
}

@media (min-width: 60rem) {
	.csh-blog .csh-blog__hero {
		min-height: 26.25rem;
	}

	.csh-blog .csh-blog__description {
		font-size: 1.0625rem;
	}
}

/* Sidebar below the articles: search across the top, the other two blocks side by side. */
@media (min-width: 42.5rem) and (max-width: 63.98rem) {
	.csh-blog .csh-blog__sidebar {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		align-items: start;
	}

	.csh-blog .csh-blog__widget:first-child {
		grid-column: 1 / -1;
	}
}

/* Wide screens: articles and sidebar side by side. */
@media (min-width: 64rem) {
	.csh-blog .csh-blog__layout {
		grid-template-columns: minmax(0, 74fr) minmax(15rem, 26fr);
		align-items: start;
		gap: 2.5rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.csh-blog-card:hover .csh-blog-card__more-icon {
		transform: none;
	}
}

/* ==========================================================================
   Single blog post (includes/blog.php, sections/blog-single.php; ADR-015)
   Featured image, header, then content with a sidebar (table of contents,
   counselling card) from 64rem; one column on smaller screens. Related
   articles reuse .csh-blog-card. Viewport media queries only (no container
   query on outer elements, see the Blog listing notes in ARCHITECTURE).
   ========================================================================== */

/*
 * Hello Elementor narrows non-Elementor posts to 500–1140px (plus 10px side
 * padding on phones). On plugin-rendered posts (body.csh-post-page) the
 * layout uses .csh-container like every other page instead. `html body`
 * outranks Hello's `body:not([class*=elementor-page-]) .site-main` (0,2,1).
 */
html body.csh-post-page .site-main {
	max-width: none;
	padding-inline: 0;
}

/* What the theme prints after the post (tags, page links, comments) keeps the same content width. */
html body.csh-post-page .page-content > :not(.csh-post),
html body.csh-post-page .site-main > .comments-area {
	width: min(100% - 2 * var(--csh-container-gutter-mobile), var(--csh-container-max));
	margin-inline: auto;
}

@media (min-width: 48rem) {
	html body.csh-post-page .page-content > :not(.csh-post),
	html body.csh-post-page .site-main > .comments-area {
		width: min(100% - 2 * var(--csh-container-gutter), var(--csh-container-max));
	}
}

/* When comments are open they end the page: same spacing before the footer as a section (44/56/68px). */
html body.csh-post-page .site-main > .comments-area {
	padding-bottom: var(--csh-section-space);
}

.csh-post {
	box-sizing: border-box;
	width: 100%;
	padding-block: 1.5rem var(--csh-section-space);
	color: var(--csh-color-text);
}

.csh-post *,
.csh-post *::before,
.csh-post *::after {
	box-sizing: inherit;
}

.csh-post .csh-post__layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 1.5rem;
}

/* Featured image: first after the site header, 16:9, cropped (never stretched). */
.csh-post .csh-post__media {
	margin: 0;
}

.csh-post .csh-post__image {
	display: block;
	width: 100%;
	max-width: none;
	height: auto;
	aspect-ratio: 16 / 9;
	margin: 0;
	object-fit: cover;
	background: var(--csh-color-primary-soft);
	border: 0;
	border-radius: 0.75rem;
	box-shadow: none;
}

.csh-post .csh-post__caption {
	margin: 0.5rem 0 0;
	color: var(--csh-color-text);
	font-size: 0.8125rem;
	line-height: 1.5;
}

/* Header below the image: category, H1, excerpt, meta, sharing. */
.csh-post .csh-post__header {
	display: grid;
	justify-items: start;
	gap: 0.875rem;
	min-width: 0;
}

.csh-post .csh-post__category,
.csh-post .csh-post__category:visited,
.csh-post .csh-post__category:focus {
	display: inline-block;
	padding: 0.3125rem 0.75rem;
	color: var(--csh-color-accent-text);
	background: var(--csh-color-accent-soft);
	border-radius: 999px;
	font-size: 0.8125rem;
	font-weight: 600;
	line-height: 1.3;
	text-decoration: none;
}

.csh-post .csh-post__category:hover {
	color: var(--csh-color-accent-text);
	text-decoration: underline;
}

.csh-post .csh-post__title {
	margin: 0;
	color: var(--csh-color-heading);
	font-size: 1.75rem;
	font-size: clamp(1.75rem, 1.25rem + 1.6vw, 2.5rem);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.015em;
	text-transform: none;
	overflow-wrap: break-word;
}

.csh-post .csh-post__excerpt {
	max-width: 48rem;
	margin: 0;
	color: var(--csh-color-text);
	font-size: 1.0625rem;
	line-height: 1.6;
}

.csh-post .csh-post__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 1.25rem;
	color: var(--csh-color-text);
	font-size: 0.875rem;
	line-height: 1.4;
}

.csh-post .csh-post__author {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	color: var(--csh-color-heading);
	font-weight: 600;
}

.csh-post .csh-post__avatar {
	display: block;
	width: 2rem;
	height: 2rem;
	margin: 0;
	border-radius: 50%;
}

.csh-post .csh-post__meta-item {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
}

.csh-post .csh-post__meta-icon {
	width: 1rem;
	height: 1rem;
	color: var(--csh-color-accent-text);
}

/* Sharing: icon links (and "Copy link" where supported), 40px targets. */
.csh-post .csh-post__share {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 0.75rem;
	padding-top: 0.875rem;
	width: 100%;
	border-top: 1px solid var(--csh-color-border);
}

.csh-post .csh-post__share-label {
	color: var(--csh-color-heading);
	font-size: 0.875rem;
	font-weight: 600;
}

.csh-post .csh-post__share-list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.csh-post .csh-post__share-item {
	margin: 0;
	padding: 0;
}

.csh-post .csh-post__share-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	margin: 0;
	padding: 0;
	border-radius: 50%;
	font: inherit;
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--csh-transition), color var(--csh-transition), border-color var(--csh-transition);
}

/* Colours repeat on :visited/:focus to override theme/Kit link and button states. */
.csh-post .csh-post__share-link,
.csh-post .csh-post__share-link:visited,
.csh-post .csh-post__share-link:focus {
	color: var(--csh-color-primary);
	background: var(--csh-color-surface);
	border: 1px solid var(--csh-color-border);
	box-shadow: none;
}

.csh-post .csh-post__share-link:hover {
	color: var(--csh-color-on-primary);
	background: var(--csh-color-primary);
	border-color: var(--csh-color-primary);
}

.csh-post .csh-post__share-link[hidden] {
	display: none;
}

.csh-post .csh-post__share-icon {
	width: 1.25rem;
	height: 1.25rem;
}

.csh-post .csh-post__share-status {
	color: var(--csh-color-heading);
	font-size: 0.875rem;
	font-weight: 600;
}

/* Sidebar: below the header on smaller screens, beside the content from 64rem. */
.csh-post .csh-post__sidebar {
	display: grid;
	align-content: start;
	gap: 1.25rem;
	min-width: 0;
}

.csh-post .csh-post__toc {
	padding: 0.5rem 1.25rem;
	background: var(--csh-color-surface-muted);
	border: 1px solid var(--csh-color-border);
	border-radius: var(--csh-radius);
}

.csh-post .csh-post__toc-details {
	margin: 0;
}

/* The whole row toggles the list (native <details>, no JS). */
.csh-post .csh-post__toc-summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	min-height: 2.75rem;
	color: var(--csh-color-heading);
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.3;
	list-style: none;
	cursor: pointer;
}

.csh-post .csh-post__toc-summary::-webkit-details-marker {
	display: none;
}

.csh-post .csh-post__toc-icon {
	width: 1.125rem;
	height: 1.125rem;
	transition: transform var(--csh-transition);
}

.csh-post .csh-post__toc-details[open] .csh-post__toc-icon {
	transform: rotate(180deg);
}

.csh-post .csh-post__toc-list,
.csh-post .csh-post__toc-sublist {
	margin: 0;
	padding: 0;
	list-style: none;
}

.csh-post .csh-post__toc-list {
	padding-bottom: 0.75rem;
	border-top: 1px solid var(--csh-color-border);
}

.csh-post .csh-post__toc-sublist {
	padding-left: 0.875rem;
}

.csh-post .csh-post__toc-item {
	margin: 0;
	padding: 0;
}

.csh-post .csh-post__toc-link,
.csh-post .csh-post__toc-link:visited,
.csh-post .csh-post__toc-link:focus {
	display: block;
	padding: 0.4375rem 0 0.4375rem 0.75rem;
	color: var(--csh-color-heading);
	border-left: 2px solid transparent;
	font-size: 0.9375rem;
	font-weight: 500;
	line-height: 1.4;
	text-decoration: none;
}

.csh-post .csh-post__toc-link:hover {
	color: var(--csh-color-primary);
	border-left-color: var(--csh-color-accent);
	text-decoration: underline;
}

.csh-post .csh-post__toc-link--sub,
.csh-post .csh-post__toc-link--sub:visited {
	color: var(--csh-color-text);
	font-size: 0.875rem;
}

/* Counselling card: navy, white text, orange button. */
.csh-post .csh-post__card {
	padding: 1.5rem;
	color: var(--csh-color-on-overlay-muted);
	background: var(--csh-color-overlay);
	border-radius: var(--csh-radius);
}

.csh-post .csh-post__card-title {
	margin: 0;
	color: var(--csh-color-on-primary);
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: normal;
	text-transform: none;
}

.csh-post .csh-post__card-text {
	margin: 0.625rem 0 0;
	color: var(--csh-color-on-overlay-muted);
	font-size: 0.9375rem;
	line-height: 1.6;
}

.csh-post .csh-post__button,
.csh-post .csh-post__button:visited,
.csh-post .csh-post__button:focus {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	min-height: 2.75rem;
	margin-top: 1.125rem;
	padding: 0.625rem 1.25rem;
	color: var(--csh-color-on-accent);
	background: var(--csh-color-accent);
	border-radius: var(--csh-radius-control);
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	transition: background-color var(--csh-transition);
}

.csh-post .csh-post__button:hover {
	color: var(--csh-color-on-accent);
	background: var(--csh-color-accent-dark);
}

.csh-post .csh-post__button-icon {
	width: 1rem;
	height: 1rem;
}

/*
 * Article content from the editor (blocks, lists, quotes, tables, media).
 * Readable measure (about 760px); nothing may overflow the column.
 */
.csh-post .csh-post__content {
	min-width: 0;
	max-width: 47.5rem;
	color: var(--csh-color-text);
	font-size: 1.0625rem;
	line-height: 1.75;
	overflow-wrap: break-word;
}

.csh-post .csh-post__content > * {
	margin-top: 0;
	margin-bottom: 1.25rem;
}

.csh-post .csh-post__content > :last-child {
	margin-bottom: 0;
}

.csh-post .csh-post__content h2,
.csh-post .csh-post__content h3,
.csh-post .csh-post__content h4 {
	color: var(--csh-color-heading);
	font-weight: 700;
	letter-spacing: normal;
	text-transform: none;
	scroll-margin-top: calc(var(--wp-admin--admin-bar--height, 0px) + 1.25rem); /* Room above a heading reached from the table of contents. */
}

.csh-post .csh-post__content h2 {
	margin: 2.25rem 0 0.875rem;
	font-size: 1.5rem;
	line-height: 1.3;
}

.csh-post .csh-post__content h3 {
	margin: 1.75rem 0 0.75rem;
	font-size: 1.25rem;
	line-height: 1.35;
}

.csh-post .csh-post__content h4 {
	margin: 1.5rem 0 0.625rem;
	font-size: 1.0625rem;
	line-height: 1.4;
}

.csh-post .csh-post__content a,
.csh-post .csh-post__content a:visited {
	color: var(--csh-color-primary);
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

.csh-post .csh-post__content a:hover {
	color: var(--csh-color-accent-text);
}

.csh-post .csh-post__content ul,
.csh-post .csh-post__content ol {
	padding-left: 1.5rem;
}

.csh-post .csh-post__content li {
	margin: 0 0 0.5rem;
}

.csh-post .csh-post__content li::marker {
	color: var(--csh-color-accent-text);
}

.csh-post .csh-post__content img,
.csh-post .csh-post__content video,
.csh-post .csh-post__content iframe {
	max-width: 100%;
}

.csh-post .csh-post__content img {
	height: auto;
	border-radius: var(--csh-radius-control);
}

.csh-post .csh-post__content figure {
	margin-inline: 0;
}

.csh-post .csh-post__content figcaption {
	margin-top: 0.5rem;
	color: var(--csh-color-text);
	font-size: 0.875rem;
	line-height: 1.5;
}

.csh-post .csh-post__content blockquote {
	margin-inline: 0;
	padding: 1rem 1.25rem;
	color: var(--csh-color-heading);
	background: var(--csh-color-surface-muted);
	border: 0;
	border-left: 4px solid var(--csh-color-accent);
	border-radius: 0 var(--csh-radius-control) var(--csh-radius-control) 0;
	font-style: normal;
}

.csh-post .csh-post__content blockquote > :last-child {
	margin-bottom: 0;
}

.csh-post .csh-post__content cite {
	display: block;
	margin-top: 0.5rem;
	color: var(--csh-color-text);
	font-size: 0.875rem;
	font-style: normal;
}

/* Tables scroll sideways inside their block (a focusable region, see csh_blog_prepare_content()). */
.csh-post .csh-post__content .wp-block-table {
	overflow-x: auto;
	border: 1px solid var(--csh-color-border);
	border-radius: var(--csh-radius-control);
}

.csh-post .csh-post__content table {
	width: 100%;
	margin: 0;
	border-collapse: collapse;
	font-size: 0.9375rem;
	line-height: 1.5;
}

.csh-post .csh-post__content .wp-block-table table {
	min-width: 32rem;
}

/* Replaces the block library's heavy rule under the header row. */
.csh-post .csh-post__content .wp-block-table thead {
	border-bottom: 0;
}

.csh-post .csh-post__content .wp-block-table figcaption {
	margin: 0;
	padding: 0.625rem 0.875rem;
	border-top: 1px solid var(--csh-color-border);
	font-style: normal;
}

.csh-post .csh-post__content th,
.csh-post .csh-post__content td {
	padding: 0.625rem 0.875rem;
	text-align: left;
	vertical-align: top;
	border: 0;
	border-bottom: 1px solid var(--csh-color-border);
}

.csh-post .csh-post__content th,
.csh-post .csh-post__content thead td {
	color: var(--csh-color-heading);
	background: var(--csh-color-primary-soft);
	font-weight: 700;
}

.csh-post .csh-post__content tr:last-child td {
	border-bottom: 0;
}

.csh-post .csh-post__content hr {
	margin-block: 2rem;
	border: 0;
	border-top: 1px solid var(--csh-color-border);
}

/* Callouts: Group blocks with a background colour, and Pullquote. */
.csh-post .csh-post__content .wp-block-group.has-background,
.csh-post .csh-post__content .wp-block-pullquote {
	padding: 1.25rem 1.5rem;
	border-radius: var(--csh-radius-control);
}

.csh-post .csh-post__content code {
	padding: 0.125rem 0.375rem;
	background: var(--csh-color-surface-muted);
	border-radius: 0.25rem;
	font-size: 0.9em;
}

/* Related articles (cards from sections/blog-card.php) and the closing CTA. */
.csh-post .csh-post__related {
	margin-top: 3rem;
	padding-top: 2.5rem;
	border-top: 1px solid var(--csh-color-border);
}

.csh-post .csh-post__section-title {
	margin: 0 0 1.25rem;
	color: var(--csh-color-heading);
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: normal;
	text-transform: none;
}

.csh-post .csh-post__related-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 1.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.csh-post .csh-post__related-item {
	margin: 0;
	padding: 0;
}

.csh-post .csh-post__cta {
	display: grid;
	gap: 0.5rem;
	margin-top: 3rem;
	padding: 1.75rem 1.5rem;
	background: linear-gradient(135deg, var(--csh-color-primary-soft) 0%, var(--csh-color-surface-muted) 65%, var(--csh-color-accent-soft) 100%);
	border: 1px solid var(--csh-color-border);
	border-radius: var(--csh-radius);
}

.csh-post .csh-post__cta-title {
	margin: 0;
	color: var(--csh-color-heading);
	font-size: 1.375rem;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: normal;
	text-transform: none;
	overflow-wrap: break-word;
}

.csh-post .csh-post__cta-description {
	max-width: 40rem;
	margin: 0.5rem 0 0;
	color: var(--csh-color-text);
	font-size: 1rem;
	line-height: 1.6;
}

.csh-post .csh-post__button--large,
.csh-post .csh-post__button--large:visited,
.csh-post .csh-post__button--large:focus {
	justify-self: start;
	margin-top: 0.5rem;
	padding-inline: 1.5rem;
}

/* Focus */
.csh-post .csh-post__category:focus-visible,
.csh-post .csh-post__share-link:focus-visible,
.csh-post .csh-post__toc-summary:focus-visible,
.csh-post .csh-post__toc-link:focus-visible,
.csh-post .csh-post__button:focus-visible,
.csh-post .csh-post__content a:focus-visible,
.csh-post .csh-post__content .wp-block-table:focus-visible {
	outline: 2px solid var(--csh-color-primary);
	outline-offset: 2px;
}

.csh-post .csh-post__card .csh-post__button:focus-visible {
	outline-color: var(--csh-color-on-primary);
}

@media (min-width: 36rem) {
	.csh-post .csh-post__related-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 48rem) {
	.csh-post {
		padding-top: 2rem;
	}

	.csh-post .csh-post__cta {
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: center;
		gap: 2rem;
		padding: 2rem 2.5rem;
	}

	.csh-post .csh-post__button--large {
		margin-top: 0;
	}
}

/* Desktop: content (about 70%) and sidebar side by side. The sidebar spans the image, header and content rows. */
@media (min-width: 64rem) {
	.csh-post .csh-post__layout {
		grid-template-columns: minmax(0, 7fr) minmax(17rem, 3fr);
		grid-template-rows: auto auto 1fr;
		gap: 1.75rem 3rem;
	}

	.csh-post .csh-post__media,
	.csh-post .csh-post__header,
	.csh-post .csh-post__content {
		grid-column: 1;
	}

	.csh-post .csh-post__sidebar {
		grid-column: 2;
		grid-row: 1 / 4;
	}

	/* No table of contents and no card: the article uses the full width. */
	.csh-post .csh-post__layout--full {
		grid-template-columns: minmax(0, 1fr);
	}

	.csh-post .csh-post__related-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (prefers-reduced-motion: reduce) {
	.csh-post .csh-post__toc-icon {
		transition: none;
	}
}

/* ==========================================================================
   Header: site-wide (includes/header.php, sections/header.php)
   Drawer layout below 68.75rem (1100px), inline layout from 68.75rem.
   header.js detects the layout from the menu button, so the breakpoint
   lives only here. If many more top-level menu items are added, raise it.
   ========================================================================== */

:root {
	--csh-drawer-duration: 250ms;
}

.csh-scroll-lock {
	overflow: hidden;
}

.csh-header {
	position: relative;
	z-index: 100;
	box-sizing: border-box;
	color: var(--csh-color-heading);
	background: var(--csh-color-surface);
	border-bottom: 1px solid var(--csh-color-border);
	box-shadow: 0 1px 3px rgba(27, 42, 74, 0.04);
	font-size: 1rem;
	line-height: 1.4;
}

.csh-header.csh-header--open {
	z-index: 99990; /* Above page content while the drawer is open; below the WP admin bar (99999). */
}

/* Explicit (not `inherit`): <summary> inherits through the <details> shadow slot, which is content-box. */
.csh-header *,
.csh-header *::before,
.csh-header *::after {
	box-sizing: border-box;
}

.csh-header .csh-header__skip-link {
	position: absolute;
	top: 0.5rem;
	left: 0.5rem;
	z-index: 2;
	padding: 0.75rem 1rem;
	color: var(--csh-color-on-primary);
	background: var(--csh-color-primary);
	border-radius: var(--csh-radius-control);
	font-weight: 600;
	text-decoration: none;
}

.csh-header .csh-header__skip-link:not(:focus) {
	width: 1px;
	height: 1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
}

/* Width and side gutters come from .csh-container (same element). */
.csh-header .csh-header__inner {
	display: flex;
	align-items: center;
	gap: 1rem;
	min-height: 4rem;
	padding-block: 0.625rem;
}

/* Logo */
.csh-header .csh-header__logo {
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	margin-right: auto;
	text-decoration: none;
}

.csh-header .csh-header__logo-img {
	display: block;
	width: auto;
	height: auto;
	max-width: 11rem;
	max-height: 2.5rem;
}

.csh-header .csh-header__logo-text {
	color: var(--csh-color-primary);
	font-size: 1.25rem;
	font-weight: 700;
	letter-spacing: -0.01em;
}

/* Icon buttons: menu, close, search */
.csh-header .csh-header__mobile-toggle,
.csh-header .csh-header__mobile-close,
.csh-header .csh-header__search-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	min-width: 2.75rem;
	min-height: 2.75rem;
	margin: 0;
	padding: 0.5rem;
	border-radius: var(--csh-radius-control);
	font: inherit;
	font-weight: 600;
	line-height: 1.2;
	text-transform: none;
	cursor: pointer;
	transition: background-color var(--csh-transition), color var(--csh-transition);
}

.csh-header .csh-header__mobile-toggle,
.csh-header .csh-header__mobile-toggle:focus,
.csh-header .csh-header__mobile-close,
.csh-header .csh-header__mobile-close:focus,
.csh-header .csh-header__search-toggle {
	color: var(--csh-color-heading);
	background: transparent;
	border: 1px solid transparent;
	box-shadow: none;
}

.csh-header .csh-header__mobile-toggle:hover,
.csh-header .csh-header__mobile-close:hover,
.csh-header .csh-header__search-toggle:hover,
.csh-header .csh-header__search[open] .csh-header__search-toggle {
	color: var(--csh-color-primary);
	background: var(--csh-color-primary-soft);
}

/* Drawer (below the desktop breakpoint) */
.csh-header .csh-header__mobile-panel {
	position: fixed;
	top: var(--wp-admin--admin-bar--height, 0px);
	right: 0;
	bottom: 0;
	z-index: 2;
	display: flex;
	flex-direction: column;
	width: min(22rem, 100%);
	padding: 0 1.25rem 1.5rem;
	overflow-y: auto;
	overscroll-behavior: contain;
	background: var(--csh-color-surface);
	box-shadow: -12px 0 32px rgba(27, 42, 74, 0.12);
	transform: translateX(100%);
	visibility: hidden;
	transition: transform var(--csh-drawer-duration) ease, visibility 0s linear var(--csh-drawer-duration);
}

.csh-header--open .csh-header__mobile-panel {
	transform: none;
	visibility: visible;
	transition: transform var(--csh-drawer-duration) ease;
}

.csh-header .csh-header__backdrop {
	position: fixed;
	inset: var(--wp-admin--admin-bar--height, 0px) 0 0;
	z-index: 1;
	background: rgba(27, 42, 74, 0.45);
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--csh-drawer-duration) ease, visibility 0s linear var(--csh-drawer-duration);
}

.csh-header--open .csh-header__backdrop {
	opacity: 1;
	visibility: visible;
	transition: opacity var(--csh-drawer-duration) ease;
}

.csh-header .csh-header__mobile-bar {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: space-between;
	min-height: 4rem;
	margin: 0 -0.5rem 0.5rem 0;
	border-bottom: 1px solid var(--csh-color-border);
}

.csh-header .csh-header__mobile-title {
	font-size: 1.0625rem;
	font-weight: 700;
}

/* Menu (drawer layout) */
.csh-header .csh-header__menu {
	margin: 0;
	padding: 0;
	list-style: none;
}

.csh-header .csh-header__menu-item {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	margin: 0;
	padding: 0;
	border-bottom: 1px solid var(--csh-color-border);
}

.csh-header .csh-header__menu-link,
.csh-header .csh-header__menu-link:visited,
.csh-header .csh-header__menu-link:focus {
	display: block;
	padding: 0.875rem 0;
	color: var(--csh-color-heading);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.3;
	text-decoration: none;
}

.csh-header .csh-header__menu-link:hover,
.csh-header .csh-header__menu-link[aria-current="page"] {
	color: var(--csh-color-primary);
}

.csh-header .csh-header__submenu-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	margin: 0;
	padding: 0;
	border-radius: var(--csh-radius-control);
	text-transform: none;
	cursor: pointer;
}

.csh-header .csh-header__submenu-toggle,
.csh-header .csh-header__submenu-toggle:focus {
	color: var(--csh-color-heading);
	background: transparent;
	border: 0;
	box-shadow: none;
}

.csh-header .csh-header__submenu-toggle:hover {
	color: var(--csh-color-primary);
	background: var(--csh-color-primary-soft);
}

.csh-header .csh-header__submenu-icon {
	width: 1rem;
	height: 1rem;
	transition: transform var(--csh-transition);
}

.csh-header .csh-header__icon {
	width: 1.5rem;
	height: 1.5rem;
}

.csh-header .csh-header__search-toggle .csh-header__icon {
	width: 1.25rem;
	height: 1.25rem;
}

.csh-header .csh-header__submenu-toggle[aria-expanded="true"] .csh-header__submenu-icon {
	transform: rotate(180deg);
}

.csh-header .csh-header__submenu {
	display: none;
	grid-column: 1 / -1;
	margin: 0 0 0.75rem;
	padding: 0 0 0 1rem;
	list-style: none;
}

.csh-header .csh-header__submenu-toggle[aria-expanded="true"] + .csh-header__submenu,
.csh-header .csh-header__submenu .csh-header__submenu {
	display: block;
}

.csh-header .csh-header__submenu .csh-header__menu-item {
	display: block;
	border: 0;
}

.csh-header .csh-header__submenu .csh-header__menu-link {
	padding: 0.5rem 0;
	color: var(--csh-color-text);
	font-size: 0.9375rem;
	font-weight: 500;
}

.csh-header .csh-header__submenu .csh-header__menu-link:hover,
.csh-header .csh-header__submenu .csh-header__menu-link[aria-current="page"] {
	color: var(--csh-color-primary);
}

.csh-header .csh-header__notice {
	margin: 0.75rem 0;
	font-size: 0.875rem;
}

.csh-header .csh-header__notice a {
	color: var(--csh-color-primary);
	text-decoration: underline;
}

/* Actions: search + CTA */
.csh-header .csh-header__actions {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	margin-top: 1.25rem;
}

.csh-header .csh-header__search {
	position: relative;
}

.csh-header .csh-header__search-toggle {
	justify-content: flex-start;
	width: 100%;
	padding: 0.5rem 0.875rem;
	border-color: var(--csh-color-border);
	list-style: none;
}

.csh-header .csh-header__search-toggle::-webkit-details-marker {
	display: none;
}

.csh-header .csh-header__search-form {
	display: flex;
	gap: 0.5rem;
	margin: 0.5rem 0 0;
}

.csh-header .csh-header__search-input {
	flex: 1;
	min-width: 0;
	min-height: 2.75rem;
	margin: 0;
	padding: 0.5rem 0.875rem;
	color: var(--csh-color-heading);
	background: var(--csh-color-surface);
	border: 1px solid var(--csh-color-border-strong);
	border-radius: var(--csh-radius-control);
	font: inherit;
	font-size: 1rem; /* ≥16px avoids iOS zoom on focus. */
}

.csh-header .csh-header__search-input:focus {
	border-color: var(--csh-color-primary);
	outline: 2px solid var(--csh-color-primary);
	outline-offset: 1px;
}

.csh-header .csh-header__search-submit {
	min-height: 2.75rem;
	margin: 0;
	padding: 0.5rem 1rem;
	border-radius: var(--csh-radius-control);
	font: inherit;
	font-size: 0.9375rem;
	font-weight: 600;
	text-transform: none;
	cursor: pointer;
}

.csh-header .csh-header__search-submit,
.csh-header .csh-header__search-submit:focus {
	color: var(--csh-color-on-primary);
	background: var(--csh-color-primary);
	border: 1px solid var(--csh-color-primary);
}

.csh-header .csh-header__search-submit:hover {
	color: var(--csh-color-on-primary);
	background: var(--csh-color-primary-dark);
	border-color: var(--csh-color-primary-dark);
}

.csh-header .csh-header__cta,
.csh-header .csh-header__cta:visited,
.csh-header .csh-header__cta:focus {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 2.75rem;
	padding: 0.625rem 1.25rem;
	color: var(--csh-color-on-accent);
	background: var(--csh-color-accent);
	border-radius: var(--csh-radius-control);
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color var(--csh-transition);
}

.csh-header .csh-header__cta:hover {
	color: var(--csh-color-on-accent);
	background: var(--csh-color-accent-dark);
}

/* Focus */
.csh-header a:focus-visible,
.csh-header button:focus-visible,
.csh-header summary:focus-visible {
	outline: 2px solid var(--csh-color-primary);
	outline-offset: 2px;
}

/* No JavaScript: the drawer can't open, so show the menu inline below the logo. */
@media (scripting: none) {
	.csh-header .csh-header__inner {
		flex-wrap: wrap;
	}

	.csh-header .csh-header__mobile-toggle,
	.csh-header .csh-header__mobile-bar,
	.csh-header .csh-header__backdrop,
	.csh-header .csh-header__submenu-toggle {
		display: none;
	}

	.csh-header .csh-header__mobile-panel {
		position: static;
		flex-basis: 100%;
		width: 100%;
		padding: 0 0 1rem;
		overflow: visible;
		background: none;
		box-shadow: none;
		transform: none;
		visibility: visible;
	}

	.csh-header .csh-header__submenu {
		display: block;
	}
}

/* Desktop: inline layout */
@media (min-width: 68.75rem) {
	.csh-header .csh-header__inner {
		flex-wrap: nowrap;
		gap: 2rem;
		min-height: 4.75rem;
	}

	.csh-header .csh-header__logo {
		margin-right: 0;
	}

	.csh-header .csh-header__logo-img {
		max-width: 12.5rem;
		max-height: 2.75rem;
	}

	.csh-header .csh-header__mobile-toggle,
	.csh-header .csh-header__mobile-bar,
	.csh-header .csh-header__backdrop {
		display: none;
	}

	.csh-header .csh-header__mobile-panel {
		position: static;
		display: flex;
		flex: 1;
		flex-direction: row;
		align-items: center;
		gap: 1.5rem;
		width: auto;
		padding: 0;
		overflow: visible;
		background: none;
		box-shadow: none;
		transform: none;
		visibility: visible;
		transition: none;
	}

	.csh-header .csh-header__nav {
		flex: 1;
		min-width: 0;
	}

	.csh-header .csh-header__menu {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 0.25rem;
	}

	.csh-header .csh-header__menu > .csh-header__menu-item {
		position: relative;
		display: flex;
		align-items: center;
		border: 0;
	}

	.csh-header .csh-header__menu-link,
	.csh-header .csh-header__menu-link:visited,
	.csh-header .csh-header__menu-link:focus {
		padding: 0.5rem 0.75rem;
		font-size: 0.9375rem;
		font-weight: 500;
		white-space: nowrap;
		border-radius: 0.5rem;
	}

	.csh-header .csh-header__submenu-toggle {
		width: 1.75rem;
		height: 2.25rem;
		margin-left: -0.625rem;
	}

	.csh-header .csh-header__submenu {
		position: absolute;
		top: 100%;
		left: 0;
		z-index: 10;
		display: none;
		min-width: 15rem;
		margin: 0;
		padding: 0.5rem;
		background: var(--csh-color-surface);
		border: 1px solid var(--csh-color-border);
		border-radius: var(--csh-radius);
		box-shadow: 0 16px 40px rgba(27, 42, 74, 0.12);
	}

	.csh-header .csh-header__menu-item:hover > .csh-header__submenu,
	.csh-header:not([data-csh-ready]) .csh-header__menu-item:focus-within > .csh-header__submenu {
		display: block;
	}

	.csh-header .csh-header__submenu .csh-header__menu-link,
	.csh-header .csh-header__submenu .csh-header__menu-link:visited,
	.csh-header .csh-header__submenu .csh-header__menu-link:focus {
		display: block;
		padding: 0.5rem 0.75rem;
		white-space: normal;
	}

	.csh-header .csh-header__submenu .csh-header__menu-link:hover {
		background: var(--csh-color-primary-soft);
	}

	.csh-header .csh-header__submenu .csh-header__submenu {
		position: static;
		display: block;
		min-width: 0;
		padding: 0 0 0 0.75rem;
		background: none;
		border: 0;
		box-shadow: none;
	}

	.csh-header .csh-header__actions {
		flex-direction: row;
		flex-shrink: 0;
		align-items: center;
		margin: 0;
	}

	.csh-header .csh-header__search-toggle {
		width: auto;
		padding: 0.5rem;
		border-color: transparent;
	}

	.csh-header .csh-header__search-label {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		padding: 0;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
		border: 0;
	}

	.csh-header .csh-header__search-form {
		position: absolute;
		top: calc(100% + 0.75rem);
		right: 0;
		z-index: 10;
		width: 20rem;
		margin: 0;
		padding: 0.75rem;
		background: var(--csh-color-surface);
		border: 1px solid var(--csh-color-border);
		border-radius: var(--csh-radius);
		box-shadow: 0 16px 40px rgba(27, 42, 74, 0.12);
	}
}

@media (prefers-reduced-motion: reduce) {
	:root {
		--csh-drawer-duration: 0s;
	}
}