/**
 * IHR recruitment: public stylesheet (theme-owned).
 *
 * Reconciled with the corporate Ledger and Plate system on 8 October 2026
 * (G3, findings K1 to K8 on the approved design's Jobs kinship board). Class
 * names, template structure and the plugin's contract tokens are unchanged.
 *
 * Replaces the plugin baseline. In the theme:
 *   add_filter( 'ihr_jobs_load_public_css', '__return_false' );
 * and enqueue this file wherever a recruitment block renders.
 *
 * It styles the classes listed in ihr-jobs/docs/DESIGN-HANDOFF.md plus the
 * few wrapper classes added by the theme template overrides
 * (.ihr-job__layout, .ihr-job__aside, .ihr-job__body, .ihr-job-card__main,
 * .ihr-job-card__deadline, .ihr-reference, .ihr-next).
 * It works with the plugin's default templates too; the overrides only
 * unlock the two-column layouts.
 *
 * Breakpoints are container queries on .ihr-jobs-page, so the surfaces
 * respond to the space they are given (page, Site Editor preview, pattern).
 */

/* ---------- Tokens ---------- */

:root {
	/* Every colour and face now reads the corporate theme.json presets
	   (Ledger and Plate, reconciliation findings K1 to K3), so a confirmed
	   brand value changes in one place.
	   K1. Neutrals: tints of the artwork's print black, no green cast. */
	--ihr-ink: var(--wp--preset--color--contrast);
	--ihr-text: var(--wp--preset--color--contrast);
	--ihr-muted: var(--wp--preset--color--muted);
	--ihr-line: var(--wp--preset--color--line);
	--ihr-line-strong: var(--wp--preset--color--line-strong);
	--ihr-surface: var(--wp--preset--color--base);
	--ihr-band: var(--wp--preset--color--band);

	/* K2 and K6. Brand accent is the corporate Action role (provisional
	   rust). Brass is retired: the corporate system reserves the Mark colour,
	   so former brass details take ink. */
	--ihr-terracotta: var(--wp--preset--color--action);
	--ihr-action: var(--wp--preset--color--action);
	--ihr-action-hover: var(--wp--preset--color--action-hover);
	--ihr-brass: var(--wp--preset--color--contrast);

	/* States. Error is a cool crimson so it never reads as the brand accent. */
	--ihr-error: var(--wp--preset--color--error);
	--ihr-error-bg: var(--wp--preset--color--error-bg);
	--ihr-success: var(--wp--preset--color--success);
	--ihr-success-bg: var(--wp--preset--color--success-bg);

	/* Type. K3: Newsreader becomes EB Garamond (self-hosted by the theme). */
	--ihr-font-display: var(--wp--preset--font-family--serif);
	--ihr-font-body: var(--wp--preset--font-family--serif);
	--ihr-text-xs: 0.9375rem;
	--ihr-text-sm: 1.0625rem;
	--ihr-text-md: 1.1875rem;
	--ihr-text-lg: 1.3125rem;
	--ihr-text-xl: 1.625rem;
	--ihr-text-2xl: 2.125rem;
	--ihr-text-3xl: 3rem;

	/* Space: 4px base */
	--ihr-s1: 0.25rem;
	--ihr-s2: 0.5rem;
	--ihr-s3: 0.75rem;
	--ihr-s4: 1rem;
	--ihr-s5: 1.5rem;
	--ihr-s6: 2rem;
	--ihr-s7: 3rem;
	--ihr-s8: 4rem;
	--ihr-s9: 6rem;

	/* Shape and measure */
	--ihr-radius: 2px;
	--ihr-control: 3rem;
	--ihr-measure: 42rem;
	--ihr-form: 38rem;
	/* K4. The recruitment frame shares the corporate shell's measure and
	   gutters (1440 with 80 px margins, 20 px on phones), so page text and
	   the header logo share a left edge. */
	--ihr-wide: 90rem;
	--ihr-gutter: var(--wp--custom--gutter);

	/* The plugin's own contract tokens, mapped onto the system. */
	--ihr-jobs-gap: var(--ihr-s5);
	--ihr-jobs-gap-small: var(--ihr-s2);
	--ihr-jobs-border: 1px solid var(--ihr-line);
	--ihr-jobs-radius: var(--ihr-radius);
	--ihr-jobs-muted: var(--ihr-muted);
	--ihr-jobs-error: var(--ihr-error);
	--ihr-jobs-success: var(--ihr-success);
	--ihr-jobs-focus: 3px solid var(--ihr-ink);
}

/* Full embeds use their available content width for the existing responsive
   rules. Candidate templates retain their outer frame; compact stays in ihr.css. */
:where(.ihr-jobs-listing-block:not(.is-style-compact), .ihr-job-details-block, .ihr-job-summary-block, .ihr-application-block):not(.ihr-jobs-page *) {
	container: ihr-page / inline-size;
	font-family: var(--ihr-font-body);
	font-size: var(--ihr-text-md);
	line-height: 1.6;
}

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

