/* ==========================================================================
   Heurnink Bouwoplossingen — huisstijl 2026 (alle pagina's)
   Wordt geladen ná het Divi-/parent-stylesheet en de Divi-cache, zodat deze
   regels winnen. !important alleen waar Divi zelf met hoge specificiteit werkt.
   ========================================================================== */

:root {
	--hn-green: #30403F;
	--hn-green-deep: #28352F;
	--hn-cream: #E7E8DD;
	--hn-cream-2: #F1F2EB;
	--hn-card: #F8F8F3;
	--hn-slate: #6B868B;
	--hn-tan: #B49163;
	--hn-tan-dk: #9C7B4F;
	--hn-sage: #7F966E;
	--hn-sage-dk: #6B8259;
	--hn-ink: #283231;
	--hn-ink-mut: #56625F;
	--hn-on-dark: #E7E8DD;
	--hn-on-dark-mut: #AEB7AF;
	--hn-font: 'Onest', system-ui, -apple-system, 'Segoe UI', sans-serif;
	/* gedeelde containerbreedte: header, footer en homepage lijnen hierop uit */
	--hn-max: 1360px;
	--hn-gutter: clamp(20px, 4vw, 56px);
	/* oude variabele uit de eigen CSS, nu in de nieuwe kleur */
	--Secondary: #30403F;
}

/* ---------- Containerbreedte (vervangt Divi's 80%) ---------- */
#main-header .container,
footer > .container {
	width: calc(100% - 2 * var(--hn-gutter)) !important;
	max-width: var(--hn-max) !important;
}

/* ---------- Typografie ---------- */
body,
body input, body textarea, body select, body button,
body h1, body h2, body h3, body h4, body h5, body h6,
body p, body li, body a,
#top-menu, #top-menu a, .et_mobile_menu a,
.et_pb_module, .et_pb_button,
.diensten__container h2, .projects__intro h3 {
	font-family: var(--hn-font) !important;
}
body { color: var(--hn-ink); -webkit-font-smoothing: antialiased; }
body h1, body h2, body h3, body h4, body h5, body h6 { color: var(--hn-green); }
#main-content { background-color: var(--hn-cream); }

/* ---------- Pijlknop uit de huisstijl ---------- */
.hn-btn,
body .et_pb_button,
.intro__right a,
.projecten-taxonomy-archive .et_pb_button {
	display: inline-flex !important;
	align-items: center;
	gap: .6em;
	padding: .95em 2.4em .95em 1.4em !important;
	font-family: var(--hn-font) !important;
	font-weight: 700 !important;
	font-size: 1rem !important;
	line-height: 1.2 !important;
	text-decoration: none;
	color: #fff !important;
	background: var(--hn-sage) !important;
	border: 0 !important;
	border-radius: 0 !important;
	clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 50%, calc(100% - 20px) 100%, 0 100%);
	transition: background .18s;
}
.hn-btn:hover,
body .et_pb_button:hover,
.intro__right a:hover { background: var(--hn-sage-dk) !important; }
.hn-btn .hn-arrow { width: 1.05em; height: 1.05em; flex: none; }
.hn-btn--tan { background: var(--hn-tan) !important; color: var(--hn-green-deep) !important; }
.hn-btn--tan:hover { background: #c4a274 !important; }
body .et_pb_button::after, body .et_pb_button::before { display: none !important; }
:focus-visible { outline: 3px solid var(--hn-tan); outline-offset: 3px; }

/* ---------- Header (Divi) ---------- */
#main-header,
#main-header.et-fixed-header {
	background-color: var(--hn-green) !important;
	box-shadow: none !important;
	border-bottom: 1px solid rgba(231, 232, 221, .1);
}
#logo { max-height: 62% !important; width: auto; }
/* spatie vóór de logolink in Divi's markup weg, zodat het logo exact op de containerrand staat */
#main-header .logo_container { font-size: 0; }
#top-menu li a,
.et-fixed-header #top-menu li a {
	color: var(--hn-on-dark) !important;
	font-weight: 500;
	opacity: 1;
}
#top-menu li a:hover { opacity: .85; }
/* "Home" als tekst in plaats van het huisje-icoon uit de oude CSS */
#top-menu li.menu-item-home > a {
	width: auto !important;
	font-size: 16px !important;
	background: none !important;
}
#top-menu li.menu-item-home { top: 0 !important; }
/* menu-items staan in kleine letters in het menu; eerste letter als hoofdletter tonen */
#top-menu > li > a::first-letter,
.et_mobile_menu > li > a::first-letter { text-transform: uppercase; }
#top-menu li.current-menu-item > a,
#top-menu li.current_page_item > a {
	text-decoration: underline;
	text-decoration-color: var(--hn-tan);
	text-decoration-thickness: 2px;
	text-underline-offset: 8px;
}
#top-menu li ul.sub-menu { background: var(--hn-green-deep); border-top-color: var(--hn-tan); }
/* pillen altijd op een eigen regel boven het menu (Divi liet ze alleen wrappen als het niet paste) */
.menu__right { flex-direction: column; align-items: flex-end; }
.tiny__menu { background: transparent; gap: 8px; padding: 0 0 6px; }
.tiny__menu a {
	color: var(--hn-on-dark) !important;
	background: rgba(231, 232, 221, .1);
	padding: 5px 12px;
	border-radius: 30px;
	font-size: 13px !important;
}
.tiny__menu a:hover { background: rgba(231, 232, 221, .18); }
#et_search_icon::before { color: var(--hn-on-dark) !important; }
.mobile_menu_bar::before,
.mobile_menu_bar::after { color: var(--hn-on-dark) !important; }
#et_mobile_nav_menu .select_page { color: var(--hn-on-dark); }
.et_mobile_menu {
	background: var(--hn-green-deep) !important;
	border-top-color: var(--hn-tan) !important;
}
.et_mobile_menu li a {
	color: var(--hn-on-dark) !important;
	border-bottom-color: rgba(231, 232, 221, .1) !important;
}
.et_mobile_menu li a:hover { background: rgba(231, 232, 221, .06) !important; opacity: 1; }

