/*
 * Formulieren in het donkere thema: aanmeldformulier (Hit Play Live),
 * nieuwsbrief, contactformulier en het zoekveld van het core Search-blok.
 *
 * De plugins leveren hun eigen lichte stijl met vaste kleuren. Hier worden die
 * overschreven; elke regel begint met "body" zodat het wint van de plugin-CSS,
 * ongeacht de laadvolgorde. Kleuren komen uit theme.json (--wp--preset--color--*).
 */

/* Gedeelde ontwerpwaarden. */
body {
	--kes-field-bg: var(--wp--preset--color--base);
	--kes-field-border: var(--wp--preset--color--contrast-3);
	--kes-field-text: var(--wp--preset--color--contrast);
	--kes-field-focus: var(--wp--preset--color--accent-5);
	--kes-field-error: var(--wp--preset--color--accent-3);
	--kes-ok-bg: rgba(60, 200, 120, 0.14);
	--kes-ok-border: rgba(60, 200, 120, 0.55);
	--kes-ok-text: #9be8b8;
	--kes-err-bg: rgba(255, 111, 125, 0.14);
	--kes-err-border: rgba(255, 111, 125, 0.6);
	--kes-err-text: #ffb8bf;
	--kes-info-bg: rgba(255, 154, 60, 0.1);
	--kes-info-border: rgba(255, 154, 60, 0.45);
}

/* Native onderdelen (keuzelijst, vinkjes, scrollbalk) in de donkere variant. */
body :is(.telex-aanmeld-form, .telex-newsletter-signup-form, .kes-contact-form) {
	color-scheme: dark;
}

/* ---------- Velden (alle formulieren) ---------- */

body .telex-aanmeld-form__input,
body .telex-aanmeld-form__select,
body .telex-aanmeld-form__textarea,
body .telex-newsletter-signup-form__input,
body .telex-newsletter-signup-form__select,
body .kes-contact-form input[type="text"],
body .kes-contact-form input[type="email"],
body .kes-contact-form input[type="tel"],
body .kes-contact-form select,
body .kes-contact-form textarea,
body .wp-block-search__input {
	background-color: var(--kes-field-bg);
	border: 1px solid var(--kes-field-border);
	border-radius: 10px;
	box-sizing: border-box;
	color: var(--kes-field-text);
	font-family: inherit;
	font-size: 1rem;
	line-height: 1.5;
	padding: 0.7rem 0.85rem;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

body .telex-aanmeld-form__input::placeholder,
body .telex-aanmeld-form__textarea::placeholder,
body .telex-newsletter-signup-form__input::placeholder,
body .kes-contact-form input::placeholder,
body .kes-contact-form textarea::placeholder,
body .wp-block-search__input::placeholder {
	color: var(--wp--preset--color--contrast-3);
	opacity: 1;
}

body .telex-aanmeld-form__input:focus,
body .telex-aanmeld-form__select:focus,
body .telex-aanmeld-form__textarea:focus,
body .telex-newsletter-signup-form__input:focus,
body .telex-newsletter-signup-form__select:focus,
body .kes-contact-form input:focus,
body .kes-contact-form select:focus,
body .kes-contact-form textarea:focus,
body .wp-block-search__input:focus {
	border-color: var(--kes-field-focus);
	box-shadow: 0 0 0 3px rgba(255, 79, 163, 0.3);
	outline: none;
}

body .telex-aanmeld-form__input.has-error,
body .telex-aanmeld-form__select.has-error,
body .telex-aanmeld-form__textarea.has-error {
	border-color: var(--kes-field-error);
	box-shadow: 0 0 0 1px var(--kes-field-error);
}

/* ---------- Labels, titels, hulpteksten ---------- */

body .telex-aanmeld-form__title,
body .telex-aanmeld-form__label,
body .telex-aanmeld-form__optin-question,
body .telex-aanmeld-form__optin-label,
body .telex-newsletter-signup-form__label,
body .telex-newsletter-signup-form__heading,
body .kes-contact-form label {
	color: var(--wp--preset--color--contrast);
}

body .telex-aanmeld-form__title {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
}

body .telex-aanmeld-form__conditional {
	color: var(--wp--preset--color--contrast-3);
}

body .telex-aanmeld-form__required {
	color: var(--wp--preset--color--accent-3);
}

body .telex-aanmeld-form__error {
	color: var(--kes-err-text);
}

/* ---------- Aanmeldformulier: kaart ---------- */

body .telex-aanmeld-form__inner {
	background: var(--wp--preset--color--base-2);
	border: 1px solid var(--wp--preset--color--accent);
	border-radius: 18px;
	box-shadow: var(--wp--preset--shadow--soft);
	color: var(--wp--preset--color--contrast);
	padding: clamp(1.25rem, 5vw, 2rem);
}

body .telex-aanmeld-form__contact-hint,
body .telex-aanmeld-form__optin-help-text {
	background: var(--kes-info-bg);
	border: 1px solid var(--kes-info-border);
	border-radius: 10px;
	color: var(--wp--preset--color--contrast-2);
}

body .telex-aanmeld-form__optin {
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--accent);
	border-radius: 12px;
}

