/* BUILD topic (focus area) page — tokens from the Claude Design template. */

:root {
	--build-ink: #1c2530;
	--build-muted: #8a8478;
	--build-muted-dark: #5a5548;
	--build-terracotta: #b3562f;
	--build-gold: #f4b742;
	--build-gold-dark: #8a6d1f;
	--build-purple: #5954a3;
	--build-purple-light: #efe6f5;
	--build-blue: #31599c;
	--build-blue-light: #e3eaf5;
	--build-cream: #f3ecda;
	--build-paper: #fbfaf8;
	--build-line: rgba(18, 26, 36, 0.12);
	--build-sans: "Libre Franklin", system-ui, sans-serif;
	--build-serif: "Source Serif 4", Georgia, serif;
}

/* ---- Site nav on BUILD pages ------------------------------------------ */

/* Topic archives, the resources index and single resources all open on a dark
   hero under Kadence's transparent header, so the primary nav reads white. */
.tax-topic.transparent-header .header-navigation .header-menu-container > ul > li.menu-item > a,
.post-type-archive-resource.transparent-header .header-navigation .header-menu-container > ul > li.menu-item > a,
.single-resource.transparent-header .header-navigation .header-menu-container > ul > li.menu-item > a,
.tax-topic.mobile-transparent-header .mobile-toggle-open-container .menu-toggle-open,
.post-type-archive-resource.mobile-transparent-header .mobile-toggle-open-container .menu-toggle-open,
.single-resource.mobile-transparent-header .mobile-toggle-open-container .menu-toggle-open {
	color: #fff;
}

.tax-topic.transparent-header .header-navigation .header-menu-container > ul > li.menu-item > a:hover,
.tax-topic.transparent-header .header-navigation .header-menu-container > ul > li.menu-item.current-menu-item > a,
.post-type-archive-resource.transparent-header .header-navigation .header-menu-container > ul > li.menu-item > a:hover,
.post-type-archive-resource.transparent-header .header-navigation .header-menu-container > ul > li.menu-item.current-menu-item > a,
.single-resource.transparent-header .header-navigation .header-menu-container > ul > li.menu-item > a:hover,
.single-resource.transparent-header .header-navigation .header-menu-container > ul > li.menu-item.current-menu-item > a {
	color: var(--build-gold);
}

/* ---- Page frame -------------------------------------------------------- */

/* Warm paper background on topic archives (overrides the theme's default). */
body.tax-topic,
.tax-topic #inner-wrap {
	background-color: var(--build-paper);
}

/* Constrain and center the body content ourselves rather than relying on
   block-layout support, so alignment matches the hero regardless of the
   Element's width settings. */
.build-topic-body {
	max-width: 1160px;
	margin: 0 auto;
	padding: 4px 24px 56px;
	box-sizing: border-box;
}

/* ---- Hero -------------------------------------------------------------- */

.build-hero {
	position: relative;
	min-height: 340px;
	display: flex;
	align-items: flex-end;
	background-color: var(--build-ink);
	background-size: cover;
	background-position: center;
}

.build-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(10, 15, 22, 0.82) 0%, rgba(10, 15, 22, 0.25) 55%, rgba(10, 15, 22, 0.15) 100%);
}

.build-hero-inner {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 1160px;
	margin: 0 auto;
	padding: 48px 24px;
	box-sizing: border-box;
	color: #fff;
}

.build-eyebrow {
	font-family: var(--build-sans);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	margin: 0 0 8px;
	color: var(--build-gold);
}

.build-hero-title {
	font-family: var(--build-sans);
	font-size: clamp(38px, 5vw, 54px);
	font-weight: 800;
	line-height: 1.05;
	margin: 0 0 12px;
	color: #fff;
}

.build-hero-desc {
	font-family: var(--build-sans);
	font-size: 17px;
	line-height: 1.5;
	max-width: 560px;
	margin: 0;
	color: rgba(255, 255, 255, 0.92);
}

/* ---- Filter pills ------------------------------------------------------ */

.build-filters {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	padding: 28px 0 24px;
	border-bottom: 1px solid var(--build-line);
	margin-bottom: 40px;
	font-family: var(--build-sans);
}

.build-filters-label {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--build-muted-dark);
	margin-right: 6px;
}

.build-pill {
	font-family: var(--build-sans);
	font-size: 13px;
	font-weight: 600;
	color: var(--build-ink);
	background: #fff;
	border: 1px solid var(--build-line);
	border-radius: 999px;
	padding: 7px 16px;
	cursor: pointer;
	transition: background 0.15s, color 0.15s, border-color 0.15s;
}

