/* =========================================================
   PAKKETREIS V3 — EEN VISUEEL SYSTEEM
   Montserrat | ritme | radii | kleuren | gelaagde beweging
   Geen wijziging van inhoud, data of bestaande koppelingen.
   ========================================================= */
:root {
  --pr-ink: #003239;
  --pr-ink-deep: #00282e;
  --pr-ink-soft: #174b50;
  --pr-mint: #73c7ba;
  --pr-mint-light: #bdf1e4;
  --pr-mint-pale: #eaf8f3;
  --pr-paper: #fbfdfc;
  --pr-paper-muted: #f3f8f6;
  --pr-stroke: #dcebe7;
  --pr-text-muted: #456368;
  --pr-gutter: clamp(22px, 5.9vw, 112px);
  --pr-section-space: clamp(68px, 7.6vw, 116px);
  --pr-section-space-sm: clamp(48px, 5vw, 76px);
  --pr-gap: clamp(22px, 2.65vw, 40px);
  --pr-radius-xs: 10px;
  --pr-radius-sm: 14px;
  --pr-radius-md: 18px;
  --pr-radius-card: 24px;
  --pr-radius-feature: 30px;
  --pr-radius-hero: 48px;
  --pr-ease: cubic-bezier(.16,1,.3,1);
  --pr-shadow-card: 0 15px 48px -29px rgba(0,49,55,.26);
  --pr-shadow-hover: 0 28px 60px -30px rgba(0,49,55,.34);
}

/* Montserrat is apart geënqueued via functions.php, dus niet alleen fallback.
   Font-iconen behouden hun eigen glyph-font. Geen brute *-selector. */
.pr-v3,
.pr-v3 :is(button, input, textarea, select, label, option, p, a, li, h1, h2, h3, h4, h5, h6),
.pr-v3 :is(.font-body-lg, .font-body-md, .font-headline-lg, .font-headline-md,
  .font-display-lg, .font-display-lg-mobile, .font-label-bold) {
  font-family: 'Montserrat', sans-serif !important;
}
.pr-v3 .material-symbols-outlined { font-family: 'Material Symbols Outlined' !important; }
.pr-v3 :is(.fa, .fa-solid, .fa-regular, .fa-brands, [class^="fa-"], [class*=" fa-"]) {
  font-family: 'Font Awesome 6 Free' !important;
}
.pr-v3 :is(.fa-brands, [class*="fa-whatsapp"]) { font-family: 'Font Awesome 6 Brands' !important; }
.pr-v3 { background: var(--pr-paper); color: var(--pr-ink); }
.pr-v3 #main-content :is(h1,h2,h3,h4) {
  text-wrap: balance;
  letter-spacing: -.03em;
}
.pr-v3 #main-content :is(p,li) { line-height: 1.75; }
.pr-v3 #main-content :is(h1,h2,h3,h4) + p { margin-top: 0; }
.pr-v3 #main-content h2 { line-height: 1.16; }
.pr-v3 #main-content h3 { line-height: 1.25; }
.pr-v3 #main-content > section { padding-inline: var(--pr-gutter) !important; }
.pr-v3 #main-content > section:not(:first-child):not(#formulier):not([class*="min-h-"]):not(.pr-home-intro) {
  padding-top: var(--pr-section-space) !important;
  padding-bottom: var(--pr-section-space) !important;
}
.pr-v3 #main-content section .max-w-\[1440px\],
.pr-v3 footer .max-w-\[1440px\] { width: 100%; }
.pr-v3 footer { padding-inline: var(--pr-gutter) !important; }
.pr-v3 footer .grid { column-gap: var(--pr-gap); }
.pr-v3 :is(.rounded-lg,.drawer-link__icon) { border-radius: var(--pr-radius-sm) !important; }
.pr-v3 :is(.rounded-xl,.btn-primary,.btn-secondary-light,.btn-secondary-dark,.pr-hero-secondary-btn) { border-radius: var(--pr-radius-md) !important; }
.pr-v3 :is(.rounded-2xl,.rounded-3xl,.usp-card,.glass-card,.pr-story-image) { border-radius: var(--pr-radius-card) !important; }
.pr-v3 :is(.rounded-full,.whatsapp-float__icon) { border-radius: 9999px !important; }
/* Speciale grote uitsnedes tussen hero en content zijn intentioneel. */
.pr-v3 #main-content > section:first-child { border-radius: 0 0 var(--pr-radius-hero) var(--pr-radius-hero) !important; }
.pr-v3 .pr-home-intro { border-radius: var(--pr-radius-hero) var(--pr-radius-hero) 0 0 !important; }

