/**
 * Pattern-support-CSS.
 *
 * Hier hoort CSS die bij een Kadence-pattern (Pattern Hub) hoort, maar
 * NIET via de normale block-instellingen te regelen is — EN die overal
 * hetzelfde moet zijn (geen site-specifieke afwijking, dat hoort in het
 * Additional CSS-veld van de losse site zelf, niet hier).
 *
 * WAAROM HIER, EN NIET IN HET BLOCK'S EIGEN "CUSTOM CSS"-VELD IN DE
 * PATTERN ZELF: CSS die je daar zet, zit vast in die ene pattern-
 * instantie — pas je 'm later aan, dan moet je elke site waar die
 * pattern al gebruikt/gepusht is langs, in plaats van één plek aan te
 * passen. Hier is het één bestand, één keer aanpassen, overal bijgewerkt.
 *
 * CONVENTIE: geef de buitenste rij van een pattern een unieke,
 * herkenbare class (zoals je toch al doet voor site-specifieke CSS-
 * overrides), en gebruik diezelfde class hier als sectie-anker. Zo blijft
 * dit bestand overzichtelijk te doorzoeken, ook met veel patronen.
 *
 * Wordt op ELKE pagina geladen (we weten vooraf niet welke patronen
 * ergens gebruikt worden) — houd losse secties daarom klein en gericht.
 */

/* ==========================================================================
   Voorbeeld-sectie — vervang dit door je eerste daadwerkelijke pattern-CSS.
   Zet de class die je op de buitenste rij van de pattern hebt gezet hier
   als duidelijk commentaar-anker, zodat het terug te vinden is.
   ========================================================================== */

/*
.pattern-mega-menu-onderwijs {
    ...
}
*/

/* hero-with-background */
@media(min-width:1480px){
    .hero-with-background .inner-row {
        min-width:1440px;
    }
}

.hero-with-background .inner-row {
    width:100%;
}

@media(max-width:1024px){
    p.js-hero-sub{
        font-size:18px !important;
    }
}

/* hero big image */
.ptrn-herobigimage{
    margin-top: -101px;

    .kt-inside-inner-col{
        border-radius:8px;
    }
}
.single-content{
    .ptrn-introtext{
        h2{
            font-size:56px;
            margin-bottom:40px;
            margin-top:24px;
        }
        p{
            font-size:24px;
        }
    }
}

@media(max-width:1024px){
    .single-content{
        .ptrn-introtext{
            h2{
                font-size:32px;
                margin-bottom:24px;
            }
            p{
                font-size:20px;
            }
        }
    }
}

/* hero-text-centered */
.hero-text-centered-image figure, .hero-text-centered-image img {
  height:400px;
}
.hero-text-centered-image img {
  object-fit:cover;
}

@media(min-width:1024px){

    .hero-text-centered-image figure, .hero-text-centered-image img {
        width:1440px;
        height:600px;
    }
}

@media(max-width:1024px){

    .hero-text-centered .innerrow > div{
        padding-left:24px;
        padding-right:24px;
        padding-top: 100px;
    }
}

@media(max-width:767px){
    .entry-content .herowrapper.hero-text-centered{
        margin-top: -50px;
    }
    .entry-content .hero-text-centered-image{
        margin-top:-300px
    }
}

/* hero met overlay - Homepage header */
.herowrapper.bighero > .kt-row-column-wrap > .wp-block-kadence-column > .kt-inside-inner-col > .kb-row-layout-wrap > .kt-row-column-wrap {
    min-height:90vh;
}

.herowrapper.bighero > .kt-row-column-wrap > .wp-block-kadence-column > .kt-inside-inner-col > .kb-row-layout-wrap > .kt-row-column-wrap .kb-row-layout-wrap{
    width:100%;
}

.herowrapper.bighero > .kt-row-column-wrap > .wp-block-kadence-column > .kt-inside-inner-col > .kb-row-layout-wrap > .kt-row-column-wrap .kb-row-layout-wrap > div{
    padding-bottom:16px;
}

.herowrapper.bighero > .kt-row-column-wrap > .wp-block-kadence-column > .kt-inside-inner-col > .kb-row-layout-wrap > .kt-row-column-wrap h1{
    margin-bottom:0;
}

/* hero text reveal */
.hero-text-reveal + .hero-pattern-text-reveal.pattern-text-reveal{
    margin-top:-250px;
}


/* double-textblock */
.double-textblock-row1-textsection,
.double-textblock-row2-textsection{
    max-width:640px;
}
.double-textblock-row1:has(+ .double-textblock-row2){
    margin-bottom:80px;
}

/* image-text-pattern */
.image-text-pattern-textsection,
.text-image-pattern-textsection{
    max-width:640px;
}

