/**
 * Klimaatwerf (ZuidtrAnt) - opmaak gebaseerd op klimaatwerf.be (lichte variant)
 * Wordt alleen geladen bij templates/template-klimaatwerf.php (zie lib/enqueue.php)
 */

/* Het lettertype Public Sans wordt geladen via css/klimaatwerf-font.css */

:root {
	--kw-lichtblauw: #5CBFC9;	/* paginaachtergrond, zoals klimaatwerf.be */
	--kw-teal: #268C9E;			/* knoppen en links */
	--kw-teal-dark: #1C6E7D;
	--kw-navy: #0A1428;			/* balk met logo, tekstkleur */
	--kw-geel: #FBEB4E;
	--kw-geel-dark: #ECD92B;
	--kw-groen: #5F9A5E;
	--kw-groen-dark: #4C7E4B;
	--kw-oranje: #EABA24;
	--kw-wit: #fff;
	--kw-grijs: #EDF1F3;
	--text: #0A1428;
	--fontParagraph: 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
	--fontHeader: 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
	--fontLabel: 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
	--radius: 12px;
}

* {
	font-family: var(--fontParagraph);
	color: var(--text);
}

/* ---------- Pagina-achtergrond ---------- */

body.template-klimaatwerf {
	background-color: var(--kw-lichtblauw);
}

body.template-klimaatwerf footer#site-footer {
	background-color: var(--kw-navy);
}

body.template-klimaatwerf footer#site-footer * {
	color: var(--kw-wit);
}

/* ---------- Header met logo (donkerblauwe balk) ---------- */

.template-klimaatwerf header.entry-header {
	background-color: var(--kw-navy);
	font-family: var(--fontHeader);
	font-weight: 700;
	padding: unset;
	display: flex;
	justify-content: flex-start;
	align-items: center;
}

.klimaatwerf-header-wrapper {
	width: 100%;
	max-width: min(1600px, calc(100vw - 48px));
	position: relative;
	padding: 18px 20px;
}

.klimaatwerf-header-wrapper .logo-wrapper img {
	max-width: 100%;
	max-height: 60px;
}

/* ---------- Typografie ---------- */

.template-klimaatwerf h1,
.template-klimaatwerf h2,
.template-klimaatwerf h3,
.template-klimaatwerf h4,
.template-klimaatwerf .gsection_title,
.template-klimaatwerf .gform_wrapper h2.gform_title {
	font-family: var(--fontHeader) !important;
	font-weight: 700 !important;
	line-height: 1.1;
	letter-spacing: -.01em;
	color: var(--text);
}

.template-klimaatwerf h1 { font-size: clamp(34px, 4.4vw, 56px); }
.template-klimaatwerf h2 { font-size: clamp(26px, 2.8vw, 34px); }
.template-klimaatwerf h3 { font-size: clamp(20px, 2vw, 26px); }

.template-klimaatwerf p,
.template-klimaatwerf li {
	font-size: 17px;
	line-height: 1.6;
}

.entry-title {
	display: none;
}

.entry-content {
	max-width: min(1600px, calc(100vw - 48px));
	margin: 0 auto;
}

.post-inner {
	padding: 0 20px;
}

.entry-content .custom-hr {
	color: var(--text) !important;
}

/* ---------- Introvlak (alleen als de pagina een samenvatting heeft) ---------- */

.template-klimaatwerf .klimaatwerf-hero {
	background-color: var(--kw-lichtblauw);
	padding: 40px 20px 72px;
}

.template-klimaatwerf .klimaatwerf-hero-inner {
	max-width: 900px;
	margin: 0 auto;
	text-align: center;
}

.template-klimaatwerf .klimaatwerf-hero-text {
	color: var(--kw-navy);
	margin: 0 auto;
	max-width: 680px;
	font-size: 18px;
	line-height: 1.6;
}

/* ---------- Inhoud en formulier als witte kaart ---------- */

.template-klimaatwerf .post-inner {
	padding-top: 0;
}

