/*
* VNK inner-page reskin overrides.
*
* Kept separate from kc-reskin.css (homepage + legacy sitewide fixes) on
* purpose: the client hasn't reviewed these inner-page changes yet, so they
* need to be revertable independently of the already-in-progress homepage
* work. Delete this file + its enqueue in functions.php to fully revert.
*/
/* --- Page heading banner ---
* Structural selectors only (no per-post element IDs): every inner page's
* heading banner is a `section.header > .elementor-container >
* .elementor-column` with a single centered `heading` widget inside, but
* each page saved its own background_color/margin values individually when
* it was built, so a class-only rule reaches all of them uniformly
* regardless of what each page happens to have saved.
*
* Elementor doesn't actually paint the column's own box - it sets
* background-color on the column's inner `.elementor-widget-wrap`, which
* covers the column completely, so that's the element that has to be
* targeted or the column-level color is invisible underneath it. Same story
* for the heading's bottom spacing: it comes from `.elementor-widget-container`
* (the h1's direct parent), not the h1 element itself.
*/
html .header {
background-color: #83bc4c !important;
}
/* The nested .elementor-widget-wrap used to get this same green directly
(see original comment below on why that was needed for column-level
banners), but painting it there put an opaque layer directly over the
watermark image living on the section itself, blocking it from view.
The section-level rule above already forces green on every banner via
!important regardless of what each page's own settings say, so the
wrap can be left transparent and just let that same green show through
from behind it - same visual result, minus the watermark being hidden. */
html .header .elementor-widget-wrap {
background-color: transparent !important;
}
/* Decorative logo watermark - same asset/treatment originally meant for
this banner (not the homepage's video hero, which got reverted). Lives
on the section itself (`.header`), not the nested `.elementor-widget-
wrap`; background-size is height-based on purpose so it overshoots and
gets cut off top and bottom rather than being squeezed to fit. The
SVG's own fill-opacity (15%) is what gives the blend into the green -
a wrapper-level CSS opacity would fade the section's own text/children
too, not just the watermark. */
html .header {
background-image: url('https://vnk.ontwikkeling.ps.themindoffice.nl/wp-content/uploads/2026/08/kindcentra-logo-1-white.svg');
background-repeat: no-repeat;
background-position: right center;
background-size: auto 120%;
}
/* Padding belongs on `.header` itself - the one element that's genuinely
* full-bleed (spans the true viewport width, same as every other section on
* the page). Putting it on the nested `.elementor-widget-wrap` instead (as a
* first pass here did) still looks fine on its own, but it shifts the origin
* point that the breadcrumbs' `max-width:1320px; margin:auto` below centers
* against - that box is then 32px narrower than the page's real width, so
* its centered content ends up offset from every other section's content on
* the page, which anchors its own centering to the true full width. Since
* background-color on an element isn't affected by that same element's own
* padding (padding only repositions children, not the element's own paint
* box), moving it here doesn't undo the full-bleed green above either.
* `.elementor-widget-wrap` still needs its own padding forced to 0 - it's
* where each page's original saved padding value actually lives, and it'd
* otherwise add its own inset on top of this one. */
html .header {
padding: 50px 16px 12px 16px !important;
}
html .header .elementor-widget-wrap {
padding: 0 !important;
}
html .header .elementor-heading-title {
color: #ffffff !important;
}
html .header .elementor-widget-container {
margin-bottom: 0 !important;
}
/* Elementor's own "Background Overlay" control is set on several of the
* container-based banners (from whatever template they were cloned from) -
* a pale, ~40%-opacity fill that reads as a washed-out/bright film over the
* green and over any text box beneath it. Two different implementations
* depending on element type, so both need killing:
* - classic section/column: a real `.elementor-background-overlay` div.
* - the newer flexbox "container" type (`.e-con`, used by these banners):
* no such div at all - it's rendered via the container's own `::before`
* (`content: var(--background-overlay); opacity: var(--overlay-opacity)`),
* which the div-only rule below never touched. */
html .header .elementor-background-overlay {
display: none !important;
}
html .header::before {
display: none !important;
}
/* --- Breadcrumbs inside the banner ---
* Rendered via the [kc_menu_breadcrumbs] shortcode (functions.php) instead
* of Elementor's own breadcrumbs widget - that one follows WP page-parent
* hierarchy, not this site's nav menu, and is a Pro-licensed feature that
* isn't active here anyway. Sits as a widget right after the heading (JSON
* order), so it already renders below the title - this just aligns it left
* (to match the page content's own alignment) and keeps it legible against
* the green banner. No horizontal padding of its own - that comes from the
* banner-level padding above, so it lines up with the heading/subtitle
* instead of being inset an extra step further.
*/
html .kc-breadcrumbs {
max-width: 1320px;
width: 100% !important;
margin: 8px auto 0 auto;
text-align: left !important;
align-self: stretch !important;
}
html .header #breadcrumbs {
margin-bottom: 0 !important;
}
html .kc-breadcrumbs,
html .kc-breadcrumbs a,
html .header #breadcrumbs,
html .header #breadcrumbs .breadcrumb_last {
color: #ffffff !important;
}
/* --- Per-widget one-offs from client feedback ---
* Elementor Pro's own per-widget "Custom CSS" control is a licensed feature
* (ElementorPro\Modules\CustomCss - gated on an active Pro license, which
* this install doesn't have) and silently no-ops, so these are done as
* plain element-ID rules instead - the same approach used everywhere else
* in this stylesheet.
*/
/* integratie: decorative icon image above the page, client wants it hidden
for now until a real design for it exists. */
html .elementor-element-0f1c9c6 {
display: none !important;
}
/* pact-voor-kindcentra: TextMedia's title-color dropdown (geel/paars/blauw/
groen, where "groen" already means lichtgroen elsewhere) has no plain
"dark green" option, so this can't just be a settings change - "PACT voor
kindcentra" itself goes to the site's actual dark green, and its subtitle
(which the widget never gives a color control at all - see
widgets/text-media.php, the is unstyled by design) goes lichtgroen. */
html .elementor-element-d5cfc9b h2.title {
color: #037d36 !important;
}
/* platformkc: the "Deelnemende Partijen" Overzicht-teams title (team.php's
plain, unclassed ) is unstyled by the widget itself - default color
and whatever margin the theme's base h2 style gives it, which reads as
too much gap before the actual list. Scoped to this one instance so it
doesn't affect the same widget on the other overzicht pages. */
html .elementor-element-cdfd6ed .newsitems h2 {
color: #037d36 !important;
margin-bottom: 8px !important;
}
/* The actual gap wasn't the h2's own margin - it's team.php always printing
an (subtitle) and
(text) after the title regardless of whether
those fields have content; both are empty here, but an empty tag still
takes up its own line-height + margin. Hiding them (ID-scoped - the same
widget on other pages does use these fields for real content). */
html .elementor-element-cdfd6ed .newsitems h3,
html .elementor-element-cdfd6ed .newsitems > .component-title > div > p {
display: none !important;
}
html .elementor-element-d5cfc9b h3 {
color: #83bc4c !important;
}
/* partners-overzicht: card spacing (.team_item h4/h3, hardcoded in
team.php's own