/**
 * Landgoed Het Grote Zand
 * Global Styles
 * Blocksy Child Theme
 *
 * Bestand:
 * /assets/css/global.css
 */


/* =========================================================
   1. DESIGN TOKENS
========================================================= */

:root {

	/* Kleuren */
	--hgz-color-primary: #173f2b;
	--hgz-color-primary-dark: #123521;
	--hgz-color-primary-light: #5d7d4e;

	--hgz-color-text: #68716c;
	--hgz-color-text-dark: #23382a;
	--hgz-color-heading: #183524;

	--hgz-color-background: #ffffff;
	--hgz-color-background-alt: #f5f4ef;
	--hgz-color-background-soft: #f4f6f4;

	--hgz-color-border: #d9dfda;
	--hgz-color-border-light: #e8ebe7;

	--hgz-color-white: #ffffff;
	--hgz-color-black: #000000;


	/* Typografie */
	--hgz-font-body:
		-apple-system,
		BlinkMacSystemFont,
		"Segoe UI",
		sans-serif;

	--hgz-font-heading:
		-apple-system,
		BlinkMacSystemFont,
		"Segoe UI",
		sans-serif;


	/* Layout */
	--hgz-container-width: 1280px;

	/*
	 * 80px totaal:
	 * 40px links + 40px rechts.
	 */
	--hgz-container-padding: 80px;

	--hgz-section-space: 88px;


	/* Randen */
	--hgz-radius-sm: 4px;
	--hgz-radius-md: 5px;
	--hgz-radius-lg: 8px;
	--hgz-radius-pill: 999px;


	/* Schaduwen */
	--hgz-shadow-sm:
		0 8px 25px rgba(24, 53, 36, .06);

	--hgz-shadow-md:
		0 16px 35px rgba(24, 53, 36, .11);


	/* Transities */
	--hgz-transition-fast: .2s ease;
	--hgz-transition: .25s ease;
	--hgz-transition-slow: .45s ease;
}


/* =========================================================
   2. BASIS RESET
========================================================= */

html {
	box-sizing: border-box;
	scroll-behavior: smooth;
}

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

body {
	margin: 0;

	background: var(--hgz-color-background);
	color: var(--hgz-color-text);

	font-family: var(--hgz-font-body);
	font-size: 16px;
	line-height: 1.6;

	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

img {
	max-width: 100%;
	height: auto;
}

svg {
	max-width: 100%;
}

button,
input,
textarea,
select {
	font: inherit;
}


/* =========================================================
   3. LINKS
========================================================= */

a {
	color: var(--hgz-color-primary-light);
	text-decoration: none;
}

a:hover {
	color: var(--hgz-color-primary-dark);
}


/* =========================================================
   4. HEADINGS
========================================================= */

h1,
h2,
h3,
h4,
h5,
h6 {
	margin-top: 0;

	color: var(--hgz-color-heading);
	font-family: var(--hgz-font-heading);
	font-weight: 700;
}

h1,
h2 {
	letter-spacing: -.02em;
}

h1 {
	font-size: clamp(40px, 5vw, 72px);
	line-height: 1.08;
}

h2 {
	font-size: clamp(32px, 3.2vw, 45px);
	line-height: 1.16;
}

h3 {
	font-size: 21px;
	line-height: 1.3;
}


/* =========================================================
   5. TEKST
========================================================= */

p {
	margin-top: 0;
}

.hgz-text {
	color: var(--hgz-color-text);
}

.hgz-section-label {
	margin: 0 0 12px;

	color: var(--hgz-color-primary-light);

	font-size: 13px;
	font-weight: 700;

	letter-spacing: .08em;
	line-height: 1.4;

	text-transform: uppercase;
}


/* =========================================================
   6. CONTAINER
========================================================= */

.hgz-container {
	width: min(
		calc(100% - var(--hgz-container-padding)),
		var(--hgz-container-width)
	);

	margin-inline: auto;
}


/* =========================================================
   7. SECTIES
========================================================= */

.hgz-section {
	position: relative;
}

.hgz-section--white {
	background: var(--hgz-color-background);
}

.hgz-section--alt {
	background: var(--hgz-color-background-alt);
}

.hgz-section--soft {
	background: var(--hgz-color-background-soft);
}


/* =========================================================
   8. BUTTON BASIS
========================================================= */

.hgz-button {
	display: inline-flex;

	align-items: center;
	justify-content: center;

	min-height: 46px;

	padding: 12px 21px;

	border: 1px solid transparent;
	border-radius: var(--hgz-radius-md);

	font-size: 13px;
	font-weight: 700;
	line-height: 1.3;

	text-align: center;
	text-decoration: none;

	cursor: pointer;

	transition:
		background-color var(--hgz-transition-fast),
		border-color var(--hgz-transition-fast),
		color var(--hgz-transition-fast),
		transform var(--hgz-transition-fast);
}

.hgz-button:hover {
	transform: translateY(-2px);
}

.hgz-button:focus-visible,
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
	outline: 2px solid var(--hgz-color-primary-light);
	outline-offset: 3px;
}


