/*------------------------------------*\
    STRUCTURE
    --header
    --main
    --footer
\*------------------------------------*/

body{
    background-color: var(--bg-color);
    display: flex;
    flex-flow: column nowrap;
    justify-items: stretch;
    justify-content: space-between;

}




/*------------------------------------*\
    header
\*------------------------------------*/

.site-header {
    position: fixed;
    overflow: visible; 
    top: 3rem;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - var(--container-padding));
    max-width: var(--max-width);
    border-radius: var(--border-radius);
    border: var(--border-width) solid var(--houtskool);
    background: linear-gradient(180deg, rgba(255,255,255,0.4), rgba(255,255,255,0.1));
    z-index: 1100;
    pointer-events: none;
    transition: 0.16s all  ease-in-out;
    
    &:before{
        content: "";
        position: absolute;
        z-index: -1;
        inset: 0;                       
        backdrop-filter: blur(8px);
        border-radius: inherit;        
        transition: border-radius .15s ease;   
        pointer-events: none;  
    }
}
    
.site-header:hover {
    /* width: 50%; */
    /* border-radius: 3em; */
     backdrop-filter: blur(8px);
}

.site-header-inner {
    pointer-events: auto;
    height: 100%;
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: space-between;

    height: var(--header-height);
    padding: 0 1em 0 0;

    transition: all var(--transition-speed) ease;
    overflow: visible;


}




    .logo{
        display: inline-flex;
        align-items: center;
        padding-top: 0.5em;
        height: calc( var(--header-height) - 0.5em);
        text-decoration: none;
        color: inherit;
        transform-origin: left center;

    }
        /* .logo-icon{
            width: 4em;
            aspect-ratio: 1 / 1;
            display: block;
            transition: transform var(--transition-speed) ease, margin var(--transition-speed) ease;
            margin-left: 0;
        }
        .logo-word{
            font-family: 'BwGradual', Helvetica, Arial, sans-serif;
            font-weight: 900;
            font-size: calc( 1.8 * var(--font-size));
            letter-spacing: -0.05em;
            white-space: nowrap;
            opacity: 1;
            transition: opacity var(--transition-speed) ease, transform var(--transition-speed) ease;

            &starting-style  {
                opacity: 0;
                transform: translateX(-6px);
            }
        } */

    .main-nav {
        flex: 1 1 auto;
        display: flex;
        justify-content: flex-end;
        opacity: 1;
        transition: 1s opacity var(--transition-speed) ease;

        @starting-style  {
            opacity: 0;
        }

        ul {
            margin: 0;
            margin-left: auto;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 2px;
            padding: 0;
        }

        li {
            margin: 0 0;
            list-style: none;
        }

            li:last-child {
                margin-right: 0;
            }


    }

   

    .account-actions { 
        display: inline-flex; 
        gap: 2px; 
        align-items: center; 
        opacity: 1;
        font-family: 'BwGradual', Helvetica, Arial, sans-serif;
        transition: 1s opacity var(--transition-speed) ease;

        @starting-style  {
            opacity: 0;
        }

    }




    .language-switcher {
        position: absolute;
        top: -2em;
        right: 0;
        display: flex;
        flex-flow: row nowrap;
        gap: 0.5em;
       

        li{
            list-style: none;
            a{
                font-family: 'BwGradual', Helvetica, Arial, sans-serif;
                font-weight: 600;
                font-size: calc(var(--font-size) *   0.8);
                text-shadow: 0 0 3px rgba(255, 255, 255, 0.9), 
                 0 0 6px rgba(255, 255, 255, 0.5);
            }
        }
    }
            
    
.hamburger-menu { display: none; background: none; border: 0; cursor: pointer; padding: 8px; }

.mobile-nav { display: none; }

.no-scroll { overflow: hidden; }


/*------------------------------------*\
    MAIN & ARTICLE
\*------------------------------------*/

main {
    display: flex;
    flex-flow: column nowrap;
    width: 100%;
    
}

article {
    width: 100%;
    display: flex;
    flex-flow: column nowrap;
}

    article > *:first-child{
        padding-top: calc(3em + var(--header-height)) !important;
    }

h1{
    position: absolute;
    top: -500px;
}

/*------------------------------------*\
    kolomindeling secties 
\*------------------------------------*/


