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

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

/* Target H3s inside the .usp-homepage container */
.usp-homepage h3::before {
    content: "";
    display: inline-block;
    
    /* 1. Size Control (Adjust these if you want it bigger/smaller) */
    width: 24px; 
    height: 24px;
    
    /* 2. The SVG Image */
    background-image: url('https://labzero.digital/wp-content/uploads/2026/02/check-square-fill-aticve-ember.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    
    /* 3. Spacing & Alignment */
    margin-right: 12px; /* Gap between icon and text */
    vertical-align: middle; /* Aligns icon with the text height */
    
    /* Optional: Fine-tune vertical position */
    transform: translateY(-3px); 
}

.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 */
}

@media (max-width: 1024px) {
	.achtergrond-container .kadence-advanced-image img, 
    .achtergrond-container img {
        width: 100% !important;
        aspect-ratio: 1 / 1 !important; /* Forceert een perfect vierkant */
        object-fit: cover !important;   /* Snijdt de randen af in plaats van te vervormen */
        object-position: center;        /* Houdt het midden van de foto in beeld */
    }
}

/* WERKWIJZE SECTIE HOMEPAGE 1. Container & Layout */
.workflow-container {
  display: flex;
  flex-direction: column;
  gap: 0; /* Keeps sections touching for the connecting line */
}

.step-section {
  position: relative;
  background-color: transparent;
  transition: background-color 0.3s ease-out;
  overflow: visible;
  cursor: pointer;
  border-radius:4px;
}

.text-hover {
  color: #F3F4F6; /* Or your starting light color */
  transition: background-color 0.2s ease-out;
}

.step-section .text-hover,
.step-section h3.text-hover,
.step-section p.text-hover {
  color: #F3F4F6; 
  transition: color 0.3s ease-out !important; 
}

.step-section:hover,
.step-section:has(~ .step-section:hover) {
  background-color: #fbbf23;
  border-radius:4px;
}

.step-section:hover .text-hover,
.step-section:has(~ .step-section:hover) .text-hover {
  color: #003466 !important;
}

/* 3. The SVG Icon Color Shift */
.step-section::before {
  content: "";
  position: absolute;
  left: -40px;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  background-color: #F3F4F6;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  transition: background-color 0.3s ease-out;
  z-index: 11;
}

/* Icon 1 */
.step-section:nth-child(1)::before {
  mask-image: url('https://labzero.digital/wp-content/uploads/2026/02/onboarding-cool-grey.svg');
  -webkit-mask-image: url('https://labzero.digital/wp-content/uploads/2026/02/onboarding-active-ember.svg');
}

/* Icon 2 */
.step-section:nth-child(2)::before {
  mask-image: url('https://labzero.digital/wp-content/uploads/2026/02/handshake-cool-grey.svg');
  -webkit-mask-image: url('https://labzero.digital/wp-content/uploads/2026/02/handshake-active-ember.svg');
}

/* Icon 3 */
.step-section:nth-child(3)::before {
  mask-image: url('https://labzero.digital/wp-content/uploads/2026/02/blueprint-cool-grey.svg');
  -webkit-mask-image: url('https://labzero.digital/wp-content/uploads/2026/02/blueprint-active-ember.svg');
}

/* Icon 4 */
.step-section:nth-child(4)::before {
  mask-image: url('https://labzero.digital/wp-content/uploads/2026/02/binary-cool-grey.svg');
  -webkit-mask-image: url('https://labzero.digital/wp-content/uploads/2026/02/binary-active-ember.svg');
}

/* Icon 5 */
.step-section:nth-child(5)::before {
  mask-image: url('https://labzero.digital/wp-content/uploads/2026/02/hand-heart-cool-grey.svg');
  -webkit-mask-image: url('https://labzero.digital/wp-content/uploads/2026/02/hand-heart-active-ember.svg');
}

.step-section:hover::before,
.step-section:has(~ .step-section:hover)::before {
  background-color: #fbbf23;
}

/* 4. The Vertical Connecting Line */
.step-section:not(:last-child)::after {
  content: "";
  position: absolute;
  left: -30px;
  top: 59%;
  width: 2px;
  height: 0;
  background-color: #fbbf23;
  transition: height 0.3s ease-out;
  z-index: 1;
}

/* Extend the line if this section is hovered OR a later section is hovered */
.step-section:hover:not(:last-child)::after,
.step-section:has(~ .step-section:hover):not(:last-child)::after {
  height: 100%;
  transition-delay: 0s; /* Line grows instantly on hover */
}

/* HOMEPAGE PRICING TABLE  */
/* 1. MASTER ROW - Force 5 rows across the parent */
.align-card-row > .kt-row-column-wrap {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    grid-template-rows: max-content auto auto 1fr auto !important;
    column-gap: var(--space-gap !important); 
	row-gap:0 !important;
}

/* 2. THE CARD - Combine Subgrid with your EXACT original styling */
.pricing-card {
    /* Alignment Rules */
    grid-row: span 5 !important; 
    display: grid !important;
    grid-template-rows: subgrid !important; 
    
    /* YOUR Original Border/Background Base */
    position: relative;
    padding: 2px; 
    border-radius: 4px; 
    background: #fcfbf7; 
    overflow: hidden;
    z-index: 0;
}

