/**
 * Gender and Women in Civic Leadership — design-system components.
 * Tokens live in theme.json; this file styles the reusable patterns.
 */

:root {
	--cl-emerald: var(--wp--preset--color--emerald);
	--cl-jade: var(--wp--preset--color--jade);
	--cl-gold: var(--wp--preset--color--gold);
	--cl-citrine: var(--wp--preset--color--citrine);
	--cl-sapphire: var(--wp--preset--color--sapphire);
	--cl-amethyst: var(--wp--preset--color--amethyst);
	--cl-light-purple: var(--wp--preset--color--light-purple);
	--cl-ink: var(--wp--preset--color--ink);
	--cl-serif: var(--wp--preset--font-family--cormorant-garamond);
	--cl-sans: var(--wp--preset--font-family--gibson);
	--cl-gotham: var(--wp--preset--font-family--gotham);
	--cl-hairline: #dbdbd9;
}

/* ---------------------------------------------------------------------------
 * Root layout — no gap between header / main / footer template parts
 * ------------------------------------------------------------------------- */

.wp-site-blocks > * {
	margin-block-start: 0;
}

/* ---------------------------------------------------------------------------
 * Typography helpers
 * ------------------------------------------------------------------------- */

/* Two-tone display headings: bold + light pairing, uppercase, e.g.
 * <strong>Gender</strong> and <strong>Women</strong> in Civic Leadership */
.cl-display {
	font-family: var(--cl-sans);
	font-weight: 300;
	text-transform: uppercase;
	line-height: 0.92;
	letter-spacing: 0;
}
.cl-display strong,
.cl-display b {
	font-weight: 700;
}
@media (max-width: 781px) {
	/* Fluid presets bottom out too large for "LEADERSHIP" on small screens. */
	.cl-display {
		font-size: clamp(2.2rem, 10vw, 3.5rem) !important;
	}
}

/* Caps section heading — "SEARCH THE ARCHIVE" */
.is-style-section-caps,
.cl-section-heading {
	font-family: var(--cl-sans);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.01em;
	color: var(--cl-emerald);
}

/* Serif italic heading — case-study titles in list rows */
.is-style-serif-italic {
	font-family: var(--cl-serif);
	font-style: italic;
	font-weight: 500;
	color: var(--cl-jade);
	line-height: 1.15;
}

/* Serif italic lede paragraph — intro text on most pages */
.cl-lede {
	font-family: var(--cl-serif);
	font-style: italic;
	font-weight: 500;
	font-size: clamp(1.5rem, 2.5vw, 2.35rem);
	line-height: 1.3;
	color: var(--cl-ink);
}

/* Small-caps micro label — "THEME NAME" / "AUTHOR NAME" */
.cl-tag {
	font-family: var(--cl-sans);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--cl-gold);
}
.cl-tag--ink { color: var(--cl-ink); }
.cl-tag a { color: inherit; text-decoration: none; }
.cl-tag a:hover { text-decoration: underline; color: inherit; }

/* ---------------------------------------------------------------------------
 * Arrow links and arrow buttons
 * ------------------------------------------------------------------------- */

.cl-arrow-link {
	display: inline-flex;
	align-items: center;
	gap: 0.9rem;
	font-family: var(--cl-sans);
	text-decoration: none;
	font-size: 1.125rem;
}
.cl-arrow-link::after,
.is-style-arrow .wp-block-button__link::after {
	content: "";
	display: inline-block;
	width: 4.2em;
	height: 0.55em;
	background-color: currentColor;
	-webkit-mask: url("../img/arrow-long.svg") no-repeat right center / contain;
	mask: url("../img/arrow-long.svg") no-repeat right center / contain;
	transition: transform var(--wp--custom--transition, 180ms ease);
}
.cl-arrow-link:hover::after,
.is-style-arrow .wp-block-button__link:hover::after {
	transform: translateX(0.35em);
}

/* Flat arrow CTA bar — colour comes from the button's background setting */
.is-style-arrow .wp-block-button__link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 2.5rem;
	min-width: min(28rem, 100%);
	border-radius: 0;
	text-align: left;
}

/* In a multi-button arrow row, the buttons split the row into equal columns
 * so a short label still fills its third — no trailing gaps (matches Figma).
 * Scoped with :has() so lone arrow buttons keep their natural width. */
.wp-block-buttons:has(.wp-block-button:nth-child(2)) > .wp-block-button.is-style-arrow {
	flex: 1 1 0;
}
.wp-block-buttons:has(.wp-block-button:nth-child(2)) .is-style-arrow .wp-block-button__link {
	width: 100%;
	min-width: 0;
}
@media (max-width: 781px) {
	/* Stack the equal-width arrow buttons on narrow screens. */
	.wp-block-buttons:has(.wp-block-button:nth-child(2)) > .wp-block-button.is-style-arrow {
		flex-basis: 100%;
	}
}