/*  algemene kolomindeling en spanning voor content */
h1,
article > *,
article > .wp-block-group {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    padding: 0  max(var(--container-padding), calc((100% - var(--width-8-cols)) / 2));
   
}

/* 12-koloms elementen */
article > .alignwide,
article > :is(.wp-block-columns, .wp-block-image, figure, .challenges, .wp-block-group.pricing) { /* Kolommen blok ook breder */
    padding: 0 max(var(--container-padding), calc((100% - var(--max-width)) / 2));
}

article > .alignfull {
    padding-left: 0;
    padding-right: 0;
    width: 100%;
    max-width: 100%;
}

p + .wp-block-group {
    margin-top: var(--section-margin);
}

.wp-block-group + h2 {
    margin-top: calc( 1em + var(--section-margin)  );
}   

article > :is(.wp-block-group, .has-background){
    padding-top: var(--section-margin) !important;
    padding-bottom: var(--section-margin) !important;
}

    article > .wp-block-group.is-layout-grid{
        padding-top: 1em;
        margin-top: 0;
    }
.wp-block-group.stories{
    padding-top: var(--section-margin);
    padding-bottom: var(--section-margin);
    padding-left: max(var(--container-padding), calc((100% - var(--max-width)) / 2)); 
    padding-right: max(var(--container-padding), calc((100% - var(--max-width)) / 2)); 

    & >h2,
    & >p{
        width: var(--width-6-cols);
    }

}

.home main > article > * {
    padding: var(--section-margin) max(var(--container-padding), calc((100% - var(--max-width)) / 2));
    > h2,
    > h2 + p{
        width: var(--width-6-cols);
    }
}

main > article > .carousel{
     padding: 0 !important;

}

hr{
    all: unset !important;
    margin: 3em 2em !important;
    border: var(--border-width) solid var(--salie) !important;
    border-radius: var(--border-radius);
}







    
/*------------------------------------*\
    block elements
\*------------------------------------*/

.home{
    background-image: url(../img/bg-hero-home.png);
    background-position: center;
    background-size: 100%;
    background-repeat: no-repeat;
}
.home .hero{
    padding-top: calc( var(--header-height) + 3rem ) !important;
    background-position: right;
    background-size: auto 100%;
    background-repeat: no-repeat;
}

.home .hero > img{
    mix-blend-mode: multiply;
}

.home .hero .wp-block-columns{
    display: flex;

    & > *{
    flex:  0 0 50%;
    }
}

.home .hero .wp-block-column{
    position: relative;
    display: flex;
    flex-flow: column wrap;
    justify-content: flex-end;

 

    &:first-child{
        padding-left: var(--col-span-2);
        padding-bottom: var(--section-margin);
        width: calc( 50% - var(--gutter));
    }
    &:nth-child(2){
         /* padding-right: var(--col-span-2); */
    }

    & figure:first-child{
  
    }
    & .foon{
        position: relative;
    }
    & .foon::after{
        content: '';
        position: absolute;
        z-index: 100;
        top: 50%;
        left: 42%;
        margin: 0;
        transform: translate(-50%, -50%);
        width: 13%;
        aspect-ratio: 1 / 1;
        height: auto;
        background: url('../img/agromigo_logo_animatie.svg');
        color: var(--kiem);

        & svg{
            stroke: var(--kiem);
        }
    }
    
}

.wp-block-cover.hero p{
   width: unset;
   font-size: calc( var(--font-size) * 2.2 );
   font-weight: 300;
  
}


body:not(.home) .hero {
    padding-top: calc( var(--header-height) + 6em) !important;
    min-height: 75vh;
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    color: var(--houtskool);

    h2{
        margin-bottom: 0;
        padding: 0  max(var(--container-padding), calc((100% - var(--width-8-cols)) / 2));
    }

    p{
        font-size: calc(var(--font-size) * 2.2);
        font-weight: 300;
        text-align: center;
        padding: 0  max(var(--container-padding), calc((100% - var(--width-8-cols)) / 2));
        line-height: 1.1;
        color: inherit;
        margin-top: 0;
    }

    .wp-block-buttons{
        margin-top: 3rem !important;
        margin-bottom: var(--section-margin);
    }
    
}




.wp-block-cover .wp-block-cover__background{
    opacity: 0;
}
    .wp-block-cover h2{
        margin-bottom: 1em;
    }
    .wp-block-cover p{
        text-align: left;
        color: white;
        font-family: 'BwGradual', Helvetica, Arial, sans-serif;
        font-weight: bold;
        font-size: var(--font-size-intro);
        line-height: 1.25;
    }   

