/*!
 * De Korne — sitewide styles
 *
 * Originally generated by tools/build-theme-assets.py from the WPCode snippets
 * that used to be injected inline on every page. Hand-maintained since: the
 * build now skips this file rather than overwriting it.
 *
 * The `#NNN — name` markers below record which snippet each section came from.
 * tools/wpcode-export/ keeps the untouched originals.
 */

/* Fade-in class triggered by JS */
.bv-service-card.bv-visible {
  opacity: 1;
  transform: translateY(0);
}

/* --------------------------------------------------------------------
   #683 — homepage knoppen css
   -------------------------------------------------------------------- */
/* Container grid */
.home .home-tiles,
.home .wp-block-group.home-tiles {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.5rem;
  width: 100%;
  max-width: 1280px;
  margin: 3rem auto;
  padding: 0 2rem;
  box-sizing: border-box;
  justify-items: center;
}

/* Elke tegel */
.home .home-tile {
  background: #ffffff;
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: stretch;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease, opacity 0.6s ease;
  width: 100%;
  min-height: 440px;
  max-width: 400px; /* houdt alles mooi in verhouding */
  box-sizing: border-box;
  opacity: 0;
  transform: translateY(30px);
}

/* Fade-in zichtbaar */
.home .home-tile.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Hover: resize (niet liften) */
.home .home-tile:hover {
  transform: scale(1.04);
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.12);
}

/* Afbeelding */
.home .home-tile-image img {
  width: 100%;
  height: 240px;
  object-fit: cover;
  display: block;
  border-bottom: 2px solid #e63946;
}

/* Titel */
.home .home-tile-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: #1a1a1a;
  padding: 1.2rem 1.5rem 0.5rem 1.5rem;
  flex-grow: 1;
  text-align: left;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Knoppencontainer */
.home .home-tile-button {
  padding: 1rem 1.5rem 1.8rem 1.5rem;
}

