/*
 * ASEO Roles hub (/roles/) — official brand kit only:
 * Primary #37B776, Deep Green #1D7151, Accent/Ink #2C211B, Darkest Green
 * #194035, Yellow #F7CD40, plus the sanctioned tints #E4F6EC / #FAFAF7.
 *
 * Namespace and light-bg/dark-ink treatment match assets/css/locations-hub.css
 * — same pattern, same reasoning (body content, not the footer's dark
 * treatment forced by a global Elementor rule).
 */
.aseo-roles-hub {
	--aseo-roles-primary: #37B776;
	--aseo-roles-primary-hover: #1D7151;
	--aseo-roles-ink: #2C211B;
	--aseo-roles-ink-soft: #194035;
	--aseo-roles-muted: #676675;
	--aseo-roles-paper: #FAFAF7;
	--aseo-roles-tint: #E4F6EC;
	--aseo-roles-yellow: #F7CD40;
	--aseo-roles-yellow-press: #E9BE2E;
	--aseo-roles-line: rgba(44, 33, 27, .12);
	background: var(--aseo-roles-paper);
	color: var(--aseo-roles-ink);
}

.aseo-roles-hub__wrap {
	max-width: 1180px;
	margin: 0 auto;
	padding: 0 24px;
}

/* ---------------------------------------------- hero */

.aseo-roles-hub__hero {
	padding: 56px 0 36px;
	border-bottom: 1px solid var(--aseo-roles-line);
	background:
		radial-gradient(120% 100% at 88% -10%, var(--aseo-roles-tint) 0%, transparent 58%),
		var(--aseo-roles-paper);
}

.aseo-roles-hub__eyebrow {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--aseo-roles-primary-hover);
	margin: 0 0 14px;
}

/*
 * Doubled-up scoping (.aseo-roles-hub .aseo-roles-hub__title, and likewise
 * below for the h2/h3 headings) is not redundant — it is what beats
 * Elementor's global kit CSS (.elementor-kit-5 h1/h2/h3), which is enqueued
 * AFTER this stylesheet and ties on specificity with a single-class
 * selector, so cascade order (last wins) let it silently override the
 * intended sizes: h1 rendered 45px instead of the ~28-42px clamp, h2 35px
 * instead of 22.4px, h3 30px instead of 16px. Confirmed live 2026-08-19 by
 * reading document.styleSheets for every rule matching the element, not by
 * assuming from the source order. Same fix pattern locations-hub.css already
 * uses for its own link colors (`.aseo-loc-hub .aseo-loc-hub__roles a`).
 */
.aseo-roles-hub .aseo-roles-hub__title {
	font-size: clamp(28px, 4.4vw, 42px);
	line-height: 1.1;
	letter-spacing: -0.01em;
	margin: 0 0 16px;
	max-width: 16ch;
	color: var(--aseo-roles-ink);
}

.aseo-roles-hub__lede {
	font-size: 17px;
	line-height: 1.6;
	max-width: 58ch;
	margin: 0 0 26px;
	color: var(--aseo-roles-ink-soft);
}

.aseo-roles-hub__tools {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	align-items: center;
}

.aseo-roles-hub__search {
	position: relative;
	flex: 1 1 320px;
	min-width: 240px;
}

.aseo-roles-hub__search svg {
	position: absolute;
	left: 15px;
	top: 50%;
	transform: translateY(-50%);
	width: 17px;
	height: 17px;
	color: var(--aseo-roles-muted);
	pointer-events: none;
}

.aseo-roles-hub__search input {
	width: 100%;
	font: inherit;
	font-size: 15px;
	color: var(--aseo-roles-ink);
	background: #fff;
	border: 1px solid var(--aseo-roles-line);
	border-radius: 10px;
	padding: 12px 16px 12px 42px;
	transition: border-color .15s ease, box-shadow .15s ease;
}

.aseo-roles-hub__search input::placeholder {
	color: var(--aseo-roles-muted);
}

