/**
 * Application wizard chrome only -- field/label/input/button/notice
 * styling is inherited for free from nova-builder's own .nova-contact-form__*
 * and .nova-button/.nova-form__notice classes (frontend.css), reused
 * directly in the wizard's markup so it always matches whatever the rest
 * of the site's forms look like.
 */

/* Matches the max-width every other section on the site (hero, page-hero,
   course grids, ...) already uses -- the wizard now sits in the page at the
   same visual scale as everything around it instead of floating as a
   noticeably narrower, cramped column. Individual steps still cap their own
   *content* to a comfortable reading/typing width via .sw-wizard__step-inner
   below, so wide containers don't stretch a "First Name" input edge to edge. */
.sw-wizard {
	display: flex;
	flex-direction: column;
	gap: var( --nova-space-xl, 2.5rem );
	max-width: var( --nova-container-width, 72rem );
	margin: 0 auto;
}

/* ---------- Progress bar ---------- */
.sw-wizard__progress {
	display: flex;
	flex-wrap: wrap;
	list-style: none;
	margin: 0;
	padding: 0;
	gap: 0;
	counter-reset: sw-step;
}

.sw-wizard__progress-step {
	flex: 1 1 0;
	min-width: 5.5rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	position: relative;
	padding-top: 3.25rem;
	color: var( --nova-color-text-muted );
	font-size: 0.85rem;
}

.sw-wizard__progress-step::before {
	content: '';
	position: absolute;
	top: 1.25rem;
	left: -50%;
	width: 100%;
	height: 2px;
	background: var( --nova-color-border );
	z-index: 0;
}

.sw-wizard__progress-step:first-child::before {
	display: none;
}

.sw-wizard__progress-num {
	position: absolute;
	top: 0;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var( --nova-color-surface-alt );
	border: 2px solid var( --nova-color-border );
	color: var( --nova-color-text-muted );
	font-weight: 700;
	transition: background 0.2s ease, border-color 0.2s ease;
	z-index: 1;
}

.sw-wizard__progress-label {
	line-height: 1.3;
}

.sw-wizard__progress-step.is-active .sw-wizard__progress-num {
	background: var( --nova-color-primary );
	border-color: var( --nova-color-primary );
	color: var( --nova-color-primary-contrast );
}

.sw-wizard__progress-step.is-active .sw-wizard__progress-label {
	color: var( --nova-color-heading, inherit );
	font-weight: 600;
}

.sw-wizard__progress-step.is-complete .sw-wizard__progress-num {
	background: var( --nova-color-primary );
	border-color: var( --nova-color-primary );
	color: var( --nova-color-primary-contrast );
}

.sw-wizard__progress-step.is-complete::before {
	background: var( --nova-color-primary );
}

@media ( max-width: 48rem ) {
	.sw-wizard__progress-label {
		display: none;
	}
	.sw-wizard__progress-step {
		min-width: 0;
	}
}

/* ---------- Steps ---------- */
/* The outer card: full container width, generously padded, with enough
   visual weight (shadow, radius, a colored top accent) to read as a
   substantial, professional surface rather than a squeezed-in box. */
