/* ============================================================
   Knowledge Hub (/knowledge-hub/: archive-ldm_article.php,
   template-parts/knowledge-hub/). Knowledge hub v1, desktop and mobile
   (docs/design-renders/knowledge-hub-desktop-v1, -mobile-v1; build spec
   kh-design 3). Loads on the Hub only (inc/enqueue.php: knowledge-hub-*).
   The page reuses the shared parts as they are: the inner-page hero
   (page-hero.css), the search pill, count line and empty state
   (listing-filters.css, listing.css), the pagination band
   (listing-pagination.css), the article cards and their grid
   (article-card.css), the CTA panels (cta-panel.css) and the CTA band.
   This file holds what is the Hub's own:

   - Toolbar (Cream): the search (the listing's 55px pill, 417px wide
     from 768px; full width on phones) and "FILTER BY:" (Koulen 20
     navy) with three 43px select pills 12px apart (White, Border
     Warm, Regular 14 navy 19px in, the Dates filters' small solid
     caret 8px after the label and 16px from the end: Pathway 109,
     Level 83, Resource Type 151 at 1440, as drawn; Chromium sizes a
     select to its chosen option, other browsers to the widest one).
     One row wherever the two groups fit (about 1020px and up: the
     search left, the filters right, as drawn; 44px above, 46 below);
     below that the search on its own row and the filters on the next,
     left-aligned (tablets: not designed); on phones "FILTER BY:" on
     its own line, its caps 16px under the search and 11px over the
     pills (39px above and below: 217px, as drawn). At 320px the third
     pill wraps. Touch screens get a 16px label (iOS zooms into a
     smaller one) and a little less padding, so the three still fit on
     one row at 402.
   - Results (White): the count line (not drawn; visible, as on the
     other listings) 19px under the toolbar on desktops (14 on phones)
     and 10px over the featured card, so the card sits where drawn on
     desktops (50px under the toolbar; 45 on phones, drawn 30); the
     featured card 65px over the grid on desktops (drawn), 48 on
     tablets, the cards' 36px stack gap on phones; the grid 91px over
     the pagination on desktops, 55 on phones (drawn).
   - Panels band (Secondary Navy, 88 / 87px of padding on desktops, 77 /
     78 on phones, as drawn): the CTA panels at most 567px wide (the
     drawn pair: 59px apart, side by side from 1024px, stacked 36px
     apart below; the newsletter panel alone is one panel's width,
     centred). Their content is top-aligned with one padding (drawn
     centred, so the two eyebrows sat 10px apart): 52px above and 53
     below with 39px sides on desktops (the eyebrow's caps 55px from the
     top, as drawn on the newsletter panel), 28 / 30 with 19px sides on
     phones. The text 16px in both panels (the newsletter's drawn 14).
   - Newsletter form (.newsletter-form, components/newsletter-form.php):
     the footer's field, as drawn here: a 53px Secondary Navy pill the
     panel's width with the "Email" placeholder in Grey Mid 15px in, the
     40px Dark Orange submit with its Cream double chevron 7px inside
     the right end (drawn 12: the footer's 7), the consent line (12px
     Cream) 13px under it; the outcome message above the field.
   Not designed (proposals): the pills' hover (a Grey Dark border) and
   focus ring (Dark Orange, as the Dates pills), the no-JS "Show
   results" button, the loading dim (the listing's), the "Clear all"
   link (Emma 2026-10-18; the listing's text button, see the toolbar
   below).
   Files sorting after this one (listing*.css) style the shared parts,
   so the rules that change them carry two classes.
   ============================================================ */

/* ---------- Toolbar: search + "Filter by:" ---------- */

.hub-filters {
	padding-block: 39px;
	background-color: var(--color-surface-warm);
	color: var(--color-text);
}

.hub-filters__form {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 11px 40px;
}

/* Phones: the full width; from 768px the drawn 417px. */
.hub-filters__search {
	flex: 1 1 100%;
	min-width: 0;
}

/* "FILTER BY:" and the pills; on phones the whole row, so "Clear all"
   (below) ends where the search does. */
.hub-filters__group {
	position: relative;
	display: flex;
	flex: 1 1 100%;
	flex-wrap: wrap;
	align-items: center;
	gap: 5px 13px;
	min-width: 0;
}

/* Koulen 20 navy, as drawn; on phones on its own line. */
.hub-filters__label {
	flex: 1 0 100%;
	color: var(--color-heading);
	font-family: var(--font-display);
	font-size: var(--fs-card-title);
	font-weight: var(--fw-display);
	font-synthesis: none;
	line-height: 1.25;
	text-transform: uppercase;
}

/* 11px apart on phones (drawn 12), so the three pills share a 374px row
   at 402 (the browser's Poppins sets each label about 2px wider than the
   file's outlines); 12px from 768px. */
.hub-filters__controls {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 11px;
	min-width: 0;
}

