/* ================= Canonieke stijl, gelijk op elke pagina =================
   Staat bewust als laatste blok zodat het niet uitmaakt of een pagina zijn
   opmaak uit een eigen <style> haalt of uit css/entell.css.               */

/* Zelfgehost, was https://fonts.googleapis.com/css2?family=Inter+Tight.
   Alleen de latin-subset: geen enkel teken op de site valt in latin-ext.
   Staat hier omdat canoniek.css de enige stylesheet is die alle acht de
   pagina's laden. De preload in de head haalt hem al op voor deze regel
   gelezen is. */
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/fonts/inter-tight-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---- meldingsbalk ---- */
.announce { background: var(--purple-night); color: var(--white); font-size: .85rem; text-align: center; padding: 9px 16px; }
.announce p { margin: 0; }
.announce a { color: var(--lilac); }

/* ---- navigatiebalk ---- */
.nav { position: fixed; top: var(--announce-h, 50px); left: 0; right: 0; z-index: 50; transition: top .3s ease; }
.nav.is-scrolled { top: 12px; }
.nav__bar { min-height: 65px; padding: 9px 20px; border-radius: 999px; }
.nav.is-scrolled .nav__bar { padding: 9px 20px; }
.nav__logo { width: 109px; height: 30px; }
@media (min-width: 1101px) {
  /* Alleen op de brede balk. Zonder mediacontext wonnen deze drie ook van het
     uitgeklapte mobiele menu, dat juist gap 0 en gestrekte items wil. */
  .nav__links { gap: 26px; align-items: center; }
  .nav__links > li { border-bottom: 0; padding: 0; align-self: center; }
  .nav__links a:not(.btn) { padding: 0 !important; line-height: 1.2 !important; }
}

/* ---- knoppen: één ontwerp op de hele site ---- */
.btn {
  position: relative;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 26px; border-radius: 999px;
  font: 560 1rem/1 var(--font); letter-spacing: -.01em; text-decoration: none;
  border: 1.5px solid transparent; cursor: pointer;
  transition: transform .18s cubic-bezier(.2,.9,.3,1.1), background .18s ease,
              border-color .18s ease, box-shadow .18s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); transition-duration: .06s; }
.btn--primary { background: var(--lilac); color: var(--ink); box-shadow: 0 6px 16px -10px rgba(84,61,125,.5); }
.btn--primary:hover { background: #B294FF; box-shadow: 0 14px 28px -14px rgba(84,61,125,.65); }
/* Zonder deze regel is de ghost-knop randloos: .btn hierboven zet de rand op
   transparent, en die staat later in de cascade dan .btn--ghost in
   app-gedeeld.css. Dan leest het als een ingesprongen stuk tekst en niet
   als een knop. Op 69 plekken in de site. */
.btn--ghost { border-color: rgba(84, 61, 125, .3); color: var(--ink); background: transparent; }
.btn--ghost:hover { border-color: var(--purple); background: rgba(84, 61, 125, .05); box-shadow: 0 10px 22px -16px rgba(27,20,48,.4); }
.btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--white), 0 0 0 5.5px var(--purple); }

/* pijl schuift weg, tweede komt binnen */
.btn--pijl { overflow: hidden; padding-right: 48px !important; }
.btn--pijl::before, .btn--pijl::after {
  content: ""; position: absolute; right: 22px; top: 50%;
  width: 15px; height: 15px; margin-top: -7.5px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;
  transition: transform .32s cubic-bezier(.4,0,.2,1), opacity .22s ease;
}
.btn--pijl::after { transform: translateX(-26px); opacity: 0; }
.btn--pijl:hover::before { transform: translateX(26px); opacity: 0; }
.btn--pijl:hover::after { transform: translateX(0); opacity: 1; }
.btn--wa.btn--pijl { padding-right: 48px; }


/* nav-knop en balkhoogte canoniek, ongeacht welke pagina-eigen regels er zijn */
.nav .btn { padding: 11px 22px !important; font-size: .98rem !important; line-height: 1.2 !important; }
.nav .btn--pijl { padding-right: 46px !important; }
.nav__bar { min-height: 65px !important; height: 65px; }
.nav .btn { align-self: center !important; height: 43px !important; }

/* ---- footer ---- */
/* Staat sinds de verhuizing in Footer.astro: dat component rendert de markup en
   is nu de enige eigenaar van deze opmaak. */

@media (prefers-reduced-motion: reduce) {
  .btn, .btn--pijl::before, .btn--pijl::after { transition: none; }
  .btn:hover { transform: none; }
}

/* entell-header, verplaatst uit de 15 pagina-blokken */
.hero.on-dark { padding-block: clamp(46px, 4.4vw, 60px) clamp(22px, 2.4vw, 30px) !important; }
.hero.on-dark + .section { padding-top: clamp(48px, 5vw, 64px) !important; }
.hero.on-dark + .section > .wrap > :first-child { margin-top: 0 !important; }
.hero.on-dark + .section h2 { margin-top: 0 !important; }