.text-image-pattern.text-image-pattern > div,.image-text-pattern.image-text-pattern > div{
    padding-left:0;
    padding-right:0;
}


.text-header-left-image-right-textsection.text-header-left-image-right-textsection{
    max-width:640px;

    p{
        font-size:24px;
        line-height:130%;
        letter-spacing: -0.24px;
        margin-bottom:48px;
    }
    figure,
    figure:not(:last-child){
        margin-bottom:48px;
    }

    img{
        height: 540px;
        object-fit: cover;
    }

    .kb-buttons-wrap{
        margin-top:48px;
    }
}

@media(max-width:1024px){
    .text-header-left-image-right-textsection.text-header-left-image-right-textsection{
        img{
            height:340px
        }
        p{
            font-size: 16px;
            line-height: 140%;
        }
    }
}

/* two-images-textblock */
@media (min-width:1200px){
    .two-images-textblock-images figure,
    .two-images-textblock-images img{
        height:616px;
    }
}

/* quote-pattern */

/* steps-pattern */
.steps-pattern-step img, .steps-pattern-step figure{
  height:246px;
  width:100%;
  object-fit:cover;
  overflow:hidden;
}

/* tabsblock */
.tabsblock-number > div,
.tabsblock-arrow > div{
  width:40px;
  height:40px;
}
/* two-images-textblock */
@media (min-width:1200px){
    .tabsblock-image img,
    .tabsblock-image figure{
        position: absolute;
        top:0;
        left:0;
        height:100%;
        width:100%;
        object-fit: cover;
    }
}
.tabsblock-tab > .kt-inside-inner-col{
    padding:24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
}
.tabsblock-tab:last-child{
    margin-bottom:0;
}

@media(max-width:1024px){
    .tabsblock-tab > .kt-inside-inner-col{
        padding:8px;
    }
}

/*cta-patterns */

:root div.cta-pattern,
:root div.cta-wide  .cta-pattern-wide {
    background-color: #00749A;
}
:root div.cta-pattern.secundair, 
:root div.cta-wide.secundair  .cta-pattern-wide{
    background-color:rgba(79, 193, 0, 1);
}


.cta-pattern .hasoverflownimage{
    height: 100%;

    > div{
        position: relative;
    }

    figure{
        position: relative;
    }

    img{
        border-radius:0;
    }
}

@media (min-width:1024px){
    .cta-pattern .hasoverflownimage{

        figure{
            position: absolute;
            bottom: -80px;
            overflow: hidden;
            transform-origin: bottom; 
            transition: transform 0.2s;
        }

        img {
            height: calc(100% + 240px);
        }
    }

    .cta-pattern:has(.button:hover) .hasoverflownimage figure {
        transform: scale(1.05);
    }
}

.cta-pattern > div{
    padding:80px;
}
.cta-pattern > div p{
    margin-bottom:16px !important;
}
.cta-pattern > div h1, .cta-pattern > div h2, .cta-pattern > div h3, .cta-pattern > div h4, .cta-pattern > div h5, .cta-pattern > div h6{
    margin-bottom:40px !important;
    margin-top:0 !important;
}

:root div.cta-pattern-wide, :root div.cta-wide-text-only{
    width:calc(100% - 32px) !important;
    margin:0 auto;
}
div.cta-pattern-wide, div.cta-wide.text-only{
    margin-bottom:80px;
}
.entry-content.single-content > div.cta-pattern{
    margin-top:240px;
}

@media(max-width:1024px){
    .entry-content.single-content > div.cta-pattern{
        margin-top:80px;
    }
}

/* pattern-text-reveal */

.pattern-text-reveal{
    h2{

    }
}


.pattern-text-reveal  .js-card img, .pattern-text-reveal .js-card figure{
  height:328px ;
  width:100%;
  object-fit:cover;
  overflow:hidden;
  border-radius:24px;
}
    @media(min-width:1024px){
    .pattern-text-reveal  .js-card > div{
        height:420px;
        border-radius:24px;
    }
}

/* menu balk butttons */
.search-toggle-open,
.search-toggle-open svg{
    transition: 0.2s;
}

.search-toggle-open-container .search-toggle-open.search-toggle-style-bordered.search-toggle-style-bordered{
    border: 0.5px solid rgba(0, 0, 0, 0.3);
    padding: 21px;
}
.search-toggle-open-container .search-toggle-open.search-toggle-style-bordered.search-toggle-style-bordered svg{
    height:20px;
    width:20px;
}

.search-toggle-open:hover {
    padding: 19px 19px 19px 19px !important;
}
.search-toggle-open.search-toggle-open.search-toggle-style-bordered.search-toggle-style-bordered:hover svg{
    height:24px;
    width:24px;
}