.wp-block-column.has-background{
    padding: var(--padding);
    border-radius: var(--border-radius);
}

.wp-block-column figure + h3{
    margin-top: 0.3em !important;
}


.wp-block-group.introduction{
    padding: 0 max(var(--container-padding), calc((100% - var(--max-width)) / 2));
    margin: auto;

    & h2{
        width: var(--width-6-cols);
        text-align: center;
        margin-top: var(--gutter);
        margin-bottom: 0.25em;
    }

    & h2 + p{
        width: var(--width-6-cols);
        text-align: center;
        margin-top: 0;
        margin-bottom: 0;
    }

    & > .wp-block-columns {
        display: flex;
        flex-flow: row wrap;
        gap: var(--gutter);

        & > *{
            flex: 1 1 calc(50% - var(--gutter));
            /* background-color: var(--salie); */
            padding: var(--padding);
            border-radius: var(--border-radius);
            display: flex;
            flex-flow: column nowrap;
            align-items: center;

            &  figure img{
                aspect-ratio: 16 / 9;
                object-fit: cover;

            }


        }
    }
}

.challenges, .solutions, .values, .wp-block-group.pricing, .stories, .steps{
    padding: var(--section-margin) 0;
    margin: auto;

    & h2{
        text-align: center;
        margin-top: var(--gutter);
        margin-bottom: 0.25em;
    }

    & h2 + p{
        text-align: center;
        margin-top: 0;
        margin-bottom: 0;
    }

    & > .wp-block-columns {
        display: flex;
        flex-flow: row wrap;
        gap: var(--gutter);

        & > *{
            flex: 1 1 calc(25% - var(--gutter));
            /* background-color: var(--salie); */
            padding: var(--padding);
            border-radius: var(--border-radius);
            display: flex;
            flex-flow: column nowrap;
            justify-content: flex-start;
            align-items: center;

            &  figure{
     
            width: 4em;
            height: 4em;

            }

            & h3{
                text-align: center;
                margin-bottom: var(--gutter);
            }

            & h3 + p{
                text-align: center;
                margin-top: 0;
                margin-bottom: var(--gutter);
            }
        }    
    }  
}

.values .wp-block-columns {
    & > *{
        background-color: var(--kiem);
    }
}


.wp-block-group.pricing{

    & h2{
        width: var(--width-6-cols);
    }

    /* Intro paragraph — font-size override removed so this now matches
       the shared (unsized) h2 + p rule used by challenges/solutions/
       values/stories/steps above, instead of using the larger
       --font-size-intro treatment it had before. */
    & h2 + p{
        width: var(--width-6-cols);
        text-align: center;
        margin-top: 0;
        margin-bottom: var(--gutter);
    }

    & > .wp-block-columns {

        & > *{
            flex: 1 1 calc(33.333% - var(--gutter));
            background-color: var(--salie);
            color: var(--houtskool);


            &  figure{
     
            width: 5em;
            height: 5em;

                & svg,
                & .wp-block-image svg {
                    fill: currentColor;
                    stroke: currentColor; 
                    width: 100%;
                    height: auto;
                }

            }

            & h3{
                /* font-size: calc( var(--font-size) * 2.2); */
                text-align: center;
                margin-top: 0;
                margin-bottom: 0.5em;
            }
            & h3 + h4{
                font-weight: 300;
                font-size: var(--font-size);
                margin-top: 0;
                margin-bottom: 2em !important;
            }


            p, ul {
                margin: 0;
                padding: 0;
                display: inline;
                text-align: center;
                width: 100%;

                & li{
                    list-style: none;
                    margin-left: 0;
                    padding-left: 0;
                }
            }
            & h4 + p{
                font-size: 1.25em;
                line-height: 1.25;
                text-align: center;
                margin-top: 0;
                margin-bottom: var(--gutter);
            }
            
            .wp-block-buttons{
                flex-grow: 1;
                justify-self: end;
            }
            .wp-block-button{
                align-self: end;
            }
        }   
        
        /* & > *:first-child {
            background-color: var(--kiem);
            color: var(--houtskool);
        }  

        .wp-block-column:nth-child(3){
            background-color: var(--salie);
            color: var(--houtskool);
        } 

        .wp-block-column:nth-child(3){
            background-color: var(--houtskool);
            color: var(--kiem);
        } */
    }
}

