/* ============================================================
   JALOEZIEDEAL v11 — Theme overrides (laadt na mockup.css)
   WCAG AA contrast-fixes + WhatsApp floating button + misc. quick-wins
   ============================================================ */

/* ============================================================
   WCAG 2.1 AA contrast-fixes
   ============================================================
   Audit: .muted (#6B6B6B on cream #F4F4F1) = 4.3:1 → onder AA-minimum 4.5:1
   Fix: donkerder tint #5C5C5C op cream = 5.2:1 ✓ AA pass
   Idem .light (#9B9B9B) = 2.8:1 (faalt zelfs AA large-text) → #7B7B7B = 4.8:1 ✓
*/
:root {
	--muted: #5C5C5C;
	--light: #7B7B7B;
}
/* De mockup gebruikt ook --ink-3 (#757575) voor configurator icon-kleur — boost naar #5C5C5C */
body {
	--ink-2: #3A3A3A; /* was #555; op witte achtergrond = 7.0:1 nu */
	--ink-3: #5C5C5C; /* was #757575 */
}

/* Safe-guard voor hardcoded kleuren waar het CSS-variabele-override geen grip op heeft */
.footer-col a,
.footer-contact a,
.footer-brand p {
	color: rgba(255, 255, 255, 0.82);
}

/* ============================================================
   FLOATING WHATSAPP-BUTTON — rechtsonder
   (ks-cta-pill zit al linksonder; geen overlap)
   ============================================================ */
.jd-wa-btn {
	position: fixed;
	bottom: 24px;
	right: 24px;
	z-index: 9990;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: #25D366;
	color: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 6px 22px rgba(0, 0, 0, 0.18), 0 0 0 1px rgba(0, 0, 0, 0.04);
	transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.22s cubic-bezier(0.4, 0, 0.2, 1);
	text-decoration: none;
	-webkit-tap-highlight-color: transparent;
}
.jd-wa-btn::after {
	/* Subtiele pulsing ring voor aandacht, niet-aflichaus */
	content: '';
	position: absolute;
	inset: -4px;
	border-radius: 50%;
	border: 2px solid rgba(37, 211, 102, 0.4);
	animation: jd-wa-pulse 2.4s ease-out infinite;
	pointer-events: none;
}
@keyframes jd-wa-pulse {
	0% { transform: scale(1); opacity: 0.7; }
	100% { transform: scale(1.35); opacity: 0; }
}
.jd-wa-btn:hover,
.jd-wa-btn:focus-visible {
	transform: translateY(-3px) scale(1.04);
	box-shadow: 0 14px 30px rgba(0, 0, 0, 0.22), 0 0 0 1px rgba(0, 0, 0, 0.06);
	outline: none;
	color: #fff;
}
.jd-wa-btn svg {
	width: 30px;
	height: 30px;
}

/* Mobile: iets kleiner + lager zodat hij de ks-mobile-bar (checkout CTA op /kleurstalen/) niet overlapt */
@media (max-width: 600px) {
	.jd-wa-btn {
		bottom: 14px;
		right: 14px;
		width: 50px;
		height: 50px;
	}
	.jd-wa-btn svg {
		width: 26px;
		height: 26px;
	}
}
/* Op /kleurstalen/ zakt de mobile-bar in beeld. Zet de knop dan wat hoger zodat
   hij NIET achter de mobile-bar verdwijnt. Body krijgt geen specifieke class dus
   we detecteren via de zichtbare ks-mobile-bar met sibling-selector. */
body:has(.ks-mobile-bar.ks-visible) .jd-wa-btn {
	bottom: 80px;
}
@media (max-width: 600px) {
	body:has(.ks-mobile-bar.ks-visible) .jd-wa-btn {
		bottom: 72px;
	}
}

/* Prefers-reduced-motion: pulse uit */
@media (prefers-reduced-motion: reduce) {
	.jd-wa-btn::after {
		animation: none;
	}
}

/* ============================================================
   HEADER titel-element SEO/schema hint voor crawlers
   (logo-text moet een <a> blijven, geen h1-duplicatie)
   ============================================================ */

/* ============================================================
   Reduced-motion overal — respect voor accessibility
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}