/* Without JS (or when listing.js cannot run or load: .is-static) the
   selects need a button; with it the results follow the controls. */
html.has-js .hub-listing:not(.is-static) .hub-filters__actions {
	display: none;
}

.hub-filters__submit:focus-visible {
	outline-color: var(--color-focus-light);
}

/* "Clear all" (not designed; Emma 2026-10-18): the shared text button
   (.reset-link, listing-filters.css: Grey Dark, 4.72:1 on Cream; Navy on
   hover), shown only while the search or a filter is in use. Out of the
   flow, so the toolbar keeps its height and the pills never move as it
   comes and goes: on phones at the right of the "FILTER BY:" line, under
   the search's right end; from 768px under the pills, at their right end
   (the toolbar's padding below them holds it). Two classes, as the shared
   parts' later files would otherwise win (see the top). */
.hub-filters .hub-filters__reset {
	position: absolute;
	top: 0;
	right: 0;
}

.hub-filters .hub-filters__reset[hidden] {
	display: none;
}

@media (min-width: 768px) {
	.hub-filters__form {
		row-gap: 16px;
	}

	.hub-filters__search {
		flex: 0 1 417px;
	}

	.hub-filters__group {
		flex: 0 1 auto;
	}

	.hub-filters__label {
		flex: none;
	}

	.hub-filters__controls {
		column-gap: 12px;
	}

	.hub-filters .hub-filters__reset {
		top: calc(100% + 6px);
	}
}

@media (min-width: 1024px) {
	.hub-filters {
		padding-block: 44px 46px;
	}
}

/* ---------- The select pills ---------- */

.hub-select {
	position: relative;
	display: inline-flex;
	align-items: center;
	max-width: 100%;
	color: var(--color-text);
	vertical-align: middle;
}

/* The Level select while the Pathway is Leadership (filters.php and
   listing.js mark it hidden: Leadership articles have no level). */
.hub-select[hidden] {
	display: none;
}

.hub-select__input {
	-webkit-appearance: none;
	appearance: none;
	min-width: 0;
	max-width: 100%;
	height: 43px;
	margin: 0;
	padding: 0 30px 0 19px;
	overflow: hidden;
	border: var(--border-hairline) solid var(--color-border);
	border-radius: var(--radius-pill);
	background-color: var(--color-surface);
	color: inherit;
	font-size: var(--fs-small);
	font-weight: var(--fw-regular);
	text-overflow: ellipsis;
	white-space: nowrap;
	cursor: pointer;
	transition: border-color var(--transition);
	field-sizing: content; /* Chromium: as wide as the chosen option, not the widest */
}

/* The Dates filters' caret: a small solid triangle pointing down, its
   ink 8px after the label and 16px from the pill's end. */
.hub-select__caret {
	position: absolute;
	top: 50%;
	right: 14px;
	width: 10px;
	height: 10px;
	transform: translateY(-50%) rotate(90deg);
	pointer-events: none;
}

@media (hover: hover) {
	.hub-select__input:hover {
		border-color: var(--color-control-border);
	}
}

.hub-select__input:focus-visible {
	border-color: var(--color-control-border);
	outline: 2px solid var(--color-focus-light);
	outline-offset: 2px;
}

/* Touch screens: 16px, or iOS zooms the page into a select it opens (the
   file draws 14px); less padding keeps the three on one row on a 402px
   phone (where the browser sizes a select to its chosen option). */
@media (pointer: coarse) {
	.hub-select__input {
		padding: 0 24px 0 13px;
		font-size: var(--fs-body);
	}

	.hub-select__caret {
		right: 10px;
	}
}

/* ---------- Results ---------- */

.hub-listing__results {
	padding-block: 14px clamp(55px, 41.06px + 3.468vw, 91px);
	background-color: var(--color-surface);
	color: var(--color-text);
}

/* The listing's results column is 948px at most: here the container. */
.hub-results.listing-results {
	max-width: none;
}

/* The count: 10px over the first card (the listing's head margins are for
   its level pills). */
.hub-results .listing-results__head {
	margin: 0 0 10px;
}

/* While a new state loads (listing.js): the cards dim, after a beat so
   quick answers do not flicker (the listing's rule, for this wrapper). */
.hub-listing.is-loading .listing-results__body {
	opacity: 0.5;
	transition-delay: 0.15s;
}

/* The featured card, then the grid: the cards' stack gap on phones. */
.hub-results__featured {
	margin-bottom: var(--gap-article-cards);
}

@media (min-width: 768px) {
	.hub-results__featured {
		margin-bottom: 48px;
	}
}

@media (min-width: 1024px) {
	.hub-listing__results {
		padding-top: 19px;
	}

	.hub-results__featured {
		margin-bottom: 65px;
	}
}

/* ---------- Panels band ---------- */

