/* =========================================================
   Careers: Open Positions list, job detail modal, application form.
   Uses the tokens and components from main.css (.card, .btn, .form,
   .field, .form__success) and only adds what those do not cover.
   Jobs are loaded by assets/js/careers.js from the USCON Jobs plugin.
   ========================================================= */

.jobs__status {
	margin: 0;
	padding: clamp(24px, 2.4vw, 36px);
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	color: var(--text-soft);
	font-size: var(--fs-lead);
}
.jobs__status a { font-weight: 600; }
.no-js [data-jobs] { display: none; }

/* Job cards: the standard capability card, with the whole card clickable */
/* "backwards" (not "both") so the finished animation does not pin transform and block the hover lift */
.job-card { animation: job-in .45s ease backwards; animation-delay: calc(var(--i, 0) * 60ms); }
.job-card .card__title { font-size: clamp(1.25rem, .5vw + 1.1rem, 1.5rem); }
.job-card__foot { margin-top: auto; padding-top: var(--s-1); }
.job-card__btn::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius); }
.job-card:has(.job-card__btn:focus-visible) { border-color: var(--ink); box-shadow: var(--shadow-hover); }
.job-card__btn:focus-visible { outline-offset: 3px; }

@keyframes job-in {
	from { opacity: 0; transform: translateY(12px); }
	to   { opacity: 1; transform: none; }
}

/* Location / type / deadline chips */
.job-meta { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.job-meta li {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 10px;
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	background: var(--cloud);
	font-size: .875rem;
	font-weight: 500;
	color: var(--graphite);
	line-height: 1.4;
}
.job-meta svg { width: 14px; height: 14px; flex: 0 0 auto; color: var(--ink); }

/* ---------------------------------------------------------
   Job detail modal
   --------------------------------------------------------- */
html.job-modal-open { overflow: hidden; }

.job-modal {
	width: min(920px, calc(100% - 32px));
	max-width: none;
	max-height: calc(100dvh - 48px);
	margin: auto;
	padding: 0;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--white);
	color: var(--graphite);
	box-shadow: var(--shadow-menu);
	overflow: auto;
	overscroll-behavior: contain;
}
.job-modal::backdrop { background: rgba(11, 27, 51, .62); }
.job-modal[open] { animation: job-modal-in .3s ease both; }
@keyframes job-modal-in {
	from { opacity: 0; transform: translateY(16px); }
	to   { opacity: 1; transform: none; }
}

.job-modal__head {
	position: relative;
	padding: clamp(28px, 3vw, 44px) clamp(20px, 4vw, 48px) var(--s-4);
	background: var(--navy-900);
	color: var(--on-dark-muted);
	border-top: 4px solid var(--blue);
}
.job-modal__head .card__kicker { color: var(--blue-300); }
.job-modal__head h2 { color: var(--on-dark); font-size: clamp(1.625rem, 1.6vw + 1.1rem, 2.5rem); margin: 6px 0 var(--s-2); padding-right: 48px; }
.job-modal__head .job-meta li { background: rgba(255, 255, 255, .06); border-color: var(--line-dark); color: var(--on-dark); }
.job-modal__head .job-meta svg { color: var(--blue-300); }

.job-modal__close {
	position: absolute;
	top: 16px;
	right: 16px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid var(--line-dark);
	border-radius: 10px;
	background: transparent;
	color: var(--on-dark);
	cursor: pointer;
	transition: background-color .18s ease, border-color .18s ease;
}
.job-modal__close:hover { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .5); }
.job-modal__close svg { width: 18px; height: 18px; }

.job-modal__body { padding: var(--s-4) clamp(20px, 4vw, 48px) var(--s-5); display: grid; gap: var(--s-4); }
.job-modal__section h3 { font-size: 1.25rem; margin-bottom: 12px; }
.job-modal__rich { color: var(--text-soft); font-size: 1rem; }
.job-modal__rich p, .job-modal__rich ul, .job-modal__rich ol { margin: 0 0 12px; }
.job-modal__rich ul, .job-modal__rich ol { padding-left: 1.25em; }
.job-modal__rich li { margin-bottom: 6px; }
.job-modal__rich > :last-child { margin-bottom: 0; }
.job-modal__rich strong { color: var(--graphite); }

.job-apply { padding-top: var(--s-4); border-top: 1px solid var(--line); }
.job-apply .form__h { margin-bottom: var(--s-1); }
.job-apply__intro { color: var(--text-soft); margin-bottom: var(--s-3); }
.job-apply .form { gap: var(--s-3); }
.job-apply .form__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.job-apply .form__actions .form-status { margin: 0; }
.job-apply .form__success { margin-top: 0; }
.job-apply .form__success h3 { font-size: var(--fs-h3); }
.recaptcha-note { margin: 0; font-size: .8125rem; color: var(--slate); }
.recaptcha-note a { color: var(--slate); }
.grecaptcha-badge { visibility: hidden; }

/* File input, styled to match the text inputs */
input[type="file"].job-file {
	width: 100%;
	min-height: 52px;
	padding: 8px;
	background: var(--white);
	border: 1px dashed var(--line-strong);
	border-radius: 10px;
	font: inherit;
	font-size: .9375rem;
	color: var(--graphite);
	cursor: pointer;
	transition: border-color .15s ease, box-shadow .15s ease;
}
input[type="file"].job-file:hover { border-color: var(--ink); }
input[type="file"].job-file:focus-visible { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(201, 162, 39, .22); }
input[type="file"].job-file::file-selector-button {
	margin-right: 12px;
	padding: 8px 16px;
	border: 1.5px solid var(--ink);
	border-radius: var(--radius-sm);
	background: transparent;
	color: var(--ink);
	font: inherit;
	font-weight: 600;
	cursor: pointer;
	transition: background-color .18s ease;
}
input[type="file"].job-file::file-selector-button:hover { background: rgba(201, 162, 39, .07); }
.field__hint { margin: 6px 0 0; font-size: .875rem; color: var(--slate); }

@media (max-width: 719px) {
	.job-modal { width: 100%; max-height: 100dvh; height: 100dvh; border-radius: 0; border: 0; }
	.job-apply .form__actions .btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
	.job-card, .job-modal[open] { animation: none; }
}