/**
Theme Name: I-match
Author: I-match child theme
Author URI: https://i-match.nl
Description: I-match child theme 2024
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: i-match
Template: astra
*/

.site-footer {
	z-index: 2!important;
}

@media screen and (max-width: 600px) {
	.ast-mobile-header-wrap .custom-menu-trigger {
		width: 6rem!important;
	}
	.ast-mobile-header-wrap .trigger-text {
		display: none!important;
	}
	
	.wrapper-svg svg {
		margin-bottom: 70px !important;
	}
	
	.flags-slider-overlay {
		margin-bottom: 20px;
	}
}

@media screen and (max-width: 800px) {
	.flags-slider-overlay {
		margin-bottom: 10px;
	}
}

@media screen and (max-width: 1025px) {
	.wrapper-svg {
		margin-bottom: 0!important;
	}
}

@media screen and (max-width: 1200px) {
	.wk-row-schuin {
		display: none!important;
	}
	
	.wk-row-niet-schuin {
		padding-top: 0!important;
	}
	
	.i-match-startup {
		margin-top: 40px!important;
	}
}

@media screen and (max-width: 775px) {
	.vc_row.vc_column-gap-15 > .vc_column_container {
		padding: 0!important;
	}
}

/* ==========================================================================
   1. HEADER & TRIGGER FIXES (Zorgt dat de knop zichtbaar blijft)
   ========================================================================== */

/* Forceer de Astra header om boven de overlay te zweven */
.site-header, 
.ast-main-header-wrap, 
.ast-main-header-bar {
    z-index: 101 !important;
    transition: background 0.3s ease;
}

/* BELANGRIJK: Maak header transparant ALLEEN als de trigger de class 'is-open' heeft */
.site-header:has(.is-open),
.ast-main-header-bar:has(.is-open) {
    background: transparent !important;
    border-bottom: none !important;
    box-shadow: none !important;
}

.text-menu {
	max-height: 50px;
}

/* De trigger knop styling */
.custom-menu-trigger {
    position: relative;
    z-index: 102 !important; /* Altijd de hoogste laag */
    background-color: #151515;
    color: #ffffff !important;
    text-decoration: none !important;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.3s ease;
	cursor: pointer;
    border-radius: .4rem;
    justify-content: space-between;
    align-items: center;
    width: 12rem;
    padding: .75rem 1.25rem;
    display: flex;
}

.custom-menu-trigger:hover {
    background-color: #343434;
}

/* Knop styling wanneer menu open is */
.custom-menu-trigger.is-open {
    background-color: #151515;
}
.custom-menu-trigger.is-open:hover {
    background-color: #343434;
}




.custom-menu-button-regis {
    /* De basisstijlen die je al had */
    display: flex;
    justify-content: center;
    align-items: center;
    background: #EE5B2B;
    color: #ffffff !important;
    text-decoration: none !important;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    width: 12rem;
    padding: .75rem 1.25rem;
    border-radius: .4rem;
    cursor: pointer;
    
    /* Geen border, dus we zetten deze op none */
    border: none;

    /* De transitie zorgt voor een soepele beweging terug naar boven */
    transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1), background-color 0.3s ease;
}

.custom-button-regis button {
    width: 12rem;
    padding: 15px 0px!important;
    border-radius: .4rem;
    cursor: pointer;
    
    border: none;
    transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1), background-color 0.3s ease;
}

.custom-menu-button-regis:hover,
.custom-button-regis button:hover {
    /* De flinke verschuiving naar beneden */
    transform: translateY(-4px);
    
    /* Je gevraagde hover-kleur */
    background: #F06E42;
}

/* Voor het gevoel van een fysieke klik als je de knop echt indrukt */
.custom-menu-button-regis:active,
.custom-button-regis button:active {
    transform: translateY(2px);
    transition: transform 0.1s; /* Snelle reactie bij klikken */
}




/* ==========================================================================
   2. CUSTOM POPUP OVERLAY BASIS
   ========================================================================== */
.menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000000;
    z-index: 100 !important; /* Net onder de header/trigger */
    display: none;
    color: #ffffff;
    overflow-y: auto;
}

.menu-overlay.active {
    display: block;
    animation: fadeIn 0.3s ease forwards;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* ==========================================================================
   3. POPUP LAYOUT (2/3 vs 1/3)
   ========================================================================== */
.menu-popup-content {
    display: flex;
    min-height: 100vh;
}

/* Zorg dat de container de referentie is voor de absolute positionering */
.menu-column-left {
    position: relative; /* Cruciaal voor de positionering van de afbeelding */
    flex: 1.15;
    background: #151515;
    padding: 50px 10% 60px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden; /* Optioneel: voorkomt dat de leeuw buiten de box steekt */
}

/* Styling voor de leeuw rechtsonder */
.popup-corner-image {
    position: absolute;
    right: 1px;
    bottom: 0px;
    width: 35%;
    height: auto;
    opacity: 0.03;
    pointer-events: none;
    z-index: 1;
}

/* Zorg dat de overige content boven de afbeelding blijft zweven */
.popup-navigation, .popup-contact-info, .popup-logo {
    position: relative;
    z-index: 2;
	text-transform: uppercase;
}

.menu-column-right {
    flex: 0.85;
    background: #FFFFFF; 
    padding: 120px 5% 60px;
    color: #000000;
    display: flex;
    align-items: center;
    justify-content: center;
}

@media screen and (max-width: 1400px) {
	.menu-column-right {
		display: none!important;
	}

	#menuTrigger.is-open {
		background: #454545!important;
	}
	
	 .popup-logo {
        max-width: 200px !important;
        margin-top: -20px;
    }
}

.popup-logo {
		    margin-top: 0px!important;
	}

/* ==========================================================================
   4. NAVIGATIE & CONTENT STYLING
   ========================================================================== */
.popup-logo {
    max-width: 350px;
    margin-bottom: 40px;
}

.popup-navigation ul.popup-menu-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 45px 50px;
    list-style: none !important;
    padding: 0;
    margin: 0px 0 0px 0;
}

.popup-navigation ul.popup-menu-list li a {
    font-size: clamp(1.5rem, 4vw, 2.8rem);
    font-weight: 800;
    color: #ffffff;
    text-decoration: none;
    text-transform: uppercase;
    line-height: 1.1;
    transition: color 0.3s ease;
}

.popup-navigation ul.popup-menu-list li a:hover {
    color: #EE5B2B;
}

.popup-contact-info {
	display: flex;
	flex-direction: row;
	gap: 40px;
    margin-top: 40px;
    font-size: 1.1rem;
    line-height: 1.6;
    color: #bbbbbb;
}

/* ==========================================================================
   SCROLL LOCK & OVERLAY FIXES
   ========================================================================== */

/* Voorkomt dat de website op de achtergrond scrollt */
body.menu-open {
    overflow: hidden !important;
    height: 100vh;
}

/* De overlay zelf scrollbaar maken zonder zichtbare scrollbar */
.menu-overlay {
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
    overflow-y: auto;
}

.menu-overlay::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
}

/* ==========================================================================
   RESPONSIVE LAYOUT (TABLET & MOBIEL)
   ========================================================================== */

@media screen and (max-width: 1024px) {
    .menu-popup-content {
        flex-direction: column; /* Stapel kolommen verticaal */
    }

    .menu-column-left {
        width: 100%;
        min-height: 100vh;
        padding: 100px 7% 50px; /* Ruimte bovenin voor de trigger knop */
        flex: none;
    }

    /* Verberg de rechter info kolom op mobiel voor een rustig menu */
    .menu-column-right {
        display: none !important;
    }

    /* Navigatie van 2 kolommen naar 1 kolom */
    .popup-navigation ul.popup-menu-list {
        grid-template-columns: 1fr;
        gap: 25px;
    }

    .popup-navigation ul.popup-menu-list li a {
        font-size: 1.8rem;
    }

    /* Contact info onder elkaar */
    .popup-contact-info {
        flex-direction: column;
        gap: 15px;
        margin-top: 40px;
    }

    .popup-logo {
        max-width: 200px;
        margin-bottom: 30px;
		margin-top: -30px !important;
    }

    /* Leeuw icoon aanpassen voor mobiel */
    .popup-corner-image {
        width: 60%;
        opacity: 0.05;
        right: -10%;
    }
}

