/*
 * Our Impact — structural frontend CSS.
 *
 * Layout scaffolding only. No color, font, or spacing declarations that
 * belong to the theme. The active theme provides all color tokens, typography,
 * and button styles. Plugin CSS only sets structural rules (grids, flex,
 * sticky positioning, the card stripe, and layout containers).
 *
 * Brief-type color stripe: keyed to .impact-type--{slug} classes.
 * Themes can remap these via the ffa_impact_brief_type_color filter or by
 * overriding the CSS custom properties below.
 */

/* ── Color tokens for brief-type stripes (theme can override) ───────────── */
:root {
	--impact-color-research-briefs:          #004c97;
	--impact-color-program-insights-briefs:  #2a7d4f;
	--impact-color-organization-briefs:      #c8a227;
}

/* ── Archive wrapper ─────────────────────────────────────────────────────── */
.impact-archive {
	width: 100%;
}

/* ── Hero ────────────────────────────────────────────────────────────────── */
.impact-hero {
	padding: 48px 24px;
}

.impact-hero__stats {
	display: flex;
	flex-wrap: wrap;
	gap: 32px;
	margin-top: 24px;
}

.impact-stat {
	display: flex;
	flex-direction: column;
}

/* ── Filter bar ──────────────────────────────────────────────────────────── */
.impact-filter-bar {
	position: sticky;
	top: 0;
	z-index: 100;
	padding: 12px 24px;
}

.impact-filter-bar__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}

.impact-filter-bar__search {
	flex: 1 1 200px;
	min-width: 160px;
}

.impact-filter-bar__select {
	flex: 0 1 180px;
}

.impact-filter-bar__count {
	margin-left: auto;
	white-space: nowrap;
}

.impact-filter-bar__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	padding-top: 8px;
}

.impact-filter-chip {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 2px 10px;
	border-radius: 9999px;
	font-size: 0.8em;
	cursor: pointer;
}

.impact-filter-chip__remove {
	background: none;
	border: none;
	cursor: pointer;
	padding: 0;
	line-height: 1;
}

/* ── Two-column archive body ─────────────────────────────────────────────── */
.impact-archive__body {
	display: flex;
	align-items: flex-start;
	gap: 24px;
	padding: 24px;
}

/* ── Sidebar taxonomy navigator ──────────────────────────────────────────── */
.impact-sidebar {
	width: 220px;
	flex-shrink: 0;
	position: sticky;
	top: 56px;
	max-height: calc(100vh - 80px);
	overflow-y: auto;
}

.impact-sidebar__section {
	margin-bottom: 24px;
}

.impact-sidebar__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.impact-sidebar__btn {
	display: flex;
	justify-content: space-between;
	width: 100%;
	background: none;
	border: none;
	text-align: left;
	cursor: pointer;
	padding: 4px 8px;
	border-radius: 3px;
}

.impact-sidebar__btn.is-active,
.impact-sidebar__btn:hover {
	background: rgba(0, 0, 0, 0.06);
}

/* ── Main card area ──────────────────────────────────────────────────────── */
.impact-archive__main {
	flex: 1;
	min-width: 0;
}

.impact-card-grid {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

/* ── Card ────────────────────────────────────────────────────────────────── */
.impact-card {
	display: flex;
	position: relative;
	overflow: hidden;
}

.impact-card__stripe {
	width: 4px;
	flex-shrink: 0;
	align-self: stretch;
}

.impact-type--research-briefs          .impact-card__stripe { background: var( --impact-color-research-briefs ); }
.impact-type--program-insights-briefs  .impact-card__stripe { background: var( --impact-color-program-insights-briefs ); }
.impact-type--organization-briefs      .impact-card__stripe { background: var( --impact-color-organization-briefs ); }

.impact-card__body {
	flex: 1;
	padding: 16px 20px;
}

.impact-card__header {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 8px;
}

.impact-card__title {
	margin: 0 0 8px;
}

.impact-card__stat-pill {
	display: inline-block;
	padding: 2px 10px;
	border-radius: 9999px;
	font-size: 0.8em;
	margin-bottom: 8px;
}

.impact-card__excerpt {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin: 0 0 12px;
}

.impact-card__footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 8px;
}

.impact-card__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.impact-card__actions {
	display: flex;
	gap: 8px;
	flex-shrink: 0;
}

/* ── Pagination ──────────────────────────────────────────────────────────── */
.impact-pagination {
	margin-top: 32px;
	text-align: center;
}

/* ── Featured briefs shortcode ───────────────────────────────────────────── */
.impact-featured-briefs {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
}

.impact-featured-briefs .impact-card {
	flex: 1 1 280px;
}

/* ── Single brief ────────────────────────────────────────────────────────── */
.impact-breadcrumb {
	padding: 12px 24px;
}

.impact-single__hero {
	padding: 40px 24px;
}

.impact-single__hero-inner {
	display: flex;
	align-items: flex-start;
	gap: 32px;
	flex-wrap: wrap;
}

.impact-single__hero-main {
	flex: 1 1 400px;
}