/* ---------------------------------------------------------------------------
 * Title band — green page header strip with two-tone gold heading
 * ------------------------------------------------------------------------- */

.cl-title-band {
	background: var(--cl-emerald);
	color: var(--cl-gold);
}
.cl-title-band h1,
.cl-title-band .cl-display {
	color: var(--cl-gold);
	margin: 0;
}

/* ---------------------------------------------------------------------------
 * Search band
 * ------------------------------------------------------------------------- */

.cl-search-form {
	display: flex;
	align-items: center;
	gap: 2rem;
}
.cl-search-field {
	flex: 1;
	display: flex;
	align-items: center;
	gap: 1rem;
	height: 4.3125rem; /* 69px */
	border: 2.2px solid var(--cl-ink);
	background: #fff;
	padding: 0 1.1rem;
}
.cl-search-field::before {
	content: "";
	flex: none;
	width: 1.95rem;
	height: 1.95rem;
	background-color: var(--cl-ink);
	-webkit-mask: url("../img/icon-search.svg") no-repeat center / contain;
	mask: url("../img/icon-search.svg") no-repeat center / contain;
}
.cl-search-field input[type="search"] {
	flex: 1;
	width: 100%;
	min-width: 0;
	border: 0;
	outline: 0;
	background: transparent;
	font-family: var(--cl-sans);
	font-size: 1.5rem;
	color: var(--cl-ink);
}
.cl-search-submit {
	display: inline-flex;
	align-items: center;
	gap: 0.9rem;
	border: 0;
	background: transparent;
	cursor: pointer;
	font-family: var(--cl-sans);
	font-size: 1.5rem;
	color: var(--cl-ink);
	padding: 0;
}
.cl-search-submit::after {
	content: "";
	width: 7.3rem;
	height: 0.92rem;
	background-color: currentColor;
	-webkit-mask: url("../img/arrow-long.svg") no-repeat right center / contain;
	mask: url("../img/arrow-long.svg") no-repeat right center / contain;
}
@media (max-width: 800px) {
	/* Search field spans the full width; the Search button drops below it. */
	.cl-search-form { flex-wrap: wrap; gap: 1rem; }
	.cl-search-field { flex-basis: 100%; }
	.cl-search-submit::after { width: 4rem; }
}

/* ---------------------------------------------------------------------------
 * Theme grid — six full-bleed colour tiles
 * ------------------------------------------------------------------------- */

.cl-theme-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0;
}
@media (max-width: 981px) { .cl-theme-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 601px) { .cl-theme-grid { grid-template-columns: 1fr; } }

