/**
 * Open roles list and the application modal.
 *
 * Kept out of marketing.css because it only renders on the careers page. The
 * form rules at the bottom repeat the pattern lead-popup.css established: a
 * Kadence advanced form renders as a flex column, so it is re-laid as a grid
 * here, and the accept field's legend/checkbox geometry is corrected the same
 * way. See the comments in lead-popup.css for why the accept fix positions
 * against the outer div rather than the fieldset.
 */

/* ============================================================ the roles list */

.aipx-jobs {
	margin: 0;
}

.aipx-jobs__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--aipx-space-3, 12px);
}

.aipx-job {
	background: var(--aipx-surface, #FFFFFF);
	border: 1px solid var(--aipx-border-subtle, #E8E8E8);
	transition: border-color var(--aipx-duration-fast, .15s) var(--aipx-ease-standard, ease);
}

.aipx-job:hover {
	border-color: var(--aipx-border, #D1D1D1);
}

.aipx-job__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--aipx-space-4, 16px);
	padding: var(--aipx-space-5, 20px) var(--aipx-space-6, 24px);
}

.aipx-job__ident {
	min-width: 0;
	flex: 1 1 260px;
}

.aipx-job__title {
	margin: 0;
	font-family: var(--aipx-font-heading, inherit);
	font-size: 19px;
	line-height: 1.3;
	font-weight: 700;
	color: var(--aipx-text-heading, #1D1D1D);
}

.aipx-job__meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--aipx-space-2, 8px);
	margin: var(--aipx-space-2, 8px) 0 0;
}

