/* =============================================================
   Et Vincam — globale tokens, reset, nav, footer, knoppen (theme.css)
   Designsysteem afgeleid van design/Home.dc.html.
   Pagina-specifieke styling staat in <pagina>-template.css.
   ============================================================= */

:root {
	/* Kleuren (exact uit het design) */
	--vc-green-900: #2C342B;   /* footer / donkerst */
	--vc-green-700: #3D4B3C;   /* primary groen */
	--vc-green-500: #5C6E55;   /* hero mid */
	--vc-green-400: #728164;   /* hero licht */
	--vc-brown-600: #6E5A47;   /* bruin accent */
	--vc-brown-400: #8a755f;   /* zacht bruin / eyebrow */

	--vc-cream:      #F6F2EC;   /* pagina-achtergrond */
	--vc-cream-nav:  #F9F6EF;   /* nav-achtergrond */
	--vc-cream-card: #EDE6D7;   /* crème kaart/cta-band */
	--vc-border:     #E4DCCE;   /* randen */
	--vc-border-2:   #E9E2D4;   /* kaartrand */

	--vc-text:       #2A2620;   /* koppen/tekst donker */
	--vc-body:       #564F43;   /* bodytekst */
	--vc-muted:      #6E675B;   /* gedempt */
	--vc-faint:      #9a9282;   /* labels */
	--vc-logo-gray:  #A29A89;   /* logo-tekst */
	--vc-nav-link:   #4A4438;   /* nav-links */

	--vc-on-dark:    #F7F4EC;   /* tekst op donkere vlakken */

	/* Typografie */
	--vc-font: 'Lato', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
	--vc-mono: ui-monospace, Menlo, Consolas, monospace;

	/* Layout */
	--vc-container: 1080px;
	--vc-container-wide: 1180px;
	--vc-pad-x: 44px;
}

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
	margin: 0;
	font-family: var(--vc-font);
	color: var(--vc-text);
	background: var(--vc-cream);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}
img, picture, svg, video { max-width: 100%; height: auto; display: block; }
a { color: var(--vc-green-700); text-decoration: none; }
a:hover { color: var(--vc-brown-600); }
h1, h2, h3 { margin: 0; font-weight: 300; line-height: 1.3; letter-spacing: -.01em; }
p { margin: 0; }

/* ---- Helpers ---- */
.vc-container { width: 100%; max-width: var(--vc-container); margin-inline: auto; padding-inline: var(--vc-pad-x); }
.vc-container--wide { max-width: var(--vc-container-wide); }
.vc-eyebrow {
	font-size: 12px; font-weight: 700; letter-spacing: .24em;
	text-transform: uppercase; color: var(--vc-brown-400);
}

