/* ==========================================================================
   COMPONENTS — knoppen, kaarten, formulieren, USP's, FAQ, CTA.
   Alle kleuren via tokens, zodat dark mode automatisch meebeweegt.
   ========================================================================== */

/* --- Knoppen ------------------------------------------------------------ */

.wvs-knop,
.wp-block-button__link,
.ast-button,
.ast-custom-button,
button.wp-element-button,
input[type="submit"],
button[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--wvs-ruimte-2);
	font-family: var(--wvs-font-kop);
	font-size: var(--wvs-fs-klein);
	font-weight: var(--wvs-gewicht-sterk);
	line-height: 1.2;
	text-transform: uppercase;
	letter-spacing: var(--wvs-ls-knop);
	text-decoration: none;
	color: var(--wvs-accent-contrast);
	background-color: var(--wvs-accent);
	border: 2px solid var(--wvs-accent);
	border-radius: var(--wvs-radius-knop);
	padding: 1.1em 2em;
	cursor: pointer;
	transition: background-color var(--wvs-overgang), border-color var(--wvs-overgang), transform var(--wvs-overgang);
	/* Comfortabel raakvlak op mobiel */
	min-height: 48px;
}

.wvs-knop:hover,
.wp-block-button__link:hover,
.ast-button:hover,
input[type="submit"]:hover,
button[type="submit"]:hover {
	background-color: var(--wvs-accent-hover);
	border-color: var(--wvs-accent-hover);
	color: var(--wvs-accent-contrast);
}

.wvs-knop:active { transform: translateY(1px); }

/* Secundaire knop — omlijnd */
.wvs-knop--lijn,
.is-style-outline .wp-block-button__link {
	background-color: transparent;
	color: var(--wvs-accent);
	border-color: var(--wvs-accent);
}

.wvs-knop--lijn:hover,
.is-style-outline .wp-block-button__link:hover {
	background-color: var(--wvs-accent);
	color: var(--wvs-accent-contrast);
}

/* Rustige knop — voor tweede keuze naast een CTA */
.wvs-knop--stil {
	background-color: transparent;
	color: var(--wvs-kop-kleur);
	border-color: var(--wvs-rand-sterk);
}

.wvs-knop--stil:hover {
	background-color: var(--wvs-bg-zacht);
	border-color: var(--wvs-kop-kleur);
	color: var(--wvs-kop-kleur);
}

/* Volle breedte op kleine schermen: duimvriendelijk */
@media (max-width: 480px) {
	.wvs-knop--breed-mobiel { width: 100%; }
}

/* --- Knop met icoonvak (§6 CLAUDE-CODE-BOUWOPDRACHT.md) ------------------
   Hoofdletters, letter-spacing ~0.09em, gewicht 700, Inter, rond. Sitebreed
   (header-CTA + dienstpagina's), daarom hier i.p.v. paginascoped CSS. */

.wvs-do-knop {
	display: inline-flex;
	align-items: stretch;
	gap: 0;
	font-family: var(--wvs-font-kop);
	font-size: var(--wvs-fs-klein);
	font-weight: var(--wvs-gewicht-sterk);
	text-transform: uppercase;
	letter-spacing: 0.09em;
	text-decoration: none;
	border-radius: 999px;
	overflow: hidden;
	min-height: 48px;
	transition: background-color var(--wvs-overgang), color var(--wvs-overgang), border-color var(--wvs-overgang);
}

.wvs-do-knop__label {
	display: inline-flex;
	align-items: center;
	padding: 0 0 0 1.8em;
}

.wvs-do-knop__icoon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding-inline: 1.1em;
	margin-left: 1.2em;
}

.wvs-do-knop__icoon .wvs-do-icoon { width: 1.1em; height: 1.1em; }

/* Wit met gescheiden icoonvak (hero-knoppen 1&2, "neem contact", header-CTA) */

