/* ==========================================================================
   NMRC Online Application — public form
   Brand: teamnational.com — charcoal #3d414d, crimson #9e232d, Oswald + Inter
   All rules are scoped to .nmrc-app so they don't collide with the theme.
   ========================================================================== */

.nmrc-app {
	--nmrc-charcoal: #3d414d;
	--nmrc-charcoal-2: #33373d;
	--nmrc-crimson: #9e232d;
	--nmrc-crimson-h: #831c25;
	--nmrc-crimson-tint: rgba(158, 35, 45, 0.08);
	--nmrc-rose: #cc3366;
	--nmrc-ink: #000000;
	--nmrc-text: #333333;
	--nmrc-muted: #69727d;
	--nmrc-faint: #a3a8b0;
	--nmrc-bg: #f4f4f4;
	--nmrc-surface: #ffffff;
	--nmrc-surface-2: #f7f7f8;
	--nmrc-border: #d9dbdf;
	--nmrc-divider: #ececee;
	--nmrc-radius: 4px;
	--nmrc-radius-lg: 6px;
	--nmrc-display: 'Oswald', 'Arial Narrow', Arial, sans-serif;
	--nmrc-body: 'Inter', 'Helvetica Neue', Arial, sans-serif;
	--nmrc-ease: 180ms cubic-bezier(0.16, 1, 0.3, 1);

	font-family: var(--nmrc-body);
	font-size: 15px;
	line-height: 1.5;
	color: var(--nmrc-text);
	background: var(--nmrc-bg);
	-webkit-font-smoothing: antialiased;
}
.nmrc-app *, .nmrc-app *::before, .nmrc-app *::after { box-sizing: border-box; }