/* Knopstijl */
.home .home-tile-button a.wp-block-button__link {
  background: #ffffff !important;
  color: #e12f18ff !important;
  border: 2px solid #e12f18ff;
  padding: 0.6rem 1.5rem;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 700;
  display: inline-block;
  text-align: center;
  transition: transform 0.25s ease, background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.home .home-tile-button a.wp-block-button__link:hover {
  background: #e12f18ff !important;
  color: #ffffff !important;
  transform: scale(1.07);
}

/* Tablet layout */
@media (max-width: 1200px) {
  .home .home-tiles,
  .home .wp-block-group.home-tiles {
    grid-template-columns: repeat(2, 1fr) !important;
    justify-items: center;
  }
}

/* Mobiel layout fix (belangrijk) */
@media (max-width: 768px) {
  .home .home-tiles,
  .home .wp-block-group.home-tiles {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
    width: 100% !important;
    padding: 0 1rem !important;
    margin: 2rem auto !important;
    max-width: none !important;
  }

  .home .home-tile {
    min-height: 320px !important;
    max-width: none !important;
    width: 100% !important;
  }

  .home .home-tile-image img {
    height: 180px !important;
  }

  .home .home-tile-title {
    font-size: 1rem !important;
    padding: 0.8rem 1rem 0.5rem 1rem !important;
  }

  .home .home-tile-button {
    padding: 0.8rem 1rem 1rem 1rem !important;
  }

  .home .home-tile-button a.wp-block-button__link {
    padding: 0.5rem 1.2rem !important;
    font-size: 0.95rem !important;
  }
}

/* Toegankelijkheidsvoorkeur voor minder animatie */
@media (prefers-reduced-motion: reduce) {
  .home .home-tile,
  .home .home-tile:hover {
    transition: none !important;
    transform: none !important;
  }
}
/* ====== Alleen op de homepage ====== */
body.home .wp-block-cover {
  transition: transform 0.4s ease, box-shadow 0.4s ease;
  overflow: hidden;
  border-radius: 1rem;
}

body.home .wp-block-cover:hover {
  transform: scale(1.03);
  box-shadow: 0 8px 20px rgba(0,0,0,0.15);
  z-index: 2;
}

/* Slide gedrag */
.home-tile-swiper .swiper-slide,
.home-tile-swiper .cb-slide {
  height: auto !important;
  display: flex !important;
  overflow: hidden !important;
}

/* Wrapper mag uitrekken */
.home-tile-swiper .swiper-wrapper,
.home-tile-swiper .cb-wrapper.swiper-wrapper {
  align-items: stretch !important;
}

/* Tile container */
.home-tile-swiper .home-tile {
  background: #ffffff;
  border-radius: 14px;
  overflow: hidden;
  display: flex !important;
  flex-direction: column;
  justify-content: space-between;
  min-height: 440px;
  height: 100% !important;
  box-sizing: border-box;

  /* geen schaduw + geen hover zoom */
  box-shadow: none !important;
  transform: none !important;
  transition: none !important;
}

/* Afbeelding */
.home-tile-swiper .home-tile-image img {
  width: 100% !important;
  height: 240px !important;
  object-fit: cover !important;
  display: block;
}

/* Titel */
.home-tile-swiper .home-tile-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: #1a1a1a;
  padding: 1.2rem 1.5rem 0.5rem 1.5rem;
  flex-grow: 1;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Button holder */
.home-tile-swiper .home-tile-button {
  padding: 1rem 1.5rem 1.8rem 1.5rem;
  margin-top: auto;
}

/* Knop */
.home-tile-swiper .home-tile-button a.wp-block-button__link {
  background: #ffffff !important;
  color: #e12f18ff !important;
  border: 2px solid #e63946;
  padding: 0.6rem 1.5rem;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 700;
  display: inline-block;
}

/* Mobile tweaks */
@media (max-width: 768px) {
  .home-tile-swiper .home-tile {
    min-height: 320px !important;
  }

  .home-tile-swiper .home-tile-image img {
    height: 180px !important;
  }
}

/* --------------------------------------------------------------------
   #887 — zoekbalk css
   -------------------------------------------------------------------- */
/* Verberg het "Search" label boven de balk */
.wp-block-search__label {
  display: none !important;
}

/* Maak de input rond en netjes */
.wp-block-search__input {
  border-radius: 999px !important;   /* volledig rond */
  border: 1px solid #ccc;
  padding: 0.6rem 1.2rem;
  font-size: 1rem;
  transition: all 0.25s ease;
  width: 100%;
  box-sizing: border-box;
}

/* Focus effect: subtiel rood randje in jouw stijl */
.wp-block-search__input:focus {
  outline: none;
  border-color: #e12f18ff;
  box-shadow: 0 0 0 2px rgba(230, 57, 70, 0.25);
}

/* Style de zoekknop in dezelfde stijl als je andere knoppen */
.wp-block-search__button {
  background: #e12f18ff !important;
  color: #fff !important;
  border-radius: 999px !important;
  font-weight: 600;
  padding: 0.6rem 1.4rem;
  margin-left: 0.5rem;
  border: none;
  cursor: pointer;
  transition: transform 0.25s ease, background 0.25s ease;
}

.wp-block-search__button:hover {
  background: #c71c28 !important;
  transform: scale(1.05);
}

/* Zorg dat input en knop op één lijn staan */
.wp-block-search__inside-wrapper {
  display: flex;
  align-items: center;
}

/* Responsief netjes centreren */
@media (max-width: 782px) {
  .wp-block-search {
    justify-content: center;
  }
}

/* --------------------------------------------------------------------
   #888 — productgroepknoppen css
   -------------------------------------------------------------------- */
/* Container: zorg dat alle knoppen even hoog kunnen worden */
.button-category-container.wp-block-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--wp--style--block-gap, 1rem);
  align-items: stretch;           /* => wrappers even hoog */
}

/* Wrapper: maak de knop-wrapper flex zodat de link kan oprekken */
.wp-block-button.button-category {
  flex: 1 1 0;                    /* even breed in de rij */
  display: flex;                  /* laat child (link) oprekken */
  min-width: 180px;               /* voorkomt té smal worden */
}

