/**
 * 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;
  width:calc(100% - 32px);
  margin:0 auto;

}

.hero-text-centered + .hero-text-centered-image figure{
    margin-top:64px;
}
.hero-text-centered-image img {
  object-fit:cover;
}

.hero-text-centered .kt-inside-inner-col .kt-inside-inner-col{
    padding-left:16px;
    padding-right:16px;

}



@media(min-width:1024px){

    .hero-text-centered-image figure, .hero-text-centered-image img {
        
        height:600px;
        
    }
    .hero-text-centered + .hero-text-centered-image figure{
        margin-top: 0;
    }
}

@media(min-width:1472px){

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

@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 {
     height:90vh;
    min-height:650px;
}

.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;
    }
}
}

/**
 * .ptrn-tabs-vertical — verticale tabs, opgebouwd uit gewone Kadence
 * Columns (geen custom block). In de editor staan alle secties
 * gewoon volledig uitgeklapt/zichtbaar, los bewerkbaar — dit CSS/JS
 * legt op de FRONTEND het open/dicht-gedrag eroverheen.
 *
 * STRUCTUUR (zie de gegenereerde HTML):
 *   .ptrn-tabs-vertical-tabs .kt-inside-inner-col   → de rij van tabs
 *     .ptrn-tabs-vertical-tab                        → één tab
 *       .kt-inside-inner-col
 *         :first-child   → .kb-section-dir-horizontal (nummer + "Menu
 *                          item") — de HEADER, ALTIJD zichtbaar, klikbaar
 *         :not(:first-child) → figuur + tekst/knop-rij — alleen
 *                          zichtbaar als deze tab actief is
 *
 * CENTRERING VIA ABSOLUTE POSITIONERING — bewust, i.p.v. een
 * height:100%-keten door de geneste Kadence-kolommen heen: die keten
 * bleek ergens stil af te breken (geen foutmelding, viel gewoon terug
 * op 'auto'), met als gevolg dat er niks was om verticaal binnen te
 * centreren. Door de header los te maken van de documentflow
 * (position:absolute) en te centreren op de tab zelf
 * (position:relative als anker), maakt de nesting-diepte niet meer
 * uit.
 */

.ptrn-tabs-vertical h2 {
	max-width: 800px;
}

.ptrn-tabs-vertical-tabs > .kt-inside-inner-col > div > div.kt-row-column-wrap {
	display: flex !important;
	flex-direction: row;
	gap: 16px;
	align-items: stretch;
}

.ptrn-tabs-vertical-tab {
	position: relative; /* anker voor de absolute centrering van de header hieronder */
	flex: 0 0 88px;
	transition: flex-basis 0.5s cubic-bezier(0.65, 0, 0.35, 1);
	overflow: hidden;
	border-radius: 16px;
	cursor: pointer;
}

.ptrn-tabs-vertical-tab.is-active {
	flex: 1 1 auto;
	cursor: default;
}

/* Nummer/tekst-volgorde omgedraaid — bewuste ontwerpkeuze: tekst
   boven, nummer eronder. */
.ptrn-tabs-vertical-tab:not(.is-active) {
	.tab-content {
		order: 1;
	}
	.tab-number {
		margin-top: 24px;
		order: 2;
	}
    > div{
        height:100%;
        justify-content: flex-end;
    }
    .kt-inside-inner-col .kt-inside-inner-col {
        justify-content: center;
    }
}

/* De header (nummer + "Menu item") — ALTIJD zichtbaar. In actieve
   stand gewoon horizontaal naast elkaar, normale documentflow. */
.ptrn-tabs-vertical-tab > .kt-inside-inner-col > :first-child {
	display: flex;
}

/* Ingeklapte stand: header losgemaakt van de flow en gecentreerd op
   de tab zelf — zie toelichting bovenaan. */
.ptrn-tabs-vertical-tab:not(.is-active) > .kt-inside-inner-col > :first-child {
	position: absolute;
	bottom:-66px;
	left: 50%;
	transform: translate(-50%, -50%);
	flex-direction: column;
	align-items: center;
	width: auto;
}

.ptrn-tabs-vertical-tab:not(.is-active) > .kt-inside-inner-col > div .tab-content {
	writing-mode: vertical-rl;
	transform: rotate(180deg);
	white-space: nowrap;
}

/* Rest (afbeelding + paragraaf/knop-rij) — alleen zichtbaar als deze
   tab actief is. Instant tonen/verbergen, geen fade — bewuste keuze:
   alleen de breedte-overgang van de tab zelf animeert. */
.ptrn-tabs-vertical-tab > .kt-inside-inner-col > :not(:first-child) {
	display: none;
}

.ptrn-tabs-vertical-tab.is-active > .kt-inside-inner-col > :not(:first-child) {
	display: block;
}