/* Gecontroleerd kleurenpalet op alle pagina's. */
.pr-v3 #main-content section.bg-surface,
.pr-v3 #main-content section.bg-background { background-color: var(--pr-paper-muted) !important; }
.pr-v3 #main-content section.bg-surface-container-lowest,
.pr-v3 #main-content section.bg-white { background-color: var(--pr-paper) !important; }
.pr-v3 #main-content section.bg-primary-container,
.pr-v3 #main-content section.bg-primary { background-color: var(--pr-ink) !important; }
.pr-v3 .text-on-surface-variant { color: var(--pr-text-muted); }
.pr-v3 #main-content > section:not(:first-child):not([data-header="dark"]):nth-of-type(odd) {
  background-image: radial-gradient(circle at 100% 0, rgba(115,199,186,.055), transparent 44%);
}

/* Knoppen: uniforme maat, contactoppervlak en voelbare hover feedback. */
.pr-v3 :is(.btn-primary,.btn-secondary-light,.btn-secondary-dark,.pr-hero-secondary-btn) {
  min-height: 54px;
  padding: 15px 26px !important;
  gap: 12px;
  font-size: clamp(13px, 1.05vw, 15px) !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  box-sizing: border-box;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  transition: translate .32s var(--pr-ease), transform .32s var(--pr-ease),
    background-color .3s ease, border-color .3s ease, box-shadow .32s var(--pr-ease) !important;
}
.pr-v3 .btn-primary { border-color: var(--pr-mint) !important; background: var(--pr-mint) !important; }
.pr-v3 .btn-primary:hover { background: #96dfd0 !important; border-color: #96dfd0 !important; }
.pr-v3 :is(.btn-primary,.btn-secondary-light,.btn-secondary-dark,.pr-hero-secondary-btn)::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(110deg, transparent 21%, rgba(255,255,255,.29) 46%, transparent 71%);
  transform: translateX(-130%);
  transition: transform .75s var(--pr-ease);
}
@media (hover: hover) {
  .pr-v3 :is(.btn-primary,.btn-secondary-light,.btn-secondary-dark,.pr-hero-secondary-btn):hover { translate: 0 -4px; }
  .pr-v3 :is(.btn-primary,.btn-secondary-light,.btn-secondary-dark,.pr-hero-secondary-btn):hover::after { transform: translateX(130%); }
  .pr-v3 :is(.btn-primary,.btn-secondary-light,.btn-secondary-dark,.pr-hero-secondary-btn):hover .material-symbols-outlined {
    translate: 3px 0;
  }
}
.pr-v3 :is(.btn-primary,.btn-secondary-light,.btn-secondary-dark,.pr-hero-secondary-btn) .material-symbols-outlined {
  transition: translate .28s var(--pr-ease);
}

/* Specifiek formulier: inputs en custom selects volgen dezelfde vormen. */
.pr-v3 #contact-form :is(input:not([type="checkbox"]):not([type="radio"]),textarea,select),
.pr-v3 #contact-form :is(.custom-select,.custom-select-trigger),
.pr-v3 #contact-form .focus-within\:border-mint {
  border-radius: var(--pr-radius-sm) !important;
}
.pr-v3 #contact-form :is(input:not([type="checkbox"]):not([type="radio"]),textarea,select):focus-visible {
  border-color: var(--pr-mint) !important;
  box-shadow: 0 0 0 4px rgba(115,199,186,.18) !important;
  outline: none !important;
}
.pr-v3 #contact-form label { font-size: 13px; }
.pr-v3 #contact-form { --pr-form-gap: 20px; }
.pr-v3 #contact-form > :not([hidden]) + :not([hidden]) { margin-top: var(--pr-form-gap); }

