/* PAKKETREIS V3.3 - spacing + interaction audit for all WordPress templates.
   Keep original content, SEO, forms and GTranslate plugin handlers intact. */
:root {
  --pr33-unit: 8px;
  --pr33-gutter: clamp(22px, 5.6vw, 108px);
  --pr33-section: clamp(72px, 7vw, 108px);
  --pr33-card-gap: clamp(18px, 2.3vw, 32px);
  --pr33-copy-gap: clamp(16px, 2vw, 25px);
  --pr33-control-radius: 18px;
  --pr33-card-radius: 24px;
  --pr33-ease: cubic-bezier(.2,.8,.2,1);
}
body.pr-v3 #main-content > section,
body.pr-v3 #main-content > .pr-home-intro > section {
  padding-inline:var(--pr33-gutter) !important;
}
/* Common page section spacing. Preserve the designed hero, narrow preamble,
   contact form, overlap sections and colored CTA transitions. */
body.pr-v3 #main-content > section:not(:first-child):not(#formulier):not(.pr-hero),
body.pr-v3 #main-content > .pr-home-intro > section {
  --pr-section-space:var(--pr33-section);
}
body.pr-v3 #main-content > .pr-home-intro > section {
  padding-block:var(--pr33-section) !important;
}
body.pr-v3 #main-content > .pr-home-intro > section:first-child {
  padding-top:clamp(84px,9vw,132px) !important;
}
/* Cards/grids and editorial columns consistently breathe with the same rhythm. */
body.pr-v3 #main-content :is(.grid.gap-4,.grid.gap-6) {gap:var(--pr33-card-gap);}
body.pr-v3 #main-content :is(.usp-card,.glass-card,.pr-v3-card){
  border-radius:var(--pr33-card-radius) !important;
}
body.pr-v3 #main-content :is(.btn-primary,.btn-secondary-light,.btn-secondary-dark,.pr-hero-secondary-btn){
  border-radius:var(--pr33-control-radius) !important;
}
/* The source hero used inline mb/margin utilities PLUS an additional V2 content padding,
   resulting in irregular gaps at certain widths. One deliberate vertical scale. */
body.pr-v3 .pr-hero {
  padding-inline:var(--pr33-gutter) !important;
  padding-block:clamp(140px,13vw,205px) clamp(88px,8vw,132px) !important;
  min-height:min(860px,100svh);
  box-sizing:border-box;
}
body.pr-v3 .pr-hero .pr-hero-content { padding-block:0 !important; }
body.pr-v3 .pr-hero-content > .pr-hero-eyebrow { margin:0 0 clamp(22px,2.5vw,34px) !important; }
body.pr-v3 .pr-hero-content > h1 { margin:0 0 clamp(22px,2.4vw,30px) !important; }
body.pr-v3 .pr-hero-content > p { margin:0 !important; }
body.pr-v3 .pr-hero-content > .flex:has(.btn-primary) {
  margin:clamp(28px,3vw,40px) 0 clamp(40px,4vw,60px) !important;
  align-items:stretch;
  gap:clamp(12px,1.2vw,18px);
}
body.pr-v3 .pr-hero-content > .flex:has(.btn-primary) > a {
  display:inline-flex; align-items:center; justify-content:center; min-height:56px;
  margin:0 !important;
}
body.pr-v3 .pr-hero-content > .flex:last-child { margin:0; }
/* Avoid nested transforms affecting reveal and magnetic hover independently. */
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  body.pr-v3 #main-content .pr-magnet {
    transform:translate3d(var(--pr-magnet-x,0px), var(--pr-magnet-y,0px),0);
    transition:transform .24s ease-out, translate .34s var(--pr33-ease),
      background-color .3s ease, box-shadow .34s var(--pr33-ease), border-color .3s ease !important;
    will-change:transform;
  }
  body.pr-v3 #main-content .pr-magnet:hover {translate:0 -3px;}
}
/* Make reveals genuinely fade; never set opacity:1!important on a running keyframe.
   Other V3.2 keyframe rules stay in charge of stagger timing. */
