/**
 * 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);
}

.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);
}
.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-secondary);
	margin: 0 0 var(--wcb-space-xs);
}

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

/* ── 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: 640px) {
	.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: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
	gap: var(--wcb-space-sm);
	align-items: stretch;
}
@media (max-width: 1024px) {
	.wcb-form-simple .wcb-salary-row {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
@media (max-width: 640px) {
	.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);
	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);
	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-fg, #991b1b);
	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-secondary);
	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-strong);
	color: var(--wcb-on-primary);
	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);
	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; }