/* ---------------------------------------------------------------------------
   Sint Vincentius Heusden-Zolder — 1-op-1 overgenomen van de Elementor-site.
   Nagemeten op de oude site (1366 px en 390 px): blauw #326BB0, lichtblauwe dienstkaarten
   #6EC1E4, tekst #435061, menu #54595F, container 1140 px, Montserrat.
   De maten hieronder volgen het Elementor-raster van de oude site: elke kolom 10 px binnenmarge,
   20 px tussen widgets, koppen in een sectie met 20 px rondom, alinea's met 0.9em ondermarge.
   --------------------------------------------------------------------------- */
/* Montserrat als variabel lettertype (100–900), zelf gehost; de vorige bestanden waren een subset waarin
   letters ontbraken, waardoor de browser per letter terugviel op Arial. */
@font-face{font-family:'Montserrat';src:url('assets/montserrat.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap;
  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}
@font-face{font-family:'Montserrat';src:url('assets/montserrat-ext.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap;
  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}

:root{
  --sp-container:1140px;
  --sp-narrow:1140px;
  --sp-gutter:10px;
  --sp-gap:0px;
  --sp-primary:#326BB0;
  --sp-primary-contrast:#fff;
  --sp-secondary:#54595F;
  --sp-text:#435061;
  --sp-muted:#7A7A7A;
  --sp-line:#e3e3e3;
  --sp-surface:#6EC1E4;
  --sp-bg:#fff;
  --sp-radius:0;
  --sp-btn-radius:2px;
  --sp-font:'Montserrat',Arial,Helvetica,sans-serif;
  --sp-font-heading:'Montserrat',Arial,Helvetica,sans-serif;
  --svhz-topbar-h:46px;
}

body{font-family:var(--sp-font);font-size:16px;line-height:24px;color:var(--sp-text);background:#fff;-webkit-font-smoothing:antialiased;position:relative}
a{color:var(--sp-primary)}
img{max-width:100%;height:auto}

/* koppen: Elementor-kit — h1/h2 blauw, 32 px, gewicht 300, hoofdletters; h3 in tekstkleur */
h1,h2,h3,h4,h5,h6{font-family:var(--sp-font-heading);font-weight:300;text-transform:uppercase;color:var(--sp-primary);margin:0 0 20px}
h1{font-size:36px;line-height:1.1}
h2{font-size:32px;line-height:32px}
h3{font-size:28px;line-height:28px;color:var(--sp-text)}
h4{font-size:18px;line-height:18px}
h5{font-size:16px}
h6{font-size:14px}
p{margin:0 0 .9em}

/* op een blauwe sectie (scheme "licht") keren kop- en tekstkleur om */
.sp-scheme-light h1,.sp-scheme-light h2,.sp-scheme-light h3,.sp-scheme-light h4,
.sp-scheme-light h5,.sp-scheme-light h6{color:#fff}

/* ---------- Elementor-raster ---------- */
.sp-section .sp-col{padding-top:10px;padding-bottom:10px}
.sp-section .sp-widget{margin-bottom:20px;display:flow-root}   /* Elementor-widgets zitten in een flexbox: marges lopen er niet door */
.sp-section .sp-widget:last-child{margin-bottom:0}
.sp-w-heading .sp-heading{margin:0}
.sp-w-heading:has(> h2){padding:20px}          /* koppen van een sectie: 20 px rondom (72 px hoog) */
.sp-text p,.sp-text ul,.sp-text ol{margin:0 0 .9em}
.sp-text ul,.sp-text ol{padding-left:40px;margin-bottom:0}
main .sp-text a:not(.sp-btn){color:#cc3366;text-decoration:none}   /* linkkleur van het Hello-thema */
main .sp-text a:not(.sp-btn):hover{color:#336}
.sp-section .sp-text > p:last-child{margin-bottom:.9em}
.sp-text h1{font-size:40px;line-height:48px;font-weight:500;text-transform:none;margin:8px 0 16px}
/* afbeeldingen staan zoals in Elementor op hun eigen breedte, gecentreerd */
.sp-figure:not([style*="--ratio"]):not([style*="--h"]) img{width:auto;max-width:100%;margin-left:auto;margin-right:auto}

/* sectie-afstanden zoals ze uit de import kwamen, op de maten van de oude site */
.sp-section.sp-pad-xs{padding:0 0 30px}
.sp-section.sp-pad-s{padding:20px 0}
.sp-section.sp-pad-m{padding:40px 0}
.sp-section.sp-padb-s{padding-bottom:30px}
.sp-section.sp-padb-m{padding-bottom:40px}

/* ---------- blauwe menubalk bovenaan ---------- */
.topbar{background:var(--sp-primary)}
.topbar-inner{display:flex;align-items:center;justify-content:space-between;min-height:var(--svhz-topbar-h)}
.topbar-icons{display:none}
.site-nav ul{list-style:none;margin:0;padding:0;display:flex}
.site-nav li{position:relative}
.site-nav .sp-menu{gap:0}
.site-nav a{display:block;border-radius:0;padding:13px 20px;font-size:13px;font-weight:700;line-height:20px;text-transform:uppercase;color:#fff;text-decoration:none}
.site-nav a:hover,.site-nav .is-active > a,.site-nav .current > a,.site-nav [aria-current="page"]{background:#fff;color:var(--sp-secondary)}
.site-nav ul ul{position:absolute;top:100%;left:0;display:none;flex-direction:column;min-width:200px;background:var(--sp-primary);z-index:40}
.site-nav li:hover > ul{display:flex}
.topbar-fb{display:inline-flex;align-items:center;gap:8px;color:#fff;font-size:16px;text-decoration:none;white-space:nowrap;padding-right:10px}
.topbar-fb svg{width:12px;height:12px}
.topbar-fb:hover{text-decoration:underline}

/* ---------- witte kop met logo en contactblokken ---------- */
.site-header{background:#fff}
.header-inner{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;min-height:108px}
.site-logo{padding:10px}
.site-logo img{display:block;width:68px;height:68px;object-fit:contain}
.header-contact{display:flex;align-items:center;gap:0;margin-top:45px}
.hc-item{display:inline-flex;align-items:center;gap:0;color:var(--sp-primary);text-decoration:none}
.hc-item svg{flex:none;color:#69727D;width:27px;height:27px;margin-right:12px}
.hc-item span{display:flex;flex-direction:column;line-height:1}
.hc-item small{font-size:11px;line-height:11px;font-weight:400;text-transform:uppercase;color:var(--sp-primary)}
.hc-item strong{font-size:14px;line-height:14px;font-weight:700;text-transform:uppercase;color:var(--sp-primary)}
.hc-sep{width:1px;height:34px;margin:0 23px 0 26px;background:#69727D}
.menu-btn{display:none}

/* ---------- diavoorstelling onder de kop (3 foto's, zachte overgang) ---------- */
.hero-slideshow{position:relative;height:176px;overflow:hidden;background:#d8d8d8}
.hs-slide{position:absolute;inset:0;background-size:cover;background-position:50% 50%;opacity:0;animation:svhz-fade 18s infinite}
.hs-slide:first-child{opacity:1}
@keyframes svhz-fade{0%{opacity:0;transform:scale(1)}5%{opacity:1}28%{opacity:1}33%{opacity:0}100%{opacity:0;transform:scale(1.08)}}
@media (prefers-reduced-motion:reduce){.hs-slide{animation:none;opacity:1}.hs-slide+.hs-slide{display:none}}

/* ---------- knoppen ---------- */
.sp-btn,.sp-button,a.sp-btn,button.sp-btn,.sp-widget-button a{
  display:inline-block;background:var(--sp-primary);color:#fff;border:0;border-radius:var(--sp-btn-radius);
  padding:10px 20px;font-family:var(--sp-font);font-size:13px;font-weight:400;line-height:13px;text-transform:uppercase;text-decoration:none;cursor:pointer}
.sp-btn:hover,.sp-button:hover,.sp-widget-button a:hover{background:var(--sp-surface);color:#fff}

/* ---------- titelband: blauwe sectie met enkel een kop (92 px hoog) ---------- */
.is-home main > .sp-section.sp-scheme-light:has(.sp-col > .sp-w-heading:only-child){margin-bottom:30px}

/* ---------- homepage ---------- */
.is-home main > .sp-section:first-of-type{padding:0;margin:40px 0}
.is-home main > .sp-section:first-of-type .sp-w-text{padding:30px 30px 0}
.is-home main > .sp-section:has(.sp-w-form){margin-top:51px}     /* NIEUWS-band: 30 + lege nieuwsrij + 20 */

/* dienstkaarten: zes lichtblauwe vakken met een witte scheidingslijn, zoals op de oude site */
.sp-row:has(> .dienstkaart.sp-col-2){gap:0;align-items:stretch;margin:0 -10px;
  grid-template-columns:16.666% 15.964% 16.261% 16.398% 16.666% 16.666%}
.sp-row:has(> .dienstkaart.sp-col-2) > .sp-col{grid-column:auto}
.dienstkaart.sp-col-2{padding:10px;border-right:1px solid #fff}
.dienstkaart.sp-col-2:last-child{border-right:0}
.dienstkaart h1,.dienstkaart h2,.dienstkaart h3,.dienstkaart h4,.dienstkaart h5,.dienstkaart h6,
.dienstkaart p,.dienstkaart li,.dienstkaart .sp-text{color:#fff}
.dienstkaart .sp-heading{font-size:18px;line-height:18px;font-weight:300;margin:0}
.dienstkaart .sp-text{font-size:14px;line-height:21px;font-weight:300}
.dienstkaart.sp-col-2 .sp-w-text{padding:16px}
.dienstkaart .sp-figure.sp-figure img{width:29%;height:auto;margin:0 auto;display:block}
.dienstkaart .sp-figure:not([style*="--ratio"]):not([style*="--h"]) img{width:29%}

/* contactpagina: kaarten van 3 per rij met 20 px tussenruimte */
.sp-row:has(> .dienstkaart.sp-col-4){column-gap:20px;align-items:stretch}
.dienstkaart.sp-col-4{padding:10px;margin:10px 0}
.dienstkaart.sp-col-4 .sp-w-text{padding:0 16px}
.dienstkaart.sp-col-4 strong{font-weight:500}
.dienstkaart.sp-col-4 a{color:#cc3366;text-decoration:none}
.dienstkaart .sp-w-text + .sp-w-text p:first-child{font-size:18px;line-height:18px;text-transform:uppercase;text-align:center}
.page-contact main > .sp-section:last-of-type .sp-heading{font-weight:500;text-transform:none}
.page-contact main > .sp-section:last-of-type .sp-w-heading{padding:0}
.page-contact main > .sp-section:has(.sp-w-form){margin-top:30px}

/* ---------- formulieren (Elementor Pro-formulier) ---------- */
main .sp-form{text-align:left}
main .sp-form-grid{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:15px;row-gap:22px}
main .sp-form-grid .sp-field-half{grid-column:span 1}
main .sp-form-grid .sp-field-full{grid-column:1 / -1}
main .sp-form input:not([type=checkbox]):not([type=radio]),main .sp-form textarea,main .sp-form select{
  width:100%;background:#fff;border:1px solid #69727D;border-radius:3px;padding:8px 16px;min-height:40px;
  font-family:var(--sp-font);font-size:15px;line-height:21px;color:#1f2124}
main .sp-form textarea{min-height:96px;height:96px;padding:5px 14px}
.sp-form ::placeholder{color:#757575}
/* de oude formulieren werkten met placeholders en hadden geen zichtbaar label; een leeg label zou
   enkel een los sterretje tonen */
.sp-form label:empty,.sp-form label:has(> .sp-req:only-child){display:none}
main .sp-form > .sp-field{margin-top:22px}
main .sp-form .sp-check{font-size:14px;line-height:21px;font-weight:300!important}
main .sp-form-actions{margin-top:22px;text-align:left}
main .sp-form button[type=submit]{width:calc(25% - 11px);min-width:180px;height:40px;padding:0 24px;border-radius:3px;font-size:15px;line-height:15px;justify-content:center}
.sp-scheme-light .sp-form button[type=submit]{background:#fff;color:var(--sp-primary)}
.sp-scheme-light .sp-form button[type=submit]:hover{background:var(--sp-surface);color:#fff}
.sp-scheme-light .sp-form label{color:#fff}

/* ---------- binnenpagina's ---------- */
/* Over ons: onder de blauwe sectie Missie 30 px wit */
.page-over-ons main > .sp-section:nth-of-type(2){margin-bottom:30px}

/* Helpen: kop "Materiële gift" sluit aan op de rij eronder; binnenkolommen met 10 px zijmarge */
.page-helpen main > .sp-section:nth-of-type(2){padding-bottom:10px}
.page-helpen main > .sp-section:nth-of-type(3) .sp-col,
.page-helpen main > .sp-section:nth-of-type(6) .sp-col{padding-left:10px;padding-right:10px}
.page-helpen main > .sp-section:nth-of-type(6){padding-top:10px}
.page-helpen main > .sp-section:nth-of-type(7){padding:0;margin-top:30px}

/* Wat wij doen: de JetElements-galerijen hadden vaste hoogtes */
.page-wat-wij-doen .sp-gallery{gap:20px}
.page-wat-wij-doen .sp-gallery-item{border-radius:0;background:none}
.page-wat-wij-doen .sp-gallery-item img{width:100%;height:var(--svhz-h,300px);aspect-ratio:auto;object-fit:cover;display:block}
.page-wat-wij-doen .sp-gallery-1{--cols:1}
.page-wat-wij-doen main > .sp-section:nth-of-type(2) .sp-gallery{--cols:3;--svhz-h:480px}
.page-wat-wij-doen main > .sp-section:nth-of-type(3) .sp-gallery{--svhz-h:286px}
.page-wat-wij-doen main > .sp-section:nth-of-type(6) .sp-gallery{--svhz-h:547px}
.page-wat-wij-doen .sp-gallery.sp-masonry{columns:auto;display:grid}

/* Nieuws: oudere nieuwsbrieven als lijst (Elementor-loop): titel 40 px, gewicht 500 */
.sp-postlist-list{display:block}
.svhz-nieuws{padding:10px 10px 45px}
.svhz-nieuws-titel{font-size:40px;line-height:40px;font-weight:500;text-transform:none;margin:0 0 20px}
.svhz-nieuws-titel a{color:var(--sp-primary);text-decoration:none}

/* ---------- voettekst ---------- */
.site-footer{background:#fff;color:var(--sp-text);border-top:2px solid #818181;margin:68px 0 27px}
.site-footer .sp-container{max-width:1200px;padding:0}
.footer-top{padding:0}
.footer-top-inner{display:flex;align-items:center}
.footer-logo{flex:0 0 25.583%;display:flex;justify-content:center;padding:10px}
.footer-logo img{display:block;width:104px;height:104px;object-fit:contain}
.footer-newsletter{flex:1;padding:10px}
.footer-newsletter .sp-form{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.footer-newsletter .sp-form-grid{display:block;flex:1;min-width:260px}
.footer-newsletter .sp-form > .sp-field{margin:0}
.footer-newsletter .sp-form-actions{margin:0}
.footer-newsletter label{display:none}
.site-footer .footer-newsletter input[type=email]{height:47px;border:1px solid #d8d8d8;border-radius:4px;padding:6px 16px;font-size:16px;font-weight:300;color:#353535}
.footer-newsletter button[type=submit]{display:inline-flex;align-items:center;gap:10px;white-space:nowrap;width:auto;min-width:203px;height:47px;padding:0 10px;
  border-radius:4px;font-size:15px;font-weight:500;line-height:15px;text-transform:none}
.footer-newsletter button[type=submit]::after{content:'';width:13px;height:14px;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z'/%3E%3C/svg%3E") center/contain no-repeat}
.footer-newsletter button[type=submit]:hover{background:#00dafc}
.footer-newsletter .sp-form-message{flex-basis:100%}
.footer-divider{border:0;border-top:1px solid #d8d8d8;margin:30px 0 50px}
.footer-bottom{padding:0}
.footer-bottom-inner{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:10px}
.footer-social{display:inline-flex;align-items:center;gap:20px;font-size:16px;line-height:24px;color:#3d4459}
.footer-social a{display:inline-flex;color:#3d4459}
.footer-social svg{width:19px;height:22px}
.footer-right{display:flex;flex-direction:column;align-items:flex-end;gap:20px;text-align:right}
.footer-credit{font-size:14px;line-height:14px;font-weight:300;color:#3d4459}
.footer-credit a{color:#3d4459;text-decoration:underline}
.footer-legal{font-size:13px;line-height:19.5px;color:#666}
.footer-legal a{color:#666;text-decoration:none}
.footer-legal a:hover,.footer-credit a:hover{color:var(--sp-primary)}

/* ---------- mobiel (Elementor: ≤ 767 px) ---------- */
@media (min-width:768px) and (max-width:1024px){
  /* tablet: dienstkaarten zoals Elementor — drie op 33 %, dan op 50 % */
  .sp-row:has(> .dienstkaart.sp-col-2){grid-template-columns:repeat(6,minmax(0,1fr));margin:0 -10px}
  .sp-row:has(> .dienstkaart.sp-col-2) > .sp-col{grid-column:span 2}
  .sp-row:has(> .dienstkaart.sp-col-2) > .sp-col:nth-child(n+4){grid-column:span 3}
  .dienstkaart.sp-col-2:nth-child(3),.dienstkaart.sp-col-2:nth-child(5){border-right:0}
}
@media (max-width:1024px){
  .site-footer{margin:5vw 0;padding:0 5%}
  .footer-top-inner{flex-direction:column}
  .footer-logo{flex-basis:auto}
  .footer-newsletter{width:100%;padding:0;margin:4% 0}
}
@media (max-width:767px){
  /* blauwe balk met enkel bel- en mail-icoon; het menu klapt open onder een knop onder het logo */
  .topbar-inner{min-height:49px;justify-content:flex-start;padding:0 10px}
  .topbar-icons{display:flex}
  .topbar-icons a{display:flex;justify-content:center;width:78px;padding:10px 0 9px;color:#fff;margin-right:20px}
  .topbar-fb{display:none}
  .site-nav{display:none;position:absolute;left:10px;right:10px;top:190px;background:#fff;z-index:50;box-shadow:0 10px 20px rgba(0,0,0,.12)}
  .site-nav.is-open{display:block}
  body.menu-open .site-header{padding-bottom:240px}   /* het Elementor-menu duwde de pagina omlaag (6 × 40 px) */
  .site-nav{box-shadow:none}
  .site-nav ul{flex-direction:column;align-items:stretch}
  .site-nav a{font-size:13px;font-weight:400;text-transform:none;color:#33373d;padding:10px 20px}
  .site-nav a:hover{background:#fff;color:#33373d}
  .site-nav .is-active > a,.site-nav [aria-current="page"]{background:#3f444b;color:#fff}
  .site-nav ul ul{position:static;display:block;background:#fff}
  .header-inner{flex-direction:column;align-items:center;justify-content:flex-start;gap:20px;min-height:151px;padding:10px 0}
  .site-logo{padding:0}
  .header-contact{display:none}
  .menu-btn{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:4px;width:33px;height:33px;padding:0;
    background:rgba(0,0,0,.05);border:0;border-radius:3px;cursor:pointer}
  .menu-btn span{display:block;width:18px;height:2.5px;background:#33373d;border-radius:1px}
  .menu-btn[aria-expanded="true"] span:nth-child(2){opacity:0}
  .menu-btn[aria-expanded="true"] span:first-child{transform:translateY(6.5px) rotate(45deg)}
  .menu-btn[aria-expanded="true"] span:last-child{transform:translateY(-6.5px) rotate(-45deg)}

  .sp-section > .sp-container{padding:0}
  .sp-section .sp-col{padding:10px}
  .is-home main > .sp-section:first-of-type .sp-w-text{padding:30px 30px 0}
  .sp-row:has(> .dienstkaart.sp-col-2){display:block;margin:0}
  .dienstkaart.sp-col-2{border-right:1px solid #fff}
  .dienstkaart.sp-col-2:last-child{border-right:0}
  .dienstkaart .sp-figure img{width:29%}
  .sp-row:has(> .dienstkaart.sp-col-4){display:block}
  .dienstkaart.sp-col-4{margin:10px}
  main .sp-form{text-align:left}
main .sp-form-grid{grid-template-columns:1fr}
  main .sp-form button[type=submit]{width:100%}
  .page-wat-wij-doen main > .sp-section:nth-of-type(1) .sp-gallery{gap:0}
  .page-wat-wij-doen main > .sp-section:nth-of-type(2) .sp-gallery{--cols:1!important;--svhz-h:493px}
  .page-wat-wij-doen .sp-gallery-1{--cols:1!important}
  .page-wat-wij-doen .sp-gallery-3{--cols:3!important}
  .page-wat-wij-doen .sp-gallery-4{--cols:4!important}
  .page-helpen main > .sp-section:nth-of-type(3) .sp-col{padding:10px}

  .site-footer{margin:5vw 0;padding:0 20px}
  .footer-newsletter{margin:10% 0 0}
  .footer-newsletter .sp-form{flex-direction:column;align-items:stretch}
  .footer-newsletter .sp-form-grid{min-width:0}
  .footer-newsletter button[type=submit]{width:100%;justify-content:center}
  .footer-divider{margin:30px 0 20px}
  .footer-bottom-inner{flex-direction:column;align-items:stretch;text-align:center;gap:20px;padding:0}
  .footer-social{flex-direction:column;gap:20px;font-size:18px}
  .footer-social svg{width:22px;height:25px}
  .footer-right{align-items:stretch;text-align:center}
  .footer-legal{text-align:right}
}