/**
 * NIVO adverteerlagen
 * Styling voor de pagebuilder-lagen hero_donker, kerncijfers, uitgelicht_blok,
 * waarom_blok, ervaringen, formulier_laag en cta_afsluiter.
 *
 * Sluit aan op style.css: knoppen erven van a.subscribebtn, koppen in de lagen
 * gaan van de globale Poller One terug naar Plus Jakarta Sans (zoals de
 * bestaande adverteerpagina dat ook doet). Alleen de hero-h1 blijft Poller One.
 *
 * Wordt geladen door inc/nivo-adverteerlagen.php (alleen op sub-pagebuilder.php).
 */

.nivo-laag {
   --nivo-blauw: #149bd7;
   --nivo-blauw-d: #1187c2;
   --nivo-blauw-licht: #eaf6fd;
   --nivo-blauw-rand: #cfe6f5;
   --nivo-navy: #152238;
   --nivo-ink: #1a1d24;
   --nivo-ink2: #3a4150;
   --nivo-muted: #6b7280;
   --nivo-lijn: #e6e9ef;
   --nivo-soft: #f5f5f5;
   --nivo-wa: #25d366;
   /* Schaal voor de advertentieformaten: 0.3px per mm. */
   --nivo-mm: 0.3px;

   font-family: 'Plus Jakarta Sans', sans-serif;
   color: var(--nivo-ink);
   /* Elke laag bepaalt zijn eigen verticale ruimte; hieronder staat alleen de basis.
      Géén `.nivo-laag + .nivo-laag`-regels: die winnen op specificiteit van de
      padding van een losse laag (2 classes vs 1) en drukken die weg. */
   padding: 60px 0;
}

/* De pagebuilder-kolom is 1100px breed; donkere lagen mogen daarbuiten treden. */
.nivo-wide .entry-content {
   margin-right: 0;
   max-width: none;
}

.nivo-bleed {
   width: 100vw;
   margin-left: calc(50% - 50vw);
   padding-left: 20px;
   padding-right: 20px;
}

.nivo-inner {
   max-width: 1060px;
   width: 100%;
   margin: 0 auto;
}

/* Koppen binnen de lagen: terug naar de huisstijl-sans, niet de Poller One
   die style.css aan alle h1-h6 geeft. */
.nivo-laag h2,
.nivo-laag h3 {
   font-family: 'Plus Jakarta Sans', sans-serif;
   font-weight: 700;
   color: #000;
   text-transform: none;
   line-height: 1.3;
   letter-spacing: normal;
}

.nivo-laag p {
   margin: 0 0 12px;
}

.nivo-laag p:last-child {
   margin-bottom: 0;
}

.nivo-boventitel {
   color: var(--nivo-blauw);
   font-weight: 700;
   letter-spacing: .16em;
   text-transform: uppercase;
   font-size: 13px;
   line-height: 1.4;
}

.nivo-boventitel--midden {
   text-align: center;
}

.nivo-icon {
   width: 24px;
   height: 24px;
   display: block;
}

.nivo-hex {
   position: absolute;
   width: 460px;
   height: 520px;
   opacity: .06;
   pointer-events: none;
}

/* ---------------------------------------------------------------- knoppen */
/* Erven van a.subscribebtn uit style.css; hier alleen de varianten. */

.nivo-btns {
   display: flex;
   gap: 12px;
   flex-wrap: wrap;
   align-items: center;
}

.nivo-laag a.subscribebtn {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   padding: 12px 22px;
   font-size: 15px;
   line-height: 1.2;
}

.nivo-laag a.subscribebtn .nivo-icon {
   width: 18px;
   height: 18px;
}

.nivo-laag a.subscribebtn--wa {
   background: var(--nivo-wa);
   border-color: var(--nivo-wa);
}

.nivo-laag a.subscribebtn--wa:hover {
   background: #fff;
   color: var(--nivo-wa);
}

.nivo-laag a.subscribebtn--ghost {
   background: transparent;
   border-color: rgba(255, 255, 255, .45);
   color: #fff;
}

.nivo-laag a.subscribebtn--ghost:hover {
   background: #fff;
   border-color: #fff;
   color: var(--nivo-navy);
}

/* ---------------------------------------------------------------- hero */

.nivo-hero {
   position: relative;
   background: var(--nivo-navy);
   color: #fff;
   overflow: hidden;
   padding: 70px 20px 90px;
   margin-bottom: 0;
}

.nivo-hero__bg {
   position: absolute;
   inset: 0;
   background-size: cover;
   background-position: center;
   opacity: .28;
}