html.pr-v32-motion-ready body.pr-v3 .pr-motion-item.pr-entered:not(.pr-enter-complete) {
  opacity:1; filter:none;
}
/* Plugin's original gt_options may use float and transform-based open. We make
   the panel an explicitly measured popup, without altering its click handlers. */
body.pr-v3 .floating-actions__translate,
body.pr-v3 .floating-actions__translate .gtranslate_wrapper,
body.pr-v3 .floating-actions #gt_float_wrapper {overflow:visible !important;}
body.pr-v3 .floating-actions .gt_float_switcher {overflow:visible !important;}
body.pr-v3 .floating-actions .gt_float_switcher .gt_options {
  float:none !important;
  position:absolute !important;
  display:none;
  left:auto !important;
  right:0 !important;
  top:auto !important;
  bottom:calc(100% + 12px) !important;
  min-width:178px !important;
  width:max-content !important;
  max-width:min(250px,calc(100vw - 32px)) !important;
  max-height:min(250px,50dvh) !important;
  height:auto !important;
  margin:0 !important;
  padding:6px !important;
  border:1px solid #dcebe7 !important;
  border-radius:16px !important;
  background:#fff !important;
  box-shadow:0 19px 50px rgba(0,36,42,.23) !important;
  overflow-x:hidden !important;
  overflow-y:auto !important;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translate3d(0,9px,0) !important;
  transition:opacity .22s ease, transform .28s var(--pr33-ease), visibility .22s ease !important;
  z-index:100 !important;
}
body.pr-v3 .floating-actions .gt_float_switcher .gt_options.gt-open {
  opacity:1 !important;
  visibility:visible !important;
  pointer-events:auto !important;
  transform:translate3d(0,0,0) !important;
}
body.pr-v3 .floating-actions .gt_float_switcher .gt_options a {
  display:flex !important;
  align-items:center !important;
  min-height:44px;
  border-radius:10px;
  overflow:visible !important;
}
body.pr-v3 .floating-actions .gt_float_switcher .gt_options a.gt-current {display:none !important;}
body.pr-v3 .floating-actions .gt_float_switcher .gt-selected {
  position:relative; z-index:1;
}
body.pr-v3 .floating-actions .gt_float_switcher:has(.gt_options.gt-open){
  box-shadow:0 15px 45px rgba(0,35,41,.2), 0 0 0 3px rgba(115,199,186,.2) !important;
}
/* Actual visual arrival contains blur-to-sharp fade, no opacity overrides. */
@keyframes pr32-enter {
  0%   {opacity:0;translate:0 23px;filter:blur(2px)}
  58%  {opacity:.94;filter:blur(.3px)}
  100% {opacity:1;translate:0 0;filter:blur(0)}
}
@media(max-width:1023px){
  :root{--pr33-gutter:clamp(22px,5vw,52px);--pr33-section:clamp(64px,7.5vw,84px);--pr33-card-gap:clamp(16px,2.5vw,24px)}
  body.pr-v3 .pr-hero {min-height:720px; padding-block:145px 90px !important;}
}
@media(max-width:639px){
  :root {--pr33-gutter:22px;--pr33-section:64px;--pr33-card-gap:18px;--pr33-card-radius:20px;--pr33-control-radius:16px;}
  body.pr-v3 #main-content > .pr-home-intro > section:first-child{padding-top:76px !important;}
  body.pr-v3 .pr-hero {min-height:680px;padding-block:135px 76px !important;}
  body.pr-v3 .pr-hero-content > .pr-hero-eyebrow {margin-bottom:20px !important;}
  body.pr-v3 .pr-hero-content > h1{margin-bottom:20px !important;}
  body.pr-v3 .pr-hero-content > .flex:has(.btn-primary){margin:24px 0 34px !important;gap:12px;}
  body.pr-v3 .pr-hero-content > .flex:has(.btn-primary)>a{min-height:52px;}
  body.pr-v3 .floating-actions .gt_float_switcher .gt_options{max-width:calc(100vw - 28px) !important;}
}
@media(prefers-reduced-motion:reduce){
  body.pr-v3 #main-content .pr-magnet {transform:none !important;transition:none !important;}
  body.pr-v3 .floating-actions .gt_float_switcher .gt_options{transition:none !important;}
}