/*
Theme Name: Business Support Partner MdeB - Blauw
Theme URI: https://www.business-supportpartner.nl
Author: Mandy de Bont
Description: Klassiek PHP-thema voor Business Support Partner MdeB. Blauw herontwerp op basis van het Google Stitch-ontwerp (Tailwind), met de bewezen onderlaag (SEO, FAQ, helpers, ingesloten tools) van de witte template. Koningsblauw #0053CD + signaaloranje #FF6B35, Playfair Display + DM Sans.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 8.0
License: GPL-2.0-or-later
Text Domain: bsp-blauw
*/

/* ==========================================================================
   BRUG-CSS
   De zichtbare opmaak komt vrijwel volledig uit Tailwind-classes in de markup
   (config in header.php). Dit bestand bevat alleen: WordPress-core-bruggetjes,
   JS-gekoppelde states (nav/mobiel/reveal/faq) en de Stitch-helperclasses.
   ========================================================================== */

:root {
	--bsp-blauw: #0053CD;
	--bsp-oranje: #FF6B35;
}

html { scroll-behavior: smooth; }

body {
	background-color: #FFFFFF;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* Toegankelijkheid: zichtbaar verbergen */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	width: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	word-wrap: normal !important;
}
.screen-reader-text:focus {
	background-color: #fff;
	clip: auto !important;
	clip-path: none;
	color: #0053CD;
	display: block;
	height: auto;
	left: 8px;
	top: 8px;
	padding: 12px 20px;
	width: auto;
	z-index: 100000;
	border-radius: 8px;
	box-shadow: 0 4px 16px rgba(0, 83, 205, 0.2);
}

/* WordPress-core blok-uitlijning */
.alignwide { max-width: 1100px; margin-left: auto; margin-right: auto; }
.alignfull { max-width: 100%; }
.wp-caption-text, .gallery-caption { font-size: 0.85rem; color: #475569; }
img { max-width: 100%; height: auto; }

/* ---- Material Symbols (utility-iconen: menu, pijl, verzenden) ---- */
.material-symbols-outlined {
	font-family: 'Material Symbols Outlined';
	font-weight: normal;
	font-style: normal;
	line-height: 1;
	letter-spacing: normal;
	text-transform: none;
	display: inline-block;
	white-space: nowrap;
	word-wrap: normal;
	direction: ltr;
	-webkit-font-feature-settings: 'liga';
	-webkit-font-smoothing: antialiased;
}

/* ==========================================================================
   STITCH-HELPERCLASSES (1-op-1 uit het Stitch-ontwerp)
   ========================================================================== */
.swiss-grid-line { background-color: rgba(0, 83, 205, 0.2); }
.method-card-shadow { box-shadow: 0px 10px 30px rgba(0, 83, 205, 0.08); }
.fresh-blue-dot::after {
	content: '';
	display: inline-block;
	width: 4px;
	height: 4px;
	background-color: #0053CD;
	border-radius: 50%;
	margin-left: 4px;
	vertical-align: middle;
}

/* ==========================================================================
   NAVIGATIE-STATES (gekoppeld aan assets/js/main.js)
   ========================================================================== */
/* Subtiele rand + schaduw zodra je scrolt */
#site-nav.is-scrolled {
	box-shadow: 0 1px 0 rgba(0, 83, 205, 0.08), 0 10px 30px rgba(0, 83, 205, 0.06);
}

/* Mobiel menu: verborgen tot de burger het opent (main.js togglet .is-open) */
.nav-mobile { display: none; }
.nav-mobile.is-open { display: flex; }

/* Burger-animatie naar kruis */
.nav-burger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-burger.is-open span:nth-child(2) { opacity: 0; }
.nav-burger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.nav-burger span { transition: transform 0.25s ease, opacity 0.2s ease; }

/* ==========================================================================
   REVEAL-ON-SCROLL (main.js voegt .is-in toe)
   ========================================================================== */
