/**
 * Zuur Hekwerken - donker thema
 *
 * Dit bestand wordt als laatste stylesheet geladen en zet de bestaande
 * lichte website om naar zwart/antraciet + donkergroen met #C0AF9A
 * als enige lichte basiskleur.
 */

/* ==========================================================
   1. ALGEMENE BASIS
   ========================================================== */

html,
body,
#page,
.site,
.zh-main,
main {
  background: var(--zh-color-black) !important;
  color: var(--zh-color-text) !important;
}

body,
p,
li,
dd,
dt,
label,
small {
  color: var(--zh-color-text);
}

h1,
h2,
h3,
h4,
h5,
h6,
.zh-card h2,
.zh-card h3,
.zh-card h4 {
  color: var(--zh-color-light) !important;
}

a:hover,
a:focus-visible {
  color: var(--zh-color-green-bright);
}

::selection {
  background: var(--zh-color-green-bright);
  color: var(--zh-color-black);
}

:focus-visible {
  outline: 3px solid var(--zh-color-green-bright);
  outline-offset: 3px;
}

/* ==========================================================
   2. HEADER EN NAVIGATIE
   ========================================================== */

.zh-header {
  background: rgba(13,15,14,.97) !important;
  border-bottom: 1px solid rgba(85,207,72,.22) !important;
  box-shadow: 0 12px 32px rgba(0,0,0,.28) !important;
}

.zh-logo__text,
.zh-nav__list > li > a,
.zh-nav__list .sub-menu a,
.zh-nav-toggle {
  color: var(--zh-color-light) !important;
}

.zh-nav__list > li > a::after {
  background: var(--zh-color-green-bright) !important;
}

.zh-nav__list > li > a:hover,
.zh-nav__list > li > a:focus-visible,
.zh-nav__list .current-menu-item > a,
.zh-nav__list .current-menu-ancestor > a,
.zh-nav__list .current_page_item > a,
.zh-nav__list .current_page_parent > a,
.zh-nav__list a[aria-current="page"] {
  color: var(--zh-color-green-bright) !important;
}

.zh-nav__list .sub-menu {
  background: var(--zh-color-anthracite) !important;
  border-color: rgba(192,175,154,.18) !important;
  box-shadow: 0 18px 42px rgba(0,0,0,.42) !important;
}

.zh-nav__list .sub-menu a:hover,
.zh-nav__list .sub-menu a:focus-visible {
  background: var(--zh-color-green-dark) !important;
  color: var(--zh-color-green-bright) !important;
}

.zh-signpost__brand:focus-visible {
  outline-color: var(--zh-color-green-bright) !important;
}

/* ==========================================================
   3. KNOPPEN
   ========================================================== */

.zh-button--primary,
button.zh-button--primary,
input[type="submit"],
button[type="submit"] {
  background: var(--zh-color-green-bright) !important;
  border-color: var(--zh-color-green-bright) !important;
  color: var(--zh-color-black) !important;
}

.zh-button--primary:hover,
.zh-button--primary:focus-visible,
input[type="submit"]:hover,
input[type="submit"]:focus-visible,
button[type="submit"]:hover,
button[type="submit"]:focus-visible {
  background: #69DE5D !important;
  border-color: #69DE5D !important;
  color: var(--zh-color-black) !important;
}

.zh-button--secondary {
  background: transparent !important;
  border: 1px solid rgba(192,175,154,.58) !important;
  color: var(--zh-color-light) !important;
}

.zh-button--secondary:hover,
.zh-button--secondary:focus-visible {
  background: var(--zh-color-green-dark) !important;
  border-color: var(--zh-color-green-bright) !important;
  color: var(--zh-color-green-bright) !important;
}

.zh-button--light {
  background: var(--zh-color-light) !important;
  color: var(--zh-color-black) !important;
}

/* ==========================================================
   4. HERO'S EN SECTIES
   ========================================================== */

.zh-hero,
.zh-page-hero,
.zh-product-hero,
.zh-product-landing-hero,
.zh-projects-hero,
.zh-contact-page,
.zh-contact-hero {
  background: var(--zh-color-black) !important;
  color: var(--zh-color-text) !important;
}