#main-header .header-button.button-size-custom.header-button.button-size-custom  {
    padding: 23px 16px 23px 16px;
}

@media(max-width:1024px){
    .search-toggle-open-container .search-toggle-open.search-toggle-style-bordered.search-toggle-style-bordered{
        padding:6px;
    }
}

/* schoolitem */

.schoolitem {
    .wp-block-kadence-column .kt-inside-inner-col{
        &:after{
            content:'';
            background-image:url('../../images/arrow.svg');
            background-repeat: no-repeat;
            background-size:12px 12px;
            background-position: center;
            width:32px;
            height:32px;
            position: absolute;
            right: 0;
            top:-3px;
            border-radius: 8px;
            background-color: #005c74;
            transition: 0.3s;
        }
    }

    figure{
        overflow:hidden;
        border-radius:24px;

        img{
            transition: 0.3s;
        }
    }
}
.schoolitem:hover{
    .wp-block-kadence-column .kt-inside-inner-col:after{
        right:-10px;
    }

    figure{
        img{
            transform: scale(1.1);
        }
    }
}



/* stapppen */

.steps-pattern-step {
    .wp-block-kadence-column .kt-inside-inner-col{
        &:after{
            content:'';
            background-image:url('../../images/arrow.svg');
            background-repeat: no-repeat;
            background-size:12px 12px;
            background-position: center;
            width:32px;
            height:32px;
            position: absolute;
            right: 0;
            top:-3px;
            border-radius: 8px;
            background-color: #005c74;
            transition: 0.3s;
        }
    }

    figure{
        overflow:hidden;
        border-radius:24px;

        img{
            transition: 0.3s;
        }
    }
}
.steps-pattern-step:hover{
    .wp-block-kadence-column .kt-inside-inner-col:after{
        right:-10px;
    }

    figure{
        img{
            transform: scale(1.1);
        }
    }
}

/* ptrn-heading-text */
.single-content .ptrn-heading-text h2{
    margin-top:24px;
}

@media (max-width:1024px){
    .single-content .ptrn-heading-text h2{
        text-align:left;
    }
}

/* video */

.ptrn-video svg path{
    stroke-width: 25px;
    stroke-opacity: 1;
}


.hero-pattern-text-reveal p{
    font-size:16px;
}

/* onderwijsaanbod */

.ptrn-onderwijsaanbod.ptrn-onderwijsaanbod h4,
.ptrn-onderwijsaanbod.ptrn-onderwijsaanbod h3{
    font-style: normal;
    font-size:32px;
    font-weight: 500;
    line-height: 120%;
    letter-spacing: -0.64px;
    margin-bottom:40px;
}

@media (max-width: 782px) {
    .ptrn-onderwijsaanbod.ptrn-onderwijsaanbod h4,
    .ptrn-onderwijsaanbod.ptrn-onderwijsaanbod h3 {
        font-size: 22px;
        letter-spacing: -0.44px;
        margin-bottom:16px;
    }
}

/* zoekbox */
.wp-block-search__button svg{
    width:32px;
    height:32px;
    min-width:32px;
    min-height:32px;
}


/* tabsblock  */
.tabsblock.tabsblock {

    .tabsblock-tab{

        .tab-number{
            p{
                font-weight: 500;
                font-size:14px;
                line-height:15px;
            }

        }
        .tab-content{
            p{
                font-size:20px;
                line-height: 120%;
            }
        }

        &:last-child{
            margin-bottom: 0 !important;
        }
    }

    .tab-image{
        figure, img{
            position: absolute;
            width:100%;
            height:100%;
            object-fit: cover;
        }
    }

}

@media(max-width:1024px){
    .tabsblock.tabsblock {

        .tabsblock-tab{


            .tab-content{
                font-size:16px;
            }

        }
        .tab-image{
            figure, img{
                position: relative;
                width:100%;
                height:340px;
                align-self: stretch;
            }
        }
    }
}

/* footer */
footer.site-footer .site-top-footer-inner-wrap{
    padding-top:72px;
    padding-bottoM: 80px;
}

@media(max-width:1500px){
    footer.site-footer{
        .site-container{
            padding-left:64px;
            padding-right:64px;
        }
    }
}

@media(max-width:1024px){
    footer.site-footer .site-top-footer-inner-wrap{
        padding-top:24px;
        padding-bottoM: 24px;
    }
    .site-footer-middle-section-4 .kt-row-column-wrap{
        row-gap:0 !important;
    }
    footer.site-footer{
    .site-container{
        padding-left:24px;
        padding-right:24px;
    }
}
}