.aipx-job__tag {
	display: inline-block;
	padding: 3px 9px;
	border: 1px solid var(--aipx-border-subtle, #E8E8E8);
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--aipx-text-muted, #5C5854);
	white-space: nowrap;
}

.aipx-job__actions {
	display: flex;
	align-items: center;
	gap: var(--aipx-space-3, 12px);
	flex: 0 0 auto;
}

.aipx-job__toggle {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 9px 2px;
	background: none;
	border: 0;
	font-family: inherit;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--aipx-text-body, #3A3A3A);
	cursor: pointer;
}

/*
 * The parent theme's global.min.css carries a blanket
 * button:hover, button:focus, button:active rule that paints
 * background: var(--global-palette-btn-bg-hover) — brand red — on every button
 * on the site. Left alone it puts red text on a red ground and the label
 * disappears. These selectors are (0,2,0) against its (0,1,1), so they win
 * without !important, but the background and shadow have to be named
 * explicitly: overriding only the colour is what hid the label.
 */
.aipx-job__toggle:hover,
.aipx-job__toggle:focus,
.aipx-job__toggle:active {
	background: none;
	box-shadow: none;
	color: var(--aipx-brand-500, #D52122);
}

.aipx-job__toggle:focus-visible {
	outline: 2px solid var(--aipx-brand-500, #D52122);
	outline-offset: 2px;
}

.aipx-job__chevron {
	width: 11px;
	height: 8px;
	flex: none;
	transition: transform var(--aipx-duration-fast, .15s) var(--aipx-ease-standard, ease);
}

.aipx-job__toggle[aria-expanded="true"] .aipx-job__chevron {
	transform: rotate(180deg);
}

.aipx-job__apply {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 11px 22px;
	background: var(--aipx-brand-500, #D52122);
	border: 1px solid var(--aipx-brand-500, #D52122);
	border-radius: var(--aipx-radius, 0);
	font-family: inherit;
	font-size: 14px;
	font-weight: 700;
	color: #FFFFFF;
	cursor: pointer;
	transition: background-color var(--aipx-duration-fast, .15s) var(--aipx-ease-standard, ease);
}

/* Colour named again here, or the parent's button:hover rule sets it instead. */
.aipx-job__apply:hover,
.aipx-job__apply:focus,
.aipx-job__apply:active {
	background: var(--aipx-brand-600, #B31C1D);
	border-color: var(--aipx-brand-600, #B31C1D);
	color: #FFFFFF;
	box-shadow: none;
}

.aipx-job__apply:focus-visible {
	outline: 2px solid var(--aipx-text-heading, #1D1D1D);
	outline-offset: 2px;
}

.aipx-job__apply--wide {
	margin-top: var(--aipx-space-5, 20px);
}

.aipx-job__panel {
	padding: 0 var(--aipx-space-6, 24px) var(--aipx-space-6, 24px);
	border-top: 1px solid var(--aipx-border-subtle, #E8E8E8);
}

.aipx-job__body {
	padding-top: var(--aipx-space-5, 20px);
	max-width: 72ch;
	color: var(--aipx-text-body, #3A3A3A);
}

.aipx-job__body h2,
.aipx-job__body h3,
.aipx-job__body h4 {
	margin: var(--aipx-space-6, 24px) 0 var(--aipx-space-2, 8px);
	font-size: 15px;
	font-weight: 700;
	letter-spacing: .01em;
	color: var(--aipx-text-heading, #1D1D1D);
}

.aipx-job__body h2:first-child,
.aipx-job__body h3:first-child,
.aipx-job__body h4:first-child {
	margin-top: 0;
}

.aipx-job__body p {
	margin: 0 0 var(--aipx-space-3, 12px);
	font-size: 15px;
	line-height: 1.65;
}

.aipx-job__body ul {
	margin: 0 0 var(--aipx-space-4, 16px);
	padding-left: 20px;
}

.aipx-job__body li {
	margin-bottom: 6px;
	font-size: 15px;
	line-height: 1.6;
}

.aipx-jobs--empty p {
	margin: 0;
	color: var(--aipx-text-muted, #5C5854);
}

@media (max-width: 640px) {
	.aipx-job__head {
		padding: var(--aipx-space-4, 16px);
		align-items: flex-start;
	}

	.aipx-job__actions {
		width: 100%;
		justify-content: space-between;
	}

	.aipx-job__panel {
		padding: 0 var(--aipx-space-4, 16px) var(--aipx-space-4, 16px);
	}
}

/* ====================================================== the application modal */

html.aipx-jobm-open,
html.aipx-jobm-open body {
	overflow: hidden;
}

.aipx-jobm {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: grid;
	place-items: center;
	padding: var(--aipx-space-5, 20px);
}

.aipx-jobm[hidden] {
	display: none;
}

.aipx-jobm__scrim {
	position: absolute;
	inset: 0;
	background: rgba(15, 15, 15, .62);
}

.aipx-jobm__modal {
	position: relative;
	width: min(560px, 100%);
	max-height: calc(100vh - 40px);
	overflow-y: auto;
	background: var(--aipx-surface, #FFFFFF);
	border: 1px solid var(--aipx-border, #D1D1D1);
	padding: var(--aipx-space-8, 32px);
	box-shadow: 0 24px 64px rgba(0, 0, 0, .28);
}

.aipx-jobm__close {
	position: absolute;
	top: 14px;
	right: 14px;
	width: 32px;
	height: 32px;
	display: grid;
	place-items: center;
	background: none;
	border: 0;
	color: var(--aipx-text-muted, #5C5854);
	cursor: pointer;
}

/* Same parent button:hover override as the toggle above. */
.aipx-jobm__close:hover,
.aipx-jobm__close:focus,
.aipx-jobm__close:active {
	background: none;
	box-shadow: none;
	color: var(--aipx-text-heading, #1D1D1D);
}

.aipx-jobm__close svg {
	width: 14px;
	height: 14px;
}

.aipx-jobm__head {
	margin-bottom: var(--aipx-space-6, 24px);
	padding-right: 34px;
}

.aipx-jobm__eyebrow {
	display: block;
	margin-bottom: var(--aipx-space-2, 8px);
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--aipx-brand-500, #D52122);
}

.aipx-jobm__head h3 {
	margin: 0;
	font-family: var(--aipx-font-heading, inherit);
	font-size: 24px;
	line-height: 1.25;
	font-weight: 800;
	color: var(--aipx-text-heading, #1D1D1D);
}

.aipx-jobm__role {
	margin: var(--aipx-space-3, 12px) 0 0;
	font-size: 14px;
	color: var(--aipx-text-muted, #5C5854);
}

.aipx-jobm__role strong {
	color: var(--aipx-text-heading, #1D1D1D);
}

/* ------------------------------------------------- the Kadence form, re-laid */

/*
 * Kadence renders the form as a flex column, so every field is full width.
 * Six tracks matches the geometry the contact column and the lead popup use,
 * so the form's own aipx-f-half classes lay out without redefinition.
 */
.aipx-jobm__form .kb-advanced-form {
	display: grid !important;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	column-gap: 12px;
	row-gap: 14px;
	align-items: end;
}

.aipx-jobm__form .kb-adv-form-field {
	margin-bottom: 0 !important;
	min-width: 0;
}

.aipx-jobm__form .kb-adv-form-field,
.aipx-jobm__form .kb-submit-field {
	grid-column: 1 / -1;
}

.aipx-jobm__form .aipx-f-half {
	grid-column: span 3;
}

.aipx-jobm__form label,
.aipx-jobm__form .kb-adv-form-label {
	display: block;
	margin-bottom: 6px !important;
	font-size: 12.5px !important;
	font-weight: 600 !important;
	color: var(--aipx-text-heading, #1D1D1D) !important;
}

/*
 * The accept field puts its sentence in a <legend> and leaves the <label>
 * empty. A legend renders against the fieldset's top border rather than inside
 * its content box, so the checkbox is positioned against this outer div and the
 * empty label is stretched over the row to make the sentence clickable.
 */
.aipx-jobm__form .wp-block-kadence-advanced-form-accept {
	position: relative;
	padding-left: 27px;
}

.aipx-jobm__form .wp-block-kadence-advanced-form-accept .kb-radio-check-item-wrap {
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
}

.aipx-jobm__form .wp-block-kadence-advanced-form-accept legend.kb-adv-form-label {
	display: block;
	float: none;
	width: 100%;
	margin: 0 !important;
	padding: 0 !important;
	font-size: 13px !important;
	font-weight: 400 !important;
	line-height: 1.5 !important;
	color: var(--aipx-text-muted, #5C5854) !important;
}

.aipx-jobm__form .wp-block-kadence-advanced-form-accept input[type="checkbox"] {
	position: absolute;
	left: 0;
	top: 1px;
	margin: 0 !important;
}

.aipx-jobm__form .wp-block-kadence-advanced-form-accept .kb-radio-check-item label {
	position: absolute;
	inset: 0;
	margin: 0 !important;
	cursor: pointer;
}

.aipx-jobm__form input[type="checkbox"] {
	width: 17px;
	height: 17px;
	accent-color: var(--aipx-brand-500, #D52122);
	cursor: pointer;
}

@media (max-width: 560px) {
	.aipx-jobm {
		padding: 0;
		place-items: end stretch;
	}

	.aipx-jobm__modal {
		width: 100%;
		max-height: 92vh;
		padding: var(--aipx-space-6, 24px) var(--aipx-space-5, 20px);
	}

	.aipx-jobm__form .aipx-f-half {
		grid-column: 1 / -1;
	}
}

@media (prefers-reduced-motion: reduce) {
	.aipx-job,
	.aipx-job__chevron,
	.aipx-job__apply {
		transition: none;
	}
}