/* =================================================================
   Fonts
   ================================================================= */

/* dancing-script-regular - latin */
@font-face {
  font-display: swap;
  font-family: 'Dancing Script';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/dancing-script-v29-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* Marcellus Regular */
@font-face {
  font-family: 'Marcellus';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/marcellus-v14-latin-regular.woff2') format('woff2');
  font-display: swap;
}

/* Oxygen Regular (400) */
@font-face {
  font-family: 'Oxygen';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/oxygen-v16-latin-regular.woff2') format('woff2');
  font-display: swap;
}

/* Oxygen Bold (700) */
@font-face {
  font-family: 'Oxygen';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/oxygen-v16-latin-700.woff2') format('woff2');
  font-display: swap;
}

/* figtree-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/figtree-v9-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* figtree-500 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/figtree-v9-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* figtree-600 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 600;
  src: url('../fonts/figtree-v9-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* figtree-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/figtree-v9-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* figtree-800 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 800;
  src: url('../fonts/figtree-v9-latin-800.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* =================================================================
   Layout blog posts
   ================================================================= */

.et_pb_module.blog-grid-alternating .et_pb_post {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas: "image text";
    align-items: center;
    column-gap: 5%;
    margin-bottom: 60px;
}
/* Laatste post geen extra margin */
.et_pb_module.blog-grid-alternating article.et_pb_post:last-of-type,
.et_pb_post .entry-featured-image-url {
    margin-bottom: 0 !important;
}
/* Even posts gespiegeld: eerst tekst, dan afbeelding */
.et_pb_module.blog-grid-alternating article.et_pb_post:nth-of-type(even) {
    grid-template-areas: "text image";
}
/* Afbeelding positioneren */
.et_pb_module.blog-grid-alternating .et_pb_post a.entry-featured-image-url {
    grid-area: image;
    width: 100%;
    height: 100%;
    display: block;
    min-width: 0;
}
.et_pb_module.blog-grid-alternating .et_pb_post a.entry-featured-image-url img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}
/* Tekstblok positioneren */
.et_pb_module.blog-grid-alternating .et_pb_post .post-text-wrapper {
    grid-area: text;
    padding: 0px 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
}
/* ---- Button Styling ---- */
.et_pb_module.blog-grid-alternating .et_pb_post .more-link {
    display: inline-block;
    padding: 0.3em 24px;
    margin-top: 20px;
    background-color: #217E86;
    color: #FFFFFF !important;
    border-radius: 6px;
    font-weight: 600;
    font-size: 16px;
    text-decoration: none;
    transition: all 0.3s ease-in-out;
}
.et_pb_module.blog-grid-alternating .et_pb_post .more-link:hover {
    background-color: #1a6369 !important;
    color: #FFFFFF !important;
}
/* ---- Mobile view ---- */
@media (max-width: 767px) {
    .et_pb_module.blog-grid-alternating .et_pb_post {
        grid-template-columns: 1fr; /* 1 kolom */
        grid-template-areas:
            "image"
            "text";
        margin-bottom: 40px;
    }
    /* Even posts ook onder elkaar */
    .et_pb_module.blog-grid-alternating article.et_pb_post:nth-of-type(even) {
        grid-template-areas:
            "image"
            "text";
    }
    .et_pb_module.blog-grid-alternating .et_pb_post .post-text-wrapper {
        padding: 0;
    }
    
    .et_pb_blog_0_tb_body .post-content {
        padding-bottom: 0px !important;
    }
    
    .et_pb_module.blog-grid-alternating .et_pb_post a.entry-featured-image-url {
        padding-bottom: 25px;
    }
}
/* ---- Images Border Colors ---- */
/* ---- Left ---- */
.custom-frame-left {
  position: relative;
}
.custom-frame-left::before,
.custom-frame-left::after {
  content: "";
  position: absolute;
  background-color: #abc0c6;
}
/* Linker lijn */
.custom-frame-left::before {
  left: -15px;
  top: 30px;
  width: 15px;
  height: calc(100% - 30px + 15px);
}
/* Onderste lijn */
.custom-frame-left::after {
  left: -15px;
  bottom: -15px;
  width: calc(100% - 30px);
  height: 15px;
}
/* ---- Right ---- */
.custom-frame-right {
  display: block;
  position: relative;
  margin: 0 auto;
  width: fit-content;
}
.custom-frame-right::before,
.custom-frame-right::after {
  content: "";
  position: absolute;
  background-color: #abc0c6;
}
/* ---- Rechter lijn ---- */
.custom-frame-right::before {
  right: -15px;
  top: 5%;
  width: 15px;
  height: calc(95% + 15px);
}
/* ---- Onderste lijn ---- */
.custom-frame-right::after {
  right: -15px;
  bottom: -15px;
  width: calc(95%);
  height: 15px;
}
/* ---- Elegante Styling voor Opsommingen in Tekstmodules ---- */
/* Algemene stijl voor lijsten in Divi Tekst-modules */
.et_pb_text_inner ul,
.et_pb_text_inner ol {
    margin-top: 0px;
    margin-bottom: 0px;
    padding-left: 25px; /* Een subtiele inspringing */
}
/* Ruimte tussen de individuele lijst-items */
.et_pb_text_inner li {
    padding-left: 0px;
    margin-bottom: 10px; /* Ruimte tussen de items */
}
/* Styling voor ONGENUMMERDE lijsten (bolletjes) */
.et_pb_text_inner ul li::marker {
    color: #217e86;
    font-size: 1.2em;
}
/* Styling voor GENUMMERDE lijsten (1., 2., 3.) */
.et_pb_text_inner ol {
    list-style: none;
    counter-reset: list-counter;
}
.et_pb_text_inner ol li {
    counter-increment: list-counter;
}
.et_pb_text_inner ol li::before {
    content: counter(list-counter) ".";
    color: #217e86;
    font-weight: 600;
    margin-right: 15px;
    font-family: 'Oxygen', sans-serif;
}
/* Verwijder de marge onder het laatste item van een lijst */
.et_pb_text_inner li:last-child {
    margin-bottom: 0 !important;
}
/* ---- Oplossing voor de 100vh 'sprong' op mobiel (met !important) ---- */
@media (max-width: 980px) {
    #homepage-hero.et_pb_section {
        height: 100vh !important;
        height: 100svh !important;
    }
}
/* Alleen mobiel: padding tussen afbeelding en tekst in blurbs met class "blurb-mobile-space" */
@media (max-width: 767px) {
  .blurb-mobile-space.et_pb_blurb_position_left .et_pb_blurb_container {
    padding-left: 10px !important;
  }
}
/* ---- Hover Cards ---- */
@media (hover: hover) {
    /* Container */
    .hover-cards {
        background-color: #FFFFFF;
        border-radius: 8px;
        height: 100%;
        box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.05), 0px 10px 40px rgba(0, 0, 0, 0.06);
        transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    }
    
    /* De Image-container */
    .hover-cards .et_pb_image_container {
        border-top-left-radius: 8px;
        border-top-right-radius: 8px;
        overflow: hidden;
    }
    
    /* Image transition */
    .hover-cards .et_pb_image_container img {
        transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    }
    
    .hover-cards:hover {
        transform: translateY(-8px);
        box-shadow: 0px 8px 25px rgba(0, 0, 0, 0.08), 0px 20px 50px rgba(0, 0, 0, 0.1);
    }
    
    .hover-cards:hover .et_pb_image_container img {
        transform: scale(1.05);
    }
}
/* Straight list layout voor categoriepagina's */
.et_pb_module.blog-list-straight .et_pb_post {
    display: grid;
    grid-template-columns: 40% 1fr;
    grid-template-areas: "image text";
    align-items: center;
    column-gap: 5%;
    margin-bottom: 60px;
    text-align: left;
}
/* Afbeelding */
.et_pb_module.blog-list-straight .et_pb_post a.entry-featured-image-url {
    grid-area: image;
    width: 100%;
    height: 100%;
    display: block;
    min-width: 0;
}
.et_pb_module.blog-list-straight .et_pb_post a.entry-featured-image-url img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}
/* Wrapper met titel + excerpt + button */
.et_pb_module.blog-list-straight .et_pb_post .post-text-wrapper {
    grid-area: text;
    padding: 20px 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
}
/* Titel */
.et_pb_module.blog-list-straight .et_pb_post .post-text-wrapper h2.entry-title {
    margin-top: 0;
    margin-bottom: 12px;
}
/* Excerpt */
.et_pb_module.blog-list-straight .et_pb_post .post-content {
    margin-bottom: 16px;
}
/* Laatste post geen extra margin */
.et_pb_module.blog-list-straight article.et_pb_post:last-of-type,
.et_pb_post .entry-featured-image-url {
    margin-bottom: 0 !important;
}
/* Button styling */
.et_pb_module.blog-list-straight .et_pb_post .more-link {
    display: inline-block;
    padding: 0.3em 24px;
    margin-top: 20px;
    background-color: #217E86;
    color: #FFFFFF !important;
    border-radius: 6px;
    font-weight: 600;
    font-size: 16px;
    text-decoration: none;
    transition: all 0.3s ease-in-out;
}
.et_pb_module.blog-list-straight .et_pb_post .more-link:hover {
    background-color: #1a6369 !important;
    color: #FFFFFF !important;
}
/* Mobile: netjes onder elkaar */
@media (max-width: 767px) {
    .et_pb_module.blog-list-straight .et_pb_post {
        grid-template-columns: 1fr;
        grid-template-areas:
            "image"
            "text";
        margin-bottom: 50px;
    }
    .et_pb_module.blog-list-straight .et_pb_post .post-text-wrapper {
        padding: 0;
        text-align: left;
    }
    .et_pb_module.blog-list-straight .et_pb_post a.entry-featured-image-url {
        padding-bottom: 25px;
    }
    .et_pb_blog_0_tb_body.blog-list-straight .entry-title {
        padding-bottom: 0px;
    }
    .et_pb_blog_0_tb_body.blog-list-straight .post-content:last-of-type {
        padding-bottom: 0px;
    }
    .et_pb_module.blog-list-straight .et_pb_post .post-content:last-of-type {
        margin-bottom: 0px;
    }
}

@media (max-width: 980px) {
    .et_pb_column .et_pb_row_inner,
    .et_pb_row {
        padding: 0 !important; /* pas de waarde aan zoals jij wil */
    }
}