/*
 * Careers page (page-careers.php) — 2026-10 rebuild.
 *
 * Enqueued by inc/cm-pages.php on the careers template only.
 * cosmick-2026.css and cm-interior.css are hard-coded <link>s that print
 * AFTER this file, so every rule that overlaps theirs wins on SPECIFICITY
 * (every selector here starts at .cm-cr, (0,2,0) or more), never on order and
 * never with !important.
 *
 * Reference: cosmick-media-upgrade.replit.app/careers/
 *   .page-hero          bg #e9dfd4, coral wedge right, 110x4 coral bar
 *   .detail-note        bg #eadccf, 4px coral left rule
 *   .application-panel  bg #fffaf5, 1px #d2bdad, radius 5, no shadow
 *   .input              48-50px, #fdfaf7, radius 5
 *
 * Deliberate deviations (accessibility, measured):
 *   - eyebrow #9c2c23 (5.71:1) and crumbs #5f5955 (5.24:1) on #e9dfd4; the
 *     reference's #b8352b / #6b6460 measure 4.46:1 / 4.42:1 there.
 *   - input border --cm26-input-border #a28c79 (3.08:1) for WCAG 1.4.11; the
 *     reference's #cbbfb4 is 1.73:1.
 */

/* ---------------------------------------------------------------------------
   Sticky needs a non-scrolling ancestor chain. Legacy `section { overflow-x:
   hidden }` and `html, body { overflow-x: hidden }` turn those boxes into
   scroll containers; `clip` keeps the clipping without that. (Same fix as
   cm-contact.css.)
   --------------------------------------------------------------------------- */

body.page-template-page-careers { overflow-x: clip; overflow-y: visible; }
.cm-cr > section,
.cm-cr > header { overflow-x: clip; overflow-y: visible; }

/* ---------------------------------------------------------------------------
   Page head
   --------------------------------------------------------------------------- */

.cm-cr .cm-page-head {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background: #e9dfd4;
}

.cm-cr .cm-page-head > .cm-orbital { display: none; }

.cm-cr .cm-page-head::before {
	content: "";
	position: absolute;
	top: 0;
	right: -40px;
	z-index: -1;
	width: 96px;
	height: 100%;
	background: var(--cm26-brand);
	clip-path: polygon(55% 0, 100% 0, 100% 100%, 0 100%);
	opacity: .5;
	pointer-events: none;
}

@media (min-width: 768px) {
	.cm-cr .cm-page-head::before { width: 300px; right: -160px; opacity: .72; }
}

@media (min-width: 1440px) {
	.cm-cr .cm-page-head::before { width: 380px; right: -150px; }
}

