/*
 * Boekel - partnertemplate econobisbuurtaanpak.nl
 * Huisstijl afgeleid van https://www.boekel.nl/ (oktober 2026)
 *
 * Let op: Twenty Twenty zet html { font-size: 62.5% }, dus 1rem = 10px. Gebruik px.
 */

/* Roboto variabel, self-hosted (AVG-veilig). Bron: @fontsource-variable/roboto 5.2.5, OFL 1.1 */
@font-face {
	font-family: 'Roboto';
	font-style: normal;
	font-display: swap;
	font-weight: 100 900;
	src: url('../assets/fonts/boekel/Roboto-Variable-latin-ext.woff2') format('woff2-variations');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: 'Roboto';
	font-style: normal;
	font-display: swap;
	font-weight: 100 900;
	src: url('../assets/fonts/boekel/Roboto-Variable-latin.woff2') format('woff2-variations');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
	--bk-navy: #002561;        /* donkerblauw: band, footer, koppen */
	--bk-blauw: #034EA2;       /* blauw: links */
	--bk-blauw-dark: #023A7A;
	--bk-geel: #FFD400;        /* geel: knoppen */
	--bk-geel-dark: #E6BF00;
	--bk-oranje: #F58220;      /* oranje: accentlijnen */
	--bk-tekst: #2B333B;
	--bk-rand: rgba(43, 51, 59, .1);
	--bk-grijs: #F2F4F7;
	--bk-wit: #fff;
	--bk-font: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
	--bk-radius: 10px;
}

/* ---------- basis ---------- */
.template-boekel * {
	font-family: var(--bk-font);
	color: var(--bk-tekst);
}

body.template-boekel {
	background-color: var(--bk-wit);
}

.template-boekel p,
.template-boekel li {
	font-size: 16px;
	line-height: 1.5;
}

.template-boekel h1,
.template-boekel h2,
.template-boekel h3,
.template-boekel h4,
.template-boekel .gsection_title,
body.template-boekel .gform_wrapper h2.gform_title {
	font-family: var(--bk-font) !important;
	font-weight: 700 !important;
	text-transform: uppercase;
	letter-spacing: 0;
	line-height: 1.15;
	color: var(--bk-navy);
}

.template-boekel h2 { font-size: 24px; }
.template-boekel h3 { font-size: 20px; }
.template-boekel h4 { font-size: 18px; }

.template-boekel .entry-content a,
body.template-boekel .gform_wrapper a {
	color: var(--bk-blauw);
	text-decoration: underline;
}
.template-boekel .entry-content a:hover,
body.template-boekel .gform_wrapper a:hover {
	color: var(--bk-navy);
}

/* tussenkopjes in de tekst (vetgedrukte alinea) in Boekel-blauw */
.template-boekel .entry-content p strong {
	color: var(--bk-navy);
}

/* ---------- logobalk ---------- */
.template-boekel header.entry-header {
	background-color: var(--bk-wit);
	padding: 0;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	border-bottom: 1px solid var(--bk-rand);
}

.boekel-header-wrapper {
	width: 100%;
	max-width: min(1104px, calc(100vw - 48px));
	margin: 0 auto;
	padding: 14px 0;
	text-align: left;
}

.boekel-header-wrapper .logo-wrapper a {
	display: inline-block;
	line-height: 0;
}

.boekel-header-wrapper .logo-wrapper img {
	display: block;
	width: auto;
	height: 52px;
	max-width: 100%;
}

/* ---------- donkerblauwe band met kaart erover ---------- */
.template-boekel .boekel-band {
	background-color: var(--bk-navy);
	height: 180px;
}

.template-boekel .entry-title {
	display: none;
}

body.template-boekel .post-inner.boekel-kaart {
	position: relative;
	background-color: var(--bk-wit);
	border-radius: var(--bk-radius);
	box-shadow: 0 10px 30px -18px rgba(0, 37, 97, .45);
	max-width: min(1104px, calc(100vw - 32px));
	margin: -120px auto 64px;
	padding: 40px 56px 56px;
}

.template-boekel .boekel-titel {
	font-size: clamp(30px, 4vw, 48px);
	line-height: 1.15;
	color: var(--bk-tekst) !important;
	margin: 0 0 24px;
	padding-bottom: 20px;
	border-bottom: 1px solid var(--bk-oranje);
	text-align: left;
}

.template-boekel .boekel-intro {
	font-size: 18px;
	line-height: 1.6;
	margin: 0 0 24px;
}

body.template-boekel .boekel-kaart .entry-content {
	max-width: none;
	margin: 0;
}