/* ---------- Eigen blokken van de site (niet-homepage) ---------- */
.diensten__container h2,
.intro__left h2,
.projects__intro h3,
.project__container__left h1 { color: var(--hn-green) !important; }
.diensten__swiper__container .swiper-button-prev,
.diensten__swiper__container .swiper-button-next { color: var(--hn-green); }
.dienst__blok { background: var(--hn-card); box-shadow: 0 6px 22px rgba(40, 53, 47, .1); }
.dienst__blok span { color: var(--hn-ink); }
.projects { background-color: var(--hn-cream-2); }
.projecten-taxonomy-archive { background-color: var(--hn-cream-2); }

/* ---------- Footer (footer.php) ---------- */
footer {
	background-color: var(--hn-green-deep);
	color: var(--hn-on-dark-mut);
	font-size: .95rem;
}
footer h1, footer h2, footer h3, footer h4, footer h5, footer h6 {
	color: var(--hn-tan) !important;
	font-weight: 600;
	font-size: 1rem;
}
footer a { color: var(--hn-on-dark-mut); }
footer a:hover { color: var(--hn-tan); }
footer table td { color: var(--hn-on-dark-mut); padding: 0 12px 0 0; border: 0; }
.footer__logo { display: block; height: 38px; width: auto; margin-bottom: 18px; }
.footer__inner li {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 10'%3E%3Cpath d='m1 1 4 4-4 4' fill='none' stroke='%23B49163' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.social__icons a {
	display: inline-grid;
	place-items: center;
	width: 32px;
	height: 32px;
	background: rgba(231, 232, 221, .08);
}
.footer__bottom {
	color: var(--hn-on-dark-mut);
	border-top: 1px solid rgba(231, 232, 221, .1);
	padding-top: 22px;
}

/* ---------- Zwevend contactblok (Guido) ---------- */
.sticky__cta__photo {
	border: 3px solid var(--hn-cream);
	box-shadow: 0 8px 26px rgba(40, 53, 47, .35);
}
.sticky__cta__container { background: var(--hn-green) !important; }
.sticky__cta__title { color: var(--hn-on-dark); }
.sticky__cta__subtitle { color: var(--hn-tan); }


/* ==========================================================================
   Divi-modules overrulen
   Divi zet per module CSS met !important (bv. .et_pb_cta_0.et_pb_promo h1).
   Met de id's #page-container / #et-main-area winnen deze regels altijd.
   ========================================================================== */

/* Onest overal, behalve icoonfonts */
#page-container *:not(.et-pb-icon):not([class*="fa-"]):not(.dashicons):not([class^="et-pb-arrow"]) {
	font-family: var(--hn-font) !important;
}

/* Knoppen: zelfde maat als de pijlknop op de homepage */
#page-container #et-main-area .et_pb_button,
#page-container #et-main-area .et_pb_button:hover,
#page-container #et-main-area .intro__right a {
	display: inline-flex !important;
	align-items: center;
	padding: .95em 2.4em .95em 1.4em !important;
	font-size: 1rem !important;
	font-weight: 700 !important;
	line-height: 1.2 !important;
	letter-spacing: 0 !important;
	color: #fff !important;
	background: var(--hn-sage) !important;
	border: 0 !important;
	border-radius: 0 !important;
}
#page-container #et-main-area .et_pb_button:hover,
#page-container #et-main-area .intro__right a:hover { background: var(--hn-sage-dk) !important; }

/* Rode kolom op Mogelijkheden (oude huisstijlkleur) wordt groen */
#page-container .page-id-31 .et_pb_column_4,
body.page-id-31 #page-container .et_pb_column_4 { background-color: var(--hn-green) !important; }
body.page-id-31 #page-container .et_pb_column_4 * { color: var(--hn-on-dark) !important; }
body.page-id-31 #page-container .et_pb_column_4 .et_pb_button { color: #fff !important; }

/* Actief menu-item altijd leesbaar, ook in de vaste (gescrolde) header */
#main-header #top-menu li.current-menu-item > a,
#main-header #top-menu li.current_page_item > a,
#main-header #top-menu li.current-menu-ancestor > a,
#main-header #top-menu li.current-menu-parent > a,
#main-header.et-fixed-header #top-menu li.current-menu-item > a,
#main-header.et-fixed-header #top-menu li.current_page_item > a,
#main-header.et-fixed-header #top-menu li.current-menu-ancestor > a,
#main-header.et-fixed-header #top-menu li.current-menu-parent > a,
#main-header #top-menu li a:hover {
	color: var(--hn-on-dark) !important;
}