/**
 * Junto Send — Inschrijfformulier frontend styling.
 *
 * BEM naamgeving; CSS custom properties met --junto-* prefix zodat een
 * theme of klant-stylesheet ze kan overrulen zonder de plugin aan te
 * raken (CLAUDE.md §7 huisstijl-philosophy). Plugin-defaults matchen
 * de mail-template-kleuren zodat de website-rendering visueel
 * consistent is met de bevestigingsmail.
 *
 * Geen reset / geen normalize — de plugin neemt aan dat het thema z'n
 * eigen typografie en spacing-baseline biedt; dit bestand voegt
 * alleen toe wat het formulier nodig heeft om herkenbaar als formulier
 * te renderen.
 */

.junto-send-subscribe-form {
	--junto-color-primary: #69b0e4;
	--junto-color-primary-text: #ffffff;

	/*
	 * --junto-color-focus is een AA-veilige variant voor focus-outlines.
	 * Reden (Codex 7.c P2-finding): de huisstijl-primary #69b0e4 heeft
	 * ~2.3:1 contrast tegen wit — onvoldoende voor zichtbare focus-ring
	 * op een witte page-achtergrond. Aparte custom-prop laat een theme
	 * de huisstijl-primary behouden voor button-bg én een AA-passende
	 * focus-kleur kiezen.
	 *
	 * #2d6da3 contrast vs #ffffff = ~5.5:1 (passes AA voor normal text;
	 * voor outline-zichtbaarheid ruim voldoende).
	 */
	--junto-color-focus: #2d6da3;

	--junto-color-text: #2d2926;
	--junto-color-text-muted: #6b6864;
	--junto-color-border: #d4d4d4;
	--junto-color-feedback-info-bg: #f0f0f0;
	--junto-color-feedback-success-bg: #e8f5e9;
	--junto-color-feedback-success-text: #1b5e20;
	--junto-color-feedback-error-bg: #ffebee;
	--junto-color-feedback-error-text: #c62828;

	max-width: 480px;
	color: var(--junto-color-text);
}

.junto-send-subscribe-form__title {
	font-size: 20px;
	font-weight: 700;
	margin: 0 0 16px;
	color: var(--junto-color-text);
}

.junto-send-subscribe-form__label {
	display: block;
	margin: 0 0 12px;
}

.junto-send-subscribe-form__label > span {
	display: block;
	font-size: 14px;
	margin: 0 0 4px;
	color: var(--junto-color-text);
}

.junto-send-subscribe-form__input {
	width: 100%;
	padding: 8px 12px;
	border: 1px solid var(--junto-color-border);
	border-radius: 4px;
	font-size: 16px;
	box-sizing: border-box;
	background-color: #ffffff;
	color: var(--junto-color-text);
}

.junto-send-subscribe-form__input:focus {
	outline: 2px solid var(--junto-color-focus);
	outline-offset: 1px;
}

.junto-send-subscribe-form__submit {
	background-color: var(--junto-color-primary);
	color: var(--junto-color-primary-text);
	border: none;
	border-radius: 9999px;
	padding: 12px 28px;
	font-size: 16px;
	font-weight: 700;
	cursor: pointer;
	min-height: 44px;
}

.junto-send-subscribe-form__submit:hover {
	opacity: 0.9;
}

/*
 * :focus-visible (Fase 7.c) — keyboard-only focus-ring. Outline-color
 * matched de input-focus voor consistentie binnen het block. De input
 * houdt z'n gewone :focus (zie boven) — bij text-input is een focus-
 * indicator óók bij muis-click gewenst, anders weet de gebruiker niet
 * waar de cursor staat na een click.
 */
.junto-send-subscribe-form__submit:focus-visible {
	outline: 2px solid var(--junto-color-focus);
	outline-offset: 2px;
	opacity: 1;
}

/*
 * Fallback voor user-agents zonder :focus-visible support (Safari < 15.4
 * bv.). Een UA die de :focus-visible-rule negeert toont anders helemaal
 * geen focus-indicator op de submit-button — keyboard-only-fail. De
 * @supports-rule wint alleen wanneer :focus-visible NIET ondersteund
 * wordt; modern UA's krijgen de strakkere keyboard-only ring hierboven.
 */
@supports not selector(:focus-visible) {
	.junto-send-subscribe-form__submit:focus {
		outline: 2px solid var(--junto-color-focus);
		outline-offset: 2px;
	}
}

.junto-send-subscribe-form__submit:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

.junto-send-subscribe-form__feedback {
	margin-top: 12px;
	padding: 8px 12px;
	border-radius: 4px;
	font-size: 14px;
	line-height: 1.4;
}

.junto-send-subscribe-form__feedback:empty {
	display: none;
}

.junto-send-subscribe-form__feedback--info {
	background-color: var(--junto-color-feedback-info-bg);
	color: var(--junto-color-text);
}

.junto-send-subscribe-form__feedback--success {
	background-color: var(--junto-color-feedback-success-bg);
	color: var(--junto-color-feedback-success-text);
}

.junto-send-subscribe-form__feedback--error {
	background-color: var(--junto-color-feedback-error-bg);
	color: var(--junto-color-feedback-error-text);
}