.cm-cr .cm-page-head .cm-crumbs ol { font-size: 12.5px; line-height: 1.65; color: #5f5955; }
.cm-cr .cm-page-head .cm-crumbs a:hover { color: var(--cm26-brand-hover); }
.cm-cr .cm-page-head .cm-eyebrow { color: var(--cm26-brand-hover); }
.cm-cr .cm-page-head h1 { max-width: 20ch; }
.cm-cr .cm-page-head .cm-lede { margin-top: 20px; max-width: min(46rem, calc(100% - 44px)); color: var(--cm26-body); }

/* Keep the lede clear of the wedge, which reaches further in at tablet widths. */
@media (min-width: 768px) and (max-width: 1279px) {
	.cm-cr .cm-page-head .cm-lede { max-width: min(46rem, calc(100% - 150px)); }
}

.cm-cr .cm-page-head-actions {
	align-items: center;
	gap: 14px 28px;
	margin-top: 28px;
}

.cm-cr .cm-page-head-actions .cm-tlink { color: var(--cm26-brand-hover); }

/* ---------------------------------------------------------------------------
   Layout: intro rail + application panel
   --------------------------------------------------------------------------- */

.cm-cr .cm-cr-layout {
	display: grid;
	gap: 48px;
	align-items: stretch;
}

@media (min-width: 1024px) {
	.cm-cr .cm-cr-layout {
		grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
		gap: clamp(40px, 4.5vw, 72px);
	}
}

.cm-cr .cm-cr-rail {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

/* Rail typography */
.cm-cr .cm-cr-rail p {
	margin: 0;
	font-size: 16.5px;
	line-height: 1.85;
	color: var(--cm26-prose);
}

.cm-cr .cm-cr-h2 {
	margin: 0 0 14px;
	font-family: var(--cm26-font-display);
	font-size: clamp(26px, 2.3vw, 33px);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -.02em;
	color: var(--cm26-ink);
	text-wrap: balance;
}

.cm-cr .cm-cr-h2--sm { font-size: 21px; letter-spacing: -.01em; }

.cm-cr .cm-cr-h3,
.cm-cr .cm-cr-benefit .cm-cr-h3,
.cm-cr .cm-cr-alert .cm-cr-h3 {
	margin: 0 0 4px;
	padding: 0;
	font-family: var(--cm26-font-display);
	font-size: 18px;
	font-weight: 700;
	line-height: 1.35;
	color: var(--cm26-ink);
}

/* Before-you-apply note */
.cm-cr .cm-cr-note {
	padding: 20px 24px;
	border-left: 4px solid var(--cm26-brand);
	border-radius: 0 8px 8px 0;
	background: #eadccf;
}

.cm-cr .cm-cr-rail .cm-cr-note p { font-size: 14.5px; line-height: 1.7; color: #5b4f47; }

.cm-cr .cm-cr-rail .cm-cr-note .cm-cr-note-title {
	margin-bottom: 4px;
	font-family: var(--cm26-font-display);
	font-size: 14px;
	font-weight: 700;
	color: var(--cm26-ink);
}

/* Rail blocks, separated by hairlines */
.cm-cr .cm-cr-block {
	margin-top: 36px;
	padding-top: 32px;
	border-top: 1px solid var(--cm26-line);
}

/* At a glance */
.cm-cr .cm-cr-facts {
	display: grid;
	margin: 24px 0 0;
	border-top: 1px solid var(--cm26-line);
}

.cm-cr .cm-cr-fact {
	display: flex;
	flex-direction: row-reverse;
	justify-content: flex-end;
	align-items: center;
	gap: 14px;
	padding-block: 12px;
	border-bottom: 1px solid var(--cm26-line);
}

.cm-cr .cm-cr-fact dd {
	margin: 0;
	min-width: 6.2em;
	font-family: var(--cm26-font-display);
	font-size: clamp(24px, 2.2vw, 30px);
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -.02em;
	color: var(--cm26-brand-ink);
	font-variant-numeric: tabular-nums;
}

.cm-cr .cm-cr-fact dt {
	font-size: 15px;
	font-weight: 500;
	color: var(--cm26-body);
}

/* Benefits */
.cm-cr .cm-cr-benefits {
	display: grid;
	gap: 22px;
	margin: 26px 0 0;
	padding: 0;
	list-style: none;
}

.cm-cr .cm-cr-benefit {
	display: grid;
	grid-template-columns: 46px minmax(0, 1fr);
	gap: 16px;
	align-items: start;
}

.cm-cr .cm-cr-benefit-icon {
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	border: 1px solid #f3d3cc;
	border-radius: 12px;
	background: var(--cm26-tint);
	color: var(--cm26-brand-ink);
}

.cm-cr .cm-cr-rail .cm-cr-benefit p { font-size: 15.5px; line-height: 1.7; color: var(--cm26-body); }

/* The people strip */
.cm-cr .cm-cr-faces {
	display: flex;
	flex-wrap: wrap;
	margin: 4px 0 18px;
	padding: 0 0 0 12px;
	list-style: none;
}

.cm-cr .cm-cr-face {
	width: 58px;
	height: 58px;
	margin-left: -12px;
	border: 3px solid var(--cm26-paper);
	border-radius: 50%;
	overflow: hidden;
	background: var(--cm26-sand);
	box-shadow: 0 2px 6px #2624231f;
}

.cm-cr .cm-cr-face img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 20%;
}

.cm-cr .cm-cr-links {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 28px;
}

/* Sticky "Your application" step list (desktop only; anchors are its only job) */
.cm-cr .cm-cr-steps { display: none; }

@media (min-width: 1024px) {
	.cm-cr .cm-cr-steps {
		display: block;
		position: sticky;
		top: calc(var(--cm26-header-h) + 28px);
		margin-top: 40px;
		padding: 22px 22px 18px;
		border: 1px solid var(--cm26-line);
		border-radius: 10px;
		background: var(--cm26-card);
	}

	body.admin-bar .cm-cr .cm-cr-steps { top: calc(var(--cm26-header-h) + var(--cm26-admin-bar-h, 32px) + 28px); }
}

.cm-cr .cm-cr-rail .cm-cr-steps .cm-cr-steps-title {
	margin-bottom: 10px;
	font-family: var(--cm26-font-display);
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--cm26-stone);
}

.cm-cr .cm-cr-steps ol {
	display: grid;
	gap: 2px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.cm-cr .cm-cr-steps ol a {
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 40px;
	padding: 4px 10px;
	border-radius: 8px;
	font-size: 15px;
	font-weight: 500;
	color: var(--cm26-body);
	text-decoration: none;
	transition: background-color .18s var(--cm26-ease), color .18s var(--cm26-ease);
}

.cm-cr .cm-cr-steps ol a:hover { background: var(--cm26-sand); color: var(--cm26-ink); }

.cm-cr .cm-cr-steps ol a[aria-current="step"] {
	background: var(--cm26-tint);
	color: var(--cm26-ink);
	font-weight: 600;
}

.cm-cr .cm-cr-steps ol a[aria-current="step"] .cm-cr-step {
	border-color: var(--cm26-brand-ink);
	background: var(--cm26-brand-ink);
	color: var(--cm26-on-brand);
}

.cm-cr .cm-cr-rail .cm-cr-steps .cm-cr-call {
	margin-top: 12px;
	padding-top: 14px;
	border-top: 1px solid var(--cm26-line);
	font-size: 14.5px;
	line-height: 1.6;
	color: var(--cm26-body);
}

.cm-cr .cm-cr-call a {
	font-weight: 600;
	color: var(--cm26-brand-ink);
	text-underline-offset: 3px;
	white-space: nowrap;
}

/* Step number chip (rail list + legends) */
.cm-cr .cm-cr-step {
	display: inline-grid;
	place-items: center;
	flex: 0 0 auto;
	width: 30px;
	height: 30px;
	border: 1px solid #f0c9c1;
	border-radius: 50%;
	background: var(--cm26-tint);
	font-family: var(--cm26-font-display);
	font-size: 12px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: var(--cm26-brand-ink);
	transition: background-color .18s var(--cm26-ease), color .18s var(--cm26-ease);
}

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

.cm-cr .cm-card.cm-cr-panel {
	min-width: 0;
	align-self: start;
	padding: clamp(22px, 3.4vw, 44px);
	border-color: #d9c7b7;
	border-radius: 10px;
	background: #fffaf5;
	box-shadow: none;
	scroll-margin-top: calc(var(--cm26-header-h) + 16px);
}

.cm-cr .cm-cr-panel:focus { outline: none; }

.cm-cr .cm-cr-panel .cm-cr-panel-title {
	margin: 0;
	font-size: clamp(22px, 2vw, 26px);
	color: var(--cm26-ink);
}

.cm-cr .cm-cr-panel .cm-cr-panel-intro {
	margin: 10px 0 0;
	font-size: 15.5px;
	line-height: 1.7;
	color: var(--cm26-body);
	max-width: 60ch;
}

.cm-cr .cm-cr-form { margin-top: 22px; }

.cm-cr .cm-cr-form .cm-cr-required-note {
	margin: 0 0 8px;
	padding: 10px 14px;
	border: 1px solid var(--cm26-line);
	border-radius: 8px;
	background: var(--cm26-sand);
	font-size: 14px;
	color: var(--cm26-body);
}

/* Groups */
.cm-cr .cm-cr-group {
	min-width: 0;
	margin: 0;
	padding: 30px 0 0;
	border: 0;
	scroll-margin-top: calc(var(--cm26-header-h) + 24px);
}

.cm-cr .cm-cr-group + .cm-cr-group {
	margin-top: 34px;
	border-top: 1px solid #e6d8cc;
}

/* A legend only takes flex layout reliably when floated out of the fieldset's
   border; .cm-cr-fields clears it. */
.cm-cr .cm-cr-legend {
	float: left;
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	margin: 0 0 20px;
	padding: 0;
	font-family: var(--cm26-font-display);
	font-size: 18px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--cm26-ink);
}

.cm-cr .cm-cr-fields {
	clear: both;
	display: grid;
	gap: 20px;
}

@media (min-width: 640px) {
	.cm-cr .cm-cr-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 18px; }
	.cm-cr .cm-cr-field { grid-column: 1 / -1; }
	.cm-cr .cm-cr-field--half { grid-column: auto; }
}

