:root {
    /* kleuren */
    --blauw: #313653;
    --donker-blauw: #1B1F34;
    --geel: #FFDF11;
    --off-white: #F9F9F5;
    --white: #FFFFFF;
    --licht-grijs: #CDCDCD;
    --donker-grijs: #525252;
    --zwart: #000000;

    /* Vloeibare spatiëring (Padding/Margin) */
    --margin-xxs: 0.25rem;
    --margin-xs: 0.5rem;
    --margin-s: 0.75rem;
    --margin-m: 1rem;
    --margin-l: 1.25rem;
    --margin-xl: clamp(1rem, 2vw ,2rem);
    --margin-xxl: 2.5rem;

    --spacing-s: 2rem;
    --spacing-m: 6rem;
    --spacing-l: 10rem;
    --spacing-xl: 15rem;
    --spacing-xxl: clamp(3rem, 10vw, 8rem);

    /* border-radius */
    --standaard: clamp(12px, 1vw, 24px);

    /* Definieer vloeiende schalen */
    --step-1: clamp(2.5rem, 7vw, 4rem);    /* Voor grote koppen (H1) */
    --step-2: clamp(1.75rem, 5vw, 3rem);     /* Voor H2 */
    --step-3: clamp(1.5rem, 1vw, 1.5rem);     /* Voor H3 */
    --step-4: clamp(1.25rem, 1vw, 1.25rem);     /* Voor H4 */
    --step-sh: clamp(1.25rem, 2vw, 1.5rem);     /* Voor subheading */
    --step-b: clamp(1rem, 1vw, 0.75rem);     /* Voor Button */
    --step-p: clamp(1rem, 1vw, 1rem);    /* Voor standaard tekst (P) */  

    /* Defineer lettetype */
    --ff: "Red Hat Display", sans-serif;
    --p: "Red Hat Text", sans-serif;
}

/* 1. CSS reset*/
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* /////////////////////////////////////// */
/* 2. Basisinstellingen voor de body */
/* /////////////////////////////////////// */
body {
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    text-wrap: balance;
    min-height: 100vh;
    background: var(--off-white);
    height: -webkit-fill-available;
    overflow-x: hidden;
}

html {
  scroll-behavior: smooth;
}

h1 { 
    font-family: var(--ff); 
    font-weight: 300; 
    color: var(--zwart); 
    font-size: var(--step-sh); 
    line-height: 1.2; 
    letter-spacing: 0.1em;
    padding: 0em 0em var(--margin-s) 0em;
}
h2 { 
    font-family: var(--ff); 
    font-weight: 500; 
    color: var(--zwart); 
    font-size: var(--step-2); 
    line-height: 1.2; 
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding-bottom: var(--margin-s);
}
h3 { 
    font-family: var(--ff); 
    font-weight: 400; 
    color: var(--zwart); 
    font-size: var(--step-3); 
    line-height: 1.3; 
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding-bottom: var(--margin-xxs);
}
.tekst-bold { 
    font-family: var(--ff); 
    font-weight: 600; 
    color: var(--zwart); 
    font-size: var(--step-4); 
    line-height: 1.4; 
    letter-spacing: 0.1em;
    text-transform: none;
    padding-bottom: var(--margin-xxs);
}

.heading-titel {
    font-family: var(--ff); 
    font-weight: 500; 
    color: var(--zwart); 
    font-size: var(--step-1); 
    line-height: 1.1; 
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding-bottom: var(--margin-s)
}
p,
.tekst { 
    font-family: var(--p); 
    font-weight: 300; 
    color: var(--donker-grijs); 
    font-size: var(--step-p); 
    line-height: 1.6; 
}

p.bold { 
    font-weight: 400; 
    color: var(--off-white); 
}

.tekst-licht {
    color: var(--white);
}

.tekst-grijs {
    color: var(--licht-grijs);
}

.onderschrift {
    padding-bottom: var(--spacing-s);
}