body.template-boekel .boekel-kaart .entry-content > *,
body.template-boekel .boekel-kaart .entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.is-style-wide) {
	max-width: none !important;
	width: 100% !important;
	margin-left: 0;
	margin-right: 0;
}

/* tekst op leesbare regellengte, formulier over de volle kaartbreedte */
body.template-boekel .boekel-kaart .entry-content > p:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.is-style-wide):not(.bk-vol),
body.template-boekel .boekel-kaart .entry-content > ul:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.is-style-wide):not(.bk-vol),
body.template-boekel .boekel-kaart .entry-content > ol:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.is-style-wide):not(.bk-vol) {
	max-width: 780px !important;
}

body.template-boekel .boekel-kaart .entry-content > p {
	margin-top: 0;
	margin-bottom: 16px;
}

/* lege alinea's (uit Word geplakt) geen witruimte laten geven */
body.template-boekel .boekel-kaart .entry-content > p:empty {
	display: none;
}

/* ---------- formulier ---------- */
body.template-boekel .entry-content .gform_wrapper,
body.template-boekel .entry-content .gform_wrapper.gravity-theme {
	max-width: none !important;
	width: 100% !important;
	margin: 32px 0 0 !important;
	padding: 32px 0 0;
	border-top: 1px solid var(--bk-rand);
	background: transparent;
}

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

body.template-boekel .gform_wrapper label:not(.gchoice label),
body.template-boekel .gform_wrapper legend {
	font-family: var(--bk-font);
	font-weight: 700;
	font-size: 16px;
	color: var(--bk-tekst);
}

body.template-boekel .gform_wrapper .gchoice label {
	font-size: 16px;
}

body.template-boekel .gform_wrapper .gfield_description,
body.template-boekel .gform_wrapper .gfield_description * {
	color: var(--bk-tekst);
	font-size: 14px;
}

body.template-boekel .gform_wrapper .gfield_required {
	color: #B3261E;
}

body.template-boekel .gform_wrapper input:not([type=submit]):not([type=button]):not([type=checkbox]):not([type=radio]),
body.template-boekel .gform_wrapper textarea,
body.template-boekel .gform_wrapper select {
	border: 1px solid var(--bk-navy) !important;
	border-radius: var(--bk-radius) !important;
	font-family: var(--bk-font) !important;
	font-size: 16px !important;
	color: #000 !important;
	background-color: var(--bk-wit);
	padding: 10px 14px;
}

body.template-boekel .gform_wrapper input:focus,
body.template-boekel .gform_wrapper textarea:focus,
body.template-boekel .gform_wrapper select:focus {
	outline: 3px solid var(--bk-geel);
	outline-offset: 1px;
}

body.template-boekel .gform_wrapper input::placeholder,
body.template-boekel .gform_wrapper textarea::placeholder {
	color: rgba(43, 51, 59, .55) !important;
}

body.template-boekel .gform_wrapper input[type=checkbox],
body.template-boekel .gform_wrapper input[type=radio] {
	accent-color: var(--bk-navy);
	width: 18px;
	height: 18px;
}

body.template-boekel .gform_wrapper .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='%23002561' 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: 40px;
}

/* koppen in HTML-velden van het formulier */
body.template-boekel .gform_wrapper .gfield--type-html center,
body.template-boekel .gform_wrapper .gfield--type-html h1,
body.template-boekel .gform_wrapper .gfield--type-html h2,
body.template-boekel .gform_wrapper .gfield--type-html h3 {
	font-family: var(--bk-font) !important;
	font-weight: 700 !important;
	font-size: 24px !important;
	line-height: 1.2 !important;
	text-transform: uppercase;
	text-align: left !important;
	color: var(--bk-navy) !important;
	margin: 0 0 8px !important;
}

body.template-boekel .gform_wrapper .gsection {
	border-bottom: 1px solid var(--bk-oranje);
}


/* sublabels (bijv. "E-mailadres bevestigen") niet vet */
body.template-boekel .gform_wrapper .gform-field-label--type-sub,
body.template-boekel .gform_wrapper .ginput_complex label {
	font-weight: 400 !important;
	font-size: 14px !important;
}
/* ---------- knoppen (geel, zoals boekel.nl) ---------- */
body.template-boekel .gform_wrapper input[type=submit],
body.template-boekel .gform_wrapper .gform_button,
body.template-boekel .gform_wrapper button.gform_next_button,
body.template-boekel .gform_wrapper .gform_next_button,
body.template-boekel .gform_wrapper button:not(.gform_previous_button),
body.template-boekel .gform_wrapper input[type=button]:not(.gform_previous_button),
.template-boekel .wp-block-button__link,
.template-boekel .wp-element-button {
	background-color: var(--bk-geel) !important;
	border: 4px solid transparent !important;
	border-radius: 8px !important;
	color: #000 !important;
	font-family: var(--bk-font) !important;
	font-weight: 400 !important;
	font-size: 16px !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	text-decoration: none !important;
	padding: 10px 16px !important;
	line-height: 1.4 !important;
	cursor: pointer;
}

