/*
 * VNK reskin overrides.
 *
 * The existing 68 pages' actual colors mostly come from the parent theme's
 * own wp-content/themes/hello-elementor/tmo.css — a custom stylesheet from
 * before this project, unrelated to Elementor's Global Colors (which only a
 * handful of widgets actually reference). This file re-targets tmo.css's own
 * selectors with the new palette, using !important throughout because
 * tmo.css itself does.
 *
 * Every selector below is prefixed with `html` on purpose: tmo.css isn't a
 * normal enqueued stylesheet — it's a raw <link> hardcoded directly into
 * header.php, positioned AFTER wp_head(), so it always prints last no
 * matter what priority we enqueue at. Between two `!important` rules, CSS
 * resolves by specificity before source order, so the `html` prefix (a
 * harmless, always-matching ancestor) just needs to make our selectors
 * slightly more specific than tmo.css's matching ones — then source order
 * stops mattering entirely.
 *
 * Mapping used throughout:
 *   #006837 (dominant dark green)  -> #037d36 kindcentra-groen
 *   #8CC63F (lime/secondary green) -> #83bc4c kindcentra-lichtgroen
 *   #118437, #12A756 (odd greens)  -> #037d36 kindcentra-groen
 *   #F2F9EC (pale section bg)      -> #fff4eb niet-wit
 *   rgba(229,195,23,1) / .geel     -> #e4c115 kindcentra-geel (near-exact already)
 *   #EA5461 (.btn-tmo, team h3)    -> already exact-matches kindcentra-rood, untouched
 *   .blauw / .paars                -> left as-is; no equivalent in the new 4-color palette
 */

/* --- Headings, nav, icons: #006837 -> kindcentra-groen --- */
html .elementor-8 h1,
html .header h1,
html .header #breadcrumbs .breadcrumb_last,
html .text-tmo h3,
html .team-items h2,
html .jet-hamburger-panel__inner .elementor-button-icon,
html .jet-hamburger-panel__icon,
html section.tabs .left h2,
html .blokken h2,
html .blokken .blok-title,
html section.contact h2,
html section.quote .text,
html section.logos h2,
html .homebuttons .card h4,
html .team_item h3,
html .team_item h4 {
	color: #037d36 !important;
}
/* team_item cards' own border color (#CCC, hardcoded in a <style> block
   inside team.php's render()) -> kindcentra-groen, site-wide. */
html .team_item {
	border-color: #037d36 !important;
}
html .icons svg {
	fill: #037d36 !important;
}
html section.contact .wpforms-submit {
	background-color: #037d36 !important;
	border-color: #037d36 !important;
}
html .elementor-menu-toggle {
	background-color: #037d36 !important;
}
html .jet-listing-grid__item .elementor-heading-title {
	color: #037d36 !important;
}
html .iconsearch {
	fill: #037d36 !important;
}

/* --- Secondary accents, tabs: #8CC63F -> kindcentra-lichtgroen --- */
html .elementor-8 h1 span,
html section.tabs h2 {
	color: #83bc4c !important;
}
html .header #breadcrumbs {
	color: #83bc4c !important;
	font-family: 'Nunito', sans-serif !important;
}
html section.tabs .buttons {
	border-color: #83bc4c !important;
	background-color: #83bc4c !important;
}
html section.tabs .buttons a.active {
	color: #83bc4c !important;
}
html section.tabs .buttons a.active:after {
	border-top-color: #83bc4c !important;
}
html .homebuttons .card {
	border-color: #83bc4c !important;
}
html .homebuttons .card .icon {
	background-color: #83bc4c !important;
}

/* --- Utility color classes --- */
html .geel {
	color: #e4c115 !important;
}
html .groen {
	color: #83bc4c !important;
}

/* --- Pale section backgrounds: #F2F9EC -> niet-wit --- */
html .bg--light,
html .elementor-location-archive,
html .elementor-element-6522b0d,
html .elementor-element-3703f7fb,
html .elementor-5430 .elementor-element.elementor-element-feef5a8 .edwh-style .edwh-quickfilter-bar {
	background-color: #fff4eb !important;
}

/* --- Buttons: force Nunito, matching the new design's button/button-link convention --- */
html .btn-tmo,
html .elementor-button {
	font-family: 'Nunito', sans-serif !important;
	font-size: 1rem !important;
}
/* Legacy tmo.css button class - font-size is hardcoded there, unrelated to
   the Kit's global "Buttons & Knoppen" typography. */
html .btn-tmo {
	font-size: 1rem !important;
}

/* Body background: genuinely unset anywhere (both html{} and body{} in
   tmo.css are empty) - was just the browser default white. */
html body {
	background-color: #fff4eb;
}

/* tmo.css's own .container class (used by team.php, maps.php, and other
   elementor-addon widgets as their own content wrapper) - separate from
   Elementor's .elementor-container, needs the same 1140->1320 width bump. */
html .container {
	max-width: 1320px !important;
}

/* --- Safety net for anything not covered by tmo.css's own selectors above:
   default paragraph text -> Roboto, matching the new design's body-copy font.
   Headings are already forced to Nunito site-wide by tmo.css itself. --- */
html .elementor-widget-text-editor,
html .elementor-widget-text-editor p {
	font-family: 'Roboto', sans-serif !important;
}
html .elementor-icon-list-text {
	font-family: 'Nunito', sans-serif !important;
}

