/* Algemene instellingen */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
@font-face {
  font-family: 'VernerFont';
  src: url('verner.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

body {
  font-family: Arial, sans-serif;
  background-color: #f9f9f7;
  color: #2a4d59;
  line-height: 1.6;
  /*cursor: url("magic_wand_icon_32x32.png"), default !important;*/ 
}
/*.customCursor {
  cursor: url("magic_wand_icon_32x32.png"), default !important;
}*/
a:hover {
  cursor: url("magic_wand_icon_32x32.png"), default !important; 
  /*pointer-events: inherit;*/ /*Do not know how to use it, trying to solve the flickering of cursor*/
}
a:hover .customCursor{
  cursor: url("magic_wand_icon_32x32.png"), default !important; 
  /*pointer-events: inherit;*/ /*Do not know how to use it, trying to solve the flickering of cursor*/
}

/* Containers */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 1rem;
}

/* Header */
.header {
  background-color: #a5d9c7;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  position: sticky;
  top: 0;
  width: 100%;
  z-index: 1000; /* make sure it stays above other sections */
}
.header-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.header-logo {
  width: 100%;
  max-width: 40px; /* Adjust as needed */
  height: auto;
  display: block;
  margin: 0 auto; /* Center horizontally */
}
.site-title {
  font-size: 1.5rem;
  font-weight: bold;
}
.main-nav {
  display: none;
}
/* fixes sticky nav bar covering jump link */
#onderhouden, #opruimenenorganiseren, #contactformulier, #overmij, #blogposts,
#faq, #disclaimer, #algemenevoorwaarden, #privacy {
scroll-margin-top: 77px;
}

.menu-btn {
  background: none;
  border: none;
  font-size: 1.5rem;
  margin: 0 auto;
  display: block;
  color: #2a4d59;   /* your menu icon color */
}
/* Prevent blue highlight on mobile tap */
.menu-btn:focus,
.menu-btn:active {
  outline: none;
  box-shadow: none;
  color: #2a4d59;   /* keep the same color when pressed */
  background: none; /* ensure no blue background shows */
  -webkit-tap-highlight-color: transparent; /* removes mobile tap highlight */
}
.mobile-menu {
  display: none;
  flex-direction: column;
  background-color: #a5d9c7;
  padding: 1rem;
}
.mobile-menu.visible {
  display: flex;
}
.mobile-logo {
  text-align: left;
}
.mobile-logo img {
  max-width: 50px;   /* adjust size */
  height: auto;
  display: inline-block;
  margin: 0 auto;
}