/* Kleine telefoons */
@media screen and (max-width: 480px) {
    .popup-navigation ul.popup-menu-list li a {
        font-size: 1.5rem;
    }
    
    .menu-column-left {
        padding-top: 90px;
    }
}

/* ==========================================================================
   7. PROMO BOX SVG ACHTERGROND (GROTER & MEER OPACITY)
   ========================================================================== */

/* De container waarin de tekst en de SVG staan */
/* ==========================================================================
   7. PROMO BOX SVG ACHTERGROND (NIEUWE VORM)
   ========================================================================== */

/* De container waarin de tekst en de SVG staan */
/* Container instellingen voor rechterkolom */
.menu-column-right {
       align-items: center;
    display: flex;
    justify-content: center;
    padding: 160px 5% 60px;
    background: #FFFFFF;
}

/* 1. Bovenste knoppen gelijk maken */
.right-top-actions {
    display: flex;
    gap: 20px;
    width: 100%;
}

.right-top-actions button {
    flex: 1; /* Beide knoppen pakken evenveel ruimte */
    padding: 15px;
    font-weight: 700;
    text-transform: uppercase;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.action-btn-secondary { background: #343434; color: white; }
.action-btn-primary { background: #EE5B2B; color: white; }

/* 2. Info sectie styling */
.right-info-content {
    margin: 85px 0 0 0;
	    gap: 0px;
    display: flex;
    flex-direction: column;
}

.right-info-content hr {
	display:block;
	height: 1px;
	border:0;
	border-top: 1px solid #343434;
	margin: 1em 0;
	padding: 0;
}

.info-item {
    margin-bottom: 30px;
}

.info-item h2 ,h3, h4 {
    font-weight: 800;
    margin-bottom: 5px;
    color: #EE5B2B;
	text-transform: uppercase;
	text-align: center
}

.info-item h2 {
	font-size: 2.8rem;
}
.info-item h3 {
	font-size: 2.2rem;
}
.info-item h4 {
	font-size: 1.6rem;
}

.info-item p {
    font-size: 1.3rem;
    color: #444;
    line-height: 1.4;
	text-align: center
}

/* 3. Onderste knop styling & uitlijning */
.right-bottom-cta {
    display: flex;
    align-items: center;
    /* De hoogte wordt hier bepaald door de flexbox 'space-between' 
       zodat hij op dezelfde lijn komt als de contact info links */
}

.promo-button-bottom {
    background: #EE5B2B;
    color: #fff !important;
    padding: 18px 45px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 700;
    text-transform: uppercase;
    transition: background 0.3s;
    display: inline-block;
}

.promo-button-bottom:hover {
    background: #343434;
}

/* Zorg dat de contact info links een vaste hoogte/margin heeft voor perfecte uitlijning */
.popup-contact-info {
    height: 60px; /* Pas dit aan zodat het visueel op één lijn staat met de knop rechts */
    display: flex;
    align-items: center;
}

.popup-contact-info p {
    position: relative; /* Nodig om de oranje lijn te positioneren */
    display: inline-block; /* Zorgt dat de lijn precies zo breed is als de tekst */
    border-bottom: solid transparent 3px; /* De statische blauwe lijn */
    padding-bottom: 5px;
/*     color: #333; */
    text-decoration: none;
    cursor: pointer;
}

.popup-contact-info p::after {
    content: '';
    position: absolute;
    bottom: -3px; /* Precies bovenop de blauwe border */
    right: 0;      /* Startpunt aan de rechterkant */
    width: 0;      /* Beginbreedte is nul */
    height: 3px;   /* Zelfde dikte als de border */
    background-color: #EE5B2B; /* De oranje kleur */
    
    /* De animatie-instellingen */
    transition: width 0.4s ease-in-out;
}

.popup-contact-info p:hover::after {
    width: 100%;   /* Groeit naar de linkerkant toe */
    left: 0;       /* Optioneel: hiermee kun je de richting finetunen */
    right: auto;
}


/* ==========================================================================
   5. HAMBURGER & TEKST WISSEL
   ========================================================================== */
.text-sluiten { display: none; }
.custom-menu-trigger.is-open .text-menu { display: none; }
.custom-menu-trigger.is-open .text-sluiten { display: inline-flex; }

.hamburger-box {
    width: 20px;
    height: 14px;
    display: inline-block;
    position: relative;
    margin-left: 15px;
}

.hamburger-inner, .hamburger-inner::before, .hamburger-inner::after {
    width: 20px;
    height: 2px;
    background-color: #ffffff;
    position: absolute;
    transition: all 0.3s ease;
    border-radius: 2px;
}

.hamburger-inner { top: 50%; transform: translateY(-50%); }
.hamburger-inner::before { content: ""; top: -6px; left: 0; }
.hamburger-inner::after { content: ""; bottom: -6px; left: 0; }

.custom-menu-trigger.is-open .hamburger-inner { transform: rotate(45deg); }
.custom-menu-trigger.is-open .hamburger-inner::before { opacity: 0; top: 0; }
.custom-menu-trigger.is-open .hamburger-inner::after { transform: rotate(-90deg); bottom: 0; }

/* ==========================================================================
   6. RESPONSIVE DESIGN
   ========================================================================== */
@media (max-width: 992px) {
    .menu-popup-content { flex-direction: column; }
    .menu-column-left { padding: 100px 5% 40px; order: 2; }
    .menu-column-right { padding: 80px 5% 40px; order: 1; min-height: 300px; }
    .popup-navigation ul.popup-menu-list { grid-template-columns: 1fr; }
}







/* ==========================================================================
   ASTRA HEADER FIX (VOOR OPEN MENU)
   ========================================================================== */

/* 1. Zorg dat de Astra bar transparant wordt als de trigger 'is-open' heeft */
.main-header-bar:has(#menuTrigger.is-open),
.ast-primary-header-bar:has(#menuTrigger.is-open) {
    background-color: transparent !important;
    background-image: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
}

/* 2. Verhoog de z-index zodat de header boven de overlay blijft zweven, 
      maar de achtergrond nu 'doorzichtig' is naar het zwart toe */
.main-header-bar {
    z-index: 11 !important;
}

/* 3. Zorg dat de HTML-2 widget waar je knop in staat altijd klikbaar blijft */
.ast-header-html-2 {
    z-index: 12 !important;
    position: relative;
}

/* 4. Optioneel: Verberg het standaard logo van Astra als het menu open is, 
      zodat het niet stoort met je nieuwe menu-inhoud */
.main-header-bar:has(#menuTrigger.is-open) .site-branding {
    opacity: 0;
    transition: opacity 0.3s ease;
}

/* Voorkom dat Astra de container van de knop vervormt tijdens scrollen */
.ast-header-html-2, 
.ast-header-html-2 .ast-builder-html-element {
    padding: 0 !important;
    margin: 0 !important;
    display: flex;
    align-items: center;
}

/* Zorg dat de knop een vaste hoogte heeft die niet afhankelijk is van de header-hoogte */
.custom-menu-trigger {
    height: 3.5rem; /* Forceer een vaste hoogte */
    box-sizing: border-box; /* Zorg dat padding binnen de hoogte valt */
}

.main-header-bar.ast-sticky-active {
    box-shadow: none;
}

.site-footer h2 {
	color: #EE5B2B;
}



article.type-post > div > div > header > div,
article.type-post > div > header > div
 {
	display: none!important;
}

.entry-content :where(h1,h2,h3,h4,h5,h6) {
	margin-top: 0!important;
}


.ast-separate-container #primary, .ast-separate-container.ast-left-sidebar #primary, .ast-separate-container.ast-right-sidebar #primary {
	margin-top: 0!important;
}