/* ============================================================================
   Ondernemerskring Krimpenerwaard - custom.css (Helix Ultimate + SP Page Builder Pro)
   Doel: het ontwerp van de oude site 1-op-1 behouden (afspraak Edwin 30-9-2026).
   Opbouw:
     1. de oude main.css (ongewijzigd in waarden, alleen opgeschoond) - zie OUD
     2. Bootstrap 4 -> 5 gelijktrekken (Helix levert BS 5.2; de oude site draaide op BS 4.3):
        goot 30px, container 1140 ook boven 1400px, navbar-opvulling, knoppen, links
     3. Helix en SPPB neutraliseren en de oude omhullende blokken nabootsen op SPPB-rijen:
        .okk-artikel (tekst zoals .row.content), .okk-rij1 (contentrow-one),
        .okk-ctr2 (tekst links, beeld rechts), .okk-ctr3 (beeld links, tekst rechts)
     4. nieuwe onderdelen in dezelfde vormtaal: kopfoto, kaarten Actueel/Denktank,
        publicaties, leden, logowanden, galerij
   Uitzondering op de MMX-kantlijn (1320): hier bewust de oude maat 1140 (ontwerp 100% intact).
   Prefix nieuwe classes: okk-
   ============================================================================ */

:root{
  --okk-groen:#00a458;
  --okk-blauw:#0075bf;
  --okk-link:#007bff;        /* Bootstrap 4-linkkleur van de oude site */
  --okk-link-hover:#0056b3;
  --bs-gutter-x:30px;
}