/* De eigenlijke knop (de <a>) – hier zit de ronde achtergrond */
.wp-block-button.button-category > .wp-block-button__link {
  display: flex;
  align-items: center;            /* verticaal centreren */
  justify-content: center;        /* horizontaal centreren */
  width: 100%;
  height: 100%;
  min-height: 56px;               /* BASIShoogte: alles minstens even hoog */
  padding: 0 22px;                /* horizontale ruimte */
  box-sizing: border-box;

  /* Vorm & kleuren – met !important om WP-theme overrides te winnen */
  border-radius: 9999px !important;
  background: #e12f18ff !important;
  color: #fff !important;
  text-decoration: none;
  font-weight: 600;

  /* Smooth hover (geen kleurwissel verplicht) */
  transition: transform .2s ease;
}

.wp-block-button.button-category > .wp-block-button__link:hover {
  transform: scale(1.05);
}

/* Als een label twee regels wordt, trekt de hoogste de rest mee */
.button-category-container.wp-block-buttons > .wp-block-button.button-category {
  align-items: stretch;           /* wrapper rekt mee met hoogste */
}

/* Container (werkt alleen wanneer nodig, schaadt niets) */
.button-return-container.wp-block-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--wp--style--block-gap, 1rem);
  align-items: stretch;
}

/* Wrapper */
.wp-block-button.button-return {
  flex: 1 1 0;
  display: flex;
  min-width: 180px;
}

/* De eigenlijke knop */
.wp-block-button.button-return > .wp-block-button__link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-height: 56px;
  padding: 0 22px;
  box-sizing: border-box;

  /* Ronde vorm & styling */
  border-radius: 9999px !important;
  background: #e0e0e0 !important;     /* lichtgrijs */
  color: #333 !important;             /* donkere tekst */
  border: 2px solid #cfcfcf !important;

  font-weight: 600;
  text-decoration: none;
  transition: transform .2s ease, background .2s ease;
}

/* Hover */
.wp-block-button.button-return > .wp-block-button__link:hover {
  background: #d5d5d5 !important;
  transform: scale(1.05);
}

/* --------------------------------------------------------------------
   #977 — maatwerk css
   -------------------------------------------------------------------- */
/* Knoppen: subtiele lift */
.jl-button .wp-block-button__link {
  transition: transform .2s ease, box-shadow .2s ease;
}

.jl-button .wp-block-button__link:hover {
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 8px 18px rgba(0,0,0,0.15);
}

/* --------------------------------------------------------------------
   #1022 — service css
   -------------------------------------------------------------------- */
/* Kaart-styling */
.service-card {
  background: #fff;
  border-radius: 1rem;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
  overflow: hidden;
  padding: 0;
  text-align: left;
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .6s ease, transform .6s ease, box-shadow .3s ease;
}



/* Afbeelding */
.service-card img {
  width: 100%;
  height: auto;
  display: block;
  border-top-left-radius: 1rem;
  border-top-right-radius: 1rem;
}

/* Rode lijn gekoppeld aan de afbeelding */
.service-card figure.wp-block-image {
  position: relative;
  display: block;
  margin: 0;
}

/* De lijn onder de afbeelding */
.service-card figure.wp-block-image::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 4px;
  background: #e12f18ff; /* jouw accentkleur */
  border-bottom-left-radius: 1rem;
  border-bottom-right-radius: 1rem;
}


/* Tekstgedeelte */
.service-card-content h3 {
  margin-top: 0;
  color: #1d1d1f;
  font-weight: 700;
}

.service-card-content p {
  margin-bottom: 0;
  color: #333;
  line-height: 1.6;
}

/* Zachte hover (optioneel) */
.service-card:hover {
  box-shadow: 0 6px 16px rgba(0,0,0,0.1);
}

/* Fade-in zichtbaar wanneer geladen */
.service-card.visible {
  opacity: 1;
  transform: translateY(0);
}


/* Extra binnenruimte voor tekst in de service cards */
.service-card-content {
  padding: 1.5rem 1.75rem; /* boven/onder – links/rechts */
}

