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

/* WERKWIJZE PAGINA Container & Layout */
/* 1. De Container */
.workflow-container-hero {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* 2. De Sectie - Fluid transition zonder delay */
.step-section-hero {
  position: relative;
  background-color: transparent;
  /* Verwijder de 0.8s delay voor een vloeiende overgang */
  transition: background-color 0.3s ease-in-out; 
  overflow: visible;
  cursor: pointer;
  border-radius: 4px;
}

/* Hover effect op de sectie */
.step-section-hero:hover {
  background-color: #003466 !important;
}

/* 3. De Tekst (.text-hover) */
.step-section-hero .text-hover {
  /* Geen delay, gewoon een soepele kleurwissel */
  transition: color 0.3s ease-in-out !important; 
  color: #003466; /* Startkleur */
}

/* Wanneer de SECTIE gehoverd wordt, wordt de tekst grijs */
.step-section-hero:hover .text-hover {
  color: #F3F4F6 !important;
}

/* 4. De Iconen (Statisch Blauw) */
.step-section-hero::before {
  content: "";
  position: absolute;
  left: -40px;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  /* Forceer de kleur op #003466 en laat deze zo staan */
  background-color: #003466 !important; 
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  z-index: 11;
  /* Geen transitie nodig als de kleur niet verandert */
}

/* Iconen toewijzen - Ik heb de URL's gestroomlijnd naar de blauwe versies */
.step-section-hero:nth-child(1)::before {
  mask-image: url('https://labzero.digital/wp-content/uploads/2026/02/onboarding-blue.svg');
  -webkit-mask-image: url('https://labzero.digital/wp-content/uploads/2026/02/onboarding-blue.svg');
}

.step-section-hero:nth-child(2)::before {
  mask-image: url('https://labzero.digital/wp-content/uploads/2026/02/handshake-blue.svg');
  -webkit-mask-image: url('https://labzero.digital/wp-content/uploads/2026/02/handshake-blue.svg');
}

.step-section-hero:nth-child(3)::before {
  mask-image: url('https://labzero.digital/wp-content/uploads/2026/02/blueprint-blue.svg');
  -webkit-mask-image: url('https://labzero.digital/wp-content/uploads/2026/02/blueprint-blue.svg');
}

.step-section-hero:nth-child(4)::before {
  mask-image: url('https://labzero.digital/wp-content/uploads/2026/02/binary-blue.svg');
  -webkit-mask-image: url('https://labzero.digital/wp-content/uploads/2026/02/binary-blue.svg');
}

.step-section-hero:nth-child(5)::before {
  mask-image: url('https://labzero.digital/wp-content/uploads/2026/02/hand-heart-blue.svg');
  -webkit-mask-image: url('https://labzero.digital/wp-content/uploads/2026/02/hand-heart-blue.svg');
}

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

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

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

/* Werkwijze pagina - Container instellingen */
.custom-divider-row-werkwijze > .kt-row-column-wrap {
    position: relative;
}

/* werkwijze pagina -> Verticale lijn op Desktop & Tablet */
@media (min-width: 842px) {
    .custom-divider-row-werkwijze > .kt-row-column-wrap::after {
        content: "";
        position: absolute;
        left: 50%;
        top: 15%; /* (100% - 70%) / 2 */
        width: 1px;
        height: 70%;
        background-color: #003466;
        transform: translateX(-50%);
        z-index: 1;
    }
}

/* werkwijze pagina -> Horizontale lijn op Mobiel */
@media (max-width: 842px) {
    .custom-divider-row-werkwijze > .kt-row-column-wrap::after {
        content: "";
        display: block;
        width: 70%;
        height: 1px;
        background-color: #003466;
        margin: 20px auto; /* Ruimte boven en onder de lijn */
		
    }
    
    /* Zorgt dat de lijn tussen de kolommen verschijnt op mobiel */
    .custom-divider-row-werkwijze > .kt-row-column-wrap > .wp-block-kadence-column:first-child {
        order: 1;
    }
    .custom-divider-row-werkwijze > .kt-row-column-wrap::after {
        order: 2;
    }
    .custom-divider-row-werkwijze > .kt-row-column-wrap > .wp-block-kadence-column:last-child {
        order: 3;
    }
	
	.step-section-hero:hover:not(:last-child)::after,
.step-section-hero:has(~ .step-section-hero:hover):not(:last-child)::after {
  height: 50%;
}
}

/* werkwijze pagina -> marquee block */
.marquee-wrapper {
  background-color: #F3F4F6;
  overflow: hidden;
  padding: 2rem 0;
  display: flex;
  align-items: center;
  border-radius:4px;
  border:1px;
  border-color:#fbbf23;
}

/* WERKWIJZE - Beste tools */
.marquee-track {
  display: flex;
  align-items: center;
  gap: 4rem; /* Spacing between text and logos */
  white-space: nowrap;
  animation: scroll-left 30s linear infinite;
  width: max-content;
}

/* Pause on Hover */
.marquee-wrapper:hover .marquee-track {
  animation-play-state: paused;
}

/* Text Styling */
.marquee-text.h6 {
  color: #000000;
  margin-bottom: 0; /* Remove default heading margin */
  display: inline-block;
  white-space: normal; /* Allows the <br> to work */
  min-width: 120px;    /* Prevents text from squishing too much */
  text-align: left;
}

/* Logo Styling */
.marquee-logo {
  height: 75px !important; 
  width: auto;
  opacity: 0.7; /* 70% Transparent */
  transition: opacity 0.3s ease;
  filter: grayscale(100%); /* Optional: makes them look more uniform */
}

/* Logo Hover Effect */
.marquee-logo:hover {
  opacity: 1; /* 100% Light up */
  filter: grayscale(0%);
}

/* The Animation Logic */
@keyframes scroll-left {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); } /* Halfway point is where it loops */
}

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