.zh-hero {
  background:
    radial-gradient(circle at 74% 24%, rgba(47,85,56,.24), transparent 34%),
    linear-gradient(135deg, #0D0F0E 0%, #151B17 55%, #101411 100%) !important;
}

.zh-page-hero,
.zh-product-hero,
.zh-product-landing-hero,
.zh-projects-hero,
.zh-contact-hero {
  background:
    radial-gradient(circle at 82% 18%, rgba(85,207,72,.10), transparent 30%),
    var(--zh-color-black) !important;
}

.zh-section {
  background: var(--zh-color-black);
  color: var(--zh-color-text);
}

.zh-section--muted,
.zh-section--process-light {
  background: var(--zh-color-anthracite) !important;
  color: var(--zh-color-text) !important;
}

.zh-section--dark,
.zh-section--collection-dark {
  background: var(--zh-color-dark) !important;
  color: var(--zh-color-text) !important;
}

.zh-section--dark h2,
.zh-section--dark h3,
.zh-section--collection-dark h2,
.zh-section--collection-dark h3 {
  color: var(--zh-color-light) !important;
}

.zh-trustbar {
  background: var(--zh-color-green-dark) !important;
  color: var(--zh-color-light) !important;
  border-top: 1px solid rgba(85,207,72,.20);
  border-bottom: 1px solid rgba(85,207,72,.20);
}

.zh-trustbar span {
  color: var(--zh-color-light) !important;
}

.zh-eyebrow,
.zh-section--collection-dark .zh-eyebrow {
  color: var(--zh-color-green-bright) !important;
}

/* ==========================================================
   5. CARDS, COLLECTIE EN PRODUCTOVERZICHTEN
   ========================================================== */

.zh-card,
.zh-section--collection-dark .zh-card--category,
.zh-project-overview-card__link,
.zh-product-landing-hero__facts > div,
.zh-category-link,
.zh-step,
.zh-section--process-light .zh-step,
.zh-specs,
.zh-review,
.zh-notice {
  background: var(--zh-color-surface) !important;
  color: var(--zh-color-text) !important;
  border-color: rgba(192,175,154,.14) !important;
  box-shadow: 0 14px 34px rgba(0,0,0,.20);
}

.zh-card:hover,
.zh-card:focus-within,
.zh-card--clickable:hover,
.zh-card--clickable:focus-visible,
.zh-project-overview-card__link:hover,
.zh-project-overview-card__link:focus-visible,
.zh-category-link[href]:hover,
.zh-category-link[href]:focus-visible {
  border-color: rgba(85,207,72,.55) !important;
  box-shadow: 0 18px 42px rgba(0,0,0,.36) !important;
}

.zh-card p,
.zh-card li,
.zh-card__body p,
.zh-project-overview-card__body p,
.zh-category-link span,
.zh-product-landing-hero__facts span,
.zh-section--process-light .zh-step p {
  color: var(--zh-color-text-soft) !important;
}

.zh-card h2,
.zh-card h3,
.zh-card__body h3,
.zh-project-overview-card__body h2,
.zh-category-link strong,
.zh-product-landing-hero__facts strong,
.zh-section--process-light .zh-step h3 {
  color: var(--zh-color-light) !important;
}

.zh-text-link,
.zh-card--clickable .zh-text-link,
.zh-section--collection-dark .zh-card--category .zh-text-link {
  color: var(--zh-color-green-bright) !important;
}

.zh-card--clickable:hover .zh-text-link,
.zh-card--clickable:focus-visible .zh-text-link {
  color: #69DE5D !important;
}

.zh-card__media,
.zh-card__image,
.zh-project-overview-card__media,
.zh-project-overview-card__placeholder {
  background: linear-gradient(135deg, #202722, #2E3C32) !important;
}

.post-type-archive-projecten .zh-card--product .zh-card__body {
  background: var(--zh-color-surface) !important;
}

.zh-card-meta,
.zh-project-overview-card__meta,
.zh-review__footer {
  color: var(--zh-color-text-muted) !important;
}

/* ==========================================================
   6. WERKWIJZE
   ========================================================== */

.zh-step__icon {
  background: var(--zh-color-green-dark) !important;
  border-radius: 10px;
}

.zh-step__icon-placeholder {
  border-color: var(--zh-color-green-bright) !important;
  background: linear-gradient(135deg, rgba(85,207,72,.12), rgba(47,85,56,.28)) !important;
}

.zh-step__icon-placeholder::before,
.zh-step__icon-placeholder::after {
  background: var(--zh-color-green-bright) !important;
}

/* ==========================================================
   7. CTA-BLOKKEN
   ========================================================== */

.zh-cta,
.zh-home-offer-cta,
.zh-contact-bottom {
  background: var(--zh-color-green-forest) !important;
  color: var(--zh-color-light) !important;
  border-top: 1px solid rgba(85,207,72,.18);
  border-bottom: 1px solid rgba(85,207,72,.18);
}

.zh-cta h2,
.zh-home-offer-cta h2,
.zh-contact-bottom h2,
.zh-cta p,
.zh-home-offer-cta p,
.zh-contact-bottom p {
  color: var(--zh-color-light) !important;
}

/* ==========================================================
   8. PRODUCTPAGINA'S
   ========================================================== */

.zh-product-hero img {
  box-shadow: 0 20px 50px rgba(0,0,0,.34);
}

.zh-specs dl div {
  border-color: rgba(192,175,154,.12) !important;
}

.zh-specs dt {
  color: var(--zh-color-green-bright) !important;
}

.zh-specs dd {
  color: var(--zh-color-light) !important;
}

.zh-product-landing-hero__facts {
  background: rgba(85,207,72,.15) !important;
  border-color: rgba(85,207,72,.20) !important;
}

.zh-hekwerk-advice__copy p {
  color: var(--zh-color-text-soft) !important;
}

/* ==========================================================
   9. PROJECTEN
   ========================================================== */

.zh-projects-hero__panel {
  background: var(--zh-color-green-dark) !important;
  color: var(--zh-color-light) !important;
  border: 1px solid rgba(85,207,72,.20);
}

.zh-projects-hero__panel p,
.zh-projects-hero__panel strong {
  color: var(--zh-color-light) !important;
}

.zh-filter-chip {
  background: var(--zh-color-surface) !important;
  border-color: rgba(192,175,154,.20) !important;
  color: var(--zh-color-light) !important;
}

.zh-filter-chip:hover,
.zh-filter-chip:focus-visible,
.zh-filter-chip.is-active {
  background: var(--zh-color-green-bright) !important;
  border-color: var(--zh-color-green-bright) !important;
  color: var(--zh-color-black) !important;
}

/* ==========================================================
   10. CONTACTPAGINA
   ========================================================== */

.zh-contact-card,
.zh-contact-form-wrap,
.zh-contact-quick {
  background: var(--zh-color-surface) !important;
  border-color: rgba(192,175,154,.14) !important;
  box-shadow: 0 18px 44px rgba(0,0,0,.24) !important;
}

.zh-contact-detail {
  border-color: rgba(192,175,154,.12) !important;
}

.zh-contact-detail__label {
  color: var(--zh-color-green-bright) !important;
}

.zh-contact-detail a {
  color: var(--zh-color-light) !important;
}

.zh-contact-detail a:hover {
  color: var(--zh-color-green-bright) !important;
}

.zh-contact-appointment {
  border-left-color: var(--zh-color-green-bright) !important;
  background: var(--zh-color-green-dark) !important;
  color: var(--zh-color-light) !important;
}

.zh-contact-quick {
  background: var(--zh-color-green-dark) !important;
  color: var(--zh-color-light) !important;
}

.zh-contact-quick h3 {
  color: var(--zh-color-light) !important;
}

.zh-contact-quick .zh-button--secondary {
  border-color: rgba(192,175,154,.58) !important;
  color: var(--zh-color-light) !important;
}

/* ==========================================================
   11. FORMINATOR EN FORMULIEREN
   ========================================================== */

.zh-forminator-shell .forminator-label,
.forminator-ui .forminator-label,
.forminator-ui label {
  color: var(--zh-color-light) !important;
}

.zh-forminator-shell .forminator-input,
.zh-forminator-shell .forminator-textarea,
.zh-forminator-shell .forminator-select2 + .forminator-select .selection .select2-selection,
.forminator-ui input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
.forminator-ui textarea,
.forminator-ui select {
  background: var(--zh-color-anthracite) !important;
  border-color: rgba(192,175,154,.30) !important;
  color: var(--zh-color-light) !important;
  box-shadow: none !important;
}

.zh-forminator-shell .forminator-input::placeholder,
.zh-forminator-shell .forminator-textarea::placeholder,
.forminator-ui input::placeholder,
.forminator-ui textarea::placeholder {
  color: var(--zh-color-text-muted) !important;
  opacity: 1;
}

.zh-forminator-shell .forminator-input:focus,
.zh-forminator-shell .forminator-textarea:focus,
.forminator-ui input:focus,
.forminator-ui textarea:focus,
.forminator-ui select:focus {
  border-color: var(--zh-color-green-bright) !important;
  box-shadow: 0 0 0 3px rgba(85,207,72,.14) !important;
}

.zh-forminator-shell .forminator-button-submit,
.forminator-ui .forminator-button-submit {
  background: var(--zh-color-green-bright) !important;
  color: var(--zh-color-black) !important;
}

.zh-forminator-shell .forminator-button-submit:hover,
.zh-forminator-shell .forminator-button-submit:focus,
.forminator-ui .forminator-button-submit:hover,
.forminator-ui .forminator-button-submit:focus {
  background: #69DE5D !important;
  color: var(--zh-color-black) !important;
}

.zh-forminator-shell a,
.forminator-ui a {
  color: var(--zh-color-green-bright) !important;
}

.zh-contact-form-error {
  background: #321B1B !important;
  border-left-color: #D26868 !important;
  color: var(--zh-color-light) !important;
}

/* ==========================================================
   12. REVIEWS EN MELDINGEN
   ========================================================== */

.zh-review {
  border-left-color: var(--zh-color-green-bright) !important;
}

.zh-review__score,
.zh-review__footer a {
  color: var(--zh-color-green-bright) !important;
}

.zh-review__footer strong {
  color: var(--zh-color-light) !important;
}

.zh-notice {
  border-left-color: var(--zh-color-green-bright) !important;
}

/* ==========================================================
   13. FOOTER
   ========================================================== */

.zh-footer {
  background: #080A09 !important;
  color: var(--zh-color-text-soft) !important;
  border-top: 1px solid rgba(85,207,72,.18);
}

.zh-footer,
.zh-footer p,
.zh-footer li,
.zh-footer address {
  color: var(--zh-color-text-soft) !important;
}

.zh-footer__heading {
  color: var(--zh-color-light) !important;
}

.zh-footer a {
  color: var(--zh-color-light) !important;
}

.zh-footer a:hover,
.zh-footer a:focus-visible {
  color: var(--zh-color-green-bright) !important;
}

.zh-footer__bottom {
  border-top-color: rgba(192,175,154,.14) !important;
}

/* ==========================================================
   14. WORDPRESS / BLOCKSY RESTWAARDEN
   ========================================================== */

.entry-content,
.site-main,
.ct-container-full,
.ct-container {
  color: var(--zh-color-text);
}

hr {
  border-color: rgba(192,175,154,.15);
}

table,
th,
td {
  border-color: rgba(192,175,154,.15) !important;
}

th {
  color: var(--zh-color-green-bright);
}

td {
  color: var(--zh-color-text);
}

/* ==========================================================
   15. RESPONSIVE / TOEGANKELIJKHEID
   ========================================================== */

@media (max-width: 999px) {
  .zh-nav {
    background: var(--zh-color-black);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition: none !important;
    animation: none !important;
  }
}


/* ==========================================================
   404 - DEZE POORT IS GESLOTEN
   ========================================================== */

.zh-404-page {
	background:
		radial-gradient(circle at 50% 0%, rgba(36, 73, 46, 0.32), transparent 42%),
		#0D0F0E;
	color: #C0AF9A;
}

.zh-404-hero {
	min-height: 70vh;
	display: flex;
	align-items: center;
	padding: clamp(4.5rem, 9vw, 8rem) 0;
}

.zh-404-card {
	width: min(100%, 860px);
	margin: 0 auto;
	padding: clamp(2rem, 5vw, 4rem);
	text-align: center;
	background: linear-gradient(145deg, #18201B 0%, #101411 100%);
	border: 1px solid rgba(192, 175, 154, 0.16);
	border-radius: 18px;
	box-shadow: 0 28px 80px rgba(0, 0, 0, 0.35);
}

.zh-404-card .zh-eyebrow {
	margin-bottom: 0.75rem;
	color: #55CF48;
}

.zh-404-code {
	margin: 0;
	font-size: clamp(5rem, 16vw, 10rem);
	font-weight: 900;
	line-height: 0.88;
	letter-spacing: -0.075em;
	color: rgba(85, 207, 72, 0.12);
	user-select: none;
}

.zh-404-card h1 {
	max-width: 720px;
	margin: -0.05em auto 1rem;
	color: #C0AF9A;
	font-size: clamp(2.4rem, 6vw, 4.75rem);
}

.zh-404-lead {
	max-width: 620px;
	margin: 0 auto;
	color: rgba(192, 175, 154, 0.78);
	font-size: clamp(1rem, 2vw, 1.2rem);
}

.zh-404-actions {
	display: flex;
	justify-content: center;
	margin-top: 2rem;
}

.zh-404-search {
	max-width: 650px;
	margin: 3rem auto 0;
	padding-top: 2.25rem;
	border-top: 1px solid rgba(192, 175, 154, 0.12);
}

.zh-404-search h2 {
	margin-bottom: 1rem;
	color: #C0AF9A;
	font-size: clamp(1.25rem, 3vw, 1.65rem);
}

.zh-404-search__form {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 0.75rem;
}

.zh-404-search__input {
	width: 100%;
	min-height: 50px;
	padding: 0.85rem 1rem;
	border: 1px solid rgba(192, 175, 154, 0.24);
	border-radius: 6px;
	outline: 0;
	background: #0D0F0E;
	color: #C0AF9A;
	font: inherit;
}

.zh-404-search__input::placeholder {
	color: rgba(192, 175, 154, 0.48);
}

.zh-404-search__input:focus {
	border-color: #55CF48;
	box-shadow: 0 0 0 3px rgba(85, 207, 72, 0.13);
}

.zh-404-search__button {
	min-height: 50px;
}

.zh-404-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.55rem 1rem;
	margin-top: 1.5rem;
}

.zh-404-links a {
	color: rgba(192, 175, 154, 0.72);
	text-decoration: none;
	border-bottom: 1px solid rgba(85, 207, 72, 0.25);
}

.zh-404-links a:hover,
.zh-404-links a:focus-visible {
	color: #55CF48;
	border-bottom-color: #55CF48;
}

@media (max-width: 640px) {
	.zh-404-search__form {
		grid-template-columns: 1fr;
	}

	.zh-404-search__button {
		width: 100%;
	}

	.zh-404-card {
		text-align: left;
	}

	.zh-404-code {
		text-align: center;
	}

	.zh-404-card h1,
	.zh-404-lead {
		margin-left: 0;
		margin-right: 0;
	}

	.zh-404-actions {
		justify-content: flex-start;
	}

	.zh-404-links {
		justify-content: flex-start;
	}
}


/* ==========================================================
   ALGEMENE VOORWAARDEN
   ========================================================== */

.zh-legal-page {
	background: #0D0F0E;
	color: #C0AF9A;
}

.zh-legal-hero {
	padding: clamp(4rem, 8vw, 7rem) 0 clamp(2.5rem, 5vw, 4rem);
	background:
		radial-gradient(circle at 50% 0%, rgba(36, 73, 46, 0.28), transparent 48%),
		#0D0F0E;
	border-bottom: 1px solid rgba(192, 175, 154, 0.10);
}

.zh-legal-hero h1 {
	max-width: 900px;
	margin-bottom: 1rem;
	color: #C0AF9A;
}

.zh-legal-intro {
	max-width: 760px;
	color: rgba(192, 175, 154, 0.76);
	font-size: 1.08rem;
}

.zh-legal-content {
	padding: clamp(3rem, 7vw, 6rem) 0;
}

.zh-legal-article {
	max-width: 920px;
	margin: 0 auto;
	padding: clamp(1.5rem, 4vw, 3rem);
	background: #171D19;
	border: 1px solid rgba(192, 175, 154, 0.14);
	border-radius: 14px;
	box-shadow: 0 20px 50px rgba(0, 0, 0, 0.22);
}

.zh-legal-article > h1 {
	display: none;
}

.zh-legal-article h2 {
	margin-top: 2.4rem;
	margin-bottom: 1rem;
	padding-bottom: 0.65rem;
	color: #55CF48;
	font-size: clamp(1.25rem, 2.3vw, 1.6rem);
	border-bottom: 1px solid rgba(85, 207, 72, 0.16);
}

.zh-legal-article h2:first-of-type {
	margin-top: 0;
}

.zh-legal-article p,
.zh-legal-article li {
	color: rgba(192, 175, 154, 0.84);
	line-height: 1.75;
}

.zh-legal-article p {
	margin: 0 0 1rem;
}

.zh-legal-article ul {
	margin: 0.5rem 0 1.25rem 1.25rem;
	padding: 0;
}

.zh-legal-article li + li {
	margin-top: 0.35rem;
}

@media (max-width: 640px) {
	.zh-legal-article {
		padding: 1.25rem;
		border-radius: 10px;
	}
}