/* Fields */
.cm-cr .cm-cr-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}

.cm-cr .cm-cr-label {
	display: block;
	font-family: var(--cm26-font-display);
	font-size: 14.5px;
	font-weight: 600;
	line-height: 1.45;
	color: var(--cm26-ink);
}

.cm-cr .cm-cr-req {
	margin-left: 2px;
	color: var(--cm26-brand-ink);
	font-weight: 700;
}

.cm-cr .cm-cr-opt {
	margin-left: 4px;
	font-family: var(--cm26-font-body);
	font-size: 13px;
	font-weight: 400;
	color: var(--cm26-stone);
}

.cm-cr .cm-cr-hint {
	margin: -2px 0 2px;
	font-size: 13.5px;
	line-height: 1.55;
	color: var(--cm26-stone);
}

.cm-cr .cm-cr-control {
	display: block;
	width: 100%;
	min-height: 50px;
	margin: 0;
	padding: 11px 14px;
	border: 1px solid var(--cm26-input-border);
	border-radius: 6px;
	background-color: #fdfaf7;
	box-shadow: none;
	font-family: var(--cm26-font-body);
	font-size: 16px;
	line-height: 1.6;
	color: var(--cm26-ink);
	transition: border-color .15s var(--cm26-ease), box-shadow .15s var(--cm26-ease), background-color .15s var(--cm26-ease);
}

