/*
 * 70 — Plugin-overrides
 *
 * Overgezet uit de oude database-CSS. Per plugin gegroepeerd, zodat bij het
 * bijwerken of verwijderen van een plugin meteen duidelijk is wat er weg kan.
 *
 * Actieve plugins die hier geraakt worden: Gravity Forms, Moove GDPR Cookie
 * Compliance, Smash Balloon Instagram, Responsive Accordion and Collapse.
 */

/* ── Responsive Accordion and Collapse ──────────────────────────────────── */

/* Deze twee regels legden 'Source Sans Pro' vast met !important. Vervangen
 * door het token, zodat ze meebewegen met de nieuwe typografie. Dit is de
 * enige inhoudelijke wijziging in de hele migratie; alle andere regels zijn
 * ongewijzigd overgezet. */
.wpsm_panel-body p {
	font-family: var(--kdm-font-body) !important;
	color: black !important;
}

span.ac_title_class {
	font-family: var(--kdm-font-body) !important;
}

/* ── Gravity Forms ──────────────────────────────────────────────────────── */

/* Was paars (#2f2736); nu de taupe pil, gelijk aan de standaardknop in
 * 60-modules.css. */
.gform_button {
	border: 0;
	padding: 13px 30px;
	border-radius: var(--kdm-radius-pill);
	background-color: var(--kdm-cta-bg);
	color: var(--kdm-on-cta);
	font-family: var(--kdm-font-ui);
	font-size: 14px;
	font-weight: 600; /* Poppins is alleen als SemiBold (600) geladen, zie 00-tokens.css */
	line-height: 1.2;
	cursor: pointer;
	transition: background-color var(--kdm-t-base) var(--kdm-ease);
}

.gform_button:hover {
	background-color: var(--kdm-cta-bg-hover);
	opacity: 1;
}

.gfield_label {
	color: #666666 !important;
}

/* #field_1_9 is formulier 1, veld 9 — een hardgecodeerd ID. Als het
 * contactformulier ooit opnieuw wordt opgebouwd, verwijst dit nergens meer
 * naar en verdwijnt de opmaak zonder foutmelding. */
#field_1_9 {
	color: #666666 !important;
}

#field_1_9 a {
	font-weight: bold;
}

/* ── Gravity Forms — foutmeldingen ──────────────────────────────────────────
 *
 * !! TOEGANKELIJKHEIDSPROBLEEM — nog een beslissing te nemen !!
 *
 * De twee display:none-regels hieronder verbergen de foutmeldingen van het
 * formulier voor iedereen, ook voor schermlezers. Wie een verplicht veld
 * vergeet, krijgt alleen een rode rand te zien en verder geen enkele uitleg —
 * en wie het scherm niet ziet, krijgt helemaal niets.
 *
 * Ongewijzigd overgezet omdat deze fase niets aan het gedrag verandert en dit
 * een live formulier is. Maar het staat haaks op de rest van dit project.
 *
 * Voorstel: de meldingen terugzetten met eigen opmaak, of ze visueel verbergen
 * maar wel aankondigen (.kdm-sr-only + aria-live). Zie 10-base.css.
 */
.validation_error {
	display: none;
}

.gform_wrapper .validation_message {
	display: none;
}

.gform_wrapper li.gfield.gfield_error,
.gform_wrapper li.gfield.gfield_error.gfield_contains_required.gfield_creditcard_warning {
	background-color: transparent !important;
	margin-bottom: 0 !important;
	border-top: 0 !important;
	border-bottom: 0 !important;
	padding-bottom: 0 !important;
	padding-top: 0 !important;
	box-sizing: content-box !important;
}

.gform_wrapper.gf_browser_chrome .gfield_error select,
.gform_wrapper li.gfield_error input:not([type=radio]):not([type=checkbox]):not([type=submit]):not([type=button]):not([type=image]):not([type=file]),
.gform_wrapper li.gfield_error textarea {
	border: 2px solid #790000 !important;
	background-color: #fff2f2 !important;
}

.gform_wrapper .gfield_error .gfield_label {
	color: red !important;
}

/* ── Smash Balloon — Instagram ──────────────────────────────────────────── */

/* De feed staat in een sectie met .kdm-instagram (zie 50-components.css); daar
 * zit de kop en de ruimte eromheen. Hieronder alleen de markup die de plugin
 * zelf print.
 *
 * De !important's zijn hier niet te vermijden: Smash Balloon zet de kleuren uit
 * zijn instellingenscherm als inline style op de knoppen, en inline wint van
 * elke selector. Wat je hier verandert moet je dus NIET ook in het
 * plugin-scherm zetten — dat gaat vanzelf mis. */

/* Eigen kop in de sectie; die van de plugin (met avatar en bio) niet tonen. */
.sb_instagram_header {
	display: none !important;
}

/* Afgeronde hoeken op de foto's. De ronding moet op de wrapper én op de link:
 * de plugin zet de foto als background-image op .sbi_photo, en zonder overflow
 * op de wrapper steekt die door de hoek heen. */
#sb_instagram .sbi_photo_wrap,
#sb_instagram .sbi_photo {
	overflow: hidden;
	border-radius: var(--kdm-radius-md);
}