.wvs-do-knop--wit {
	background: #ffffff;
	color: var(--wvs-kop);
	border: 2px solid #ffffff;
}

.wvs-do-knop--wit .wvs-do-knop__icoon {
	border-left: 1px solid rgba(0, 0, 0, 0.1);
	color: var(--wvs-accent);
}

.wvs-do-knop--wit:hover {
	background: var(--wvs-accent);
	border-color: var(--wvs-accent);
	color: #ffffff;
}

.wvs-do-knop--wit:hover .wvs-do-knop__icoon {
	border-left-color: rgba(255, 255, 255, 0.15);
	color: #ffffff;
}

/* Grijs vol (offerte-knoppen) */

.wvs-do-knop--grijs {
	background: var(--wvs-knop-grijs);
	color: #ffffff;
	border: 2px solid var(--wvs-knop-grijs);
	padding-inline: 1.8em;
}

.wvs-do-knop--grijs .wvs-do-knop__icoon { margin-left: 0.9em; padding-inline: 0; color: #ffffff; }
.wvs-do-knop--grijs .wvs-do-knop__label { padding-left: 0; }

.wvs-do-knop--grijs:hover {
	background: var(--wvs-knop-grijs-hover);
	border-color: var(--wvs-knop-grijs-hover);
}

/* CTA-knop (sectie 6): rond, dikke rand, wit vlak, bordeaux tekst/icoon */

.wvs-do-knop--cta {
	background: #ffffff;
	color: var(--wvs-accent);
	border: 3px solid #ffffff;
	padding-inline: 2em;
	gap: 0.8em;
}

.wvs-do-knop--cta .wvs-do-knop__label { padding-left: 0; }
.wvs-do-knop--cta .wvs-do-knop__icoon { padding-inline: 0; margin-left: 0; color: var(--wvs-accent); }

.wvs-do-knop--cta:hover {
	background: var(--wvs-accent);
	border-color: var(--wvs-accent);
	color: #ffffff;
}

.wvs-do-knop--cta:hover .wvs-do-knop__icoon { color: #ffffff; }

/* Solide bordeaux, icoon links, geen apart icoonvak (header-CTA "Offerte aanvragen") */

.wvs-do-knop--bordeaux {
	background: var(--wvs-accent);
	color: #ffffff;
	border: 2px solid var(--wvs-accent);
	padding-inline: 1.6em;
	gap: 0.6em;
}

.wvs-do-knop--bordeaux .wvs-do-knop__label { padding-left: 0; }
.wvs-do-knop--bordeaux .wvs-do-knop__icoon { padding-inline: 0; margin-left: 0; color: #ffffff; }

.wvs-do-knop--bordeaux:hover {
	background: var(--wvs-accent-hover);
	border-color: var(--wvs-accent-hover);
}

/* Klein formaat (header-CTA): bron specificeert ib_size="btn-sm" +
   ib_fs="text_small:11px" — bewust kleiner dan de paginaknoppen, anders
   breekt de tekst af naar twee regels op de smalle header-breedte. */
.wvs-do-knop--klein {
	font-size: 11px;
	letter-spacing: 0.06em;
	min-height: 38px;
	padding-inline: 1.25em;
	gap: 0.5em;
	white-space: nowrap;
}

.wvs-do-knop--klein .wvs-do-knop__icoon .wvs-do-icoon,
.wvs-do-knop--klein .wvs-do-knop__icoon .wvs-icoon { width: 1em; height: 1em; }

.wvs-do-knoppen {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wvs-ruimte-4);
}

/* --- Kaart -------------------------------------------------------------- */

.wvs-kaart {
	background: var(--wvs-kaart-bg);
	border: 1px solid var(--wvs-kaart-rand);
	border-radius: var(--wvs-radius-vlak);
	padding: var(--wvs-ruimte-5);
	transition: box-shadow var(--wvs-overgang), border-color var(--wvs-overgang);
}

.wvs-kaart--klikbaar:hover {
	box-shadow: var(--wvs-schaduw);
	border-color: var(--wvs-rand-sterk);
}

.wvs-kaart__titel {
	font-size: var(--wvs-fs-h4);
	margin: 0 0 var(--wvs-ruimte-2);
}

.wvs-kaart__tekst { margin: 0; }

/* --- USP-rij ------------------------------------------------------------ */

.wvs-usp {
	list-style: none;
	margin: 0 0 var(--wvs-ruimte-5);
	padding: 0;
}

.wvs-usp li {
	position: relative;
	padding-left: 1.75rem;
	margin-bottom: var(--wvs-ruimte-3);
}

.wvs-usp li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.55em;
	width: 0.55rem;
	height: 0.55rem;
	border-radius: 50%;
	background: var(--wvs-accent);
}

/* --- Label / badge ------------------------------------------------------ */

.wvs-label {
	display: inline-block;
	font-family: var(--wvs-font-kop);
	font-size: var(--wvs-fs-klein);
	font-weight: var(--wvs-gewicht-medium);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--wvs-accent);
	background: var(--wvs-accent-zacht);
	padding: 0.3em 0.85em;
	border-radius: var(--wvs-radius-knop);
}