.section {
    margin: var(--spacing-xxl) auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

.main-kolom {
    max-width: 1160px;
    padding: 0px 20px;
}

/* /////////////////////////////////////// */
/* Basis voor knoppen */
/* /////////////////////////////////////// */

.Button-main {
    width: fit-content;
}
.Button-main a {
    display: inline-block;
    padding: 10px 50px;
    background: var(--geel);
    color: var(--zwart);
    text-decoration: none;
    border-radius: 100vh;
    font-family: var(--p); 
    font-weight: 500;  
    font-size: var(--step-b); 
    line-height: 1.6; 
    cursor: pointer;
    margin-top: var(--margin-xl);
    text-wrap: nowrap;
}

.Button-main:hover a {
    box-shadow: 0px 0px 20px 2px var(--geel);
}

/* /////////////////////////////////////// */
/* elektro vakkundig aangesloten */
/* /////////////////////////////////////// */
.hero,
.review,
.drie-stappen,
.faq,
.timmerwerk,
.hero-home {
    background-color: var(--donker-blauw);
    padding: var(--spacing-xxl) 0px;
    margin: 0px;
}

.hero .titel,
.waarom-kiezen .titel,
.review .titel,
.drie-stappen .titel,
.andere-services .titel,
.groepenkast .titel,
.timmerwerk .groep {
    width: 70%;
}

.hero .kolom,
.review .kolom {
    padding: var(--margin-xl);
    background-color: var(--blauw);
    border-radius: var(--standaard);
}

.tekst-hero {
    padding-bottom: var(--margin-xl)
}
.kolommen {
    gap: 20px;
}

.kolom .afbeelding img {
    border-radius: var(--standaard);
}

ul.wp-block-list {
    list-style: none !important; 
    padding-left: 0 !important;
    margin-left: 0 !important;
}

ul.wp-block-list li,
.icoon {
    position: relative;
    padding-left: 30px; 
    margin-bottom: 12px; 
    font-family: var(--p); 
    font-weight: 300; 
    font-size: var(--step-p); 
    line-height: 1.6; 
}

ul.wp-block-list li::before,
.icoon::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.2em; /* Lijn het icoon uit op de bovenkant van de tekstregel */
    width: 16px;
    height: 20px;
    background-image: url('data:image/svg+xml;utf8,<svg width="16" height="20" viewBox="0 0 16 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M15.6864 8.49005C15.6636 8.66382 15.5907 8.82717 15.4764 8.96005L5.72639 19.6701C5.60277 19.8299 5.43094 19.9456 5.23639 20.0001C5.15306 20.0101 5.06972 20.0101 4.98639 20.0001C4.8449 19.9994 4.70515 19.9687 4.57639 19.9101C4.37591 19.8159 4.21613 19.6526 4.12639 19.4501C4.03921 19.2699 4.01458 19.0658 4.05639 18.8701L4.91639 12.01H1.28639C1.0789 11.9972 0.875538 11.9463 0.686392 11.8601C0.501256 11.7626 0.342615 11.6215 0.224149 11.449C0.105683 11.2765 0.0309491 11.0778 0.00639169 10.8701C-0.0146001 10.6591 0.0162968 10.4463 0.0963914 10.2501L3.87639 0.800051C3.97639 0.561051 4.14239 0.356051 4.35639 0.210051C4.57055 0.0708366 4.82097 -0.00220363 5.07639 5.06496e-05H12.3164C12.5254 0.00405065 12.7304 0.0550505 12.9164 0.150051C13.1044 0.255051 13.2654 0.403051 13.3864 0.580051C13.4984 0.759051 13.5664 0.960051 13.5864 1.17005C13.6069 1.37863 13.5724 1.58894 13.4864 1.78005L11.0964 7.35005H14.7464C14.9278 7.35612 15.1041 7.41143 15.2564 7.51005C15.417 7.61739 15.5431 7.76896 15.6194 7.94642C15.6957 8.12388 15.719 8.31964 15.6864 8.51005V8.49005Z" fill="%23FFDF11"/></svg>');
    background-repeat: no-repeat;
    background-size: contain;
}
.hamer.icoon::before,
ul.wp-block-list.hamer li::before {
    background-image: url("data:image/svg+xml,%3Csvg width='19' height='20' viewBox='0 0 19 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_428_845)'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M1 0.5C0.734784 0.5 0.48043 0.627728 0.292893 0.855086C0.105357 1.08244 0 1.39081 0 1.71234V6.56171C0 6.88324 0.105357 7.1916 0.292893 7.41896C0.48043 7.64632 0.734784 7.77405 1 7.77405H5V22.3221C5 22.6437 5.10536 22.952 5.29289 23.1794C5.48043 23.4068 5.73478 23.5345 6 23.5345H9C9.26522 23.5345 9.51957 23.4068 9.70711 23.1794C9.89464 22.952 10 22.6437 10 22.3221V7.77405H14C14.2652 7.77405 14.5196 7.64632 14.7071 7.41896C14.8946 7.1916 15 6.88324 15 6.56171V5.34936C14.9999 5.02786 14.8946 4.71954 14.707 4.49224L14.05 3.69573C13.2143 2.68255 12.2221 1.87885 11.1302 1.33053C10.0382 0.7822 8.8679 0.499988 7.686 0.5H1Z' fill='%23FFDF11'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_428_845'%3E%3Crect width='19' height='20' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
}

/* /////////////////////////////////////// */
/* aanbod groepenkast */
/* /////////////////////////////////////// */
.groepenkast .Button-main a,
.andere-services .Button-main a {
    margin-top: 0px;
}

.groepenkast-tekst {
    padding-bottom: var(--margin-xl);
}

.groepenkast .icoon,
.andere-services .icoon {
    margin-bottom: 0px;
}

.groepenkast .kolom {
    border-top-left-radius: var(--standaard);
    border-bottom-left-radius: var(--standaard);
    padding: var(--margin-xl);
    background-color: var(--blauw);
}

.groepenkast .afbeelding img {
    border-top-right-radius: var(--standaard);
    border-bottom-right-radius: var(--standaard);
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.groepenkast .kolom-afbeelding,
.andere-services .kolom-afbeelding{
    display: flex;
}


.andere-services .kolom {
    border-top-right-radius: var(--standaard);
    border-bottom-right-radius: var(--standaard);
    
    padding: var(--margin-xl);
    background-color: var(--blauw);
}

.andere-services .afbeelding img {
    border-top-left-radius: var(--standaard);
    border-bottom-left-radius: var(--standaard);
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* /////////////////////////////////////// */
/* waarom kiezen */
/* /////////////////////////////////////// */

.waarom-kiezen .groep {
    background-color: var(--donker-blauw);
    padding: var(--margin-l);
    border-radius: var(--standaard);
    height: 100%;
}

.waarom-kiezen .twee .groep { 
    background-color: var(--blauw);
}

.waarom-kiezen .een img {
    aspect-ratio: 1/1;
    border-radius: var(--standaard);
}

.waarom-kiezen .een {
    flex:1;
}

.waarom-kiezen .twee {
    flex: 1;             
    position: relative;   
    display: flex;
}
.waarom-kiezen .twee img {
    border-radius: var(--standaard);
    aspect-ratio: 1/1;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block
}

.waarom-kiezen .kolom {
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: stretch;
}

.waarom-kiezen .main-kolom {
    gap: var(--spacing-s);
    display: flex;
    flex-direction: column;
}

.lees-meer-tekst {
    font-family: var(--p); 
    font-weight: 300; 
    color: var(--licht-grijs); 
    font-size: var(--step-p); 
    line-height: 1.6;
    opacity: 0;
}

.lees-meer-button {
    text-decoration: underline;
    font-family: var(--p); 
    font-weight: 300; 
    color: var(--licht-grijs); 
    font-size: var(--step-p); 
    line-height: 1.6;
    cursor: pointer;
}

.lees-meer-container.active {
    display: flex;  
    flex-direction: column-reverse;
}

.lees-meer-button.active {
    opacity: 0;
    visibility: hidden;
    cursor: none;
    pointer-events: none;
}


/* /////////////////////////////////////// */
/* reviews */
/* /////////////////////////////////////// */

.review .onderschrift {
    padding-bottom: 0px;
}

.review .main-kolom {
    display: grid;
    grid-template-columns: 2fr;
}

.review .kolommen {
    grid-area: 2 / 1; /* Iedere review gaat naar rij 1, kolom 1 */
    opacity: 0; 
    visibility: hidden; 
    transition: opacity 0.5s ease, visibility 0.5s ease;
}

.review .titel {
    grid-area: 1 / 1;
    padding-bottom: var(--spacing-s);
}

.review .active {
    opacity: 1;
    visibility: visible;
}

.button-secondair {
    width: fit-content;
}
.button-secondair {
    background-color: transparent;
    border: none;
    padding: 10px 50px;
    border-radius: 100vh;
    font-family: var(--p); 
    font-weight: 300; 
    color: var(--licht-grijs); 
    font-size: var(--step-p); 
    line-height: 1.6; 
    cursor: pointer;
    text-decoration: none;
    transition: all 0.3s ease;
    white-space: nowrap;
    flex-shrink: 0;
}

.button-secondair:hover,
.button-secondair.active {
    background: var(--geel);
    color: var(--zwart);
    cursor: pointer;
}

.kolommen-knop {
    margin-top: var(--margin-xl);
    background-color: var(--blauw);
    display: inline-flex;
    padding: 12px 16px;
    border-radius: 100vh;
    gap: 10px;
}

/* /////////////////////////////////////// */
/* drie-stappen */
/* /////////////////////////////////////// */

.drie-stappen .kolommen {
    gap: var(--spacing-s);
}
.drie-stappen .kolom {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 20px;
}

.drie-stappen .titel {
    padding-bottom: var(--spacing-s);
}

/* /////////////////////////////////////// */
/* FAQ */
/* /////////////////////////////////////// */

.accordion-item {
    background-color: var(--blauw);
    border-radius: var(--standaard);
    padding: var(--margin-l);
    width: 100% !important;
    overflow: hidden;
}

.accordion{
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
    max-width: 100%; 
    box-sizing: border-box;
    overflow-wrap: break-word; 
}

/* /////////////////////////////////////// */
/* timmerwerk */
/* /////////////////////////////////////// */

.timmerwerk .titel {
    padding-bottom: var(--spacing-s);
}

.rij {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 20px
}

.tegels .links {
    border-bottom-right-radius: var(--standaard);
    border-top-right-radius: var(--standaard);
    display: flex;
    flex-direction: column;
    align-items: end;
}

.tegels .rechts {
    border-top-left-radius: var(--standaard);
    border-bottom-left-radius: var(--standaard);
    display: flex;
    flex-direction: column;
    align-items: start;
}


.timmerwerk .kolom {
    background-color: var(--off-white);
    padding: var(--margin-xl);
    width: 100%;
}

.tegels {
    gap: 20px;
    width: 100%;
}

.timmerwerk .afbeelding img {
    aspect-ratio: 1/1;
    max-width: 324px;
    object-fit: cover;
    width: 100%;
    height: auto;
}

/* /////////////////////////////////////// */
/* footer */
/* /////////////////////////////////////// */

.split-background {
    background: linear-gradient(to bottom, var(--donker-blauw) 50%, var(--off-white) 50%);
    display: flex;
    justify-content: center;
    align-items: center;
}

.card {
    padding: var(--margin-xl);
    margin: 0px var(--margin-xl);
    background-color: var(--blauw);
    border-radius: var(--standaard);
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    max-width: 970px;
}

.titel-footer {
    text-align: center;
}

.footer-navigation{
    margin: var(--margin-xxl) auto;
}

.footer-navigation img {
    padding: 0px var(--margin-xl) var(--margin-xl) 0px;
}

.voorwaarde {
    margin: auto auto var(--margin-xxl) auto;
}

.voorwaarde .rij {
    display: flex;
    flex-direction: row;    
    justify-content: space-between;
    border-top: solid;
    border-color: var(--zwart);
    border-width: 2px;
    padding-top: var(--margin-l);
}

.footer-navigation .kolommen {
    display: flex;
    flex-wrap: wrap !important; 
    gap: 20px; 
    justify-content: space-between;
    align-items: flex-start;
}

.footer-navigation .kolom {
    flex: 0 1 auto;
    white-space: nowrap;
    min-width: min-content;  
}

.footer-navigation a {
    color: var(--donker-grijs) !important; 
    text-decoration: none;
}

.footer-navigation a:hover {
    text-decoration: underline;
}

/* /////////////////////////////////////// */
/* header */
/* /////////////////////////////////////// */

.header {
    /* padding: var(--margin-xxs); */
    background-color: var(--donker-blauw);
    display: flex;
    justify-content: center;
}

.navigatie {
    gap: 20px;
    display: flex;
    flex-direction: row;
    align-items:  center;
}

.header .main-kolom {
    background-color: var(--off-white);
    border-radius: 100vh;
    width: 100%;
    margin: 20px 20px 0px 20px;
    padding: var(--margin-s) var(--margin-xl)
}

.section.header{
    margin:0px;
}

.header .rij {
    display: flex;
    flex-direction: row;    
    justify-content: space-between;
    align-items: center;
}

.header .Button-main a {
    margin-top: 0px;
}

/* /////////////////////////////////////// */
/* Home */
/* /////////////////////////////////////// */

/* /////////////////////////////////////// */
/* hero */
/* /////////////////////////////////////// */

.hero-home .kolom {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* /////////////////////////////////////// */
/* aanbod */
/* /////////////////////////////////////// */


.timmerwerk.home .kolom {
    background-color: var(--donker-blauw);
    padding: var(--margin-xl);
    width: 100%;
}
.timmerwerk.home {
    background-color: var(--off-white);
    padding: var(--spacing-xxl) 0px;
    margin: 0px;
}


/* /////////////////////////////////////// */
/* mobiel */
/* /////////////////////////////////////// */

@media (max-width: 781px) {

    .kolom-knop {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .kolommen-knop {
        border-radius: var(--standaard);
    }

    .timmerwerk .kolom.links {
        margin-right: var(--margin-xl);
    }

    .timmerwerk .kolom.rechts {
        margin-left: var(--margin-xl);
    }

    .faq .rij {
        flex-wrap:wrap
    }

    .groepenkast .kolom,
    .andere-services .afbeelding img {
    border-top-left-radius: var(--standaard);
    border-top-right-radius: var(--standaard);
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
}

    .groepenkast .afbeelding img,
    .andere-services .kolom
     {
        border-bottom-left-radius: var(--standaard);
        border-bottom-right-radius: var(--standaard);
        border-top-left-radius: 0px;
        border-top-right-radius: 0px;
    }
    .hero .titel,
    .waarom-kiezen .titel,
    .review .titel,
    .drie-stappen .titel,
    .andere-services .titel,
    .groepenkast .titel,
    .timmerwerk .groep {
        width: 100%;
    }

    .hero-home .kolom {
        padding-top: var(--margin-xl)
    }

    .Button-main a {
        padding: 8px 16px;
    }

    .timmerwerk .afbeelding img {
        display: none;
    }

    .maker img {
        padding-top: var(--margin-xl)
    }
}