.nivo-hero__bg::after {
   content: "";
   position: absolute;
   inset: 0;
   background: linear-gradient(90deg, var(--nivo-navy) 10%, rgba(21, 34, 56, .55) 100%);
}

.nivo-hero .nivo-hex {
   right: -60px;
   top: -40px;
   color: #fff;
}

.nivo-hero__inner {
   position: relative;
   z-index: 2;
}

.nivo-hero h1 {
   font-family: 'Poller One', cursive;
   font-size: 52px;
   line-height: 1.05;
   text-transform: uppercase;
   color: #fff;
   margin: 14px 0 18px;
   letter-spacing: 0;
}

.nivo-hero h1 .nivo-hero__accent {
   color: var(--nivo-blauw);
   display: block;
}

.nivo-hero__tekst {
   font-size: 19px;
   color: #c7cfda;
   max-width: 54ch;
   margin-bottom: 28px;
}

.nivo-hero__notitie {
   color: #8f99a8;
   font-size: 13px;
   margin-top: 16px;
}

/* Schuine afsnijding naar de witte laag eronder. */
.nivo-hero__slant {
   position: absolute;
   left: 0;
   right: 0;
   bottom: -1px;
   height: 70px;
   background: #fff;
   clip-path: polygon(0 100%, 100% 100%, 100% 0);
}

/* ---------------------------------------------------------------- kerncijfers */

.nivo-cijfers {
   padding: 44px 0 16px;
}

.nivo-cijfers__grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 16px;
   text-align: center;
}

.nivo-cijfer__icon {
   color: var(--nivo-blauw);
   display: flex;
   justify-content: center;
   margin-bottom: 8px;
}

.nivo-cijfer__icon .nivo-icon {
   width: 26px;
   height: 26px;
}

.nivo-cijfer__getal {
   font-size: 36px;
   font-weight: 700;
   color: #000;
   line-height: 1;
}

.nivo-cijfer__label {
   font-size: 12.5px;
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: .06em;
   color: var(--nivo-blauw);
   margin-top: 6px;
}

/* ---------------------------------------------------------------- sectiekop */

.nivo-sectiekop {
   text-align: center;
   /* Hoort visueel bij het blok eronder, dus geen ruimte aan de onderkant. */
   padding: 60px 0 0;
}

.nivo-sectiekop h2 {
   font-size: 32px;
   margin: 10px 0 12px;
}

.nivo-sectiekop__tekst {
   color: var(--nivo-muted);
   max-width: 62ch;
   margin: 0 auto;
   font-size: 16.5px;
}

/* ---------------------------------------------------------------- uitgelicht blok */

/* De ruimte zit op de grid (samen met de scheidingslijn), niet op de sectie:
   opeenvolgende blokken houden zo één ritme in plaats van dubbele witruimte. */
.nivo-uitgelicht {
   padding: 0;
}

.nivo-uitgelicht__grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 44px;
   align-items: center;
   padding: 44px 0;
   border-top: 1px solid var(--nivo-lijn);
}

.nivo-uitgelicht--eerste .nivo-uitgelicht__grid {
   border-top: 0;
   padding-top: 38px;
}

.nivo-uitgelicht--beeld-links .nivo-uitgelicht__tekst {
   order: 2;
}

/* Zonder beeld loopt de tekst over de volle breedte; de ministats blijven vierkolom. */
.nivo-uitgelicht--geen-beeld .nivo-uitgelicht__grid {
   grid-template-columns: 1fr;
}

.nivo-uitgelicht--geen-beeld .nivo-uitgelicht__beeld {
   display: none;
}

.nivo-uitgelicht h3 {
   font-size: 24px;
   margin: 4px 0 10px;
}

.nivo-uitgelicht__tekst > p {
   color: var(--nivo-ink2);
}

.nivo-lijst {
   list-style: none;
   margin: 0 0 10px;
   padding: 0;
}

.nivo-lijst li {
   padding: 5px 0;
   display: flex;
   gap: 9px;
   align-items: flex-start;
   font-size: 14.5px;
}

.nivo-lijst .nivo-icon {
   width: 17px;
   height: 17px;
   color: var(--nivo-blauw);
   flex: 0 0 auto;
   margin-top: 3px;
}

.nivo-quote {
   font-style: italic;
   color: #000;
   font-weight: 600;
   border-left: 3px solid var(--nivo-blauw);
   padding-left: 12px;
   margin: 12px 0 0;
}

.nivo-quote__bron {
   display: block;
   font-style: normal;
   font-weight: 400;
   color: var(--nivo-muted);
   font-size: 13.5px;
   margin-top: 4px;
}