.cl-tile {
	aspect-ratio: 576 / 491;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2.5rem;
	text-decoration: none;
	text-align: center;
	padding: 2rem;
	transition: filter var(--wp--custom--transition, 180ms ease);
}
.cl-tile:hover { filter: brightness(1.08); }
.cl-tile__icon {
	width: clamp(6rem, 12vw, 10.5rem);
	height: clamp(6rem, 12vw, 10.5rem);
	border-radius: 50%;
	border: 1.5px solid currentColor;
	display: flex;
	align-items: center;
	justify-content: center;
}
.cl-tile__icon img { width: 55%; height: 55%; object-fit: contain; }
/* Theme glyph, recoloured to the tile's text colour via CSS mask. */
.cl-tile__icon[style*="--cl-icon"]::before {
	content: "";
	width: 58%;
	height: 58%;
	background-color: currentColor;
	-webkit-mask: var(--cl-icon) no-repeat center / contain;
	mask: var(--cl-icon) no-repeat center / contain;
}
.cl-tile__label {
	font-family: var(--cl-sans);
	font-weight: 700;
	font-size: clamp(1.25rem, 1.8vw, 1.875rem);
	line-height: 1.2;
}
.cl-tile--light { color: #fff; }
.cl-tile--dark { color: var(--cl-ink); }

/* ---------------------------------------------------------------------------
 * Theme filter row — icon circles linking to /theme/<slug>/ (case archive)
 * ------------------------------------------------------------------------- */

.cl-theme-filters {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 1.5rem;
	justify-items: center;
}
.cl-theme-filter {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.6rem;
	text-decoration: none;
	text-align: center;
}
/* Each theme carries its tile colour as a custom property, used on
 * hover/focus and when the theme is the active archive. */
.cl-theme-filter--emotional-labour                  { --cl-theme-color: var(--cl-gold); }
.cl-theme-filter--social-reproduction-care          { --cl-theme-color: var(--cl-sapphire); }
.cl-theme-filter--gendered-accountability           { --cl-theme-color: var(--cl-amethyst); }
.cl-theme-filter--leadership-communication          { --cl-theme-color: var(--cl-jade); }
.cl-theme-filter--institutional-conflict-governance { --cl-theme-color: var(--cl-citrine); }
.cl-theme-filter--intersectionality-access          { --cl-theme-color: var(--cl-light-purple); }
.cl-theme-filter__icon {
	width: clamp(4.5rem, 7.6vw, 8.25rem);
	height: clamp(4.5rem, 7.6vw, 8.25rem);
	border-radius: 50%;
	background: #d8ddda;
	display: grid;
	place-items: center;
	transition: background-color var(--wp--custom--transition, 180ms ease),
		transform var(--wp--custom--transition, 180ms ease);
}
/* Theme glyph, recoloured via CSS mask (emerald at rest). */
.cl-theme-filter__icon[style*="--cl-icon"]::before {
	content: "";
	width: 56%;
	height: 56%;
	background-color: var(--cl-emerald);
	-webkit-mask: var(--cl-icon) no-repeat center / contain;
	mask: var(--cl-icon) no-repeat center / contain;
	transition: background-color var(--wp--custom--transition, 180ms ease);
}
.cl-theme-filter__label {
	font-family: var(--cl-sans);
	font-size: clamp(1rem, 1.2vw, 1rem);
	line-height: 1.25;
	color: var(--cl-emerald);
	transition: transform var(--wp--custom--transition, 180ms ease),
		opacity var(--wp--custom--transition, 180ms ease);
}
.cl-theme-filter:hover .cl-theme-filter__label,
.cl-theme-filter:focus-visible .cl-theme-filter__label {
	text-decoration: none;
	opacity: 0.8;
	transform: scale(1.1);
}
.cl-theme-filter.is-active .cl-theme-filter__label {
	font-weight: 700;
}
/* Filled circle on hover, focus, and for the active theme. */
.cl-theme-filter:hover .cl-theme-filter__icon,
.cl-theme-filter:focus-visible .cl-theme-filter__icon,
.cl-theme-filter.is-active .cl-theme-filter__icon {
	background: var(--cl-theme-color, var(--cl-hairline));
	transform: translateY(-0.2rem);
}
/* Glyph turns white once the circle is filled — except on the pale
 * citrine theme, where ink keeps contrast. */
.cl-theme-filter:hover .cl-theme-filter__icon::before,
.cl-theme-filter:focus-visible .cl-theme-filter__icon::before,
.cl-theme-filter.is-active .cl-theme-filter__icon::before {
	background-color: #fff;
}
.cl-theme-filter--institutional-conflict-governance:hover .cl-theme-filter__icon::before,
.cl-theme-filter--institutional-conflict-governance:focus-visible .cl-theme-filter__icon::before,
.cl-theme-filter--institutional-conflict-governance.is-active .cl-theme-filter__icon::before {
	background-color: var(--cl-ink);
}
@media (max-width: 981px) {
	.cl-theme-filters { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 2.5rem; }
}
@media (max-width: 601px) {
	.cl-theme-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------------------------------------------------------------------------
 * Promo cards (Changemaker / featured story)
 * ------------------------------------------------------------------------- */

.cl-promo {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	min-height: clamp(20rem, 37vw, 40.5rem);
	padding: 2.2rem;
	color: #fff;
	text-decoration: none;
	background-size: cover;
	background-position: center;
}
.cl-promo__title {
	font-family: var(--cl-sans);
	font-weight: 700;
	font-style: italic;
	font-size: clamp(1.4rem, 2vw, 2rem);
	line-height: 1.25;
	margin: 0;
}

/* ---------------------------------------------------------------------------
 * Profile cards (cohort / featured leadership profiles)
 * ------------------------------------------------------------------------- */

.cl-profiles {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: clamp(16rem, 22vw, 20.8rem);
	gap: 1.5rem;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	padding-bottom: 1rem;
}
.cl-profile-card {
	position: relative;
	scroll-snap-align: start;
	background: var(--wp--preset--color--mist);
	display: flex;
	flex-direction: column;
	padding-bottom: 2rem;
}
.cl-profile-card > * { padding-inline: 1.7rem; }
.cl-profile-card figure,
.cl-profile-card .wp-block-image {
	padding-inline: 0;
	margin: 0 0 1.5rem;
}
.cl-profile-card img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; display: block; }
.cl-profile-card__name {
	font-family: var(--cl-sans);
	font-weight: 700;
	text-transform: uppercase;
	font-size: 1.375rem;
	color: var(--cl-jade);
	margin: 0 0 0.4rem;
}
.cl-profile-card__role {
	font-family: var(--cl-serif);
	font-style: italic;
	font-size: 1.25rem;
	line-height: 1.25;
	color: var(--cl-ink);
	margin: 0 0 1.2rem;
}
.cl-profile-card__bio {
	font-family: var(--cl-serif);
	font-style: italic;
	font-size: 1.2rem;
	line-height: 1.4;
	margin: 0 0 1.6rem;
}
.cl-profile-card .cl-arrow-link { margin-top: auto; color: var(--cl-ink); }
/* Whole card is clickable: the Learn more link is stretched over it. */
.cl-profile-card .cl-arrow-link::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

/* Arrow controls (injected by carousel.js) flanking the profile scroller. */
.cl-carousel {
	position: relative;
}
.cl-carousel .cl-profiles {
	scrollbar-width: none;
}
.cl-carousel .cl-profiles::-webkit-scrollbar {
	display: none;
}
.cl-carousel__btn {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 3rem;
	height: 3rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 2px 12px rgba(4, 0, 0, 0.22);
	cursor: pointer;
	display: grid;
	place-items: center;
	z-index: 2;
	transition: background-color var(--wp--custom--transition, 180ms ease);
}
.cl-carousel__btn::before {
	content: "";
	width: 1.1rem;
	height: 1rem;
	background-color: var(--wp--preset--color--diamond);
	-webkit-mask: url("../img/arrow-short.svg") no-repeat center / contain;
	mask: url("../img/arrow-short.svg") no-repeat center / contain;
	transition: background-color var(--wp--custom--transition, 180ms ease);
}
.cl-carousel__btn--next::before {
	transform: scaleX(-1);
}
.cl-carousel__btn--prev { left: -1.5rem; }
.cl-carousel__btn--next { right: -1.5rem; }
.cl-carousel__btn:hover:not(:disabled),
.cl-carousel__btn:focus-visible:not(:disabled) {
	background: var(--cl-emerald);
}
.cl-carousel__btn:hover:not(:disabled)::before,
.cl-carousel__btn:focus-visible:not(:disabled)::before {
	background-color: #fff;
}
.cl-carousel__btn:disabled {
	opacity: 0.35;
	cursor: default;
}
.cl-carousel--static .cl-carousel__btn {
	display: none;
}
@media (max-width: 781px) {
	.cl-carousel__btn--prev { left: 0.25rem; }
	.cl-carousel__btn--next { right: 0.25rem; }
}

/* ---------------------------------------------------------------------------
 * Case-study list rows (query loop)
 * ------------------------------------------------------------------------- */

.cl-case-list .wp-block-post {
	border-top: 1px solid var(--cl-hairline);
	padding: 0;
}
.cl-case-list .wp-block-post:last-child { border-bottom: 1px solid var(--cl-hairline); }
.cl-case-row {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 6fr) auto;
	gap: 3rem;
	align-items: center;
	padding: 2.2rem 1.5rem;
	margin-inline: -1.5rem;
	transition: background-color var(--wp--custom--transition, 180ms ease);
}
@media (max-width: 781px) {
	.cl-case-row { grid-template-columns: 1fr; gap: 1rem; }
}
/* Whole-row click: the title link is stretched over the row. */
.cl-case-row .wp-block-post-title a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}
.cl-case-row:hover {
	background-color: var(--wp--preset--color--mist);
}
.cl-case-row .wp-block-post-title {
	font-family: var(--cl-serif);
	font-style: italic;
	font-weight: 500;
	font-size: 1.75rem;
	line-height: 1.15;
	margin: 0.35rem 0;
}
.cl-case-row .wp-block-post-title a {
	color: var(--cl-jade);
	text-decoration: none;
}
.cl-case-row:hover .wp-block-post-title a { text-decoration: underline; }
.cl-case-row .wp-block-post-excerpt {
	font-size: 1rem;
	line-height: 1.5;
	color: var(--cl-ink);
}
/* Keep the theme-term link clickable above the stretched row overlay. */
.cl-case-row .cl-tag a {
	position: relative;
	z-index: 2;
}
.cl-case-row__arrow {
	display: inline-block;
	width: 4.5rem;
	height: 0.6rem;
	overflow: hidden;
	color: transparent;
	background-color: var(--cl-gold);
	-webkit-mask: url("../img/arrow-long.svg") no-repeat right center / contain;
	mask: url("../img/arrow-long.svg") no-repeat right center / contain;
	transition: transform var(--wp--custom--transition, 180ms ease);
}
.cl-case-row:hover .cl-case-row__arrow { transform: translateX(0.35em); }

