/**
 * Elementor-specific overrides for SECC Brabant
 */

/* Map Elementor global colors to brand */
.elementor-button.elementor-size-sm,
.elementor-button.elementor-size-md,
.elementor-button.elementor-size-lg {
	font-family: var(--secc-font-body);
	font-weight: 600;
	border-radius: var(--secc-radius);
	transition: all var(--secc-transition);
}

.elementor-widget-heading .elementor-heading-title {
	font-family: var(--secc-font-heading);
}

/* Primary button style class: add CSS class "secc-btn-primary" in Elementor */
.secc-btn-primary .elementor-button {
	background-color: var(--secc-red) !important;
	color: var(--secc-white) !important;
	border-color: var(--secc-red) !important;
}

.secc-btn-primary .elementor-button:hover {
	background-color: var(--secc-red-dark) !important;
	border-color: var(--secc-red-dark) !important;
}

/* Outline button: CSS class "secc-btn-outline" */
.secc-btn-outline .elementor-button {
	background-color: transparent !important;
	color: var(--secc-red) !important;
	border: 2px solid var(--secc-red) !important;
}

.secc-btn-outline .elementor-button:hover {
	background-color: var(--secc-red) !important;
	color: var(--secc-white) !important;
}

/* Section spacing utility classes for Elementor sections */
.secc-section-padding .elementor-container {
	padding-top: var(--secc-space-2xl);
	padding-bottom: var(--secc-space-2xl);
}

.secc-bg-gray {
	background-color: var(--secc-gray-50) !important;
}

.secc-bg-red-light {
	background-color: var(--secc-red-light) !important;
}

.secc-bg-dark {
	background-color: var(--secc-black) !important;
}

.secc-bg-dark .elementor-heading-title,
.secc-bg-dark .elementor-widget-text-editor {
	color: var(--secc-white) !important;
}

/* Icon box styling */
.secc-icon-box .elementor-icon-box-icon {
	color: var(--secc-red) !important;
}

.secc-icon-box .elementor-icon {
	background: var(--secc-red-light);
	padding: 12px;
	border-radius: var(--secc-radius);
}

/* Full-width hero template */
.secc-elementor-hero {
	min-height: 70vh;
	display: flex;
	align-items: center;
}

/* ANBI badge */
.secc-anbi-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	background: var(--secc-red-light);
	color: var(--secc-red);
	padding: 0.35rem 0.85rem;
	border-radius: 100px;
	font-size: 0.8rem;
	font-weight: 600;
}

/* ─────────────────────────────────────────────────────────────
 * Startpagina-hero (Elementor pagina 10)
 * De padding was afgestemd op de oude, over de hero liggende Astra-header.
 * Met de nieuwe header viel daardoor een grote lege ruimte boven de tekst.
 * Definitief maken? Pas in Elementor de padding van deze sectie aan en
 * verwijder dan dit blok.
 * ───────────────────────────────────────────────────────────── */
.elementor-10 .elementor-element.elementor-element-d8d9c61 {
	padding-top: 72px !important;
	padding-bottom: 80px !important;
}

.elementor-10 .elementor-element.elementor-element-13d7db3a > .elementor-element-populated {
	padding-top: 32px !important;
}

.elementor-10 .elementor-element.elementor-element-3427fc3 > .elementor-element-populated {
	margin-top: 0 !important;
}

/* Kop: Merriweather is breder dan Inter → iets kleiner */
.elementor-10 .elementor-element.elementor-element-3c61c464 .elementor-heading-title {
	font-size: 50px !important;
	line-height: 1.15 !important;
}

/* Label "Stichting ECCB" blijft Inter (niet de serif-kop) */
body .elementor-10 .elementor-element.elementor-element-93b4fed .elementor-heading-title {
	font-family: 'Inter', system-ui, sans-serif !important;
	font-weight: 700 !important;
	letter-spacing: 3px !important;
}

@media (max-width: 1024px) {
	.elementor-10 .elementor-element.elementor-element-d8d9c61 {
		padding-top: 56px !important;
	}

	.elementor-10 .elementor-element.elementor-element-3c61c464 .elementor-heading-title {
		font-size: 40px !important;
	}
}