.nivo-ministats {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 12px;
   margin: 12px 0 16px;
}

.nivo-ministat {
   background: var(--nivo-blauw-licht);
   border-radius: 10px;
   padding: 12px;
   text-align: center;
}

.nivo-ministat__getal {
   font-weight: 700;
   color: #000;
   font-size: 20px;
   line-height: 1.2;
}

.nivo-ministat__label {
   font-size: 10.5px;
   color: var(--nivo-blauw);
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: .03em;
   margin-top: 2px;
}

.nivo-uitgelicht__beeld img {
   display: block;
   width: 100%;
   height: auto;
   border-radius: 14px;
}

.nivo-media-notitie {
   text-align: center;
   margin-top: 10px;
   font-size: 13px;
   color: var(--nivo-muted);
}

/* Advertentieformaten: blokjes staan op schaal via --w/--h in mm. */
.nivo-formaten {
   display: flex;
   flex-wrap: wrap;
   gap: 18px;
   align-items: flex-end;
   justify-content: center;
   background: var(--nivo-blauw-licht);
   border: 1px solid var(--nivo-blauw-rand);
   border-radius: 14px;
   padding: 24px 18px;
}

.nivo-formaat {
   text-align: center;
}

.nivo-formaat__blok {
   background: var(--nivo-blauw);
   opacity: .9;
   border-radius: 3px;
   margin: 0 auto 6px;
   width: calc(var(--w) * var(--nivo-mm));
   height: calc(var(--h) * var(--nivo-mm));
}

.nivo-formaat__label {
   font-size: 11px;
   font-weight: 700;
   color: #000;
   line-height: 1.25;
}

.nivo-formaat__code {
   display: block;
   color: var(--nivo-blauw);
   font-size: 13px;
}

/* ---------------------------------------------------------------- waarom-blok */

.nivo-waarom {
   background: var(--nivo-soft);
   position: relative;
   overflow: hidden;
   padding: 66px 20px;
}

.nivo-waarom .nivo-hex {
   left: -90px;
   bottom: -80px;
   color: var(--nivo-blauw);
   opacity: .05;
}

.nivo-waarom__grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 44px;
   align-items: center;
   position: relative;
   z-index: 2;
}

.nivo-waarom h2 {
   font-size: 32px;
   margin: 8px 0 10px;
}

.nivo-waarom__tekst {
   color: var(--nivo-muted);
   font-size: 16.5px;
   margin-bottom: 20px;
}

.nivo-waarom__usps {
   list-style: none;
   margin: 0;
   padding: 0;
}

.nivo-waarom__usps li {
   padding: 13px 0;
   border-bottom: 1px solid #dbe6ef;
   display: flex;
   gap: 12px;
   align-items: flex-start;
}

.nivo-waarom__usps li:last-child {
   border-bottom: 0;
}

.nivo-vink {
   color: #fff;
   background: var(--nivo-blauw);
   width: 22px;
   height: 22px;
   border-radius: 6px;
   display: flex;
   align-items: center;
   justify-content: center;
   flex: 0 0 auto;
   margin-top: 2px;
}

.nivo-vink .nivo-icon {
   width: 14px;
   height: 14px;
   stroke-width: 3;
}

/* ---------------------------------------------------------------- ervaringen */

.nivo-ervaringen__kop {
   text-align: center;
   margin-bottom: 38px;
}

.nivo-ervaringen h2 {
   font-size: 32px;
   margin: 10px 0 12px;
   text-align: center;
}

.nivo-ervaringen__tekst {
   color: var(--nivo-muted);
   max-width: 62ch;
   margin: 0 auto;
   font-size: 16.5px;
}

.nivo-quotes {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 18px;
}

.nivo-quotekaart {
   border: 1px solid var(--nivo-lijn);
   border-top: 4px solid var(--nivo-blauw);
   border-radius: 12px;
   padding: 22px;
   background: #fff;
}

.nivo-quotekaart p {
   font-size: 15.5px;
   color: var(--nivo-ink2);
}

.nivo-sterren {
   display: flex;
   gap: 2px;
   color: var(--nivo-blauw);
   margin-bottom: 8px;
}

.nivo-sterren .nivo-icon {
   width: 15px;
   height: 15px;
}

.nivo-quotekaart__bron {
   margin-top: 10px;
   font-weight: 700;
   font-size: 13px;
   color: var(--nivo-muted);
}

/* ---------------------------------------------------------------- formulierlaag */

