/* Watercolour button - Wendy Uitvaartzorg
   Gerenderd door de Elementor widget "Aquarel knop".

   Specificiteitsafspraak, zodat volgorde van stylesheets niet uitmaakt:
     0,2,0  de globale kit  (.elementor-kit-140 button)
     0,3,0  deze reset      (.elementor-widget-... .wc-btn.wc-btn)
     0,4,0  de widgetcontrols in Elementor (.wc-btn.wc-btn.wc-btn)
*/

.wc-btn,
.elementor-widget-form {
	--wc-ink: #4E6B57;
	--wc-ink-hover: #3E5646;
	--wc-text: #FFFFFF;
	--wc-focus: #1B2B21;
}

/* De kit zet op elke <button> een achtergrondkleur, Oswald, uppercase en
   letter-spacing. Alles hier terugdraaien naar neutraal, zodat de instellingen
   van de widget het beeld bepalen. */
.elementor-widget-wendy-watercolour-button .wc-btn.wc-btn,
.elementor-widget-wendy-watercolour-button .wc-btn.wc-btn:hover,
.elementor-widget-wendy-watercolour-button .wc-btn.wc-btn:focus,
.elementor-widget-wendy-watercolour-button .wc-btn.wc-btn:active {
	-webkit-appearance: none;
	appearance: none;
	position: relative;
	z-index: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0.75rem 2rem;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	background-color: transparent;
	background-image: none;
	font: inherit;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: normal;
	text-transform: none;
	text-align: center;
	text-decoration: none;
	white-space: normal;
	color: var(--wc-text);
	cursor: pointer;
	transition: color .2s ease;
}

.elementor-widget-wendy-watercolour-button .wc-btn.wc-btn--full {
	display: flex;
	width: 100%;
}