.ihr-jobs-page {
	background: var(--ihr-surface);
	color: var(--ihr-text);
	container: ihr-page / inline-size;
	font-family: var(--ihr-font-body);
	font-size: var(--ihr-text-md);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

.ihr-jobs-page *,
.ihr-jobs-page *::before,
.ihr-jobs-page *::after {
	box-sizing: border-box;
}

.ihr-jobs-page > * {
	margin-inline: auto;
	max-width: var(--ihr-wide);
	padding-inline: var(--ihr-gutter);
}

.ihr-jobs-page .screen-reader-text {
	border: 0;
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

.ihr-jobs-page a {
	color: var(--ihr-ink);
	text-decoration-color: var(--ihr-terracotta);
	text-decoration-thickness: 1.5px;
	text-underline-offset: 0.2em;
}

.ihr-jobs-page a:hover {
	color: var(--ihr-terracotta);
}

.ihr-jobs-page :focus-visible {
	outline: var(--ihr-jobs-focus);
	outline-offset: 2px;
}

/* ---------- Page head (listing and vacancy) ---------- */

.ihr-page-head {
	padding-block: var(--ihr-s8) var(--ihr-s6);
}

/* K8. The corporate system uses no eyebrow device: no bar, no tracked
   capitals. "All vacancies" is a plain back link (.ihr-back); the older
   .ihr-eyebrow class renders the same way so saved content still looks right. */
.ihr-back,
.ihr-eyebrow {
	color: var(--ihr-muted);
	font-size: var(--ihr-text-sm);
	font-weight: 500;
	margin: 0 0 var(--ihr-s4);
}

.ihr-back a,
.ihr-eyebrow a {
	align-items: center;
	color: var(--ihr-ink);
	display: inline-flex;
	min-height: 2.75rem;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.25em;
}

.ihr-back a::before {
	content: "\2190\00a0";
}

.ihr-back a:hover,
.ihr-eyebrow a:hover {
	text-decoration-color: var(--ihr-action);
	text-decoration-thickness: 2px;
}

.ihr-page-head__title,
.ihr-job__title {
	color: var(--ihr-ink);
	font-family: var(--ihr-font-display);
	font-size: clamp(2.125rem, 1.4rem + 3.4cqw, var(--ihr-text-3xl));
	font-weight: 400;
	letter-spacing: -0.015em;
	line-height: 1.08;
	margin: 0;
	max-width: 22ch;
	text-wrap: balance;
}

.ihr-page-head__lead {
	color: var(--ihr-text);
	font-size: var(--ihr-text-lg);
	line-height: 1.5;
	margin: var(--ihr-s5) 0 0;
	max-width: 38rem;
}

/* ---------- Listing hero with a photograph ----------
   A full-width image band with the page introduction on a white panel
   that rises over its lower edge. Without an image the band shows a flat
   ink tint, so the page never looks broken while photography is pending. */

.ihr-jobs-page > .ihr-hero,
.ihr-jobs-page > .ihr-band {
	max-width: none;
	padding-inline: 0;
}

.ihr-hero__media {
	background: var(--ihr-ink); /* K5 */
	height: clamp(12rem, 32cqw, 26rem);
	margin: 0;
	overflow: hidden;
}

.ihr-hero__media figure {
	height: 100%;
	margin: 0;
}

/* Faces usually sit in the upper third, so the crop favours it. A focal
   point set in the editor (inline object-position) overrides this. */
.ihr-hero__media img {
	display: block;
	height: 100%;
	object-fit: cover;
	object-position: 50% 25%;
	width: 100%;
}

.ihr-hero__inner {
	margin-inline: auto;
	max-width: var(--ihr-wide);
	padding-inline: var(--ihr-gutter);
}

.ihr-hero__panel {
	background: var(--ihr-surface);
	padding-block: var(--ihr-s6) var(--ihr-s7);
	position: relative;
}

.ihr-hero__panel .ihr-page-head__lead {
	margin-bottom: var(--ihr-s5);
}

@container ihr-page (min-width: 56rem) {
	/* The panel overhangs the grid by its own padding, so its text still
	   lines up with the list below. */
	.ihr-hero__panel {
		margin-left: calc(var(--ihr-s7) * -1);
		margin-top: -7rem;
		max-width: 44rem;
		padding: var(--ihr-s7) var(--ihr-s7) var(--ihr-s7);
	}
}

/* In WordPress, blocks in a flow layout get a block gap (margin-block-start)
   from selectors that outrank one class, which cancelled the panel's
   overlap and opened gaps the design does not have. On the listing pattern
   this stylesheet sets every space itself, so those gaps are removed here.
   `body` raises the specificity above WordPress's layout rules. */
body .ihr-jobs-page > .ihr-hero,
body .ihr-jobs-page > .ihr-jobs-list-anchor,
body .ihr-jobs-page > .ihr-band,
body .ihr-jobs-page .ihr-hero__inner,
body .ihr-jobs-page .ihr-band__inner > * {
	margin-block-start: 0;
}

/* The list runs straight into the band, as in the design. */
body .ihr-jobs-page .ihr-jobs-list-anchor:has(+ .ihr-band) .ihr-jobs-list {
	margin-bottom: 0;
}

@container ihr-page (min-width: 56rem) {
	body .ihr-jobs-page .ihr-hero__panel {
		margin-top: -7rem;
	}
}

/* ---------- Band with a second photograph ---------- */

.ihr-band {
	background: var(--ihr-band);
}

.ihr-band__inner {
	display: grid;
	gap: var(--ihr-s6);
	grid-template-columns: minmax(0, 1fr);
	margin-inline: auto;
	max-width: var(--ihr-wide);
	padding: var(--ihr-s8) var(--ihr-gutter);
}

.ihr-band__media {
	aspect-ratio: 4 / 3;
	background: var(--ihr-ink); /* K5 */
	margin: 0;
	overflow: hidden;
}

.ihr-band__media img {
	display: block;
	height: 100%;
	object-fit: cover;
	width: 100%;
}

.ihr-band__title {
	color: var(--ihr-ink);
	font-family: var(--ihr-font-display);
	font-size: var(--ihr-text-2xl);
	font-weight: 400;
	letter-spacing: -0.015em;
	line-height: 1.15;
	margin: 0 0 var(--ihr-s5);
}

.ihr-steps {
	counter-reset: ihr-step;
	list-style: none;
	margin: 0;
	padding: 0;
}

.ihr-steps li {
	border-top: 1px solid var(--ihr-line);
	counter-increment: ihr-step;
	padding: var(--ihr-s4) 0 var(--ihr-s4) 3rem;
	position: relative;
}

.ihr-steps li::before {
	color: var(--ihr-terracotta);
	content: counter(ihr-step);
	font-family: var(--ihr-font-display);
	font-size: var(--ihr-text-xl);
	left: 0;
	line-height: 1.2;
	position: absolute;
	top: var(--ihr-s4);
}

.ihr-steps strong {
	color: var(--ihr-ink);
	display: block;
	font-weight: 600;
}

@container ihr-page (min-width: 56rem) {
	.ihr-band__inner {
		align-items: center;
		column-gap: var(--ihr-s8);
		grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
	}
}

/* ---------- Jobs listing ---------- */

.ihr-jobs-list-anchor {
	scroll-margin-top: var(--ihr-s5);
}

.ihr-jobs-list__count {
	border-bottom: 1px solid var(--wp--preset--color--mark);
	color: var(--ihr-muted);
	font-size: var(--ihr-text-sm);
	margin: 0;
	padding-bottom: var(--ihr-s3);
}

.ihr-jobs-list__count strong {
	color: var(--ihr-ink);
	font-weight: 600;
}

.ihr-jobs-list {
	list-style: none;
	margin: 0 0 var(--ihr-s9);
	padding: 0;
}

.ihr-jobs-list:first-child {
	border-top: 1px solid var(--wp--preset--color--mark);
}

.ihr-jobs-list__item {
	border-bottom: 1px solid var(--ihr-line);
}

.ihr-jobs-list__empty {
	background: var(--ihr-band);
	font-size: var(--ihr-text-lg);
	margin: 0 0 var(--ihr-s9);
	padding: var(--ihr-s6);
}

/* A ruled index row, not a boxed card. */
.ihr-job-card {
	display: grid;
	gap: var(--ihr-s4);
	padding-block: var(--ihr-s6);
}

.ihr-job-card__title {
	font-family: var(--ihr-font-display);
	font-size: var(--ihr-text-xl);
	font-weight: 500;
	letter-spacing: -0.01em;
	line-height: 1.2;
	margin: 0 0 var(--ihr-s3);
	text-wrap: balance;
}

.ihr-job-card__link {
	text-decoration: none;
}

.ihr-job-card__link:hover {
	text-decoration: underline;
}

/* The summary keeps a row to three lines however long the text is. IHR's
   job summaries run to 45 words or more; the full text is on the vacancy
   page, and screen readers still read the whole sentence here. */
.ihr-job-card__summary {
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	color: var(--ihr-muted);
	display: -webkit-box;
	line-clamp: 3;
	margin: var(--ihr-s3) 0 0;
	max-width: var(--ihr-measure);
	overflow: hidden;
}

.ihr-job-card__deadline {
	font-size: var(--ihr-text-sm);
	margin: 0;
}

.ihr-job-card__deadline-label {
	color: var(--ihr-muted);
	display: block;
	font-size: var(--ihr-text-xs);
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.ihr-job-card__deadline time {
	color: var(--ihr-ink);
	display: block;
	font-size: var(--ihr-text-md);
	font-weight: 600;
}

.ihr-job-card__deadline-relative {
	color: var(--ihr-muted);
	display: block;
}

.ihr-job-card__deadline--soon .ihr-job-card__deadline-relative {
	color: var(--ihr-terracotta);
	font-weight: 600;
}

.ihr-job-card__action {
	margin: 0;
}

.ihr-job-card__cta {
	align-items: center;
	display: inline-flex;
	font-weight: 600;
	gap: var(--ihr-s2);
	min-height: 2.75rem;
}

.ihr-job-card__cta::after {
	content: "\2192";
	transition: transform 0.15s ease;
}

.ihr-job-card__cta:hover::after {
	transform: translateX(3px);
}

@container ihr-page (min-width: 56rem) {
	.ihr-job-card {
		align-items: start;
		column-gap: var(--ihr-s7);
		grid-template-columns: minmax(0, 1fr) 13rem 12.5rem;
	}

	.ihr-job-card__action {
		justify-self: end;
	}

	/* Default plugin template (no wrappers): content stacks in the first
	   two columns and the action sits in the third. */
	.ihr-job-card > .ihr-job-card__title,
	.ihr-job-card > .ihr-job-card__facts,
	.ihr-job-card > .ihr-job-card__summary {
		grid-column: 1 / span 2;
		margin-block: 0;
	}

	.ihr-job-card > .ihr-job-card__title ~ .ihr-job-card__action {
		align-self: center;
		grid-column: 3;
		grid-row: 1 / span 3;
	}
}

/* ---------- Key facts ---------- */

.ihr-job-facts {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ihr-s2) var(--ihr-s6);
	margin: 0;
}

.ihr-job-facts__label {
	color: var(--ihr-muted);
	font-size: var(--ihr-text-xs);
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.ihr-job-facts__value {
	color: var(--ihr-ink);
	font-weight: 500;
	margin: 0;
}

/* In listing rows the label is redundant next to obvious values.
   The closing date keeps its label. */
.ihr-job-card__facts .ihr-job-facts__item--location .ihr-job-facts__label,
.ihr-job-card__facts .ihr-job-facts__item--employment-type .ihr-job-facts__label {
	border: 0;
	clip-path: inset(50%);
	height: 1px;
	overflow: hidden;
	position: absolute;
	width: 1px;
}

.ihr-job-card__facts .ihr-job-facts__item + .ihr-job-facts__item {
	border-left: 1px solid var(--ihr-line-strong);
	padding-left: var(--ihr-s4);
}

.ihr-job-card__facts {
	column-gap: var(--ihr-s4);
}

/* ---------- Vacancy page ---------- */

.ihr-job {
	padding-bottom: var(--ihr-s8);
}

.ihr-job__status {
	align-items: center;
	background: var(--ihr-band);
	color: var(--ihr-ink);
	display: flex;
	font-weight: 600;
	gap: var(--ihr-s3);
	margin: 0 0 var(--ihr-s6);
	padding: var(--ihr-s4) var(--ihr-s5);
}

/* A square marker, so the state never depends on colour alone. */
.ihr-job__status::before {
	border: 2px solid var(--ihr-ink);
	content: "";
	flex: none;
	height: 0.75rem;
	width: 0.75rem;
}

.ihr-job__layout {
	display: grid;
	gap: var(--ihr-s6);
	/* One shrinkable column on phones, so enlarged text reflows (G3 check). */
	grid-template-columns: minmax(0, 1fr);
}

.ihr-job__aside {
	border-top: 1px solid var(--wp--preset--color--mark);
	padding-top: var(--ihr-s5);
}

.ihr-job__aside .ihr-job-facts {
	display: grid;
	gap: var(--ihr-s4) var(--ihr-s6);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr));
}

.ihr-job-facts__item--closing-date .ihr-job-facts__value {
	font-weight: 600;
}

.ihr-job__section {
	border-top: 1px solid var(--ihr-line);
	margin: 0;
	padding-block: var(--ihr-s6);
}

.ihr-job__body > .ihr-job__section:first-child,
.ihr-job > .ihr-job__facts + .ihr-job__section {
	border-top: 1px solid var(--wp--preset--color--mark);
}

.ihr-job > .ihr-job__facts {
	margin-bottom: var(--ihr-s6);
}

.ihr-job__heading {
	color: var(--ihr-ink);
	font-family: var(--ihr-font-display);
	font-size: var(--ihr-text-xl);
	font-weight: 500;
	letter-spacing: -0.01em;
	line-height: 1.2;
	margin: 0 0 var(--ihr-s4);
}

.ihr-job__overview,
.ihr-job__list,
.ihr-job__subheading {
	max-width: var(--ihr-measure);
}

/* Sub-headings inside a section, for grouped lists such as
   "Responsibilities" split by area of work. */
.ihr-job__subheading {
	color: var(--ihr-ink);
	font-family: var(--ihr-font-body);
	font-size: 1.125rem;
	font-weight: 600;
	line-height: 1.35;
	margin: var(--ihr-s6) 0 var(--ihr-s3);
}

.ihr-job__heading + .ihr-job__subheading {
	margin-top: var(--ihr-s2);
}

.ihr-job__overview > :first-child {
	margin-top: 0;
}

.ihr-job__overview > :last-child {
	margin-bottom: 0;
}

.ihr-job__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.ihr-job__list li {
	padding-left: var(--ihr-s5);
	position: relative;
}

.ihr-job__list li + li {
	margin-top: var(--ihr-s3);
}

/* A small square marker. A short rule here reads as a dash list. */
.ihr-job__list li::before {
	background: var(--ihr-brass);
	content: "";
	height: 0.3125rem;
	left: 0.125rem;
	position: absolute;
	top: 0.7em;
	width: 0.3125rem;
}

/* A standing note to applicants, set once under Jobs, Settings (item E14).
   Printed only when the plugin passes it. */
.ihr-job__note {
	color: var(--ihr-muted);
	font-size: var(--ihr-text-sm);
	line-height: 1.5;
	margin: var(--ihr-s4) 0 0;
}

/* Buttons: one primary (K6: the corporate Action colour), one secondary (outline). */
.ihr-job__apply {
	margin: 0;
}

.ihr-job__apply-link,
.ihr-jobs-page .ihr-form__submit,
.ihr-button {
	align-items: center;
	background: var(--ihr-action);
	border: 1.5px solid var(--ihr-action);
	border-radius: var(--ihr-radius);
	color: #fff;
	cursor: pointer;
	display: inline-flex;
	font: 600 var(--ihr-text-md) / 1.2 var(--ihr-font-body);
	gap: var(--ihr-s3);
	justify-content: center;
	min-height: var(--ihr-control);
	padding: var(--ihr-s3) var(--ihr-s5);
	text-decoration: none;
}

.ihr-jobs-page .ihr-job__apply-link,
.ihr-jobs-page .ihr-button {
	color: #fff;
}

.ihr-jobs-page .ihr-job__apply-link:hover,
.ihr-jobs-page .ihr-form__submit:hover,
.ihr-jobs-page .ihr-button:hover {
	background: var(--ihr-action-hover); /* K5, K6 */
	border-color: var(--ihr-action-hover);
	color: #fff;
}

.ihr-jobs-page .ihr-button--secondary {
	background: transparent;
	color: var(--ihr-ink);
}

.ihr-jobs-page .ihr-button--secondary:hover {
	background: var(--ihr-band);
	border-color: var(--ihr-ink);
	color: var(--ihr-ink);
}

.ihr-job__apply-link::after {
	content: "\2192";
}

/* End of the description: a closing call to action on wide screens (phones
   already have the pinned Apply bar), or the closed notice at any width. */
.ihr-job__closing {
	display: none;
}

.ihr-job__closing--closed {
	display: block;
	margin-top: var(--ihr-s6);
}

.ihr-job__closing--closed .ihr-notice {
	max-width: var(--ihr-form);
}

.ihr-job__closing-title {
	color: var(--ihr-ink);
	font-family: var(--ihr-font-display);
	font-size: var(--ihr-text-xl);
	font-weight: 500;
	line-height: 1.2;
	margin: 0;
}

.ihr-job__closing-meta {
	color: var(--ihr-muted);
	margin: var(--ihr-s1) 0 0;
}

/* K7 (finding F10). One filled Apply control in view at a time: the sticky
   aside keeps the filled primary, the closing panel's control is an
   outline. Same destination, accessible name and reading order. */
.ihr-jobs-page .ihr-job__closing--open .ihr-job__apply-link {
	background: transparent;
	border-color: var(--ihr-ink);
	color: var(--ihr-ink);
}

.ihr-jobs-page .ihr-job__closing--open .ihr-job__apply-link:hover {
	background: var(--ihr-band);
	border-color: var(--ihr-ink);
	color: var(--ihr-ink);
}

@container ihr-page (min-width: 56rem) {
	.ihr-job__closing--open {
		align-items: center;
		border-top: 1px solid var(--wp--preset--color--mark);
		display: flex;
		flex-wrap: wrap;
		gap: var(--ihr-s5) var(--ihr-s7);
		justify-content: space-between;
		margin-top: var(--ihr-s6);
		padding-top: var(--ihr-s6);
	}
}

/* ---------- Application page (/jobs/{slug}/apply/) ----------
   The form has its own page. A short summary of the role stays beside it
   (above it on phones) so the candidate never loses track of what they
   are applying for. */

.ihr-apply {
	display: grid;
	gap: var(--ihr-s6);
	padding-bottom: var(--ihr-s9);
}

.ihr-apply .ihr-application {
	padding-bottom: 0;
}

.ihr-job-summary {
	border-top: 1px solid var(--wp--preset--color--mark);
	padding-top: var(--ihr-s5);
}

.ihr-job-summary__title {
	color: var(--ihr-ink);
	font-family: var(--ihr-font-display);
	font-size: var(--ihr-text-lg);
	font-weight: 500;
	line-height: 1.25;
	margin: var(--ihr-s1) 0 var(--ihr-s4);
	text-wrap: balance;
}

/* "You are applying for", above the role name. The summary stays in view
   while the form scrolls, so the role name is always on screen. */
.ihr-job-summary__label {
	color: var(--ihr-muted);
	display: block;
	font-family: var(--ihr-font-body);
	font-size: var(--ihr-text-xs);
	font-weight: 600;
	letter-spacing: 0.08em;
	line-height: 1.4;
	margin-bottom: var(--ihr-s1);
	text-transform: uppercase;
}

.ihr-job-summary .ihr-job-facts {
	display: grid;
	gap: var(--ihr-s3) var(--ihr-s6);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr));
}