.aseo-roles-hub__search input:focus {
	outline: none;
	border-color: var(--aseo-roles-primary);
	box-shadow: 0 0 0 3px rgba(55, 183, 118, .22);
}

.aseo-roles-hub .aseo-roles-hub__cta-btn {
	display: inline-block;
	background: var(--aseo-roles-yellow);
	color: var(--aseo-roles-ink);
	font-weight: 700;
	text-decoration: none;
	border-radius: 999px;
	padding: 12px 22px;
	white-space: nowrap;
	transition: background-color .15s ease;
}

.aseo-roles-hub .aseo-roles-hub__cta-btn:hover,
.aseo-roles-hub .aseo-roles-hub__cta-btn:focus-visible {
	background: var(--aseo-roles-yellow-press);
}

.aseo-roles-hub__stats {
	display: flex;
	gap: 28px;
	margin: 30px 0 0;
	padding: 0;
	list-style: none;
}

.aseo-roles-hub__stats li {
	margin: 0;
}

.aseo-roles-hub__stats b {
	display: block;
	font-size: 1.7rem;
	font-weight: 700;
	color: var(--aseo-roles-primary-hover);
	line-height: 1;
}

.aseo-roles-hub__stats span {
	display: block;
	font-size: 12px;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--aseo-roles-muted);
	margin-top: 6px;
}

/* ---------------------------------------------- sticky function chip bar */

.aseo-roles-hub__chipbar {
	position: sticky;
	top: 0;
	z-index: 5;
	background: rgba(250, 249, 247, .92);
	backdrop-filter: blur(8px);
	border-bottom: 1px solid var(--aseo-roles-line);
}

.aseo-roles-hub__chips {
	display: flex;
	gap: 8px;
	overflow-x: auto;
	padding: 12px 24px;
	max-width: 1180px;
	margin: 0 auto;
	list-style: none;
	scrollbar-width: thin;
}

.aseo-roles-hub__chips li {
	margin: 0;
	flex: 0 0 auto;
}

.aseo-roles-hub .aseo-roles-hub__chip {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: 13px;
	font-weight: 700;
	color: var(--aseo-roles-ink);
	text-decoration: none;
	background: #fff;
	border: 1px solid var(--aseo-roles-line);
	border-radius: 999px;
	padding: 7px 14px;
	transition: border-color .15s ease, color .15s ease;
}

.aseo-roles-hub .aseo-roles-hub__chip:hover,
.aseo-roles-hub .aseo-roles-hub__chip:focus-visible {
	border-color: var(--aseo-roles-primary);
	color: var(--aseo-roles-primary-hover);
}

.aseo-roles-hub__chip-count {
	font-size: 11px;
	font-weight: 700;
	color: var(--aseo-roles-primary-hover);
	background: var(--aseo-roles-tint);
	border-radius: 20px;
	padding: 1px 7px;
}

/* ---------------------------------------------- function sections */

.aseo-roles-hub__fn {
	padding: 48px 0 8px;
	scroll-margin-top: 60px;
}

.aseo-roles-hub__fn-head {
	display: flex;
	align-items: baseline;
	gap: 12px;
	flex-wrap: wrap;
	padding-bottom: 12px;
	margin-bottom: 22px;
	border-bottom: 2px solid var(--aseo-roles-tint);
}

.aseo-roles-hub .aseo-roles-hub__fn-head h2 {
	font-size: 1.4rem;
	font-weight: 700;
	color: var(--aseo-roles-primary-hover);
	margin: 0;
}

.aseo-roles-hub__fn-count {
	font-size: 13px;
	color: var(--aseo-roles-muted);
}

.aseo-roles-hub__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	/* Equal row height: every card in the grid stretches to the tallest
	   sibling in its row (grid's default align-items: stretch), and each
	   card is itself a column flexbox — see .aseo-roles-hub__card below — so
	   short-blurb cards don't look shorter than their row neighbors. */
	align-items: stretch;
	gap: 14px;
}