@media (max-width: 767px) {
	.elementor-10 .elementor-element.elementor-element-d8d9c61 {
		padding-top: 40px !important;
		padding-bottom: 48px !important;
	}

	.elementor-10 .elementor-element.elementor-element-13d7db3a > .elementor-element-populated {
		padding-top: 0 !important;
	}

	.elementor-10 .elementor-element.elementor-element-3c61c464 .elementor-heading-title {
		font-size: 32px !important;
	}
}

/* ─────────────────────────────────────────────────────────────
 * Huisstijl-consistentie (v1.2)
 * ───────────────────────────────────────────────────────────── */

/* Eén inhoudsbreedte voor header, Elementor en footer: 1200px */
body .elementor-section.elementor-section-boxed > .elementor-container {
	max-width: 1200px;
}

body .e-con {
	--container-max-width: 1200px;
}

/* Knoppen: overal pilvorm, net als "Steun ons" in de header */
body .elementor-button,
body .secc-btn {
	border-radius: 999px !important;
}

/* Hero-label "Stichting ECCB": lichtroze op navy (contrast ≥ 4,5:1) */
body .elementor-10 .elementor-element.elementor-element-93b4fed .elementor-heading-title {
	color: #FF9AAA !important;
}

/* Kaarten op de startpagina: navy titels (rood = alleen acties), 16px hoeken */
.elementor-10 .elementor-element.elementor-element-45f2bef .elementor-heading-title,
.elementor-10 .elementor-element.elementor-element-f209b85 .elementor-heading-title {
	color: #1A365D !important;
}

.elementor-10 .elementor-element.elementor-element-94c3a62,
.elementor-10 .elementor-element.elementor-element-a5262dd {
	--border-radius: 16px !important;
}


/* ─── Labels op rode banden: wit i.p.v. rood/roze (contrast ≥ 4,5:1) ─── */
/* Over ons (pagina 27): "Over de Stichting" — had inline kleur #C41E3A op #C41E3A */
.elementor-27 .elementor-element.elementor-element-41906f57 p,
.elementor-27 .elementor-element.elementor-element-41906f57 {
	color: #FFFFFF !important;
}

/* ANBI (pagina 36): "Transparantie & Verantwoording" */
.elementor-36 .elementor-element.elementor-element-39a6570,
.elementor-36 .elementor-element.elementor-element-39a6570 * {
	color: #FFFFFF !important;
}

/* Over ons: knoppen in de rode band ook in pilvorm */
.elementor-27 .elementor-element.elementor-element-716534ae a {
	border-radius: 999px !important;
}

/* ─── Mobiel (v1.6): koppen niet groter dan het scherm, grotere tikvlakken ─── */
@media (max-width: 767px) {
	/* Paginatitels (o.a. Over ons, ANBI) — waren 44–48px en liepen over 6 regels */
	body .elementor-widget-heading h1.elementor-heading-title {
		font-size: clamp(28px, 8.2vw, 34px) !important;
		line-height: 1.2 !important;
	}

	body .elementor-widget-heading h2.elementor-heading-title {
		line-height: 1.25 !important;
	}

	/* ANBI-paginatitel is een h2 van 48px */
	.elementor-36 .elementor-element.elementor-element-3abd13a2 .elementor-heading-title {
		font-size: clamp(28px, 8.2vw, 34px) !important;
	}

	/* Bellen / mailen: makkelijk aan te tikken */
	body .elementor a[href^="tel:"],
	body .elementor a[href^="mailto:"] {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
	}

	/* FAQ / toggles / accordions */
	body .elementor-toggle .elementor-tab-title,
	body .elementor-accordion .elementor-tab-title,
	body .e-n-accordion-item-title {
		padding-top: 14px !important;
		padding-bottom: 14px !important;
	}

	/* Knoppen over de volle breedte zodat ze makkelijk te raken zijn */
	body .elementor-widget-button .elementor-button {
		min-height: 48px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}
}