/*
 * VREETKICK! Design System
 * Centrale merkstijl voor de publieke website en de platformcomponenten.
 */

:root {
	/* Typografie */
	--vk-font-display: "Anton", Impact, sans-serif;
	--vk-font-body: "Manrope", Arial, sans-serif;

	/* Merkkleuren */
	--vk-dark: #1b1b1b;
	--vk-light: #ffffff;
	--vk-red: #a61e22;
	--vk-ochre: #d8a520;
	--vk-green: #1f4d36;
	--vk-surface: #f5f3ee;
	--vk-surface-muted: #eeeeeb;
	--vk-border: rgba(27, 27, 27, 0.16);

	/* Buttons: rood als basis, oker bij hover */
	--vk-button-bg: var(--vk-red);
	--vk-button-text: var(--vk-light);
	--vk-button-bg-hover: var(--vk-ochre);
	--vk-button-text-hover: var(--vk-dark);

	/* Maten */
	--vk-h1-size: clamp(2.625rem, 6vw, 5.125rem);
	--vk-h2-size: clamp(2.125rem, 4.5vw, 3.875rem);
	--vk-h3-size: clamp(1.6875rem, 3vw, 2.625rem);
	--vk-h4-size: clamp(1.375rem, 2vw, 1.875rem);
	--vk-h5-size: 1.25rem;
	--vk-h6-size: 1rem;
	--vk-heading-line-height: 1;
	--vk-body-line-height: 1.65;

	/* Vorm en beweging */
	--vk-radius-sm: 6px;
	--vk-radius: 10px;
	--vk-radius-lg: 14px;
	--vk-shadow: 0 12px 32px rgba(27, 27, 27, 0.12);
	--vk-transition: 0.25s ease;
}

/* =========================================
   BASIS EN TYPOGRAFIE
   ========================================= */

body {
	font-family: var(--vk-font-body);
	color: var(--vk-dark);
	line-height: var(--vk-body-line-height);
}

h1,
h2,
h3,
h4,
h5,
h6,
.et_pb_text h1,
.et_pb_text h2,
.et_pb_text h3,
.et_pb_text h4,
.et_pb_text h5,
.et_pb_text h6 {
	font-family: var(--vk-font-display);
	font-weight: 400;
	line-height: var(--vk-heading-line-height);
	letter-spacing: 0;
	text-transform: uppercase;
}

h1, .et_pb_text h1 { font-size: var(--vk-h1-size); }
h2, .et_pb_text h2 { font-size: var(--vk-h2-size); }
h3, .et_pb_text h3 { font-size: var(--vk-h3-size); }
h4, .et_pb_text h4 { font-size: var(--vk-h4-size); }
h5, .et_pb_text h5 { font-size: var(--vk-h5-size); }
h6, .et_pb_text h6 { font-size: var(--vk-h6-size); }

p,
li,
input,
select,
textarea,
label {
	font-family: var(--vk-font-body);
}

/* =========================================
   DIVI NAVIGATIE
   ========================================= */

#top-menu > li > a,
.et-menu > li > a,
.et_pb_menu__menu > nav > ul > li > a,
.et_mobile_menu li a,
#top-menu li li a,
.et-menu li li a,
.et_pb_menu__menu .sub-menu li a {
	font-family: var(--vk-font-display);
	font-weight: 400;
	letter-spacing: 0;
	text-transform: uppercase;
}

/* =========================================
   BUTTONS
   Eén gedrag voor Divi, WooCommerce en formulieren.
   ========================================= */

body:not(.et-fb) #page-container .et_pb_button,
body:not(.et-fb) #page-container .et_pb_button_module_wrapper .et_pb_button,
body:not(.et-fb) input[type="submit"],
body:not(.et-fb) input[type="button"],
body:not(.et-fb) .woocommerce a.button,
body:not(.et-fb) .woocommerce button.button,
body:not(.et-fb) .woocommerce input.button,
body:not(.et-fb) .woocommerce #respond input#submit {
	font-family: var(--vk-font-display);
	font-weight: 400;
	line-height: 1.2 !important;
	letter-spacing: 0;
	text-transform: uppercase;
	background: var(--vk-button-bg) !important;
	color: var(--vk-button-text) !important;
	border: 0 !important;
	border-radius: var(--vk-radius-sm) !important;
	box-shadow: none !important;
	padding: 0.78em 1.15em !important;
	transition:
		background-color var(--vk-transition),
		color var(--vk-transition),
		transform var(--vk-transition) !important;
}

body:not(.et-fb) #page-container .et_pb_button:hover,
body:not(.et-fb) #page-container .et_pb_button_module_wrapper .et_pb_button:hover,
body:not(.et-fb) input[type="submit"]:hover,
body:not(.et-fb) input[type="button"]:hover,
body:not(.et-fb) .woocommerce a.button:hover,
body:not(.et-fb) .woocommerce button.button:hover,
body:not(.et-fb) .woocommerce input.button:hover,
body:not(.et-fb) .woocommerce #respond input#submit:hover {
	background: var(--vk-button-bg-hover) !important;
	color: var(--vk-button-text-hover) !important;
	border: 0 !important;
	padding: 0.78em 1.15em !important;
	transform: translateY(-1px);
}

body:not(.et-fb) #page-container .et_pb_button:active,
body:not(.et-fb) input[type="submit"]:active,
body:not(.et-fb) input[type="button"]:active,
body:not(.et-fb) .woocommerce a.button:active,
body:not(.et-fb) .woocommerce button.button:active {
	transform: translateY(0);
}

/* Divi-pijltje uitschakelen en uitschuiven voorkomen. */
body:not(.et-fb) #page-container .et_pb_button::before,
body:not(.et-fb) #page-container .et_pb_button::after {
	display: none !important;
	content: none !important;
}

/* Toetsenbordfocus blijft zichtbaar voor toegankelijkheid. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
	outline: 3px solid var(--vk-ochre) !important;
	outline-offset: 3px;
}

/* =========================================
   BASISFORMULIEREN
   ========================================= */

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="number"],
input[type="time"],
select,
textarea {
	border: 1px solid var(--vk-border);
	border-radius: var(--vk-radius-sm);
	background: var(--vk-light);
	color: var(--vk-dark);
}

/* =========================================
   HERBRUIKBARE HULPKLASSEN
   ========================================= */

.vk-font-display { font-family: var(--vk-font-display) !important; }
.vk-font-body { font-family: var(--vk-font-body) !important; }
.vk-text-uppercase { text-transform: uppercase !important; }
.vk-surface { background: var(--vk-surface); }