.ihr-job-summary__link {
	margin: var(--ihr-s4) 0 0;
}

.ihr-job-summary__link a {
	font-weight: 600;
}

/* Narrow screens: the summary sits directly under the page title, so the
   role name is not repeated visually. It stays available to screen readers
   as the label of the summary. */
@container ihr-page (max-width: 55.99rem) {
	.ihr-job-summary__title {
		clip-path: inset(50%);
		height: 1px;
		margin: -1px;
		overflow: hidden;
		position: absolute;
		white-space: nowrap;
		width: 1px;
	}
}

@container ihr-page (min-width: 56rem) {
	.ihr-apply {
		align-items: start;
		column-gap: var(--ihr-s8);
		grid-template-columns: minmax(0, var(--ihr-form)) 19rem;
		justify-content: space-between;
	}

	.ihr-apply__main {
		grid-column: 1;
		grid-row: 1;
	}

	.ihr-apply__aside {
		grid-column: 2;
		grid-row: 1;
		position: sticky;
		top: var(--ihr-s5);
	}

	.ihr-job-summary .ihr-job-facts {
		grid-template-columns: 1fr;
	}

	.ihr-job-summary .ihr-job-facts__item {
		border-bottom: 1px solid var(--ihr-line);
		padding-bottom: var(--ihr-s3);
	}
}