.stories{
    background-color: var(--kiem);

    &.generic-carousel{
        flex: 0 0 calc((100% - (2 * var(--gutter))) / 3)
    }

    & .generic-carousel .wp-block-group,
    & .wp-block-columns > *{
        background-color: transparent;
        border: var(--border-width) solid var(--houtskool);
        border-radius: var(--border-radius);
        padding: var(--padding);
        height: auto;
        

    }
}

.has-houtskool-background-color {
    color: var(--kiem) !important;
}

.has-houtskool-background-color figure svg {
    fill: var(--kiem); 
}


/* tabellen */
.wp-block-table {
    margin: 3em 0;
    border: none;

}

.wp-block-table table {
    border-collapse: collapse;
    width: 100%;
    border: none !important; /* Forceer geen buitenranden */
}

/* Header styling */
.wp-block-table thead, 
.wp-block-table th {
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    border-bottom: 3px solid var(--houtskool) !important;
    border-radius: 2px;
    color: var(--black);
    font-family: 'BwGradual', sans-serif;
    font-weight: bold;
    text-align: left;
    padding: 1em 0.5em;
}

/* Cellen & Horizontale lijnen */
.wp-block-table td {
    padding: 1em 0.5em;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    border-bottom: 3px solid var(--salie) !important;
    border-radius: 2px;
    color: var(--houtskool);
    vertical-align: top;
}

/* Laatste rij afwerken */
.wp-block-table tr:last-child td {
    border-bottom: none !important;
}

/* Mobiele fix: horizontaal scrollen */
@media (max-width: 760px) {
    .wp-block-table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .wp-block-table table {
        min-width: 600px;   
    }

    /*uitzondering: tabellen in kolommen*/

    .wp-block-column  .wp-block-table table{
        min-width: 80vw;
    }
}



article svg{
    width: 100%;
}
 

/*------------------------------------*\
    FOOTER
\*------------------------------------*/





footer{
    padding-top: var(--section-margin);
    background-color: var(--footer-color);
    color: var(--footer-txt-color);
    display: flex;
    justify-content: center;

    .footer__inner {
  
        font-size: calc(var(--font-size) * 0.8);
        width: 100%;
        padding: 0 max(var(--container-padding), calc((100% - var(--max-width)) / 2));
        margin: auto 0;
     
        display: flex;
        flex-flow: row wrap;
        justify-content: space-between;
        align-items: flex-start;
        gap: 1rem;


        .wp-block-columns h3{
            color: white;
        }
    }   

    .footer-logo{
        display: flex;
        flex-flow: row nowrap;
        align-items: center;
        width: 12em;
        margin-left: -0.8em;

        svg{
            fill: var(--footer-txt-color);
        }


    }

    .wp-block-columns{
       font-size: var(--font-size);
       gap: var(--gutter);
    }
    .wp-block-column:first-child{
         flex: 0 0 var(--col-span-3) !important;
    }

    .wp-block-column:nth-child(2){
         flex: 0 0 var(--col-span-5) !important;
    }

    .pay-off{
 
        font-family: 'BwGradual', Helvetica, Arial, sans-serif;
        font-weight: bold;
        font-size: calc( var(--font-size) * 3);
        line-height: 1.14;
        color: var(--kiem);

    }

    .proposition{
        font-family: 'BwGradual', Helvetica, Arial, sans-serif;
        font-weight: bold;
        font-size: var(--font-size-intro);
        line-height: 1.25;
        color: var(--salie);
    }


    h2{

        color: inherit;
        margin: 0;
    }


    .footer-menu{
            width: 100%;
            max-width: var(--max-width);
            display: flex;



        ul{

            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            flex-flow: row wrap;
            padding: 0;
            margin: 0;

            height: 7rem;
        }
        li{
            display: inline-flex;
            list-style: none;
            margin-left: 2em;
            display: flex;
            align-items: center;


            a{
                display: flex;
                align-items: center;
                color: white;
                text-decoration: none;
            }

            span{
                display: flex;
                align-items: center;
                justify-content: center;
                width: 2em;
                aspect-ratio: 1 / 1;
            }

            svg{
                fill: var(--footer-txt-color);
                width: 100%;
            }

        }
    }

}