/* Desktop: line the summary up with the profile title. The row cells are
 * top-aligned and the summary is dropped by the height of the tag line that
 * sits above the title, so the summary's first line meets the title. The
 * arrow stays vertically centred. (Below 782px the row stacks into a single
 * column, so this only applies to the wide layout.) */
@media (min-width: 782px) {
	.cl-case-row { align-items: start; }
	.cl-case-row .cl-tag { display: block; line-height: 1.2; }
	.cl-case-row .wp-block-post-excerpt {
		/* tag cap line (0.8125rem × 1.2) + the title's top margin (0.35rem) */
		margin-top: calc(0.8125rem * 1.2 + 0.35rem);
	}
	.cl-case-row__arrow { align-self: center; }
}

/* Pagination — "← 1 2 3 4 →" */
.cl-pagination .wp-block-query-pagination-numbers,
.cl-pagination {
	font-family: var(--cl-sans);
	font-size: 1.25rem;
}
.cl-pagination .page-numbers {
	margin: 0 0.55rem;
	text-decoration: none;
	color: var(--cl-ink);
}
.cl-pagination .page-numbers.current { color: var(--cl-gold); font-weight: 700; }

/* ---------------------------------------------------------------------------
 * Hero title / subtitle / byline (content from front-page fields)
 * ------------------------------------------------------------------------- */