/* ============================== 1. OUD (main.css) ============================== */
html{position:relative;min-height:100%}
body,body.site{height:100%;margin-bottom:0;min-width:320px;font-family:proxima-nova,sans-serif;font-weight:300;font-style:normal;
  overflow-x:hidden;font-size:16px;line-height:26px;color:#000;padding-top:100px;background:#fff}
.lead{font-family:proxima-nova,sans-serif;font-weight:500;font-style:normal;font-size:20px;line-height:26px}
body h1,body .h1{font-family:proxima-nova,sans-serif;font-weight:700;font-style:normal;font-size:36px;color:#00a458;text-transform:uppercase}
body h2,body .h2{font-family:proxima-nova,sans-serif;font-weight:700;font-style:normal;font-size:32px;color:#00a458;text-transform:uppercase}
body h3,body .h3{font-family:proxima-nova,sans-serif;font-weight:700;font-style:normal;font-size:26px;color:#00a458;text-transform:uppercase}
body h4,body .h4{font-family:proxima-nova,sans-serif;font-weight:700;font-style:normal;font-size:24px;color:#00a458;text-transform:uppercase}
body :is(h1,h2,h3,h4,h5,h6){margin-top:0;margin-bottom:.5rem;line-height:1.2}
.circle{width:100%;position:relative;border-radius:50%;overflow:hidden;text-align:center}
.fixed-top{background-color:#fff}
.bg-light{background-color:#fff !important;box-shadow:0 5px 10px -6px rgba(0,0,0,.5)}
.okktopheader{background-color:#fff !important;height:60px}
.navbar.fixed-top{margin-top:50px}
.okktopmenu{padding-top:20px;height:30px;float:right;font-family:proxima-nova,sans-serif;font-weight:500;font-style:normal;font-size:18px;
  color:#0075bf;text-transform:uppercase;text-decoration:none;text-align:right}
.okktopmenu a{font-family:proxima-nova,sans-serif;font-weight:500;font-style:normal;font-size:18px;color:#0075bf;text-transform:uppercase;text-decoration:none;text-align:right}
.okktopmenu a:hover{color:#00a458}
.okklogobutton{margin-top:-30px}
.liquid-buttonxl path,.liquid-buttonlg path,.liquid-buttonmd path,.liquid-buttonsm path,.liquid-buttonxs path{cursor:pointer}
.okkcontent .content{padding-top:45px}
.okkcontent .content img{width:100%}
.okkcontent .svgoverlay{margin-top:-400px;position:absolute;z-index:1000}
.okkcontent .svgoverlay .svgshape{background-image:url("../images/okk/vorm-header.svg");height:400px;background-position:bottom right;background-repeat:no-repeat}
.okkcontent .contentbg{background-color:#fff;padding-top:45px;background-image:url("../images/okk/lijnen.svg");padding-bottom:90px;margin-bottom:45px;
  background-position:bottom center;background-repeat:no-repeat}
.leden p{font-size:12px}
.modulebutton{margin-left:-20px}
.contentrow-one{padding-top:45px}
section.ctr2 .moduletable img,section.ctr3 .moduletable img{width:100%}
.bottom{background:#0075bf;background:linear-gradient(to right,#0075bf 0%,#00a458 100%);color:#fff;margin-top:45px;padding-bottom:45px}
.bottom h3{color:#fff}
.bottom .bottom1 .moduletable,.bottom .bottom2 .moduletable,.bottom .bottom3 .moduletable,.bottom .bottom4 .moduletable{margin-top:30px}
.footer{background-color:#000;height:50px;color:#000}
.footer a{color:#fff}
.copyright p{text-align:center;font-size:12px;line-height:24px;color:#fff;margin-top:10px}
/* formulieren (RSForm) */
.okkcontent .form-control,.okkcontent .rsform-input-box,.okkcontent .rsform-text-box,.okkcontent .rsform-select-box,.okkcontent textarea.rsform-text-box{
  display:block;width:100%;height:34px;padding:24px 12px;font-size:14px;line-height:1.42857143;color:#000 !important;background-color:#cce3f2 !important;
  background-image:none;border:0 solid #cce3f2 !important;border-radius:0 !important;box-shadow:inset 0 1px 1px rgba(0,0,0,.075);
  transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s}
.okkcontent textarea.form-control,.okkcontent textarea.rsform-text-box{height:auto;min-height:120px;padding:12px}
.btn-primary{color:#fff;background-color:#0075bf;border-color:#0075bf;text-transform:uppercase;border-radius:20px}
.btn-secondary{color:#0075bf;background-color:#fff;border-color:#fff;text-transform:uppercase;border-radius:20px}
.btn-secondary:hover{background-color:#000;border-color:#000}

@media (min-width:576px){
  .navbar-brand img{width:100%;height:auto}
  a.navbar-brand{margin-right:0;margin-left:0}
}
@media (min-width:768px){ a.navbar-brand{margin-right:0;margin-left:0} }
@media (min-width:992px){
  .navbar-brand img{width:120%;height:auto;margin-top:-30px;margin-left:15px}
  .bottom .bottom1 .moduletable{margin-top:30px;padding-right:30px}
  .bottom .bottom2 .moduletable{margin-top:30px;padding-left:10px;padding-right:20px}
  .bottom .bottom3 .moduletable{margin-top:30px;padding-left:20px;padding-right:10px}
  .bottom .bottom4 .moduletable{margin-top:30px;padding-left:30px}
}
@media (min-width:1200px){
  .container-fluid.slider{margin-top:50px}
  .navbar-brand img{width:120%;height:auto;margin-top:-30px;min-width:300px}
  a.navbar-brand{margin-right:103px;margin-left:-30px}
}
@media (max-width:575.98px){
  .d-block.d-sm-block.d-md-none{margin-bottom:-30px}
  .navbar-collapse{padding-bottom:15px}
  .navbar-brand img{width:240px}
  .okkcontent .svgoverlay .svgshape{height:401px}
  .container-fluid.slider.p-0.m-0{margin-top:-30px !important}
}
@media (max-width:991.98px){ .navbar.fixed-top{margin-top:0} }

/* ======================= 2. Bootstrap 4 -> 5 gelijktrekken ====================== */
.container,.container-fluid,.row{--bs-gutter-x:30px}
@media (min-width:1400px){.container{max-width:1140px}}
/* BS5 geeft elk kind van .row breedte 100% en opvulling; in BS4 kregen alleen kolommen dat */
body .row > :not([class*="col-"]):not(.col){flex-shrink:1;width:auto;max-width:none;padding-left:0;padding-right:0;margin-top:0}
.no-gutters{--bs-gutter-x:0;margin-right:0;margin-left:0}
.no-gutters > .col,.no-gutters > [class*="col-"]{padding-right:0;padding-left:0}
.okkcontent a:not(.btn):not(.sppb-btn),.okk-link{color:var(--okk-link);text-decoration:none;background-color:transparent}
.okkcontent a:not(.btn):not(.sppb-btn):hover{color:var(--okk-link-hover);text-decoration:underline}
hr{margin:1rem 0;border:0;border-top:1px solid rgba(0,0,0,.1);opacity:1;color:inherit}
strong,b{font-weight:bolder}
.btn{font-weight:400;line-height:1.5;padding:.375rem .75rem;font-size:1rem;border:1px solid transparent}
.btn-sm{padding:.25rem .5rem;font-size:.875rem;line-height:1.5}
.btn-primary:hover,.btn-primary:focus{color:#fff;background-color:#0069d9;border-color:#0062cc}
.btn-secondary:hover,.btn-secondary:focus{color:#fff;background-color:#000;border-color:#000}
/* navbar: BS4 had 8px 16px opvulling en geen containeropvulling onder 992 */
.navbar.okk-nav{padding:.5rem 1rem;position:fixed;flex-wrap:wrap}
.navbar.okk-nav > .container{flex-wrap:wrap}
@media (max-width:991.98px){.navbar-expand-lg.okk-nav > .container{padding-right:0;padding-left:0}}
@media (min-width:992px){.navbar-expand-lg.okk-nav > .container{flex-wrap:nowrap}}
.navbar.okk-nav .navbar-brand{padding-top:.3125rem;padding-bottom:.3125rem;font-size:1.25rem;line-height:inherit}
@media (max-width:575.98px){.navbar.okk-nav a.navbar-brand{margin-right:1rem}}
.navbar.okk-nav .navbar-toggler{padding:.25rem .75rem;font-size:1.25rem;line-height:1;border:1px solid rgba(0,0,0,.1);border-radius:.25rem;color:rgba(0,0,0,.5)}
.navbar.okk-nav .navbar-toggler:focus{box-shadow:none;outline:1px dotted;outline:5px auto -webkit-focus-ring-color}
.okkmenu > .row{--bs-gutter-x:30px}
.okkmenu a:focus-visible{outline:2px solid var(--okk-blauw);outline-offset:2px;border-radius:30px}
mark{background:#0075bf;color:#fff;padding:0}

/* ======================= 3. Helix + SPPB neutraliseren ======================= */
#sp-header{display:none}                     /* Helix-header wordt niet gebruikt (eigen header.php) */
#sp-main-body,#sp-component,#sp-main-body > .container,#sp-main-body .container-inner{padding:0 !important;margin:0 !important;max-width:none !important;width:100% !important}
#sp-main-body > .row,#sp-main-body > .container > .container-inner > .row,#sp-main-body .row:has(> #sp-component){margin:0 !important;--bs-gutter-x:0}
#sp-component > .sp-column{padding:0}
#sp-page-builder,#sp-page-builder .page-content{padding:0;margin:0}
.okkcontent .sppb-section{padding:0 !important;margin:0 !important}
.okkcontent .sppb-section > .sppb-row-container{max-width:none !important;width:100% !important;padding:0 !important;margin:0 !important}
.okkcontent .sppb-row{margin:0 !important}
.okkcontent .sppb-row-column,.okkcontent .sppb-column,.okkcontent .sppb-column-addons{padding:0 !important;margin:0 !important}
.okkcontent .sppb-addon-wrapper{margin:0 !important}
.okkcontent .sppb-addon-content{margin:0}
.okkcontent .sppb-addon-text-block .sppb-addon-content,.okkcontent .sppb-addon-text-block{font-size:inherit;line-height:inherit;color:inherit}
.okkcontent .sppb-addon-single-image-container{display:block}
.sp-page-title,.article-details .article-header{display:none}
.okk-skip{position:absolute;left:-9999px;top:0;z-index:2000;background:#0075bf;color:#fff;padding:.6em 1em}
.okk-skip:focus{left:10px;top:10px;color:#fff}

/* --- .okk-artikel: SPPB-rij als  .container-fluid > .row.content > .col-xs-12  (de oude componentplek) --- */
.okkcontent .sppb-section.okk-artikel > .sppb-row-container{padding:0 15px !important}
.okkcontent .sppb-section.okk-artikel > .sppb-row-container > .sppb-row{display:flex !important;flex-wrap:wrap;margin:0 -15px !important;padding-top:45px}
@media (min-width:992px){.okkcontent .sppb-section.okk-artikel > .sppb-row-container > .sppb-row{justify-content:center}}
@media (min-width:1200px){.okkcontent .sppb-section.okk-artikel > .sppb-row-container > .sppb-row{max-width:1110px;margin-left:auto !important;margin-right:auto !important}}
@media (max-width:991.98px){.okkcontent .sppb-section.okk-artikel > .sppb-row-container > .sppb-row{margin-left:0 !important;margin-right:0 !important}}
.okkcontent .sppb-section.okk-artikel > .sppb-row-container > .sppb-row > .sppb-row-column{flex:0 1 auto !important;width:auto !important;max-width:100% !important;min-width:0}
.okkcontent .okk-artikel img{max-width:100%;height:auto}
.okkcontent .okk-artikel .sppb-addon-text-block img{width:100%}
.okkcontent .okk-artikel .circle{width:100%}
.okkcontent .okk-artikel.okk-smal > .sppb-row-container > .sppb-row > .sppb-row-column{flex:1 1 100% !important}

/* --- .okk-rij1: .container.contentrowml > .row.contentrow-one > .col-md-6 x2 --- */
.okkcontent .sppb-section.okk-rij1 > .sppb-row-container{width:100% !important;padding:0 15px !important;margin:0 auto !important}
@media (min-width:576px){.okkcontent .sppb-section.okk-rij1 > .sppb-row-container{max-width:540px !important}}
@media (min-width:768px){.okkcontent .sppb-section.okk-rij1 > .sppb-row-container{max-width:720px !important}}
@media (min-width:992px){.okkcontent .sppb-section.okk-rij1 > .sppb-row-container{max-width:960px !important;padding-left:0 !important}}
@media (min-width:1200px){.okkcontent .sppb-section.okk-rij1 > .sppb-row-container{max-width:1140px !important}}
.okkcontent .sppb-section.okk-rij1 > .sppb-row-container > .sppb-row{display:flex !important;flex-wrap:wrap;margin:0 -15px !important;padding-top:45px}
.okkcontent .sppb-section.okk-rij1 > .sppb-row-container > .sppb-row > .sppb-row-column{flex:0 0 100% !important;max-width:100% !important;width:100% !important;padding:0 15px !important}
@media (min-width:768px){.okkcontent .sppb-section.okk-rij1 > .sppb-row-container > .sppb-row > .sppb-row-column{flex:0 0 50% !important;max-width:50% !important}}

/* --- .okk-ctr2: section.ctr2 > .row.no-gutters.justify-content-end > .col-lg-5.contentrow-two + .col-lg-7 (beeld) --- */
/* --- .okk-ctr3: section.ctr3 > .row.no-gutters > .col-lg-5 (beeld) + .col-lg-7.contentrow-three --- */
.okkcontent .sppb-section:is(.okk-ctr2,.okk-ctr3) > .sppb-row-container > .sppb-row{display:flex !important;flex-wrap:wrap;margin:0 !important}
.okkcontent .sppb-section.okk-ctr2 > .sppb-row-container > .sppb-row{justify-content:flex-end}
.okkcontent .sppb-section:is(.okk-ctr2,.okk-ctr3) > .sppb-row-container > .sppb-row > .sppb-row-column{flex:0 0 100% !important;max-width:100% !important;width:100% !important;padding:0 !important}
@media (min-width:992px){
  .okkcontent .sppb-section.okk-ctr2 > .sppb-row-container > .sppb-row > .sppb-row-column:nth-child(1),
  .okkcontent .sppb-section.okk-ctr3 > .sppb-row-container > .sppb-row > .sppb-row-column:nth-child(1){flex:0 0 41.666667% !important;max-width:41.666667% !important}
  .okkcontent .sppb-section.okk-ctr2 > .sppb-row-container > .sppb-row > .sppb-row-column:nth-child(2),
  .okkcontent .sppb-section.okk-ctr3 > .sppb-row-container > .sppb-row > .sppb-row-column:nth-child(2){flex:0 0 58.333333% !important;max-width:58.333333% !important}
  /* tekstkolommen: max-breedte en marges zoals .contentrow-two / .contentrow-three */
  .okkcontent .sppb-section.okk-ctr2 > .sppb-row-container > .sppb-row > .sppb-row-column:nth-child(1){max-width:410px !important;margin-top:30px !important}
  .okkcontent .sppb-section.okk-ctr3 > .sppb-row-container > .sppb-row > .sppb-row-column:nth-child(2){max-width:610px !important;margin-top:30px !important;margin-left:90px !important}
}
.okkcontent :is(.okk-ctr2,.okk-ctr3) .sppb-addon-single-image-container{margin:0 0 1rem;line-height:26px}
.okkcontent :is(.okk-ctr2,.okk-ctr3) .sppb-addon-single-image img{width:100%;height:auto;display:inline;vertical-align:middle}
@media (max-width:991.98px){
  .okkcontent :is(.okk-ctr2,.okk-ctr3) .sppb-addon-text-block :is(h3,p,ul){margin-left:15px !important;margin-right:15px !important}
}
@media (max-width:991.98px){
  /* beeld staat onder 992 altijd boven de tekst? Nee: volgorde zoals in de html (ctr2: tekst, beeld; ctr3: beeld, tekst) */
}

/* --- .okk-container: sectie in een Bootstrap-container (540/720/960/1140) --- */
.okkcontent .sppb-section.okk-container > .sppb-row-container{width:100% !important;padding:0 15px !important;margin:0 auto !important}
@media (min-width:576px){.okkcontent .sppb-section.okk-container > .sppb-row-container{max-width:540px !important}}
@media (min-width:768px){.okkcontent .sppb-section.okk-container > .sppb-row-container{max-width:720px !important}}
@media (min-width:992px){.okkcontent .sppb-section.okk-container > .sppb-row-container{max-width:960px !important}}
@media (min-width:1200px){.okkcontent .sppb-section.okk-container > .sppb-row-container{max-width:1140px !important}}
/* BanenFestival: de oude tekst stond in een eigen <div class="container"> binnen de kolom = 15px opvulling */
.okkcontent .okk-artikel.okk-container-in .sppb-column-addons{padding:0 15px !important}
/* Home: lege componentplek van de oude site (45px ruimte tussen kopfoto en eerste blok) */
.okkcontent .sppb-section.okk-ruimte-rij{height:45px;overflow:hidden}
.okkcontent .sppb-section.okk-ruimte-rij .sppb-addon{display:none}
/* alle beelden in de componentplek 100% breed, zoals .okkcontent .content img */
.okkcontent .okk-artikel img{width:100%}
.okkcontent .okk-artikel .okk-galerij img{width:100% !important}
.sppb-dynamic-content-collection__item[hidden],.okk-dc-leden[hidden],.okk-dc-logos[hidden]{display:none !important}

/* --- lijnen (okk_lijnen): .row.contentbg ---
   Oud: de 45px ondermarge van de lijnen viel samen met de 45px bovenmarge van de kernenband. */
.okkcontent:has(.page-content > .sppb-section.okk-lijnen:last-child) ~ .bottom{margin-top:0}
.okkcontent .okk-lijnen-wrap{overflow:visible}
.okkcontent .row.contentbg{margin-left:-15px;margin-right:-15px}

/* ============================ 4. nieuwe onderdelen ============================ */
/* --- kopfoto (vervangt Smart Slider 3: 1200x600, schaalt mee, max 600 hoog) --- */
.okk-hero{position:relative;width:100%;height:min(50vw,600px);height:min(calc(var(--okk-vw,100vw) * .5),600px);overflow:hidden;background:#e9eef2}
.okk-hero-track{display:flex;height:100%;transition:transform .8s cubic-bezier(.25,.46,.45,.94)}
.okk-hero-slide{position:relative;flex:0 0 100%;height:100%;background-size:cover;background-position:50% 50%;background-repeat:no-repeat}
.okk-hero-canvas{position:relative;height:100%;width:100%;max-width:1200px;margin:0 auto}
.okk-hero-inner{position:absolute;left:0;top:50%;translate:0 calc(-50% + 22.5px);max-width:min(550px,100%);padding:10px;box-sizing:border-box}
.okk-hero-titel,.okk-hero h1.okk-hero-titel{font-family:proxima-nova,sans-serif;color:#fff;font-size:72px;line-height:1.2;font-weight:700;font-style:normal;
  text-shadow:1px 1px 1px #000;text-transform:uppercase;text-align:left;letter-spacing:normal;word-spacing:normal;margin:0;text-decoration:none}
@media (max-width:739.98px){.okk-hero-titel,.okk-hero h1.okk-hero-titel{font-size:36px}}
.okk-hero-slide .okk-hero-inner{opacity:0;transform:translateX(400px);transition:opacity .8s cubic-bezier(.25,.46,.45,.94),transform .8s cubic-bezier(.25,.46,.45,.94)}
.okk-hero.is-in .okk-hero-slide.is-in .okk-hero-inner,.okk-hero.is-in .okk-hero-slide:only-child .okk-hero-inner{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.okk-hero-track,.okk-hero-slide .okk-hero-inner{transition:none}}
.okkcontent .svgoverlay{left:0;right:0;pointer-events:none}
.okkcontent .svgoverlay > .row{--bs-gutter-x:30px}

/* --- kaarten Actueel / Denktank (oude "Responsive Grid", thema elegant: 4 per rij) --- */
.okk-kaarten.sppb-dynamic-content-collection,.okk-kaarten .sppb-dynamic-content-collection{display:grid !important;grid-template-columns:repeat(4,minmax(0,1fr)) !important;column-gap:2.66% !important;row-gap:30px !important}
@media (max-width:991.98px){.okk-kaarten.sppb-dynamic-content-collection,.okk-kaarten .sppb-dynamic-content-collection{grid-template-columns:repeat(2,minmax(0,1fr)) !important;column-gap:4% !important}}
@media (max-width:575.98px){.okk-kaarten.sppb-dynamic-content-collection,.okk-kaarten .sppb-dynamic-content-collection{grid-template-columns:1fr !important}}
.okk-kaarten .sppb-dynamic-content-collection__item{position:relative;display:flex !important;flex-direction:column;background:#fff;box-shadow:0 0 4px rgba(0,0,0,.1);overflow:hidden;padding:0 !important}
.okk-kaarten .sppb-dynamic-content-collection__item > *{width:100%}
.okk-kaarten .sppb-dynamic-content-collection__item > a.sppb-dynamic-content-collection__item-link{position:absolute !important;inset:0 !important;width:100% !important;height:100% !important;z-index:3}
.okk-kaarten .sppb-dynamic-content-collection__item .sppb-addon-wrapper{margin:0 !important}
.okk-kaarten .okk-k-foto img,.okk-kaarten .sppb-dynamic-content-image img{width:100%;aspect-ratio:10/7;object-fit:cover;display:block;margin:0 !important}
.okk-kaarten .sppb-dynamic-content-collection__item{border:1px solid #e5e5e5 !important;border-top:0 !important}
.okk-kaarten .okk-k-titel,.okk-kaarten .okk-k-titel .sppb-dynamic-content-text{font-family:proxima-nova,sans-serif;font-weight:700;font-size:24px;line-height:1.2 !important;color:#00a458;text-transform:uppercase;margin:0}
.okk-kaarten .sppb-addon-wrapper:has(.okk-k-titel){padding:10px 10px 0 !important;margin-top:10px !important}
.okk-kaarten .okk-k-titel{margin-bottom:.5rem}
.okk-kaarten .okk-k-intro,.okk-kaarten .okk-k-intro .sppb-dynamic-content-text{font-size:14px;font-weight:300;color:#555;line-height:1.4 !important;margin:0}
.okk-kaarten .sppb-addon-wrapper:has(.okk-k-intro){padding:0 10px !important;margin:0 0 8px !important}
.okk-kaarten .sppb-dynamic-content-collection__item::after{content:"Lees meer";display:inline-block;align-self:flex-start;margin:auto 10px 10px;color:#fff;background:#0075bf;
  border:1px solid #0075bf;border-radius:20px;text-transform:uppercase;padding:.25rem .5rem;font-size:.875rem;line-height:1.5;font-weight:400}
.okk-kaarten .sppb-dynamic-content-collection__item:hover::after{background:#0069d9;border-color:#0062cc}
.okk-kaarten .sppb-dynamic-content-collection__item:focus-within{outline:2px solid #0075bf;outline-offset:2px}
.okk-kaarten .okk-k-datum,.okk-kaarten .okk-k-datum .sppb-dynamic-content-text{font-size:13px;line-height:1.2 !important;text-transform:uppercase;color:#777;margin:8px 0 0}

/* --- detailpagina Actueel / Denktank (zoals een oud artikel: titel als h2, beeld, tekst) --- */
.okk-detail-titel,.okk-detail-titel .sppb-dynamic-content-text{font-family:proxima-nova,sans-serif;font-weight:700;font-size:32px;line-height:1.2 !important;color:#00a458;text-transform:uppercase;margin:0 0 .5rem}
.okk-detail-datum,.okk-detail-datum .sppb-dynamic-content-text{font-size:14px;line-height:1.5 !important;color:#555;margin:0 0 1rem}
.okk-detail-beeld img{width:100%;height:auto;display:block;margin:0 0 1rem}
.okk-detail-tekst,.okk-detail-tekst .sppb-dynamic-content-text{line-height:26px !important}
.okk-detail-tekst img{max-width:100%;height:auto}
.okk-dc-galerij ul.sppb-gallery{display:grid !important;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;padding:0;margin:30px 0 0;list-style:none}
@media (max-width:767.98px){.okk-dc-galerij ul.sppb-gallery{grid-template-columns:repeat(2,minmax(0,1fr))}}
.okk-dc-galerij ul.sppb-gallery li{margin:0 !important;width:auto !important}
.okk-dc-galerij ul.sppb-gallery img{width:100% !important;height:auto !important;aspect-ratio:3/2;object-fit:cover;display:block}
.okk-terug{margin:30px 0 0}

/* --- publicaties (homepage + overzicht): kaartjes in de vormtaal van de site --- */
.okk-publicaties-sectie{padding-top:45px}
.okk-publicaties-sectie h3{margin-bottom:20px}
.okk-dc-publicaties.sppb-dynamic-content-collection,.okk-dc-publicaties .sppb-dynamic-content-collection{display:grid !important;grid-template-columns:repeat(4,minmax(0,1fr)) !important;gap:30px !important}
@media (max-width:991.98px){.okk-dc-publicaties.sppb-dynamic-content-collection,.okk-dc-publicaties .sppb-dynamic-content-collection{grid-template-columns:repeat(2,minmax(0,1fr)) !important}}
@media (max-width:575.98px){.okk-dc-publicaties.sppb-dynamic-content-collection,.okk-dc-publicaties .sppb-dynamic-content-collection{grid-template-columns:1fr !important}}
.okk-dc-publicaties .sppb-dynamic-content-collection__item{position:relative;display:flex !important;flex-direction:column;padding:20px 20px 18px !important;background:#fff;
  box-shadow:0 0 4px rgba(0,0,0,.1);border-top:4px solid #0075bf;transition:border-color .2s}
.okk-dc-publicaties .sppb-dynamic-content-collection__item:hover{border-top-color:#00a458}
.okk-dc-publicaties .sppb-dynamic-content-collection__item .sppb-addon-wrapper{margin:0 !important}
.okk-dc-publicaties .okk-p-soort,.okk-dc-publicaties .okk-p-soort .sppb-dynamic-content-text{font-size:13px;font-weight:500;line-height:1.2 !important;letter-spacing:.04em;text-transform:uppercase;color:#0075bf;margin:0 0 8px}
.okk-dc-publicaties .okk-p-titel,.okk-dc-publicaties .okk-p-titel .sppb-dynamic-content-text{font-size:18px;font-weight:500;line-height:1.3 !important;color:#000;margin:0 0 10px}
.okk-dc-publicaties .okk-p-titel a{color:#000 !important;text-decoration:none !important}
.okk-dc-publicaties .sppb-dynamic-content-collection__item:hover .okk-p-titel a{color:#0075bf !important}
.okk-dc-publicaties .okk-p-datum,.okk-dc-publicaties .okk-p-datum .sppb-dynamic-content-text{font-size:14px;line-height:1.4 !important;color:#555;margin:auto 0 0}
.okk-dc-publicaties .okk-p-bestand,.okk-dc-publicaties .okk-p-link{display:none !important}
.okk-dc-publicaties .okk-is-pdf .okk-p-datum .sppb-dynamic-content-text::after{content:"  ·  pdf";color:#0075bf}
.okk-dc-publicaties .okk-is-link .okk-p-datum .sppb-dynamic-content-text::after{content:"  ·  link";color:#0075bf}
.okk-publicaties-meer{margin:30px 0 0}

/* --- leden --- */
.okk-dc-leden{display:none}
.okk-ledenzoek{margin:30px 0 30px}
.okk-ledenzoek input{padding:5px 5px 5px 10px;border:1px solid #0075bf;border-radius:20px;font-size:16px;line-height:26px;width:280px;max-width:100%;font-family:inherit;font-weight:300}
.okk-ledenzoek input:focus{outline:2px solid #0075bf;outline-offset:1px}
.okk-zoek-aantal{margin-left:15px;font-size:14px;color:#555}
.row.leden{margin-top:45px}
.row.leden h4{font-size:24px}

/* --- logowanden (Waardborrel, BanenFestival): oude opmaak row text-center > col-md-4 --- */
.okk-dc-logos{display:none}
.okk-logowand .row.text-center{margin-bottom:0}
.okk-logowand img{max-width:100%;height:auto}
.okk-logowand .col-12.col-md-4 img.img-fluid{width:auto}

/* --- fotogalerij (Waardborrel): muur van 6 kolommen, lichtbox --- */
.okk-galerij{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:5px;margin:30px 0 0}
@media (max-width:1199.98px){.okk-galerij{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}}
@media (max-width:991.98px){.okk-galerij{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}}
@media (max-width:767.98px){.okk-galerij{grid-template-columns:1fr;gap:4px}}
.okk-galerij a{display:block;overflow:hidden}
.okk-galerij img{width:100% !important;aspect-ratio:3/2;object-fit:cover;display:block;transition:transform .4s}
.okk-galerij a:hover img{transform:scale(1.05)}

/* --- lichtbox --- */
.okk-lb{position:fixed;inset:0;z-index:5000;background:rgba(0,0,0,.9);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .3s}
.okk-lb.is-open{opacity:1}
.okk-lb img{max-width:92vw;max-height:88vh;width:auto;height:auto;box-shadow:0 0 30px rgba(0,0,0,.5)}
.okk-lb button{position:absolute;background:none;border:0;color:#fff;font-size:48px;line-height:1;padding:10px 18px;cursor:pointer}
.okk-lb-x{top:10px;right:10px}.okk-lb-v{left:10px;top:50%;translate:0 -50%}.okk-lb-n{right:10px;top:50%;translate:0 -50%}

/* --- formulier-addon --- */
.okk-formulier{margin:0}
.okk-formulier .formResponse,.okk-formulier .alert{margin:0 0 20px}
.okk-formulier .rsform-block{margin-bottom:15px}
.okk-formulier label,.okk-formulier .formControlLabel{font-weight:500}
.okk-formulier .rsform-submit-button,.okk-formulier button[type=submit],.okk-formulier input[type=submit]{color:#fff;background:#0075bf;border:1px solid #0075bf;border-radius:20px;text-transform:uppercase;padding:.375rem .75rem;font-size:1rem;line-height:1.5}
.okk-formulier .rsform-submit-button:hover{background:#0069d9;border-color:#0062cc}
.visually-hidden{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0,0,0,0) !important;white-space:nowrap !important;border:0 !important}

/* ======================= 5. Helix-thema neutraliseren (gemeten op de testsite 30-9) ======================= */
/* Helix zet overflow-x:hidden op de binnenste wrapper -> eigen verticale schuifbalk op mobiel (15px smaller) */
body.site .body-innerwrapper{overflow:visible !important}
/* Helix: img{display:block;max-width:100%} - oud (BS4) waren beelden inline zonder max-breedte */
.navbar-brand img{display:inline;max-width:none}
.okkcontent img,.bottom img{display:inline}
.okkcontent .okk-kaarten img,.okkcontent .okk-dc-galerij img,.okkcontent .okk-galerij img,.okkcontent .okk-detail-beeld img{display:block}
/* Helix: body .btn{padding:17px 30px; line-height:1.25; font-weight:500; capitalize} -> terug naar Bootstrap 4 */
body.site .btn{text-transform:none;white-space:normal;font-size:1rem;font-weight:400;line-height:1.5;letter-spacing:normal;padding:.375rem .75rem;border:1px solid transparent;display:inline-block}
body.site .btn-primary,body.site .btn-secondary{text-transform:uppercase}
body.site .btn-sm{padding:.25rem .5rem;font-size:.875rem;line-height:1.5}
body.site .btn-primary{border-color:#0075bf}
body.site .btn-secondary{border-color:#fff}
body.site .btn-secondary:hover,body.site .btn-secondary:focus{border-color:#000}
.okkcontent label{margin-bottom:.5rem}
body.site .btn-secondary{color:#0075bf;background-color:#fff;border-color:#fff}
body.site .btn-secondary:hover,body.site .btn-secondary:focus{color:#fff;background-color:#000;border-color:#000}
body.site .btn-primary{color:#fff;background-color:#0075bf;border-color:#0075bf}
body.site .btn-primary:hover,body.site .btn-primary:focus{color:#fff;background-color:#0069d9;border-color:#0062cc}
.row.leden{margin-top:0}

/* --- Publicaties als eigen sectie (homepage): lichtblauw vlak over de volle breedte, tekst links, kaarten rechts --- */
.okkcontent .sppb-section.okk-pub-sectie{position:relative;background:#eef5fb !important;margin-top:45px !important;padding:90px 0 !important}
.okkcontent .sppb-section.okk-pub-sectie::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:linear-gradient(to right,#0075bf 0%,#00a458 100%)}
.okkcontent .sppb-section.okk-pub-sectie > .sppb-row-container{width:100% !important;padding:0 15px !important;margin:0 auto !important}
@media (min-width:576px){.okkcontent .sppb-section.okk-pub-sectie > .sppb-row-container{max-width:540px !important}}
@media (min-width:768px){.okkcontent .sppb-section.okk-pub-sectie > .sppb-row-container{max-width:720px !important}}
@media (min-width:992px){.okkcontent .sppb-section.okk-pub-sectie > .sppb-row-container{max-width:960px !important}}
@media (min-width:1200px){.okkcontent .sppb-section.okk-pub-sectie > .sppb-row-container{max-width:1140px !important}}
.okkcontent .sppb-section.okk-pub-sectie > .sppb-row-container > .sppb-row{display:flex !important;flex-wrap:wrap;margin:0 -15px !important}
.okkcontent .sppb-section.okk-pub-sectie > .sppb-row-container > .sppb-row > .sppb-row-column{flex:0 0 100% !important;max-width:100% !important;width:100% !important;padding:0 15px !important}
@media (min-width:992px){
  .okkcontent .sppb-section.okk-pub-sectie > .sppb-row-container > .sppb-row > .sppb-row-column:nth-child(1){flex:0 0 33.333% !important;max-width:33.333% !important;padding-right:45px !important}
  .okkcontent .sppb-section.okk-pub-sectie > .sppb-row-container > .sppb-row > .sppb-row-column:nth-child(2){flex:0 0 66.667% !important;max-width:66.667% !important}
}
@media (max-width:991.98px){.okkcontent .sppb-section.okk-pub-sectie > .sppb-row-container > .sppb-row > .sppb-row-column:nth-child(1){margin-bottom:30px !important}}
.okk-pub-sectie .modulebutton{margin-top:30px}
.okk-pub-sectie .okk-dc-publicaties.sppb-dynamic-content-collection{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
@media (max-width:575.98px){.okk-pub-sectie .okk-dc-publicaties.sppb-dynamic-content-collection{grid-template-columns:1fr !important}}
.okk-pub-sectie .okk-dc-publicaties .sppb-dynamic-content-collection__item{box-shadow:none;min-height:130px}
.okk-pub-sectie .okk-dc-publicaties .sppb-dynamic-content-collection__item:hover{box-shadow:0 0 4px rgba(0,0,0,.1)}
.okkcontent:has(.page-content > .sppb-section.okk-pub-sectie:last-child) ~ .bottom{margin-top:0}

/* ======================= 7. Twee kolommen in een artikel (kernpagina's, kerstpakket) =======================
   oud: .row.content > .col-xs-12 > .row > .col-md-5 + .col-md-5.offset-md-2
   okk-2kol-dicht (Stolwijk): tussen de kolommen stond een losse <p>&nbsp;</p> i.p.v. de offset. */
.okkcontent .sppb-section.okk-2kol > .sppb-row-container > .sppb-row > .sppb-row-column{flex:0 0 100% !important;max-width:100% !important;width:100% !important;padding:0 15px !important}
@media (min-width:768px){
  .okkcontent .sppb-section.okk-2kol > .sppb-row-container > .sppb-row{justify-content:flex-start !important}
  .okkcontent .sppb-section.okk-2kol > .sppb-row-container > .sppb-row > .sppb-row-column{flex:0 0 41.666667% !important;max-width:41.666667% !important}
  .okkcontent .sppb-section.okk-2kol:not(.okk-2kol-dicht) > .sppb-row-container > .sppb-row > .sppb-row-column:nth-child(2){margin-left:16.666667% !important}
  .okkcontent .sppb-section.okk-2kol-dicht > .sppb-row-container > .sppb-row > .sppb-row-column:nth-child(2){margin-left:var(--okk-nbsp,4px) !important}
}
@media (max-width:767.98px){.okkcontent .sppb-section.okk-2kol-dicht > .sppb-row-container > .sppb-row > .sppb-row-column:nth-child(2){margin-top:51px !important}}
.okkcontent .sppb-section.okk-vervolg > .sppb-row-container > .sppb-row{padding-top:1rem !important}  /* oud: lege <p> voor het formulier */
/* de binnenste .row (marge -15) was 30px breder dan de tekstkolom van een artikel */
@media (min-width:1200px){.okkcontent .sppb-section.okk-2kol > .sppb-row-container > .sppb-row{max-width:1140px !important}}
@media (min-width:992px) and (max-width:1199.98px){.okkcontent .sppb-section.okk-2kol > .sppb-row-container > .sppb-row{margin-left:-30px !important;margin-right:-30px !important}}
@media (max-width:991.98px){.okkcontent .sppb-section.okk-2kol > .sppb-row-container > .sppb-row{margin-left:-15px !important;margin-right:-15px !important}}