/*
 * FitScore frontend. Carries no hardcoded colour or font: structural CSS
 * variables resolve from the active theme's theme.json presets (with neutral
 * fallbacks), and headings/body text inherit the theme via get_header(). The
 * plugin owns only layout, spacing, the step progress, the Scale widget and
 * the few interactive affordances.
 */
/*
 * Per the product decision, FitScore ships its own polished "NORDHAVN" look
 * on the candidate-facing pages rather than inheriting the host theme's type
 * and colour. The accent stays exposed as a CSS variable so a site can still
 * override it, but it defaults to the design's green and the headings use the
 * design's serif display face. The surrounding header/footer still come from
 * the active theme via get_header()/get_footer().
 */
:root {
	--fitscore-accent: #1f6f5c;
	--fitscore-rule: #ececec;
	--fitscore-field-border: #d8d8d8;
	--fitscore-muted: #8a8a8a;
	--fitscore-radius: 6px;
	--fitscore-warn: #b3261e;
	--fitscore-font-head: 'Source Serif 4', Georgia, 'Times New Roman', serif;
	--fitscore-font-body: -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

.fitscore-form-wrap,
.fitscore-careers {
	font-family: var(--fitscore-font-body);
	color: #1b1b1b;
}

.fitscore-careers h1,
.fitscore-job-row-title,
.fitscore-apply-heading,
.fitscore-receipt h1 {
	font-family: var(--fitscore-font-head);
	font-weight: 600;
}

.fitscore-careers h1 {
	font-size: 38px;
	line-height: 1.1;
	margin: 0 0 8px;
}

/* ---------- Shared shells ---------- */
.fitscore-form-wrap {
	max-width: 600px;
	margin: 0 auto;
	padding: 48px 24px 64px;
}

.fitscore-apply-context {
	font-size: 13px;
	color: var(--fitscore-muted);
	margin-bottom: 28px;
}

/* ---------- Careers / job archive ---------- */
.fitscore-careers {
	max-width: 720px;
	margin: 0 auto;
	padding: 56px 24px 72px;
}

.fitscore-careers-eyebrow {
	font-size: 13px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--fitscore-muted);
	margin-bottom: 12px;
}

.fitscore-careers-intro {
	color: var(--fitscore-muted);
	font-size: 16px;
	line-height: 1.6;
	max-width: 460px;
	margin: 0 0 32px;
}

.fitscore-job-archive-list {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--fitscore-rule);
}

.fitscore-job-archive-item a.fitscore-job-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 22px 16px;
	margin: 0 -16px;
	border-bottom: 1px solid var(--fitscore-rule);
	border-radius: 4px;
	text-decoration: none;
	transition: background 0.12s ease;
}

.fitscore-job-archive-item a.fitscore-job-row:hover {
	background: color-mix(in srgb, var(--fitscore-accent) 6%, transparent);
}

.fitscore-job-row-title {
	font-size: 20px;
	font-weight: 600;
	line-height: 1.3;
	color: inherit;
}

.fitscore-job-archive-department {
	display: block;
	font-size: 14px;
	color: var(--fitscore-muted);
	margin-top: 3px;
}

.fitscore-job-row-cta {
	font-size: 14px;
	font-weight: 600;
	white-space: nowrap;
	color: var(--fitscore-accent);
}

/* ---------- Single job (SEO landing) ---------- */
.fitscore-single {
	max-width: 640px;
	margin: 0 auto;
	padding: 48px 24px 72px;
	font-family: var(--fitscore-font-body);
	color: #1b1b1b;
}

.fitscore-single-back {
	display: inline-block;
	margin-bottom: 14px;
	font-size: 13px;
	font-weight: 500;
	color: var(--fitscore-accent);
	text-decoration: none;
}

.fitscore-single-title {
	font-family: var(--fitscore-font-head);
	font-weight: 600;
	font-size: 34px;
	line-height: 1.15;
	margin: 0 0 14px;
}

.fitscore-single-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 26px;
}

.fitscore-single-pill {
	font-size: 13px;
	font-weight: 500;
	color: #5a5a5a;
	border: 1px solid #e0e0e0;
	padding: 6px 12px;
	border-radius: 100px;
}

.fitscore-single-body {
	font-size: 16px;
	line-height: 1.7;
	color: #3a3a3a;
}

.fitscore-single-body p { margin: 0 0 16px; }

