/*
  Base style for the chip component.
  This will apply on all screen sizes unless overridden.
*/
.chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem; /* 8px padding */
    border-radius: 9999px; /* Make it a circle/pill */
    font-weight: 500;
    background-color: #e5e7eb; /* gray-200 */
    color: #1f2937;          /* gray-800 */
    border: 1px solid #d1d5db; /* gray-300 */
}

html[data-theme="dark"] .chip {
  color: white !important;
  border-color: rgba(255,255,255,0.3) !important;
}

/*
  Forcefully hide the mobile toggle button on medium screens and up.
  This rule is independent of Tailwind and will always win for this component.
*/
@media (min-width: 768px) {
  .header-mobile-toggle {
    display: none;
  }
}

/*
  Give the SVG icon inside the mobile toggle a specific size.
*/
.header-mobile-toggle svg {
  width: 1.5rem;  /* 24px */
  height: 1.5rem; /* 24px */
}
.header-logo {
  flex: 0 0 auto; /* don't grow, don't shrink, size = content */
}

/* ===== Hero cards: mobile accordion behaviour ===== */

.hero-card-body {
  overflow: hidden;
  transition: max-height 200ms ease, opacity 200ms ease;
}

/* Rotate + icon on open (nice subtle feedback) */
.hero-card-toggle-icon {
  transition: transform 150ms ease;
}

[data-hero-card].is-open .hero-card-toggle-icon {
  transform: rotate(45deg); /* "+" → "×" vibe */
}

/* Desktop: always fully open, no collapsing */
@media (min-width: 768px) {
  .hero-card-body {
    max-height: none !important;
    opacity: 1 !important;
    overflow: visible;
  }

  .hero-card-toggle {
    cursor: default;
  }
}

/* Hide the hero card + icon on non-mobile (desktop & tablet) */
@media (min-width: 768px) {
  .hero-card-toggle-icon {
    display: none !important;
  }
}


/* ===== Service cards: mobile accordion behaviour ===== */

.service-card-body {
  overflow: hidden;
  transition: max-height 200ms ease, opacity 200ms ease;
}

/* Rotate + icon on open (nice subtle feedback) */
.service-card-toggle-icon {
  transition: transform 150ms ease;
}

[data-service-card].is-open .service-card-toggle-icon {
  transform: rotate(45deg); /* "+" → "×" vibe */
}

/* Desktop: always fully open, no collapsing */
@media (min-width: 768px) {
  .service-card-body {
    max-height: none !important;
    opacity: 1 !important;
    overflow: visible;
  }

  .service-card-toggle {
    cursor: default;
  }
}

/* Hide the hero card + icon on non-mobile (desktop & tablet) */
@media (min-width: 768px) {
  .service-card-toggle-icon {
    display: none !important;
  }
}

/*
 * Service Accordion Icon Styling
 * Add this to your theme.css file
*/

/* Adds a smooth transition effect to the icon */
[data-service-toggle] > span {
  transition: transform 0.25s ease-in-out;
}

/* Rotates the icon 45 degrees when the accordion is open */
[data-service-toggle][aria-expanded='true'] > span {
  transform: rotate(45deg);
}

html[data-theme="dark"] .hero-card-toggle-icon,
html[data-theme="dark"] .hero-card-toggle-icon svg,
html[data-theme="dark"] [data-service-toggle] span {
    color: white !important;
    stroke: white !important;
}
/* Value-prop card icons: swap light/dark based on theme */
.vp-icon-light {
  display: inline-block;
}

.vp-icon-dark {
  display: none;
}

/* When dark theme is active */
html[data-theme="dark"] .vp-icon-light,
.dark .vp-icon-light {
  display: none;
}

html[data-theme="dark"] .vp-icon-dark,
.dark .vp-icon-dark {
  display: inline-block;
}
/* Treat \n in text as real line breaks */
.whitespace-pre-line {
  white-space: pre-line;
}

/* 1. Set up the container */
.icon-plus {
  position: relative;
  display: inline-block;
  width: 1.5rem;  /* 24px (matches h-6) */
  height: 1.5rem; /* 24px (matches w-6) */
  vertical-align: middle;
}

/* 2. Draw the two lines using ::before and ::after */
.icon-plus::before,
.icon-plus::after {
  content: '';
  position: absolute;
  background-color: currentColor; /* Inherits text color (slate-600/white) */
  border-radius: 99px;            /* Rounded tips look nicer */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* Force perfect center */
  transition: all 0.2s ease;
}

/* Horizontal line */
.icon-plus::before {
  width: 60%;  /* Length of the line */
  height: 2px; /* Thickness */
}

/* Vertical line */
.icon-plus::after {
  width: 2px;  /* Thickness */
  height: 60%; /* Length */
}

/* 3. Rotate logic (Already in your theme, but ensured here) */
[data-hero-card].is-open .icon-plus {
  transform: rotate(45deg); /* Perfect geometric rotation */
}