@media (max-width: 768px) {
  .service-card-content {
    padding: 1.25rem 1.25rem; /* iets compacter op mobiel */
  }
}


.service-card .wp-block-button__link {
    display: inline-block;
    padding: 0.6rem 1.5rem;
    border-radius: 999px;
    border: 2px solid #e12f18ff;
    background: #fff;
    color: #e12f18ff;
    font-weight: 600;
    font-size: 1rem;
    transition: background .25s ease, color .25s ease, transform .2s ease;
}

.service-card .wp-block-button__link:hover {
    background: #e12f18ff;
    color: #fff;
    transform: translateY(-2px);
}

/* centreren indien nodig */
.service-card .wp-block-buttons {
    display: flex;
    /* justify-content was declared flex-start here and center !important in
       the rule that followed; only the second ever applied. */
    justify-content: center !important;
}

/* --------------------------------------------------------------------
   #1143 — productblok css v3
   -------------------------------------------------------------------- */
.product-card {
  background: #fff;
  border-radius: 1rem;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
  overflow: hidden;
  text-align: left;
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .6s ease, transform .6s ease, box-shadow .3s ease;
  padding: 0;
  cursor: default;
}

/* Fade-in */
.product-card.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Hover-shadow */
.product-card:hover {
  box-shadow: 0 6px 16px rgba(0,0,0,0.1);
}

.product-card img {
  width: 100%;
  height: auto;
  display: block;
  border-top-left-radius: 1rem;
  border-top-right-radius: 1rem;
}

.product-card figure.wp-block-image {
  position: relative;
  display: block;
  margin: 0 !important;
  padding: 0 !important;
}

.product-card figure.wp-block-image::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 4px;
  background: #e12f18ff;
  border-bottom-left-radius: 1rem;
  border-bottom-right-radius: 1rem;
}

.product-card .product-content {
  position: relative;
  width: 100%;
  padding: 1.25rem 2rem 4.5rem 2rem; /* boven / LR / onder */
  box-sizing: border-box;
}

/* Titel */
.product-card .product-content h2,
.product-card .product-content h3 {
  font-size: 1.25rem;      
  font-weight: 600;
  margin: 0.75rem 0 1rem 0;
  color: #1d1d1f;
}

.product-card .product-content .wp-block-buttons {
  width: 100%;
  position: absolute;
  bottom: 1.5rem;
  left: 0;
  padding: 0 2rem;
  text-align: center;
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
}

.product-card .product-content .wp-block-button__link {
  display: block;
  width: 100%;
  max-width: 260px;
  margin: 0 auto;
  padding: 0.45rem 1rem;
  border-radius: 999px;
  border: 2px solid #e12f18ff;
  background: #fff;
  color: #e12f18ff;
  font-weight: 600;
  font-size: 0.95rem;
  transition: background .25s ease, color .25s ease;
}

/* Hover knop */
.product-card .product-content .wp-block-button__link:hover {
  background: #e12f18ff;
  color: #fff;
}

/* Desktop — knop verschijnt bij hover */
@media (min-width: 769px) {
  .product-card:hover .product-content .wp-block-buttons {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }
}

/* Mobiel — knop altijd zichtbaar */
@media (max-width: 768px) {
  .product-card .product-content .wp-block-buttons {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    padding: 0 1.5rem;
  }
}

/* 
   CURSOR FIX
*/

.product-card .cb-carousel-block,
.product-card .swiper,
.product-card .swiper-wrapper,
.product-card .swiper-slide,
.product-card .cb-button-next,
.product-card .cb-button-prev,
.product-card .swiper-pagination-bullet {
  cursor: grab !important;
}

.product-card .cb-button-next:hover,
.product-card .cb-button-prev:hover {
  cursor: pointer !important;
}

/* STOP Gutenberg automatische padding */
.product-card .product-content,
.product-card .product-content.has-global-padding {
    padding-top: 0 !important;
    padding-bottom: 5.5rem !important; /* ruimte voor knop */
    padding-left: 1.75rem !important;
    padding-right: 1.75rem !important;
}