/* Each pill takes the color of the badge its type shows in the results
   (see .build-badge--* below). "All" keeps the blue. */
.build-pill { --pill: var(--build-blue); }
.build-pill[data-type="article"] { --pill: var(--build-muted-dark); }
.build-pill[data-type="research"],
.build-pill[data-type="working-papers-and-reports"] { --pill: var(--build-terracotta); }
.build-pill[data-type="op-ed"], .build-pill[data-type="op-eds"],
.build-pill[data-type="commentary"] { --pill: var(--build-blue); }
.build-pill[data-type="podcast"], .build-pill[data-type="podcasts"],
.build-pill[data-type="curriculum-materials"] { --pill: var(--build-gold-dark); }
.build-pill[data-type="video"], .build-pill[data-type="videos"],
.build-pill[data-type="datasets-and-dashboards"] { --pill: #2e6b4f; }
.build-pill[data-type="press"] { --pill: var(--build-ink); }
.build-pill[data-type="blog"] { --pill: #7d4f9e; }
.build-pill[data-type="journal-articles"] { --pill: var(--build-purple); }

.build-pill:hover {
	background: var(--pill);
	border-color: var(--pill);
	color: #fff;
}

.build-pill.is-active {
	background: var(--pill);
	border-color: var(--pill);
	color: #fff;
}

/* ---- Feed -------------------------------------------------------------- */

.build-feed-header {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	border-bottom: 2px solid var(--build-ink);
	padding-bottom: 8px;
	margin-bottom: 4px;
}

.build-section-label {
	font-family: var(--build-sans);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--build-ink);
	margin: 0;
}

.build-feed-sort {
	font-family: var(--build-sans);
	font-size: 12px;
	color: var(--build-muted);
}

.build-feed-item {
	display: flex;
	gap: 20px;
	padding: 22px 0;
	border-bottom: 1px solid var(--build-line);
}

.build-item-thumb {
	flex: 0 0 130px;
}

.build-item-thumb-img {
	width: 130px;
	height: 96px;
	object-fit: cover;
	display: block;
	background: var(--build-cream);
}

.build-item-body {
	flex: 1;
	min-width: 0;
}

.build-item-meta {
	font-family: var(--build-sans);
	font-size: 12px;
	color: var(--build-muted);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 0 0 6px;
}

.build-badge {
	display: inline-block;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #fff;
	background: var(--build-muted-dark);
	border-radius: 3px;
	padding: 3px 8px;
}

/* Per-type badge colors — extend as terms are added. */
.build-badge--research,
.build-badge--working-papers-and-reports { background: var(--build-terracotta); }
.build-badge--op-ed, .build-badge--op-eds { background: var(--build-blue); }
.build-badge--podcast, .build-badge--podcasts { background: var(--build-gold-dark); }
.build-badge--video, .build-badge--videos { background: #2e6b4f; }
.build-badge--press { background: var(--build-ink); }
.build-badge--blog { background: #7d4f9e; }
.build-badge--commentary { background: var(--build-blue); }
.build-badge--datasets-and-dashboards { background: #2e6b4f; }
.build-badge--journal-articles { background: var(--build-purple); }
.build-badge--curriculum-materials { background: var(--build-gold-dark); }

.build-ext { color: var(--build-terracotta); }
.build-dot { color: var(--build-muted); }

.build-item-title {
	font-family: var(--build-serif);
	font-size: 22px;
	font-weight: 700;
	line-height: 1.25;
	margin: 0 0 4px;
}

.build-feed-item.is-compact .build-item-title {
	font-size: 18px;
}

.build-item-title a {
	color: var(--build-ink);
	text-decoration: none;
}

.build-item-title a:hover {
	color: var(--build-terracotta);
}

.build-item-authors {
	font-family: var(--build-sans);
	font-size: 13px;
	color: var(--build-muted-dark);
	margin: 0 0 4px;
}

.build-item-excerpt {
	font-family: var(--build-sans);
	font-size: 14px;
	line-height: 1.55;
	color: var(--build-ink);
	margin: 0;
}

.build-feed-more {
	text-align: center;
	padding: 26px 0 8px;
	margin: 0;
}

.build-load-more {
	font-family: var(--build-sans);
	font-size: 13px;
	font-weight: 600;
	color: var(--build-ink);
	background: #fff;
	border: 1px solid var(--build-ink);
	border-radius: 4px;
	padding: 10px 26px;
	cursor: pointer;
}

.build-load-more:hover {
	background: var(--build-ink);
	color: #fff;
}

.build-feed.is-loading {
	opacity: 0.55;
	pointer-events: none;
}

.build-feed-empty {
	font-family: var(--build-sans);
	font-size: 14px;
	color: var(--build-muted);
	padding: 24px 0;
}

/* ---- Sidebar ----------------------------------------------------------- */

.build-side-block {
	border-top: 2px solid var(--build-ink);
	padding: 12px 0 8px;
	margin-bottom: 28px;
	font-family: var(--build-sans);
}

.build-side-block .build-section-label {
	margin-bottom: 10px;
}

.build-about p {
	font-size: 14px;
	line-height: 1.6;
	color: var(--build-ink);
	margin: 0;
}

.build-researcher-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.build-researcher {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 8px 0;
}

.build-researcher-avatar {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	object-fit: cover;
	flex: 0 0 40px;
	background: var(--build-cream);
	display: inline-block;
}

.build-researcher-text {
	display: flex;
	flex-direction: column;
	font-size: 14px;
	color: var(--build-ink);
}

.build-researcher-meta {
	font-size: 12px;
	color: var(--build-muted);
}

.build-side-link {
	display: inline-block;
	font-size: 13px;
	font-weight: 600;
	color: var(--build-terracotta);
	text-decoration: none;
	margin-top: 6px;
}

.build-area-card {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: 88px;
	margin-bottom: 12px;
	background-color: var(--build-ink);
	background-size: cover;
	background-position: center;
	text-decoration: none;
	overflow: hidden;
}

.build-area-card::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(10, 15, 22, 0.75), rgba(10, 15, 22, 0.1));
}

.build-area-card-label {
	position: relative;
	z-index: 1;
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	padding: 10px 14px;
}

/* ---- CTA box (editable blocks inside the Element) ---------------------- */

.build-cta {
	background: var(--build-purple);
	padding: 26px 24px;
	font-family: var(--build-sans);
}

.build-cta .build-cta-title {
	color: #fff;
	font-family: var(--build-sans);
	font-size: 19px;
	font-weight: 700;
	margin: 0 0 8px;
}

.build-cta .build-cta-text {
	color: rgba(255, 255, 255, 0.9);
	font-size: 14px;
	line-height: 1.5;
	margin: 0 0 16px;
}

.build-cta .build-cta-button .wp-block-button__link {
	background: var(--build-gold);
	color: var(--build-ink);
	font-family: var(--build-sans);
	font-size: 14px;
	font-weight: 700;
	border-radius: 4px;
	padding: 10px 22px;
}

/* ---- Resources index (Quick Reference List) ---------------------------- */

body.post-type-archive-resource,
.post-type-archive-resource #inner-wrap {
	background-color: var(--build-paper);
}

.build-reshero {
	background: #12202e;
}

.build-reshero-inner {
	max-width: 1160px;
	margin: 0 auto;
	padding: 44px 24px 40px;
	box-sizing: border-box;
}

/* When Kadence's transparent header overlays this archive, push the hero
   content down so the eyebrow/title clear the nav bar. */
.transparent-header .build-reshero-inner,
.header-transparent .build-reshero-inner {
	padding-top: 150px;
}

.build-reshero .build-eyebrow {
	color: rgba(255, 255, 255, 0.65);
}

.build-reshero-title {
	font-family: var(--build-sans);
	font-size: clamp(34px, 4vw, 44px);
	font-weight: 800;
	letter-spacing: -0.5px;
	color: #fff;
	margin: 0;
}

.build-restable {
	max-width: 1160px;
	margin: 0 auto;
	padding: 32px 24px 72px;
	box-sizing: border-box;
	font-family: var(--build-sans);
}

.build-restable-filters {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	padding-bottom: 18px;
	border-bottom: 1px solid var(--build-line);
}

.build-restable-filters .build-filters-label {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--build-muted);
	margin-right: 4px;
}

