/**
 * Umsóknir fyrir nemendur — application form layout.
 *
 * Loaded only on template-umsokn.php and the `umsokn` / `umsoknir` pages.
 * Base form controls, buttons and cards live in main.css; everything here is
 * page layout, the section/field rhythm, error states and the success panel.
 *
 * @package Arnarskoli
 */

.umsokn {
	max-width: 820px;
	margin: 0 auto;
	padding: var(--space-2xl) 0 var(--space-5xl);
}

.umsokn .section-head {
	margin-bottom: var(--space-xl);
}

.umsokn .section-head__lead {
	max-width: 600px;
}


/* Deadline note
   ------------------------------------------------------------------------ */

.umsokn__deadline {
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
	margin-bottom: var(--space-2xl);
}

.umsokn__deadline .card__text {
	line-height: var(--lh-loose);
}


/* Form shell
   ------------------------------------------------------------------------ */

.umsokn-form {
	display: flex;
	flex-direction: column;
	gap: var(--space-lg);
}

.umsokn-form__honeypot {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.form-error-summary {
	padding: var(--space-md) var(--space-lg);
	border-radius: var(--radius-16);
	background: var(--error-soft, #FCEAEA);
	color: var(--error-text, #8a2f1c);
	font-weight: 600;
	font-size: var(--fs-base);
}


/* Sections
   ------------------------------------------------------------------------ */

.umsokn .form-section {
	display: flex;
	flex-direction: column;
	gap: var(--space-lg);
	padding: var(--space-xl);
	border: 1px solid var(--hairline);
	border-radius: var(--radius-24);
	background: var(--color-surface);
}

.form-section__head {
	display: flex;
	flex-direction: column;
	gap: var(--space-3xs);
}

.umsokn .form-section__heading {
	margin: 0;
	font-family: var(--font-display);
	font-size: var(--fs-xl);
	font-weight: 700;
}

.form-section__hint {
	margin: 0;
	color: var(--color-ink-2);
	font-size: var(--fs-sm);
}


/* Fields
   ------------------------------------------------------------------------ */

.umsokn .field {
	display: flex;
	flex-direction: column;
	gap: var(--space-xs);
}

.umsokn .field__label {
	font-weight: 600;
	font-size: var(--fs-base);
	color: var(--color-ink);
}

.field__required {
	color: #b3432f;
}

.umsokn .field__input {
	width: 100%;
	box-sizing: border-box;
}

.umsokn .field__input--textarea {
	min-height: 110px;
	resize: vertical;
}

.umsokn .field__error {
	color: #b3432f;
	font-weight: 600;
	font-size: var(--fs-xs);
}

.umsokn .field--invalid .field__input {
	border-color: #b3432f;
}


/* Radio groups
   ------------------------------------------------------------------------ */

.field__options {
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
}

.field__option {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
	cursor: pointer;
	font-weight: 500;
	font-size: var(--fs-base);
	line-height: 1.4;
	color: var(--color-ink);
}

.field__radio {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

.field__dot {
	position: relative;
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	border: 1.5px solid var(--rule);
	border-radius: 50%;
	background: var(--color-surface);
	transition: border-color .15s ease;
}

.field__dot::after {
	content: "";
	position: absolute;
	inset: 4px;
	border-radius: 50%;
	background: var(--accent);
	opacity: 0;
	transition: opacity .15s ease;
}

.field__radio:checked + .field__dot {
	border-color: var(--accent);
}

.field__radio:checked + .field__dot::after {
	opacity: 1;
}

.field__radio:focus-visible + .field__dot {
	outline: 2px solid var(--accent-dark);
	outline-offset: 2px;
}

.umsokn .field--invalid .field__dot {
	border-color: #b3432f;
}

.field__other {
	display: flex;
	flex-direction: column;
	gap: var(--space-xs);
	margin-top: var(--space-3xs);
}

.field__other[hidden] {
	display: none;
}


/* Actions
   ------------------------------------------------------------------------ */

.form-actions {
	display: flex;
	align-items: center;
	gap: var(--space-md);
	flex-wrap: wrap;
}

.form-actions__note {
	font-size: var(--fs-sm);
	color: var(--color-ink-2);
}

/* .btn--sage is a base component owned by PM-1 in main.css — do not redefine it here. */


/* Success panel
   ------------------------------------------------------------------------ */

.umsokn .form-success {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-sm);
	padding: var(--space-4xl) var(--space-2xl);
	border: 1px solid var(--hairline);
	border-radius: var(--radius-24);
	background: var(--color-surface);
	text-align: center;
}

.form-success__mark {
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: var(--sage);
}

.umsokn .form-success__title {
	margin: 0;
	font-family: var(--font-display);
	font-size: var(--fs-3xl);
	font-weight: 700;
}

.form-success__text {
	margin: 0;
	max-width: 440px;
	color: var(--color-ink-2);
	line-height: var(--lh-loose);
}

.umsokn .form-success .btn {
	margin-top: var(--space-xs);
}


/* Narrow screens
   ------------------------------------------------------------------------ */

@media ( max-width: 600px ) {

	.umsokn {
		padding: var(--space-xl) 0 var(--space-3xl);
	}

	.umsokn .form-section {
		padding: var(--space-lg);
	}

	.umsokn .form-success {
		padding: var(--space-2xl) var(--space-lg);
	}
}