/* =========================================================================
   New site-wide header (kc-site-header, header template #342).
   body:is(.home, .page-id-15631)           -> fixed, overlays the homepage hero.
   (no class, default) -> sticky, sits in normal page flow on inner pages.
   body.scrolled       -> solid green background + white text, everywhere.
   ========================================================================= */

html .elementor-location-header {
	position: sticky;
	top: 0;
	left: 0;
	right: 0;
	z-index: 999;
	background-color: transparent !important;
	transition: background-color .3s ease;
}
html body:is(.home, .page-id-15631) .elementor-location-header {
	position: fixed;
	top: 30px;
}
html body.scrolled .elementor-location-header {
	background-color: #037d36 !important;
	top: 0 !important;
}

/* Hero: constrain heading/text/buttons to the reference's own column width. */
html .elementor-element-kcherotextcol {
	max-width: 768px;
}
/* Hero: the 3 CTA buttons live in their own inner section/column
   (kcherobtnrow > kcherobtncol) so this flex-row + gap override doesn't
   also affect the headline/paragraph stack above them. */
html .elementor-element-kcherobtncol > .elementor-widget-wrap {
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	gap: 24px;
}
@media (max-width: 450px) {
	/* Each button's own .elementor-widget wrapper is a flex item in the row
	   above - it has to become full-width too, not just the <a> inside it,
	   or "100%" just means 100% of an already shrink-wrapped box. */
	html .elementor-element-kcherobtncol > .elementor-widget-wrap > .elementor-widget {
		width: 100%;
	}
	html .elementor-element-kcherobtncol .elementor-button {
		width: 100%;
	}
	html .elementor-element-kcherobtncol .elementor-button-content-wrapper {
		justify-content: space-between;
	}
}
/* Hero: kcherovideo is not the last child in its column, so it was getting
   Elementor's default not-last-child margin-bottom - the "green sliver"
   below the video that measurements alone kept missing. */
html .elementor-element-kcherovideo {
	margin-bottom: 0 !important;
}

/* Logo swap: groen mark by default (inner pages, light background),
   white mark on the homepage (dark hero) and once scrolled (green bg). */
html .kc-logo-wit {
	display: none;
}
html .kc-logo-groen {
	display: block;
}
html body:is(.home, .page-id-15631) .kc-logo-wit,
html body.scrolled .kc-logo-wit {
	display: block;
}
html body:is(.home, .page-id-15631) .kc-logo-groen,
html body.scrolled .kc-logo-groen {
	display: none;
}

/* Nav + utility (Zoeken/Login leden) text: groen by default, white on the
   homepage or once scrolled. Dropdown panels are excluded on purpose (via
   the --main scope) since they always sit on a solid white background. */
html .kc-header-nav .elementor-nav-menu--main .elementor-item,
html .kc-header-utility,
html .kc-header-utility a,
html .kc-header-utility .elementor-icon-list-icon,
html .kc-header-utility .elementor-icon-list-icon i,
html .kc-header-utility .elementor-icon-list-icon svg,
html .kc-header-utility .elementor-icon-list-text {
	color: #037d36 !important;
	fill: #037d36 !important;
}
html body:is(.home, .page-id-15631) .kc-header-nav .elementor-nav-menu--main .elementor-item,
html body:is(.home, .page-id-15631) .kc-header-utility,
html body:is(.home, .page-id-15631) .kc-header-utility a,
html body:is(.home, .page-id-15631) .kc-header-utility .elementor-icon-list-icon,
html body:is(.home, .page-id-15631) .kc-header-utility .elementor-icon-list-icon i,
html body:is(.home, .page-id-15631) .kc-header-utility .elementor-icon-list-icon svg,
html body:is(.home, .page-id-15631) .kc-header-utility .elementor-icon-list-text,
html body.scrolled .kc-header-nav .elementor-nav-menu--main .elementor-item,
html body.scrolled .kc-header-utility,
html body.scrolled .kc-header-utility a,
html body.scrolled .kc-header-utility .elementor-icon-list-icon,
html body.scrolled .kc-header-utility .elementor-icon-list-icon i,
html body.scrolled .kc-header-utility .elementor-icon-list-icon svg,
html body.scrolled .kc-header-utility .elementor-icon-list-text {
	color: #ffffff !important;
	fill: #ffffff !important;
}

/* Elementor's per-section "Custom CSS" control doesn't apply to raw Section
   elements in this version (confirmed: it silently produces no output) -
   targeting the element's own predictable .elementor-element-{id} class
   directly instead. Needed so the decorative blob's position:absolute
   resolves against this section instead of the whole page, and so
   overflow-x:hidden doesn't implicitly force overflow-y:auto (a real CSS
   quirk: if only one axis is set, the other becomes "auto"), which was
   causing an internal scrollbar. */
html .elementor-element-kcftouter {
	position: relative !important;
}
/* Elementor's own base CSS already sets overflow-x:hidden on every section
   (for shape-divider support) - unconditional, can't be avoided here. That
   forces overflow-y to compute as "auto" (CSS spec rule: if one axis isn't
   "visible", the other can't stay "visible" either), and the blob's
   translate() bleed genuinely extends the scrollable area, which is what
   was showing an internal scrollbar. Setting overflow-y:hidden too (instead
   of fighting for "visible") removes the scrollbar and simply clips the
   bleed cleanly at the edge. */
html .elementor-element-kcftouter {
	overflow-y: hidden !important;
}
html body {
	overflow-x: hidden;
}

/* Elementor's per-widget margin control only writes to the inner
   .elementor-widget-container; the outer .elementor-element div gets its
   own default spacing from the theme, unaffected by that control. */
