/**
 * Trots op Eigen Streek — ontwerpsysteem
 *
 * Laadt bovenop Divi 5. Tokens, typografie (Fraunces + Albert Sans),
 * header/footer, Divi-modules (blog, formulier, accordeon, knoppen),
 * focus-stijlen en beweging. Kleuren die in paginacontent inline staan
 * (secties, kaarten) blijven daar; dit bestand regelt al het globale.
 */

:root {
	--tos-groen: #3F5A36;
	--tos-groen-donker: #33492C;
	--tos-creme: #F3ECE0;
	--tos-creme-licht: #FAF6EE;
	--tos-terracotta: #C75B39;
	--tos-terracotta-donker: #B04E2F; /* AA op wit en creme */
	--tos-ink: #2B2620;
	--tos-tekst: #4A443C;
	--tos-lijn: rgba(43, 38, 32, 0.12);
	--tos-font-kop: 'Fraunces', Georgia, 'Times New Roman', serif;
	--tos-font-tekst: 'Albert Sans', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
	--tos-radius-kaart: 12px;
	--tos-radius-veld: 8px;
	--tos-schaduw-kaart: 0 18px 34px -18px rgba(43, 38, 32, 0.18);
}

/* ---------- Basis-typografie ---------- */

body,
.et_pb_text,
.et_pb_blurb_container,
input,
textarea,
select,
button {
	font-family: var(--tos-font-tekst);
}

body,
.et_pb_text {
	font-size: 17px;
	line-height: 1.7;
	color: var(--tos-tekst);
}

h1, h2, h3, h4, h5, h6,
.et_pb_module_header,
.et_pb_blurb h3, .et_pb_blurb h4,
.et_pb_toggle_title,
.entry-title,
.et_pb_promo_description h2 {
	font-family: var(--tos-font-kop);
	font-weight: 600;
	color: var(--tos-ink);
	line-height: 1.15;
}

h1 { font-size: clamp(2.4rem, 5vw, 3.4rem); letter-spacing: -0.015em; }
h2 { font-size: clamp(1.75rem, 3.2vw, 2.3rem); letter-spacing: -0.01em; }
h3 { font-size: 1.32rem; line-height: 1.3; }
h4 { font-size: 1.1rem; }

p { line-height: 1.7; }

::selection { background: var(--tos-groen); color: #fff; }

a { color: var(--tos-terracotta-donker); }
.et_pb_text a:not(.et_pb_button) {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}
.et_pb_text a:not(.et_pb_button):hover { color: var(--tos-groen); }

/* Hulpstijlen voor content */
.tos-eyebrow {
	font-family: var(--tos-font-tekst);
	text-transform: uppercase;
	letter-spacing: 0.16em;
	font-size: 13px;
	font-weight: 600;
	margin-bottom: 14px;
}

.tos-stapnr {
	display: block;
	font-family: var(--tos-font-kop);
	font-weight: 600;
	font-size: 54px;
	line-height: 1;
	color: var(--tos-terracotta);
	margin-bottom: 10px;
}

.tos-citaat {
	font-family: var(--tos-font-kop);
	font-style: italic;
	font-weight: 500;
	font-size: clamp(1.4rem, 2.6vw, 1.9rem);
	line-height: 1.4;
	color: var(--tos-ink);
}

/* ---------- Header en navigatie ---------- */

#main-header {
	box-shadow: none;
	border-bottom: 1px solid var(--tos-lijn);
}

#top-menu a,
.et_mobile_menu li a {
	font-family: var(--tos-font-tekst);
	font-size: 15px;
	font-weight: 500;
	color: var(--tos-ink);
}

#top-menu a:hover,
.et_mobile_menu li a:hover {
	color: var(--tos-groen);
	opacity: 1;
}

#top-menu li.current-menu-item > a,
#top-menu li.current_page_item > a {
	color: var(--tos-groen);
}

#top-menu li.current-menu-item > a::after,
#top-menu li.current_page_item > a::after {
	content: '';
	display: block;
	height: 2px;
	margin-top: 4px;
	background: var(--tos-terracotta);
}

.mobile_menu_bar::before { color: var(--tos-groen); }

/* Skip-link: onzichtbaar tot hij toetsenbordfocus krijgt */
.tos-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100001;
	background: var(--tos-ink);
	color: #fff;
	font-family: var(--tos-font-tekst);
	font-weight: 600;
	padding: 12px 20px;
	border-radius: 0 0 8px 0;
}

.tos-skip-link:focus {
	left: 0;
	color: #fff;
	outline: 3px solid var(--tos-terracotta);
	outline-offset: -3px;
}

/* ---------- Footer ---------- */

#main-footer { background: var(--tos-ink); }

#footer-widgets { padding-top: 6%; }

.footer-widget,
.footer-widget .textwidget,
.footer-widget li a {
	font-family: var(--tos-font-tekst);
	color: rgba(243, 236, 224, 0.82);
	font-size: 15px;
	line-height: 1.7;
}

.footer-widget h4.title {
	font-family: var(--tos-font-kop);
	color: var(--tos-creme);
	font-size: 1.1rem;
	margin-bottom: 14px;
}

