/* Fixes/improvements on top of the Webflow CSS. Loaded after it, from layout.antlers.html. */

/* Sticky nav: the wrappers use overflow:hidden, which disables position:sticky for everything
   inside. clip keeps the same clipping without creating a scroll container. */
.page-wrapper, .main-wrapper { overflow: clip; }

/* Make the whole navbar sticky (the inner .cop-nav-wrap is only sticky inside its 90px parent,
   so it scrolled away and its scrolled-shadow flashed briefly). top = -navbar padding-top,
   so the bar itself ends flush with the top of the viewport. */
.navbar { position: sticky; top: -20px; z-index: 999; }

/* Scrolled nav: full-width bar instead of a floating 1200px card. */
.navbar { transition: background-color .25s ease, box-shadow .25s ease; }
.navbar:has(.cop-nav-wrap.is-scrolled) { background-color: #E9F5F7; box-shadow: 0 2px 14px rgba(47, 59, 59, .10); }
.navbar .cop-nav-wrap.is-scrolled { box-shadow: none; }

/* Blog (Statamic collection): the Webflow template styled each paragraph separately, the CMS
   delivers plain HTML from the editor, so style that instead. Sizes follow .decription/.heading-8. */
.blog-body { font-family: Inter, sans-serif; font-size: 18px; line-height: 30px; color: var(--black--gray); padding-bottom: 6rem; }
.blog-body > * + * { margin-top: 1.25em; }
.blog-body h2 { font-size: 30px; line-height: 38px; margin-top: 2em; }
.blog-body h3 { font-size: 22px; line-height: 30px; margin-top: 1.75em; }
.blog-body ul, .blog-body ol { padding-left: 1.4em; }
.blog-body li + li { margin-top: .4em; }
.blog-body blockquote { margin: 2em 0; padding-left: 1.25em; border-left: 3px solid #9ED9DB; font-size: 22px; line-height: 32px; font-style: italic; }
.blog-body img { width: 100%; height: auto; border-radius: 16px; }
.blog-body a { color: #006366; text-decoration: underline; }
.blog-card-image { aspect-ratio: 3 / 2; object-fit: cover; border-radius: 16px; }
.blog-hero-image { width: 100%; max-height: 640px; object-fit: cover; }
.blog-back { color: inherit; text-decoration: none; }
@media (max-width: 767px) { .blog-body { font-size: 16px; line-height: 26px; padding-bottom: 3rem; } .blog-body h2 { font-size: 24px; line-height: 32px; } }

/* Arrow-fill buttons (after Hyperiux "ArrowFillButton", in plain CSS on the existing markup): a
   circle with an arrow sits at the right; on hover/focus/tap it fills the whole button, the text
   takes the fill's ink colour and the arrow slides out and back in. Colours per variant follow the
   Webflow style guide: --green buttons fill with their own hover colour --primary.
   Classes are doubled so these win over Webflow's `.button-2.space` padding. */
.button-2.button-2, .cop-cta.cop-cta {
  --afb-bg: var(--green); --afb-fill: var(--primary); --afb-ink: var(--black--gray); --afb-arrow: var(--green);
  --afb-size: 1.75em; --afb-gap: .4em;
  --afb-ease: cubic-bezier(.785, .135, .15, .86);
  position: relative; isolation: isolate; overflow: hidden;
  background-color: var(--afb-bg); border-color: var(--afb-bg);
  padding-right: calc(var(--afb-size) + var(--afb-gap) + 1em);
  transition: color .45s var(--afb-ease), border-color .45s var(--afb-ease);
}
.button-2.button-2::before, .cop-cta.cop-cta::before {
  content: ""; position: absolute; z-index: -1; border-radius: 999px; background: var(--afb-fill);
  inset: calc(50% - var(--afb-size) / 2) var(--afb-gap) calc(50% - var(--afb-size) / 2) calc(100% - var(--afb-gap) - var(--afb-size));
  transition: inset .45s var(--afb-ease), border-radius .45s var(--afb-ease);
}
.button-2.button-2::after, .cop-cta.cop-cta::after {
  content: ""; position: absolute; top: 50%; right: var(--afb-gap); width: var(--afb-size); height: var(--afb-size);
  margin-top: calc(var(--afb-size) / -2); background: var(--afb-arrow);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E") center / 60% no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E") center / 60% no-repeat;
  transition: background-color .45s var(--afb-ease);
}
:is(.button-2.button-2, .cop-cta.cop-cta):is(:hover, :focus-visible, :active) {
  color: var(--afb-ink); background-color: var(--afb-bg); border-color: var(--afb-fill);
}
:is(.button-2.button-2, .cop-cta.cop-cta):is(:hover, :focus-visible, :active)::before { inset: 0; border-radius: inherit; }
:is(.button-2.button-2, .cop-cta.cop-cta):is(:hover, :focus-visible, :active)::after { background-color: var(--afb-ink); animation: afb-arrow .45s var(--afb-ease); }
@keyframes afb-arrow {
  0%   { transform: translateX(0) scale(1); }
  45%  { transform: translateX(70%) scale(0); }
  46%  { transform: translateX(-120%) scale(0); }
  100% { transform: translateX(0) scale(1); }
}
/* variants */
.button-2.space.color { --afb-bg: #00b3b7; --afb-arrow: #00b3b7; }
.button-2.new1 { --afb-bg: #5ecfd2; --afb-fill: var(--white); --afb-arrow: #000; --afb-ink: #000; }
.button-2.new { --afb-bg: transparent; --afb-fill: var(--white); border-color: var(--white); }
.button-2.transparent { --afb-bg: var(--white); --afb-fill: var(--green); --afb-arrow: var(--white); --afb-ink: var(--white); }
.cop-cta.cop-cta { --afb-bg: var(--cop-blue); --afb-fill: var(--white); --afb-arrow: var(--cop-blue); --afb-ink: var(--cop-blue); }
.cop-cta.cop-cta:active { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .button-2.button-2, .cop-cta.cop-cta, .button-2.button-2::before, .cop-cta.cop-cta::before, .button-2.button-2::after, .cop-cta.cop-cta::after { transition: none; animation: none; }
}

/* Service anchors (#preventie etc., linked from the mega menu): land below the sticky nav. */
:is(#preventie, #vaccinaties, #ziekte, #tandzorg, #diagnostiek, #sterilisatie, #chirurgie) { scroll-margin-top: 120px; }