/* Hero */
.hero {
  /*height: 60vh;*/
  background: url('https://source.unsplash.com/1600x900/?organized,home') center/cover no-repeat;
  position: relative;
}
.hero-overlay {
  background: #f9f9f7; /**/
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.hero-text {
  color: white;
  font-size: 2rem;
  text-align: center;
}
/* Make sure the image is responsive */
.hero-logo {
  width: 100%;
  max-width: 350px; /* Adjust as needed */
  height: auto;
  display: block;
  margin: 0 auto; /* Center horizontally */
}

/* Secties */

/* Prevent email/phone auto-links from turning blue/purple */
.intro a {
  color: inherit;            /* keep same color as text */
  text-decoration: none;     /* remove underline */
}
/* Default (desktop/tablet) stays as you already had */
.intro {
  padding: 3rem 1rem;
  text-align: center;
  background-color: #f9f9f7;
  margin-left: 79.5px;
  margin-right: 79.5px;
}
@media (max-width: 768px) {
  /* Secties blijven full-bleed; geen witte randen */
  .intro,
  .quote {
    margin: 0;             /* geen zijmarges op mobiel */
    width: 100%;           /* volle breedte */
    max-width: none;       /* niet beperken */
    padding-left: 1rem;    /* wel fijne binnenruimte */
    padding-right: 1rem;
  }

  /* Alleen de inhoud smal maken waar jij een .narrow wrapper hebt gezet */
  .intro .narrow,
  .quote .narrow {
    max-width: 700px;
    margin: 0 auto;
  }

/* Alleen brede illustraties mogen full width */
.intro img.fullwidth,
.quote img.fullwidth {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 1rem auto;
  border-radius: 8px;
}

  /* Exception: keep NHA logo small */
  .intro img.nha-logo-image {
    max-width: 200px !important;
    margin: 0 auto;
    display: block;
    border-radius: 0;
  }
}


.intro-grid,
.werkwijze-grid {
  display: grid;
  gap: 3rem;
  align-items: center;
}
.intro-item {
  background-color: white;
  padding: 1.5rem;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}
.intro-image {
  width: 100%; /*or 50%, but then it moves when the page size changes*/
  object-fit: contain;
  height: auto;
  margin: 1rem 0;
  border-radius: 8px;
}
@media (max-width: 768px) {
  .intro-image {
    width: 90%;        /* niet de volle breedte */
    max-width: 100%;   /* voorkomt overflow */
    margin: 1rem auto; /* centreren met ruimte links/rechts */
    display: block;
  }
}

.swash-text {
  font-family: 'VernerFont', sans-serif;
  font-feature-settings: "swsh" 1; /* enable swashes */
}

.overmij,
.quote,
.werkwijze,
.contact,
.blog,
.diensten {
  padding: 3rem 1rem;
  text-align: center;
}
.diensten {
  background-color: rgba(185, 228, 201, 0.302);
}
/* Alleen de inhoud smaller maken, achtergrond blijft breed */
.narrow {
  max-width: 700px;   /* zelfde breedte als blogs */
  margin-left: auto;
  margin-right: auto;
  text-align: center; /* behoud centrering */
}

.before-after {
  padding: 3rem 1rem;    /* same as .quote, .diensten, .overmij */
  text-align: center;    /* center the heading */
  max-width: 1200px;     /* same width as .diensten-inner */
  margin: 0 auto;
  box-sizing: border-box;
}

/* Hide the actual checkbox */
.before-after-toggle input {
  display: none;
}

.before-after-toggle .images {
  position: relative;
  max-width: 700px;
  margin: 2rem auto 1rem auto;   /* top 2rem, bottom 1rem */
  border-radius: 8px;
  overflow: hidden;
}

/* Both images fill the container */
.before-after-toggle .images img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
  margin: 0;             /* no margin, ensures perfect overlap */
}

/* After image stacked on top */
.before-after-toggle .after {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity 0.5s ease;
}

/* Show after image when checkbox is checked */
.before-after-toggle input:checked ~ .images .after {
  opacity: 1;
}

/* Mobile: shrink container to 90% and center */
@media (max-width: 768px) {
  .before-after-toggle .images {
    width: 90%;
  }
}

.before-after-toggle,
.before-after-toggle .images,
.before-after-toggle .images img,
.before-after-toggle input {
  cursor: url("magic_wand_icon_32x32.png"), default !important;
}


/* Links in teksten zonder blauw/onderstreept */
.dienst a {
  color: inherit;              /* neemt kleur van de omringende tekst */
  text-decoration: none;       /* geen onderstreep */
}
.dienst a:hover {
  text-decoration: underline;  /* optioneel: alleen bij hover */
}

.diensten-grid,
.blog-grid {
  display: grid;
  gap: 1.5rem;
}
.diensten-grid {
  grid-template-columns: 1fr;
}
/* Constrain the diensten-grid like stappen-cards */
.diensten-grid {
  max-width: 1200px;  /* same max-width as stappen-cards */
  margin: 0 auto;     /* center it horizontally */
}
.dienst,
.blog-item {
  background-color: white;
  padding: 1.5rem;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}
/* Constrain only the 'MIJN BLOG' section */
section.diensten > .blog-grid {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem; /* optional, for small screens */
}
/* Target only the blog grid on the blog.html page */
main.diensten > .blog-grid {
  max-width: 1200px;   /* limits the width so it's not full screen */
  margin: 0 auto;       /* centers the grid */
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* responsive columns */
  gap: 2rem;            /* space between blog items */
  padding: 0 1rem;      /* small padding on mobile */
}
/* Only affects the onderhouden section */
.diensten-inner {
  max-width: 1200px;  /* same as MIJN MISSIE content width */
  margin: 0 auto;     /* centers it horizontally */
  padding: 0 20px;    /* some horizontal breathing room on small screens */
  box-sizing: border-box;
}
.blog {
  background-color: #f9f9f7;
}
.blog-item p {
  font-size: 0.9rem;
  color: #2a4d59;
  opacity: 0.8;
}
.blog-date {
  font-size: 0.85rem;
  color: #2a4d59;
  opacity: 0.8;
  margin-bottom: 0.5rem;
}
.blog-image {
  width: 100%;
  height: auto;
  margin: 1rem 0;
  border-radius: 8px;
}
.blog-nav {
  margin-top: 2rem;
  text-align: center;
}
.blog-nav a {
  color: #2a4d59;
  text-decoration: none;
}
.blog-nav a:hover {
  text-decoration: underline;
}
/* Limit width of blog articles for better readability */
.artikel .container {
  max-width: 700px;   /* adjust this number as you like (600–800px is typical) */
  margin: 0 auto;     /* keep it centered */
  line-height: 1.7;   /* a little more spacing improves readability */
  font-size: 1.05rem; /* optional: slightly bigger text */
}