/* Phone: one Apply action, pinned to the bottom edge while the description
   is on screen. It is the article's last element, so it releases by itself
   when the form arrives and never covers a field. */
.ihr-job > .ihr-job__apply,
.ihr-job__layout + .ihr-job__apply {
	background: var(--ihr-surface);
	border-top: 1px solid var(--ihr-line);
	bottom: 0;
	margin-inline: calc(var(--ihr-gutter) * -1);
	padding: var(--ihr-s3) var(--ihr-gutter);
	position: sticky;
	z-index: 2;
}

.ihr-job > .ihr-job__apply .ihr-job__apply-link,
.ihr-job__layout + .ihr-job__apply .ihr-job__apply-link {
	width: 100%;
}

.ihr-job__aside .ihr-job__apply {
	display: none;
}

@container ihr-page (min-width: 56rem) {
	.ihr-job__layout {
		align-items: start;
		column-gap: var(--ihr-s8);
		grid-template-columns: minmax(0, 1fr) 19rem;
	}

	.ihr-job__body {
		grid-column: 1;
		grid-row: 1;
	}

	.ihr-job__aside {
		grid-column: 2;
		grid-row: 1;
		position: sticky;
		top: var(--ihr-s5);
	}

	.ihr-job__aside .ihr-job-facts {
		grid-template-columns: 1fr;
	}

	.ihr-job__aside .ihr-job-facts__item {
		border-bottom: 1px solid var(--ihr-line);
		padding-bottom: var(--ihr-s4);
	}

	.ihr-job__aside .ihr-job-facts__item--closing-date .ihr-job-facts__value {
		font-family: var(--ihr-font-display);
		font-size: var(--ihr-text-xl);
		font-weight: 500;
		line-height: 1.2;
	}

	.ihr-job__aside .ihr-job__apply {
		display: block;
		margin-top: var(--ihr-s5);
	}

	.ihr-job__aside .ihr-job__apply-link {
		width: 100%;
	}

	/* The aside carries the action on wide screens. */
	.ihr-job__layout + .ihr-job__apply {
		display: none;
	}

	.ihr-job > .ihr-job__apply {
		border: 0;
		margin: var(--ihr-s5) 0 0;
		padding: 0;
		position: static;
	}

	.ihr-job > .ihr-job__apply .ihr-job__apply-link {
		width: auto;
	}
}