body.template-klimaatwerf .entry-content .gform_wrapper.gravity-theme,
body.template-klimaatwerf .entry-content .gform_wrapper {
	background-color: var(--kw-wit);
	border-radius: var(--radius);
	padding: 40px;
	max-width: min(1100px, calc(100vw - 48px)) !important;
	margin: 48px auto 64px !important;
	box-shadow: 0 18px 40px -24px rgba(10, 20, 40, .35);
}

/* Staat er een introvlak boven, dan valt de kaart daar overheen */
body.template-klimaatwerf .klimaatwerf-hero + .post-inner .gform_wrapper,
body.template-klimaatwerf .klimaatwerf-hero + .post-inner .gform_wrapper.gravity-theme {
	margin-top: -48px !important;
}

.template-klimaatwerf .entry-content form {
	background: transparent;
	padding: 0;
}

.gform_wrapper {
	width: 100% !important;
	margin: 0 auto !important;
}

/* Kaart voor gewone inhoud zonder formulier: hulpklasse kw-kaart */
.template-klimaatwerf .kw-kaart {
	background-color: var(--kw-wit);
	border-radius: var(--radius);
	padding: 32px;
	box-shadow: 0 18px 40px -24px rgba(10, 20, 40, .35);
}

/* ---------- Labels en velden ---------- */

.entry-title,
label:not(.gchoice label), legend {
	font-family: var(--fontLabel);
	color: var(--text);
	font-weight: 600;
}

.gfield_description * {
	color: var(--text);
}

.gfield_required {
	color: #B3541E;
}

label > a,
.template-klimaatwerf .gform_wrapper a {
	color: var(--kw-teal-dark);
}

input, textarea, select {
	border-radius: 8px !important;
	font-family: var(--fontParagraph) !important;
	color: var(--text) !important;
}

input:focus, textarea:focus, select:focus {
	outline: 2px solid var(--kw-teal);
	outline-offset: 1px;
}

input::-webkit-input-placeholder {
	color: rgba(10, 20, 40, .55) !important;
}

.ginput_container_select select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath stroke='%230A1428' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' fill='none' d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
	background-size: 16px 16px;
	padding-right: 2.5rem;
}

/* ---------- Knoppen (pill, teal zoals klimaatwerf.be) ---------- */

input[type=submit],
.template-klimaatwerf .wp-block-button__link,
.template-klimaatwerf .gform_previous_button,
.template-klimaatwerf .gform_next_button,
.template-klimaatwerf .gform_button,
body.template-klimaatwerf .gform_wrapper button:not(.gform_previous_button) {
	background-color: var(--kw-teal) !important;
	font-family: var(--fontHeader) !important;
	font-weight: 600 !important;
	border: 1px solid var(--kw-teal) !important;
	border-radius: 99999px !important;
	color: var(--kw-wit) !important;
	padding: 12px 26px !important;
}

input[type=submit]:hover, input[type=submit]:active,
.template-klimaatwerf .wp-block-button__link:hover,
.template-klimaatwerf .gform_next_button:hover,
.template-klimaatwerf .gform_button:hover,
body.template-klimaatwerf .gform_wrapper button:not(.gform_previous_button):hover {
	background-color: var(--kw-teal-dark) !important;
	border-color: var(--kw-teal-dark) !important;
	color: var(--kw-wit) !important;
	text-decoration: none !important;
}

body.template-klimaatwerf .gform_wrapper button.gform_next_button,
body.template-klimaatwerf .gform_wrapper button.gform_button,
body.template-klimaatwerf .gform_wrapper input[type=submit] {
	background-color: var(--kw-teal) !important;
	border: 1px solid var(--kw-teal) !important;
	color: var(--kw-wit) !important;
}

/* Vorige-knop als omlijnde variant */
body.template-klimaatwerf .gform_previous_button,
body.template-klimaatwerf .gform_wrapper button.gform_previous_button {
	background-color: transparent !important;
	border: 1px solid var(--kw-navy) !important;
	color: var(--kw-navy) !important;
}

/* Gele knopvariant: klasse kw-knop-geel op het knopblok */
.template-klimaatwerf .kw-knop-geel .wp-block-button__link,
.template-klimaatwerf .kw-knop-geel input[type=submit] {
	background-color: var(--kw-geel) !important;
	border-color: var(--kw-geel) !important;
	color: var(--kw-navy) !important;
}