.cm-cr .cm-cr-control::placeholder { color: #6b6460; opacity: 1; } /* 5.6:1 on the field background */

.cm-cr .cm-cr-control:hover { border-color: var(--cm26-input-hover); }

.cm-cr .cm-cr-control:focus {
	outline: 2px solid transparent;
	border-color: var(--cm26-brand-ink);
	background-color: #fff;
	box-shadow: 0 0 0 3px rgba(184, 53, 43, .2);
}

.cm-cr .cm-cr-control:focus-visible {
	outline: 2px solid var(--cm26-brand-ink);
	outline-offset: 1px;
}

.cm-cr .cm-cr-select {
	appearance: none;
	-webkit-appearance: none;
	padding-right: 44px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%234a4542' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	background-size: 18px;
	cursor: pointer;
	text-overflow: ellipsis;
}

.cm-cr .cm-cr-textarea { min-height: 128px; resize: vertical; }
.cm-cr .cm-cr-textarea--tall { min-height: 200px; }

.cm-cr .cm-cr-control[aria-invalid="true"] {
	border-color: var(--cm26-error-line);
	background-color: #fff8f7;
}

.cm-cr .cm-cr-control[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px rgba(179, 38, 30, .2); }

.cm-cr .cm-cr-error {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin: 2px 0 0;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.5;
	color: var(--cm26-error);
}

.cm-cr .cm-cr-error::before {
	content: "!";
	display: inline-grid;
	place-items: center;
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	margin-top: 1px;
	border-radius: 50%;
	background: var(--cm26-error);
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
}

.cm-cr .cm-cr-error[hidden] { display: none; }

/* Resume drop zone: the real file input covers the zone, so click, keyboard
   and drag-and-drop all go to the native control. */
.cm-cr .cm-cr-drop {
	position: relative;
	display: grid;
	justify-items: center;
	gap: 4px;
	padding: 28px 20px;
	border: 1.5px dashed var(--cm26-input-border);
	border-radius: 10px;
	background: #f8f1ea;
	text-align: center;
	transition: border-color .15s var(--cm26-ease), background-color .15s var(--cm26-ease);
}

.cm-cr .cm-cr-drop:hover,
.cm-cr .cm-cr-drop.is-over {
	border-color: var(--cm26-brand-ink);
	background: var(--cm26-tint);
}

.cm-cr .cm-cr-drop:focus-within {
	outline: 2px solid var(--cm26-brand-ink);
	outline-offset: 2px;
	border-color: var(--cm26-brand-ink);
}

.cm-cr .cm-cr-drop .cm-cr-file {
	position: absolute;
	inset: 0;
	z-index: 2;
	width: 100%;
	height: 100%;
	opacity: 0;
	cursor: pointer;
}

.cm-cr .cm-cr-drop-icon {
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	margin-bottom: 6px;
	border-radius: 50%;
	background: var(--cm26-card);
	border: 1px solid var(--cm26-line);
	color: var(--cm26-brand-ink);
}

.cm-cr .cm-cr-drop-text { font-size: 15.5px; color: var(--cm26-body); }
.cm-cr .cm-cr-drop-text strong { font-family: var(--cm26-font-display); font-weight: 700; color: var(--cm26-brand-ink); }
.cm-cr .cm-cr-drop-hint { font-size: 13.5px; color: var(--cm26-stone); }

.cm-cr .cm-cr-drop-name {
	font-family: var(--cm26-font-display);
	font-size: 14px;
	font-weight: 600;
	color: var(--cm26-ink);
	overflow-wrap: anywhere;
}

.cm-cr .cm-cr-drop-name:empty { display: none; }

.cm-cr .cm-cr-drop.has-file {
	border-style: solid;
	border-color: var(--cm26-brand-ink);
	background: var(--cm26-tint);
}

.cm-cr .cm-cr-field:has([aria-invalid="true"]) .cm-cr-drop {
	border-color: var(--cm26-error-line);
	background: #fff8f7;
}

/* Consent checkboxes */
.cm-cr .cm-cr-consent .cm-cr-legend + .cm-cr-check-field { clear: both; }

.cm-cr .cm-cr-check-field + .cm-cr-check-field { margin-top: 12px; }

.cm-cr .cm-cr-check {
	display: grid;
	grid-template-columns: 20px minmax(0, 1fr);
	gap: 14px;
	align-items: start;
	padding: 16px 18px;
	border: 1px solid #e0d1c4;
	border-radius: 8px;
	background: var(--cm26-card);
	font-size: 14.5px;
	line-height: 1.65;
	color: var(--cm26-body);
	cursor: pointer;
	transition: border-color .15s var(--cm26-ease), background-color .15s var(--cm26-ease);
}

.cm-cr .cm-cr-check:hover { border-color: var(--cm26-input-hover); }

.cm-cr .cm-cr-check:has(input:checked) {
	border-color: var(--cm26-brand-ink);
	background: var(--cm26-tint);
}

.cm-cr .cm-cr-check:has(input[aria-invalid="true"]) { border-color: var(--cm26-error-line); }

.cm-cr .cm-cr-check input[type="checkbox"] {
	width: 20px;
	height: 20px;
	margin: 3px 0 0;
	accent-color: var(--cm26-brand-ink);
	cursor: pointer;
}

.cm-cr .cm-cr-check input[type="checkbox"]:focus-visible {
	outline: 2px solid var(--cm26-brand-ink);
	outline-offset: 2px;
}

.cm-cr .cm-cr-check a {
	color: var(--cm26-brand-ink);
	font-weight: 600;
	text-underline-offset: 3px;
}

/* Submit */
.cm-cr .cm-cr-submit {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px 20px;
	margin-top: 30px;
	padding-top: 26px;
	border-top: 1px solid #e6d8cc;
}

.cm-cr .cm-cr-submit .cm-btn { min-width: 220px; }
.cm-cr .cm-cr-submit .cm-btn[aria-busy="true"] { cursor: progress; }

.cm-cr .cm-cr-submit .cm-cr-submit-note {
	margin: 0;
	font-size: 13.5px;
	color: var(--cm26-stone);
}

@media (max-width: 479px) {
	.cm-cr .cm-cr-submit .cm-btn { width: 100%; }
}

/* Alerts */
.cm-cr .cm-cr-alert {
	margin-top: 22px;
	border-radius: 8px;
	font-size: 15px;
	line-height: 1.65;
}

.cm-cr .cm-cr-alert[hidden] { display: none; }
.cm-cr .cm-cr-alert:focus { outline: none; }
.cm-cr .cm-cr-alert:focus-visible { outline: 2px solid var(--cm26-ink); outline-offset: 2px; }

.cm-cr .cm-cr-alert--error {
	padding: 14px 18px;
	border: 1px solid #efc2bc;
	border-left: 4px solid var(--cm26-error-line);
	background: #fdf0ee;
	color: var(--cm26-error);
	font-weight: 500;
}

.cm-cr .cm-cr-alert--success {
	display: grid;
	grid-template-columns: 44px minmax(0, 1fr);
	gap: 16px;
	padding: 22px 24px;
	border: 1px solid #b7d4bb;
	border-left: 4px solid #2f6b3a;
	background: #eef6ef;
	color: #24402a;
}

.cm-cr .cm-cr-alert--success[hidden] { display: none; }
.cm-cr .cm-cr-alert-icon { color: #2f6b3a; padding-top: 2px; }
.cm-cr .cm-cr-alert--success p { margin: 8px 0 0; }

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

@media (prefers-reduced-motion: reduce) {
	.cm-cr .cm-cr-control,
	.cm-cr .cm-cr-drop,
	.cm-cr .cm-cr-check,
	.cm-cr .cm-cr-steps ol a,
	.cm-cr .cm-cr-step { transition: none; }
}