/* ---------- Application ---------- */

.ihr-application {
	border-top: 1px solid var(--wp--preset--color--mark);
	padding-block: var(--ihr-s7) var(--ihr-s9);
	scroll-margin-top: var(--ihr-s5);
}

.ihr-application > * {
	max-width: var(--ihr-form);
}

.ihr-application__title,
.ihr-notice__title {
	color: var(--ihr-ink);
	font-family: var(--ihr-font-display);
	font-size: var(--ihr-text-2xl);
	font-weight: 400;
	letter-spacing: -0.015em;
	line-height: 1.15;
	margin: 0 0 var(--ihr-s3);
}

.ihr-application__intro {
	color: var(--ihr-muted);
	font-size: var(--ihr-text-sm);
	margin: 0 0 var(--ihr-s6);
}

.ihr-form {
	counter-reset: ihr-group;
}

.ihr-form__group {
	border: 0;
	border-top: 1px solid var(--ihr-line);
	counter-increment: ihr-group;
	margin: 0;
	min-width: 0;
	padding: var(--ihr-s6) 0 var(--ihr-s2);
}

.ihr-form__legend {
	color: var(--ihr-ink);
	display: flex;
	float: left;
	font-family: var(--ihr-font-display);
	font-size: var(--ihr-text-xl);
	font-weight: 500;
	gap: var(--ihr-s3);
	line-height: 1.2;
	margin: 0 0 var(--ihr-s5);
	padding: 0;
	width: 100%;
}