/* ── Hero ─────────────────────────────────────────────── */
.nmrc-hero {
	position: relative;
	background:
		linear-gradient(100deg, rgba(51, 55, 61, 0.97) 0%, rgba(61, 65, 77, 0.92) 55%, rgba(61, 65, 77, 0.80) 100%),
		repeating-linear-gradient(135deg, rgba(255,255,255,0.025) 0 2px, transparent 2px 14px),
		var(--nmrc-charcoal);
	color: #fff;
	border-bottom: 4px solid var(--nmrc-crimson);
}
.nmrc-hero-inner { max-width: 960px; margin: 0 auto; padding: 56px 24px 44px; }
.nmrc-eyebrow {
	margin: 0 0 10px; font-family: var(--nmrc-body); font-size: 12px; font-weight: 600;
	letter-spacing: 0.16em; text-transform: uppercase; color: #e7b9bd;
}
.nmrc-hero h1 {
	margin: 0; font-family: var(--nmrc-display); font-weight: 400; text-transform: uppercase;
	font-size: clamp(34px, 3vw + 18px, 56px); line-height: 1.05; letter-spacing: 0.01em; color: #fff;
}
.nmrc-hero h1 strong { font-weight: 700; }
.nmrc-hero-meta { margin: 14px 0 0; font-size: 14px; color: #c9cbd0; }
.nmrc-eeo {
	max-width: 960px; margin: 0 auto; padding: 0 24px 18px;
	font-size: 12px; color: #aeb1b8;
}

/* ── Layout ───────────────────────────────────────────── */
.nmrc-body { max-width: 960px; margin: 0 auto; padding: 36px 24px 56px; }

.nmrc-section {
	background: var(--nmrc-surface);
	border: 1px solid var(--nmrc-border);
	border-radius: var(--nmrc-radius-lg);
	margin: 0 0 24px;
	box-shadow: 0 1px 2px rgba(0,0,0,0.04);
	overflow: hidden;
}
.nmrc-section-header {
	display: flex; align-items: center; gap: 12px;
	padding: 14px 22px;
	background: var(--nmrc-charcoal);
	border-bottom: 3px solid var(--nmrc-crimson);
}
.nmrc-section-icon {
	display: inline-flex; align-items: center; justify-content: center;
	width: 32px; height: 32px; border-radius: var(--nmrc-radius);
	background: var(--nmrc-crimson); color: #fff; flex-shrink: 0;
}
.nmrc-section-icon svg { width: 17px; height: 17px; }
.nmrc-section-header h2 {
	margin: 0; font-family: var(--nmrc-display); font-weight: 500; text-transform: uppercase;
	font-size: 20px; letter-spacing: 0.04em; color: #fff; line-height: 1.2;
}
.nmrc-section-body { padding: 24px 22px; }
.nmrc-section-body.nmrc-flush { padding: 0; }

.nmrc-grid { display: grid; gap: 16px; }
.nmrc-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.nmrc-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.nmrc-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.nmrc-address { grid-template-columns: 0.5fr 1.5fr 1fr 0.7fr 0.7fr; }
.nmrc-questions { grid-template-columns: 1fr; gap: 22px; }
.nmrc-span-2 { grid-column: span 2; }
.nmrc-spacer { margin-top: 16px; }
.nmrc-divider { height: 1px; background: var(--nmrc-divider); margin: 26px 0 6px; }

/* ── Fields ───────────────────────────────────────────── */
.nmrc-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.nmrc-field > label, .nmrc-label {
	font-size: 13px; font-weight: 600; color: var(--nmrc-ink); line-height: 1.35;
}
.nmrc-req { color: var(--nmrc-crimson); font-weight: 700; }
.nmrc-hint { font-weight: 400; color: var(--nmrc-muted); font-size: 12px; margin-left: 4px; }
.nmrc-note { font-size: 12.5px; color: var(--nmrc-muted); }
.nmrc-lead { margin: 0 0 16px; }
.nmrc-muted { font-size: 13px; color: var(--nmrc-muted); align-self: center; }

.nmrc-app input[type="text"], .nmrc-app input[type="email"], .nmrc-app input[type="tel"],
.nmrc-app input[type="date"], .nmrc-app input[type="number"], .nmrc-app textarea {
	width: 100%; margin: 0;
	font-family: var(--nmrc-body); font-size: 15px; color: var(--nmrc-text);
	background: var(--nmrc-surface); border: 1px solid var(--nmrc-border); border-radius: var(--nmrc-radius);
	padding: 10px 12px; min-height: 42px; line-height: 1.4;
	transition: border-color var(--nmrc-ease), box-shadow var(--nmrc-ease);
	box-shadow: none; -webkit-appearance: none; appearance: none;
}
.nmrc-app textarea { resize: vertical; min-height: 84px; }
.nmrc-app input::placeholder, .nmrc-app textarea::placeholder { color: var(--nmrc-faint); }
.nmrc-app input:hover, .nmrc-app textarea:hover { border-color: #b9bdc4; }
.nmrc-app input:focus, .nmrc-app textarea:focus {
	outline: none; border-color: var(--nmrc-crimson); box-shadow: 0 0 0 3px rgba(158, 35, 45, 0.15);
}
.nmrc-app .nmrc-invalid { border-color: var(--nmrc-crimson) !important; background: #fdf6f6 !important; }
.nmrc-signature { font-style: italic; font-size: 16px !important; }

.nmrc-radio-group { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; }
.nmrc-radio-group label, .nmrc-check {
	display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
	font-size: 14px; font-weight: 500; color: var(--nmrc-text);
}
.nmrc-app input[type="radio"], .nmrc-app input[type="checkbox"] {
	width: 18px; height: 18px; margin: 0; accent-color: var(--nmrc-crimson); flex-shrink: 0;
}
.nmrc-check, .nmrc-field > label.nmrc-check { align-items: flex-start; line-height: 1.5; font-size: 14px; font-weight: 500; color: var(--nmrc-text); }
.nmrc-check input { margin-top: 2px; }
.nmrc-radio-group.nmrc-invalid-group label { color: var(--nmrc-crimson); }

.nmrc-conditional-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 24px; }
.nmrc-cond-field { flex: 1 1 260px; }
.nmrc-contact { margin-left: 8px; padding-left: 24px; border-left: 1px solid var(--nmrc-divider); }

/* ── Education table ──────────────────────────────────── */
.nmrc-edu { display: grid; gap: 8px; }
.nmrc-edu-head, .nmrc-edu-row {
	display: grid; grid-template-columns: 96px 1.6fr 1.1fr 0.9fr 0.9fr 1fr; gap: 8px; align-items: center;
}
.nmrc-edu-head span {
	font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--nmrc-muted);
}
.nmrc-edu-label {
	font-family: var(--nmrc-display); text-transform: uppercase; font-size: 14px; letter-spacing: 0.03em; color: var(--nmrc-ink);
}

/* ── Employer blocks ──────────────────────────────────── */
.nmrc-emp + .nmrc-emp { border-top: 1px solid var(--nmrc-border); }
.nmrc-emp-head {
	display: flex; align-items: center; gap: 10px;
	padding: 12px 22px; background: var(--nmrc-surface-2); border-bottom: 1px solid var(--nmrc-divider);
	font-family: var(--nmrc-display); text-transform: uppercase; font-size: 15px; letter-spacing: 0.04em; color: var(--nmrc-ink);
}
.nmrc-emp-num {
	display: inline-flex; align-items: center; justify-content: center;
	width: 24px; height: 24px; border-radius: 50%; background: var(--nmrc-crimson); color: #fff;
	font-family: var(--nmrc-body); font-size: 12px; font-weight: 700;
}
.nmrc-emp-body { padding: 20px 22px 24px; }

/* ── References ───────────────────────────────────────── */
.nmrc-ref-row { display: grid; grid-template-columns: 2fr 1fr; gap: 16px; }
.nmrc-ref-row + .nmrc-ref-row { margin-top: 14px; }

/* ── Uploads ──────────────────────────────────────────── */
.nmrc-drop {
	position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
	min-height: 150px; padding: 22px; text-align: center; cursor: pointer;
	border: 2px dashed var(--nmrc-border); border-radius: var(--nmrc-radius-lg); background: var(--nmrc-surface-2);
	transition: border-color var(--nmrc-ease), background var(--nmrc-ease);
}
.nmrc-drop:hover, .nmrc-drop.is-over { border-color: var(--nmrc-crimson); background: var(--nmrc-crimson-tint); }
.nmrc-drop:focus-within { border-color: var(--nmrc-crimson); box-shadow: 0 0 0 3px rgba(158, 35, 45, 0.15); }
.nmrc-drop input[type="file"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.nmrc-drop-icon { color: var(--nmrc-crimson); }
.nmrc-drop-icon svg { width: 28px; height: 28px; }
.nmrc-drop-text { font-size: 14px; color: var(--nmrc-muted); }
.nmrc-drop-text strong { color: var(--nmrc-crimson); font-weight: 600; }
.nmrc-drop-file { font-size: 13px; font-weight: 600; color: var(--nmrc-ink); word-break: break-all; }
.nmrc-drop.has-file { border-style: solid; border-color: var(--nmrc-charcoal); background: #fff; }
.nmrc-drop.has-file .nmrc-drop-text { display: none; }
.nmrc-drop.nmrc-invalid { border-color: var(--nmrc-crimson); }
.nmrc-drop-error { font-size: 12.5px; color: var(--nmrc-crimson); font-weight: 600; }

/* ── Certification ────────────────────────────────────── */
.nmrc-legal {
	font-size: 13px; line-height: 1.65; color: var(--nmrc-text);
	background: var(--nmrc-surface-2); border-left: 4px solid var(--nmrc-crimson);
	padding: 16px 18px; border-radius: var(--nmrc-radius); margin-bottom: 20px;
}

/* ── Submit ───────────────────────────────────────────── */
.nmrc-submit-row {
	display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
	padding: 22px; background: var(--nmrc-surface); border: 1px solid var(--nmrc-border); border-radius: var(--nmrc-radius-lg);
}
.nmrc-submit-note { margin: 0; font-size: 13px; color: var(--nmrc-muted); max-width: 520px; }
.nmrc-btn {
	display: inline-flex; align-items: center; gap: 10px;
	padding: 14px 28px; border: 0; border-radius: var(--nmrc-radius); cursor: pointer;
	background: var(--nmrc-crimson); color: #fff;
	font-family: var(--nmrc-body); font-size: 16px; font-weight: 600; letter-spacing: 0.01em;
	transition: background var(--nmrc-ease), transform var(--nmrc-ease);
}
.nmrc-btn svg { width: 17px; height: 17px; }
.nmrc-btn:hover { background: var(--nmrc-crimson-h); }
.nmrc-btn:active { transform: translateY(1px); }
.nmrc-btn:focus-visible { outline: 3px solid rgba(158, 35, 45, 0.35); outline-offset: 2px; }
.nmrc-btn[disabled] { opacity: 0.7; cursor: progress; }

/* ── Messages ─────────────────────────────────────────── */
.nmrc-alert {
	margin: 0 0 24px; padding: 16px 20px; border-radius: var(--nmrc-radius-lg);
	background: #fdf3f4; border: 1px solid #efc6ca; border-left: 4px solid var(--nmrc-crimson); color: #5d1218; font-size: 14px;
}
.nmrc-alert ul { margin: 8px 0 0 18px; padding: 0; }
.nmrc-alert p { margin: 8px 0 0; }
.nmrc-success {
	display: flex; gap: 18px; align-items: flex-start;
	padding: 28px; background: var(--nmrc-surface); border: 1px solid var(--nmrc-border);
	border-top: 4px solid var(--nmrc-crimson); border-radius: var(--nmrc-radius-lg);
}
.nmrc-success svg { width: 40px; height: 40px; color: var(--nmrc-crimson); flex-shrink: 0; }
.nmrc-success h2 { margin: 0 0 8px; font-family: var(--nmrc-display); text-transform: uppercase; font-weight: 500; font-size: 26px; color: var(--nmrc-ink); }
.nmrc-success p { margin: 0; }
.nmrc-eeo-foot { margin: 28px 0 0; font-size: 12px; color: var(--nmrc-muted); text-align: center; }

.nmrc-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

/* ── Responsive ───────────────────────────────────────── */
@media (max-width: 820px) {
	.nmrc-cols-3, .nmrc-cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.nmrc-address { grid-template-columns: 0.6fr 1.4fr; }
	.nmrc-address .nmrc-field:nth-child(3) { grid-column: span 2; }
	.nmrc-edu-head { display: none; }
	.nmrc-edu-row { grid-template-columns: 1fr 1fr; padding: 14px 0; border-top: 1px solid var(--nmrc-divider); }
	.nmrc-edu-row:first-of-type { border-top: 0; }
	.nmrc-edu-label { grid-column: 1 / -1; }
	.nmrc-edu-row input:first-of-type { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
	.nmrc-body { padding: 24px 14px 40px; }
	.nmrc-hero-inner { padding: 40px 18px 32px; }
	.nmrc-section-body { padding: 18px 16px; }
	.nmrc-emp-body { padding: 16px; }
	.nmrc-cols-2, .nmrc-cols-3, .nmrc-cols-4, .nmrc-ref-row, .nmrc-address, .nmrc-edu-row { grid-template-columns: 1fr; }
	.nmrc-span-2, .nmrc-address .nmrc-field:nth-child(3) { grid-column: auto; }
	.nmrc-contact { margin-left: 0; padding-left: 0; border-left: 0; }
	.nmrc-submit-row { flex-direction: column; align-items: stretch; }
	.nmrc-btn { justify-content: center; }
}

@media print {
	.nmrc-hero { background: #fff; color: #000; border-bottom: 2px solid #000; }
	.nmrc-hero h1, .nmrc-section-header h2 { color: #000; }
	.nmrc-section-header { background: #fff; }
	.nmrc-submit-row, .nmrc-drop { display: none; }
}

/* --------------------------------------------------------------------------
   Full-width breakout. Block themes such as Twenty Twenty-Five cap page
   content at about 645px. These rules let the application span the full
   browser width (the form itself stays a readable 960px).
   -------------------------------------------------------------------------- */
html:has(.nmrc-app) { overflow-x: clip; }
/* "html body" raises specificity above WordPress core layout rules. */
html body .nmrc-app,
html body .wp-block-group:has(> .nmrc-app),
html body .wp-block-shortcode:has(> .nmrc-app) {
	box-sizing: border-box;
	width: 100vw !important;
	max-width: 100vw !important;
	margin-left: calc(50% - 50vw) !important;
	margin-right: calc(50% - 50vw) !important;
}
html body .wp-block-group:has(> .nmrc-app) > .nmrc-app,
html body .wp-block-shortcode:has(> .nmrc-app) > .nmrc-app {
	width: 100% !important;
	max-width: 100% !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}