@font-face {
	font-family: 'Avenir Next';
	src: url('/fonts/AvenirNextLTProRegular.otf') format('opentype');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Avenir Next';
	src: url('/fonts/AvenirNextLTProIt.otf') format('opentype');
	font-weight: 400;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: 'Avenir Next';
	src: url('/fonts/AvenirNextLTProBold.otf') format('opentype');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

:root {
	--font-family-sans: 'Avenir Next', Avenir, Helvetica, Arial, sans-serif;
	--font-family-serif: 'PT Serif', serif;

	--white: #fff9ec;
	--black: #101112;
	--green: #558564;
	--red: #bc3908;
	--yellow: #e3b505;
	--blue: #08415c;

	--border-radius: 0.75rem;
	--body-size: 1rem;
	--yellow-band-bottom: 12.5%;
	--yellow-band-height: 3rem;

	--shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.3);
	--header-height: 3rem;
	--real-vh: 100dvh;
	--scrollable-height: calc(var(--real-vh) - var(--header-height));

	--tablet-max-width: 710px;
}

html,
body {
	overflow-x: hidden;
}

html {
	background-color: var(--white);
	color: var(--blue);
	-webkit-text-size-adjust: 100%;
	font-family: var(--font-family-sans), var(--font-family-serif), sans-serif;
	-moz-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: var(--font-family-sans);
}

.outline-enabled * {
	outline: 1px dotted rgb(239, 4, 180);
}

ul,
ol {
	list-style-position: inside;
}

h1,
.h1 {
	font-family: 'Alata', sans-serif;
	font-weight: 400;
	text-transform: uppercase;
	font-size: 3.5rem;
	line-height: 1.2;
}

h2,
.h2 {
	font-weight: 400;
	font-size: 2.5rem;
	line-height: 1.3;
	text-transform: uppercase;
}

h3,
.h3 {
	font-size: 2.125rem;
	line-height: 1.2;
	font-weight: 400;
}

h4,
.h4 {
	font-size: 2rem;
	line-height: 1.4;
	font-weight: 400;
}

p,
.p {
	font-weight: 400;
	font-size: 1.5rem;
	line-height: 1.3;
}

button {
	font-weight: 400;
	font-size: clamp(1.1rem, 1.35rem, 1.5rem);
	line-height: 1.2;
}

.red-title,
.bar-title {
	background-color: var(--red);
	color: var(--white);
	padding: 1.5rem;
	text-align: center;
	display: block;
	width: 100%;
}

@media (max-width: 767px) {
	h1,
	.h1 {
		font-size: 1.75rem;
		line-height: 1.17;
	}

	h2,
	.h2 {
		font-size: 1.25rem;
		line-height: 1.18;
	}

	h3,
	.h3 {
		font-size: 1.125rem;
		line-height: 1.2;
	}

	h4,
	.h4 {
		font-size: 1.1rem;
		line-height: 1.16;
	}

	p,
	.p {
		font-family: var(--font-family-sans);
		font-size: 0.92rem;
		line-height: 1.2;
	}
}

.btn {
	cursor: pointer;
	transition:
		transform 160ms ease,
		opacity 120ms linear,
		box-shadow 160ms ease;
	transform-origin: center;
}

.btn:focus-visible {
	transform: scale(1.02);
}

.btn:hover {
	transform: scale(1.01);
	opacity: 0.97;
}

.btn:active {
	transform: scale(0.99);
	transition-duration: 90ms;
	opacity: 0.98;
}

/* Landscape-blokkering voor touch-devices (mobile + tablet) */
/* @media (pointer: coarse) and (orientation: landscape) {
	body::after {
		content: 'Draai je scherm voor de beste ervaring';
		position: fixed;
		inset: 0;
		z-index: 9999;
		background-color: var(--white);
		color: var(--red);
		display: flex;
		align-items: center;
		justify-content: center;
		font-family: var(--font-family-sans);
		font-size: 1.25rem;
		text-align: center;
		padding: 2rem;
	}
} */