.hub-panels {
	--hub-panel-w: 567px;   /* one drawn panel (the pair: 1193px, 59 apart) */
	padding-block: clamp(77px, 72.74px + 1.06vw, 88px) clamp(78px, 74.13px + 0.9634vw, 87px);
	background-color: var(--kh-panels-bg);
	color: var(--color-text-on-dark);
}

.hub-panels__inner {
	display: grid;
	grid-template-columns: minmax(0, var(--hub-panel-w));
	justify-content: center;
	gap: 36px;
}

/* Both panels: side by side from 1024px, as drawn, the same height. */
@media (min-width: 1024px) {
	.hub-panels--pair .hub-panels__inner {
		grid-template-columns: repeat(2, minmax(0, var(--hub-panel-w)));
		column-gap: 59px;
	}
}

/* The panels' spacing over the CTA panel's own (cta-panel.css): top-aligned,
   one padding for both. */
.cta-panel.hub-panel {
	padding: 28px 19px 30px;
}

.cta-panel.hub-panel .cta-panel__body {
	margin-top: 8px;
}

.cta-panel.hub-panel .cta-panel__link {
	margin-top: 14px;
}

@media (min-width: 768px) {
	.cta-panel.hub-panel {
		padding: 44px 32px 46px;
	}

	.cta-panel.hub-panel .cta-panel__body {
		margin-top: 12px;
	}

	.cta-panel.hub-panel .cta-panel__link {
		margin-top: 24px;
	}
}

@media (min-width: 1024px) {
	.cta-panel.hub-panel {
		padding: 52px 39px 53px;
	}

	.cta-panel.hub-panel .cta-panel__link {
		margin-top: 32px;
	}
}

/* ---------- Newsletter form (components/newsletter-form.php) ---------- */

.newsletter-form {
	margin-top: 18px;
}

.newsletter-form__status {
	margin-bottom: 12px;
	font-size: var(--fs-small);
	font-weight: var(--fw-semibold);
	line-height: var(--lh-body);
}

/* Invalid address or failed sign-up: Light Orange (6.05:1 on navy); the
   words carry the meaning, the colour only supports it. */
.newsletter-form__status--invalid,
.newsletter-form__status--error {
	color: var(--color-accent);
}

/* Bots fill every field; people never see this one. */
.newsletter-form__honeypot {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Email pill: 53px tall, the panel's width; the 40px submit circle sits
   7px inside the right end. */
.newsletter-form__field {
	position: relative;
}

.newsletter-form__input {
	display: block;
	width: 100%;
	height: 53px;
	margin: 0;
	padding: 0 calc(7px + var(--submit-size) + 8px) 0 15px;
	border: 0;
	border-radius: var(--radius-pill);
	background-color: var(--color-surface-dark-alt);
	color: var(--color-text-on-dark);
	caret-color: var(--color-text-on-dark);
	font-size: var(--fs-small);
	-webkit-appearance: none;
	appearance: none;
}

.newsletter-form__input::placeholder {
	color: var(--color-placeholder-on-dark);
	opacity: 1;
}

/* Keep the pill navy when the browser autofills the address. */
.newsletter-form__input:-webkit-autofill {
	-webkit-box-shadow: inset 0 0 0 100px var(--color-surface-dark-alt);
	-webkit-text-fill-color: var(--color-text-on-dark);
}

/* Phones: 16px text so iOS Safari does not zoom the page on focus. */
@media (pointer: coarse) {
	.newsletter-form__input {
		font-size: var(--fs-body);
	}
}

/* The global .btn supplies the colours, hover and focus (QH4 tokens) and
   slides the chevron on hover / focus; this only shapes it into the
   borderless circle, as the footer's. */
.newsletter-form__submit {
	position: absolute;
	top: calc((53px - var(--submit-size)) / 2);
	right: 7px;
	width: var(--submit-size);
	height: var(--submit-size);
	padding: 0;
	border-width: 0;
}

/* A 44px hit area around the 40px circle. */
.newsletter-form__submit::after {
	content: "";
	position: absolute;
	inset: calc((var(--submit-size) - var(--tap-target)) / 2);
	border-radius: 50%;
}

.newsletter-form__consent {
	margin-top: 13px;
	font-size: var(--fs-label);
	line-height: var(--lh-body);
}

/* An inline link inside a sentence is underlined so it does not rely on
   colour alone (the design draws it plain). */
.newsletter-form__consent a {
	color: var(--color-link-on-dark);
	text-decoration: underline;
	white-space: nowrap;
	transition: color var(--transition);
}

.newsletter-form__consent a:hover,
.newsletter-form__consent a:focus-visible {
	color: var(--color-link-hover-on-dark);
}

@media (min-width: 1024px) {
	.newsletter-form {
		margin-top: 16px;
	}
}

/* Windows High Contrast drops the fills: the field and the submit keep a
   line round them. */
@media (forced-colors: active) {
	.newsletter-form__input {
		border: var(--border-hairline) solid;
	}

	.newsletter-form__submit {
		border-width: var(--border-hairline);
	}
}