.wp-block-kadence-column.kb-section-dir-horizontal > .kt-inside-inner-col > .wp-block-kadence-column {
	flex: inherit !important;
}

.ptrn-tabs-vertical-tab:not(.is-active) > .kt-inside-inner-col > :first-child {
  bottom: 32px;
  transform: translateX(-50%);
}

/**
 * Mobiel — de "smalle kolom met geroteerde tekst"-truc werkt alleen
 * zinvol als brede rij naast elkaar. Op mobiel gewoon een normale,
 * rechtop gestapelde accordion, geen geroteerde tekst meer nodig.
 */
@media (max-width: 782px) {
	.ptrn-tabs-vertical-tabs .kt-inside-inner-col {
		flex-direction: column;
	}

	.ptrn-tabs-vertical-tab {
		flex-basis: auto;

        .kb-buttons-wrap{
            justify-content: flex-start;
            margin-bottom:8px !important
        }

        .wp-block-kadence-rowlayout > div{
            gap:16px;
        }
        .kb-section-dir-horizontal{
            margin-bottom:16px;
        }
	}
    .ptrn-tabs-vertical-tab:not(.is-active) {
    .kt-inside-inner-col .kt-inside-inner-col {
        justify-content: flex-start;
    }
}

	.ptrn-tabs-vertical-tab:not(.is-active) > .kt-inside-inner-col > :first-child {
		position: static;
		transform: none;
		flex-direction: row;
		height: auto;
		width: 100%;
	}

	.ptrn-tabs-vertical-tab:not(.is-active) > .kt-inside-inner-col > :first-child .tab-content {
		writing-mode: horizontal-tb;
		transform: none;
		white-space: normal;
	}
    .ptrn-tabs-vertical-tabs > .kt-inside-inner-col > div > div.kt-row-column-wrap{
        flex-direction: column;
    }
    .ptrn-tabs-vertical-tab:not(.is-active) > div > div{
        margin-bottom:0 !important;
    }

    .ptrn-tabs-vertical-tab:not(.is-active) {
        .tab-content {
            order: 2;
        }
        .tab-number {
            margin-top: 0 !important;
            order: 1;
        }

    }
}

/* Number of closed tabs, counted automatically (up to 8 tabs) */
.ptrn-tabs-vertical-tabs .kt-row-column-wrap:has(> .ptrn-tabs-vertical-tab:nth-child(2)) { --closed-tabs: 1; }
.ptrn-tabs-vertical-tabs .kt-row-column-wrap:has(> .ptrn-tabs-vertical-tab:nth-child(3)) { --closed-tabs: 2; }
.ptrn-tabs-vertical-tabs .kt-row-column-wrap:has(> .ptrn-tabs-vertical-tab:nth-child(4)) { --closed-tabs: 3; }
.ptrn-tabs-vertical-tabs .kt-row-column-wrap:has(> .ptrn-tabs-vertical-tab:nth-child(5)) { --closed-tabs: 4; }
.ptrn-tabs-vertical-tabs .kt-row-column-wrap:has(> .ptrn-tabs-vertical-tab:nth-child(6)) { --closed-tabs: 5; }
.ptrn-tabs-vertical-tabs .kt-row-column-wrap:has(> .ptrn-tabs-vertical-tab:nth-child(7)) { --closed-tabs: 6; }
.ptrn-tabs-vertical-tabs .kt-row-column-wrap:has(> .ptrn-tabs-vertical-tab:nth-child(8)) { --closed-tabs: 7; }

/* Closed tabs: label + number always aligned at the bottom */
.ptrn-tabs-vertical-tab:not(.is-active) > .kt-inside-inner-col > :first-child {
  bottom: 32px;
  transform: translateX(-50%);
}

/* Open/close animation */
@media (min-width: 783px) {
  .ptrn-tabs-vertical-tabs > .kt-inside-inner-col > div > div.kt-row-column-wrap {
    container-type: inline-size;
  }
  .ptrn-tabs-vertical-tab {
    flex: 0 0 88px;
    min-width: 0;
    transition: flex-grow .5s cubic-bezier(.65, 0, .35, 1);
  }
  .ptrn-tabs-vertical-tab.is-active {
    flex: 1 1 88px;
  }
  /* content keeps its final width while opening, so the height doesn't jump */
  .ptrn-tabs-vertical-tab.is-active > .kt-inside-inner-col {
    width: min(1000px, calc(100cqw - (var(--closed-tabs, 2) * (88px + 16px))));
    flex-shrink: 0;
  }
}

.ptrn-tabs-vertical-tab.is-active > .kt-inside-inner-col > :not(:first-child) {
  animation: ptrnTabFade .4s .25s both;
}
@keyframes ptrnTabFade {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .ptrn-tabs-vertical-tab { transition: none; }
  .ptrn-tabs-vertical-tab.is-active > .kt-inside-inner-col > :not(:first-child) { animation: none; }
}