/* Kaarten en visuele panelen: overal dezelfde radius, border, schaduw. */
.pr-v3 #main-content :is(.usp-card,.glass-card,.pr-v3-card) {
  border: 1px solid var(--pr-stroke);
  box-shadow: var(--pr-shadow-card);
  border-radius: var(--pr-radius-card) !important;
  transition: translate .42s var(--pr-ease), box-shadow .42s var(--pr-ease),
    border-color .32s ease, background-color .32s ease;
}
.pr-v3 #main-content .pr-v3-card.bg-primary-container { border-color: rgba(166,231,214,.16); }
@media (hover: hover) {
  .pr-v3 #main-content :is(.usp-card,.glass-card,.pr-v3-card):hover {
    translate: 0 -6px;
    box-shadow: var(--pr-shadow-hover);
    border-color: rgba(115,199,186,.68);
  }
  .pr-v3 #main-content .pr-v3-card.bg-primary-container:hover {
    box-shadow: 0 25px 55px -30px rgba(0,0,0,.46);
  }
}
.pr-v3 #main-content :is(.usp-card,.glass-card,.pr-v3-card) > .material-symbols-outlined {
  transition: transform .42s var(--pr-ease), color .28s ease;
}
@media (hover: hover) {
  .pr-v3 #main-content :is(.usp-card,.glass-card,.pr-v3-card):hover > .material-symbols-outlined {
    transform: translateY(-3px) rotate(-4deg);
  }
}
.pr-v3 #main-content :is(img:not([class*="rounded-full"]),video) { max-width: 100%; }
.pr-v3 #main-content :is(.rounded-2xl,.rounded-3xl):has(>img),
.pr-v3 #main-content .pr-story-image { overflow: hidden; }
.pr-v3 #main-content :is(.rounded-2xl,.rounded-3xl):has(>img) img { transition: transform .7s var(--pr-ease); }
@media (hover: hover) {
  .pr-v3 #main-content :is(.rounded-2xl,.rounded-3xl):has(>img):hover img { transform: scale(1.045); }
}

/* Overal dezelfde heading/section-eyebrow accenten. */
.pr-v3 #main-content section:not([data-header="dark"]) h2 { color: var(--pr-ink); }
.pr-v3 #main-content section :is(.text-mint) { color: var(--pr-mint); }
.pr-v3 #main-content section :is(.bg-mint) { background-color: var(--pr-mint); }
.pr-v3 .pr-section-eyebrow { font-size: 12px; letter-spacing: .16em; }
.pr-v3 #main-content section h2 .text-mint { color: #3e9e90; }
.pr-v3 .pr-hero h1 .text-mint { color: var(--pr-mint-light) !important; }

/* Hero en overgang: verfijnde diepte zonder de video of tekst te verhullen. */
.pr-v3 #main-content > section:first-child {
  background: var(--pr-ink-deep);
  box-shadow: inset 0 -26px 52px rgba(0,36,40,.12);
}
.pr-v3 #main-content > section:first-child > .absolute.inset-0:first-child { overflow: hidden; }
.pr-v3 .pr-hero::after {
  content: '';
  position: absolute;
  z-index: 4;
  pointer-events: none;
  inset: auto 0 0;
  height: 9rem;
  background: linear-gradient(to top, rgba(0,36,40,.35), transparent);
}
.pr-v3 .pr-hero-stamp { border-radius: var(--pr-radius-md); }
.pr-v3 .pr-story-image { border-radius: var(--pr-radius-card) !important; }
.pr-v3 #main-content > section:first-child .animate-fade-in-up {
  animation-timing-function: var(--pr-ease);
}
.pr-v3 .pr-hero-eyebrow { font-family: 'Montserrat', sans-serif !important; }

/* Header: zorgvuldig dezelfde radius als de rest van het systeem. */
.pr-v3 #main-header { border-radius: var(--pr-radius-md); }
.pr-v3 #main-header.header-scrolled { border-radius: 0 0 var(--pr-radius-sm) var(--pr-radius-sm) !important; }
.pr-v3 #main-header .header-nav-link:hover { opacity: 1 !important; }
.pr-v3 #mobile-menu { box-shadow: -40px 0 90px rgba(0,25,29,.27); }
.pr-v3 #mobile-menu .drawer-link { border-radius: var(--pr-radius-sm) !important; }
.pr-v3 #mobile-menu .drawer-link__icon { border-radius: var(--pr-radius-xs) !important; }
.pr-v3 #mobile-menu .drawer-link__arrow { transition: transform .3s var(--pr-ease); }
.pr-v3 #mobile-menu .drawer-link:hover .drawer-link__arrow { transform: translateX(7px); }
.pr-v3 #mobile-menu.drawer-open .drawer-link {
  animation: pr-drawer-in .48s var(--pr-ease) both;
  animation-delay: calc(var(--pr-drawer-i, 0) * 55ms + 45ms);
}
@keyframes pr-drawer-in { from { opacity:0; transform:translateX(20px); } to { opacity:1; transform:translateX(0); } }

