/* ==========================================================================
   Gaivota — basis
   ========================================================================== */

*,
*::before,
*::after { box-sizing: border-box; }

html {
	-webkit-text-size-adjust: 100%;
	/* clip in plaats van hidden: hidden maakt een scrollcontainer en dan werkt de vaste header niet. */
	overflow-x: clip;
}

body {
	margin: 0;
	overflow-x: clip;
	background: var(--gv-wit);
	color: var(--gv-tekst);
	font-family: var(--gv-font-tekst);
	font-size: var(--gv-body);
	font-weight: 400;
	line-height: 2;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

img,
video,
svg,
iframe { max-width: 100%; }

img,
video { height: auto; display: block; }

a {
	color: inherit;
	text-decoration: none;
	transition: color .3s ease-in-out;
}

button { font: inherit; }

h1, h2, h3, h4, h5, h6 {
	margin: 0;
	font-family: var(--gv-font-kop);
	font-weight: var(--gv-kop-gewicht);
	line-height: 1;
	text-transform: uppercase;
	color: var(--gv-navy);
}

h1 { font-size: var(--gv-h1); }
h2 { font-size: var(--gv-h2); }
h3 { font-size: var(--gv-h3); }
h4 { font-size: var(--gv-h3); }

p { margin: 0 0 1.5em; }
p:last-child { margin-bottom: 0; }

ul, ol { margin: 0 0 1.5em; padding-left: 1.2em; }

blockquote { margin: 0; }

::selection {
	color: #fff;
	background: #04173B;
}

.gv-verborgen,
.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	margin: -1px; padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.gv-overslaan:focus {
	position: fixed;
	top: 1rem; left: 1rem;
	z-index: 9999;
	padding: .75rem 1.25rem;
	background: var(--gv-navy);
	color: #fff;
}

/* Hoogtes uit de kit-custom-CSS: regel-voor-regel opbouwende koppen. */
.header-wrapper    { height: var(--gv-h-header-sm); }
.secondary-wrapper { height: var(--gv-h-secondary-sm); }
.accent-wrapper    { height: var(--gv-h-accent); }

@media (min-width: 768px) {
	.header-wrapper    { height: var(--gv-h-header-md); }
	.secondary-wrapper { height: var(--gv-h-secondary-md); }
}

@media (min-width: 1367px) {
	.header-wrapper    { height: var(--gv-h-header-lg); }
	.secondary-wrapper { height: var(--gv-h-secondary-lg); }
}

/* Soepel naar een anker, met ruimte voor de vaste header. */
html { scroll-behavior: smooth; }
[id] { scroll-margin-top: calc(var(--gv-h-header, 88px) + 1rem); }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
}