.cl-hero-subtitle {
	font-style: italic;
	font-weight: 500;
	font-size: 1.9rem;
	line-height: 1;
	color: #fff;
	/* Space above (gap from the title) and below (before the quote card). */
	margin: 1.5rem 0 2.5rem;
}
.cl-hero-byline {
	text-align: right;
	font-family: var(--cl-serif);
	font-style: italic;
	font-size: 1.1rem;
	line-height: 1.35;
	color: #fff;
}
.cl-hero-byline p { margin: 0; }
.cl-hero-byline a { color: #fff; }

/* ---------------------------------------------------------------------------
 * Gold quote card (hero) + inline pull quote
 * ------------------------------------------------------------------------- */

.is-style-quote-card {
	background: var(--cl-gold);
	color: #ffffff;
	padding: 3rem 3.4rem 3.4rem;
	margin: 0 0 -50px 0 !important;
	position: relative;
	max-width: 100%;
	box-sizing: border-box;
}
.is-style-quote-card p {
	font-family: var(--cl-serif);
	font-style: italic;
	font-size: clamp(1.4rem, 2.2vw, 2.25rem);
	line-height: 1.3;
	margin: 0;
	color: #ffffff;
}
.is-style-quote-card::before {
	content: "\201C";
	display: block;
	font-family: var(--cl-gotham);
	font-style: normal;
	font-weight: 700;
	font-size: 6rem;
	line-height: 0.6;
	color: #fff;
	margin-bottom: 1.2rem;
}

/* Auto-rotating hero quote carousel (built on the gold quote card). */
.cl-quote-carousel {
	width: min(46rem, 100%);
}
.cl-quote-carousel__viewport {
	display: grid;
}
.cl-quote-slide {
	grid-area: 1 / 1;
	margin: 0;
	border: 0;
	padding: 0;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.6s ease;
}
.cl-quote-slide.is-current {
	opacity: 1;
	visibility: visible;
}
.cl-quote-nav {
	display: flex;
	align-items: center;
	gap: 1.1rem;
	margin-top: 1.6rem;
}
.cl-quote-dots {
	display: flex;
	gap: 0.6rem;
}
.cl-quote-arrow {
	width: 1.7rem;
	height: 1rem;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
	display: inline-flex;
}
.cl-quote-arrow::before {
	content: "";
	width: 100%;
	height: 100%;
	background-color: rgba(255, 255, 255, 0.7);
	-webkit-mask: url("../img/arrow-short.svg") no-repeat center / contain;
	mask: url("../img/arrow-short.svg") no-repeat center / contain;
	transition: background-color 0.18s ease, transform 0.18s ease;
}
.cl-quote-arrow--next::before {
	transform: scaleX(-1);
}
.cl-quote-arrow:hover::before,
.cl-quote-arrow:focus-visible::before {
	background-color: #fff;
}
.cl-quote-arrow--prev:hover::before,
.cl-quote-arrow--prev:focus-visible::before {
	transform: translateX(-0.15rem);
}
.cl-quote-arrow--next:hover::before,
.cl-quote-arrow--next:focus-visible::before {
	transform: scaleX(-1) translateX(-0.15rem);
}
.cl-quote-dot {
	width: 0.7rem;
	height: 0.7rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.45);
	cursor: pointer;
	transition: background-color 0.18s ease, transform 0.18s ease;
}
.cl-quote-dot:hover {
	background: rgba(255, 255, 255, 0.75);
}
.cl-quote-dot.is-current {
	background: #fff;
	transform: scale(1.15);
}
@media (prefers-reduced-motion: reduce) {
	.cl-quote-slide { transition: none; }
}

.cl-pullquote {
	position: relative;
	padding-left: 5.5rem;
	padding-right: 5.5rem;
}
/* Matching jade quote marks: opening upper-left, closing lower-right. */
.cl-pullquote::before,
.cl-pullquote::after {
	position: absolute;
	font-family: var(--cl-serif);
	font-weight: 700;
	font-size: 5rem;
	line-height: 0.6;
	color: var(--cl-jade);
}
.cl-pullquote::before {
	content: "\201C";
	left: 0;
	top: 0.1em;
}
.cl-pullquote::after {
	content: "\201D";
	right: 0;
	bottom: 0;
}
.cl-pullquote p {
	font-family: var(--cl-serif);
	font-style: italic;
	font-size: clamp(1.3rem, 1.9vw, 1.75rem);
	line-height: 1.4;
	margin: 0;
}

/* ---------------------------------------------------------------------------
 * Numbered feature columns
 * ------------------------------------------------------------------------- */