/* de verfvlek */
.wc-btn::before,
.elementor-widget-form:not(#wc) .elementor-button::before {
	content: "";
	position: absolute;
	inset: -0.35em -0.6em;
	z-index: -1;
	border-radius: 999px;
	background-color: var(--wc-ink);
	background-image:
		/* ongelijke wash: waar het papier natter was */
		radial-gradient(120% 150% at 22% 15%, rgba(255,255,255,.28), transparent 55%),
		radial-gradient(90% 130% at 88% 85%, rgba(0,0,0,.20), transparent 60%),
		/* pigmentwolken */
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='c'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.03' numOctaves='4' seed='4'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23c)' opacity='0.95'/%3E%3C/svg%3E"),
		/* papierkorrel */
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='4' seed='9'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
	background-size: auto, auto, 260px 180px, 120px 120px;
	background-blend-mode: soft-light, soft-light, soft-light, multiply;
	box-shadow: inset 0 0 18px rgba(0,0,0,.30);
	filter: url(#wc-edge-2);
	transition: background-color .2s ease;
}

/* randruwheid */
.wc-btn--edge-1::before { filter: url(#wc-edge-1); }
.wc-btn--edge-2::before { filter: url(#wc-edge-2); }
.wc-btn--edge-3::before { filter: url(#wc-edge-3); }

.wc-btn:hover::before,
.wc-btn:focus-visible::before,
.elementor-widget-form:not(#wc) .elementor-button:hover::before,
.elementor-widget-form:not(#wc) .elementor-button:focus-visible::before { background-color: var(--wc-ink-hover); }

/* eigen focusring, los van de vlek */
.elementor-widget-wendy-watercolour-button .wc-btn.wc-btn:focus-visible {
	outline: 3px solid var(--wc-focus);
	outline-offset: 6px;
	border-radius: 999px;
}

/* --- toegankelijkheidsvangnetten --- */

@media (forced-colors: active) {
	.elementor-widget-wendy-watercolour-button .wc-btn.wc-btn {
		color: ButtonText;
		border: 2px solid ButtonText;
		border-radius: 999px;
	}
	.elementor-widget-form:not(#wc) .elementor-button { color: ButtonText; border: 2px solid ButtonText; border-radius: 999px; }
	.elementor-widget-form:not(#wc) .elementor-field-textual,
	.elementor-widget-form:not(#wc) .elementor-select-wrapper select { border: 1px solid CanvasText; background-image: none; }
	.wc-btn::before,
	.elementor-widget-form:not(#wc) .elementor-button::before { display: none; }
}

@media (prefers-contrast: more) {
	.wc-btn::before,
	.elementor-widget-form:not(#wc) .elementor-button::before { background-image: none; filter: none; box-shadow: none; }
	.elementor-widget-form:not(#wc) .elementor-field-textual,
	.elementor-widget-form:not(#wc) .elementor-select-wrapper select { border: 2px solid var(--wc-ink-hover); background-image: none; }
}

@media print {
	.wc-btn::before,
	.elementor-widget-form:not(#wc) .elementor-button::before { filter: none; background-image: none; }
}


/* =====================================================================
   Elementor formulieren
   Geldt voor elk Elementor Pro formulier op de site, geen class nodig.

   :not(#wc) telt als een ID (1,0,0) zonder dat er een ID bestaat. Dat is
   nodig omdat de widget-CSS van Elementor tot 0,5,0 gaat. Gevolg: kleuren,
   randen en knopstijl in het Stijl-tabblad van het formulier doen niets
   meer. Aanpassen gaat via de variabelen hierboven.
   ===================================================================== */

.elementor-widget-form:not(#wc) {
	--wc-field-bg: rgba(156, 169, 152, .12);
	--wc-field-text: #1B2B21;
	--wc-error: #B93E20;
}

/* --- velden --- */

.elementor-widget-form:not(#wc) .elementor-field-group .elementor-field-textual,
.elementor-widget-form:not(#wc) .elementor-field-group .elementor-select-wrapper select {
	-webkit-appearance: none;
	appearance: none;
	min-height: 48px;
	padding: 0.75rem 1rem 0.9rem;
	border: 0;
	border-radius: 10px 10px 4px 4px;
	box-shadow: none;
	color: var(--wc-field-text);
	font-family: var(--e-global-typography-text-font-family), sans-serif;
	font-size: 16px;               /* leesbaar, en iOS zoomt niet in */
	line-height: 1.5;
	letter-spacing: normal;
	text-transform: none;          /* de kit zet hier capitalize */
	background-color: var(--wc-field-bg);
	/* aquarelstreep onderaan: de kleur #6B8170 haalt 3,9:1 op het papier,
	   dus de streep telt als zichtbare veldgrens (WCAG 1.4.11) */
	background-image:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 12' preserveAspectRatio='none'%3E%3Cfilter id='r' x='-5%25' y='-100%25' width='110%25' height='300%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.035 0.4' numOctaves='3' seed='3'/%3E%3CfeDisplacementMap in='SourceGraphic' scale='5' xChannelSelector='R' yChannelSelector='G'/%3E%3C/filter%3E%3Crect x='2' y='4' width='396' height='4' rx='2' fill='%236B8170' filter='url(%23r)'/%3E%3C/svg%3E"),
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='4' seed='9'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.12'/%3E%3C/svg%3E");
	background-repeat: no-repeat, repeat;
	background-position: left bottom, 0 0;
	background-size: 100% 10px, 120px 120px;
	transition: background-color .2s ease;
}

.elementor-widget-form:not(#wc) .elementor-field-group textarea.elementor-field-textual {
	min-height: 8rem;
	resize: vertical;
}

.elementor-widget-form:not(#wc) .elementor-field-group .elementor-field-textual:hover {
	--wc-field-bg: rgba(156, 169, 152, .2);
}

/* focus: echte ring plus donkerder, dikkere streep */
.elementor-widget-form:not(#wc) .elementor-field-group .elementor-field-textual:focus,
.elementor-widget-form:not(#wc) .elementor-field-group .elementor-select-wrapper select:focus {
	--wc-field-bg: rgba(156, 169, 152, .22);
	outline: 3px solid var(--wc-focus);
	outline-offset: 2px;
	background-image:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 12' preserveAspectRatio='none'%3E%3Cfilter id='r' x='-5%25' y='-100%25' width='110%25' height='300%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.035 0.4' numOctaves='3' seed='3'/%3E%3CfeDisplacementMap in='SourceGraphic' scale='5' xChannelSelector='R' yChannelSelector='G'/%3E%3C/filter%3E%3Crect x='2' y='2' width='396' height='7' rx='3' fill='%233E5646' filter='url(%23r)'/%3E%3C/svg%3E"),
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='4' seed='9'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.12'/%3E%3C/svg%3E");
}

/* fout: terracotta streep, de foutmelding van Elementor staat eronder als tekst */
.elementor-widget-form:not(#wc) .elementor-field-group.elementor-error .elementor-field-textual,
.elementor-widget-form:not(#wc) .elementor-field-group .elementor-field-textual[aria-invalid="true"] {
	background-image:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 12' preserveAspectRatio='none'%3E%3Cfilter id='r' x='-5%25' y='-100%25' width='110%25' height='300%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.035 0.4' numOctaves='3' seed='3'/%3E%3CfeDisplacementMap in='SourceGraphic' scale='5' xChannelSelector='R' yChannelSelector='G'/%3E%3C/filter%3E%3Crect x='2' y='2' width='396' height='7' rx='3' fill='%23B93E20' filter='url(%23r)'/%3E%3C/svg%3E"),
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='4' seed='9'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.12'/%3E%3C/svg%3E");
}

.elementor-widget-form:not(#wc) .elementor-message-danger,
.elementor-widget-form:not(#wc) .elementor-error .elementor-message {
	color: var(--wc-error);
}

.elementor-widget-form:not(#wc) .elementor-field-group > .elementor-field-label {
	margin-bottom: 0.35rem;
	color: var(--wc-field-text);
	font-weight: 600;
}

/* --- knoppen (verstuur, vorige, volgende) --- */

.elementor-widget-form:not(#wc) .elementor-button,
.elementor-widget-form:not(#wc) .elementor-button:hover,
.elementor-widget-form:not(#wc) .elementor-button:focus,
.elementor-widget-form:not(#wc) .elementor-button:active {
	-webkit-appearance: none;
	appearance: none;
	position: relative;
	z-index: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	margin: 0.6em 0.8em;           /* ruimte voor de vlek die buiten de knop uitloopt */
	padding: 0.75rem 2rem;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	background-color: transparent;
	background-image: none;
	color: var(--wc-text);
	font-family: var(--e-global-typography-accent-font-family), sans-serif;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: normal;
	text-transform: none;
	text-decoration: none;
	white-space: normal;
	cursor: pointer;
}

.elementor-widget-form:not(#wc) .elementor-button:focus-visible {
	outline: 3px solid var(--wc-focus);
	outline-offset: 6px;
	border-radius: 999px;
}

.elementor-widget-form:not(#wc) .elementor-button svg * {
	fill: currentColor;
}