/**
 * Block: wp-career-board/job-form-simple
 *
 * 100% token-driven — no hardcoded spacing, radii, colors, shadows, or
 * type sizes. Every value resolves to a `--wcb-*` token from
 * assets/css/frontend-tokens.css with the corresponding theme.json
 * core palette tokens (--wcb-base, --wcb-contrast, --wcb-primary,
 * --wcb-border, etc.) supplying fallbacks. Theme overrides cascade
 * automatically — a partner site that sets --wcb-primary to red gets
 * red focus rings without touching this file.
 */

.wcb-form-simple {
	max-width: 760px;
	margin: 0 auto;
	color: var(--wcb-contrast, #0f172a);
}

.wcb-form-simple--compact { max-width: 520px; }

/* ── Body & sections ─────────────────────────────────────────────────── */

.wcb-form-simple__body {
	display: flex;
	flex-direction: column;
	gap: var(--wcb-space-3xl);
}

.wcb-form-simple__section {
	display: flex;
	flex-direction: column;
	gap: var(--wcb-space-lg);
	padding-bottom: var(--wcb-space-3xl);
	border-bottom: 1px solid var(--wcb-border, #e2e8f0);
}
.wcb-form-simple__section:last-of-type { border-bottom: 0; padding-bottom: 0; }

.wcb-form-simple__eyebrow {
	font-size: var(--wcb-text-xs);
	font-weight: var(--wcb-font-bold);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wcb-text-tertiary, #94a3b8);
	margin: 0 0 var(--wcb-space-xs);
}

/* ── Field primitives ────────────────────────────────────────────────── */

.wcb-form-simple .wcb-form-field {
	display: flex;
	flex-direction: column;
	gap: var(--wcb-space-xs);
	min-width: 0;
}

.wcb-form-simple .wcb-form-label {
	font-size: var(--wcb-text-sm);
	font-weight: var(--wcb-font-semibold);
	color: var(--wcb-contrast, #0f172a);
	display: flex;
	align-items: center;
	gap: var(--wcb-space-xs);
}

.wcb-form-simple .wcb-form-hint {
	font-size: var(--wcb-text-xs);
	color: var(--wcb-text-tertiary, #94a3b8);
}

.wcb-form-simple .wcb-required {
	color: var(--wcb-danger);
	font-weight: var(--wcb-font-bold);
	margin-left: 2px; /* hairline gap */
}

.wcb-form-simple .wcb-field {
	width: 100%;
	padding: var(--wcb-space-md) var(--wcb-space-lg);
	font-size: var(--wcb-text-base);
	line-height: var(--wcb-leading-tight);
	color: var(--wcb-contrast, #0f172a);
	background: var(--wcb-base, #ffffff);
	border: 1px solid var(--wcb-border, #e2e8f0);
	border-radius: var(--wcb-radius-md);
	transition: border-color var(--wcb-transition-fast), box-shadow var(--wcb-transition-fast), background var(--wcb-transition-fast);
	box-sizing: border-box;
	appearance: none;
}

.wcb-form-simple textarea.wcb-field {
	min-height: 140px; /* component-specific textarea height */
	resize: vertical;
	line-height: var(--wcb-leading-normal);
}

.wcb-form-simple select.wcb-field {
	background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
	background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%; /* arrow caret offsets */
	background-size: 5px 5px, 5px 5px;
	background-repeat: no-repeat;
	padding-right: var(--wcb-space-3xl);
}

.wcb-form-simple .wcb-field:hover {
	border-color: var(--wcb-text-tertiary, #94a3b8);
}

/* No `outline: none` on plain `:focus` - browsers omit the ring on
 * mouse focus by default, and `:focus-visible` below adds the
 * keyboard-only outline. Older browsers keep the default outline as
 * a graceful fallback. */
.wcb-form-simple .wcb-field:focus {
	border-color: var(--wcb-primary, #2563eb);
	box-shadow: var(--wcb-shadow-focus);
}

.wcb-form-simple .wcb-field:focus-visible {
	outline: 2px solid var(--wcb-primary, #2563eb);
	outline-offset: 2px;
	border-color: var(--wcb-primary, #2563eb);
	box-shadow: var(--wcb-shadow-focus);
}

.wcb-form-simple .wcb-field::placeholder {
	color: var(--wcb-text-tertiary, #94a3b8);
	opacity: 0.7;
}

/* ── Two-column grid (Apply URL/Email pair, Classification 2×2) ─────── */

.wcb-form-simple .wcb-form-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--wcb-space-lg);
	align-items: start;
}
@media (max-width: 640px) {
	.wcb-form-simple .wcb-form-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

.wcb-form-simple__tax-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--wcb-space-lg);
}
@media (max-width: 480px) {
	.wcb-form-simple__tax-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ── Salary range — 4 equal columns at desktop, 2 at tablet, 1 at mobile ─*/

.wcb-form-simple .wcb-salary-row {
	display: grid;
	grid-template-columns: 1.4fr minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
	gap: var(--wcb-space-sm);
	align-items: stretch;
}
@media (max-width: 720px) {
	.wcb-form-simple .wcb-salary-row {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
@media (max-width: 420px) {
	.wcb-form-simple .wcb-salary-row {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ── Remote checkbox — clean label+box, no card chrome ─────────────── */

.wcb-form-simple .wcb-checkbox-label {
	display: inline-flex;
	align-items: center;
	gap: var(--wcb-space-sm);
	font-size: var(--wcb-text-base);
	font-weight: var(--wcb-font-medium);
	color: var(--wcb-contrast, #0f172a);
	cursor: pointer;
	user-select: none;
}
.wcb-form-simple .wcb-checkbox-label input[type="checkbox"] {
	width: var(--wcb-icon-md);
	height: var(--wcb-icon-md);
	accent-color: var(--wcb-primary, #2563eb);
	margin: 0;
}

/* Date input width capped so it doesn't span full column on its own row. */
.wcb-form-simple .wcb-form-field--deadline .wcb-field {
	max-width: 280px; /* component-specific date-input width */
}

/* ── Honeypot ────────────────────────────────────────────────────────── */

.wcb-form-simple .wcb-hp {
	position: absolute;
	left: -10000px; /* off-screen honeypot */
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ── Banners ─────────────────────────────────────────────────────────── */

.wcb-form-simple__error {
	display: none;
	background: var(--wcb-danger-bg);
	border: 1px solid var(--wcb-danger);
	color: var(--wcb-danger);
	padding: var(--wcb-space-md) var(--wcb-space-lg);
	border-radius: var(--wcb-radius-md);
	margin: 0;
	font-size: var(--wcb-text-base);
	font-weight: var(--wcb-font-medium);
}
.wcb-form-simple__error.wcb-shown { display: block; }

/* Credit + listing-window notices — info boxes, same chrome as the error
 * banner so they read as deliberate UI, not orphaned paragraph text. */
.wcb-form-simple__credit,
.wcb-form-simple__listing-window {
	display: none;
	margin: 0;
	padding: var(--wcb-space-md) var(--wcb-space-lg);
	border-radius: var(--wcb-radius-md);
	font-size: var(--wcb-text-sm);
	font-weight: var(--wcb-font-medium);
	background: var(--wcb-info-bg-soft, #eff6ff);
	border: 1px solid var(--wcb-info-border, #bfdbfe);
	color: var(--wcb-info-fg, #1d4ed8);
}
.wcb-form-simple__credit.wcb-shown,
.wcb-form-simple__listing-window.wcb-shown { display: block; }

/* Insufficient-credit state escalates the credit notice to a warning. */
.wcb-form-simple__credit--warn {
	background: var(--wcb-warning-bg-soft, #fffbeb);
	border-color: var(--wcb-warning-border, #fde68a);
	color: var(--wcb-warning-fg, #92400e);
}

/* ── Custom-field groups (wcb_job_form_fields) ───────────────────────── */

.wcb-form-simple .wcb-form-custom-fields {
	display: flex;
	flex-direction: column;
	gap: var(--wcb-space-lg);
}

/* Group labels render as <h3> from the shared FormCustomFields renderer.
 * Match the section eyebrow so they don't inherit oversized theme headings. */
.wcb-form-simple .wcb-form-custom-fields__heading {
	font-size: var(--wcb-text-xs);
	font-weight: var(--wcb-font-bold);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wcb-text-tertiary, #94a3b8);
	margin: var(--wcb-space-sm) 0 0;
	padding: 0;
}
.wcb-form-simple .wcb-form-custom-fields__heading:first-child { margin-top: 0; }

/* ── Success state ───────────────────────────────────────────────────── */

.wcb-form-simple__success {
	display: none;
	text-align: center;
	padding: var(--wcb-space-4xl) var(--wcb-space-2xl);
	background: var(--wcb-success-bg);
	border-radius: var(--wcb-radius-xl);
}
.wcb-form-simple__success.wcb-shown { display: block; }
.wcb-form-simple__success h2 {
	font-size: var(--wcb-text-2xl);
	font-weight: var(--wcb-font-bold);
	color: var(--wcb-success);
	margin: 0 0 var(--wcb-space-lg);
}
.wcb-form-simple__success p { margin: 0; }

/* ── Submit nav ──────────────────────────────────────────────────────── */

.wcb-form-simple__nav {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	gap: var(--wcb-space-lg);
	padding-top: var(--wcb-space-sm);
}

.wcb-form-simple .wcb-btn,
.wcb-form-simple__success .wcb-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 160px; /* component-specific button width */
	padding: var(--wcb-space-md) var(--wcb-space-2xl);
	border: 0;
	border-radius: var(--wcb-radius-md);
	font-size: var(--wcb-text-md);
	font-weight: var(--wcb-font-semibold);
	letter-spacing: 0.01em;
	cursor: pointer;
	transition: transform var(--wcb-transition-fast), box-shadow var(--wcb-transition-fast), background var(--wcb-transition-fast);
	text-decoration: none;
	box-sizing: border-box;
}

.wcb-form-simple .wcb-btn--primary {
	background: var(--wcb-primary, #2563eb);
	color: var(--wcb-on-primary, #fff);
	box-shadow: var(--wcb-shadow-sm);
}
.wcb-form-simple .wcb-btn--primary:hover:not(:disabled) {
	transform: translateY(-1px);
	box-shadow: var(--wcb-shadow-md);
}
.wcb-form-simple .wcb-btn--primary:active:not(:disabled) {
	transform: translateY(0);
}
.wcb-form-simple .wcb-btn--primary:disabled {
	opacity: 0.7;
	cursor: not-allowed;
}

@media (max-width: 640px) {
	.wcb-form-simple__nav { justify-content: stretch; }
	.wcb-form-simple .wcb-btn { width: 100%; min-width: 0; }
}

/* ── Logged-out gate ─────────────────────────────────────────────────── */

.wcb-form-simple__gate {
	padding: var(--wcb-space-3xl) var(--wcb-space-2xl);
	background: var(--wcb-bg-subtle);
	border: 1px dashed var(--wcb-border, #e2e8f0);
	border-radius: var(--wcb-radius-xl);
	text-align: center;
	color: var(--wcb-text-secondary);
	font-size: var(--wcb-text-base);
}

/* ── Toggle utilities — mirror the wizard's wcb-hidden / wcb-shown ─────*/

.wcb-form-simple .wcb-hidden { display: none !important; }
.wcb-form-simple .wcb-shown  { display: block; }