/* Prevent background scrolling when mobile menu is open */
body.no-scroll {
    overflow: hidden !important;
    height: 100vh !important;       /* Critical for iOS */
    position: fixed !important;     /* Locks the view in place */
    width: 100%;                    /* Prevents width collapse */
}
/* 
   MOBILE-ONLY: Force the "hover" gradient to be visible by default.
   This applies to screens narrower than 768px (tablets & phones).
*/
/* 
   MOBILE-ONLY: Force the gradient background.
   We use !important to override the default solid background variables.
*/
@media (max-width: 767px) {
  .btn-primary {
    /* 1. Force the Gradient Background */
    background: linear-gradient(90deg, #2080a2 0%, #49cd64 100%) !important;
    
    /* 2. LIGHT MODE: Use Dark Text (matches your desktop hover) */
    color: #0f172a !important;
   /* border-color: #0f172a !important; */
  }

  /* 3. DARK MODE: Use White Text (matches your desktop hover) */
  html[data-theme="dark"] .btn-primary {
    color: #ffffff !important;
   /* border-color: #ffffff !important; */
  }

  .btn-primary {
    /* ... previous background/color rules ... */
    animation: mobile-pulse 3s infinite ease-in-out;
  }

  @keyframes mobile-pulse {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.03); box-shadow: 0 0 15px rgba(73, 205, 100, 0.5); }
    100% { transform: scale(1); }
  }
 
 }

/* ===== Hero cards: mobile accordion behaviour ===== */

.hero-card-body {
  overflow: hidden;
  transition: max-height 300ms ease, opacity 300ms ease;
  
  /* 1. Default State: Closed (Mobile) */
  max-height: 0;
  opacity: 0;
  /* Note: Do NOT use !important here. We want JS to override this when opening. */
}

/* 2. Rotate + icon on open */
.hero-card-toggle-icon {
  transition: transform 300ms ease;
}

[data-hero-card].is-open .hero-card-toggle-icon {
  transform: rotate(45deg);
}

/* 3. Desktop Override: Always Open */
/* This MUST come AFTER the rules above */
@media (min-width: 768px) {
  .hero-card-body {
    max-height: none !important;
    opacity: 1 !important;
    overflow: visible !important;
  }

  .hero-card-toggle {
    cursor: default;
  }
  
  /* Reset rotation on desktop if needed */
  .hero-card-toggle-icon {
    transform: none !important; 
    display: none !important; /* Or hide it completely as per your design */
  }
}
/* =========================================
   LUMERO CUSTOM FOOTER (V7 - Logo Top, Text Bottom)
   ========================================= */

/* 1. CONTAINER (Basis) */
.lum-footer-row {
    display: flex;
    flex-direction: column; 
    align-items: center;    
    width: 100%;
    gap: 0.75rem; /* Mobiele tussenruimte */
}

/* 2. LOGO SECTIE */
.lum-area-logo {
    order: 1; 
    display: flex;
    justify-content: center;
    margin: 0; padding: 0;
}

/* 3. COPYRIGHT SECTIE */
.lum-area-copy {
    order: 3; 
    width: 100%;
    text-align: center; 
    
    /* Mobiel Lijntje */
    border-top: 1px solid #e2e8f0;
    padding-top: 0.75rem;
    margin-top: 0.25rem;
    
    color: #475569;
    font-size: 0.875rem;
    line-height: 1.5;
}

/* 4. LINKS SECTIE */
.lum-area-links {
    order: 2; 
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    font-size: 0.875rem;
    color: #475569;
    line-height: 1.5;
}

/* 5. HULPMIDDELEN */
.lum-pipe { display: inline-block; padding: 0 0.5rem; color: #cbd5e1; }
.lum-txt-mobile { display: inline; }
.lum-txt-desktop { display: none; }
.lum-spacer { margin-left: 0; }

/* 6. DESKTOP OVERRIDES (Vanaf 768px) */
@media (min-width: 768px) {
    .lum-footer-row {
        /* SWITCH NAAR GRID VOOR 2 RIJEN */
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        grid-template-areas: 
            "logo logo"
            "copy links";
        gap: 0; /* We regelen ruimte met margins */
    }

    /* --- LOGO (Boven, gecentreerd) --- */
    .lum-area-logo { 
        grid-area: logo;
        justify-self: center;
        
        /* HIER MAKEN WE HET LOGO LOS VAN DE TEKST */
        margin-bottom: 1.5rem !important; 
    }

    /* --- COPYRIGHT (Links onder) --- */
    .lum-area-copy {
        grid-area: copy;
        justify-self: start; /* Links uitlijnen */
        align-self: center;  /* Verticaal centreren in zijn rij */
        
        width: auto;
        text-align: left;
        border: none !important;
        padding-top: 0 !important;
        margin-top: 0 !important;
    }

    /* --- LINKS (Rechts onder) --- */
    .lum-area-links {
        grid-area: links;
        justify-self: end;   /* Rechts uitlijnen */
        align-self: center;
        justify-content: flex-end;
    }

    /* --- HELPERS --- */
    .lum-pipe, .lum-txt-mobile { display: none !important; }
    .lum-txt-desktop { display: inline !important; }
    .lum-spacer { margin-left: 1.5rem !important; }
}

/* Mobile menu glass — LIGHT theme (more transparent) */
html:not([data-theme="dark"]) [data-mobile-menu]{
  background-color: rgba(255, 255, 255, 0.3); /* was ~0.78 */
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(15, 23, 42, 0.08);
}


/* Mobile menu "glass" background — DARK theme */
html[data-theme="dark"] [data-mobile-menu]{
  background-color: rgba(2,6,23,.62);     /* translucent slate/near-black */
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(148,163,184,.14);
}


html[data-theme="dark"] nav[data-mobile-menu] > *{
  position: relative;
  z-index: 1;
}

/* Hanging bullets for i18n strings that contain lines starting with "•" */
.service-bullets{
  white-space: pre-line;
  padding-left: 1.25rem;     /* space for the bullet */
  text-indent: -0.75rem;     /* hanging indent */
}
.cv-auto {
  content-visibility: auto;
  contain-intrinsic-size: 1px 2000px;
}