/*
 * Lighthouse Formulieren - frontend.
 *
 * Het actieve template komt uit het Artisteer-tijdperk en kent geen Bootstrap,
 * dus hier mag niets van een framework afhangen. Alles staat onder .lhform of
 * .lhg zodat het buiten het formulier niets aanraakt.
 *
 * Kleuren komen uit het template zelf: navy #00295C voor actie, zeeblauw
 * #48A6C2 als "dit staat aan"-signaal, bordeaux #9E2A2B voor verplicht en fout.
 */

.lhform,
.lhg {
	--lh-navy: #00295c;
	--lh-navy-deep: #001d43;
	--lh-sea: #48a6c2;
	--lh-ink: #303f50;
	--lh-muted: #758799;
	--lh-line: #d9dee3;
	--lh-mist: #f9fafb;
	--lh-bordeaux: #9e2a2b;
	--lh-white: #fff;

	--lh-radius: 4px;
	--lh-gap: 14px;
}

.lhform *,
.lhform *::before,
.lhform *::after,
.lhg *,
.lhg *::before,
.lhg *::after {
	box-sizing: border-box;
}

/* ---------------------------------------------------------------- de groep */

.lhg {
	margin: 1.75em 0;
	max-width: 38em;
	font-size: 15px;
	line-height: 1.55;
	color: var(--lh-ink);
}

.lhg-bar {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

/*
 * Knoppen in de stijl van instrumentlabels: klein, kapitaal, ruim gespatieerd.
 * Past bij "tools voor uw persoonlijke navigatie" en houdt ze rustig naast de
 * broodtekst.
 */
.lhg-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 12px 20px;
	border: 1px solid var(--lh-navy);
	border-radius: var(--lh-radius);
	background: var(--lh-white);
	color: var(--lh-navy);
	font: inherit;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

/* Driehoekje voor de tekst dat meedraait: dicht wijst het opzij, open omlaag. */
.lhg-btn::before {
	content: "";
	width: 0;
	height: 0;
	border-top: 4px solid transparent;
	border-bottom: 4px solid transparent;
	border-left: 6px solid currentColor;
	transition: transform 0.18s ease;
}

.lhg-btn:hover,
.lhg-btn:focus-visible {
	background: var(--lh-navy);
	color: var(--lh-white);
}

.lhg-btn:focus-visible {
	outline: 3px solid var(--lh-sea);
	outline-offset: 2px;
}

.lhg-btn.is-open {
	background: var(--lh-navy);
	border-color: var(--lh-navy);
	color: var(--lh-white);
}

.lhg-btn.is-open::before {
	transform: rotate(90deg);
}

/*
 * Het baken. De open knop krijgt een punt aan de onderkant die naar het paneel
 * wijst. Met twee knoppen op een gedeeld paneel is dat geen versiering maar het
 * antwoord op "van welke knop is dit formulier".
 */
.lhg-btn.is-open::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: -7px;
	width: 12px;
	height: 12px;
	margin-left: -6px;
	background: var(--lh-navy);
	transform: rotate(45deg);
}

.lhg-panel {
	margin-top: 14px;
	border: 1px solid var(--lh-line);
	border-top: 2px solid var(--lh-sea);
	border-radius: var(--lh-radius);
	background: var(--lh-mist);
}

.lhg-panel[hidden] {
	display: none;
}

.lhg-panel-inner {
	padding: 4px 22px 22px;
}

/*
 * Uitschuiven. De hoogte wordt door het script gemeten en als max-height gezet;
 * na afloop gaat die weer op "none" zodat het paneel kan meegroeien met een
 * foutmelding of een bedanktekst.
 */
.lhg-ready .lhg-panel.is-animating {
	overflow: hidden;
	transition: max-height 0.24s ease;
}

/* Zonder JavaScript zijn de knoppen zinloos: dan staan de formulieren gewoon open. */
.lhg:not(.lhg-ready) .lhg-bar {
	display: none;
}

/* -------------------------------------------------------------- formulier */

.lhform {
	margin: 1.5em 0;
	max-width: 38em;
	font-size: 15px;
	line-height: 1.55;
	color: var(--lh-ink);
}

.lhg .lhform {
	margin: 0;
	max-width: none;
}

.lhform-intro {
	margin-bottom: 1.1em;
	color: var(--lh-ink);
}

.lhform-intro p:last-child {
	margin-bottom: 0;
}

.lhform-field {
	margin-bottom: var(--lh-gap);
}