.sw-wizard__step {
	padding: 3.5rem clamp( 1.5rem, 5vw, 4rem );
	background: var( --nova-color-surface, #fff );
	border: 1px solid var( --nova-color-border );
	border-top: 3px solid var( --nova-color-primary );
	border-radius: var( --nova-radius );
	box-shadow: 0 1.5rem 3rem rgba( 0, 0, 0, 0.05 );
}

/* Higher specificity than the plain class rule above is required here --
   without it this rule and the browser's built-in `[hidden] { display: none }`
   are equal-specificity, and this stylesheet loading after the UA stylesheet
   would silently win, leaving every step visually shown (and, worse, still
   part of native HTML5 constraint validation) regardless of the `hidden`
   attribute wizard.js sets on inactive steps. */
.sw-wizard__step[hidden] {
	display: none;
}

/* The inner content wrapper: caps line length/field width to something
   comfortable to read and type into, and centers within the wider card
   above -- this is what keeps a wide container from turning a short "First
   Name" field into an absurdly wide input. */
.sw-wizard__step-inner {
	display: flex;
	flex-direction: column;
	gap: var( --nova-space-md, 1.5rem );
	max-width: 54rem;
	margin: 0 auto;
}

.sw-wizard__step-title {
	margin: 0;
	font-size: 1.6rem;
}

.sw-wizard__step-intro {
	margin: -0.75rem 0 0;
	color: var( --nova-color-text-muted );
}

/* A little extra breathing room between fields than nova-builder's generic
   contact-form default -- scoped to the wizard only, so the site's other
   (narrower) contact forms are unaffected. */
.sw-wizard .nova-contact-form__grid {
	gap: var( --nova-space-lg, 2rem ) var( --nova-space-md, 1.5rem );
}

.sw-wizard__nav {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	padding-top: 0.5rem;
	flex-wrap: wrap;
}

.sw-wizard__nav .nova-button {
	padding: 0.85rem 2rem;
}

.sw-wizard__nav:has( > button:only-child ) {
	justify-content: flex-start;
}

/* ---------- Instructions / intro panel ---------- */
.sw-wizard__intro {
	padding: 3.5rem clamp( 1.5rem, 5vw, 4rem );
	background: var( --nova-color-surface, #fff );
	border: 1px solid var( --nova-color-border );
	border-top: 3px solid var( --nova-color-primary );
	border-radius: var( --nova-radius );
	box-shadow: 0 1.5rem 3rem rgba( 0, 0, 0, 0.05 );
}

.sw-wizard__intro[hidden] {
	display: none;
}

.sw-wizard__intro .sw-wizard__step-inner {
	gap: 2.5rem;
}

/* Centered header: a small "kicker" badge, a large heading, and a
   comfortably line-length-limited lead paragraph -- gives the panel a
   clear focal point instead of starting straight into a wall of text. */
.sw-wizard__intro-header {
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.85rem;
	padding-bottom: 2rem;
	border-bottom: 1px solid var( --nova-color-border );
}

.sw-wizard__intro-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.4rem 0.9rem;
	border-radius: 999px;
	background: color-mix( in srgb, var( --nova-color-primary ) 12%, transparent );
	color: var( --nova-color-primary );
	font-size: 0.78rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.sw-wizard__intro-badge .dashicons {
	font-size: 1rem;
	width: 1rem;
	height: 1rem;
}

.sw-wizard__intro-heading {
	margin: 0;
	font-size: 2rem;
}

.sw-wizard__intro-lead {
	margin: 0;
	max-width: 38rem;
	color: var( --nova-color-text-muted );
	line-height: 1.6;
}

/* Two distinct cards rather than two bare bullet columns -- each with its
   own icon badge and tinted surface, so "what to bring" and "how to fill
   it out" read as two separate, scannable chunks. */
.sw-wizard__intro-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var( --nova-space-lg, 2rem );
}

.sw-wizard__intro-card {
	display: flex;
	flex-direction: column;
	padding: 1.75rem;
	background: var( --nova-color-surface-alt );
	border: 1px solid var( --nova-color-border );
	border-radius: var( --nova-radius );
}

.sw-wizard__intro-card-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	margin-bottom: 1rem;
	border-radius: 50%;
	background: var( --nova-color-primary );
	color: var( --nova-color-primary-contrast, #fff );
}

.sw-wizard__intro-card--alt .sw-wizard__intro-card-icon {
	background: var( --nova-color-heading, var( --nova-color-text ) );
}

.sw-wizard__intro-card-icon .dashicons {
	font-size: 1.4rem;
	width: 1.4rem;
	height: 1.4rem;
}

.sw-wizard__intro-card h4 {
	margin: 0 0 1rem;
	font-size: 1.05rem;
	color: var( --nova-color-heading, var( --nova-color-text ) );
}

.sw-wizard__intro-list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.sw-wizard__intro-list li {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	color: var( --nova-color-text-muted );
	line-height: 1.5;
}

.sw-wizard__intro-check {
	flex: none;
	margin-top: 0.1em;
	color: var( --nova-color-primary );
	font-size: 1.1rem;
	width: 1.1rem;
	height: 1.1rem;
}

.sw-wizard__intro-card--alt .sw-wizard__intro-check {
	color: var( --nova-color-heading, var( --nova-color-primary ) );
}

/* Closing area: the file-size note as a small pill (easy to notice, not
   just tiny muted caption text) sitting above a centered, prominent CTA. */
.sw-wizard__intro-footer {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.25rem;
	padding-top: 0.5rem;
	text-align: center;
}

.sw-wizard__intro-note {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0;
	padding: 0.6rem 1.1rem;
	border-radius: 999px;
	background: var( --nova-color-surface-alt );
	color: var( --nova-color-text-muted );
	font-size: 0.85rem;
}

.sw-wizard__intro-note .dashicons {
	font-size: 1rem;
	width: 1rem;
	height: 1rem;
}

.sw-wizard__intro-cta {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 1rem 2.25rem;
	font-size: 1.05rem;
}

.sw-wizard__intro-cta .dashicons {
	font-size: 1.1rem;
	width: 1.1rem;
	height: 1.1rem;
	transition: transform 0.15s ease;
}

.sw-wizard__intro-cta:hover .dashicons {
	transform: translateX( 3px );
}

@media ( max-width: 40rem ) {
	.sw-wizard__intro-grid {
		grid-template-columns: 1fr;
	}
	.sw-wizard__intro-heading {
		font-size: 1.6rem;
	}
}

/* ---------- Review & Submit step ---------- */
.sw-wizard__review {
	display: flex;
	flex-direction: column;
	gap: var( --nova-space-md, 1.5rem );
}

.sw-wizard__review-group {
	padding: var( --nova-space-md, 1.5rem );
	background: var( --nova-color-surface-alt );
	border-radius: var( --nova-radius );
}

.sw-wizard__review-group-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 0.75rem;
}

