/*
 * 00 — GLOBAAL
 * Regels die op de VOLLEDIGE website van toepassing zijn: knoppen, headings,
 * links, huisstijl-helpers. Kleuren/fonts/spacing komen uit theme.json —
 * gebruik hier altijd var(--wp--preset--...), nooit losse hex-codes.
 * (Uitzondering: puur wit #fff voor kaarten/pill — bewust net iets witter
 * dan de off-white achtergrond, zodat ze "zweven".)
 * Sectie- of paginaspecifieke CSS hoort hier NIET: maak daarvoor een nieuw
 * genummerd bestand (zie WERKWIJZE.md in de site-root).
 */

/* Subtiel grid-patroon op de paginaachtergrond (huisstijl-element). */
body {
	background-image:
		linear-gradient(var(--wp--preset--color--surface) 1px, transparent 1px),
		linear-gradient(90deg, var(--wp--preset--color--surface) 1px, transparent 1px);
	background-size: 80px 80px;
}

/* Footer-credit: nooit onderlijnd, ook niet bij hover. */
.vv-credit a,
.vv-credit a:hover,
.vv-credit a:focus {
	text-decoration: none;
}

/* Knoppen: padding + subtiele hover-lift (kleuren/radius komen uit theme.json). */
.wp-element-button {
	padding: 12px 28px;
	transition: transform 0.15s ease, background-color 0.15s ease;
}

.wp-element-button:hover {
	transform: translateY(-1px);
}

/* Outline-knop: kies blokstijl "Outline" op een knop. */
.wp-block-button.is-style-outline .wp-block-button__link {
	background: transparent;
	border: 2px solid var(--wp--preset--color--primary);
	color: var(--wp--preset--color--contrast);
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
	background: var(--wp--preset--color--accent);
}

/* Verveine-helpers: de handgeschreven stem van het merk.
   .vv-script  → los blok (paragraaf/kop) volledig in Verveine, geel.
   .vv-accent  → één woord binnen een kop: <span class="vv-accent">woord</span>. */
.vv-script {
	font-family: var(--wp--preset--font-family--accent);
	color: var(--wp--preset--color--primary);
	font-size: 1.5rem;
	font-weight: 400;
	line-height: 1.2;
}

.vv-accent {
	font-family: var(--wp--preset--font-family--accent);
	color: var(--wp--preset--color--primary);
	font-weight: 400;
}

/* Kaart: witte container met ronde hoeken en zachte schaduw. */
.vv-card {
	background: #fff;
	border-radius: 16px;
	box-shadow: 0 4px 24px rgba(0, 0, 0, 0.04);
}