/*
 * Thrive at Work — shared component styles
 *
 * Used by more than one section/element. Everything is scoped
 * under .taw-site and taw-prefixed, so nothing here can affect
 * WPBakery, WordPress Core, or third-party plugin markup.
 */

.taw-site .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect( 1px, 1px, 1px, 1px );
	white-space: nowrap;
}

/* Eyebrow label — amber (#8a6a10) is the most common color
   across sections (Pathways, Framework, Bio, Footer columns);
   green/gold are the exceptions, applied via modifiers. */
.taw-site .taw-eyebrow {
	font: var( --taw-text-eyebrow );
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var( --taw-color-eyebrow-amber );
	margin: 0 0 12px;
	display: flex;
	align-items: center;
	gap: 8px;
}

.taw-site .taw-eyebrow--sm {
	font-size: 11px;
	letter-spacing: 1.6px;
	margin-bottom: 8px;
}

.taw-site .taw-eyebrow--green {
	color: var( --taw-color-primary-800 );
}

.taw-site .taw-eyebrow--gold {
	color: var( --taw-color-accent-gold );
}

.taw-site .taw-eyebrow--on-dark {
	color: var( --taw-color-text-on-dark );
}

.taw-site .taw-eyebrow--badge {
	background: var( --taw-color-bg-alt-3 );
	letter-spacing: 1.8px;
	border-radius: var( --taw-radius-pill );
	padding: 9px 16px;
	display: inline-flex;
	width: fit-content;
}

.taw-site .taw-eyebrow__dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var( --taw-color-accent-gold );
	display: inline-block;
	flex: none;
}

/* Section header (eyebrow + heading + subheading) */
.taw-site .taw-section-header {
	max-width: 640px;
	margin-bottom: 48px;
}

.taw-site .taw-section-header--center {
	margin-inline: auto;
	text-align: center;
}

.taw-site .taw-section-header__heading {
	/* 38px/44px is the most common section-heading size (matches
	   BlogFeed exactly); Pathways/Framework (40px) and Lead
	   (36px) override this locally — Figma does not use one
	   uniform heading size across every section. */
	font: var( --taw-text-h2 );
	color: var( --taw-color-primary-900 );
	margin: 0 0 16px;
}

.taw-site .taw-section-header__sub {
	font: 400 17px/24px var( --taw-font-body );
	color: var( --taw-color-text-body );
	margin: 0;
}

/* Buttons — Figma's primary pill button (Hero) is the
   reference: bold 15px, px-28/py-16. Instances that deviate
   (nav CTA, Lead/FinalCTA gold buttons) override locally. */
.taw-site .taw-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font: 700 15px/1 var( --taw-font-body );
	text-decoration: none;
	border-radius: var( --taw-radius-pill );
	padding: 16px 28px;
	border: 1px solid transparent;
	cursor: pointer;
	transition: opacity 0.15s ease, transform 0.15s ease;
	line-height: 1;
}

.taw-site .taw-btn:hover,
.taw-site .taw-btn:focus-visible {
	opacity: 0.88;
}

.taw-site .taw-btn--primary {
	background: var( --taw-color-primary-800 );
	color: var( --taw-color-bg );
}

.taw-site .taw-btn--secondary {
	background: var( --taw-color-bg );
	color: var( --taw-color-primary-800 );
	border-color: var( --taw-color-primary-800 );
	border-width: 1.5px;
}

.taw-site .taw-btn--gold {
	background: var( --taw-color-accent-gold );
	color: var( --taw-color-primary-900 );
}

.taw-site .taw-btn--cream {
	background: var( --taw-color-bg-alt-3 );
	color: var( --taw-color-primary-800 );
}

.taw-site .taw-btn--sm {
	padding: 13px 24px;
	font-size: 14px;
}

/* Link with trailing arrow ("Read →", "Explore the framework →") */
.taw-site .taw-link-arrow {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var( --taw-color-primary-800 );
	font: 700 15px/1 var( --taw-font-body );
	text-decoration: none;
}

.taw-site .taw-link-arrow:hover,
.taw-site .taw-link-arrow:focus-visible {
	text-decoration: underline;
}

.taw-site .taw-link-arrow--sm {
	font-size: 14px;
}

/* Small pill/meta tag ("12 resources", "B.R.A.N.C.H. path") */
.taw-site .taw-pill {
	display: inline-flex;
	align-items: center;
	background: var( --taw-color-bg-alt-3 );
	color: var( --taw-color-primary-800 );
	border-radius: var( --taw-radius-pill );
	padding: 8px 14px;
	font: 700 11.5px/1 var( --taw-font-body );
	letter-spacing: 0.5px;
}

/* Filter pills row */
.taw-site .taw-filter-pills {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0 0 32px;
	padding: 0;
}

.taw-site .taw-filter-pill {
	font: 700 13.5px/1 var( --taw-font-body );
	background: var( --taw-color-bg );
	border: 1.2px solid var( --taw-color-border );
	color: var( --taw-color-text );
	border-radius: var( --taw-radius-pill );
	padding: 10px 18px;
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.taw-site .taw-filter-pill:hover {
	border-color: var( --taw-color-primary-800 );
	color: var( --taw-color-primary-800 );
}

.taw-site .taw-filter-pill:focus-visible {
	outline: 2px solid var( --taw-color-primary-800 );
	outline-offset: 2px;
}

.taw-site .taw-filter-pill.is-active {
	background: var( --taw-color-primary-800 );
	border-color: var( --taw-color-primary-800 );
	color: var( --taw-color-bg );
}

.taw-site .taw-filter-pill.is-active:hover {
	color: var( --taw-color-bg ); /* keep the active pill's own contrast on hover, don't recolor text to green */
}