.ihr-form__legend::before {
	color: var(--ihr-terracotta);
	content: counter(ihr-group);
	font-variant-numeric: tabular-nums;
}

.ihr-form__legend + * {
	clear: both;
}

.ihr-field {
	border: 0;
	margin: 0 0 var(--ihr-s5);
	min-width: 0;
	padding: 0;
}

.ihr-field__label {
	color: var(--ihr-ink);
	display: block;
	font-size: var(--ihr-text-md);
	font-weight: 600;
	margin: 0 0 var(--ihr-s1);
	padding: 0;
}

.ihr-field__required {
	color: var(--ihr-error);
	margin-inline-start: 0.15em;
}

.ihr-field__optional {
	color: var(--ihr-muted);
	font-weight: 400;
}

.ihr-field__help {
	color: var(--ihr-muted);
	font-size: var(--ihr-text-sm);
	margin: 0 0 var(--ihr-s2);
}

.ihr-field__error {
	align-items: flex-start;
	color: var(--ihr-error);
	display: flex;
	font-size: var(--ihr-text-sm);
	font-weight: 600;
	gap: var(--ihr-s2);
	margin: 0 0 var(--ihr-s2);
}

/* Error marker drawn as a shape, so it survives without colour. */
.ihr-field__error::before {
	background: var(--ihr-error);
	clip-path: polygon(50% 0, 100% 100%, 0 100%);
	content: "";
	flex: none;
	height: 0.8em;
	margin-top: 0.3em;
	width: 0.9em;
}