/* De twee knoppen onder de feed staan in het ontwerp naast elkaar, gecentreerd.
 * De plugin zet ze als losse blokken onder elkaar. */
#sb_instagram #sbi_load {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: var(--kdm-s-3);
	margin-top: var(--kdm-s-5);
}

/* Beide knoppen krijgen de pil van de standaardknop (60-modules.css). Iets
 * kleinere padding dan die knop: hier staan er twee naast elkaar en ze zijn in
 * het ontwerp secundair aan de CTA's hogerop de pagina. */
#sb_instagram #sbi_load .sbi_load_btn,
#sb_instagram #sbi_load .sbi_follow_btn a {
	padding: 12px 26px !important;
	border: 0 !important;
	border-radius: var(--kdm-radius-pill) !important;
	font-family: var(--kdm-font-ui) !important;
	font-size: 14px !important;
	font-weight: 600 !important; /* Poppins is alleen als SemiBold (600) geladen, zie 00-tokens.css */
	line-height: 1.2 !important;
	text-transform: none !important;
	transition: background-color var(--kdm-t-base) var(--kdm-ease);
}

/* "Meer laden" — de lichte knop. */
#sb_instagram #sbi_load .sbi_load_btn {
	background-color: var(--kdm-surface) !important;
	color: var(--kdm-ink) !important;
}

#sb_instagram #sbi_load .sbi_load_btn:hover {
	background-color: var(--kdm-cream-deep) !important;
}

/* "Volg ons op Instagram" — de taupe knop. */
#sb_instagram #sbi_load .sbi_follow_btn a {
	background-color: var(--kdm-cta-bg) !important;
	color: var(--kdm-on-cta) !important;
}

#sb_instagram #sbi_load .sbi_follow_btn a:hover {
	background: var(--kdm-cta-bg-hover) !important;
	box-shadow: none !important;
}

/* Het Instagram-logo in de volgknop; in het ontwerp staat er alleen tekst. */
#sb_instagram #sbi_load .sbi_follow_btn a svg,
#sb_instagram #sbi_load .sbi_follow_btn a .sbi_new_logo,
#sb_instagram #sbi_load .sbi_load_btn svg {
	display: none !important;
}

/* ── Moove GDPR Cookie Compliance ───────────────────────────────────────── */

/* De plugin print zijn eigen CSS met hoge specificiteit (en deels inline uit
 * de plugin-instellingen), vandaar de !important's hieronder. Dat is hier de
 * uitzondering die de regel bevestigt: aan de bron komen we niet. */
#moove_gdpr_cookie_info_bar {
	background-color: var(--kdm-black) !important;
	color: var(--kdm-on-cta) !important;
	display: flex;
	align-items: center;
	padding-top: 55px;
	padding-bottom: 55px;
	height: auto;
	justify-content: center;
	border-top: 0 !important;
	font-family: var(--kdm-font-body) !important;
	z-index: 9999;
}

/* De balk bevat losse tekst, links en knoppen; de plugin zet op elk daarvan
 * zijn eigen font-family, dus overerven is niet genoeg. */
#moove_gdpr_cookie_info_bar .moove-gdpr-cookie-notice,
#moove_gdpr_cookie_info_bar .moove-gdpr-cookie-notice *,
#moove_gdpr_cookie_info_bar .moove-gdpr-button-holder button,
#moove_gdpr_cookie_info_bar .moove-gdpr-button-holder a {
	font-family: var(--kdm-font-body) !important;
}

#moove_gdpr_cookie_info_bar .moove-gdpr-cookie-notice,
#moove_gdpr_cookie_info_bar .moove-gdpr-cookie-notice a,
#moove_gdpr_cookie_info_bar .change-settings-button {
	color: var(--kdm-on-cta) !important;
}

#moove_gdpr_cookie_info_bar button:hover {
	color: #ffffffbf !important;
}

/* Zelfde pil als de standaardknop in 60-modules.css
 * (body .et_pb_button.et_pb_button) — dezelfde tokens, alleen opnieuw
 * opgeschreven omdat deze knop geen Divi-module is. */
#moove_gdpr_cookie_info_bar .moove-gdpr-infobar-allow-all {
	padding: 17px 30px 19px !important;
	border: 0 !important;
	border-radius: var(--kdm-radius-pill) !important;
	background-color: var(--kdm-cta-bg) !important;
	color: var(--kdm-on-cta) !important;
	font-family: var(--kdm-font-body) !important;
	font-size: 16px !important;
	font-weight: 400 !important;
	line-height: 1.2 !important;
	text-transform: none !important;
	transition: background-color var(--kdm-t-base) var(--kdm-ease);
}

#moove_gdpr_cookie_info_bar .moove-gdpr-infobar-allow-all:hover {
	background-color: var(--kdm-cta-bg-hover) !important;
	color: var(--kdm-on-cta) !important;
}

.moove-gdpr-branding-cnt {
	display: none !important;
}

.moove-gdpr-cookie-notice p {
	font-size: 18px !important;
	line-height: 1.3 !important;
}