.cl-numbered .cl-num {
	font-family: var(--cl-serif);
	font-style: italic;
	font-weight: 600;
	font-size: 3.4rem;
	line-height: 1;
	margin: 0 0 1.4rem;
}
.cl-numbered .wp-block-column {
	border-left: 1px solid var(--cl-hairline);
	padding-left: 2rem;
}
.cl-numbered .wp-block-column:first-child { border-left: 0; padding-left: 0; }
@media (max-width: 781px) {
	.cl-numbered .wp-block-column { border-left: 0; padding-left: 0; }
}
.cl-numbered h3 {
	font-family: var(--cl-serif);
	font-style: italic;
	font-weight: 600;
	font-size: 1.5rem;
	color: var(--cl-jade);
}

/* ---------------------------------------------------------------------------
 * Header
 * ------------------------------------------------------------------------- */

/* Only the header sticks. Targeting .wp-block-template-part unscoped also made
 * the footer sticky with its own z-index:100 context, which (being later in the
 * DOM) painted over the fixed mobile-menu overlay that lives in the header. */
.wp-block-template-part:has(.cl-header) {
	position: sticky;
	top: 0;
	z-index: 100;  
}

.cl-header {
	background: var(--cl-emerald);
	color: #fff;
	min-height: 6.5rem; /* 104px */
}
.cl-header a { color: #fff; text-decoration: none; }
.cl-header .cl-logo-lockup {
	font-family: var(--cl-sans);
	font-weight: 300;
	font-size: 1.54rem; /* 24.63px */
	line-height: 1.2;
	text-transform: uppercase;
	letter-spacing: 0;
}
.cl-header .cl-logo-lockup strong { font-weight: 700; }
.cl-header .wp-block-navigation__container { gap: 3.2rem; }
.cl-header .wp-block-navigation-item__content {
	font-family: var(--cl-sans);
	font-size: 1.15rem; /* 20px */
	font-weight: 400;
}
.cl-header .wp-block-navigation__submenu-container {
	background: var(--cl-emerald) !important;
	border: 0;
	border-radius: 0;
	padding: 0.5rem 0;
	min-width: 16rem;
}
.cl-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding: 0.7rem 1.2rem;
	border-left: 4px solid transparent;
}
.cl-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
	border-left-color: var(--cl-gold);
	background: rgba(255, 255, 255, 0.08);
}

.wp-block-navigation .wp-block-navigation__submenu-icon {
	margin-left: .5em;
}

.wp-block-navigation .has-child:not(.open-on-click):hover>.wp-block-navigation__submenu-container {
	min-width: 250px;
}

.wp-block-navigation:not(.has-background) .wp-block-navigation__submenu-container {
	border: 0px;
	padding-top: 10px;
	-webkit-box-shadow: 2px 2px 10px 0px rgba(0,0,0,0.39); 
	box-shadow: 2px 2px 10px 0px rgba(0,0,0,0.39);	
}

/* ---------------------------------------------------------------------------
 * Footer
 * ------------------------------------------------------------------------- */

.cl-footer {
	background: var(--cl-emerald);
	color: #fff;
	border-bottom: 12px solid var(--cl-gold);
}
.cl-footer a { color: #fff; text-decoration: none; }
.cl-footer a:hover { text-decoration: underline; }
/* Logos carry fixed pixel widths in the pattern; never let them exceed the
 * viewport on phones (the SSHRC lockup is 420px). */
.cl-footer img { max-width: 100%; height: auto; }
.cl-footer .cl-footer-mission {
	font-family: var(--cl-serif);
	font-style: italic;
	font-size: 1.375rem;
	line-height: 1.45;
	color: #fff;
}
.cl-footer .cl-footer-links {
	font-size: 1.0rem; /* 22px */
	line-height: 2;
}

/* ---------------------------------------------------------------------------
 * Case-study article helpers
 * ------------------------------------------------------------------------- */

.cl-meta-card {
	background: #fff;
	padding: 2rem;
	border-bottom: 0.875rem solid var(--cl-gold);
}
.cl-meta-card dd a { color: inherit; }
.cl-meta-card dt {
	font-family: var(--cl-sans);
	font-weight: 600;
	font-size: 0.8125rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--cl-ink);
	margin-top: 1.1rem;
}
.cl-meta-card dd {
	margin: 0.2rem 0 0;
	font-family: var(--cl-serif);
	font-style: italic;
	font-size: 1.25rem;
	color: var(--cl-jade);
}

/* Hero band on single case studies */
.cl-case-hero {
	background: var(--cl-emerald);
	color: #fff;
}
.cl-case-hero h1 {
	color: var(--cl-gold);
	text-transform: uppercase;
	font-weight: 700;
	font-size: clamp(2rem, 3.6vw, 3.75rem);
	line-height: 1.05;
}
.cl-case-hero .cl-subtitle {
	font-family: var(--cl-serif);
	font-style: italic;
	font-size: 1.5rem;
	color: #fff;
}