/* Motion: de browser tekent content standaard zonder JS; pas animatie toe na init. */
html:not(.pr-v3-motion-ready) .pr-v3 :is(.reveal,.reveal-fade,.reveal-card,.reveal-feature):not(.pr-motion-item) {
  opacity: 1 !important; filter: none !important; transform: none !important;
}
html.pr-v3-motion-ready .pr-v3 .pr-v3-reveal:not(.pr-v3-visible) {
  opacity: 0 !important;
  transform: translateY(32px) scale(.986) !important;
  filter: blur(3px) !important;
}
html.pr-v3-motion-ready .pr-v3 .pr-v3-reveal {
  transition: opacity .82s var(--pr-ease), transform .82s var(--pr-ease),
    filter .82s var(--pr-ease), translate .38s var(--pr-ease), box-shadow .4s var(--pr-ease) !important;
  transition-delay: var(--pr-stagger, var(--reveal-delay, 0ms)) !important;
}
html.pr-v3-motion-ready .pr-v3 .pr-v3-reveal.pr-v3-visible {
  opacity: 1 !important;
  transform: translateY(0) scale(1) !important;
  filter: none !important;
}
.pr-v3 :is(#main-content,footer) [id] { scroll-margin-top: 112px; }
html { scroll-behavior: smooth; scroll-padding-top: 112px; }
.pr-v3 .step-circle.step-active { animation: pr-pop .5s var(--pr-ease) both; }
@keyframes pr-pop { 0% { scale:.85; } 70% { scale:1.12; } 100% { scale:1; } }

/* Kleine stagger op de header-statistieken en timeline. */
.pr-v3 .pr-hero-content > .flex:last-child > .flex {
  animation: pr-mini-enter .7s var(--pr-ease) both;
}
.pr-v3 .pr-hero-content > .flex:last-child > .flex:nth-child(1) { animation-delay:.4s; }
.pr-v3 .pr-hero-content > .flex:last-child > .flex:nth-child(2) { animation-delay:.52s; }
.pr-v3 .pr-hero-content > .flex:last-child > .flex:nth-child(3) { animation-delay:.64s; }
@keyframes pr-mini-enter { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:translateY(0); } }

/* Bewegende, maar discrete merklijnen. */
@media (hover: hover) {
  .pr-v3 #main-content section a:not(.btn-primary):not(.btn-secondary-light):not(.btn-secondary-dark):not(.pr-hero-secondary-btn):hover .material-symbols-outlined {
    transition: translate .25s var(--pr-ease);
    translate: 2px 0;
  }
}

@media (max-width: 1023px) {
  :root { --pr-gutter: clamp(22px, 5vw, 56px); --pr-radius-hero: 38px; }
  .pr-v3 #main-content > section:not(:first-child):not(#formulier):not([class*="min-h-"]):not(.pr-home-intro) {
    padding-block: var(--pr-section-space-sm) !important;
  }
  .pr-v3 .pr-hero h1 { letter-spacing: -.035em !important; }
  .pr-v3 #main-header { border-radius: var(--pr-radius-sm); }
}
@media (max-width: 639px) {
  :root { --pr-gutter: 22px; --pr-radius-hero: 30px; --pr-radius-card: 20px; --pr-radius-feature: 24px; }
  .pr-v3 #main-content > section:first-child { border-radius:0 0 var(--pr-radius-hero) var(--pr-radius-hero) !important; }
  .pr-v3 .pr-home-intro { border-radius:var(--pr-radius-hero) var(--pr-radius-hero) 0 0 !important; }
  .pr-v3 :is(.btn-primary,.btn-secondary-light,.btn-secondary-dark,.pr-hero-secondary-btn) { min-height: 52px; }
  .pr-v3 #main-content > section:not(:first-child):not(#formulier):not([class*="min-h-"]):not(.pr-home-intro) {
    padding-block: 62px !important;
  }
  .pr-v3 .pr-hero { min-height: 680px; }
  .pr-v3 .pr-hero-content > .flex:last-child { gap: 12px; }
  .pr-v3 .pr-section-eyebrow { letter-spacing: .09em; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  .pr-v3, .pr-v3 *:not(.material-symbols-outlined), .pr-v3 *::before, .pr-v3 *::after {
    animation-duration: .01ms !important;
    animation-delay: 0ms !important;
    transition-duration: .01ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }
  .pr-v3 :is(.reveal,.reveal-fade,.reveal-card,.reveal-feature,.pr-v3-reveal) {
    opacity: 1 !important; filter: none !important; transform:none !important; translate: none !important;
  }
}