.build-filters-divider {
	width: 1px;
	height: 24px;
	background: var(--build-line);
	margin: 0 8px;
}

.build-filter-select {
	appearance: none;
	-webkit-appearance: none;
	font-family: var(--build-sans);
	font-size: 13px;
	font-weight: 600;
	color: var(--build-ink);
	background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%231c2530' stroke-width='1.5' fill='none'/%3E%3C/svg%3E") no-repeat right 13px center;
	border: 1.5px solid #d5d0c7;
	border-radius: 18px;
	padding: 8px 34px 8px 14px;
	cursor: pointer;
	max-width: 280px;
}

.build-filter-select:hover {
	border-color: var(--build-ink);
}

.build-filter-select:focus {
	outline: 2px solid var(--build-purple);
	outline-offset: 1px;
}

/* The table design uses purple for active pills (topic pages use blue). */
.build-restable-filters .build-pill.is-active {
	background: var(--build-purple);
	border-color: var(--build-purple);
	color: #fff;
}

.build-restable-countrow {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	padding: 16px 0 10px;
	font-size: 13px;
	color: var(--build-muted);
}

.build-restable-sort {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.build-sort-select {
	padding-top: 6px;
	padding-bottom: 6px;
}

.build-restable-head,
.build-restable-row {
	display: grid;
	grid-template-columns: 165px minmax(0, 1fr) 120px 145px 130px;
	gap: 0 16px;
	align-items: center;
}

.build-restable-head {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--build-muted);
	border-top: 2px solid var(--build-ink);
	border-bottom: 1px solid var(--build-line);
	padding: 10px 0;
}