/* --- Sidebar-blok (layout A) -------------------------------------------- */

.wvs-sidebar { display: flex; flex-direction: column; gap: var(--wvs-ruimte-5); }

.wvs-sidebar-blok {
	background: var(--wvs-kaart-bg);
	border: 1px solid var(--wvs-kaart-rand);
	border-radius: var(--wvs-radius-vlak);
	padding: var(--wvs-ruimte-5);
}

.wvs-sidebar-blok__titel {
	font-size: var(--wvs-fs-h4);
	margin: 0 0 var(--wvs-ruimte-3);
	padding-bottom: var(--wvs-ruimte-3);
	border-bottom: 1px solid var(--wvs-rand);
}

/* Offerte-blok valt op */
.wvs-sidebar-blok--cta {
	background: var(--wvs-accent);
	border-color: var(--wvs-accent);
	color: var(--wvs-accent-contrast);
}

.wvs-sidebar-blok--cta .wvs-sidebar-blok__titel {
	color: var(--wvs-accent-contrast);
	border-bottom-color: rgba(255, 255, 255, 0.25);
}

.wvs-sidebar-blok--cta .wvs-knop {
	background: var(--wvs-accent-contrast);
	border-color: var(--wvs-accent-contrast);
	color: var(--wvs-accent);
}

.wvs-sidebar-blok--cta .wvs-knop:hover {
	background: var(--wvs-donker);
	border-color: var(--wvs-donker);
	color: var(--wvs-accent-contrast);
}

/* --- Formulieren -------------------------------------------------------- */

label {
	display: block;
	font-family: var(--wvs-font-kop);
	font-size: var(--wvs-fs-klein);
	font-weight: var(--wvs-gewicht-medium);
	color: var(--wvs-kop-kleur);
	margin-bottom: var(--wvs-ruimte-2);
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="number"],
input[type="search"],
input[type="date"],
select,
textarea {
	width: 100%;
	font-family: var(--wvs-font-tekst);
	font-size: 1rem; /* 16px: voorkomt inzoomen op iOS */
	line-height: 1.5;
	color: var(--wvs-kop-kleur);
	background: var(--wvs-bg);
	border: 1px solid var(--wvs-rand-sterk);
	border-radius: var(--wvs-radius-klein);
	padding: 0.75rem 1rem;
	min-height: 48px;
	transition: border-color var(--wvs-overgang), box-shadow var(--wvs-overgang);
}

textarea { min-height: 9rem; resize: vertical; }

input:focus,
select:focus,
textarea:focus {
	border-color: var(--wvs-accent);
	box-shadow: 0 0 0 3px var(--wvs-accent-zacht);
	outline: none;
}