.video-wrapper {
  margin-top: 1.5rem;
  position: relative;
  padding-bottom: 56.25%; /* 16:9 verhouding */
  height: 0;
  overflow: hidden;
}
.video-wrapper iframe {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.nha-logo-image {
  max-width: 200px;   /* adjust size */
  height: auto;
  display: inline-block;
  margin: 0 auto;
}

/* Quote */
.quote {
  background-color: #e6be5f33;
}

/* Contactformulier */
.contact {
  background-color: #f9f9f7;
}
.contact-form {
  background: white;
  padding: 2rem;
  max-width: 600px;
  margin: 0 auto;
  text-align: left;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}
.contact-form label {
  display: block;
  margin-bottom: 1rem;
  font-weight: 600;
}
.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 0.5rem;
  border: 1px solid #ccc;
  border-radius: 4px;
}
.contact-form button {
  background-color: #dcb24f;
  color: white;
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: 4px;
  font-weight: bold;
  cursor: url("magic_wand_icon_32x32.png"), default !important;
  /*cursor: pointer;*/
}
.contact-form button:hover {
  opacity: 0.8;
}
@media (max-width: 768px) {
  .contact-grid .intro-grid {
    gap: 0rem; /* haalt alleen hier de ruimte weg */
  }

  .contact-grid p:last-of-type {
    margin-bottom: 0; /* voorkomt extra marge onder de laatste zin */
  }
}

.kennismakingsgesprek button {
  color: #2a4d59;
  background-color: #a5d9c7;
  margin: 5px;
  padding: 10px;
  border-radius: 5px;
  font-weight: bold;
  font-size: inherit;
  border: none;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}
.kennismakingsgesprek button:hover{
  opacity: 0.8;
  cursor: url("magic_wand_icon_32x32.png"), default !important; 
}

/* Footer */
.footer {
  background-color: #a5d9c7;
  text-align: center;
  padding: 1rem;
  font-size: 0.875rem;
}
.footer-image {
  width: 300px; /*or 50%, but then it moves when the page size changes*/
  height: auto;
  border-radius: 8px;
  display: block;      /* makes it a block element */
  margin: 0 auto;      /* centers horizontally */
}

/* Tighter spacing for the Gegevens section only */
.intro-gegevens {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem; /* reduce bottom padding */
}

.intro-gegevens p {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem; /* less gap between paragraphs */
}


/* --- Legal links styling --- */
.legal-links a {
  text-decoration: underline;    /* always underlined */
  color: inherit;                /* same text color as surrounding text */
}

.legal-links a:visited {
  color: inherit;                /* no purple visited links */
}

.legal-links a:hover {
  opacity: 0.8;                  /* optional: subtle hover effect */
}
.legal-links {
  margin: 0;           /* removes extra top/bottom spacing */
  padding: 0;          /* make sure no extra padding */
}


