/**
 * GrafsteenGoedkoop – merk. Lettertypes vanaf de eigen server (geen Google),
 * dezelfde letters in Elementor, de configurator en gewone WordPress-pagina's.
 * Kleuren komen als variabelen uit config/config.php ('merk').
 */
@font-face{font-family:'Geist';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/geist-latin-400-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Geist';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/geist-latin-ext-400-normal.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Geist';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/geist-latin-500-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Geist';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/geist-latin-ext-500-normal.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Geist';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/geist-latin-600-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Geist';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/geist-latin-ext-600-normal.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Instrument Serif';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/instrument-serif-latin-400-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Instrument Serif';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/instrument-serif-latin-ext-400-normal.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Instrument Serif';font-style:italic;font-weight:400;font-display:swap;src:url('../fonts/instrument-serif-latin-400-italic.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Instrument Serif';font-style:italic;font-weight:400;font-display:swap;src:url('../fonts/instrument-serif-latin-ext-400-italic.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}

/* Configurator (STAGGS) in de merkletters. */
.staggs-configurator {
	--sgg-base-font: var(--gg-font-tekst);
	--sgg-heading-font: var(--gg-font-tekst);
	--sgg-button-font: var(--gg-font-tekst);
	--sgg-heading-font-weight: 600;
	--sgg-button-font-weight: 500;
}
.staggs-configurator,
.staggs-configurator button,
.staggs-configurator input,
.staggs-configurator textarea,
.gg-offerte,
.gg-combi {
	font-family: var(--gg-font-tekst);
}
.gg-offerte h1, .gg-offerte h2, .gg-combi h2, .gg-afronden__titel {
	font-family: var(--gg-font-kop);
	font-weight: 400;
	letter-spacing: -0.01em;
}
.gg-topprijs__bedrag, .gg-afronden__prijs strong, .gg-offerte__prijs, .gg-combi__prijs {
	font-variant-numeric: tabular-nums;
}

/* Gewone WordPress-pagina's die de basiswebsite aanmaakt (<div class="gg-pagina">). */
.gg-pagina {
	--gg-lijn: #DAD6CC;
	font-family: var(--gg-font-tekst);
	color: var(--gg-tekstkleur);
	font-size: 17px;
	line-height: 1.6;
	max-width: 1180px;
	margin: 0 auto;
	padding: 24px 20px 72px;
}
.gg-pagina h1, .gg-pagina h2 {
	font-family: var(--gg-font-kop);
	font-weight: 400;
	letter-spacing: -0.015em;
	line-height: 1.04;
	color: var(--gg-tekstkleur);
}
.gg-pagina h1 { font-size: clamp(40px, 5vw, 68px); margin: 0 0 18px; }
.gg-pagina h2 { font-size: clamp(30px, 3.4vw, 46px); margin: 56px 0 16px; }
.gg-pagina h3 { font: 600 19px/1.3 var(--gg-font-tekst); margin: 26px 0 6px; }
.gg-pagina p, .gg-pagina li { max-width: 44em; }
.gg-pagina .gg-bovenregel {
	font: 500 12.5px/1 var(--gg-font-tekst);
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--gg-goud);
	margin: 0 0 16px;
}
.gg-pagina .gg-intro { font-size: 19px; color: #3B4544; margin-bottom: 28px; }
.gg-pagina .wp-block-button__link, .gg-pagina .gg-knop {
	display: inline-block;
	background: var(--gg-groen);
	color: #fff;
	font: 500 16px/1 var(--gg-font-tekst);
	padding: 16px 22px;
	border-radius: 10px;
	text-decoration: none;
}
.gg-pagina .is-style-outline .wp-block-button__link {
	background: transparent;
	color: var(--gg-groen);
	box-shadow: inset 0 0 0 1.5px var(--gg-groen);
}
.gg-pagina a:not(.wp-block-button__link):not(.gg-knop) { color: var(--gg-groen); text-underline-offset: 3px; }
.gg-pagina .wp-block-image img, .gg-pagina figure img { border-radius: 14px; height: auto; }
.gg-pagina figcaption { font-size: 13px; color: #6a7372; }
.gg-pagina .gg-vlak { background: #fff; border-radius: 18px; padding: 32px 34px; margin: 28px 0; }
.gg-pagina .gg-vlak.donker { background: var(--gg-groen); color: #E8EBE9; }
.gg-pagina .gg-vlak.donker h2, .gg-pagina .gg-vlak.donker h3 { color: #fff; }
.gg-pagina .wp-block-columns { gap: 28px; }
.gg-pagina details { border-top: 1px solid var(--gg-lijn); padding: 16px 0; max-width: 820px; }
.gg-pagina details:last-of-type { border-bottom: 1px solid var(--gg-lijn); }
.gg-pagina summary { font-weight: 600; cursor: pointer; list-style-position: outside; }
.gg-pagina details p { margin: 10px 0 0; }
.gg-pagina .gg-kenmerken { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 18px; list-style: none; padding: 0; margin: 20px 0; }
.gg-pagina .gg-kenmerken li { background: #fff; border-radius: 14px; padding: 20px 22px; max-width: none; }
.gg-pagina .gg-kenmerken strong { display: block; font-size: 18px; margin-bottom: 4px; }
@media (max-width: 780px) {
	.gg-pagina .gg-kenmerken { grid-template-columns: 1fr; }
	.gg-pagina .gg-vlak { padding: 24px 20px; }
}

/* Configurator op een gewone pagina: over de volle breedte. */
.gg-configurator-blok {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}