.build-restable-head span:last-child,
.build-rt-source {
	text-align: right;
}

.build-restable-row {
	padding: 14px 0;
	border-bottom: 1px solid var(--build-line);
}

.build-restable-row:hover {
	background: #f5f3ef;
}

.build-rt-source {
	font-size: 13px;
	color: var(--build-muted);
}

.build-rt-source a {
	color: var(--build-muted);
	text-decoration: none;
}

.build-rt-source a:hover {
	color: var(--build-terracotta);
}

.build-rt-area,
.build-rt-orgtype {
	font-size: 13px;
	color: var(--build-muted-dark);
}

.build-rt-title {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.build-rt-title > a {
	font-family: var(--build-serif);
	font-size: 16.5px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--build-ink);
	text-decoration: none;
}

.build-rt-title > a:hover {
	color: var(--build-purple);
}

.build-rt-byline {
	font-size: 12.5px;
	color: var(--build-muted);
}

/* Soft table badges (design uses tinted backgrounds, unlike the topic feed).
   No nowrap — long labels (WORKING PAPERS AND REPORTS) wrap inside their
   column instead of overflowing into the title. */
.build-tbadge {
	display: inline-block;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	line-height: 1.6;
	color: var(--build-muted-dark);
	background: #eee9df;
	padding: 3px 9px;
	border-radius: 2px;
	max-width: 100%;
	box-sizing: border-box;
}

.build-rt-type {
	min-width: 0;
}

.build-tbadge--research,
.build-tbadge--working-papers-and-reports { color: #fff; background: var(--build-terracotta); }
.build-tbadge--op-ed, .build-tbadge--op-eds { color: var(--build-blue); background: var(--build-blue-light); }
.build-tbadge--podcast, .build-tbadge--podcasts { color: #7d4f9e; background: var(--build-purple-light); }
.build-tbadge--video, .build-tbadge--videos { color: #2a6f6a; background: #dfeeec; }
.build-tbadge--press { color: var(--build-gold-dark); background: var(--build-cream); }
.build-tbadge--blog { color: #4c7a37; background: #e5efdf; }
.build-tbadge--article, .build-tbadge--commentary { color: var(--build-blue); background: var(--build-blue-light); }
.build-tbadge--datasets-and-dashboards { color: #2e6b4f; background: #e5efdf; }
.build-tbadge--journal-articles { color: var(--build-purple); background: var(--build-purple-light); }
.build-tbadge--curriculum-materials { color: var(--build-gold-dark); background: var(--build-cream); }

.build-restable.is-loading {
	opacity: 0.55;
	pointer-events: none;
}

@media (max-width: 900px) {
	.build-restable-head { display: none; }
	.build-restable-row {
		grid-template-columns: 1fr 1fr;
		gap: 6px 14px;
		padding: 16px 0;
	}
	.build-rt-title { grid-column: 1 / -1; order: -1; }
	.build-rt-source { text-align: left; }
}

/* ---- Layout / responsive ---------------------------------------------- */

.build-topic-columns {
	gap: 48px;
}

@media (max-width: 781px) {
	.build-hero-inner { padding: 36px 18px; }
	.build-feed-item { gap: 14px; }
	.build-item-thumb { flex-basis: 96px; }
	.build-item-thumb-img { width: 96px; height: 72px; }
}