/* 3. INNER WRAPPER - The "Double Subgrid" */
/* Passes the grid alignment through WITHOUT deleting Kadence's colors/padding */
.pricing-card > .kt-inside-inner-col {
    grid-row: span 5 !important; 
    display: grid !important;
    grid-template-rows: subgrid !important; 
    height: 100% !important;
}

/* 4. ELEMENT ALIGNMENT - Gentle overrides to protect your Kadence styles */
.pricing-card > .kt-inside-inner-col > * {
    position: relative; 
    z-index: 1; /* Keeps text above your animated gradient */
    align-self: start !important; /* Aligns tops perfectly */
    /* Notice: No forced margins here, so your Kadence spacing applies naturally! */
}

/* Pushes ONLY the button to the bottom, leaving your other elements alone */
.pricing-card > .kt-inside-inner-col > *:last-child {
    align-self: end !important; 
}

/* 1. The Spinning Gradient Layer */
.pricing-card::before {
  content: '';
  position: absolute;
  /* Make it much larger than the card so it covers the corners while spinning */
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  /* The two colors you requested */
  background: conic-gradient(
    transparent, 
    #fbbf23, 
    transparent 30%
  );
  /* Continuous Rotation */
  animation: rotate-border 3s linear infinite;
  z-index: -2;
  opacity:0;
   transition: opacity 0.3s ease-out; /* Smooth fade in AND out */
}

/* 2. The Inner 'Mask' (The actual card face) */
.pricing-card::after {
  content: '';
  position: absolute;
  inset: 2px; /* Shrinks by exactly 2px to show the border */
  background: inherit; /* Matches the card background */
  border-radius: 3px; /* Slightly smaller than outer radius */
  z-index: -1;
}

/* 3. The Hover Trigger */
.pricing-card:hover::before {
  animation-play-state: running;
  transition: opacity 0.5s ease-out;
  opacity:1;
}

/* HOMEPAGE - HORIZONTAL SCROLL FOR TABLET & MOBILE (1024px and below) */
@media (max-width: 1024px) {
    
    /* 1. Force the container to scroll and set card widths */
    .align-card-row > .kt-row-column-wrap {
        /* Forces each card to be at least 280px wide, triggering the overflow */
        grid-template-columns: repeat(3, minmax(280px, 1fr)) !important; 
        
        /* Enable horizontal scroll, lock vertical */
        overflow-x: auto !important;
        overflow-y: hidden !important;
        
        /* App-like swiping behavior */
        scroll-snap-type: x mandatory;
        
        /* Hide scrollbars for Firefox & Edge */
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
        
        /* Give a little bottom padding so the animated border isn't clipped */
        padding-bottom: 5px !important; 
    }

    /* 2. Hide scrollbars for Chrome, Safari, and newer Edge */
    .align-card-row > .kt-row-column-wrap::-webkit-scrollbar {
        display: none !important;
    }

    /* 3. Make the cards snap neatly into the center of the screen when swiped */
    .pricing-card {
        scroll-snap-align: center !important;
    }
}

/* 4. The Animation Keyframes */
@keyframes rotate-border {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* 1. HOMEPAGE accordion 6 rows */
.accordion-section-home {
    /* Prevents layout thrashing by telling the browser to 
       skip rendering until the element is near the viewport */
    content-visibility: auto;
    
    /* This reserves the 600px space on mobile before the JS loads */
    contain-intrinsic-size: auto 600px;
    min-height: 600px;
}

/* 2. Desktop Styles (842px and up) */
@media only screen and (min-width: 842px) {
    .kb-accordion-container {
        /* This reserves the 350px space on desktop */
        contain-intrinsic-size: auto 350px;
        min-height: 350px;
    }
}

/* HOMEPAGE - TESTIMONIAL BLOCK - Vertical Divider for Kadence Testimonials */
@media (min-width: 842px) {
    /* 1. Target the slide and ensure it allows elements to sit on its edge */
    .wp-block-kadence-testimonials .splide__slide {
        position: relative !important;
        overflow: visible !important; 
    }

    /* 2. Create the vertical line */
    .wp-block-kadence-testimonials .splide__slide::after {
        content: "" !important;
        display: block !important;
        position: absolute;
        /* Push the line half-way into the gap between testimonials */
        right: -15px; /* Adjust this based on your column gap */
        top: 15%; 
        height: 70%;
        width: 1px;
        background-color: #003466 !important;
        z-index: 99 !important;
    }

/* 3. Hide the line on the very last slide so it doesn't trail off */
.wp-block-kadence-testimonials .splide__slide:last-child::after {
    display: none !important;
}

/* 4. Ensure the slider track clips the 'out of bounds' lines during transition */
.wp-block-kadence-testimonials .splide__track {
    overflow: hidden !important;
}
}

/* TESTIMONIAL H3 in H4 layout */
h3.kt-testimonial-title {
    font-size: var(--fs-h4) !important;
}

/* HOMEPAGE H3 in H4 layout */
h3.usp-overzicht {
    font-size: var(--fs-h4) !important;
}

/* HOMEPAGE links services */
.links-services { color: #000;}
.links-services a, .links-services a:visited { color: #000; }
.links-services a:hover, .links-services a:focus { color: #223750; }