/* Nav-zichtbaarheid staat in assets/site.css (één grens op 1024px).
   De oude regels hier stonden op 900px en lieten tussen 901 en 1023px
   geen enkele navigatie zien. */

/* Sitewide CTA button — apply .btn-stripe on every call-to-action. */

:root {
  --ink: #24282A;
  --navy: #24282A;
  --hydro: #ffffff;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --stripes: repeating-linear-gradient(-45deg, var(--navy) 0 8px, var(--hydro) 8px 16px);
}

.btn-stripe {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: 'Ciutadella', 'Oswald', sans-serif;
  font-weight: 600;
  font-size: 0.88rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--hydro);
  color: var(--ink);
  padding: 0.7rem 1.4rem 0.7rem 1.15rem;
  border: 2px solid var(--ink);
  border-radius: 0;
  box-shadow: 4px 4px 0 var(--ink);
  cursor: pointer;
  text-decoration: none;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}

.btn-stripe::after {
  content: "";
  width: 16px;
  align-self: stretch;
  margin: -0.7rem -1.4rem -0.7rem 0;
  background: var(--stripes);
  background-size: 23px 23px;
  border-left: 2px solid var(--ink);
  transition: background-position .5s var(--ease);
}

.btn-stripe,
.btn-stripe:hover,
.btn-stripe:focus,
.btn-stripe:active,
.btn-stripe:visited        { color: var(--ink); }
.btn-stripe:hover          { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 var(--ink); }
.btn-stripe:hover::after   { background-position: 23px 0; }
.btn-stripe:active         { transform: translate(2px, 2px);   box-shadow: 1px 1px 0 var(--ink); }

.btn-stripe.ghost,
.btn-stripe.ghost:hover,
.btn-stripe.ghost:focus,
.btn-stripe.ghost:active,
.btn-stripe.ghost:visited  { color: #fff; }
.btn-stripe.ghost          { background: transparent; border-color: #fff;
                             box-shadow: 4px 4px 0 rgba(255,255,255,.35); }
.btn-stripe.ghost:hover    { box-shadow: 7px 7px 0 rgba(255,255,255,.35); }
.btn-stripe.ghost::after   { border-left-color: #fff; }

.btn-stripe.dark,
.btn-stripe.dark:hover,
.btn-stripe.dark:focus,
.btn-stripe.dark:active,
.btn-stripe.dark:visited   { color: #fff; }
.btn-stripe.dark           { background: var(--ink); border-color: var(--ink);
                             box-shadow: 4px 4px 0 var(--hydro); }
.btn-stripe.dark:hover     { box-shadow: 7px 7px 0 var(--hydro); }

/* Full-width CTA (form submit): stripe pinned to the right edge, label optically centred. */
.btn-stripe.full {
  width: 100%;
  justify-content: center;
  padding: 0.7rem calc(1.15rem + 16px) 0.7rem 1.15rem;
}
.btn-stripe.full::after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 16px;
  margin: 0;
  background-size: 23px 23px;
}

.btn-stripe:focus-visible { outline: 3px solid #24282A; outline-offset: 4px; }

@media (prefers-reduced-motion: reduce) {
  .btn-stripe, .btn-stripe::after { transition-duration: .01ms; }
}

/* Underlined arrow link — "MEER REALISATIES →". Text/border stay dark; the arrow slides on hover. */
a[data-ba-ghost],
a[data-ba-ghost]:hover,
a[data-ba-ghost]:focus,
a[data-ba-ghost]:visited { color: var(--ink); border-bottom-color: var(--ink) !important; }
a[data-ba-ghost] svg { transition: transform .35s var(--ease); }
a[data-ba-ghost]:hover svg { transform: translateX(6px); }

/* Underlined dropdown toggle — "ONDERDELEN ▼". Text stays dark; underline thickens/offsets on hover. */
button[data-ba-toggle],
button[data-ba-toggle]:hover,
button[data-ba-toggle]:focus { color: var(--ink) !important; }
button[data-ba-toggle] > span:first-child {
  text-decoration: none !important;
  padding-bottom: 4px;
  background-image: linear-gradient(var(--ink), var(--ink));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 2px;
  transition: background-size .35s var(--ease), background-position .35s var(--ease);
}
button[data-ba-toggle]:hover > span:first-child {
  background-size: 100% 3px;
  background-position: 4px 100%;
}
button[data-ba-toggle] > span:last-child {
  transition: transform .3s var(--ease);
}
button[data-ba-toggle]:hover > span:last-child {
  transform: translateY(2px);
}

@media (prefers-reduced-motion: reduce) {
  a[data-ba-ghost] svg,
  button[data-ba-toggle] > span:first-child { transition-duration: .01ms; }
}