html .elementor-element-kccontacttitle {
	margin-bottom: 4px !important;
}
html .elementor-element-kcaddress {
	margin-bottom: 8px !important;
}
html .elementor-element-kcanbitext {
	margin-bottom: 8px !important;
}
html .elementor-element-kccopyrighttext a {
	color: #000000 !important;
	text-decoration: underline;
}
html .elementor-element-kccopyrighttext a:hover {
	color: #037d36 !important;
}

/* The icon-list/text-editor widgets' typography controls only apply
   font-size/weight/family to the widget's outer wrapper, relying on
   inheritance to reach the actual text node - which loses to any other
   rule that matches the text node directly (same "inheritance never
   competes with a direct match" rule as the header's icon-color fix).
   Target the text nodes directly instead. */
html .elementor-element-kcanbilink .elementor-icon-list-text {
	font-family: 'Nunito', sans-serif !important;
	font-size: 16px !important;
	font-weight: 700 !important;
}
/* Same "direct match beats inheritance" issue as above: tmo.css's blanket
   .elementor-widget-container{font-size:18px} rule directly matches the
   div wrapping this <p>, which otherwise wins over Elementor's own
   responsive font-size set on the ancestor .elementor-element-kcherotext.
   Match the same 3 breakpoints here so it stays in sync. */
html .elementor-element-kcherotext p {
	font-size: 24px !important;
}
@media (max-width: 767px) {
	html .elementor-element-kcherotext p {
		font-size: 18px !important;
	}
}
html .elementor-element-kccopyrighttext p,
html .elementor-element-kcmindoffice p {
	font-family: 'Roboto', sans-serif !important;
	font-size: 12px !important;
	font-weight: 400 !important;
}

/* #zoekvensterDialog search modal - used to be an inline <style> block
   hardcoded directly in the parent theme's footer.php (same anti-pattern as
   tmo.css), wiped by the theme update. Reconstructed verbatim from
   production's rendered output. */
#zoekvensterDialog {
	display: none;
	position: fixed;
	width: 100%;
	background-color: rgba(0, 0, 0, 0.8);
	height: 100%;
	top: 0px;
	left: 0px;
	z-index: 100;
	align-items: center;
	justify-content: center;
}
#zoekvensterDialog.active {
	display: flex !important;
}
#searchformFooter {
	gap: 20px;
	display: flex;
}
#zoekvensterDialog .close {
	position: absolute;
	top: -30px;
	right: -30px;
	background-color: #00683e;
	color: #fff;
	font-weight: bold;
	width: 50px;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 50px;
	border-radius: 50%;
	cursor: pointer;
}

/* Kills the icon-list widget's own top padding on its inline items, which
   was throwing off vertical alignment against the nav items beside it. */
html .kc-header-utility .elementor-icon-list-item.elementor-inline-item {
	padding-top: 0 !important;
}
/* The text span is empty (icon-only) but, being an inline element, still
   occupies its own line-height box - taller than the nav items' 20px line
   box, which shifts the icon's centered position within it. Remove it and
   pin the icon's own line-height to match the nav items exactly. */
html .kc-header-utility .elementor-icon-list-text {
	display: none !important;
}
html .kc-header-utility .elementor-icon-list-item > a {
	line-height: 20px !important;
	align-items: center !important;
	padding: 4px !important;
}
html .kc-header-utility .elementor-icon-list-icon {
	line-height: 1 !important;
}

/* Nav column's own flex row has no justify-content/gap, so on mobile the
   search/login icons and the hamburger toggle just cluster at the left
   instead of the toggle sitting at the true right edge with breathing room
   before it. */
html .elementor-element-kcnavcol .elementor-widget-wrap {
	justify-content: flex-end !important;
	gap: 12px;
}
html .kc-header-nav .elementor-menu-toggle {
	margin: 0 !important;
}
/* tmo.css's top:100px !important on .elementor-nav-menu--dropdown is scoped
   to exclude .kc-header-nav (see tmo.css itself), letting Elementor's own
   inline positioning for this header's dropdown panel take over - a plain
   inline style can't be beaten by any !important stylesheet rule, so no
   override belongs here at all. */

/* While the mobile panel is open, give the header itself the same solid
   background as the panel (instead of the default transparent/groen-on-
   scroll state) so the two don't look disconnected. Also force groen text
   regardless of home/scrolled state, since on the homepage the default is
   white text - which would be invisible against this now-white background. */
html .elementor-location-header:has(.elementor-menu-toggle.elementor-active) {
	background-color: #ffffff !important;
}
html .elementor-location-header:has(.elementor-menu-toggle.elementor-active) .kc-header-nav .elementor-nav-menu--main .elementor-item,
html .elementor-location-header:has(.elementor-menu-toggle.elementor-active) .kc-header-utility,
html .elementor-location-header:has(.elementor-menu-toggle.elementor-active) .kc-header-utility a,
html .elementor-location-header:has(.elementor-menu-toggle.elementor-active) .kc-header-utility .elementor-icon-list-icon i,
html .elementor-location-header:has(.elementor-menu-toggle.elementor-active) .kc-header-utility .elementor-icon-list-icon svg {
	color: #037d36 !important;
	fill: #037d36 !important;
}
html .elementor-location-header:has(.elementor-menu-toggle.elementor-active) .kc-logo-wit {
	display: none !important;
}
html .elementor-location-header:has(.elementor-menu-toggle.elementor-active) .kc-logo-groen {
	display: block !important;
}