.fitscore-single-facts {
	display: flex;
	flex-wrap: wrap;
	gap: 0;
	border-top: 1px solid var(--fitscore-rule);
	border-bottom: 1px solid var(--fitscore-rule);
	margin: 26px 0 32px;
}

.fitscore-single-fact {
	flex: 1;
	min-width: 150px;
	padding: 18px 20px 18px 0;
}

.fitscore-single-fact + .fitscore-single-fact {
	border-left: 1px solid var(--fitscore-rule);
	padding-left: 20px;
}

.fitscore-single-fact-label {
	display: block;
	font-size: 12px;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: #a0a0a0;
	margin-bottom: 7px;
}

.fitscore-single-fact-value {
	font-size: 15px;
	font-weight: 600;
}

.fitscore-single-apply {
	display: inline-block;
	text-decoration: none;
	padding: 16px 30px;
	font-size: 16px;
}

.fitscore-single-note {
	margin-top: 14px;
	font-size: 13px;
	color: #a0a0a0;
}

/* ---------- Step progress ---------- */
.fitscore-stepper {
	display: flex;
	align-items: center;
	margin-bottom: 36px;
}

.fitscore-stepper-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	flex: 0 0 auto;
}

.fitscore-stepper-num {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 13px;
	font-weight: 600;
	background: #fff;
	border: 2px solid #dcdcdc;
	color: #a8a8a8;
}

.fitscore-stepper-label {
	font-size: 11px;
	font-weight: 500;
	color: #a8a8a8;
}

.fitscore-stepper-line {
	flex: 1;
	height: 2px;
	background: #e2e2e2;
	margin: 0 6px 19px;
}

.fitscore-stepper-item.is-active .fitscore-stepper-num,
.fitscore-stepper-item.is-done .fitscore-stepper-num {
	background: var(--fitscore-accent);
	border-color: var(--fitscore-accent);
	color: #fff;
}

.fitscore-stepper-item.is-active .fitscore-stepper-label,
.fitscore-stepper-item.is-done .fitscore-stepper-label {
	color: inherit;
	font-weight: 600;
}

.fitscore-stepper-line.is-done {
	background: var(--fitscore-accent);
}

/* ---------- Apply content ---------- */
.fitscore-apply-heading {
	margin: 0 0 4px;
	font-size: 26px;
	line-height: 1.2;
}

.fitscore-apply-sub {
	margin: 0 0 26px;
	font-size: 14px;
	line-height: 1.5;
	color: var(--fitscore-muted);
}

.fitscore-apply-sub .fitscore-count {
	color: #bbb;
}

.fitscore-fields {
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.fitscore-field-row {
	display: flex;
	gap: 14px;
}

.fitscore-field-row > * {
	flex: 1;
}

.fitscore-form-wrap label {
	display: block;
	font-size: 13px;
	font-weight: 600;
	margin-bottom: 7px;
}

.fitscore-form-wrap input[type="text"],
.fitscore-form-wrap input[type="email"],
.fitscore-form-wrap textarea {
	display: block;
	width: 100%;
	font-family: inherit;
	font-size: 15px;
	color: inherit;
	background: transparent;
	border: 1.5px solid var(--fitscore-field-border);
	border-radius: var(--fitscore-radius);
	padding: 13px 14px;
	box-sizing: border-box;
}

.fitscore-form-wrap textarea {
	min-height: 96px;
	line-height: 1.6;
	resize: vertical;
}

.fitscore-form-wrap input:focus,
.fitscore-form-wrap textarea:focus {
	outline: none;
	border-color: var(--fitscore-accent);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--fitscore-accent) 14%, transparent);
}

/* ---------- Job posting blurb on first step ---------- */
.fitscore-job-posting {
	border: 1px solid var(--fitscore-rule);
	border-radius: var(--fitscore-radius);
	background: color-mix(in srgb, var(--fitscore-accent) 6%, transparent);
	padding: 16px 20px;
	margin-bottom: 24px;
	font-size: 14px;
	line-height: 1.6;
}

.fitscore-job-posting p:first-child { margin-top: 0; }
.fitscore-job-posting p:last-child { margin-bottom: 0; }

/* ---------- Self-assessment Scale ---------- */
.fitscore-criterion {
	margin-bottom: 24px;
}

.fitscore-criterion-label {
	font-size: 16px;
	font-weight: 600;
	margin-bottom: 3px;
}

.fitscore-criterion-desc {
	font-size: 13px;
	line-height: 1.4;
	color: #9a9a9a;
	margin: 0 0 12px;
}

.fitscore-scale {
	display: flex;
	gap: 7px;
}

