/*
 * Hillezon theme — sharp, clean layer on top of the Neve export, in the colours of the logo
 * (yellow / orange / red / purple sun stripes). Previous green version: hillezon.groen-backup.css.
 * Loaded from includes/header.php, after all of Neve's own styles, so it wins on equal specificity.
 * Change the palette here; everything below uses these tokens.
 * Design rules: square corners, 1px hairlines instead of shadows, solid colour instead of gradients.
 */
:root {
	/* logo colours */
	--hz-yellow: #ffde00;
	--hz-orange: #f39200;
	--hz-red: #e62f2a;
	--hz-purple: #961b81;
	--hz-purple-dark: #74145f;
	/* neutrals */
	--hz-dark: #1f1d1a;
	--hz-cream: #fff8dc;
	--hz-mist: #f8f6f1;
	--hz-line: #e8e2d6;
	--hz-ink: #22201c;
	--hz-muted: #5f5a52;
	/* the four logo stripes as hard-edged bands */
	--hz-stripes: linear-gradient(90deg, var(--hz-yellow) 0 25%, var(--hz-orange) 25% 50%, var(--hz-red) 50% 75%, var(--hz-purple) 75% 100%);
	--hz-radius: 0;
	--hz-radius-sm: 0;
	--hz-accent: 3px;

	/* Neve tokens, re-pointed at the green palette */
	--nv-primary-accent: var(--hz-purple);
	--nv-secondary-accent: var(--hz-purple-dark);
	--nv-text-color: var(--hz-ink);
	--nv-light-bg: var(--hz-mist);
	--nv-dark-bg: var(--hz-dark);
	--primarybtnbg: var(--hz-purple);
	--primarybtncolor: #fff;
	--primarybtnhoverbg: var(--hz-dark);
	--primarybtnhovercolor: #fff;
	--secondarybtnbg: #fff;
	--secondarybtncolor: var(--hz-dark);
	--secondarybtnhoverbg: var(--hz-cream);
	--secondarybtnhovercolor: var(--hz-dark);
	--primarybtnborderradius: 0;
	--secondarybtnborderradius: 0;
	--btnpadding: 14px 26px;
	--primarybtnpadding: 14px 26px;
	--secondarybtnpadding: 14px 26px;
	--btnfs: 15px;
	--bodyfontfamily: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
	--bodyfontsize: 16px;
	--bodylineheight: 1.7em;
	--headingsfontfamily: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
	--h1fontsize: 44px;
	--h1fontweight: 700;
	--h1letterspacing: -0.03em;
	--h1lineheight: 1.1em;
	--h2fontsize: 32px;
	--h2fontweight: 700;
	--h2letterspacing: -0.025em;
	--h2lineheight: 1.2em;
	--h3fontsize: 20px;
	--h3fontweight: 700;
	--h3letterspacing: -0.015em;
	--formfieldbordercolor: var(--hz-line);
	--formfieldborderradius: 0;
}
@media (max-width: 768px) {
	:root { --h1fontsize: 32px; --h2fontsize: 26px; --h3fontsize: 19px; }
}

/* ---------- Base ---------- */
body {
	background: #fff;
	color: var(--hz-ink);
	-webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6 { color: var(--hz-dark); font-family: var(--headingsfontfamily); }
::selection { background: var(--hz-yellow); color: var(--hz-dark); }
.entry-content a:not(.wp-element-button):not(.wp-block-file__button),
.nv-sidebar-wrap a {
	color: var(--hz-purple);
	text-decoration: underline;
	text-decoration-color: rgba(150, 27, 129, .35);
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
	transition: color .12s, text-decoration-color .12s;
}
.entry-content a:not(.wp-element-button):not(.wp-block-file__button):hover,
.nv-sidebar-wrap a:hover { color: var(--hz-purple-dark); text-decoration-color: currentColor; }
:focus-visible { outline: 2px solid var(--hz-orange); outline-offset: 2px; }
/* No rounded corners anywhere by default */
.button, .wp-block-button__link, .wp-block-file__button,
input, select, textarea, .wp-block-search__input { border-radius: 0 !important; }

/* ---------- Header ---------- */
.header { position: sticky; top: 0; z-index: 100; }
.header-main {
	--bgcolor: #fff;
	--rowbcolor: var(--hz-line);
}
.header .header-main-inner {
	background: #fff;
	border-bottom: 1px solid var(--hz-line);
}
/* the four logo stripes across the very top of the site */
.header::before {
	content: "";
	display: block;
	height: 4px;
	background: var(--hz-stripes);
}
.builder-item--logo { --maxwidth: 38px; --padding: 14px 0; }
.header .logo-on-top {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 12px;
	text-align: left;
}
.header .nv-title-tagline-wrap { display: flex; flex-direction: column; line-height: 1.2; }
.header .site-title {
	margin: 0;
	font-family: var(--headingsfontfamily);
	font-size: 19px;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--hz-dark);
}
.header .nv-title-tagline-wrap small {
	margin-top: 2px;
	font-size: 11.5px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: var(--hz-purple);
}