.impact-single__pills {
	display: flex;
	gap: 8px;
	margin-bottom: 12px;
}

.impact-single__byline {
	display: flex;
	gap: 16px;
	flex-wrap: wrap;
	margin: 8px 0;
}

.impact-single__glance {
	flex: 0 1 240px;
	padding: 20px;
	border-radius: 4px;
}

.impact-single__glance-list {
	margin: 0;
}

.impact-single__glance-list dt {
	font-weight: 700;
	margin-top: 12px;
}

.impact-single__glance-list dd {
	margin: 0;
}

/* ── Single two-column body ──────────────────────────────────────────────── */
.impact-single__body {
	display: flex;
	align-items: flex-start;
	gap: 32px;
	padding: 32px 24px;
}

.impact-single__main {
	flex: 1;
	min-width: 0;
}

/* Scoped to the fallback two-column row ON PURPOSE. The block template puts the
   sidebar in a core wp:column, which already owns its width — a fixed width here
   would fight the column and break its responsive behaviour. Stickiness is fine
   in both, so it stays unscoped below. */
.impact-single__body > .impact-single__sidebar {
	/* 260px wrapped a typical brief title over three lines and stacked the topic
	   pills one per row. 320px fits the longest live title in two. */
	width: 320px;
	flex-shrink: 0;
}

.impact-single__sidebar {
	position: sticky;
	top: 24px;
}

.impact-sidebar-card {
	margin-bottom: 24px;
	padding: 16px;
}

/* ── Key points box ──────────────────────────────────────────────────────── */
.impact-key-points {
	padding: 20px 24px;
	border-radius: 4px;
	margin-bottom: 28px;
}

.impact-key-points__list {
	padding-left: 20px;
}

/* ── Quote blocks ────────────────────────────────────────────────────────── */
.impact-blockquote {
	padding: 16px 24px;
	margin: 24px 0;
	border-left: 4px solid currentColor;
}

.impact-blockquote cite {
	display: block;
	margin-top: 8px;
	font-style: normal;
}