/* STOP Gutenberg automatische marge boven eerste element */
.product-card .product-content.is-layout-constrained > *:first-child {
    margin-top: 0 !important;
}

/* STOP Gutenberg block-gap binnen constrained layout */
.product-card .product-content.is-layout-constrained > * {
    margin-block-start: 0 !important;
    margin-block-end: 0 !important;
}
/*ruimte onder afbeelding door carousel */
.product-card .cb-carousel-block,
.product-card .swiper,
.product-card .swiper-wrapper,
.product-card .swiper-slide {
    margin: 0 !important;
    padding: 0 !important;
    height: auto !important;
}

/* Fix: swiper onder-padding weghalen */
.product-card .swiper {
    padding-bottom: 0 !important;
}

/* Fix: figure moet exact de hoogte van de afbeelding aanhouden */
.product-card .swiper-slide > figure {
    display: block;
    margin: 0 !important;
}

/* Fix: Gutenberg global padding verwijdert bovenruimte */
.product-card .product-content.has-global-padding {
    padding-top: 0 !important;
}

/* Fix: Gutenberg constrained layout marge boven titel uitzetten */
.product-card .product-content.is-layout-constrained > *:first-child {
    margin-top: 0 !important;
}

/* Verberg pagination-bullet (zwarte stip) */
.product-card .swiper-pagination {
    display: none !important;
}
.product-card .product-content {
    padding-bottom: 4.5rem !important; /* meer ruimte zodat knop nooit overlapt */
}
.product-card .product-content .wp-block-buttons {
    text-align: center !important;
    justify-content: center !important;
}

/* Maak knoppen altijd zichtbaar, indien te druk kan je dit uit zetten*/
.product-card .wp-block-buttons {
    opacity: 1 !important;
    transform: translateY(0) !important;
    pointer-events: auto !important;
}
@media (max-width: 768px) {
  .wp-block-group.alignwide {
    grid-template-columns: 1fr !important; /* één kolom */
  }
}

/* --------------------------------------------------------------------
   #1309 — contactformulier css
   -------------------------------------------------------------------- */
.wpforms-container {
    max-width: 700px !important;
    margin: 0 auto !important;
    padding: 10px 0 !important;
}

.wpforms-field,
.wpforms-field-container > div {
    max-width: 900px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.wpforms-container input[type="text"],
.wpforms-container input[type="email"],
.wpforms-container input[type="tel"],
.wpforms-container textarea,
.wpforms-container select {
    width: 100% !important;
    padding: 14px 16px !important;
    border: 1px solid #ddd !important;
    border-radius: 10px !important;
    background: #fff !important;
    font-size: 16px !important;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06) !important;
    transition: border-color 0.25s ease, box-shadow 0.25s ease !important;
}

.wpforms-container input:focus,
.wpforms-container textarea:focus {
    border-color: #e12f18ff !important;
    box-shadow: 0 0 0 2px rgba(230,57,70,0.25) !important;
    outline: none !important;
}

.wpforms-field-label {
    font-size: 15px !important;
    font-weight: 600 !important;
    margin-bottom: 6px !important;
    color: #1d1d1f !important;
}

/* Tussenvoegsel breder */
.wpforms-field-name .wpforms-field-row-block.wpforms-one-fifth {
    width: 28% !important;
}

/* Voor- en achternaam netjes verdeeld */
.wpforms-field-name .wpforms-field-row-block.wpforms-two-fifths {
    width: 36% !important;
}

/* Zorg dat de naam-rij dezelfde max-breedte volgt */
.wpforms-field-name fieldset,
.wpforms-field-name .wpforms-field-row {
    max-width: 900px !important;
    margin: 0 auto !important;
}

#wpforms-820-field_3-container,
#wpforms-820-field_3-container textarea {
    max-width: 900px !important;
    width: 100% !important;
}

#wpforms-820-field_3-container textarea {
    min-height: 180px !important;
    border-radius: 12px !important;
}