.aseo-roles-hub__grid li {
	margin: 0;
}

.aseo-roles-hub .aseo-roles-hub__card {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	background: #fff;
	border: 1px solid var(--aseo-roles-line);
	border-radius: 12px;
	padding: 18px 18px 17px;
	text-decoration: none;
	color: inherit;
	overflow: hidden;
	transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.aseo-roles-hub__card::before {
	content: "";
	position: absolute;
	inset: 0 auto 0 0;
	width: 3px;
	background: var(--aseo-roles-primary);
	transform: scaleY(0);
	transform-origin: top;
	transition: transform .18s ease;
}

.aseo-roles-hub .aseo-roles-hub__card:hover,
.aseo-roles-hub .aseo-roles-hub__card:focus-visible {
	transform: translateY(-2px);
	box-shadow: 0 12px 24px -14px rgba(25, 64, 53, .28);
	outline: none;
}

.aseo-roles-hub__card:hover::before,
.aseo-roles-hub__card:focus-visible::before {
	transform: scaleY(1);
}

/* Decorative per-FUNCTION icon (not per-role — no role page has a real
   featured image to show, see page-roles.php's docblock). Fixed-size circle
   so every card's header row lines up regardless of title length. */
.aseo-roles-hub__card-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 36px;
	height: 36px;
	margin-bottom: 12px;
	border-radius: 9px;
	background: var(--aseo-roles-tint);
	color: var(--aseo-roles-primary-hover);
}

.aseo-roles-hub__card-icon svg {
	width: 18px;
	height: 18px;
}

.aseo-roles-hub .aseo-roles-hub__card h3 {
	font-size: 16px;
	font-weight: 700;
	color: var(--aseo-roles-ink);
	margin: 0 0 5px;
	line-height: 1.3;
	padding-right: 16px;
}

.aseo-roles-hub .aseo-roles-hub__card p {
	margin: 0;
	font-size: 14px;
	line-height: 1.5;
	color: var(--aseo-roles-muted);
}

.aseo-roles-hub__empty {
	display: none;
	padding: 48px 0;
	text-align: center;
	color: var(--aseo-roles-ink-soft);
}

/* ---------------------------------------------- closing CTA + cross-link */

.aseo-roles-hub__cta {
	margin: 56px 0 0;
	background: var(--aseo-roles-ink-soft);
	color: #F1EDE4;
	border-radius: 14px;
	padding: 36px 34px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
}

.aseo-roles-hub .aseo-roles-hub__cta h2 {
	font-size: 1.4rem;
	font-weight: 700;
	color: #fff;
	margin: 0 0 6px;
}

.aseo-roles-hub__cta p {
	margin: 0;
	color: #C9C4BC;
	max-width: 50ch;
}

.aseo-roles-hub__cross {
	margin: 32px 0 56px;
	padding: 24px 28px;
	border-radius: 10px;
	background: var(--aseo-roles-tint);
}

.aseo-roles-hub .aseo-roles-hub__cross h2 {
	font-size: 18px;
	margin: 0 0 8px;
	color: var(--aseo-roles-ink);
}

.aseo-roles-hub__cross p {
	margin: 0;
	line-height: 1.6;
	color: var(--aseo-roles-ink-soft);
}

.aseo-roles-hub .aseo-roles-hub__cross a {
	color: var(--aseo-roles-primary-hover);
	font-weight: 700;
}

@media (max-width: 640px) {
	.aseo-roles-hub__hero { padding-top: 40px; }
	.aseo-roles-hub__stats { gap: 20px; }
	.aseo-roles-hub__cta { padding: 26px 22px; }
	.aseo-roles-hub__cross { padding: 20px 20px; }
}

@media (prefers-reduced-motion: reduce) {
	.aseo-roles-hub .aseo-roles-hub__card,
	.aseo-roles-hub .aseo-roles-hub__card::before {
		transition: none;
	}
	.aseo-roles-hub .aseo-roles-hub__card:hover {
		transform: none;
	}
}