.lhform-field label {
	display: block;
	margin-bottom: 6px;
	color: var(--lh-navy);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.02em;
}

.lhform-req {
	color: var(--lh-bordeaux);
}

.lhform-field input[type="text"],
.lhform-field input[type="email"],
.lhform-field input[type="tel"],
.lhform-field textarea {
	display: block;
	width: 100%;
	padding: 11px 13px;
	border: 1px solid var(--lh-line);
	border-radius: var(--lh-radius);
	background: var(--lh-white);
	font: inherit;
	color: var(--lh-ink);
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.lhform-field input:hover,
.lhform-field textarea:hover {
	border-color: #b9c2cb;
}

.lhform-field input:focus,
.lhform-field textarea:focus {
	border-color: var(--lh-sea);
	box-shadow: 0 0 0 3px rgba(72, 166, 194, 0.25);
	outline: none;
}

.lhform-field textarea {
	min-height: 7em;
	resize: vertical;
}

.lhform-consent {
	margin: 1.1em 0;
	font-size: 14px;
}

.lhform-consent label {
	display: block;
	color: var(--lh-ink);
	font-size: 14px;
	font-weight: normal;
	letter-spacing: 0;
	/* Hangende inspringing zodat doorlopende tekst niet onder het vinkje kruipt. */
	padding-left: 1.9em;
	text-indent: -1.9em;
	cursor: pointer;
}

.lhform-consent input[type="checkbox"] {
	width: 1em;
	height: 1em;
	margin-right: 0.7em;
	accent-color: var(--lh-navy);
	text-indent: 0;
	vertical-align: baseline;
}

.lhform-consent a {
	color: var(--lh-navy);
	text-decoration: underline;
}

.lhform-hint {
	margin: 0 0 1.1em;
	color: var(--lh-muted);
	font-size: 13px;
}

.lhform-submit {
	display: inline-block;
	padding: 13px 26px;
	border: 0;
	border-radius: var(--lh-radius);
	background: var(--lh-navy);
	color: var(--lh-white);
	font: inherit;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.04em;
	cursor: pointer;
	transition: background-color 0.18s ease;
}

.lhform-submit:hover,
.lhform-submit:focus {
	background: var(--lh-navy-deep);
	color: var(--lh-white);
}

.lhform-submit:focus-visible {
	outline: 3px solid var(--lh-sea);
	outline-offset: 2px;
}

.lhform-submit[disabled] {
	opacity: 0.55;
	cursor: default;
}

/*
 * De honeypot. Uit beeld en uit de voorleesvolgorde, maar voor een bot een
 * gewoon invulveld.
 */
.lhform-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.lhform-message {
	margin: 0 0 1.1em;
	padding: 14px 16px;
	border-radius: var(--lh-radius);
	border-left: 3px solid transparent;
	font-size: 15px;
}

.lhform-message-success {
	background: #eef6f2;
	border-left-color: #2e7d5b;
	color: #1c4534;
}

.lhform-message-error {
	background: #fbeceb;
	border-left-color: var(--lh-bordeaux);
	color: #7a2320;
}

.lhform-download {
	margin-top: 1em;
}

.lhform-download a {
	display: inline-block;
	padding: 13px 26px;
	border-radius: var(--lh-radius);
	background: var(--lh-navy);
	color: var(--lh-white);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-decoration: none;
}

.lhform-download a:hover {
	background: var(--lh-navy-deep);
	color: var(--lh-white);
}

.lhform-download-note {
	margin-top: 0.6em;
	color: var(--lh-muted);
	font-size: 13px;
}

/* ------------------------------------------------------------- responsive */

@media (max-width: 560px) {
	.lhg,
	.lhform {
		max-width: 100%;
	}

	.lhg-bar {
		display: block;
	}

	.lhg-btn {
		display: flex;
		width: 100%;
		margin-bottom: 8px;
		justify-content: center;
	}

	/* Op een smal scherm staan de knoppen onder elkaar; een punt in het midden
	   zou dan naar de volgende knop wijzen in plaats van naar het paneel. */
	.lhg-btn.is-open::after {
		display: none;
	}

	.lhg-panel-inner {
		padding: 4px 16px 18px;
	}

	.lhform-submit,
	.lhform-download a {
		display: block;
		width: 100%;
		text-align: center;
	}
}

@media (prefers-reduced-motion: reduce) {
	.lhg-btn,
	.lhg-btn::before,
	.lhform-submit,
	.lhform-field input,
	.lhform-field textarea,
	.lhg-ready .lhg-panel.is-animating {
		transition: none;
	}
}