.wpforms-field-radio ul {
    margin-top: 6px !important;
}

.wpforms-field-radio ul li {
    margin-bottom: 8px !important;
}

.wpforms-field-radio label {
    font-size: 15px !important;
    color: #1d1d1f !important;
}

.wpforms-submit-container {
    margin-top: 25px !important;
    text-align: center !important;
}

.wpforms-submit {
    width: 60% !important;
    padding: 16px !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    border-radius: 999px !important;
    background: #e12f18ff !important;
    color: #fff !important;
    border: none !important;
    cursor: pointer !important;
    transition: background 0.25s ease, transform 0.15s ease !important;
}

.wpforms-submit:hover {
    background: #c92f3b !important;
    transform: translateY(-2px) !important;
}

.wpforms-submit-spinner {
    margin-left: 12px;
}

@media (max-width: 640px) {

    .wpforms-field-name .wpforms-field-row-block {
        width: 100% !important;
        margin-bottom: 10px !important;
    }

    .wpforms-submit {
        width: 100% !important;
    }
}

/* --------------------------------------------------------------------
   #1328 — project card css
   -------------------------------------------------------------------- */
/* Basis kaart */
.project-card {
    display: grid;
    grid-template-columns: 1fr 1.2fr;   /* afbeelding links – tekst rechts */
    gap: 0;
    background: #fff;
    border-radius: 1rem;
    box-shadow: 0 2px 10px rgba(0,0,0,0.06);
    overflow: hidden;
    opacity: 0;
    transform: translateY(30px);
    transition: opacity .5s ease, transform .5s ease, box-shadow .3s ease;
}

/* Fade-in */
.project-card.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Hover-effect */
.project-card:hover {
    box-shadow: 0 6px 18px rgba(0,0,0,0.12);
}

/* Carousel mag geen vaste hoogte hebben */
.project-card .cb-carousel-block,
.project-card .swiper,
.project-card .swiper-wrapper,
.project-card .swiper-slide {
    /* height was 100% here and auto in the rule below; auto always won. */
    min-height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}


/* Slides moeten zichzelf kunnen schalen */
.project-card .swiper-slide {
    display: block !important;
    height: auto !important;
}

/* Afbeeldingen */
.project-card img {
    width: 100%;
    height: 100% !important;
    object-fit: cover;
    display: block;
}

/* Rode lijn rechts */
.project-card figure.wp-block-image {
    position: relative;
    height: 100% !important;
    margin: 0 !important;
}

.project-card figure.wp-block-image::after {
    content: "";
    position: absolute;
    right: 0;
    top: 0;
    width: 4px;
    height: 100%;
    background: #e63946;
    border-top-right-radius: 1rem;
    border-bottom-right-radius: 1rem;
}

/* pagination bullets verbergen */
.project-card .swiper-pagination {
    display: none !important;
}

.project-card .project-content {
    padding: 2rem 2.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-sizing: border-box;
}

/* Titel */
.project-card .project-content h1,
.project-card .project-content h2,
.project-card .project-content h3 {
    margin-top: 0;
    margin-bottom: 1rem;
    font-size: 2.1rem;
    font-weight: 600;
    color: #1d1d1f;
}

/* Tekst */
.project-card .project-content p {
    margin-bottom: 1.75rem;
    font-size: 1.1rem;
    line-height: 1.5;
    color: #333;
}

/* Knoppen-blok */
.project-card .project-content .wp-block-buttons {
    margin-top: auto;
    display: flex;
    justify-content: flex-start;
}

/* Knop stijl → dezelfde als product-card */
.project-card .project-content .wp-block-button__link {
    display: inline-block;
    padding: 0.6rem 1.5rem;
    border-radius: 999px;
    border: 2px solid #e63946;
    background: #fff;
    color: #e63946;
    font-weight: 600;
    font-size: 1rem;
    transition: background .25s ease, color .25s ease;
}

.project-card .project-content .wp-block-button__link:hover {
    background: #e63946;
    color: #fff;
}