.ihr-field__control {
	appearance: none;
	background: var(--ihr-surface);
	border: 1px solid var(--ihr-line-strong);
	border-radius: var(--ihr-radius);
	color: var(--ihr-ink);
	display: block;
	font: inherit;
	line-height: 1.4;
	margin-top: var(--ihr-s2);
	min-height: var(--ihr-control);
	padding: var(--ihr-s3) var(--ihr-s4);
	width: 100%;
}

.ihr-field__control:hover {
	border-color: var(--ihr-ink);
}

.ihr-field__control:focus-visible {
	border-color: var(--ihr-ink);
	outline: var(--ihr-jobs-focus);
	outline-offset: 0;
}

textarea.ihr-field__control {
	min-height: 12rem;
	resize: vertical;
}

select.ihr-field__control {
	background-image: linear-gradient(45deg, transparent 50%, var(--ihr-ink) 50%), linear-gradient(135deg, var(--ihr-ink) 50%, transparent 50%);
	background-position: calc(100% - 1.35rem) 50%, calc(100% - 1rem) 50%;
	background-repeat: no-repeat;
	background-size: 0.35rem 0.35rem;
	padding-right: var(--ihr-s7);
}

.ihr-field--age .ihr-field__control {
	max-width: 7rem;
}

/* File inputs stay native (keyboard, screen readers, phone file pickers),
   dressed as a clear drop area with a secondary button. */
input[type="file"].ihr-field__control {
	background: var(--ihr-band);
	border-style: dashed;
	color: var(--ihr-text);
	cursor: pointer;
	font-size: var(--ihr-text-sm);
	padding: var(--ihr-s4);
}

input[type="file"].ihr-field__control::file-selector-button {
	background: var(--ihr-surface);
	border: 1.5px solid var(--ihr-ink);
	border-radius: var(--ihr-radius);
	color: var(--ihr-ink);
	cursor: pointer;
	font: 600 var(--ihr-text-sm) / 1.2 var(--ihr-font-body);
	margin-right: var(--ihr-s4);
	min-height: 2.75rem;
	padding: var(--ihr-s2) var(--ihr-s4);
}

.ihr-field--error .ihr-field__control {
	border: 2px solid var(--ihr-error);
}

.ihr-field--error input[type="checkbox"],
.ihr-field--error input[type="radio"] {
	outline: 2px solid var(--ihr-error);
	outline-offset: 2px;
}

.ihr-field__choices {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ihr-s3) var(--ihr-s6);
	margin-top: var(--ihr-s2);
}

.ihr-field__choice {
	align-items: flex-start;
	display: flex;
	gap: var(--ihr-s3);
	min-height: 2.75rem;
	padding-block: 0.5rem;
}

.ihr-field__choice input {
	accent-color: var(--ihr-ink);
	flex: none;
	height: 1.5rem;
	margin: 0.05rem 0 0;
	width: 1.5rem;
}

.ihr-field__choice label,
.ihr-field--consent .ihr-field__label {
	font-weight: 400;
	margin: 0;
}

.ihr-field--consent .ihr-field__help {
	margin: var(--ihr-s1) 0 0 2.25rem;
}

.ihr-form__actions {
	border-top: 1px solid var(--ihr-line);
	padding-top: var(--ihr-s6);
}

.ihr-jobs-page .ihr-form__submit {
	width: 100%;
}

/* The role name, repeated directly above the submit button. Printed by the
   theme through the plugin's before-submit action. */
.ihr-form__context {
	border-top: 1px solid var(--ihr-line);
	color: var(--ihr-muted);
	font-size: var(--ihr-text-sm);
	margin: 0 0 var(--ihr-s4);
	padding-top: var(--ihr-s5);
}

.ihr-form__context strong {
	color: var(--ihr-ink);
	font-weight: 600;
}

.ihr-form__context + .ihr-form__actions {
	border-top: 0;
	padding-top: 0;
}

.ihr-form__submit[aria-disabled="true"] {
	cursor: progress;
	opacity: 0.7;
}