.newsletter-form {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.newsletter-form input[type="email"],
.newsletter-form input[type="text"] {
  padding: 10px;
  border-radius: 5px;
  border: 1px solid #ccc;
  font-size: inherit;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

.newsletter-form input[type="email"]:focus,
.newsletter-form input[type="text"]:focus {
  outline: none;
  border-color: #a5d9c7;
  box-shadow: 0 0 5px rgba(165,217,199,0.8);
}

.newsletter-form .kennismakingsgesprek button {
  color: #2a4d59;
  background-color: #a5d9c7;
  margin: 5px 0 0 0;
  padding: 10px;
  border-radius: 5px;
  font-weight: bold;
  font-size: inherit;
  border: none;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

.newsletter-form .kennismakingsgesprek button:hover {
  opacity: 0.8;
  cursor: url("magic_wand_icon_32x32.png"), default !important;
}



/* Reviews Carousel */
.reviews {
  padding: 3rem 1rem;
  text-align: center;
  background-color: #e6be5f33;
}

/* Outer container (layout only) */
.carousel {
  max-width: 700px;
  margin: 0 auto;
}

/* The viewport handles scrolling/swiping */
.carousel-viewport {
  position: relative;
  overflow: hidden;               /* desktop: hide neighbors */
  width: 100%;
  /* Mobile will override to allow swipe */
}

/* The track handles the animation */
.carousel-track {
  display: flex;
  flex-wrap: nowrap;
  will-change: transform;
  animation: scrollReviews 25s infinite; /* step-style speed you preferred */
}

.review {
  flex: 0 0 100%;          /* exactly one per view */
  box-sizing: border-box;
  padding: 1rem;
  color: #2a4d59;
}

/* Typography */
.review h3 { font-size: 1.2rem; margin-bottom: 0.5rem; }
.review p  { margin: 0.3rem 0; }

/* Step-style animation; last frame lands on first duplicate for seamless loop */
@keyframes scrollReviews {
  0%, 20%   { transform: translateX(0%); }       /* Marieke */
  25%, 45%  { transform: translateX(-100%); }    /* Annieka */
  50%, 70%  { transform: translateX(-200%); }    /* Lisa */
  75%, 95%  { transform: translateX(-300%); }    /* Duplicate Marieke */
  100%      { transform: translateX(-300%); }    /* matches duplicate */
}



/* Pause on hover (desktop) */
@media (hover: hover) {
  .carousel-viewport:hover .carousel-track {
    animation-play-state: paused;
  }
}

/* Mobile: enable swipe AND auto-step.
   We pause while the user is touching/dragging, then resume after. */
@media (max-width: 768px) {
  .carousel-viewport {
    overflow-x: auto;                  /* allow finger swipe */
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }
  .carousel-viewport::-webkit-scrollbar { display: none; }
  .review { scroll-snap-align: center; }

  /* While the user interacts, pause the animation so swipe feels natural */
  .carousel-viewport:active .carousel-track,
  .carousel-viewport:focus-within .carousel-track {
    animation-play-state: paused;
  }
}

/* voorkom dat iOS telefoonnummers en mails blauw maakt */
a[href^="tel"], 
a[href^="mailto"],
a[href^="sms"],
a[href^="fax"] {
  color: inherit !important;      /* gebruik de tekstkleur */
  text-decoration: none !important; /* geen onderstreping */
}

/* extra safeguard voor iOS autolinking */
a, a:link, a:visited, a:hover, a:active {
  text-decoration: none;
  color: inherit;
}

/* Responsive design */
@media (min-width: 768px) {
  /*.main-nav {
    display: flex;
    gap: 1rem;
  }*/

  .main-nav {
   position: relative;
   display: flex;
   justify-content: center; /* spread out left group, icon, and right group */
   gap: 4rem;
   align-items: center;
   width: 100%;
   /*max-width: 800px; /* optional, for visual control */
   margin: 0 auto;   /* center .main-nav in the page */
   padding: 0 1rem;
  }

  .nav-group-left {
   display: flex;
   gap: 2.5rem;
  }
  .nav-group-right {
   display: flex;
   gap: 4rem;
  }

  .nav-icon img {
   position: absolute;
   display: block;
   align-items: center;
   width: 100%;
   max-width: 60px; /* Adjust as needed */
   height: auto;
   margin: 0 auto; /* Center horizontally */
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
  }
  .menu-btn,
  .mobile-menu {
    display: none;  
  }
  .diensten-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .blog-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .intro-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .hero-text {
    font-size: 2.5rem;
  }
}
/* Optional: Adjust max-width for larger screens */
@media (min-width: 1024px) {
  .hero-logo {
    max-width: 350px;
  }
}

/* --- Star Confetti --- */
.confetti {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: hidden;
  z-index: 2000; /* stays behind text */
}

.star {
  position: absolute;
  top: -100px;
  width: 40px;
  height: 40px;
  background: url("star.png") no-repeat center/contain;
  background-size: contain;
  opacity: 0.8;
  animation: fall linear infinite;
}

/* 7 stars with unique settings */
.star:nth-child(1) { left: 8%;  width: 28px; height: 28px; animation-duration: 6s; animation-delay: 0s; }
.star:nth-child(2) { left: 22%; width: 40px; height: 40px; animation-duration: 7s; animation-delay: 1s; }
.star:nth-child(3) { left: 38%; width: 32px; height: 32px; animation-duration: 5.5s; animation-delay: 1.5s; }
.star:nth-child(4) { left: 52%; width: 45px; height: 45px; animation-duration: 8s; animation-delay: 0.5s; }
.star:nth-child(5) { left: 67%; width: 30px; height: 30px; animation-duration: 6.5s; animation-delay: 2s; }
.star:nth-child(6) { left: 78%; width: 36px; height: 36px; animation-duration: 7.5s; animation-delay: 1.2s; }
.star:nth-child(7) { left: 90%; width: 25px; height: 25px; animation-duration: 6s; animation-delay: 0.8s; }

@keyframes fall {
  0% { transform: translateY(-100px) rotate(0deg); opacity: 1; }
  100% { transform: translateY(110vh) rotate(360deg); opacity: 0; }
}


/* --- Centered legal pages: Disclaimer, AV, Privacy --- */
.av-page .diensten .diensten-grid {
  grid-template-columns: 1fr;   /* zet kaarten onder elkaar */
  justify-items: center;        /* centreert de kaarten */
}

.av-page .diensten .dienst {
  width: 100%;
  max-width: 700px;             /* zelfde breedte als blog */
  margin: 0;                    /* grid regelt de centrering */
}


/* --- Price list styling Algemene Voorwaarden --- */
.price-list {
  display: grid;
  gap: 0.5rem;
  margin: 0 auto;
  max-width: 600px;
}

.price-item {
  display: flex;
  justify-content: space-between; /* tekst links, prijs rechts */
  align-items: flex-end;          /* onderkanten uitlijnen */
  gap: 1rem;
}

.price-item .offer {
  text-align: left;
  flex: 1 1 auto;          /* mag afbreken en de ruimte gebruiken */
  min-width: 0;            /* voorkomt dat de browser gaat schalen */
  white-space: normal;     /* laat netjes afbreken */
  /* ✅ voorkom dat mobiele browsers font-size aanpassen */
  font-size: inherit;          
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

.price-item .price {
  text-align: right;
  font-weight: bold;
  white-space: nowrap;   /* hou prijs op één regel */
  flex: 0 0 auto;        /* nooit krimpen, nooit uitrekken */
  min-width: max-content;/* hou eigen breedte vast, geen scaling */
  /* ✅ fix voor font-size scaling */
  font-size: inherit;          
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

.price-item .gratis {
  font-weight: bold;
}


/* --- Page-specific overrides --- */
.av-page .diensten {
  background-color: #e6be5f33; /* same as the reviews section */
}

/* --- TEST --- */
/* Container */
.stappen-cards {
  text-align: center;
  padding: 2rem 1rem;
  background: e6be5f33; /* warme, zachte achtergrondkleur */
}

.stappen-cards h2 {
  margin-bottom: 2rem;
}

/* Wrapper met grid - specifiek voor dit blok */
.stappen-cards .cards-wrapper {
  display: grid;
  grid-template-columns: 1fr;   /* mobiel: alles onder elkaar */
  gap: 1.5rem;
  max-width: 1200px;            /* breder dan .narrow */
  margin: 2rem auto 0;          /* centreren */
}

/* Desktop: altijd 3 naast elkaar */
@media (min-width: 992px) {
  .stappen-cards .cards-wrapper {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Losse card */
.stappen-cards .card {
  background: white;
  border-radius: 8px;
  padding: 2rem 1.5rem;
  box-shadow: 0 6px 12px rgba(0,0,0,0.08);
  transition: transform 0.3s, box-shadow 0.3s;
}

.stappen-cards .card:hover {
  transform: translateY(-8px);
  box-shadow: 0 10px 20px rgba(0,0,0,0.12);
}

/* Icoon */
.stappen-cards .icoon {
  font-size: 2.5rem;
  margin-bottom: 1rem;
  color: #f4c542; /* accentkleur */
}

/* Tekst */
.stappen-cards .card h3 {
  margin-bottom: 0.75rem;
}

.stappen-cards .card p {
  line-height: 1.5;
}