.nivo-formulier {
   background: var(--nivo-navy);
   color: #fff;
   position: relative;
   overflow: hidden;
   padding: 66px 20px;
   scroll-margin-top: 90px;
}

.nivo-formulier .nivo-hex {
   right: -80px;
   top: -60px;
   color: #fff;
}

.nivo-formulier__grid {
   display: grid;
   grid-template-columns: 1fr 1.05fr;
   gap: 44px;
   align-items: start;
   position: relative;
   z-index: 2;
}

.nivo-formulier h2 {
   color: #fff;
   font-size: 32px;
   margin: 8px 0 10px;
}

.nivo-formulier__pitch {
   color: #c7cfda;
}

.nivo-formulier__pitch strong,
.nivo-formulier__pitch b {
   color: #fff;
}

.nivo-formulier__perks {
   list-style: none;
   margin: 18px 0 0;
   padding: 0;
}

.nivo-formulier__perks li {
   padding: 8px 0;
   color: #e7edf4;
   display: flex;
   gap: 10px;
   align-items: center;
}

.nivo-formulier__perks .nivo-icon {
   width: 18px;
   height: 18px;
   color: var(--nivo-blauw);
   flex: 0 0 auto;
   stroke-width: 3;
}

.nivo-formulier__kaart {
   background: #fff;
   color: var(--nivo-ink);
   border-radius: 16px;
   padding: 26px;
}

.nivo-formulier__kaart h3 {
   font-size: 22px;
   margin: 0 0 4px;
}

.nivo-formulier__kaartsub {
   color: var(--nivo-muted);
   font-size: 14px;
   margin-bottom: 16px;
}

/* Gravity Forms: de plugin levert eigen styling, dus hier expliciet overschrijven. */
.nivo-formulier__kaart .gform_wrapper.gravity-theme .gform_fields {
   grid-row-gap: 12px;
}

.nivo-formulier__kaart .gform_wrapper.gravity-theme .gfield_label {
   font-size: 13px;
   font-weight: 700;
   color: #000;
   margin-bottom: 5px;
   font-family: 'Plus Jakarta Sans', sans-serif;
}

.nivo-formulier__kaart .gform_wrapper.gravity-theme .gfield input[type=text],
.nivo-formulier__kaart .gform_wrapper.gravity-theme .gfield input[type=email],
.nivo-formulier__kaart .gform_wrapper.gravity-theme .gfield input[type=tel],
.nivo-formulier__kaart .gform_wrapper.gravity-theme .gfield select,
.nivo-formulier__kaart .gform_wrapper.gravity-theme .gfield textarea {
   width: 100%;
   border: 1px solid var(--nivo-lijn);
   border-radius: 9px;
   padding: 11px 12px;
   font-size: 15px;
   font-family: 'Plus Jakarta Sans', sans-serif;
   background: #fff;
   color: var(--nivo-ink);
}

.nivo-formulier__kaart .gform_wrapper.gravity-theme .gfield textarea {
   min-height: 68px;
}

.nivo-formulier__kaart .gform_wrapper.gravity-theme .gfield input:focus,
.nivo-formulier__kaart .gform_wrapper.gravity-theme .gfield select:focus,
.nivo-formulier__kaart .gform_wrapper.gravity-theme .gfield textarea:focus {
   outline: 2px solid #bfe3f6;
   border-color: var(--nivo-blauw);
}

.nivo-formulier__kaart .gform_wrapper.gravity-theme .gfield_radio {
   display: flex;
   gap: 14px;
   flex-wrap: wrap;
}

.nivo-formulier__kaart .gform_wrapper.gravity-theme .gchoice {
   display: flex;
   align-items: center;
   gap: 6px;
}

.nivo-formulier__kaart .gform_wrapper.gravity-theme .gchoice label {
   font-size: 14px;
   font-weight: 500;
   margin: 0;
}

.nivo-formulier__kaart .gform_wrapper.gravity-theme .gform_footer {
   padding: 6px 0 0;
   margin: 0;
}

.nivo-formulier__kaart .gform_wrapper.gravity-theme .gform_footer input[type=submit] {
   width: 100%;
   background: var(--nivo-blauw);
   border: 1px solid var(--nivo-blauw);
   color: #fff;
   font-weight: 700;
   font-size: 16px;
   font-family: 'Plus Jakarta Sans', sans-serif;
   padding: 13px 24px;
   border-radius: 4px;
   cursor: pointer;
   transition: background .15s;
}

.nivo-formulier__kaart .gform_wrapper.gravity-theme .gform_footer input[type=submit]:hover {
   background: #fff;
   color: var(--nivo-blauw);
}