.sw-wizard__review-group-head h4 {
	margin: 0;
}

.sw-wizard__review-edit {
	background: none;
	border: none;
	padding: 0;
	color: var( --nova-color-primary );
	font-weight: 600;
	font-size: 0.85rem;
	cursor: pointer;
	text-decoration: underline;
}

.sw-wizard__review-row {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.5rem 0;
	border-top: 1px solid var( --nova-color-border );
}

.sw-wizard__review-row:first-of-type {
	border-top: none;
}

.sw-wizard__review-label {
	color: var( --nova-color-text-muted );
	flex: 0 0 45%;
}

.sw-wizard__review-value {
	font-weight: 600;
	text-align: right;
	flex: 1;
}

.sw-wizard__review-value em {
	font-weight: 400;
	font-style: italic;
	color: var( --nova-color-text-muted );
}

@media ( max-width: 32rem ) {
	.sw-wizard__review-row {
		flex-direction: column;
		gap: 0.15rem;
	}
	.sw-wizard__review-value {
		text-align: left;
	}
}

/* ---------- Step 0: verify email ---------- */
.sw-wizard__otp-row {
	display: flex;
	flex-direction: column;
	gap: var( --nova-space-md, 1.5rem );
	padding-top: var( --nova-space-sm, 1rem );
	border-top: 1px solid var( --nova-color-border );
}

.sw-wizard__otp-row[hidden] {
	display: none;
}

/* ---------- File uploads ---------- */
.sw-wizard__file-hint {
	margin: 0;
	font-size: 0.8rem;
	color: var( --nova-color-text-muted );
}

