/**
 * Front-end styles for vacancies.
 *
 * Deliberately minimal and token-driven: the theme owns the look, this file
 * only guarantees a vacancy is legible and correct even before the theme has
 * an opinion. Brand values come from the client's own palette.
 */

.matchup-form,
.matchup-closed-notice,
.matchup-vacancy-meta {
	--matchup-burgundy: #732f3e;
	--matchup-greige: #ddd8d6;
	--matchup-grey: #595959;
	--matchup-ink: #211b19;
}

.matchup-closed-notice {
	margin: 2rem 0;
	padding: 1.25rem 1.5rem;
	border-left: 4px solid var(--matchup-burgundy);
	background: var(--matchup-greige);
	color: var(--matchup-ink);
	border-radius: 2px;
}

.matchup-closed-notice__title {
	margin: 0 0 0.5rem;
	font-size: 1.05rem;
}

.matchup-closed-notice__text {
	margin: 0 0 1rem;
	line-height: 1.7;
	color: var(--matchup-grey);
}

.matchup-closed-notice__actions {
	margin: 0;
}

.matchup-form {
	margin: 3rem 0 0;
	scroll-margin-top: 2rem;
}

.matchup-form__title {
	margin: 0 0 1rem;
	font-size: 1.35rem;
	color: var(--matchup-ink);
}

.matchup-form__intro {
	margin: 0 0 1.25rem;
	line-height: 1.7;
	color: var(--matchup-grey);
}

/*
 * The placeholder only ever exists for a browser that runs the loader script.
 * The server renders data-matchup-state="nojs"; the script promotes it to
 * "idle". With JavaScript off, the visitor gets the <noscript> contact CTA and
 * nothing else -- never a "loading..." box that can never resolve.
 */
.matchup-form__embed:not( [data-matchup-state='nojs'] ) {
	min-height: 120px;
}

.matchup-form__placeholder {
	display: none;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.75rem;
	padding: 1.5rem;
	border: 1px dashed rgba( 89, 89, 89, 0.35 );
	border-radius: 2px;
	background: rgba( 221, 216, 214, 0.4 );
}

.matchup-form__loading {
	margin: 0;
	color: var(--matchup-grey);
	font-size: 0.95rem;
}

.matchup-form__trigger,
.matchup-button {
	display: inline-block;
	padding: 0.7rem 1.4rem;
	border: 1px solid var(--matchup-burgundy);
	border-radius: 2px;
	background: var(--matchup-burgundy);
	color: #fff;
	font: inherit;
	line-height: 1.3;
	text-decoration: none;
	cursor: pointer;
}

.matchup-form__trigger:hover,
.matchup-form__trigger:focus,
.matchup-button:hover,
.matchup-button:focus {
	background: #5d2632;
	border-color: #5d2632;
	color: #fff;
}

.matchup-form__embed[data-matchup-state='idle'] .matchup-form__placeholder,
.matchup-form__embed[data-matchup-state='loading'] .matchup-form__placeholder,
.matchup-form__embed[data-matchup-state='failed'] .matchup-form__placeholder {
	display: flex;
}

.matchup-vacancy-meta {
	margin: 1.5rem 0 2rem;
	padding: 0;
	border-top: 1px solid rgba( 89, 89, 89, 0.2 );
}

.matchup-vacancy-meta__row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.5rem;
	padding: 0.65rem 0;
	border-bottom: 1px solid rgba( 89, 89, 89, 0.2 );
}

.matchup-vacancy-meta__label {
	flex: 0 0 12rem;
	margin: 0;
	color: var(--matchup-grey);
	font-size: 0.9rem;
}

.matchup-vacancy-meta__value {
	flex: 1 1 12rem;
	margin: 0;
	color: var(--matchup-ink);
	font-weight: 600;
}

@media ( max-width: 480px ) {
	.matchup-vacancy-meta__label {
		flex-basis: 100%;
	}
}

/* The failed-state route out. Hidden until vacancy-form.js reveals it, and
   [hidden] is enforced here so nothing in the cascade can leak it onto a page
   whose form loaded correctly. */
.matchup-form__fallback[hidden] {
	display: none;
}

.matchup-form__fallback .matchup-form--fallback {
	margin-top: 0;
}