.footer-widget li a:hover { color: #E7A583; }

.footer-widget .widget_nav_menu li {
	margin-bottom: 6px;
	padding-left: 0;
}

#footer-widgets .footer-widget li::before { display: none; }

#footer-bottom {
	background: none;
	padding: 30px 0;
}

#footer-info,
#footer-bottom .et-footer-links a,
#footer-bottom a {
	font-family: var(--tos-font-tekst);
	color: var(--tos-creme);
}

#footer-bottom a:hover { color: #E7A583; }

#et-footer-nav {
	background: rgba(255, 255, 255, 0.04);
	border-top: 1px solid rgba(243, 236, 224, 0.14);
}

.bottom-nav,
.bottom-nav a {
	font-family: var(--tos-font-tekst);
	color: var(--tos-creme);
	font-size: 14px;
}

.bottom-nav a:hover { color: #E7A583; }

/* ---------- Knoppen ---------- */

body .et_pb_button {
	font-family: var(--tos-font-tekst);
	font-weight: 600;
	font-size: 16px;
	letter-spacing: 0.01em;
	padding: 0.7em 1.6em !important;
	transition: filter 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

body .et_pb_button::after { display: none; }

body .et_pb_button:hover {
	filter: brightness(0.94);
	transform: translateY(-1px);
	padding: 0.7em 1.6em !important;
}

/* ---------- Blogmodule (nieuwsoverzicht) ---------- */

.et_pb_blog_grid .et_pb_post {
	background: #fff;
	border: 1px solid var(--tos-lijn);
	border-radius: var(--tos-radius-kaart);
	box-shadow: var(--tos-schaduw-kaart);
	overflow: hidden;
	padding: 0 0 24px;
	transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.et_pb_blog_grid .et_pb_post:hover {
	transform: translateY(-3px);
	box-shadow: 0 24px 40px -18px rgba(43, 38, 32, 0.24);
}

.et_pb_blog_grid .et_pb_post .entry-featured-image-url {
	display: block;
	margin: 0 0 20px;
}

.et_pb_blog_grid .et_pb_post .entry-title,
.et_pb_blog_grid .et_pb_post .post-content,
.et_pb_blog_grid .et_pb_post .post-meta {
	padding: 0 26px;
}

.et_pb_blog_grid .et_pb_post .entry-title {
	font-size: 1.3rem;
	margin-bottom: 6px;
}

.et_pb_blog_grid .et_pb_post .entry-title a { color: var(--tos-ink); }
.et_pb_blog_grid .et_pb_post .entry-title a:hover { color: var(--tos-groen); }

.et_pb_blog_grid .et_pb_post .post-meta {
	font-family: var(--tos-font-tekst);
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: #6B6459;
	margin-bottom: 10px;
}

.et_pb_blog_grid .et_pb_post .post-content p {
	font-size: 15.5px;
	line-height: 1.65;
	color: var(--tos-tekst);
}

.et_pb_blog_grid .et_pb_post .more-link {
	display: inline-block;
	margin-top: 10px;
	font-weight: 600;
	color: var(--tos-terracotta-donker);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.et_pb_blog_grid .et_pb_post .more-link:hover { color: var(--tos-groen); }

/* Losse berichtpagina's en archieven (buiten de builder om) */
.et_pb_post .entry-title a { color: var(--tos-ink); }
.pagination a, .wp-pagenavi a { color: var(--tos-terracotta-donker); }

/* ---------- Contactformulier ---------- */

.et_pb_contact_form_field input,
.et_pb_contact_form_field textarea,
.et_pb_contact_captcha_container .et_pb_contact_captcha {
	background: #fff !important;
	border: 1px solid rgba(43, 38, 32, 0.22);
	border-radius: var(--tos-radius-veld);
	padding: 14px 16px !important;
	font-size: 16px;
	color: var(--tos-ink);
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.et_pb_contact_form_field input:focus,
.et_pb_contact_form_field textarea:focus,
.et_pb_contact_captcha_container .et_pb_contact_captcha:focus {
	border-color: var(--tos-groen);
	box-shadow: 0 0 0 3px rgba(63, 90, 54, 0.18);
	outline: none;
}

.et_pb_contact_form_field input::placeholder,
.et_pb_contact_form_field textarea::placeholder {
	color: #6B6459;
	opacity: 1;
}

.et_pb_contact_form_field input.et_contact_error,
.et_pb_contact_form_field textarea.et_contact_error {
	border-color: #B3261E;
}

.et-pb-contact-message {
	font-family: var(--tos-font-tekst);
	color: var(--tos-groen);
	font-weight: 500;
}

.et-pb-contact-message ul { color: #B3261E; }

.et_pb_contact_captcha_question { color: var(--tos-ink); font-weight: 600; }

/* ---------- Accordeon (veelgestelde vragen) ---------- */

.et_pb_accordion .et_pb_toggle {
	background: #fff;
	border: 1px solid var(--tos-lijn);
	border-radius: var(--tos-radius-kaart);
	padding: 24px 28px;
	margin-bottom: 14px;
}

.et_pb_accordion .et_pb_toggle_title {
	font-size: 1.12rem;
	color: var(--tos-ink);
	position: relative;
	cursor: pointer;
}

.et_pb_accordion .et_pb_toggle_open .et_pb_toggle_title { color: var(--tos-groen); }

.et_pb_accordion .et_pb_toggle .et_pb_toggle_icon::before,
.et_pb_accordion .et_pb_toggle_title::before {
	color: var(--tos-terracotta);
}

.et_pb_accordion .et_pb_toggle_content {
	padding-top: 12px;
	font-size: 16px;
	line-height: 1.7;
	color: var(--tos-tekst);
}

/* ---------- Afbeeldingen en kaarten ---------- */

.et_pb_image a img {
	transition: transform 0.25s ease;
}

.et_pb_image a:hover img {
	transform: scale(1.02);
}

/* ---------- Toegankelijkheid ---------- */

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
.et_pb_button:focus-visible,
.et_pb_toggle_title:focus-visible {
	outline: 3px solid var(--tos-terracotta-donker);
	outline-offset: 3px;
	border-radius: 2px;
}

#main-footer a:focus-visible,
.et_pb_section[style*='3F5A36'] a:focus-visible {
	outline-color: var(--tos-creme);
}

/* ---------- Beweging ---------- */

html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
	}
}

/* ---------- Fullscreen mobiel menu ---------- */

@media (max-width: 980px) {
	/* Geen paginascroll zolang het menu open is (class via tos-design.js) */
	body.tos-menu-open { overflow: hidden; }

	.et_mobile_menu {
		position: fixed !important;
		top: var(--tos-header-h, 80px);
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 99998;
		margin: 0;
		padding: 26px 24px 44px;
		overflow-y: auto;
		overscroll-behavior: contain;
		-webkit-overflow-scrolling: touch;
		background: var(--tos-ink) !important;
		border-top: 3px solid var(--tos-terracotta);
		box-shadow: none;
	}

	.et_mobile_menu li a {
		font-family: var(--tos-font-kop);
		font-size: 1.45rem;
		font-weight: 500;
		color: var(--tos-creme) !important;
		background: none !important;
		padding: 16px 6px;
		min-height: 44px;
		border-bottom: 1px solid rgba(243, 236, 224, 0.14);
	}

	.et_mobile_menu li:last-child a { border-bottom: none; }

	.et_mobile_menu li a:hover,
	.et_mobile_menu li a:focus-visible {
		color: #E7A583 !important;
		opacity: 1;
	}

	.et_mobile_menu li a:focus-visible { outline-color: var(--tos-creme); }

	.et_mobile_menu li.current-menu-item > a,
	.et_mobile_menu li.current_page_item > a {
		color: #E7A583 !important;
	}

	.et_mobile_menu li.current-menu-item > a::after,
	.et_mobile_menu li.current_page_item > a::after {
		content: '';
		display: inline-block;
		width: 8px;
		height: 8px;
		border-radius: 50%;
		background: var(--tos-terracotta);
		margin-left: 12px;
		vertical-align: middle;
	}

	/* Hamburger wordt een sluitkruis als het menu open is */
	.mobile_nav.opened .mobile_menu_bar::before {
		content: '\4d';
		color: var(--tos-groen);
	}

	/* Grotere tap-target voor de menuknop */
	.mobile_menu_bar {
		padding: 10px;
		margin: -10px;
	}
}

/* ---------- Responsief ---------- */

/* Tablet */
@media (max-width: 980px) {
	.et_pb_blog_grid .et_pb_post { margin-bottom: 26px; }

	/* Iets bredere rijen op smallere schermen */
	.et_pb_row { width: 88%; }
}

/* Grote schermen: meer ademruimte benutten */
@media (min-width: 1600px) {
	.et_pb_row { max-width: 1200px; }
	body, .et_pb_text { font-size: 18px; }
}

/* Telefoon */
@media (max-width: 767px) {
	body, .et_pb_text { font-size: 16px; }
	.tos-stapnr { font-size: 44px; margin-bottom: 6px; }

	.et_pb_blog_grid .et_pb_post .entry-title,
	.et_pb_blog_grid .et_pb_post .post-content,
	.et_pb_blog_grid .et_pb_post .post-meta { padding: 0 20px; }

	/* Knoppen: comfortabele tap-target, niet tegen de schermrand */
	body .et_pb_button {
		padding: 0.8em 1.5em !important;
		min-height: 44px;
	}

	/* Gestapelde kolommen: consistente tussenruimte */
	.et_pb_column { margin-bottom: 8px; }
	.et_pb_column:last-child { margin-bottom: 0; }

	/* Accordeon compacter op klein scherm */
	.et_pb_accordion .et_pb_toggle { padding: 18px 20px; }

	/* Formuliervelden: 16px voorkomt inzoomen op iOS */
	.et_pb_contact_form_field input,
	.et_pb_contact_form_field textarea { font-size: 16px; }

	/* Footerwidgets onder elkaar met ruimte */
	.footer-widget { margin-bottom: 28px !important; }
}