/*
 Theme Name:   Astra Child
 Theme URI:    https://wpastra.com/
 Description: Child theme voor het Astra thema
 Author:      Puntkoen
 Author URI:  https://puntkoen.nl
 Template:    astra
 Version:     1.0.0
 Text Domain: astra-child
*/

:root {
    --Brand-color-White: #FFF;
    --Brand-color-Dark-blue: #00264E;
    --Brand-color-Light-grey: #F5F5F5;
    --Brand-color-Dark-grey: #333;
}


/* === SINGLE PROJECT HEADER === */

.single_header {
    position: relative;
    width: 100%;
    height: 70vh;               /* desktop hoogte */
    min-height: 420px;
    max-height: 560px;
    overflow: hidden;

    display: flex;
    padding: 112px 90px;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    gap: 40px;
}

/* Header afbeelding */
.single_header_img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}
.single_header_img img {    
    width: 100%;
    height: 100%;
    object-fit: cover;    
}
.single_header_bg {
    content: "";
    display: block;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0;
    background: rgba(36, 36, 36, 0.3);
    mix-blend-mode: multiply;
    pointer-events: none;
    z-index: 2;
} 


/* Content container */
.single_header_content {
    display: block;
    width: 100%;
    max-width: 1110px;
    margin: 0 auto;
    color: var(--Brand-color-White, #FFF);
    position: relative;
    z-index: 3;
}

/* Categorie (Waterbouw) */
.single_header_category {
    color: var(--Brand-color-White, #FFF);
    font-family: Montserrat;
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    margin-bottom: 12px;
    position: relative;
}

/* streepje onder categorie */
.single_header_category::after {
    content: "";
    display: block;
    width: 56px;
    height: 2px;
    background: var(--Brand-color-White, #FFF);
    margin-top: 24px;
    margin-bottom: 24px;
}

/* Titel */
.single_header_title {
    color: var(--Brand-color-White, #FFF) !important;
    font-family: Montserrat;
    font-size: 40px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    max-width: 680px;
}

.single_header_title.lijn_onder::after {
    background: var(--Brand-color-White, #FFF);
}
.single_header_title_vacature {
    margin-bottom: 40px;
}


.single_header_subtitle {
    font-size: 18px;
    line-height: 1.6;
    margin-top: 16px;
    max-width: 560px;
    opacity: 0.9;
}




/* === RESPONSIVE === */ 

@media (max-width: 1024px) {
    .single_header {
        height: 60vh;
        padding: 80px 48px;
        gap: 32px;
    }

    .single_header_title {
        font-size: 34px;
    }
}


@media (max-width: 767px) {

    .single_header {
        height: auto;
        min-height: 320px;
        padding: 48px 20px 32px;
        gap: 24px;
        justify-content: flex-end;
    }

    .single_header_content {
        max-width: 100%;
    }

    .single_header_category {
        font-size: 16px;
        margin-bottom: 8px;
    }

    .single_header_category::after {
        width: 40px;
        margin: 16px 0;
    }

    .single_header_title {
        font-size: 26px;
        line-height: 1.25;
        max-width: 100%;
    }

    .single_header_title_vacature {
        margin-bottom: 24px;
    }

    .single_header_subtitle {
        font-size: 15px;
        margin-top: 12px;
    }

    /* Scroll-down button kleiner en losser */
    .scroll-down {
        margin-top: 16px;
        transform: scale(0.85);
        align-self: flex-start;
    }
}




.scroll-down {
    position: absolute;
    width: 40px;
    height: 40px;
    background: none !important;
    border: 0;
    padding: 0;
    cursor: pointer;
    z-index: 10;
    right: 0;
    bottom: 0;
}

.scroll-down svg {
    display: block;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.scroll-down:hover svg {
    transform: translateY(4px);
    opacity: 0.85;
}

/* mobiel iets hoger */
@media (max-width: 768px) {
    .scroll-down {
        bottom: 0;
        right: 0;
    }
}



/* CONTACTBLOK */
/* Wrapper */
.single_contactblok {
}

/* Titel */
.single_contactblok h3 {
    margin-bottom: 0;
    font-size: 22px;
    font-weight: 600;
}

/* Card */
.single_contactblok-card {

    display: flex;
    flex-wrap: wrap;
    padding: 24px;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 24px;
    align-self: stretch;
    border-radius: 8px;
    border: 1px solid rgba(36, 36, 36, 0.15);
    background: var(--Brand-color-White, #FFF);
}
.single_contactblok-card h3 {
    display: block;
    width: 100%;
    color: var(--Brand-color-Black, #242424);
    font-family: Montserrat;
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

/* Foto */
.single_contactblok-card .persoon-foto img {
    width: 64px;
    height: 64px;
    border-radius: 4px;
    object-fit: cover;
    display: block;
}

/* Info */
.single_contactblok-info {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: 32px;
}

/* Naam */
.single_contactblok-info .single_contactblok-naam {
    color: var(--Brand-color-Dark-grey, #333);
    font-family: Montserrat;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 160%;
}
.single_contactblok-info .single_contactblok-naam strong {
    color: var(--Brand-color-Dark-grey, #333);
    font-size: 18px;
    font-weight: 700;
}


/* Contactregels */
.single_contactblok-contactregels {
    display: flex;
    gap: 24px;
    color: var(--Brand-color-Dark-blue, #00264E);
    font-family: Montserrat;
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: 160%; /* 22.4px */
}

/* Links */
.single_contactblok-contactregels a {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--Brand-color-Dark-blue, #00264E);
}

.single_contactblok-contactregels a:hover {
    text-decoration: underline;
}

/* Terug-link */ 
.single_contactblok_terug_link {
    margin-top: 56px;
}

/* Responsive */
@media (max-width: 600px) {

    .single_contactblok-card {
        padding: 24px;
        gap: 24px;
    }

    /* Info stacken */
    .single_contactblok-info {
        flex-direction: column;
        align-items: flex-start;
        gap: 24px;
        width: 100%;
    }

    /* Foto + naam naast elkaar */
    .persoon-foto {
        flex-shrink: 0;
    }

    .single_contactblok-naam {
        font-size: 14px;
    }

    /* Contactregels onder elkaar */
    .single_contactblok-contactregels {
        flex-direction: column;
        gap: 8px;
        width: 100%;
    }

    .single_contactblok-contactregels a {
        font-size: 14px;
    }

    /* Terug-link compacter */
    .single_contactblok_terug_link {
        margin-top: 32px;
    }
}






.gerelateerde_projecten {
    margin-top: 112px;
    margin-bottom: 112px;
} 

.gerelateerde_projecten h2 {
    color: var(--Brand-color-Black, #242424);
    text-align: center;
    font-family: Montserrat;
    font-size: 32px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    position: relative;
    margin: 0;
}
.gerelateerde_projecten h2::after {
    content: "";
    display: block;
    margin: 40px auto;
    width: 56px;
    height: 2px;
    background: var(--Brand-color-Dark-blue, #00264E);
}

.project_card {
    border-radius: 8px;
    background: var(--Brand-color-White, #FFF);
    overflow: hidden;
}

.project_card img {
    width: 100%;
    height: auto;
    display: block;
}

.project_content {
    padding: 24px;
}

.project_content h3 {
    color: var(--Brand-color-Black, #242424);
    font-family: Montserrat;
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.project_content span.project_link {
    display: inline-block;
    margin: 32px 0 0;
    color: var(--Brand-color-Dark-blue, #00264E);
    font-family: Montserrat;
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: 160%; /* 22.4px */
}

.projecten_cat_overzicht {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(535px, 1fr));
    gap: 40px;
}

.project_cat_card {
    display: block;
    background: #ffffff;
    border-radius: 6px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.project_cat_card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 24px rgba(0,0,0,0.08);
}

.project_cat_afbeelding {
    height: 300px;
    background-size: cover;
    background-position: center;
}

.project_cat_content {
    padding: 24px;
}
.project_cat_titel {
    display: flex;
    gap: 16px;
    align-items: center;
    margin-bottom: 16px;
}

.project_cat_icoon img,
.project_cat_icoon svg {
    width: 40px;
    height: auto;
}

.project_cat_titel h3 {
    color: var(--Brand-color-Black, #242424);
    font-family: Montserrat;
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    margin: 0;
}

.project_cat_content {
    color: var(--Brand-color-Dark-grey, #333);
    font-family: Montserrat;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 160%; /* 22.4px */
}

.project_cat_content p {
    margin-bottom: 32px;
}

.project_cat_link {
    color: var(--Brand-color-Dark-blue, #00264E);
    font-family: Montserrat;
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: 160%; /* 22.4px */
}
.project_cat_link span {
    text-transform: lowercase;
}





@media (max-width: 768px) {
    .gerelateerde_projecten .swiper {
        padding-left: 15px;
    }
}





.archive_project_cat_header {
    display: flex;
    align-items: center;
    gap: 24px;

}

/* Icoon container (cirkel) */
.archive_project_cat_icoon {
    flex-shrink: 0;
    width: 80px;
    height: 80px;
}

/* Icoon zelf */
.archive_project_cat_icoon img,
.archive_project_cat_icoon svg {
    width: 80px;
    height: auto;
    display: block;
}

/* Titel */
.archive_project_cat_titel {
    color: var(--Brand-color-Black, #242424);
    font-family: Montserrat;
    font-size: 40px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    margin: 0;
}

/* Responsive */
@media (max-width: 768px) {
    .projecten_cat_overzicht {
        grid-template-columns: 1fr;
        gap: 20px; 
    }
    .archive_project_cat_header {
        gap: 16px;
    }

    .archive_project_cat_icoon {
        width: 56px;
        height: 56px;
    }

    .archive_project_cat_icoon img,
    .archive_project_cat_icoon svg {
        width: 56px;
        height: 56px;
    }

    .archive_project_cat_titel {
        font-size: 28px;
    }
}




.project_overzicht {
    max-width: 1200px;
    margin: 0 auto;
}

/* rijen */
.project_overzicht_row {
    display: grid;
    gap: 32px;
    margin-bottom: 56px;
}

/* eerste 2 */
.project_overzicht_row_2 {
    grid-template-columns: repeat(2, 1fr);
}

/* rest */
.project_overzicht_row_3 {
    grid-template-columns: repeat(3, 1fr);
}


/* responsive */
@media (max-width: 1024px) {
    .project_overzicht_row_2,
    .project_overzicht_row_3 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .project_overzicht_row_2,
    .project_overzicht_row_3 {
        grid-template-columns: 1fr;
    }
}



/* Vacatures overzicht */
.vacatures_overzicht {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

/* Card */
.vacature_card {
    display: flex;
    align-items: flex-start;
    align-self: stretch;
    border-radius: 8px;
    background: var(--Brand-color-White, #FFF);
    overflow: hidden;
}
.vacature_card a {
    display: flex;
    text-decoration: none;
    color: inherit;
    height: 100%;
}


/* Afbeelding */
.vacature_image {
    max-width: 300px;
}

.vacature_image img {
    width: 100%;
    height: 100%;
    height: 300px;
    object-fit: cover;
    border-radius: 0;
}

/* Content */
.vacature_content {
    flex: 1;
    padding: 24px;
}

.vacature_title {
    margin: 0 0 12px;
    font-size: 22px;
}

.vacature_text {
    margin: 0 0 20px;
    color: #444;
}

.vacature_link { 
    font-weight: 600;
    color: #b1002a;
}
/* Responsive */
@media (max-width: 768px) {
    .vacature_card {
        flex-direction: column;
        align-items: stretch;
    }
    .vacature_card a {
        flex-direction: column;
    }

    .vacature_image {
        max-width: 100%;
    }

    .vacature_image img {
        max-height: 240px;
    }
}




/* Button */
.more_button {
    cursor: pointer;
    display: inline-flex;
    padding: 12px 16px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 4px;
    background: var(--Brand-color-Red, #AE0931);
    color: var(--Brand-color-White, #FFF) !important;
    font-family: Montserrat;
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: 160%; /* 22.4px */
    transition: background 0.2s ease;
}
.more_button:hover {
    background: #8f0022;
}
/* Button */
.back_button {
    display: inline-flex;
    padding: 12px 16px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 4px;
    background: var(--Brand-color-Light-grey, #F5F5F5);
    color: var(--Brand-color-Black, #242424) !important;
    font-family: Montserrat;
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: 160%; /* 22.4px */
    transition: background 0.2s ease;
}
.back_button:hover {
    background: #ebebeb;
}








.lijn_onder {
    
}
.lijn_onder::after {
    content: "";
    display: block;
    width: 56px;
    height: 2px;
    margin-top: 24px;;
    background: var(--Brand-color-Dark-blue, #00264E);
}