@media (max-width: 768px) {
    .project-card {
        grid-template-columns: 1fr; /* afbeelding boven, content onder */
    }

    /* rode lijn nu onderaan */
    .project-card figure.wp-block-image::after {
        width: 100%;
        height: 4px;
        top: auto;
        bottom: 0;
        right: 0;
        border-radius: 0 0 1rem 1rem;
    }

    .project-card .project-content {
        padding: 1.75rem 1.5rem;
    }

    .project-card .project-content h1 {
        font-size: 1.75rem;
    }

    .project-card .project-content p {
        font-size: 1rem;
    }
}

/* --------------------------------------------------------------------
   #1771 — lijstje css
   -------------------------------------------------------------------- */
.requestlist {
  border: 2.5px solid #dddddd;     
  border-radius: 12px;             
  padding: 2rem;                 
  background: #fafafa;              
  box-sizing: border-box;
}

/* --------------------------------------------------------------------
   #2080 — font definer css
   -------------------------------------------------------------------- */
body, p, h1, h2, h3, h4, h5, h6 {
  font-family: "Roboto", sans-serif !important;
  font-weight: 400;
}
h1 {
  font-size: 2.4rem;
  font-weight: 700;
}
h2 {
  font-size: 2rem;
  font-weight: 600;
  color: #e12f18ff;
}
h3 {
  font-size: 1.6rem;
  font-weight: 500;
}
p {
  font-size: 1rem;
  line-height: 1.55;
}

/* --------------------------------------------------------------------
   #2262 — contact kaartenblok
   -------------------------------------------------------------------- */
.contact-rood,
.contact-grijs {
  width: 100%;
  padding: 2rem;
  box-sizing: border-box;
  margin: 0 !important;
}

/* Achtergrondkleuren */
.contact-rood {
  background-color: #e12f18ff !important;
}

.contact-grijs {
  background-color: #959492ff !important;
}

.contact-rood,
.contact-grijs {
  flex: 1 0 auto;        /* automatisch groeien op basis van tekst */
}

/* Was #wpmapblock_94d51933.leaflet-container — a generated id that no longer
   exists on the page (it is now wpmapblock_30d32444), so the map lost its
   rounded corners. Leaflet initialises on the block's own div, so the class the
   plugin renders is the stable thing to target. */
.wpmapblockrender {
  border-radius: 2rem !important;
  overflow: hidden !important;

}

/* Breathing room above and below the map, so it reads as its own element
   instead of being wedged between the card edge and the address blocks.
 *
 * This needs the extra class and the !important to land. The map sits in a
 * constrained-layout group, and core emits two rules that would otherwise win:
 *
 *   :root :where(.is-layout-constrained) > *          margin-block-start: 1.2rem
 *   :root :where(.is-layout-constrained) > :last-child margin-block-end: 0
 *
 * Both are (0,1,0) — the same weight as a bare .wpmapblockrender — and are
 * printed after this stylesheet, so a plain rule loses the tie.
 *
 * Horizontal spacing is deliberately left alone: the same layout sets
 * margin-left/right to auto !important with max-width 90%, which is what keeps
 * the map centred and already insets it from the card. */
.wp-block-group > .wpmapblockrender {
  margin-block: clamp(1.5rem, 3vw, 2.75rem) !important;
}

/* --------------------------------------------------------------------
   #2296 — over ons css
   -------------------------------------------------------------------- */
.team .wp-block-columns {
  display: flex;
  align-items: stretch;            /* zorgt dat beide kolommen even hoog worden */
  
  border: 1px solid #e12f18ff;     /* rode lijn */
  border-radius: 16px;             
  padding: 1.5rem;                 
  margin-bottom: 2rem;
  
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);  
  background: #fff;            
  overflow: hidden;                 /* zorgt dat ronding ook voor inhoud geldt */
}

/* Linkerkolom (foto) */
.team .wp-block-columns > .wp-block-column:first-child {
  flex: 0 0 260px;
  max-width: 260px;
  display: flex;
  align-items: center;
}