.nivo-formulier__kaart .gform_wrapper.gravity-theme .gfield_required {
   color: var(--nivo-blauw);
}

.nivo-formulier__kaart .gform_confirmation_message {
   text-align: center;
   padding: 20px 10px;
   font-weight: 600;
   color: #000;
}

/* ---------------------------------------------------------------- cta afsluiter */

.nivo-cta {
   text-align: center;
   padding: 66px 0;
}

.nivo-cta h2 {
   font-size: 32px;
   margin: 10px 0 12px;
}

.nivo-cta__tekst {
   color: var(--nivo-muted);
   max-width: 62ch;
   margin: 0 auto 24px;
   font-size: 16.5px;
}

.nivo-cta .nivo-btns {
   justify-content: center;
}

.nivo-cta__contactregel {
   color: var(--nivo-muted);
   margin-top: 18px;
   font-size: 15px;
}

/* ---------------------------------------------------------------- responsive */

/* De pagebuilder-kolom is 1100px; tussen ~900 en 1100 wordt hij smaller dan zijn
   maximum en gaan de tweekolomsblokken knellen. Iets meer lucht, kleinere koppen. */
@media (max-width: 1100px) {
   .nivo-uitgelicht__grid,
   .nivo-waarom__grid,
   .nivo-formulier__grid {
      gap: 32px;
   }

   .nivo-hero h1 {
      font-size: 44px;
   }
}

/* Tablet: koppen omlaag en de vierkolomsrijen halveren, die worden anders te smal. */
@media (max-width: 980px) {
   .nivo-ministats {
      grid-template-columns: 1fr 1fr;
   }

   .nivo-formulier__grid {
      grid-template-columns: 1fr;
   }

   .nivo-formulier__kaart {
      max-width: 620px;
   }
}

@media (max-width: 860px) {
   .nivo-laag {
      --nivo-mm: 0.22px;
      padding: 44px 0;
   }

   /* Per-laag paddings opnieuw zetten: `.nivo-laag` hierboven heeft dezelfde
      specificiteit en staat later in het bestand, dus die zou anders winnen. */
   .nivo-uitgelicht {
      padding: 0;
   }

   .nivo-sectiekop {
      padding: 44px 0 0;
   }

   .nivo-cijfers {
      padding: 32px 0 8px;
   }

   .nivo-hero {
      padding: 50px 20px 70px;
   }

   .nivo-waarom,
   .nivo-formulier {
      padding: 44px 20px;
   }

   .nivo-cta {
      padding: 44px 0;
   }

   .nivo-hero h1 {
      font-size: 34px;
   }

   .nivo-hero__tekst {
      font-size: 17px;
   }

   .nivo-hero .nivo-hex,
   .nivo-waarom .nivo-hex,
   .nivo-formulier .nivo-hex {
      width: 280px;
      height: 320px;
   }

   .nivo-cijfers__grid {
      grid-template-columns: 1fr 1fr;
      gap: 24px 16px;
   }

   .nivo-uitgelicht__grid,
   .nivo-waarom__grid,
   .nivo-quotes {
      grid-template-columns: 1fr;
      gap: 24px;
   }

   .nivo-uitgelicht__grid {
      padding: 28px 0;
   }

   .nivo-uitgelicht--eerste .nivo-uitgelicht__grid {
      padding-top: 24px;
   }

   /* Beeld altijd ná de tekst op smal, ongeacht de kolomkeuze in de laag. */
   .nivo-uitgelicht--beeld-links .nivo-uitgelicht__tekst {
      order: 0;
   }

   .nivo-laag h2,
   .nivo-waarom h2,
   .nivo-ervaringen h2,
   .nivo-formulier h2,
   .nivo-cta h2 {
      font-size: 26px;
   }

   .nivo-formulier__kaart {
      padding: 20px;
      max-width: none;
   }

   .nivo-btns {
      gap: 10px;
   }

   .nivo-formaten {
      gap: 14px;
      padding: 18px 12px;
   }
}

@media (max-width: 480px) {
   .nivo-hero h1 {
      font-size: 28px;
   }

   .nivo-cijfer__getal {
      font-size: 28px;
   }

   .nivo-cijfer__label {
      font-size: 11px;
   }

   .nivo-btns a.subscribebtn {
      width: 100%;
      justify-content: center;
   }

   .nivo-quotekaart,
   .nivo-formulier__kaart {
      padding: 18px;
   }

   /* Vier kolommen naast elkaar past niet meer onder ~400px. */
   .nivo-ministats {
      gap: 8px;
   }

   .nivo-ministat {
      padding: 10px 6px;
   }
}