/*
Theme Name: Lab Zero Child Theme - Contact
Description: Specific styles for the contact page.
*/

/* CONTACTPAGINA hero */
/* 1. De Container & Variabelen */
.custom-icon-heading {
    --global-palette-highlight: #003466 ; 
    --global-palette-highlight-alt: #F3F4F6 ; 
    
    display: flex ;
    flex-direction: column;
    justify-content: center;
    cursor: pointer;
    background-color: transparent;
	border-radius:4px;
}

.custom-icon-heading p.custom-heading-link {
    margin: 0 ;      /* Kill alle marges */
    padding: 0 ;     /* Kill alle padding */
    display: flex ;
    align-items: center ; /* Forceer verticale centering */
    line-height: 1 ;  /* Verwijder extra witruimte rond de letters */
}

/* Sectie Hover */
.custom-icon-heading:hover {
    background-color: #003466 ;
	border-radius:4px;
}

/* 2. De Link Styling (Targeting de 'a' tag) */
/* We gebruiken de class 'custom-heading-link' die direct op de <a> staat */
.custom-icon-heading a.custom-heading-link {
    color: var(--global-palette-highlight) ;
    text-decoration: none ;
    box-shadow: none ;
    display: inline-flex ;
    align-items: center ;
    /* De clamp font-size stond op de p, we forceren hem hier ook */
    font-size: clamp(1.5rem, 1.32rem + 0.91vw, 2rem) ;
}

/* De Hover Trigger (Wanneer de kolom wordt gehoverd) */
.custom-icon-heading:hover a.custom-heading-link {
    color: var(--global-palette-highlight-alt) ;
}

/* 3. Het Icoon (:before op de <a> tag) */
/* We zetten het icoon direct op de link voor de beste uitlijning */
.custom-icon-heading a.custom-heading-link::before {
    content: "" ;
    display: inline-block ;
    width: 1.4em;
    height: 1.4em;
    margin-right: 15px ;
    border: 1px solid #003466 ;
    background-color: transparent;
    background-size: 60% ;
    background-repeat: no-repeat ;
    background-position: center ;
    flex-shrink: 0;
	border-radius: 50% ;
}

/* Icoon styling bij sectie hover */
.custom-icon-heading:hover a.custom-heading-link::before {
    background-color: #003466 ;
    border-color: #F3F4F6 ; 
}

/* 4. De Icons (Gekoppeld aan de icon-1, 2, 3 op de kolom) */

/* PHONE */
.icon-1 a.custom-heading-link::before {
    background-image: url('https://labzero.digital/wp-content/uploads/2026/02/phone-blue.svg') ;
}
.icon-1:hover a.custom-heading-link::before {
    background-image: url('https://labzero.digital/wp-content/uploads/2026/02/phone-cool-grey.svg') ;
}

/* MAIL */
.icon-2 a.custom-heading-link::before {
    background-image: url('https://labzero.digital/wp-content/uploads/2026/02/at-mail-blue.svg') ;
}
.icon-2:hover a.custom-heading-link::before {
    background-image: url('https://labzero.digital/wp-content/uploads/2026/02/at-mail-cool-grey.svg') ;
}

/* WHATSAPP */
.icon-3 a.custom-heading-link::before {
    background-image: url('https://labzero.digital/wp-content/uploads/2026/02/whatsapp-logo-blue.svg') ;
}
.icon-3:hover a.custom-heading-link::before {
    background-image: url('https://labzero.digital/wp-content/uploads/2026/02/whatsapp-logo-cool-grey.svg') ;
}

/* CONTACT PAGINA 1. De Container (Sectie) */
/* 1. De Kolom (Parent) */
.modal-bg-container {
    padding: 0 ; /* Verwijder witruimte van de kolom zelf */
    display: flex ;
    flex-direction: column;
}

/* 2. De Inner Col (De echte 'stage') */
/* Kadence zet hier vaak padding op; die moeten we killen voor de full-stretch */
.modal-bg-container > .kt-inside-inner-col {
    position: relative ;
    display: flex ;
    align-items: center ;
    justify-content: center ;
    min-height: 500px; /* Pas dit aan naar de gewenste hoogte */
    padding: 0 ; 
    width: 100% ;
    margin: 0 ;
}

/* 3. De Afbeelding (Achtergrondlaag) */
.modal-bg-container .modal-bg-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    z-index: 1; /* Laagste laag */
}

/* De img tag binnen de figure */
.modal-bg-container .modal-bg-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* 4. De Modal (Zwevende laag) */
.modal-bg-container .modal-floating-content {
    position: relative;
    z-index: 10; /* Hoger dan de afbeelding */
    margin: 0;
    /* Zorg dat de modal zelf niet 100% breed wordt */
    width: auto; 
}

/* CONTACT PAGINA - De Basis Styling van de Modal Knop */
.modal-bg-container .modal-floating-content .kt-blocks-modal-link {
    /* Font instellingen */
    font-family: 'Clash Display', Helvetica, Arial, sans-serif;
    font-weight: 700;
    font-style: normal;
    text-transform: uppercase;
	font-size: 0.9rem;
    
    /* Kleuren & Achtergrond */
    color: #1f2937 ; /* De donkergrijze tekstkleur */
    background: var(--global-palette1, #3182CE);
    
    /* Border & Vorm */
    border-radius: 4px;
    border: 0px solid currentColor;
    border-bottom: 3px solid #d97706;
    
    /* Effecten */
    box-shadow: 0px 0px 0px -7px rgba(0, 0, 0, 0);
    padding: 15px 35px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    cursor: pointer;
    width: auto !important;
    max-width: fit-content;
    
    /* Animatie */
    transition: all 0.3s ease-out;
    
}

/* 2. Hover Staat */
.modal-bg-container .modal-floating-content .kt-blocks-modal-link:hover {
    background-color: #ECB00F; /* De gevraagde hover kleur */
    color: #1f2937;
    border-bottom: 3px solid #d97706; /* Behoud de border bottom */
    transform: translateY(-2px); /* De gevraagde lift */
}

/* 3. Fix voor tekst binnen de knop */
.modal-bg-container .modal-floating-content .kt-blocks-modal-link span {
    color: inherit;
    font-family: inherit;
    font-weight: 600;
}

@media (max-width: 842px) {
    
    .modal-bg-container > .kt-inside-inner-col {
        /* Optioneel: Verklein de min-height iets voor mobiel zodat de sectie niet te hoog is */
        min-height: 350px; 
    }
}