.ihr-form__reassurance {
	color: var(--ihr-muted);
	font-size: var(--ihr-text-sm);
	margin: var(--ihr-s4) 0 0;
}

@container ihr-page (min-width: 40rem) {
	.ihr-jobs-page .ihr-form__submit {
		min-width: 15rem;
		width: auto;
	}
}

/* ---------- Error summary ---------- */

.ihr-form-errors {
	background: var(--ihr-error-bg);
	border: 2px solid var(--ihr-error);
	border-radius: var(--ihr-radius);
	margin: 0 0 var(--ihr-s6);
	padding: var(--ihr-s5);
}

.ihr-form-errors__title {
	color: var(--ihr-ink);
	font-size: var(--ihr-text-lg);
	font-weight: 600;
	line-height: 1.3;
	margin: 0 0 var(--ihr-s3);
}

.ihr-form-errors__message {
	margin: 0 0 var(--ihr-s3);
}

.ihr-form-errors__list {
	margin: 0;
	padding-left: 1.25rem;
}

.ihr-form-errors__list li + li {
	margin-top: var(--ihr-s2);
}

.ihr-jobs-page .ihr-form-errors__list a {
	color: var(--ihr-error);
	font-weight: 600;
	text-decoration-color: currentColor;
}

.ihr-form-errors__files {
	color: var(--ihr-text);
	font-size: var(--ihr-text-sm);
	margin: var(--ihr-s4) 0 0;
}

.ihr-form-errors:focus,
.ihr-notice:focus,
.ihr-field:focus {
	outline: var(--ihr-jobs-focus);
	outline-offset: 3px;
}

/* ---------- Notices: received and closed ---------- */

/* After a successful application the confirmation leads the page: the
   description is set aside so the candidate is not asked to scroll past it. */
.ihr-jobs-page:has(.ihr-application--success) .ihr-job {
	display: none;
}

.ihr-notice {
	border-radius: var(--ihr-radius);
	padding: var(--ihr-s6);
}

.ihr-notice > :last-child {
	margin-bottom: 0;
}

.ihr-notice--success {
	background: var(--ihr-success-bg);
	border: 1px solid var(--ihr-success);
}

.ihr-notice--closed {
	background: var(--ihr-band);
	border: 1px solid var(--ihr-line);
}

/* State markers: a tick for received, an empty square for closed. */
.ihr-notice__title {
	align-items: flex-start;
	display: flex;
	gap: var(--ihr-s4);
}

.ihr-notice__title::before {
	content: "";
	flex: none;
	height: 1.75rem;
	margin-top: 0.3rem;
	width: 1.75rem;
}

.ihr-notice--success .ihr-notice__title::before {
	background: var(--ihr-success);
	clip-path: polygon(8% 52%, 22% 38%, 40% 58%, 78% 16%, 92% 30%, 40% 86%);
}

.ihr-notice--closed .ihr-notice__title::before {
	border: 2px solid var(--ihr-ink);
	height: 1.25rem;
	margin-top: 0.55rem;
	width: 1.25rem;
}

.ihr-reference {
	background: var(--ihr-surface);
	border: 1px solid var(--ihr-line);
	margin: var(--ihr-s5) 0;
	padding: var(--ihr-s5);
}

.ihr-reference__label {
	color: var(--ihr-muted);
	display: block;
	font-size: var(--ihr-text-xs);
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.ihr-reference__value {
	color: var(--ihr-ink);
	display: block;
	font-size: clamp(1.5rem, 1.1rem + 2.4cqw, 2rem);
	font-variant-numeric: tabular-nums;
	font-weight: 600;
	letter-spacing: 0.06em;
	line-height: 1.3;
	overflow-wrap: anywhere;
	user-select: all;
}

.ihr-reference__hint {
	color: var(--ihr-muted);
	display: block;
	font-size: var(--ihr-text-sm);
	margin-top: var(--ihr-s2);
}

.ihr-next {
	list-style: none;
	margin: var(--ihr-s5) 0;
	padding: 0;
}

.ihr-next li {
	border-top: 1px solid var(--ihr-line);
	padding-block: var(--ihr-s3);
}

.ihr-notice__link {
	font-weight: 600;
}

/* ---------- Motion ---------- */

@media (prefers-reduced-motion: reduce) {
	.ihr-jobs-page * {
		scroll-behavior: auto;
		transition: none;
	}
}

/* ---------- Privacy Notice & Consent (G3 consent change) ----------
   IHR's notice above the two checkboxes, one statement link after them.
   The last notice paragraph ("Please select your preference:") leads into
   the choices, so it is set in the label weight. */

.ihr-privacy-notice p {
	font-size: var(--ihr-text-sm);
	line-height: 1.6;
	margin: 0 0 var(--ihr-s3);
	max-width: var(--ihr-form);
}

.ihr-privacy-notice p:last-child {
	color: var(--ihr-ink);
	font-weight: 600;
	margin: var(--ihr-s5) 0 var(--ihr-s1);
}

.ihr-form__group--consent .ihr-field--consent + .ihr-field--consent {
	margin-top: var(--ihr-s3);
}

.ihr-privacy-link {
	margin-top: var(--ihr-s4);
}