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

.fill-svg-services {
    width: 75px !important; /* Forces the container to be 75px */
}

.fill-svg-services img, 
.fill-svg-services svg {
    width: 100% !important;
    height: auto !important;
}

/* --- 1. Base States & Transitions --- */

/* Parent Column */
.fill-svg-services-globe-column {
    background-color: #FCFBF7;
    transition: background-color 0.3s ease;
	    /* FIX: Restores mouse clicks & hover detection on the content */
    pointer-events: auto; 
    cursor: pointer; /* Optional: Shows hand cursor */
	position: relative; /* Essential: This traps the triangle inside this specific box */
	border-color:#fbbf23;
}


/* 2. The Triangle (Using the Border Method) */
.fill-svg-services-globe-column::after {
    content: "";
    position: absolute;
    bottom: 0;
    right: 0;
    
    /* THE SHAPE MAGIC: 
       We use borders to create the shape. 
       The element itself has 0 width/height.
    */
    width: 0;
    height: 0;
    border-style: solid;
    
    /* Create the triangle*/
    border-width: 0 0 40px 100px;
    border-color: transparent transparent #003466 transparent;
    
    /* ANIMATION */
    transform: scale(0); /* Start invisible (shrunk) */
    transform-origin: bottom right; /* Grow from the corner */
    transition: transform 0.3s ease;
    
    /* VISIBILITY */
    z-index: 1; /* Positive number ensures it sits ON TOP of the background */
    pointer-events: none; /* Mouse clicks go through it to the text below */
}

/* 3. The Hover Trigger */
.fill-svg-services-globe-column:hover::after {
    transform: scale(1); /* Pop to full size */
}

	
	.fill-svg-services-globe-row{
    /* FIX: Ignores hover on empty space/negative margins */
    pointer-events: none; 
}

/* Inner Section */
.fill-svg-services-svg-section {
   background-color: #FCF1D6;
    transition: background-color 0.3s ease;
     width: 75px;
    /* FIX: Restores mouse clicks & hover detection on the content */
    pointer-events: auto; 
    cursor: pointer; /* Optional: Shows hand cursor */
	border-radius:4px;
}

/* Image / SVG */
.fill-svg-services img,
.fill-svg-services svg {
    transition: filter 0.3s ease;
}

/* --- 2. The Unified Hover Trigger --- */
/* The hover is triggered when the user touches the visible content,
   bubbling up to the column to activate everything at once. */

/* A. Column Background Change */
.fill-svg-services-globe-column:hover {
	border-radius:4px;
}

.fill-svg-services-globe-column:hover .fill-svg-services-svg-section {
    background-color: #003466 !important;
}

.fill-svg-services-globe-column:hover .fill-svg-services img,
.fill-svg-services-globe-column:hover .fill-svg-services svg,{
	 filter: brightness(0) invert(1) !important;
}

/* B. Inner Section Background Change */
.fill-svg-services-svg-section:hover {
    background-color: #003466 !important;
	border-radius:4px;
}

.achtergrond-container > .kt-section-inner-wrap {
    position: relative;
    display: block; /* Of flex, afhankelijk van je Kadence instellingen */
    overflow: visible; /* Zorg dat de zwevende row niet wordt afgesneden */
}

.zwevende-row {
    position: absolute !important;
    bottom: 0;
    right: 0;
    z-index: 10; /* Hoger dan de afbeelding */
}

.zwevende-row-links {
    position: absolute !important;
    bottom: 0;
    left: 0;
    z-index: 10;
    /* Hoger dan de afbeelding */
}