/* ══════════════════════════════════════════════════════════════════════
   Confidu — design tokens & helpers voor Elementor Pro
   ──────────────────────────────────────────────────────────────────────
   Elementor Globals zetten kleuren en typografie al door op headings,
   buttons en links. Dit bestand dekt de rest af:
   - kleur-variabelen (handig in Custom CSS panels)
   - Fraunces-italic accent op <em>
   - Pill-buttons (Elementor button → Class: c-btn--pill)
   - Eyebrow met dot
   - Marquee (CSS-only animatie)
   - Mockup-kaarten in hero
   - Sage / cream / dark section backgrounds (Class: bg-sage, bg-cream, bg-dark)
   - Stat-block (Class: c-stat-big)
   ══════════════════════════════════════════════════════════════════════ */

:root {
	--c-ink:       #2E4844;
	--c-ink-soft:  #4A5F5B;
	--c-sage:      #7BA395;
	--c-sage-dark: #5D8578;
	--c-sage-deep: #3F5C58;
	--c-sage-mist: #D9E6E0;
	--c-sage-haze: #EEF3F0;
	--c-peach:     #F0B67F;
	--c-peach-soft:#F8DCBC;
	--c-peach-pale:#FCEEDD;
	--c-cream:     #FAF6F0;
	--c-cream-2:   #F3EDE3;
	--c-white:     #FFFFFF;
	--c-muted:     #7C8A86;
	--c-line:      #E3DDD1;
	--c-radius-sm: 8px;
	--c-radius-md: 14px;
	--c-radius-lg: 22px;
}

/* ── Fraunces italic accent ──────────────────────────────────────────── */
.elementor-heading-title em,
.elementor-widget-text-editor em,
em.confidu-accent {
	font-style: italic;
	font-family: 'Fraunces', serif;
	font-weight: 400;
	color: var(--c-sage-dark);
}

/* On dark / sage sections the accent flips to peach so it stays legible */
.bg-dark .elementor-heading-title em,
.bg-sage .elementor-heading-title em {
	color: var(--c-peach);
}

/* ── Buttons — voeg "c-btn--pill" toe in CSS Classes ──────────────────── */
.elementor-button.c-btn--pill {
	border-radius: 999px !important;
	padding: 14px 22px;
	font-family: 'DM Sans', sans-serif;
	font-weight: 500;
	letter-spacing: -0.005em;
	transition: transform .12s ease, box-shadow .15s ease, background .15s;
}
.elementor-button.c-btn--pill:hover { transform: translateY(-1px); }

.elementor-button.c-btn--ghost {
	background: transparent;
	color: var(--c-ink);
	border: 1px solid rgba(46,72,68,.15);
}
.elementor-button.c-btn--ghost:hover {
	border-color: var(--c-sage-deep);
	background: var(--c-sage-haze);
}

/* ── Eyebrow met dot (Class op Heading widget: c-eyebrow) ─────────────── */
.c-eyebrow .elementor-heading-title,
.elementor-widget.c-eyebrow .elementor-heading-title {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 6px 14px 6px 10px;
	background: var(--c-sage-haze);
	border-radius: 999px;
	font-family: 'DM Sans', sans-serif;
	font-size: 13px;
	font-weight: 500;
	letter-spacing: .02em;
	text-transform: none;
	color: var(--c-ink-soft);
}
.c-eyebrow .elementor-heading-title::before {
	content: "";
	width: 6px; height: 6px;
	border-radius: 50%;
	background: var(--c-peach);
	box-shadow: 0 0 0 4px rgba(240,182,127,.25);
}
.bg-dark .c-eyebrow .elementor-heading-title,
.bg-sage .c-eyebrow .elementor-heading-title {
	background: rgba(255,255,255,.08);
	color: rgba(250,246,240,.85);
}

/* ── Section backgrounds (op Container: bg-cream / bg-sage / bg-dark) ── */
.bg-cream  { background: var(--c-cream) !important; }
.bg-light  { background: var(--c-cream-2) !important; }
.bg-sage   { background: var(--c-sage-deep) !important; color: var(--c-cream); }
.bg-dark   { background: var(--c-ink) !important; color: var(--c-cream); }