input::placeholder,
textarea::placeholder { color: var(--wvs-tekst-zacht); }

.wvs-veld { margin-bottom: var(--wvs-ruimte-4); }

.wvs-veld__hulp {
	font-size: var(--wvs-fs-klein);
	color: var(--wvs-tekst-zacht);
	margin-top: var(--wvs-ruimte-2);
}

.wvs-veld--fout input,
.wvs-veld--fout textarea { border-color: var(--wvs-accent); }

.wvs-veld__fout {
	font-size: var(--wvs-fs-klein);
	color: var(--wvs-accent);
	margin-top: var(--wvs-ruimte-2);
}

/* Toestemmingsregel (AVG) — checkbox naast tekst */
.wvs-akkoord {
	display: flex;
	align-items: flex-start;
	gap: var(--wvs-ruimte-3);
	font-family: var(--wvs-font-tekst);
	font-size: var(--wvs-fs-klein);
	font-weight: var(--wvs-gewicht-tekst);
	color: var(--wvs-body-kleur);
	line-height: 1.5;
}

.wvs-akkoord input[type="checkbox"] {
	flex: 0 0 auto;
	width: 1.15rem;
	height: 1.15rem;
	margin-top: 0.15rem;
	accent-color: var(--wvs-accent);
}

/* Honeypot — nooit zichtbaar, ook niet voor schermlezers */
.wvs-honeypot {
	position: absolute !important;
	left: -9999px !important;
	opacity: 0;
	height: 0;
	overflow: hidden;
}

/* --- Meldingen ---------------------------------------------------------- */

.wvs-melding {
	border-radius: var(--wvs-radius-vlak);
	padding: var(--wvs-ruimte-4) var(--wvs-ruimte-5);
	margin-bottom: var(--wvs-ruimte-5);
	border-left: 3px solid var(--wvs-accent);
	background: var(--wvs-bg-zacht);
	color: var(--wvs-kop-kleur);
}

/* --- FAQ (details/summary — werkt zonder JavaScript) -------------------- */

.wvs-faq {
	border-top: 1px solid var(--wvs-rand);
}

.wvs-faq details {
	border-bottom: 1px solid var(--wvs-rand);
}

.wvs-faq summary {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--wvs-ruimte-4);
	cursor: pointer;
	list-style: none;
	font-family: var(--wvs-font-kop);
	font-size: var(--wvs-fs-h4);
	font-weight: var(--wvs-gewicht-kop);
	color: var(--wvs-kop-kleur);
	padding: var(--wvs-ruimte-4) 0;
	min-height: 48px;
}

.wvs-faq summary::-webkit-details-marker { display: none; }

.wvs-faq summary::after {
	content: "+";
	font-size: 1.5em;
	line-height: 1;
	color: var(--wvs-accent);
	transition: transform var(--wvs-overgang);
	flex: 0 0 auto;
}

.wvs-faq details[open] summary::after { transform: rotate(45deg); }

.wvs-faq details > *:not(summary) {
	padding-bottom: var(--wvs-ruimte-4);
}

/* --- CTA-blok ----------------------------------------------------------- */

.wvs-cta {
	background: var(--wvs-donker);
	color: #ffffff;
	border-radius: var(--wvs-radius-vlak);
	padding: var(--wvs-ruimte-6);
	text-align: center;
}

.wvs-cta h2, .wvs-cta h3 { color: #ffffff; }
.wvs-cta p { color: rgba(255, 255, 255, 0.82); }

/* --- Logostrip (merkpartners) ------------------------------------------ */

.wvs-logostrip {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--wvs-ruimte-6);
}

.wvs-logostrip img {
	max-height: 34px;
	width: auto;
	opacity: 0.65;
	filter: grayscale(1);
	transition: opacity var(--wvs-overgang), filter var(--wvs-overgang);
}

.wvs-logostrip img:hover {
	opacity: 1;
	filter: grayscale(0);
}