/* Custom overrides for testimonial slider and hero placement */

/* Section spacing for testimonials when placed above services */
.testimonials-section { padding: 3rem 0; margin: 2rem 0 1rem; }
.testimonial-slider { max-width: var(--max-width); margin: 0 auto; }

/* About CTA block */
.about-cta { 
	background: linear-gradient(135deg, rgba(80,122,118,0.05) 0%, rgba(232,90,42,0.04) 100%);
	padding: 2.5rem 0; 
	margin: 0.5rem 0 0; 
}
.about-cta h2 { color: var(--accent); margin: 0 0 1rem; font-size: clamp(22px, 3.4vw, 28px); }
.about-cta ul { margin: 0 0 1rem; padding-left: 1.25rem; }
.about-cta li { margin: 0 0 .5rem; color: var(--text); }
.about-cta .cta-buttons { display: flex; gap: .75rem; flex-wrap: wrap; margin: .5rem 0 .5rem; }
.about-cta .cta-trust { margin: .25rem 0 0; color: var(--muted); font-size: .95rem; }

/* Keyboard focus for testimonial dots */
.testimonial-dot:focus-visible { outline: 2px solid var(--cta); outline-offset: 2px; }

/* Fix testimonial dot size on mobile */
@media (max-width: 700px) {
	.testimonial-dot {
		width: 10px !important;
		height: 10px !important;
	}
	.testimonial-dot.active {
		width: 24px !important;
	}
}

/* Subtiele highlight voor actieve filterknop */
.filter-tag.active {
	/* subtiele glow en depth */
	box-shadow: 0 0 0 3px rgba(80,122,118,0.25), 0 6px 14px rgba(80,122,118,0.15);
}

/* Duidelijke keyboard focus op filterknoppen */
.filter-tag:focus-visible {
	outline: 3px solid rgba(80,122,118,0.4);
	outline-offset: 2px;
}

/* Meta-bullets onder blog/vlog-tegels */
.meta-list {
	margin: 0.25rem 0 0;
	padding-left: 1.1rem;
	color: var(--muted);
	font-size: 0.95rem;
	line-height: 1.5;
}
.meta-list li { margin: 0.25rem 0; }

/* Meta-bullets onder tool-kaarten */
.tool-meta {
	margin: 0.5rem 0 0;
	padding-left: 1.1rem;
	color: var(--muted);
	font-size: 0.95rem;
	line-height: 1.5;
}
.tool-meta li { margin: 0.25rem 0; }

.tool-content .btn-primary { margin-top: 0.75rem; }

/* Badge voor laatst bijgewerkt (secundaire stijl naast .tool-badge) */
.tool-updated-badge {
	display: inline-block;
	padding: .25rem .6rem;
	background: rgba(80,122,118,0.08);
	color: var(--accent);
	border-radius: 999px;
	font-size: .85rem;
	font-weight: 600;
	margin-left: .25rem;
}

/* Optionele subtiele info note (inline style aanwezig, klasse voor consistentie) */
/* Reserved for future shared styles; intentionally left out to rely on inline styles here */
/* .tool-info-note { } */

/* Tool tip (AI-combo) */
/* .tool-tip { } */

/* Contact pagina: voorbeelden en verwachtingsblok */
.contact-examples {
	background: rgba(80,122,118,0.05);
	padding: 1rem 1.25rem;
	border-left: 4px solid var(--accent);
	border-radius: 10px;
	margin: 0 0 1.5rem 0;
	max-width: 720px;
}
.contact-examples p { margin: 0 0 0.5rem; color: var(--text); }
.contact-examples ul {
	margin: 0;
	padding-left: 1.25rem;
	color: var(--text);
	line-height: 1.6;
}
.contact-examples li { margin: 0.25rem 0; }

.contact-expectation {
	background: rgba(80,122,118,0.06);
	padding: 1rem 1.25rem;
	border-left: 4px solid var(--accent);
	border-radius: 10px;
	margin-top: 1rem;
}
.contact-expectation p { line-height: 1.5; }

/* CTA box voor calls-to-action in blogs */
.cta-box {
	background: linear-gradient(135deg, rgba(80,122,118,0.05) 0%, rgba(232,90,42,0.04) 100%);
	padding: 1.75rem;
	border-left: 4px solid var(--accent);
	border-radius: 12px;
	margin: 2rem 0;
}
.cta-box h3 { 
	color: var(--accent); 
	margin: 0 0 0.75rem; 
	font-size: 1.35rem; 
}
.cta-box p { 
	margin: 0 0 1rem; 
	line-height: 1.6; 
	color: var(--text); 
}
.cta-box .btn-primary { 
	margin: 0; 
}

/* ===== Globale accessibility: focus states ===== */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
	outline: 3px solid rgba(80,122,118,0.6);
	outline-offset: 2px;
	border-radius: 2px;
}

/* Extra contrast voor primaire buttons */
.btn-primary:focus-visible {
	outline: 3px solid rgba(232,90,42,0.7);
	outline-offset: 3px;
}

/* Touch target minimum (44x44px) */
@media (pointer: coarse) {
	button, .btn-primary, .filter-tag, a[role="button"] {
		min-height: 44px;
		min-width: 44px;
	}
}