.sw-wizard__file-existing {
	margin: 0;
	font-size: 0.85rem;
	font-weight: 600;
	color: var( --nova-color-primary );
}

/* ---------- Field-level validation errors ---------- */
/* Applied to a field's own .nova-contact-form__field wrapper (data-sw-field)
   so a specific bad field is visibly flagged, not just a generic banner at
   the top of the step -- see showStepErrors()/the file-size change handler
   in wizard.js. */
.is-invalid .nova-contact-form__input {
	border-color: #c62828;
}

.sw-wizard__field-error {
	margin: 0.35rem 0 0;
	font-size: 0.8rem;
	font-weight: 600;
	color: #c62828;
}

/* ---------- Completion state ---------- */
.sw-wizard__complete {
	padding: var( --nova-space-lg, 2rem );
	background: var( --nova-color-surface, #fff );
	border: 1px solid var( --nova-color-border );
	border-radius: var( --nova-radius );
	text-align: center;
}

.sw-wizard__complete h3 {
	margin: 0;
}

/* ---------- Applicant Dashboard ---------- */
.sw-dashboard {
	display: flex;
	flex-direction: column;
	gap: var( --nova-space-md, 1.5rem );
	max-width: 42rem;
	margin: 0 auto;
}

.sw-dashboard__list {
	display: flex;
	flex-direction: column;
	gap: var( --nova-space-md, 1.5rem );
}

.sw-dashboard__card-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	width: 100%;
}

.sw-dashboard__ref {
	font-size: 0.8rem;
	color: var( --nova-color-text-muted );
}

.sw-dashboard__new {
	align-self: center;
}

.sw-dashboard--guest {
	text-align: center;
	align-items: center;
}

.sw-dashboard__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
}

.sw-dashboard__greeting {
	margin: 0;
}

.sw-dashboard__card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.75rem;
	padding: var( --nova-space-lg, 2rem );
	background: var( --nova-color-surface, #fff );
	border: 1px solid var( --nova-color-border );
	border-radius: var( --nova-radius );
}

.sw-dashboard__meta {
	margin: 0;
	color: var( --nova-color-text-muted );
}

.sw-dashboard__locked-note {
	margin: 0;
	color: var( --nova-color-text-muted );
	font-size: 0.9rem;
}

.sw-status-badge {
	display: inline-block;
	padding: 0.35rem 0.9rem;
	border-radius: 999px;
	font-weight: 700;
	font-size: 0.8rem;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	background: var( --nova-color-surface-alt );
	color: var( --nova-color-text-muted );
}

.sw-status-badge--submitted,
.sw-status-badge--under_review {
	background: color-mix( in srgb, #1565c0 15%, transparent );
	color: #1565c0;
}

.sw-status-badge--interview_scheduled {
	background: color-mix( in srgb, #6a1b9a 15%, transparent );
	color: #6a1b9a;
}

.sw-status-badge--accepted {
	background: color-mix( in srgb, #2e7d32 15%, transparent );
	color: #2e7d32;
}

.sw-status-badge--rejected {
	background: color-mix( in srgb, #c62828 15%, transparent );
	color: #c62828;
}

.sw-status-badge--waitlisted {
	background: color-mix( in srgb, #e65100 15%, transparent );
	color: #e65100;
}

/* ---------- Applicant Login ---------- */
.sw-login {
	display: flex;
	flex-direction: column;
	gap: var( --nova-space-md, 1.5rem );
	max-width: 28rem;
	margin: 0 auto;
	padding: var( --nova-space-lg, 2rem );
	background: var( --nova-color-surface, #fff );
	border: 1px solid var( --nova-color-border );
	border-radius: var( --nova-radius );
}

.sw-login--already {
	text-align: center;
	align-items: center;
}

.sw-login__new-applicant {
	margin: 0;
	text-align: center;
	font-size: 0.9rem;
	color: var( --nova-color-text-muted );
}