/* ---- Knoppen ---- */
.vc-btn {
	display: inline-flex; align-items: center; justify-content: center;
	padding: 13px 26px; border-radius: 2px;
	font-family: inherit; font-size: 14px; font-weight: 700;
	border: 1px solid transparent; cursor: pointer; transition: .15s ease; text-align: center;
}
.vc-btn--primary { background: var(--vc-green-700); color: var(--vc-cream); }
.vc-btn--primary:hover { background: #34412f; color: var(--vc-cream); }
.vc-btn--light { background: var(--vc-cream); color: var(--vc-green-700); }
.vc-btn--light:hover { background: #fff; color: var(--vc-green-700); }
.vc-btn--outline-light { border-color: rgba(247,244,236,.5); color: var(--vc-on-dark); font-weight: 600; }
.vc-btn--outline-light:hover { background: rgba(247,244,236,.12); color: var(--vc-on-dark); }
.vc-btn--outline { border-color: var(--vc-green-700); color: var(--vc-green-700); }
.vc-btn--outline:hover { background: var(--vc-green-700); color: var(--vc-cream); }

/* ---- Foto-placeholder (gradient + bijschrift; later vervangbaar door <img>) ---- */
.vc-photo { position: relative; overflow: hidden; }
.vc-photo__caption {
	position: absolute; left: 16px; bottom: 12px;
	font-family: var(--vc-mono); font-size: 10px; letter-spacing: .03em;
	color: rgba(255,255,255,.62);
}
.vc-photo--forest { background: linear-gradient(160deg,#3D4B3C 0%,#5C6E55 70%,#728164 100%); }
.vc-photo--brown  { background: linear-gradient(150deg,#6E5A47,#8a755f); }
.vc-photo--water  { background: linear-gradient(150deg,#5E7178,#7d9098); }
.vc-photo--green  { background: linear-gradient(150deg,#5C6E55,#93A088); }

/* =====================  NAVIGATIE  ===================== */
.vc-nav {
	display: flex; align-items: center; justify-content: space-between;
	padding: 20px 48px; border-bottom: 1px solid var(--vc-border);
	background: var(--vc-cream-nav);
}
.vc-nav__brand { display: flex; align-items: center; gap: 14px; color: var(--vc-green-700); }
.vc-nav__logo { height: 44px; width: auto; }
.vc-nav__brandtext { display: flex; flex-direction: column; }
.vc-nav__wordmark { font-size: 18px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; line-height: 1.15; }
.vc-nav__sub { font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase; color: var(--vc-brown-400); line-height: 1.3; }
.vc-nav__links { display: flex; align-items: center; gap: 26px; font-size: 14px; }
.vc-nav__link { color: var(--vc-nav-link); }
.vc-nav__link:hover { color: var(--vc-green-700); }
.vc-nav__link.is-active { color: var(--vc-green-700); font-weight: 700; }
.vc-nav__cta { padding: 9px 18px; background: var(--vc-green-700); color: var(--vc-cream); border-radius: 2px; font-weight: 700; }
.vc-nav__cta:hover { background: #34412f; color: var(--vc-cream); }

/* WordPress-menu (wp_nav_menu) — zelfde look als de statische links.
   Zet in Weergave → Menu's op het Contact-item de CSS-klasse 'vc-nav__cta' voor de knop-stijl. */
.vc-nav__menu { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 26px; font-size: 14px; }
.vc-nav__menu a { color: var(--vc-nav-link); }
.vc-nav__menu a:hover { color: var(--vc-green-700); }
.vc-nav__menu .current-menu-item > a,
.vc-nav__menu .current_page_item > a,
.vc-nav__menu .current-menu-ancestor > a { color: var(--vc-green-700); font-weight: 700; }
.vc-nav__menu li.vc-nav__cta > a { padding: 9px 18px; background: var(--vc-green-700); color: var(--vc-cream); border-radius: 2px; font-weight: 700; }
.vc-nav__menu li.vc-nav__cta > a:hover { background: #34412f; color: var(--vc-cream); }
.vc-nav__menu li.vc-nav__cta.current-menu-item > a { color: var(--vc-cream); }

/* =====================  FOOTER  ===================== */
.vc-footer {
	background: var(--vc-green-900); color: rgba(247,244,236,.62);
	padding: 34px 48px; display: flex; justify-content: space-between; align-items: center;
	font-size: 12.5px; flex-wrap: wrap; gap: 12px;
}
.vc-footer__brand { font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--vc-cream); }

/* =====================  RESPONSIVE (globaal)  ===================== */
@media (max-width: 860px) {
	:root { --vc-pad-x: 24px; }
	.vc-nav { padding: 16px 24px; flex-wrap: wrap; gap: 14px; }
	.vc-nav__links { gap: 18px; font-size: 13px; flex-wrap: wrap; }
	.vc-footer { padding: 26px 24px; }
}
@media (max-width: 560px) {
	.vc-nav__links { width: 100%; justify-content: flex-start; }
	.vc-footer { flex-direction: column; align-items: flex-start; text-align: left; }
}