body .telex-aanmeld-form__optin-help-toggle {
	color: var(--wp--preset--color--contrast-2);
}

body .telex-aanmeld-form__optin-help-toggle:hover,
body .telex-aanmeld-form__optin-help-toggle:focus {
	background: rgba(255, 79, 163, 0.18);
	color: var(--wp--preset--color--accent-5);
}

body .telex-aanmeld-form__optin-checkbox {
	accent-color: var(--wp--preset--color--accent-5);
}

/* ---------- Knoppen (zelfde pillstijl als de rest van het thema) ---------- */

body .telex-aanmeld-form__button,
body .kes-contact-form button {
	background: var(--wp--preset--color--accent-5);
	border: 0;
	border-radius: 999px;
	color: var(--wp--preset--color--base);
	cursor: pointer;
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	letter-spacing: 0.08em;
	padding: 0.9rem 2rem;
	text-transform: uppercase;
	transition: background-color 0.15s ease;
}

body .telex-aanmeld-form__button:hover,
body .telex-aanmeld-form__button:focus-visible,
body .kes-contact-form button:hover,
body .kes-contact-form button:focus-visible {
	background: var(--wp--preset--color--accent-2);
	color: var(--wp--preset--color--base);
}

body .telex-aanmeld-form__button:focus,
body .telex-aanmeld-form__button:focus-visible {
	outline: 3px solid var(--wp--preset--color--accent-2);
	outline-offset: 2px;
}

body .telex-aanmeld-form__button:disabled,
body .telex-newsletter-signup-form__button:disabled,
body .kes-contact-form button:disabled {
	cursor: not-allowed;
	opacity: 0.55;
}

/* ---------- Meldingen (gelukt / fout) ---------- */

body .telex-aanmeld-form__status.is-success,
body .telex-newsletter-signup-form__message.is-success,
body .kes-contact-notice--success {
	background: var(--kes-ok-bg);
	border: 1px solid var(--kes-ok-border);
	border-radius: 10px;
	color: var(--kes-ok-text);
}

body .telex-aanmeld-form__status.is-error,
body .telex-newsletter-signup-form__message.is-error,
body .kes-contact-notice--error {
	background: var(--kes-err-bg);
	border: 1px solid var(--kes-err-border);
	border-radius: 10px;
	color: var(--kes-err-text);
}

/* ---------- Core zoekblok ---------- */

body .wp-block-search__button {
	background: var(--wp--preset--color--accent-5);
	border: 0;
	border-radius: 999px;
	color: var(--wp--preset--color--base);
}

body .kes-contact-form input[type="checkbox"],
body .kes-contact-form input[type="radio"] {
	accent-color: var(--wp--preset--color--accent-5);
}