.template-klimaatwerf .kw-knop-geel .wp-block-button__link:hover {
	background-color: var(--kw-geel-dark) !important;
	border-color: var(--kw-geel-dark) !important;
}

/* Groene knopvariant: klasse kw-knop-groen */
.template-klimaatwerf .kw-knop-groen .wp-block-button__link,
.template-klimaatwerf .kw-knop-groen input[type=submit] {
	background-color: var(--kw-groen) !important;
	border-color: var(--kw-groen) !important;
	color: var(--kw-wit) !important;
}

.template-klimaatwerf .kw-knop-groen .wp-block-button__link:hover {
	background-color: var(--kw-groen-dark) !important;
	border-color: var(--kw-groen-dark) !important;
}

/* Knoppen niet in kapitalen (Twenty Twenty standaard) */
.template-klimaatwerf .wp-block-button__link,
.template-klimaatwerf input[type=submit],
.template-klimaatwerf button,
.template-klimaatwerf .wp-element-button {
	text-transform: none !important;
	letter-spacing: 0 !important;
	font-size: 16px !important;
}

/* ---------- Kleurvlakken (hulpklassen voor blokken) ---------- */

.template-klimaatwerf .kw-blauw { background-color: var(--kw-lichtblauw); }
.template-klimaatwerf .kw-geel { background-color: var(--kw-geel); }
.template-klimaatwerf .kw-groen { background-color: var(--kw-groen); }
.template-klimaatwerf .kw-oranje { background-color: var(--kw-oranje); }
.template-klimaatwerf .kw-navy { background-color: var(--kw-navy); }
.template-klimaatwerf .kw-wit { background-color: var(--kw-wit); }
.template-klimaatwerf .kw-grijs { background-color: var(--kw-grijs); }

.template-klimaatwerf .kw-navy *,
.template-klimaatwerf .kw-groen * { color: var(--kw-wit); }

.template-klimaatwerf .kw-rond {
	border-radius: var(--radius);
	overflow: hidden;
}

/* ---------- Breedte en volle kleurvlakken ---------- */

.template-klimaatwerf .post-inner.thin .entry-content > * {
	max-width: min(1100px, calc(100vw - 48px));
}

.template-klimaatwerf .kw-blauw,
.template-klimaatwerf .kw-geel,
.template-klimaatwerf .kw-groen,
.template-klimaatwerf .kw-oranje,
.template-klimaatwerf .kw-navy,
.template-klimaatwerf .kw-wit,
.template-klimaatwerf .kw-grijs,
.template-klimaatwerf .kw-vol {
	max-width: none !important;
	width: 100vw !important;
	margin-left: calc(50% - 50vw) !important;
	margin-right: calc(50% - 50vw) !important;
}

.template-klimaatwerf .kw-blauw > *,
.template-klimaatwerf .kw-geel > *,
.template-klimaatwerf .kw-groen > *,
.template-klimaatwerf .kw-oranje > *,
.template-klimaatwerf .kw-navy > *,
.template-klimaatwerf .kw-wit > *,
.template-klimaatwerf .kw-grijs > *,
.template-klimaatwerf .kw-vol > * {
	max-width: min(1100px, calc(100vw - 48px));
	margin-left: auto;
	margin-right: auto;
}

/* ---------- Formuliertitel en voortgangsbalk ---------- */

body.template-klimaatwerf .gform_wrapper .gform_title {
	font-size: 26px !important;
	text-align: left;
	margin: 0 0 24px;
}

body.template-klimaatwerf .gform_wrapper .gform_description {
	font-size: 17px;
	color: var(--text);
}

body.template-klimaatwerf .gf_progressbar_wrapper .gf_progressbar_title {
	font-family: var(--fontLabel);
	font-weight: 600;
	color: var(--text);
	margin-bottom: 8px;
}

body.template-klimaatwerf .gf_progressbar {
	background-color: var(--kw-grijs);
	border-radius: 99999px;
	overflow: hidden;
	height: 14px;
}