.fitscore-scale-btn {
	position: relative;
	flex: 1;
	min-height: 60px;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 11px 5px;
	border: 1.5px solid #dcdcdc;
	border-radius: 8px;
	background: transparent;
	cursor: pointer;
	font-family: inherit;
	font-size: 12.5px;
	font-weight: 600;
	color: #3a3a42;
	transition: border-color 0.12s ease, background 0.12s ease;
}

.fitscore-scale-btn:first-child {
	background: #fafafa;
	color: #8a8a90;
}

.fitscore-scale-btn:hover {
	border-color: #9a9aa2;
}

/*
 * Selected stacks three independent cues — fill, focus ring and a check
 * badge — so the choice reads even with a pale theme primary or under a
 * grayscale filter.
 */
.fitscore-scale-btn.is-selected {
	background: var(--fitscore-accent);
	border-color: var(--fitscore-accent);
	color: #fff;
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--fitscore-accent) 22%, transparent);
}

.fitscore-scale-btn.is-selected::after {
	content: "✓";
	position: absolute;
	top: -7px;
	right: -7px;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: #fff;
	border: 1.5px solid var(--fitscore-accent);
	color: var(--fitscore-accent);
	font-size: 10px;
	font-weight: 700;
	line-height: 15px;
}

.fitscore-scale-caption {
	font-size: 12px;
	line-height: 1.4;
	color: #8a8a90;
	margin-top: 9px;
	min-height: 17px;
}

.fitscore-scale-caption strong {
	color: var(--fitscore-accent);
}

/* ---------- CV upload ---------- */
.fitscore-dropzone {
	border: 2px dashed #cfcfcf;
	border-radius: 10px;
	padding: 34px;
	text-align: center;
	margin-bottom: 16px;
	cursor: pointer;
}

.fitscore-dropzone.is-dragover {
	border-color: var(--fitscore-accent);
	background: color-mix(in srgb, var(--fitscore-accent) 6%, transparent);
}

.fitscore-dropzone-icon {
	width: 46px;
	height: 46px;
	border-radius: 10px;
	background: #f3f3f3;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 22px;
	margin: 0 auto 12px;
}

.fitscore-dropzone-text {
	font-size: 15px;
	font-weight: 600;
}

.fitscore-dropzone-text span { color: var(--fitscore-accent); }

.fitscore-file-chip {
	display: flex;
	align-items: center;
	gap: 12px;
	border: 1.5px solid #e4e4e4;
	border-radius: 8px;
	padding: 14px;
	background: #fafafa;
}

.fitscore-file-badge {
	width: 34px;
	height: 42px;
	border-radius: 4px;
	background: var(--fitscore-accent);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 9px;
	font-weight: 700;
	text-transform: uppercase;
}

.fitscore-file-meta { flex: 1; }
.fitscore-file-name { font-size: 14px; font-weight: 600; }
.fitscore-file-size { font-size: 12px; color: #9a9a9a; }

/* ---------- Actions ---------- */
.fitscore-actions {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 32px;
}

.fitscore-btn-primary {
	background: var(--fitscore-accent);
	color: #fff;
	border: none;
	border-radius: var(--fitscore-radius);
	padding: 15px 30px;
	font-family: inherit;
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
}

.fitscore-btn-primary:disabled {
	opacity: 0.6;
	cursor: default;
}

.fitscore-btn-ghost {
	background: transparent;
	color: #5a5a5a;
	border: 1.5px solid var(--fitscore-field-border);
	border-radius: var(--fitscore-radius);
	padding: 14px 22px;
	font-family: inherit;
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
}

.fitscore-btn-ghost.is-empty {
	border-color: transparent;
	color: #c4c4c4;
	cursor: default;
}

/* ---------- Receipt ---------- */
.fitscore-receipt {
	max-width: 480px;
	margin: 0 auto;
	padding: 64px 24px;
	text-align: center;
}

.fitscore-receipt-check {
	width: 60px;
	height: 60px;
	border-radius: 50%;
	background: color-mix(in srgb, var(--fitscore-accent) 14%, transparent);
	color: var(--fitscore-accent);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 28px;
	margin: 0 auto 22px;
}

.fitscore-receipt h1 {
	margin: 0 0 12px;
}

.fitscore-receipt p {
	margin: 0 0 8px;
	font-size: 16px;
	line-height: 1.6;
	color: #5a5a5a;
}

/* ---------- Errors ---------- */
.fitscore-error {
	color: var(--fitscore-warn);
}