/**
 * Clasva Homepage — first-party component styles. Tokens mirror
 * CLASVA-DESIGN-SYSTEM-v0.1.md's documented values exactly (same hex
 * values as employer-tokens.css) rather than importing that stylesheet
 * cross-plugin — Employer and the public site are separate surfaces with
 * separate lifecycles, but the palette must read as the same product.
 *
 * Font: the SAME system-font stack the Design System's own
 * `--clasva-font-sans` uses for functional/product UI — zero additional
 * font-network-request for these components. The homepage's editorial
 * headline font (hero, section titles) is Breakdance's own typography
 * setting and is untouched here; these classes are for the components
 * this plugin renders only (job cards, search form, newsletter/social).
 */
/*
 * 2026-08-31 audit correction (Batch 2): the 2026-08-26 gold retint of this
 * file is reversed. Token values return to the documented Clasva public
 * system — navy #0f172a / charcoal #1e293b / blue #2563eb / blue-dark
 * #1d4ed8 / blue-light #eff6ff / slate greys — matching every other public
 * page after the site-wide retint reversal. The --clasva-hp-* variable
 * names are unchanged (value mirrored, not renamed).
 */
:root {
	--clasva-hp-navy: #0f172a;
	--clasva-hp-charcoal: #1e293b;
	--clasva-hp-blue: #2563eb;
	--clasva-hp-blue-dark: #1d4ed8;
	--clasva-hp-blue-light: #eff6ff;
	--clasva-hp-white: #ffffff;
	--clasva-hp-gray-50: #f8fafc;
	--clasva-hp-gray-200: #e2e8f0;
	--clasva-hp-gray-500: #475569;
	--clasva-hp-radius: 12px;
	--clasva-hp-radius-sm: 8px;
	--clasva-hp-shadow-card: 0 1px 2px rgba(15, 23, 42, 0.05);
	--clasva-hp-font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.clasva-hp-jobs,
.clasva-hp-search,
.clasva-hp-audience {
	font-family: var(--clasva-hp-font-sans);
	box-sizing: border-box;
}

.clasva-hp-jobs *,
.clasva-hp-search *,
.clasva-hp-audience * {
	box-sizing: border-box;
}

/* ---- Recent jobs ---- */

.clasva-hp-jobs {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 1rem;
}

.clasva-hp-jobs__card {
	display: flex;
	flex-direction: column;
	height: 100%;
	background: var(--clasva-hp-white);
	border: 1px solid var(--clasva-hp-gray-200);
	border-radius: var(--clasva-hp-radius);
	box-shadow: var(--clasva-hp-shadow-card);
	padding: 1.25rem;
	text-decoration: none;
	color: inherit;
	transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
	box-sizing: border-box;
}

.clasva-hp-jobs__card:hover,
.clasva-hp-jobs__card:focus-visible {
	border-color: var(--clasva-hp-blue);
	box-shadow: 0 8px 20px rgba(15, 23, 42, 0.12);
	transform: translateY(-2px);
}

.clasva-hp-jobs__card:focus-visible {
	outline: 2px solid var(--clasva-hp-blue);
	outline-offset: 2px;
}

.clasva-hp-jobs__card-head {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	margin-bottom: 0.75rem;
}

.clasva-hp-jobs__logo {
	border-radius: var(--clasva-hp-radius-sm);
	flex-shrink: 0;
	object-fit: contain;
}

.clasva-hp-jobs__title {
	/* Explicit + !important: this codebase's public theme applies its
	   own !important font-family/color rules directly to bare h1/h2/h3
	   elements (documented in CLASVA-DESIGN-SYSTEM-v0.1.md §2.1 for
	   Employer's h1-h3, and reproduced here for job-card <h3> titles) —
	   an inherited or merely-higher-specificity rule cannot win against
	   it. Job titles are functional/scannable UI, not editorial
	   headings, so they stay DM Sans, never the serif treatment. */
	font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
	font-size: 1rem !important;
	font-weight: 700 !important;
	color: var(--clasva-hp-navy) !important;
	margin: 0 0 0.15em !important;
	line-height: 1.3 !important;
}

.clasva-hp-jobs__company {
	font-size: 0.82rem;
	color: var(--clasva-hp-gray-500);
	margin: 0 0 0.75rem;
}

.clasva-hp-jobs__salary-row {
	margin-bottom: 0.6rem;
}

.clasva-hp-jobs__salary {
	display: inline-block;
	font-size: 0.95rem;
	font-weight: 700;
	color: var(--clasva-hp-blue-dark);
}

.clasva-hp-jobs__meta {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
	margin: auto 0 0;
	padding: 0;
}

.clasva-hp-jobs__meta-item {
	font-size: 0.72rem;
	color: var(--clasva-hp-charcoal);
	background: var(--clasva-hp-gray-50);
	border: 1px solid var(--clasva-hp-gray-200);
	border-radius: 999px;
	padding: 0.2em 0.6em;
}

/* Compatibility/transparency pills — same visual convention as
   clasva-job-search's .clasva-job-search__result-pill (job-search.css),
   reused here rather than reinvented so the same real signal reads
   identically on the homepage and on Find Jobs. Every pill string comes
   straight from Result_Normalizer::compatibility_pills() (real ACF-backed
   values); this file only renders it, never invents one. */
.clasva-hp-jobs__pills {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 0.35em;
	margin: 0.6rem 0 0;
	padding: 0;
}

.clasva-hp-jobs__pill {
	background: var(--clasva-hp-blue-light);
	border: 1px solid var(--clasva-hp-blue);
	color: var(--clasva-hp-charcoal);
	border-radius: 999px;
	padding: 0.22em 0.65em;
	font-size: 0.68rem;
	font-weight: 600;
	line-height: 1.4;
}

.clasva-hp-jobs__empty {
	text-align: center;
	color: var(--clasva-hp-gray-500);
	padding: 2rem 1rem;
	border: 1px dashed var(--clasva-hp-gray-200);
	border-radius: var(--clasva-hp-radius);
}

/* ---- Search form ---- */

.clasva-hp-search {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	background: var(--clasva-hp-white);
	border: 1px solid var(--clasva-hp-gray-200);
	border-radius: var(--clasva-hp-radius);
	padding: 0.6rem;
	box-shadow: var(--clasva-hp-shadow-card);
	max-width: 640px;
}

.clasva-hp-search__field {
	flex: 1 1 200px;
}

.clasva-hp-search input,
.clasva-hp-search select {
	width: 100%;
	border: 1px solid var(--clasva-hp-gray-200);
	border-radius: var(--clasva-hp-radius-sm);
	padding: 0.65em 0.85em;
	font-size: 0.95rem;
	font-family: inherit;
}

.clasva-hp-search input:focus-visible,
.clasva-hp-search select:focus-visible {
	outline: none;
	border-color: var(--clasva-hp-blue);
	box-shadow: 0 0 0 3px var(--clasva-hp-blue-light);
}

.clasva-hp-search__submit {
	background: var(--clasva-hp-blue-dark);
	color: var(--clasva-hp-white) !important;
	border: none;
	border-radius: 999px;
	padding: 0.65em 1.5em;
	font-size: 0.95rem;
	font-weight: 600;
	font-family: inherit;
	cursor: pointer;
	flex: 0 0 auto;
}

.clasva-hp-search__submit:hover {
	background: var(--clasva-hp-blue-dark);
}

.clasva-hp-search__submit:focus-visible {
	outline: 2px solid var(--clasva-hp-white);
	outline-offset: -4px;
	box-shadow: 0 0 0 2px var(--clasva-hp-blue);
}

/* ---- Audience-growth / newsletter ---- */

.clasva-hp-audience {
	background: var(--clasva-hp-navy);
	color: var(--clasva-hp-white) !important;
	border-radius: var(--clasva-hp-radius);
	padding: 2rem;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1.5rem;
	justify-content: space-between;
}

.clasva-hp-audience__copy {
	flex: 1 1 320px;
}

.clasva-hp-audience__heading {
	font-family: var(--clasva-hp-font-sans);
	font-size: 1.4rem;
	font-weight: 700;
	margin: 0 0 0.4em;
	color: var(--clasva-hp-white) !important;
}

.clasva-hp-audience__copy p {
	margin: 0;
	color: #cbd5e1;
	font-size: 0.95rem;
}

.clasva-hp-audience__form {
	display: flex;
	gap: 0.5rem;
	flex: 1 1 320px;
	max-width: 420px;
}

.clasva-hp-audience__form input {
	flex: 1 1 auto;
	border: 1px solid #475569;
	background: #1e293b;
	color: var(--clasva-hp-white) !important;
	border-radius: var(--clasva-hp-radius-sm);
	padding: 0.65em 0.85em;
	font-size: 0.95rem;
	font-family: inherit;
}

.clasva-hp-audience__form input::placeholder {
	color: #94a3b8;
}

.clasva-hp-audience__form input:focus-visible {
	outline: none;
	border-color: var(--clasva-hp-blue);
	box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.35);
}