body.template-klimaatwerf .gf_progressbar_percentage,
body.template-klimaatwerf .gf_progressbar_percentage.percentbar_custom {
	background-color: var(--kw-teal) !important;
	border-radius: 99999px;
	color: transparent !important;
	font-size: 0 !important;
	height: 14px;
}

body.template-klimaatwerf .gform_wrapper .gsection {
	border-bottom: 2px solid var(--kw-grijs);
}

/* ---------- Koppen in HTML-velden van het formulier ---------- */

body.template-klimaatwerf .gform_wrapper .gfield--type-html center,
body.template-klimaatwerf .gform_wrapper .gfield--type-html h1,
body.template-klimaatwerf .gform_wrapper .gfield--type-html h2 {
	font-family: var(--fontHeader) !important;
	font-weight: 700 !important;
	font-size: 26px !important;
	line-height: 1.15 !important;
	text-align: left !important;
	color: var(--text) !important;
	margin: 0 0 8px !important;
}

/* ---------- Tabellen van geneste formulieren (GP Nested Forms) ---------- */

body.template-klimaatwerf .gpnf-nested-entries-container,
body.template-klimaatwerf .gpnf-nested-entries {
	width: 100%;
}

body.template-klimaatwerf .gpnf-nested-entries-container {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

body.template-klimaatwerf table.gpnf-nested-entries {
	table-layout: auto;
	font-size: 14px;
	width: 100%;
}

body.template-klimaatwerf table.gpnf-nested-entries th,
body.template-klimaatwerf table.gpnf-nested-entries td {
	padding: 6px 8px;
	vertical-align: middle;
	word-break: normal;
}

body.template-klimaatwerf table.gpnf-nested-entries .gpnf-row-actions a,
body.template-klimaatwerf table.gpnf-nested-entries .gpnf-row-actions button {
	padding: 6px 14px !important;
	font-size: 14px !important;
}

/* ---------- Responsive ---------- */

@media (max-width: 782px) {
	.klimaatwerf-header-wrapper { padding: 14px 16px; }
	.klimaatwerf-header-wrapper .logo-wrapper img { max-height: 44px; }
	.template-klimaatwerf .klimaatwerf-hero { padding: 28px 16px 56px; }
	.template-klimaatwerf .kw-kaart { padding: 20px; }

	body.template-klimaatwerf .entry-content .gform_wrapper,
	body.template-klimaatwerf .entry-content .gform_wrapper.gravity-theme {
		padding: 20px;
		margin: 24px 16px 40px !important;
	}

	body.template-klimaatwerf .klimaatwerf-hero + .post-inner .gform_wrapper,
	body.template-klimaatwerf .klimaatwerf-hero + .post-inner .gform_wrapper.gravity-theme {
		margin-top: -40px !important;
	}
}

/* ---------- Paginatitel in de hero (terug aangezet 01-10-2026) ---------- */

.template-klimaatwerf .klimaatwerf-hero {
	padding: 56px 20px 80px;
}

.template-klimaatwerf .klimaatwerf-hero-title {
	color: var(--kw-navy) !important;
	font-family: var(--fontHeader);
	font-weight: 700;
	font-size: clamp(32px, 4vw, 48px);
	line-height: 1.1;
	letter-spacing: -.01em;
	margin: 0;
}

.template-klimaatwerf .klimaatwerf-hero-text {
	margin: 16px auto 0;
}

@media (max-width: 782px) {
	.template-klimaatwerf .klimaatwerf-hero { padding: 36px 16px 64px; }
}

/* ---------- Logobalk in dezelfde lichtblauwe kleur als de achtergrond ---------- */

.template-klimaatwerf header.entry-header {
	background-color: var(--kw-lichtblauw);
}

/* Logo in kleur, want wit leest slecht op lichtblauw */
.klimaatwerf-header-wrapper .logo-wrapper img {
	content: url('../assets/images/klimaatwerf/klimaatwerf-logo.svg');
}

.template-klimaatwerf .klimaatwerf-hero {
	padding-top: 24px;
}

/* De logowissel gebeurt in entry-header-klimaatwerf.php (gekleurd logo),
   dus de content-truc hierboven wordt hier weer uitgezet. */
.klimaatwerf-header-wrapper .logo-wrapper img {
	content: normal;
	height: auto;
}