/* Floating person card(s) under the meta card in the case-study rail. */
.cl-person-cards {
	display: grid;
	gap: 3rem;
	margin-top: 3rem;
}
.cl-person-card {
	/* Solid equivalent of Figma's diamond-at-10%-over-white; stays readable
	 * when the card sits on the emerald band at narrow widths. */
	position: relative;
	background: #f0f0f1;
	padding: 2rem;
	display: flex;
	flex-direction: column;
	transition: background-color var(--wp--custom--transition, 180ms ease);
}
/* Only cards that actually link anywhere get the hover treatment. */
.cl-person-card:has(.cl-arrow-link):hover {
	background: color-mix(in srgb, var(--cl-emerald) 12%, #f0f0f1);
}
.cl-person-card figure {
	margin: 0 0 1.6rem;
}
.cl-person-card img {
	width: 100%;
	aspect-ratio: 479 / 406;
	object-fit: cover;
	display: block;
}
.cl-person-card__name {
	font-family: var(--cl-sans);
	font-weight: 600;
	text-transform: uppercase;
	font-size: 1.75rem;
	line-height: 0.95;
	color: var(--cl-emerald);
	margin: 0 0 0.4rem;
}
.cl-person-card__role {
	font-family: var(--cl-serif);
	font-style: italic;
	font-size: 1.375rem;
	line-height: 1.2;
	color: var(--cl-emerald);
	margin: 0 0 1.4rem;
}
.cl-person-card__bio {
	font-family: var(--cl-serif);
	font-style: italic;
	font-size: 1.3rem;
	line-height: 1.35;
	color: var(--cl-emerald);
	margin: 0 0 2.5rem;
}
.cl-person-card .cl-arrow-link {
	margin-top: auto;
	color: var(--cl-emerald);
}
/* Whole card is clickable: the Learn more link is stretched over it. */
.cl-person-card .cl-arrow-link::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

/* On wide screens the rail floats out of the emerald band over the white body
 * area (per Figma), and the body copy shifts left of centre to clear it.
 * Figma geometry at 1728: body 961px starting at the wide-left edge (172);
 * rail 544px overhanging 140px past the wide-right edge (right offset 32). */
@media (min-width: 1200px) {
	.cl-case-hero,
	.cl-case-body {
		--cl-rail-right: max(1.5rem, calc((100% - 1280px) / 2 - 120px));
		--cl-rail-w: min(544px, 34vw);
		--cl-body-left: max(1.5rem, calc((100% - 1280px) / 2));
	}
	.cl-case-hero {
		position: relative;
	}
	.cl-case-hero .wp-block-column:first-child {
		flex-grow: 0;
	}
	.cl-case-hero .cl-case-rail {
		position: absolute;
		top: 4rem;
		right: var(--cl-rail-right);
		width: var(--cl-rail-w);
		margin: 0;
		z-index: 1;
	}
	/* !important needed: core's constrained layout centres children with
	 * margin auto !important. */
	.cl-case-body .wp-block-post-content > :where(:not(.alignwide):not(.alignfull)) {
		max-width: min(961px, calc(100% - var(--cl-body-left) - var(--cl-rail-w) - var(--cl-rail-right) - 3rem));
		margin-left: var(--cl-body-left) !important;
	}
	/* Reserve room so a floating rail can't reach the footer on short articles. */
	.cl-case-body {
		min-height: 48rem;
	}
}

/* ---------------------------------------------------------------------------
 * Mobile navigation overlay — accordion submenus
 * ------------------------------------------------------------------------- */

/* The injected chevron toggle is hidden on desktop (hover dropdowns). */
.cl-header .cl-submenu-toggle { display: none; }

.cl-header .wp-block-navigation__responsive-container.is-menu-open {
	background: var(--cl-emerald) !important;
	color: #fff;
	padding: 5rem 1.5rem 2rem;
	/* The desktop menu is right-justified; core carries that into the overlay
	 * through these vars. Reset so the accordion reads top-left. */
	--navigation-layout-justification-setting: flex-start;
	--navigation-layout-justify: flex-start;
	--navigation-layout-align: flex-start;
}
.cl-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	width: 100%;
	align-items: flex-start;
}
.cl-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container {
	gap: 0;
	width: 100%;
	flex-direction: column;
	align-items: stretch;
}
.cl-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	text-align: left;
}
/* Grid, not flex: core's overlay styles keep re-centering flex rows, and a
 * two-column grid (label | chevron) with the submenu spanning below is the
 * layout we actually mean. */
.cl-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-item {
	display: grid !important;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	width: 100%;
	min-height: 3.25rem;
	border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}
.cl-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item > .wp-block-navigation__submenu-container {
	grid-column: 1 / -1;
}
.cl-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	justify-self: start;
	width: 100%;
}
.cl-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	padding: 0.75rem 0.25rem;
	flex: 1;
}