/* Mobile hamburger toggle button always has a solid groen background
   (existing rule below), so its icon must always be white for contrast -
   deliberately NOT part of the conditional block above. */
html .kc-header-nav .elementor-menu-toggle {
	color: #ffffff !important;
	fill: #ffffff !important;
}

/* tmo.css forces font-weight:500 on every nav-menu item; beat it the same
   way the color rule above already does (an extra type selector keeps equal
   class-count specificity but wins the tiebreak). */
html .kc-header-nav .elementor-nav-menu--main .elementor-item {
	font-weight: 700 !important;
}

/* --- Kaartenrij widget (Waarom/Hoe/Wat and similar card-grid sections) --- */
html .kc-kaartenrij {
	position: relative;
	z-index: 2;
	display: grid;
	gap: 24px;
	max-width: 1320px;
	margin: 0 auto;
}
/* cols-4 gets an intermediate 2-column tablet step; cols-2/3 jump straight
   from 1 to their final count at the 1024px breakpoint below (no existing
   instance needs an intermediate step, so this stays scoped to cols-4 only
   to avoid changing their current behavior). */
@media (min-width: 640px) {
	html .kc-kaartenrij--cols-4 {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (min-width: 1024px) {
	html .kc-kaartenrij--cols-2 {
		grid-template-columns: repeat(2, 1fr);
	}
	html .kc-kaartenrij--cols-3 {
		grid-template-columns: repeat(3, 1fr);
	}
	html .kc-kaartenrij--cols-4 {
		grid-template-columns: repeat(4, 1fr);
	}
}
html .kc-kaartenrij__card {
	display: flex;
	flex-direction: column;
	border: 1px solid #037d36;
	border-radius: 8px;
	background-color: #fff4eb;
	padding: 16px;
}
@media (min-width: 640px) {
	html .kc-kaartenrij__card {
		padding: 32px;
	}
}
/* Direct match beats tmo.css's blanket .elementor-widget-container{font-size:
   18px} rule on inheritance - same pattern as the hero paragraph fix. */
html .kc-kaartenrij__title {
	margin: 0;
	font-family: 'Nunito', sans-serif !important;
	font-weight: 700 !important;
	font-size: 30px !important;
	color: #037d36;
}
html .kc-kaartenrij__image {
	margin: 0;
	width: 100%;
	aspect-ratio: 9 / 4;
	object-fit: cover;
	border-radius: 6px;
}
/* The photo renders before the title in markup (see the widget's render()),
   so a title spanning more lines than its row-neighbors never pushes its
   own photo out of line with theirs - the photo's height never varies, so
   it's the reliable anchor, not the title. Gap-to-title lives here (on the
   pairing) rather than as a fixed top-margin on the title itself, since the
   title is also used title-first in the "kleur" kaartstijl, where it
   correctly needs no top gap at all. */
html .kc-kaartenrij__image + .kc-kaartenrij__title {
	margin-top: 24px;
}
html .kc-kaartenrij__tekst {
	margin-top: 24px;
	font-family: 'Roboto', sans-serif !important;
	font-size: 16px !important;
}
@media (min-width: 640px) {
	html .kc-kaartenrij__tekst {
		font-size: 18px !important;
	}
}
html .kc-kaartenrij__tekst ul {
	margin-top: 8px;
	padding-left: 24px;
	list-style: disc;
}
html .kc-kaartenrij__tekst a {
	text-decoration: underline;
}
html .kc-kaartenrij__link {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-top: auto;
	padding-top: 24px;
	font-family: 'Nunito', sans-serif !important;
	font-weight: 700 !important;
	font-size: 16px !important;
	color: #037d36;
	text-decoration: none !important;
}
html .kc-kaartenrij__arrow {
	display: inline-flex;
	font-size: 12px;
	color: #037d36;
	transition: transform 0.2s ease;
}
html .kc-kaartenrij__link:hover .kc-kaartenrij__arrow {
	transform: translateX(4px);
}

/* "Kleur" variant (e.g. "Voor wie"): solid background per card via inline
   style, small icon top-right instead of a photo, link/title colors follow
   the card's own text color instead of the fixed brand green. */
html .kc-kaartenrij__card--kleur {
	position: relative;
	border: none;
	padding: 16px;
}
@media (min-width: 640px) {
	html .kc-kaartenrij__card--kleur {
		padding: 32px;
	}
}
html .kc-kaartenrij__icoon {
	position: absolute;
	top: 32px;
	right: 32px;
	width: auto;
	height: 40px;
}
html .kc-kaartenrij__title--kleur {
	max-width: 70%;
	color: inherit !important;
	font-size: 24px !important;
}
@media (min-width: 640px) {
	html .kc-kaartenrij__title--kleur {
		font-size: 30px !important;
	}
}
html .kc-kaartenrij__card--kleur .kc-kaartenrij__tekst {
	margin-top: 32px;
}
@media (min-width: 640px) {
	html .kc-kaartenrij__card--kleur .kc-kaartenrij__tekst {
		margin-top: 24px;
	}
}
html .kc-kaartenrij__card--kleur .kc-kaartenrij__link,
html .kc-kaartenrij__card--kleur .kc-kaartenrij__arrow {
	color: inherit !important;
}
html .kc-kaartenrij__card--kleur .kc-kaartenrij__link {
	padding-top: 40px;
}

/* "Zij-aan-zij" variant (e.g. "Ons netwerk"): text+link on one side,
   photo on the other, each card independently colored via inline style
   (achtergrond_kleur/tekst_kleur/rand_kleur), same pattern as the
   "kleur" variant but side-by-side instead of icon-topped. */
html .kc-kaartenrij__card--zijaanzij {
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;
	overflow: hidden;
	/* Reset the base .kc-kaartenrij__card's own border (this variant still
	   carries that class for its display/padding etc.) - restored below
	   only when rand_kleur is actually set on the item. */
	border: none;
	border-radius: 8px;
	padding: 16px;
}
@media (min-width: 640px) {
	html .kc-kaartenrij__card--zijaanzij {
		grid-template-columns: 1fr 1fr;
	}
}
html .kc-kaartenrij__card--zijaanzij-rand {
	border: 1px solid;
}
html .kc-kaartenrij__zijaanzij-text {
	display: flex;
	flex-direction: column;
}
@media (min-width: 640px) {
	html .kc-kaartenrij__zijaanzij-text {
		padding: 16px;
	}
}
html .kc-kaartenrij__zijaanzij-title {
	margin: 0;
	font-family: 'Nunito', sans-serif !important;
	font-weight: 700 !important;
	font-size: 24px !important;
}
html .kc-kaartenrij__card--zijaanzij .kc-arrow-link {
	padding-top: 40px;
}
html .kc-kaartenrij__zijaanzij-foto {
	width: 100%;
	align-self: start;
	aspect-ratio: 19 / 21;
	object-fit: cover;
	border-radius: 8px;
}

/* Hello Elementor's reset.css sets a blanket h2{font-size:2rem} that
   directly matches this <h2>, beating the inherited responsive size set on
   the ancestor .elementor-element-kcvoorwietitle - same "direct match beats
   inheritance" issue as the hero paragraph fix. */
html .elementor-element-kcvoorwietitle h2 {
	font-size: 48px !important;
}
@media (max-width: 767px) {
	html .elementor-element-kcvoorwietitle h2 {
		font-size: 30px !important;
	}
}
/* kcvoorwietitle isn't the last child in its column, so it was getting
   Elementor's default not-last-child margin-bottom stacked on top of its
   own explicit _margin (40px desktop / 24px mobile) - same recurring bug as
   the hero video. Zeroing it leaves exactly the intended _margin gap. */
html .elementor-element-kcvoorwietitle {
	margin-bottom: 0 !important;
}

/* --- DashboardBanner widget --- */
html .kc-dashboardbanner {
	position: relative;
	max-width: 1320px;
	margin: 0 auto;
}
html .kc-dashboardbanner__blob {
	position: absolute;
	aspect-ratio: 1 / 1;
	pointer-events: none;
	left: -40%;
	top: 50%;
	width: 45%;
	transform: translateY(-50%);
	display: none;
}
@media (min-width: 1200px) {
	html .kc-dashboardbanner__blob {
		display: block;
	}
}
html .kc-dashboardbanner__card {
	position: relative;
	padding: 16px;
}
@media (min-width: 640px) {
	html .kc-dashboardbanner__card {
		padding: 32px 56px;
	}
}
html .kc-dashboardbanner__bg {
	position: absolute;
	inset: 0;
	overflow: hidden;
	border-radius: 16px;
	background-color: #ea5461;
	pointer-events: none;
}
html .kc-dashboardbanner__pattern {
	position: absolute;
	top: 0;
	right: 0;
	height: 100%;
	width: auto;
	display: none;
}
@media (min-width: 1024px) {
	html .kc-dashboardbanner__pattern {
		display: block;
	}
}
html .kc-dashboardbanner__inner {
	position: relative;
}
html .kc-dashboardbanner__laptop {
	position: absolute;
	pointer-events: none;
	top: 50%;
	right: 16px;
	height: 285%;
	width: auto;
	transform: translateY(-50%);
	display: none;
}
@media (min-width: 1024px) {
	html .kc-dashboardbanner__laptop {
		right: 40px;
		display: block;
	}
}
html .kc-dashboardbanner__content {
	position: relative;
	max-width: 512px;
}
html .kc-dashboardbanner__tagline {
	margin: 0;
	font-size: 18px !important;
	color: #ffffff;
	font-family: 'Roboto', sans-serif !important;
}
html .kc-dashboardbanner__title {
	margin: 8px 0 0 0;
	font-family: 'Nunito', sans-serif !important;
	font-weight: 700 !important;
	color: #ffffff;
	font-size: 24px !important;
}
@media (min-width: 640px) {
	html .kc-dashboardbanner__title {
		font-size: 30px !important;
	}
}
html .kc-dashboardbanner__button {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	margin-top: 32px;
	padding: 12px 24px;
	border-radius: 50px;
	background-color: #e4c115;
	color: #037d36 !important;
	font-family: 'Nunito', sans-serif !important;
	font-weight: 700 !important;
	font-size: 16px !important;
	text-decoration: none !important;
	transition: background-color 0.15s ease, color 0.15s ease;
}
html .kc-dashboardbanner__button:hover {
	background-color: #ffffff;
	color: #ea5461 !important;
}
html .kc-dashboardbanner__button i {
	font-size: 12px;
	transition: transform 0.15s ease;
}
html .kc-dashboardbanner__button:hover i {
	transform: translateX(5px);
}
@media (max-width: 450px) {
	html .kc-dashboardbanner__button {
		width: 100%;
		justify-content: space-between;
	}
}
/* The niet-wit -> lichtgroen gradient behind this banner only makes sense
   when it hands off into a section that's ITSELF a full-width green
   background - otherwise it's just an arbitrary green stripe with nothing
   below to justify it. Rather than hardcoding that assumption, this section
   stays plain and only grows the gradient when its very next sibling
   opts in with the `kc-bg-groen-full` marker class (add that class via
   Elementor's Advanced > CSS Classes field on any section that has a
   full-width lichtgroen/groen background, to hand off from this banner). */
html .elementor-element-kcdashboardbannersec:has(+ .kc-bg-groen-full) {
	background-image: linear-gradient(to bottom, #fff4eb 0%, #fff4eb 50%, #83bc4c 50%);
}

/* --- "Kennis en onderbouwing" heading (same reset.css h2{2rem} fight as
   the hero paragraph / Voor wie heading) --- */
html .elementor-element-kckennisonderbouwingtitle h2 {
	font-size: 48px !important;
}
@media (max-width: 767px) {
	html .elementor-element-kckennisonderbouwingtitle h2 {
		font-size: 36px !important;
	}
}
html .elementor-element-kckennisonderbouwingtitle {
	margin-bottom: 0 !important;
}
/* This instance's cards use the source's 31:19 image ratio instead of the
   Waarom/Hoe/Wat instance's 9:4 - scoped to this widget ID only. */
html .elementor-element-kckennisonderbouwing .kc-kaartenrij__image {
	aspect-ratio: 31 / 19;
}

/* --- Shared "Meer informatie"-style arrow link, used by the
   InspiratiePraktijk and ActiviteitenAgenda widgets. color:inherit so each
   card's own text color (white on groen, groen on geel/white) applies
   without needing a per-instance color control. --- */
html .kc-arrow-link {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-top: auto;
	padding-top: 24px;
	font-family: 'Nunito', sans-serif !important;
	font-weight: 700 !important;
	font-size: 16px !important;
	color: inherit;
	text-decoration: none !important;
}
/* The Kit's own global `.elementor-kit-N a:hover { color: var(--e-global-
   color-primary) }` rule (dark green) otherwise wins on hover, since it
   has an extra element-selector making it more specific than a plain
   class selector - same "direct match beats inheritance" family of bug
   as elsewhere in this project, just via specificity this time instead
   of the DOM tree. Needed on white cards too (Praktijkverhalen), not
   just the dark ones, so this stays unconditional rather than color-
   specific. */
html .kc-arrow-link:hover {
	color: inherit !important;
}
html .kc-arrow-link__icon {
	display: inline-flex;
	font-size: 12px;
	transition: transform 0.15s ease;
}
html .kc-arrow-link:hover .kc-arrow-link__icon {
	transform: translateX(4px);
}

/* --- InspiratiePraktijk widget --- */
html .kc-inspiratie-card {
	position: relative;
	padding: 32px 16px;
	border-radius: 16px 16px 16px 16px;
	background-color: #037d36;
}
@media (min-width: 1024px) {
	html .kc-inspiratie-card {
		padding: 96px 16px;
	}
}
/* Decorative blob, centered exactly on the card's top-right corner:
   translate(50%, -50%) shifts the image by half its OWN size, which
   only centers correctly on the corner point when combined with
   top:0; right:0 on that same corner. At 36% width it's large enough to
   reach the actual card content (both the grid below it and, bleeding
   upward, Kennis en onderbouwing's cards above this section) - z-index:1
   keeps it above the plain card background, but .kc-inspiratie-grid and
   .kc-kaartenrij are given a higher z-index below specifically so their
   opaque cards paint over the blob instead of the blob covering them;
   the blob only remains visible in the empty green space around them. */
html .kc-inspiratie-card__blob {
	position: absolute;
	top: 0;
	right: 0;
	transform: translate(50%, -50%);
	width: 36%;
	aspect-ratio: 1 / 1;
	pointer-events: none;
	z-index: 1;
}
html .kc-inspiratie-card__title {
	max-width: 1320px;
	margin: 0 auto 24px auto;
	font-family: 'Nunito', sans-serif !important;
	font-weight: 700 !important;
	font-size: 36px !important;
	color: #ffffff;
}
@media (min-width: 768px) {
	html .kc-inspiratie-card__title {
		font-size: 48px !important;
	}
}
html .kc-inspiratie-card__title-accent {
	color: #83bc4c;
}
html .kc-inspiratie-grid {
	position: relative;
	z-index: 2;
	display: grid;
	gap: 24px;
	max-width: 1320px;
	margin: 0 auto;
}
@media (min-width: 1024px) {
	html .kc-inspiratie-grid {
		grid-template-columns: 1fr 1fr;
		grid-template-rows: 1fr 1fr;
	}
	html .kc-inspiratie-grid__praktijkverhalen {
		grid-row: 1 / span 2;
	}
}
@media (min-width: 1280px) {
	html .kc-inspiratie-grid {
		grid-template-columns: 2fr 1fr 1fr;
		grid-template-rows: 1fr;
	}
	html .kc-inspiratie-grid__praktijkverhalen {
		grid-row: auto;
	}
}
html .kc-inspiratie-grid__praktijkverhalen {
	border-radius: 8px;
	background-color: #ffffff;
	color: #037d36;
	padding: 16px;
}
html .kc-inspiratie-grid__praktijkverhalen-inner {
	display: grid;
	gap: 24px;
	height: 100%;
}
@media (min-width: 768px) {
	html .kc-inspiratie-grid__praktijkverhalen-inner {
		grid-template-columns: 1fr 1fr;
	}
}
@media (min-width: 1024px) {
	html .kc-inspiratie-grid__praktijkverhalen-inner {
		grid-template-columns: 1fr;
	}
}
@media (min-width: 1280px) {
	html .kc-inspiratie-grid__praktijkverhalen-inner {
		grid-template-columns: 1fr 1fr;
	}
}
html .kc-inspiratie-grid__praktijkverhalen-text {
	display: flex;
	flex-direction: column;
}
html .kc-inspiratie-grid__pv-title {
	margin: 0 0 16px 0;
	font-family: 'Nunito', sans-serif !important;
	font-weight: 700 !important;
	font-size: 24px !important;
	color: #037d36;
}
@media (min-width: 640px) {
	html .kc-inspiratie-grid__pv-title {
		margin-bottom: 32px;
		font-size: 30px !important;
	}
}
html .kc-inspiratie-grid__pv-tekst {
	font-family: 'Roboto', sans-serif !important;
	font-size: 18px !important;
	color: #000000;
}
html .kc-inspiratie-grid__pv-foto {
	width: 100%;
	align-self: start;
	aspect-ratio: 38 / 43;
	object-fit: cover;
	border-radius: 6px;
}
html .kc-inspiratie-grid__side-card {
	display: flex;
	flex-direction: column;
	border: 1px solid #ffffff;
	border-radius: 8px;
	background-color: #037d36;
	color: #ffffff;
	padding: 16px;
}
@media (min-width: 640px) {
	html .kc-inspiratie-grid__side-card {
		padding: 24px;
	}
}
html .kc-inspiratie-grid__side-card-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}
html .kc-inspiratie-grid__side-title {
	margin: 0;
	font-family: 'Nunito', sans-serif !important;
	font-weight: 700 !important;
	font-size: 24px !important;
	color: #ffffff;
}
@media (min-width: 768px) {
	html .kc-inspiratie-grid__side-title {
		font-size: 30px !important;
	}
}
html .kc-inspiratie-grid__side-icon {
	height: 40px;
	width: auto;
	flex-shrink: 0;
}
html .kc-inspiratie-grid__side-tekst {
	margin-top: 16px;
	font-family: 'Roboto', sans-serif !important;
	font-size: 18px !important;
	color: #ffffff;
}

/* --- ActiviteitenAgenda widget ("Blijf op de hoogte") --- */
html .kc-activiteitenagenda-card {
	position: relative;
	z-index: 2;
	max-width: 1320px;
	margin: 0 auto;
	padding: 16px;
	border-radius: 16px;
	background-color: #e4c115;
}
@media (min-width: 768px) {
	html .kc-activiteitenagenda-card {
		padding: 32px;
	}
}
@media (min-width: 1024px) {
	html .kc-activiteitenagenda-card {
		padding: 64px;
	}
}
@media (min-width: 1280px) {
	html .kc-activiteitenagenda-card {
		padding: 112px;
	}
}
html .kc-activiteitenagenda-card__title {
	margin: 0;
	font-family: 'Nunito', sans-serif !important;
	font-weight: 700 !important;
	font-size: 36px !important;
	color: #037d36;
}
@media (min-width: 768px) {
	html .kc-activiteitenagenda-card__title {
		font-size: 48px !important;
	}
}
html .kc-activiteitenagenda-card__title-wit {
	color: #ffffff;
}
html .kc-activiteitenagenda-grid {
	display: grid;
	gap: 24px;
	margin-top: 16px;
}
@media (min-width: 768px) {
	html .kc-activiteitenagenda-grid {
		margin-top: 40px;
	}
}
@media (min-width: 1024px) {
	html .kc-activiteitenagenda-grid {
		grid-template-columns: 3fr 2fr;
	}
}
html .kc-activiteitenagenda-grid__agenda {
	border: 1px solid #037d36;
	border-radius: 8px;
	background-color: #e4c115;
	color: #037d36;
	padding: 16px;
}
html .kc-activiteitenagenda-grid__agenda-inner,
html .kc-activiteitenagenda-grid__agenda {
	display: grid;
	gap: 24px;
}
@media (min-width: 640px) {
	html .kc-activiteitenagenda-grid__agenda {
		grid-template-columns: 1fr 1fr;
	}
}
html .kc-activiteitenagenda-grid__agenda-text {
	display: flex;
	flex-direction: column;
}
html .kc-activiteitenagenda-grid__agenda-title {
	margin: 0 0 16px 0;
	font-family: 'Nunito', sans-serif !important;
	font-weight: 700 !important;
	font-size: 24px !important;
	color: #037d36;
}
@media (min-width: 768px) {
	html .kc-activiteitenagenda-grid__agenda-title {
		font-size: 30px !important;
	}
}
html .kc-activiteitenagenda-grid__agenda-foto {
	width: 100%;
	align-self: start;
	aspect-ratio: 295 / 344;
	object-fit: cover;
	border-radius: 6px;
}
html .kc-activiteitenagenda-grid__side {
	display: grid;
	gap: 24px;
	grid-template-rows: 1fr 1fr;
}
html .kc-activiteitenagenda-grid__side-card {
	position: relative;
	display: flex;
	flex-direction: column;
	border: 1px solid #037d36;
	border-radius: 8px;
	background-color: #e4c115;
	color: #037d36;
	padding: 16px;
}
@media (min-width: 640px) {
	html .kc-activiteitenagenda-grid__side-card {
		padding: 24px;
	}
}
html .kc-activiteitenagenda-grid__side-icon {
	position: absolute;
	top: 24px;
	right: 24px;
	height: 40px;
	width: auto;
}
html .kc-activiteitenagenda-grid__side-title {
	max-width: 70%;
	margin: 0;
	font-family: 'Nunito', sans-serif !important;
	font-weight: 700 !important;
	font-size: 24px !important;
	color: #037d36;
}
@media (min-width: 768px) {
	html .kc-activiteitenagenda-grid__side-title {
		font-size: 30px !important;
	}
}

/* --- Conditional layering between "Inspiratie" and "Blijf op de hoogte" ---
   Both sections look complete standalone; when adjacent, they hand off into
   each other with zero gap and a shared lichtgroen backdrop, entirely via
   :has() - no build-time assumption baked in, so removing/reordering either
   section in Elementor later re-derives the right look automatically. */
html .elementor-element-kcinspiratiesec {
	padding-top: 16px;
	padding-bottom: 64px;
	padding-left: 16px;
	padding-right: 16px;
}
@media (min-width: 640px) {
	html .elementor-element-kcinspiratiesec {
		padding-top: 32px;
	}
}
@media (min-width: 1024px) {
	html .elementor-element-kcinspiratiesec {
		padding-top: 64px;
	}
}
/* One continuous lichtgroen backdrop runs behind both sections when
   paired, plain and unbroken (no dark green in the backdrop itself - the
   dark green Inspiratie card is a separate opaque box sitting on top of
   it, unaffected by any of this). It jumps instantly to transparent
   about halfway down the yellow card, revealing plain page background
   for the rest of Blijf op de hoogte. */
html .elementor-element-kcinspiratiesec:has(+ .elementor-element-kcblijfsec) {
	background-color: #83bc4c;
	padding-bottom: 0 !important;
	margin-bottom: 0 !important;
}
html .elementor-element-kcinspiratiesec:has(+ .elementor-element-kcblijfsec) .kc-inspiratie-card {
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
}
html .elementor-element-kcblijfsec {
	padding-top: 64px;
	padding-bottom: 64px;
	padding-left: 16px;
	padding-right: 16px;
}
@media (max-width: 767px) {
	html .elementor-element-kcblijfsec {
		padding-top: 32px;
		padding-bottom: 32px;
	}
}
/* Hard edge at 50% of this section's own height - with zero top padding
   the yellow card starts right at the section's top, so ~50% of the
   section lands close to halfway down the card itself. */
html body:has(.elementor-element-kcinspiratiesec + .elementor-element-kcblijfsec) .elementor-element-kcblijfsec {
	background-image: linear-gradient(to bottom, #83bc4c 0%, #83bc4c 50%, transparent 50%, transparent 100%);
	padding-top: 0 !important;
	margin-top: 0 !important;
}
/* Elementor's default not-last-child margin-bottom (20px) on this
   widget's own .elementor-widget-container - same recurring bug as the
   hero video - was adding slack to Inspiratie's own section height,
   independent of the dark-green-wrap issue below but worth tightening. */
html .elementor-element-kcinspiratiepraktijk > .elementor-widget-container {
	margin-bottom: 0 !important;
}
/* Same default margin-bottom bug on ActiviteitenAgenda's own widget
   container - this one matters more directly, since kcblijfcol's height
   is exactly what the "100% - 100px" calculation below is measured
   against; without this, the column reads 20px taller than the actual
   yellow card, throwing the offset off by that much. */
html .elementor-element-kcactiviteitenagenda > .elementor-widget-container {
	margin-bottom: 0 !important;
}
/* Dark green wrap for Blijf op de hoogte, positioned against the COLUMN
   rather than the section: the column's own height tracks the yellow
   card's actual rendered height directly (no padding baked in, unlike
   the section, which also includes this section's own top/bottom
   padding) - so "100% - 100px" here reliably lands just short of the
   card's real bottom at any viewport width, instead of a fixed
   percentage of a height that includes unrelated padding. */
html body:has(.elementor-element-kcinspiratiesec + .elementor-element-kcblijfsec) .elementor-element-kcblijfcol {
	position: relative;
	/* Same inline padding as .kc-inspiratie-card, so the yellow card
	   (a normal-flow child, constrained by this padding) keeps the same
	   inset from the dark green edge that Inspiratie's own 3 cards get
	   from their card's padding - lines the two up exactly. The ::before
	   below is unaffected: percentages on an absolutely positioned
	   element resolve against the containing block's padding box, not
	   its content box, so it stays flush edge-to-edge regardless. */
	padding-left: 16px;
	padding-right: 16px;
}
html body:has(.elementor-element-kcinspiratiesec + .elementor-element-kcblijfsec) .elementor-element-kcblijfcol::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: calc(100% - 100px);
	background-color: #037d36;
	border-radius: 0 0 16px 16px;
	z-index: 0;
}

/* --- Ons netwerk --- */
/* The decorative blob's own custom_css sets position:absolute; top:0,
   which needs a positioned ancestor to anchor against - otherwise it
   bubbles up to the viewport itself. */
html .elementor-element-kcnetwerksec {
	position: relative;
}
/* Same reset.css h2{font-size:2rem} fight as every other heading built
   this way in this project. */
html .elementor-element-kcnetwerktitle h2 {
	font-size: 48px !important;
}
@media (max-width: 767px) {
	html .elementor-element-kcnetwerktitle h2 {
		font-size: 36px !important;
	}
}