/* ── Tag cloud ───────────────────────────────────────────────────────────── */
.impact-tag-cloud {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

/* ── Related briefs list ─────────────────────────────────────────────────── */
.impact-related-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.impact-related-item {
	display: flex;
	justify-content: space-between;
	padding: 6px 0;
	border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

/* ── Utility ─────────────────────────────────────────────────────────────── */
.impact-btn--block {
	display: block;
	width: 100%;
	text-align: center;
}

.impact-no-results {
	padding: 32px;
	text-align: center;
}

/* ── Mobile ──────────────────────────────────────────────────────────────── */
@media ( max-width: 768px ) {
	.impact-sidebar,
	.impact-single__glance {
		display: none;
	}

	.impact-archive__body,
	.impact-single__body {
		flex-direction: column;
	}

	.impact-single__body > .impact-single__sidebar {
		width: 100%;
	}

	.impact-single__sidebar {
		position: static;
	}
}

/* =========================================================================
 * Single-brief presentation — reclaimed from ffa-horizon.
 *
 * These rules lived in the THEME, which breaks its own boundary: a shared
 * neutral base theme must not style surfaces belonging to a plugin only one
 * site runs. brand.ffa.org consumes ffa-horizon and does NOT run Our Impact, so
 * it was being shipped 25 rule blocks it can never use.
 *
 * They also could not follow the plugin anywhere else. The legacy ffa.org runs
 * Avada, where none of this existed — the brief rendered structurally correct
 * and visually unfinished.
 *
 * Colours keep the theme preset AND carry a hex fallback, so one stylesheet
 * serves both: on a block theme the preset resolves and the brand stays the
 * single source of truth exactly as before; on a classic theme the hex applies.
 * No conditional loading and no second code path.
 *
 * Deliberately NOT reclaimed, because they are genuinely shared and belong to
 * the theme: the Anton uppercase rule (h1, .has-display-font-family, and other
 * plugins' titles) and the ElasticPress search-highlight rule.
 * ====================================================================== */
.impact-single__hero,
.impact-single__body,
.impact-breadcrumb {
	max-width: var(--wp--style--global--wide-size, 1600px);
	margin-inline: auto;
}

/* ----------------------------------------------------------------------
 * Block-theme layout reconciliation.
 *
 * Since 1.6.0 the single brief is a block template: the breadcrumb and hero
 * are shortcodes, but the BODY is a core wp:columns block. So the two get
 * their horizontal frame from completely different places, and the left edges
 * cannot line up. Two separate causes, both real:
 *
 *   measure  the rule above pins the hero to WIDE size (1600px), while the
 *            columns block has no alignment and so takes the constrained
 *            layout's CONTENT size (1400px). The layout rule that would have
 *            constrained the hero is `:where(.is-layout-constrained) > *`,
 *            and `:where()` has zero specificity, so ours wins silently.
 *   inset    `.impact-single__hero` adds `padding: 40px 24px` on top of the
 *            wrapper's global padding; the columns block adds none.
 *
 * The two push OPPOSITE ways, which is the part worth keeping: the padding
 * moves the hero text right, the wider measure moves it left, and which one
 * you see depends on the viewport. Fixing only the padding — the obvious
 * reading — leaves the measure gap standing and makes the visible offset
 * BIGGER, not smaller. Both have to go together.
 *
 * Scoped to a wrapper that supplies both, so the classic-theme path is
 * untouched: on Avada there is no constrained layout and no global padding,
 * the fallback PHP template renders `.impact-single__body`, and the 24px is
 * still the only thing keeping the brief off the window edge.
 * ---------------------------------------------------------------------- */
.has-global-padding.is-layout-constrained > .impact-breadcrumb,
.has-global-padding.is-layout-constrained > .impact-single__hero {
	max-width: var(--wp--style--global--content-size, 1400px);
	padding-inline: 0;
}

.impact-breadcrumb {
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: color-mix(in srgb, var(--wp--preset--color--ink, #23303D) 55%, transparent);
}
.impact-breadcrumb a {
	color: var(--wp--preset--color--steel, #177E93);
	text-decoration: none;
}
.impact-single__hero {
	background: var(--wp--preset--color--corduroy, #16274A);
	border-top: 4px solid var(--wp--preset--color--ffa-yellow, #F2CE1B);
	color: #fff;
}
.impact-single__pills .impact-type-pill,
.impact-single__pills .impact-series-pill {
	font-size: 0.7rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	padding: 0.28rem 0.7rem;
	border-radius: 999px;
}
.impact-single__pills .impact-type-pill {
	background: var(--wp--preset--color--ffa-yellow, #F2CE1B);
	color: var(--wp--preset--color--corduroy, #16274A);
}
.impact-single__pills .impact-series-pill {
	background: rgba(255, 255, 255, 0.16);
	color: #fff;
}
.impact-single__title {
	font-family: var(--wp--preset--font-family--display);
	letter-spacing: 0;
	line-height: 1.04;
	font-size: clamp(2rem, 4.5vw, 3.25rem);
	margin: 0.15em 0 0.1em;
	color: #fff;
}
.impact-single__byline,
.impact-single__method {
	color: #d9e2ef;
	font-size: 0.92rem;
}
.impact-single__byline a {
	color: var(--wp--preset--color--ffa-yellow, #F2CE1B);
}
.impact-single__glance {
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.18);
}
.impact-single__glance-title {
	font-size: 0.78rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--wp--preset--color--ffa-yellow, #F2CE1B);
	margin: 0 0 0.6rem;
}
.impact-single__glance-list dt {
	color: #fff;
	font-size: 0.72rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}
.impact-single__glance-list dd {
	color: #d9e2ef;
	font-size: 0.95rem;
}
.impact-key-points {
	background: var(--wp--preset--color--surface, #FFFFFF);
	border-left: 4px solid var(--wp--preset--color--ffa-blue, #004C97);
	color: var(--wp--preset--color--ink, #23303D);
}
.impact-key-points__title,
.impact-footnotes__title {
	font-family: var(--wp--preset--font-family--display);
	text-transform: uppercase;
	font-weight: 400;
	font-synthesis-weight: none;
	color: var(--wp--preset--color--ffa-blue, #004C97);
	font-size: 1.3rem;
}
.impact-single__content {
	font-size: 1.05rem;
	line-height: 1.7;
	color: var(--wp--preset--color--ink, #23303D);
}
.impact-single__content :where(h2, h3) {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 400;
	color: var(--wp--preset--color--ffa-blue, #004C97);
}
.impact-sidebar-card {
	background: var(--wp--preset--color--surface, #FFFFFF);
	border: 1px solid var(--wp--preset--color--line, #DCE6F2);
	border-radius: 6px;
	color: var(--wp--preset--color--ink, #23303D);
}
.impact-sidebar-card__title {
	font-size: 0.8rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--wp--preset--color--ffa-blue, #004C97);
	margin: 0 0 0.6rem;
}
.impact-study-details dt {
	font-size: 0.72rem;
	font-weight: 700;
	text-transform: uppercase;
	color: color-mix(in srgb, var(--wp--preset--color--ink, #23303D) 55%, transparent);
	margin-top: 0.6rem;
}
.impact-study-details dd {
	margin: 0;
}
.impact-study-details a,
.impact-related-item a {
	color: var(--wp--preset--color--ffa-blue, #004C97);
	text-decoration: none;
}
.impact-btn,
.impact-btn--primary {
	display: inline-block;
	background: var(--wp--preset--color--steel, #177E93);
	color: #fff;
	border-radius: 999px;
	padding: 0.7rem 1.3rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-size: 0.85rem;
	text-decoration: none;
}
.impact-tag {
	font-size: 0.72rem;
	font-weight: 700;
	background: color-mix(in srgb, var(--wp--preset--color--steel, #177E93) 12%, transparent);
	color: var(--wp--preset--color--steel, #177E93);
	border-radius: 999px;
	padding: 0.2rem 0.6rem;
	text-decoration: none;
}