/* Collapse submenu lists until their toggle opens them. */
.cl-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
	display: none !important;
	width: 100%;
	padding-left: 1.25rem;
	/* The dropshadow is a desktop-dropdown affordance; the overlay accordion
	 * shows submenus inline, so drop it here. */
	box-shadow: none;
	-webkit-box-shadow: none;
}
.cl-header .wp-block-navigation__responsive-container.is-menu-open .cl-open > .wp-block-navigation__submenu-container {
	display: flex !important;
	flex-direction: column;
}
.cl-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item:last-child {
	border-bottom: 0;
}

/* Chevron toggle button, visible only inside the overlay. */
.cl-header .wp-block-navigation__responsive-container.is-menu-open .cl-submenu-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	background: transparent;
	border: 0;
	cursor: pointer;
	position: relative;
}
.cl-header .wp-block-navigation__responsive-container.is-menu-open .cl-submenu-toggle::before {
	content: "";
	width: 0.7rem;
	height: 0.7rem;
	border-right: 2px solid var(--cl-gold);
	border-bottom: 2px solid var(--cl-gold);
	transform: rotate(45deg);
	transition: transform var(--wp--custom--transition, 180ms ease);
}
.cl-header .wp-block-navigation__responsive-container.is-menu-open .cl-open > .cl-submenu-toggle::before {
	transform: rotate(225deg);
}

/* Hide core's own (non-interactive) submenu icon inside the overlay so the
 * accordion chevron is the single affordance. */
.cl-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-icon {
	display: none;
}

/* ---------------------------------------------------------------------------
 * Hover and focus states
 * ------------------------------------------------------------------------- */

/* Top navigation */
.cl-header .wp-block-navigation > .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
	position: relative;
	padding-bottom: 0.35rem;
	transition: color var(--wp--custom--transition, 180ms ease);
}
.cl-header .wp-block-navigation > .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	left: 0;
	right: 100%;
	bottom: 0;
	height: 3px;
	background: var(--cl-gold);
	transition: right var(--wp--custom--transition, 180ms ease);
}
.cl-header .wp-block-navigation > .wp-block-navigation__container > .wp-block-navigation-item:hover > .wp-block-navigation-item__content::after,
.cl-header .wp-block-navigation > .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content:focus-visible::after {
	right: 0;
}
.cl-header .wp-block-navigation-item__content:hover { color: var(--cl-gold); }
.cl-header .cl-logo-lockup a { transition: color var(--wp--custom--transition, 180ms ease); }
.cl-header .cl-logo-lockup a:hover { color: var(--cl-gold); }

/* Flat colour surfaces brighten on hover */
.cl-promo,
.is-style-arrow .wp-block-button__link {
	transition: filter var(--wp--custom--transition, 180ms ease);
}
.cl-promo:hover,
.is-style-arrow .wp-block-button__link:hover {
	filter: brightness(1.12);
}
/* Changemaker logo zooms a little on hover. */
.cl-promo img {
	transition: transform var(--wp--custom--transition, 220ms ease);
}
.cl-promo:hover img,
.cl-promo:focus-visible img {
	transform: scale(1.05);
}
/* Theme tile icons zoom a little on hover. */
.cl-tile__icon::before {
	transition: transform var(--wp--custom--transition, 220ms ease);
}
.cl-tile:hover .cl-tile__icon::before,
.cl-tile:focus-visible .cl-tile__icon::before {
	transform: scale(1.14);
}

/* Search submit arrow nudges like other arrow links */
.cl-search-submit::after { transition: transform var(--wp--custom--transition, 180ms ease); }
.cl-search-submit:hover::after { transform: translateX(0.35em); }
.cl-search-field:focus-within { border-color: var(--cl-jade); }

/* Pagination */
.cl-pagination .page-numbers:hover,
.cl-pagination a:hover { color: var(--cl-gold); }

/* Profile cards shift to a soft emerald tint on hover (no drop shadow). */
.cl-profile-card { transition: background-color var(--wp--custom--transition, 180ms ease); }
.cl-profile-card:has(.cl-arrow-link):hover {
	background: color-mix(in srgb, var(--cl-emerald) 12%, #fff);
}

/* Case list row title */
.cl-case-row .wp-block-post-title a { transition: color var(--wp--custom--transition, 180ms ease); }
.cl-case-row .wp-block-post-title a:hover { color: var(--cl-emerald); }

/* Visible keyboard focus everywhere */
.cl-header a:focus-visible,
.cl-footer a:focus-visible,
.cl-tile:focus-visible,
.cl-promo:focus-visible,
.cl-arrow-link:focus-visible,
.wp-element-button:focus-visible,
.cl-search-submit:focus-visible {
	outline: 3px solid var(--cl-gold);
	outline-offset: 2px;
}

/* Screen-reader-only utility (WP core provides one on the front end, but not
 * inside the editor canvas). */
.cl-visually-hidden {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}


/* Case Study rows */

.case_study {
	margin-block-start: 0;
}