.clasva-hp-audience__form button {
	background: var(--clasva-hp-blue-dark);
	color: var(--clasva-hp-white) !important;
	border: none;
	border-radius: 999px;
	padding: 0.65em 1.4em;
	font-weight: 600;
	font-family: inherit;
	cursor: pointer;
	flex: 0 0 auto;
}

.clasva-hp-audience__form button:hover {
	background: var(--clasva-hp-blue-dark);
}

.clasva-hp-audience__form button:focus-visible,
.clasva-hp-audience__social a:focus-visible {
	outline: 2px solid var(--clasva-hp-white);
	outline-offset: 2px;
}

.clasva-hp-audience__honeypot {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

.clasva-hp-audience__consent {
	flex-basis: 100%;
	margin: 0.5rem 0 0;
	font-size: 0.75rem;
	color: #94a3b8;
}

.clasva-hp-audience__status {
	flex-basis: 100%;
	margin: 0;
	font-size: 0.85rem;
	color: #93c5fd;
}

.clasva-hp-audience__social {
	display: flex;
	gap: 0.75rem;
}

.clasva-hp-audience__social a {
	color: var(--clasva-hp-white) !important;
	opacity: 0.85;
}

.clasva-hp-audience__social a:hover {
	opacity: 1;
}

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

/* ---- Responsive ---- */

@media (max-width: 900px) {
	.clasva-hp-jobs {
		grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	}
}

@media (max-width: 600px) {
	.clasva-hp-jobs {
		grid-template-columns: 1fr;
	}

	.clasva-hp-search {
		flex-direction: column;
	}

	/* The desktop basis is useful when fields share a row, but becomes a
	 * literal 200px row height once the form stacks on small screens. Let the
	 * controls size from their own content instead. */
	.clasva-hp-search__field {
		flex: 0 1 auto;
	}

	.clasva-hp-search__submit {
		width: 100%;
	}

	.clasva-hp-audience {
		padding: 1.5rem;
	}

	.clasva-hp-audience__form {
		flex-direction: column;
		max-width: 100%;
	}

	.clasva-hp-audience__form button {
		width: 100%;
	}
}