.reveal {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.is-in { opacity: 1; transform: none; }

/* ==========================================================================
   BOOG SCROLL-ANIMATIE (assets/js/boog-animatie.js)
   Zonder JS of met reduced motion staat de boog volledig getekend (geen .is-init).
   ========================================================================== */
.boog-anim svg { width: 100%; height: auto; display: block; }
.boog-anim-mobiel svg { max-width: 380px; margin: 0 auto; }

/* Hero-foto: subtiele zoom-uit bij laden (wow-opening, vooral mobiel). */
.hero-foto img { animation: hero-zoom 1.8s cubic-bezier(0.22, 0.61, 0.36, 1) both; }
@keyframes hero-zoom {
	from { transform: scale(1.08); }
	to   { transform: scale(1); }
}
.boog-anim .boog-node { transition: opacity 0.45s ease; }
.boog-anim .boog-cirkel,
.boog-anim .boog-letter { transition: fill 0.45s ease; }
.boog-anim.is-init .boog-node { opacity: 0.22; }
.boog-anim.is-init .boog-node.is-actief { opacity: 1; }
.boog-anim.is-init .boog-node.is-actief .boog-cirkel { fill: #0053CD; }
.boog-anim.is-init .boog-node.is-actief .boog-letter { fill: #FFFFFF; }

@media (prefers-reduced-motion: reduce) {
	.reveal { opacity: 1; transform: none; transition: none; }
	.reveal { transition-delay: 0s !important; }
	.boog-anim .boog-node,
	.boog-anim .boog-cirkel,
	.boog-anim .boog-letter { transition: none; }
	.hero-foto img { animation: none; }
	.nav-link::after { display: none; }
	a.inline-flex svg { transition: none; }
	a.inline-flex:hover svg { transform: none; }
	.accent-streep { transform: none; transition: none; }
	.keten-item { transition: none; }
	.keten-item:hover { padding-left: 1.5rem; }
	.faq-icon { transition: none; }
	html { scroll-behavior: auto; }
}

/* ==========================================================================
   FAQ-ACCORDION (main.js zet max-height; .faq-a animeert)
   ========================================================================== */
.faq-a {
	overflow: hidden;
	max-height: 0;
	transition: max-height 0.32s ease;
}
/* Plus-icoon draait naar een kruisje bij openen */
.faq-icon { transition: transform 0.3s ease; }
.faq-icon svg { display: block; }
.faq-item.is-open .faq-icon { transform: rotate(45deg); }

/* ==========================================================================
   KENNISBANK: categorie-filter (pills; main.js togglet .is-actief / .is-weggefilterd)
   ========================================================================== */
.bsp-cat-filter button {
	background-color: #E8F0FC;
	color: #0053CD;
	cursor: pointer;
}
.bsp-cat-filter button:hover { background-color: #D6E5FA; }
.bsp-cat-filter button.is-actief {
	background-color: #0053CD;
	color: #FFFFFF;
	border-color: #0053CD;
}
#bsp-kb-grid article.is-weggefilterd { display: none; }

/* ==========================================================================
   FORMULIEREN (contact + nieuwsbrief; JS post naar n8n, zie main.js)
   ========================================================================== */
/* Honeypot: onzichtbaar voor mensen, zichtbaar voor bots */
.bsp-hp {
	position: absolute !important;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}
/* JS toont het formulier en verbergt de mailto-fallback */
.bsp-form.is-actief { display: block; }
form.bsp-form.is-actief { display: flex; flex-direction: column; }
.bsp-form-fallback.is-verborgen { display: none; }
.bsp-form.is-verstuurd button[type="submit"] { opacity: 0.5; pointer-events: none; }

/* ==========================================================================
   MICRO-INTERACTIES (rustig en lineair, passend bij structuur/orde)
   ========================================================================== */
/* 1. Nav-links: onderstreep schuift van links in */
.nav-link { position: relative; }
.nav-link::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 2px;
	background-color: var(--bsp-oranje);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.25s ease;
}
.nav-link:hover::after { transform: scaleX(1); }

/* 2. Pijl-iconen in tekstlinks/knoppen schuiven 3px mee bij hover */
a.inline-flex svg { transition: transform 0.25s ease; }
a.inline-flex:hover svg { transform: translateX(3px); }

/* 3. Oranje accentstreepje op kaarten groeit van 30% naar 100% bij hover */
.accent-streep {
	transform: scaleX(0.3);
	transform-origin: left;
	transition: transform 0.35s ease;
}
.group:hover .accent-streep { transform: scaleX(1); }

/* 4. Keten-items (werkwijze/fase-naar-dienst): lichte indent bij hover */
.keten-item { transition: border-color 0.3s ease, padding-left 0.3s ease; }
.keten-item:hover { padding-left: calc(1.5rem + 4px); }

/* 5. Reveal-stagger: kaarten in grids vallen een voor een op hun plek */
.grid > .reveal:nth-child(2) { transition-delay: 0.07s; }
.grid > .reveal:nth-child(3) { transition-delay: 0.14s; }
.grid > .reveal:nth-child(4) { transition-delay: 0.21s; }
.grid > .reveal:nth-child(5) { transition-delay: 0.28s; }
.grid > .reveal:nth-child(6) { transition-delay: 0.35s; }
.grid > .reveal:nth-child(7) { transition-delay: 0.42s; }
.grid > .reveal:nth-child(8) { transition-delay: 0.49s; }

/* ==========================================================================
   PROSE (lange lopende tekst: juridisch + artikelen). Tailwind dekt dit niet.
   ========================================================================== */
.prose-bsp { color: #0A1128; }
.prose-bsp > * + * { margin-top: 1em; }
.prose-bsp h2 {
	font-family: 'Playfair Display', serif;
	color: #0053CD;
	font-size: 24px;
	line-height: 1.3;
	font-weight: 600;
	margin-top: 1.8em;
	margin-bottom: 0.5em;
}
.prose-bsp h3 {
	font-family: 'Playfair Display', serif;
	color: #0053CD;
	font-size: 20px;
	font-weight: 600;
	margin-top: 1.4em;
	margin-bottom: 0.4em;
}
.prose-bsp p { line-height: 1.7; }
.prose-bsp ul { list-style: disc; padding-left: 1.4em; }
.prose-bsp ul li { margin: 0.4em 0; line-height: 1.6; }
.prose-bsp a { color: #0053CD; text-decoration: underline; }
.prose-bsp a:hover { color: #FF6B35; }
.prose-bsp strong { color: #0A1128; font-weight: 700; }
.prose-bsp em { color: #475569; }
.prose-bsp table { width: 100%; border-collapse: collapse; margin: 1.5em 0; font-size: 0.95rem; }
.prose-bsp th, .prose-bsp td { border: 1px solid #E2E8F0; padding: 10px 12px; text-align: left; vertical-align: top; }
.prose-bsp th { background: #F2F7FE; color: #0053CD; font-weight: 600; }
.prose-table-wrap { overflow-x: auto; }

.legal-note {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	background: #F2F7FE;
	border: 1px solid rgba(0, 83, 205, 0.2);
	border-radius: 14px;
	padding: 16px 20px;
	margin-bottom: 32px;
	color: #0A1128;
}
.legal-note p { margin: 0; font-size: 0.95rem; line-height: 1.6; }

/* ==========================================================================
   BEELDPLACEHOLDER (bsp_img_placeholder fallback)
   ========================================================================== */
.img-placeholder {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	height: 100%;
	min-height: 180px;
	background: #F2F7FE;
	border: 1px dashed rgba(0, 83, 205, 0.25);
	border-radius: 14px;
	color: #0053CD;
	text-align: center;
	padding: 24px;
}
.img-placeholder-label { font-weight: 600; font-size: 0.95rem; }
.img-placeholder-desc { font-size: 0.8rem; color: #475569; max-width: 32ch; }