/* Køreskole Holdtilmelding — frontend
   Farver: widget-variabler (--ksh-*) → Elementor Global Colors → neutral fallback. */

.ksh-list, .ksh-form-wrap {
	--_accent: var(--ksh-accent, var(--e-global-color-secondary, #9C6B10));
	--_head: var(--ksh-heading, var(--e-global-color-primary, #1B2A3B));
	--_text: var(--ksh-text, var(--e-global-color-text, #1E2022));
	--_muted: var(--e-global-color-muted, #5B6670);
	--_border: var(--ksh-border, var(--e-global-color-border, #E2E6EA));
	--_surface: var(--ksh-surface, var(--e-global-color-background, #FFFFFF));
	--_radius: var(--ksh-radius, 10px);
	--_font-head: var(--e-global-typography-primary-font-family, inherit);
	color: var(--_text);
}

/* ---------- Holdliste ---------- */
.ksh-list { display: flex; flex-direction: column; gap: 16px; }
.ksh-row {
	display: grid;
	grid-template-columns: 96px 1fr auto auto;
	gap: 28px;
	align-items: center;
	padding: 28px;
	background: var(--_surface);
	border: 1.5px solid var(--_border);
	border-radius: var(--_radius);
}
.ksh-row__date { display: flex; flex-direction: column; line-height: 1; }
.ksh-row__day { font-family: var(--_font-head), serif; font-size: 28px; font-weight: 700; color: var(--_head); }
.ksh-row__year { margin-top: 6px; font-size: 13px; color: var(--_muted); }
.ksh-row__title { margin: 0 0 4px; font-size: 18px; line-height: 1.3; color: var(--_head); }
.ksh-row__time, .ksh-row__note { margin: 0; font-size: 15px; line-height: 1.6; color: var(--_muted); }
.ksh-row__note { margin-top: 4px; }
.ksh-row__status { font-size: 13px; font-weight: 600; white-space: nowrap; color: var(--_accent); }
.ksh-row--venteliste .ksh-row__status,
.ksh-row--fuldt .ksh-row__status,
.ksh-row--lukket .ksh-row__status { color: var(--_muted); }

.ksh-row__dates { margin-top: 10px; font-size: 14px; }
.ksh-row__dates summary { cursor: pointer; color: var(--_accent); font-weight: 600; width: fit-content; }
.ksh-row__dates ul { margin: 10px 0 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.ksh-row__dates li { display: flex; flex-wrap: wrap; gap: 4px 10px; color: var(--_text); }
.ksh-row__dates .ksh-d { min-width: 170px; }
.ksh-row__dates .ksh-t { color: var(--_muted); }
.ksh-row__dates .ksh-n { color: var(--_accent); font-weight: 500; }

.ksh-empty { padding: 24px; border: 1.5px dashed var(--_border); border-radius: var(--_radius); color: var(--_muted); }

/* ---------- Knapper ---------- */
.ksh-btn {
	display: inline-block;
	padding: 14px 32px;
	border: 2px solid var(--_accent);
	border-radius: var(--_radius);
	background: var(--_accent);
	color: #fff;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none !important;
	cursor: pointer;
	transition: opacity .2s, background-color .2s, color .2s;
	white-space: nowrap;
}
.ksh-list .ksh-btn, .ksh-form-wrap .ksh-btn, .ksh-list .ksh-btn:visited { color: #fff; }
.ksh-list .ksh-btn:hover, .ksh-list .ksh-btn:focus-visible, .ksh-form-wrap .ksh-btn:hover { opacity: .88; color: #fff; }
.ksh-list .ksh-btn--outline, .ksh-list .ksh-btn--outline:visited { background: transparent; color: var(--_head); border-color: var(--_head); }
.ksh-list .ksh-btn--outline:hover, .ksh-list .ksh-btn--outline:focus-visible { background: var(--_head); color: #fff; opacity: 1; }

/* ---------- Formular ---------- */
.ksh-form-wrap { margin-top: 48px; scroll-margin-top: 110px; }
.ksh-form__title { margin: 0 0 8px; color: var(--_head); }
.ksh-form__intro { margin: 0 0 24px; color: var(--_muted); max-width: 640px; }
.ksh-form {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 20px;
	padding: 36px;
	background: var(--_surface);
	border: 1.5px solid var(--_border);
	border-radius: var(--_radius);
}
.ksh-field { grid-column: span 3; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ksh-field--full { grid-column: 1 / -1; }
.ksh-field--sm { grid-column: span 2; }
.ksh-field--lg { grid-column: span 4; }
.ksh-field label { font-size: 14px; font-weight: 600; color: var(--_head); }
.ksh-field input[type="text"],
.ksh-field input[type="email"],
.ksh-field input[type="tel"],
.ksh-field select,
.ksh-field textarea {
	width: 100%;
	padding: 12px 14px;
	border: 1.5px solid var(--_border);
	border-radius: calc(var(--_radius) - 2px);
	background: #fff;
	color: var(--_text);
	font: inherit;
	font-size: 16px; /* undgår zoom på iOS */
	line-height: 1.4;
}
.ksh-field input:focus, .ksh-field select:focus, .ksh-field textarea:focus {
	outline: none;
	border-color: var(--_accent);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--_accent) 20%, transparent);
}
.ksh-field [aria-invalid="true"] { border-color: #b42318; }
.ksh-field__error { font-size: 13px; color: #b42318; }
.ksh-field__help { font-size: 13px; line-height: 1.5; color: var(--_muted); }
.ksh-field--check label { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; font-size: 14px; line-height: 1.6; color: var(--_text); }
.ksh-field--check input { margin-top: 4px; width: 18px; height: 18px; flex-shrink: 0; accent-color: var(--_accent); }
.ksh-field--check a { color: var(--_accent); }
.ksh-btn--submit { justify-self: start; width: fit-content; }
.ksh-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

.ksh-notice { padding: 20px 24px; border-radius: var(--_radius); margin-bottom: 20px; }
.ksh-notice h3 { margin: 0 0 6px; color: var(--_head); }
.ksh-notice p { margin: 0; }
.ksh-notice--ok { background: color-mix(in srgb, var(--_accent) 10%, #fff); border-left: 4px solid var(--_accent); }
.ksh-notice--error { background: #fef3f2; border-left: 4px solid #b42318; color: #7a271a; }

/* ---------- Responsivt ---------- */
@media (max-width: 1024px) {
	.ksh-row { grid-template-columns: 76px 1fr auto; gap: 20px; }
	.ksh-row__action { grid-column: 1 / -1; }
}
@media (max-width: 767px) {
	.ksh-row { grid-template-columns: 1fr; gap: 12px; padding: 24px; }
	.ksh-row__action { grid-column: auto; }
	.ksh-row__date { flex-direction: row; align-items: baseline; gap: 8px; }
	.ksh-form { grid-template-columns: 1fr; padding: 24px 20px; gap: 16px; }
	.ksh-field, .ksh-field--sm, .ksh-field--lg { grid-column: 1 / -1; }
	.ksh-row__dates .ksh-d { min-width: 0; }
}