.bg-sage .elementor-heading-title,
.bg-dark .elementor-heading-title,
.bg-sage .elementor-widget-text-editor,
.bg-dark .elementor-widget-text-editor { color: var(--c-cream); }

/* ── Section label (kleine uppercase boven titel) ─────────────────────── */
.c-section-label .elementor-heading-title {
	font-family: 'DM Sans', sans-serif;
	font-size: 12px !important;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--c-sage-dark);
}
.bg-sage .c-section-label .elementor-heading-title,
.bg-dark .c-section-label .elementor-heading-title {
	color: var(--c-peach);
}

/* ── Cards (Class op Container: c-card) ──────────────────────────────── */
.c-card {
	background: var(--c-white) !important;
	border-radius: var(--c-radius-lg) !important;
	box-shadow: 0 1px 2px rgba(46,72,68,.06), 0 16px 40px rgba(46,72,68,.06);
	border: 1px solid var(--c-line);
}
.c-card--problem .c-num .elementor-heading-title {
	font-family: 'Fraunces', serif;
	font-size: 52px;
	color: var(--c-peach);
	line-height: 1;
}

/* ── Stat-big (Class op Heading: c-stat-big) ─────────────────────────── */
.c-stat-big .elementor-heading-title {
	font-family: 'Fraunces', serif;
	font-size: 72px;
	font-weight: 300;
	line-height: 1;
	letter-spacing: -0.02em;
	color: var(--c-cream);
}

/* ── Marquee (Class op Container: c-marquee) ─────────────────────────── */
.c-marquee {
	overflow: hidden;
	border-top: 1px solid var(--c-line);
	border-bottom: 1px solid var(--c-line);
	background: var(--c-cream-2);
	padding: 18px 0 !important;
}
.c-marquee .elementor-widget-wrap,
.c-marquee > .e-con-inner {
	flex-wrap: nowrap !important;
	animation: c-marquee-scroll 38s linear infinite;
	width: max-content !important;
}
.c-marquee .elementor-widget-icon-list .elementor-icon-list-items {
	display: flex;
	flex-wrap: nowrap !important;
	gap: 48px;
	white-space: nowrap;
}
.c-marquee .elementor-icon-list-text {
	font-family: 'DM Sans', sans-serif;
	font-size: 13px;
	letter-spacing: .04em;
	color: var(--c-ink-soft);
}
@keyframes c-marquee-scroll {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

/* ── Voice / quote cards (Class op Container: c-voice) ────────────────── */
.c-voice .elementor-heading-title { font-family: 'DM Sans', sans-serif; font-weight: 600; font-size: 14px; color: var(--c-sage-dark); }
.c-voice .elementor-widget-text-editor p {
	font-family: 'Fraunces', serif;
	font-style: italic;
	font-size: 22px;
	line-height: 1.45;
	color: var(--c-ink);
}

/* ── Form widget styling (Elementor Pro Form) ────────────────────────── */
.elementor-widget-form .elementor-field-group label {
	font-family: 'DM Sans', sans-serif;
	font-size: 13px;
	font-weight: 500;
	color: var(--c-ink-soft);
	margin-bottom: 6px;
}
.elementor-widget-form input,
.elementor-widget-form select,
.elementor-widget-form textarea {
	border-radius: var(--c-radius-sm) !important;
	border: 1px solid var(--c-line) !important;
	background: var(--c-cream) !important;
	font-family: 'DM Sans', sans-serif !important;
	padding: 12px 14px !important;
	color: var(--c-ink) !important;
}
.elementor-widget-form input:focus,
.elementor-widget-form select:focus,
.elementor-widget-form textarea:focus {
	border-color: var(--c-sage-deep) !important;
	box-shadow: 0 0 0 4px rgba(123,163,149,.18) !important;
	outline: none;
}

/* ── Selection ──────────────────────────────────────────────────────── */
::selection { background: var(--c-peach-soft); color: var(--c-ink); }