/*
 * Maries maakt het — WordPress-basis (laadt na site.css).
 *
 * site.css is één-op-één de stylesheet van de goedgekeurde preview. Dit
 * bestand bevat alleen wat nodig is om WordPress-markup en de standaard-
 * stijlen van WordPress daarmee te laten samenwerken. De preview is leidend.
 */

/* --- Lettertype ---
 * site.css gebruikt overal var(--font). Hier koppelen we die aan het
 * lettertype uit theme.json (preset "merk"). Kiest Maries in Stijlen een
 * ander lettertype, dan zet functions.php --font daarop (html:root wint). */
:root { --font: var(--wp--preset--font-family--merk); }
body,
h1, h2, h3, h4, h5, h6,
.button,
.nav-toggle,
.wp-element-button,
.wp-block-button__link { font-family: var(--font); }

/* --- WordPress-standaarden die met de preview botsen --- */
.wp-site-blocks > * { margin-block: 0; }
/* WordPress zet bij :focus (ook met de muis) een omlijning; de preview alleen bij :focus-visible. */
.wp-site-blocks :focus:not(:focus-visible) { outline: none; }

/* --- Header (de template part zelf is <header class="site-header">) --- */
.admin-bar .site-header { top: var(--wp-admin--admin-bar--height, 0px); }
@media (max-width: 600px) {
	.admin-bar .site-header { top: 0; }
}
.site-header__logo.wp-block-image { margin: 0; }
.site-header__logo a { display: block; border-radius: 6px; }
.site-header .nav__lijst > li { margin: 0; }

/* --- Footer --- */
.site-footer__merk .wp-block-image { margin: 0; }
.site-footer .wp-block-list { padding: 0; }

/* --- Knoppen-blok (core/button) ziet eruit als .button uit de preview --- */
.wp-block-button__link,
.wp-element-button {
	display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
	min-height: 52px;
	font-size: 1rem;
	text-decoration: none;
	transition: background .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
}
.wp-block-button__link:hover,
.wp-element-button:hover { transform: translateY(-2px); }
.wp-block-button.is-style-outline > .wp-block-button__link:hover {
	background: var(--bruin); border-color: var(--bruin); color: var(--creme);
}
@media (prefers-reduced-motion: reduce) {
	.wp-block-button__link, .wp-element-button { transition: none; }
}

/* --- Pagina's (privacy): introregel als eerste alinea van de inhoud ---
 * In de preview staat de intro in de paginakop; in WordPress is het de
 * eerste alinea (klasse pagina__intro) uit het patroon "Privacyverklaring". */
.pagina__kop:has(+ .tekst > .pagina__intro:first-child) { margin-bottom: 0; }
.tekst > .pagina__intro:first-child { margin: 1.25rem 0 3rem; font-size: 1.15rem; }
.tekst > .wp-block-heading:first-child { margin-top: 0; }

/* Berichtenoverzicht (index.html), voor het geval er ooit berichten komen */
.wp-block-post-template { margin: 0; padding: 0; list-style: none; }
.wp-block-post-template > li + li { margin-top: 2.5rem; }
.wp-block-post-template .wp-block-post-title { margin-bottom: .5rem; }

/* 404: de knoppenrij is in WordPress een bewerkbare alinea (in de preview een div) */
p.hero__knoppen { max-width: none; margin: 0; }