/* =========================================================
   9. PRIMARY BUTTON
========================================================= */

.hgz-button--primary {
	border-color: var(--hgz-color-primary-light);

	background: var(--hgz-color-primary-light);

	color: var(--hgz-color-white);
}

.hgz-button--primary:hover,
.hgz-button--primary:focus {
	border-color: var(--hgz-color-primary-dark);

	background: var(--hgz-color-primary-dark);

	color: var(--hgz-color-white);
}


/* =========================================================
   10. SECONDARY BUTTON
========================================================= */

.hgz-button--secondary {
	border-color: var(--hgz-color-primary-light);

	background: transparent;

	color: var(--hgz-color-primary);
}

.hgz-button--secondary:hover,
.hgz-button--secondary:focus {
	border-color: var(--hgz-color-primary);

	background: var(--hgz-color-primary);

	color: var(--hgz-color-white);
}


/* =========================================================
   11. GLOBALE AFBEELDINGEN
========================================================= */

.hgz-image {
	display: block;

	width: 100%;
	height: 100%;

	object-fit: cover;
}


/* =========================================================
   12. GLOBALE VISUELE ELEMENTEN
========================================================= */

.hgz-card {
	background: var(--hgz-color-white);

	border: 1px solid rgba(24, 53, 36, .08);
	border-radius: var(--hgz-radius-md);

	box-shadow: var(--hgz-shadow-sm);
}


/* =========================================================
   13. SCREEN READER
========================================================= */

.screen-reader-text {
	position: absolute !important;

	width: 1px;
	height: 1px;

	padding: 0;
	margin: -1px;

	overflow: hidden;

	clip: rect(0, 0, 0, 0);

	white-space: nowrap;

	border: 0;
}


/* =========================================================
   14. SELECTION
========================================================= */

::selection {
	background: var(--hgz-color-primary-light);
	color: var(--hgz-color-white);
}


/* =========================================================
   15. BLOCKSY / WORDPRESS BASIS
========================================================= */

.hgz-hero img,
.hgz-intro img,
.hgz-accommodations img,
.hgz-voorzieningen img,
.hgz-omgeving img,
.hgz-faq img,
.hgz-cta img,
.hgz-footer img {
	vertical-align: middle;
}


.hgz-hero,
.hgz-intro,
.hgz-accommodations,
.hgz-voorzieningen,
.hgz-omgeving,
.hgz-faq,
.hgz-cta,
.hgz-footer {
	max-width: 100%;
	overflow-x: clip;
}


/* =========================================================
   16. TABLET
========================================================= */

@media (max-width: 1050px) {

	:root {
		--hgz-container-padding: 60px;
		--hgz-section-space: 75px;
	}

}


/* =========================================================
   17. MOBIEL
========================================================= */

@media (max-width: 650px) {

	:root {
		--hgz-container-padding: 40px;
		--hgz-section-space: 60px;
	}

	body {
		font-size: 15px;
	}

	h1 {
		font-size: 38px;
	}

	h2 {
		font-size: 32px;
	}

	h3 {
		font-size: 20px;
	}

	.hgz-section-label {
		font-size: 11px;
	}

}


/* =========================================================
   18. KLEINE MOBIELE SCHERMEN
========================================================= */

@media (max-width: 400px) {

	:root {
		--hgz-container-padding: 32px;
	}

	h1 {
		font-size: 34px;
	}

	h2 {
		font-size: 29px;
	}

}