body.template-boekel .gform_wrapper input[type=submit]:hover,
body.template-boekel .gform_wrapper .gform_button:hover,
body.template-boekel .gform_wrapper .gform_next_button:hover,
body.template-boekel .gform_wrapper button:not(.gform_previous_button):hover,
body.template-boekel .gform_wrapper input[type=button]:not(.gform_previous_button):hover,
.template-boekel .wp-block-button__link:hover,
.template-boekel .wp-element-button:hover {
	background-color: var(--bk-geel-dark) !important;
	color: #000 !important;
}

body.template-boekel .gform_wrapper input[type=submit]:focus-visible,
body.template-boekel .gform_wrapper button:focus-visible {
	border-color: var(--bk-navy) !important;
	outline: none;
}

/* "vorige" als omlijnde knop */
body.template-boekel .gform_wrapper .gform_previous_button,
body.template-boekel .gform_wrapper button.gform_previous_button,
body.template-boekel .gform_wrapper input.gform_previous_button {
	background-color: transparent !important;
	border: 1px solid var(--bk-navy) !important;
	border-radius: 8px !important;
	color: var(--bk-navy) !important;
	font-size: 16px !important;
	text-transform: none !important;
	padding: 13px 16px !important;
}

/* ---------- voortgangsbalk ---------- */
body.template-boekel .gf_progressbar_wrapper .gf_progressbar_title {
	font-weight: 700;
	color: var(--bk-tekst);
	margin-bottom: 8px;
}

body.template-boekel .gf_progressbar {
	background-color: var(--bk-grijs);
	border-radius: 99999px;
	overflow: hidden;
	height: 12px;
}

body.template-boekel .gf_progressbar_percentage,
body.template-boekel .gf_progressbar_percentage.percentbar_custom {
	background-color: var(--bk-navy) !important;
	border-radius: 99999px;
	color: transparent !important;
	font-size: 0 !important;
	height: 12px;
}

/* ---------- bevestiging en validatie ---------- */
body.template-boekel .gform_confirmation_message {
	background-color: var(--bk-grijs);
	border-left: 4px solid var(--bk-geel);
	border-radius: var(--bk-radius);
	padding: 20px 24px;
	font-size: 18px;
}

/* ---------- footer ---------- */
body.template-boekel footer#site-footer,
body.template-boekel .footer-nav-widgets-wrapper {
	background-color: var(--bk-navy);
	border-color: var(--bk-navy);
}

body.template-boekel footer#site-footer *,
body.template-boekel .footer-nav-widgets-wrapper * {
	color: var(--bk-wit);
}

/* ---------- hulpklassen voor Gutenberg ("Extra CSS-klasse" op een groep-blok) ---------- */
.template-boekel .bk-navy { background-color: var(--bk-navy); }
.template-boekel .bk-blauw { background-color: var(--bk-blauw); }
.template-boekel .bk-geel { background-color: var(--bk-geel); }
.template-boekel .bk-grijs { background-color: var(--bk-grijs); }
.template-boekel .bk-navy *,
.template-boekel .bk-blauw * { color: var(--bk-wit) !important; }

.template-boekel .bk-blok {
	border: 1px solid var(--bk-rand);
	border-radius: var(--bk-radius);
	padding: 16px 20px;
}

.template-boekel .bk-lijn {
	border-bottom: 1px solid var(--bk-oranje);
	padding-bottom: 16px;
}

/* ---------- mobiel ---------- */
@media (max-width: 782px) {
	.boekel-header-wrapper {
		max-width: calc(100vw - 32px);
		padding: 10px 0;
	}

	.boekel-header-wrapper .logo-wrapper img {
		height: 42px;
	}

	.template-boekel .boekel-band {
		height: 110px;
	}

	body.template-boekel .post-inner.boekel-kaart {
		margin: -80px 12px 40px;
		max-width: none;
		padding: 24px 20px 32px;
	}

	.template-boekel .boekel-titel {
		margin-bottom: 18px;
		padding-bottom: 14px;
	}

	body.template-boekel .entry-content .gform_wrapper,
	body.template-boekel .entry-content .gform_wrapper.gravity-theme {
		padding-top: 24px;
		margin-top: 24px !important;
	}
}