/* Rechterkolom (tekst) */
.team .wp-block-columns > .wp-block-column:last-child {
  display: flex;
  flex-direction: column;
  justify-content: center;          /* tekst verticaal gecentreerd */
}

/* Foto's gelijk */
.team .wp-block-image img {
  width: 260px !important;
  height: 260px !important;
  object-fit: cover;
  border-radius: 1rem !important;
  display: block;
  margin: 0 auto;
}

/* Zorgt dat alignleft van Gutenberg niet uitlijning breekt */
.team .wp-block-image.alignleft {
  float: none !important;
  margin: 0 auto !important;
}

/* Mobiel layout */
@media (max-width: 768px) {
  .team .wp-block-columns {
    flex-direction: column;
    text-align: center;
  }

  .team .wp-block-columns > .wp-block-column:first-child {
    padding-right: 0;
    margin-bottom: 1rem;
  }
}

.team {
  display: flex;
  flex-direction: column;
  align-items: center;   /* centreren of juist niet */
}

/* Elke teamkaart krijgt dezelfde (max) breedte */
.team .wp-block-columns {
  width: 100%;
  max-width: 950px;      /* KAARTBREEDTE */
}

/* Zorg dat de tekstkolom de resterende ruimte netjes opvult */
.team .wp-block-columns > .wp-block-column:last-child {
  flex: 1 1 0;
}

/* --------------------------------------------------------------------
   #2402 — productblok op productpagina css
   -------------------------------------------------------------------- */
.productenblok-productpagina {
  border: 1px solid #959492ff;      /* grijze rand */
  border-radius: 12px;              /* ronde hoeken */
  padding: 2rem;                    /* ruimte binnenin */
  background: #fff;                 /* witte achtergrond (aan te raden voor contrast) */
  box-shadow: 0 4px 10px rgba(0,0,0,0.05);  /* lichte schaduw */
  margin-bottom: 2rem;              /* ruimte tussen blokken */
}

/* --------------------------------------------------------------------
   #2405 — mailbutton
   -------------------------------------------------------------------- */
.team-mailbutton {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0.6rem 1rem;
  border: 1px solid #e12f18ff;
  border-radius: 8px;
  color: #e12f18ff;
  text-decoration: none;
  font-weight: 500;
  transition: 0.25s ease;
}

.team-mailbutton:hover {
  background: #e12f18ff;
  color: #fff;
}

.team-mailbutton svg {
  stroke: currentColor;
}

/* --------------------------------------------------------------------
   #2973 — wit blok general css
   -------------------------------------------------------------------- */
.wit-blok {
    width: 95% !important;
    margin: 1.5rem auto;
    padding: 1.5rem;

    background-color: #ffffff;
    border: 1px solid #959492ff;
    border-radius: 2rem;
    box-sizing: border-box;

    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
	
    margin-left: auto !important;
    margin-right: auto !important;
	  inline-size: 95% !important;
    max-inline-size: 95% !important;
}

.wit-blok-max {
    width: 95% !important;
	max-width: 1440px !important;
	
    margin: 1.5rem auto;
    padding: 1.5rem;

    background-color: #ffffff;
    border: 1px solid #959492ff;
    border-radius: 2rem;
    box-sizing: border-box;

    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
	
    margin-left: auto !important;
    margin-right: auto !important;
}

/* --------------------------------------------------------------------
   #3738 — seperator fade css
   -------------------------------------------------------------------- */
.wp-block-separator.separator-fade-red {
    border: none;
    height: 2px;

    background: linear-gradient(
        to right,
        transparent 10%,
        #959492ff 50%,
        transparent 90%
    );
}
#959492ff
#e12f18ff

/* --------------------------------------------------------------------
   #4224 — modulair tabel
   -------------------------------------------------------------------- */
.modulair-tabel .wp-block-column {
    transition: box-shadow 0.2s ease, transform 0.15s ease;
    border-radius: 12px;
}

.modulair-tabel .wp-block-column:hover {
    box-shadow: 0 0 0 3px #E12E18, 0 6px 24px rgba(225, 46, 24, 0.2);
    transform: translateY(-4px);
}