/* Desktop menu */
.nav-menu-primary .primary-menu-ul > li > .wrap > a {
	position: relative;
	padding: 8px 0;
	font-size: 15px;
	font-weight: 500;
	text-transform: none;
	letter-spacing: 0;
	color: var(--hz-ink);
	transition: color .12s;
}
.menu-desktop > li > .wrap > a::after {
	content: "";
	position: absolute;
	left: 0; right: 0; bottom: -2px;
	height: 2px;
	background: var(--hz-orange);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .18s ease;
}
.nav-menu-primary .primary-menu-ul > li > .wrap > a:hover,
.nav-menu-primary .primary-menu-ul > li.nv-active > .wrap > a,
.nav-menu-primary .primary-menu-ul > li.current_page_parent > .wrap > a { color: var(--hz-purple); }
.menu-desktop > li > .wrap > a:hover::after,
.menu-desktop > li.nv-active > .wrap > a::after,
.menu-desktop > li.current_page_parent > .wrap > a::after { transform: scaleX(1); }
.nav-menu-primary { --activecolor: var(--hz-purple); --hovercolor: var(--hz-purple); --color: var(--hz-ink); }

.header .button.button-primary {
	padding: 11px 20px;
	font-weight: 600;
	background: var(--hz-purple);
	color: #fff;
	box-shadow: none;
	transition: background .12s;
}
.header .button.button-primary:hover { background: var(--hz-dark); color: #fff; }

.header .button.button-primary { white-space: nowrap; }
.menu-desktop { flex-wrap: nowrap; }
.menu-desktop > li > .wrap > a { white-space: nowrap; }
@media (min-width: 960px) and (max-width: 1199px) {
	.header .nv-title-tagline-wrap small { display: none; }
	.nav-menu-primary .primary-menu-ul > li > .wrap > a { font-size: 14px; }
	.nav-menu-primary { --spacing: 16px; }
	.header .button.button-primary { padding: 10px 16px; font-size: 14px; }
}

@media (max-width: 480px) {
	.header .nv-title-tagline-wrap small { display: none; }
	.home .entry-content > .wp-block-cover:first-child > .wp-block-cover__inner-container { padding: 36px 20px 28px; }
}

/* Mobile toggle + slide-in panel */
.builder-item--nav-icon .navbar-toggle { --color: var(--hz-dark); color: var(--hz-dark); border-radius: 0; }
.header-menu-sidebar-bg { --bgcolor: #fff; }
.header-menu-sidebar .menu-mobile > li { border-bottom: 1px solid var(--hz-line); }
.header-menu-sidebar .menu-mobile > li > .wrap > a { display: block; padding: 14px 4px; font-size: 17px; }
.header-menu-sidebar .button.button-primary { margin-top: 12px; }

/* ---------- Buttons ---------- */
.wp-block-button__link,
.wp-block-file__button,
.button {
	font-weight: 600;
	letter-spacing: 0;
	box-shadow: none !important;
	transition: background-color .12s, color .12s, border-color .12s;
}
.wp-block-button.is-style-primary .wp-block-button__link,
.wp-block-button:not([class*="is-style-"]) .wp-block-button__link:not(.has-background) {
	background: var(--hz-purple);
	color: #fff;
	border: 1.5px solid var(--hz-purple);
}
.wp-block-button.is-style-primary .wp-block-button__link:hover { background: var(--hz-dark); border-color: var(--hz-dark); }
.wp-block-button.is-style-secondary .wp-block-button__link {
	background: #fff;
	color: var(--hz-dark);
	border: 1.5px solid var(--hz-dark);
}
.wp-block-button.is-style-secondary .wp-block-button__link:hover { background: var(--hz-cream); }
/* The orange "IKC Vossepark" call-to-action keeps the logo orange, with dark text for contrast */
.wp-block-button__link[style*="#f39200"] {
	background-color: var(--hz-orange) !important;
	border: 1.5px solid var(--hz-orange);
	color: var(--hz-dark) !important;
}
.wp-block-button__link[style*="#f39200"]:hover { background-color: var(--hz-yellow) !important; border-color: var(--hz-yellow); }
.wp-block-file__button {
	background: var(--hz-purple) !important;
	color: #fff !important;
	padding: 8px 18px !important;
}
.wp-block-file__button:hover { background: var(--hz-dark) !important; }

/* ---------- Home: hero ---------- */
.home .entry-content > .wp-block-cover:first-child {
	min-height: 620px !important;
	padding: 64px 16px;
}
.home .entry-content > .wp-block-cover:first-child::after {
	/* darken the bottom edge slightly so the white panel stands out */
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(31, 29, 26, .18);
	pointer-events: none;
	z-index: 0;
}
.home .entry-content > .wp-block-cover:first-child > .wp-block-cover__inner-container {
	position: relative;
	z-index: 1;
	width: min(760px, 100%);
	padding: 48px 44px 44px;
	background: #fff;
	border-top: 4px solid transparent;
	border-image: var(--hz-stripes) 1;
}
.home .entry-content > .wp-block-cover:first-child .wp-block-spacer { display: none; }
.home .entry-content > .wp-block-cover:first-child h1 { margin: 0 0 8px; }
.home .entry-content > .wp-block-cover:first-child h1 img { width: 100% !important; max-width: 600px; height: auto; border-radius: 0; }
.home .entry-content > .wp-block-cover:first-child p { margin: 0 0 28px; }
.home .entry-content > .wp-block-cover:first-child p img { max-width: 100%; height: auto; border-radius: 0; }
.home .entry-content > .wp-block-cover:first-child .wp-block-buttons { gap: 10px; }

/* ---------- Home: Samen / Lokaal / Energie cards ---------- */
.wp-block-columns:has(.icon-style) { gap: 0; }
.wp-block-column:has(.icon-style) {
	position: relative;
	padding: 36px 32px 24px;
	background: #fff;
	border: 1px solid var(--hz-line);
	border-top: var(--hz-accent) solid var(--hz-orange);
	transition: background-color .15s;
}
.wp-block-column:has(.icon-style):nth-child(3n+2) { border-top-color: var(--hz-red); }
.wp-block-column:has(.icon-style):nth-child(3n+3) { border-top-color: var(--hz-purple); }
/* cards share borders so the row reads as one crisp strip */
.wp-block-column:has(.icon-style) + .wp-block-column:has(.icon-style) { border-left: 0; }
.wp-block-column:has(.icon-style):hover { background: var(--hz-mist); }
/* The old WordPress custom CSS in every page head gives .icon-style images a coloured
   background; icons are transparent PNGs, so let the card show through. */
.icon-style img { background: transparent !important; }
.wp-block-column:has(.icon-style) figure { margin-bottom: 12px; }
.wp-block-column:has(.icon-style) figure img {
	width: 72px;
	height: auto;
	border-radius: 0;
}
.wp-block-column:has(.icon-style) h3 { margin-bottom: 8px; }
.wp-block-column:has(.icon-style) > .wp-block-spacer { display: none; }
.home .entry-content > .wp-block-spacer:last-child { height: 72px !important; }
.home .neve-main, .home .nv-single-page-wrap { padding-bottom: 0; margin-bottom: 0; }
.wp-block-column:has(.icon-style) p { color: var(--hz-muted); }
@media (max-width: 781px) {
	.wp-block-column:has(.icon-style) + .wp-block-column:has(.icon-style) { border-left: 1px solid var(--hz-line); border-top-width: var(--hz-accent); }
	.wp-block-columns:has(.icon-style) { gap: 16px; }
}

/* ---------- Grey call-to-action panel → solid logo purple ---------- */
.wp-block-cover:has(> .has-nv-light-bg-background-color) {
	min-height: 0 !important;
	padding: 56px 56px !important;
	border-left: 6px solid var(--hz-yellow);
}
.wp-block-cover > .has-nv-light-bg-background-color {
	background: var(--hz-purple) !important;
	opacity: 1 !important;
}
.wp-block-cover:has(> .has-nv-light-bg-background-color) h2,
.wp-block-cover:has(> .has-nv-light-bg-background-color) p,
.wp-block-cover:has(> .has-nv-light-bg-background-color) .has-neve-text-color-color { color: #fff !important; }
.wp-block-cover:has(> .has-nv-light-bg-background-color) p { opacity: .9; }
.wp-block-cover:has(> .has-nv-light-bg-background-color) p:empty { display: none; }
.wp-block-cover:has(> .has-nv-light-bg-background-color) .wp-block-columns { margin-bottom: 0; }
.wp-block-cover:has(> .has-nv-light-bg-background-color) a { color: var(--hz-yellow) !important; text-decoration-color: rgba(255, 222, 0, .6) !important; font-weight: 600; }
.wp-block-cover:has(> .has-nv-light-bg-background-color) figure img {
	padding: 22px;
	background: transparent;
	border-radius: 0;
	box-sizing: content-box;
}
.wp-block-cover:has(> .has-nv-light-bg-background-color) .wp-block-column.is-vertically-aligned-center figure {
	float: none;
	margin: 0 auto;
	display: table;
}
@media (max-width: 781px) {
	.wp-block-cover:has(> .has-nv-light-bg-background-color) { padding: 40px 24px !important; }
}

/* Grey full-width band (team section on /over/) → flat cream */
.wp-block-cover > .wp-block-cover__background[style*="#878787"] {
	background: var(--hz-cream) !important;
	opacity: 1 !important;
}
.wp-block-cover:has(> [style*="#878787"]) { border-top: 1px solid var(--hz-line); border-bottom: 1px solid var(--hz-line); }
.wp-block-cover:has(> [style*="#878787"]) .wp-block-image.is-style-rounded img {
	border: 4px solid #fff;
	outline: 1px solid var(--hz-line);
}

/* ---------- Page titles ---------- */
.nv-page-title-wrap { margin: 56px 0 32px; }
/* Pages without a title block (Over, Contact, …) still need breathing room under the header */
body:not(.home) .single-page-container:not(:has(.nv-page-title-wrap)) { padding-top: 48px; }
.nv-page-title h1,
.single-post .entry-header .title {
	position: relative;
	padding-bottom: 0;
}
.single-post .entry-header { margin: 56px 0 32px; }
.nv-meta-list, .nv-meta-list a { color: var(--hz-muted); font-size: 13px; text-transform: uppercase; letter-spacing: .06em; }

/* ---------- Content ---------- */
.entry-content img { border-radius: 0; }
.entry-content .wp-block-image.is-style-rounded img { border-radius: 50%; }
.entry-content .wp-block-cover__image-background { border-radius: 0; }
.entry-content blockquote {
	border-left: var(--hz-accent) solid var(--hz-orange);
	background: var(--hz-cream);
	padding: 16px 22px;
	border-radius: 0;
}
.entry-content ul li::marker, .entry-content ol li::marker { color: var(--hz-orange); font-weight: 700; }
.wp-block-file {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 16px 20px;
	background: #fff;
	border: 1px solid var(--hz-line);
	border-left: var(--hz-accent) solid var(--hz-orange);
}
.wp-block-table table { border-collapse: collapse; }
.wp-block-table:not(:has(.has-fixed-layout)) td,
.wp-block-table:not(:has(.has-fixed-layout)) th { border-color: var(--hz-line); }
.wp-block-social-links .wp-social-link { background: var(--hz-purple) !important; color: #fff !important; border-radius: 0 !important; }
.wp-block-social-links .wp-social-link:hover { background: var(--hz-dark) !important; }
.wp-block-separator { border-color: var(--hz-line); }

/* ---------- Blog index ---------- */
.nv-index-posts { padding-top: 32px; padding-bottom: 56px; }
.nv-index-posts .posts-wrapper { display: grid; gap: 0; border-top: 1px solid var(--hz-line); }
.nv-index-posts article.post { margin: 0 !important; padding: 0 !important; }
.nv-index-posts .article-content-col .content {
	position: relative;
	height: 100%;
	padding: 28px 28px 28px 32px;
	background: #fff;
	border-bottom: 1px solid var(--hz-line);
	transition: background-color .15s;
}
.nv-index-posts .article-content-col .content::before {
	content: "";
	position: absolute;
	left: 0; top: 28px; bottom: 28px;
	width: var(--hz-accent);
	background: var(--hz-line);
	transition: background-color .15s;
}
.nv-index-posts .article-content-col .content:hover { background: var(--hz-mist); }
.nv-index-posts .article-content-col .content:hover::before { background: var(--hz-orange); }
.nv-index-posts .blog-entry-title { margin-bottom: 6px; font-size: 22px; }
.nv-index-posts .blog-entry-title a { color: var(--hz-dark); text-decoration: none; }
.nv-index-posts .blog-entry-title a:hover { color: var(--hz-purple); }
.nv-index-posts .excerpt-wrap { color: var(--hz-muted); }
.nv-index-posts .excerpt-wrap a, .more-link { color: var(--hz-purple); font-weight: 600; }

/* ---------- Single post sidebar ---------- */
.nv-sidebar-wrap .widget {
	padding: 22px 24px;
	background: #fff;
	border: 1px solid var(--hz-line);
	border-top: var(--hz-accent) solid var(--hz-orange);
}
.nv-sidebar-wrap .widget:empty,
.nv-sidebar-wrap .widget_search { display: none; }
.nv-sidebar-wrap .widget-title {
	margin-bottom: 12px;
	font-family: var(--headingsfontfamily);
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .1em;
	color: var(--hz-purple);
}
.nv-sidebar-wrap .widget ul { margin: 0; padding: 0; list-style: none; }
.nv-sidebar-wrap .widget li { padding: 9px 0; border-top: 1px solid var(--hz-line); line-height: 1.4; }
.nv-sidebar-wrap .widget li:first-child { border-top: 0; padding-top: 0; }
.nv-sidebar-wrap .widget a { text-decoration: none; font-weight: 500; color: var(--hz-ink); }
.nv-sidebar-wrap .widget a[aria-current] { color: var(--hz-purple); }

/* ---------- Footer ---------- */
.hz-footer {
	margin-top: 0;
	background: var(--hz-cream);
	color: var(--hz-ink);
	font-size: 15px;
}
.hz-footer::before { content: ""; display: block; height: 4px; background: var(--hz-stripes); }
.hz-footer a { color: var(--hz-dark); text-decoration: none; transition: color .12s; }
.hz-footer a:hover { color: var(--hz-purple); }
.hz-footer__grid {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr;
	gap: 40px;
	padding-top: 56px;
	padding-bottom: 40px;
}
.hz-footer__brand { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.hz-footer__brand img { width: 40px; height: auto; background: transparent; border-radius: 0; }
.hz-footer__brand span { font-family: var(--headingsfontfamily); font-size: 19px; font-weight: 700; letter-spacing: -0.02em; color: var(--hz-dark); }
.hz-footer p { margin: 0; max-width: 34ch; }
.hz-footer h2 {
	margin: 4px 0 14px;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .1em;
	color: var(--hz-purple);
}
.hz-footer ul { margin: 0; padding: 0; list-style: none; }
.hz-footer li { margin: 0 0 8px; }
.hz-footer li.nv-active a { color: var(--hz-purple); }
.hz-footer__bottom {
	padding-top: 18px;
	padding-bottom: 22px;
	border-top: 1px solid var(--hz-line);
	font-size: 13px;
	color: var(--hz-muted);
}
@media (max-width: 781px) {
	.hz-footer__grid { grid-template-columns: 1fr; gap: 28px; padding-top: 44px; }
}

/* ---------- Scroll-to-top ---------- */
.scroll-to-top {
	--bgcolor: var(--hz-purple);
	--hoverbgcolor: var(--hz-dark);
	--borderradius: 0;
	--padding: 12px;
	border-radius: 0;
	box-shadow: none;
}