/* ============================================================
   Ervaar Breda — Base
   Reset, typografie, basis-elementen. Rustige editorial fundatie.
   ============================================================ */

/* ---- Minimal reset ---- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html {
  -webkit-text-size-adjust: 100%;
  /* Tap-highlight op iOS verbergen, scroll smooth voor anchor-links */
  -webkit-tap-highlight-color: transparent;
}
html:focus-within { scroll-behavior: smooth; }

/* Anchor-targets krijgen offset zodat sticky header er niet overheen valt */
:target,
[id="aanvragen"],
[id="sloep"],
[id="locatie"],
[id="faq"] {
  scroll-margin-top: clamp(80px, 14vw, 130px);
}
/* iOS momentum scroll + smooth painting */
body { -webkit-overflow-scrolling: touch; }
body { min-height: 100vh; line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
img, picture, video, canvas, svg { display: block; max-width: 100%; height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { padding: 0; list-style: none; }
p { text-wrap: pretty; }
h1, h2, h3, h4, h5, h6 { text-wrap: balance; }

/* ---- Body & type base ---- */
body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink);
  background: var(--paper);
  font-weight: var(--fw-body);
}

::selection {
  background: var(--brand-navy);
  color: var(--paper);
}

/* ---- Headings: Montserrat als basis, sierletter (Fraunces) alleen op em-accenten ---- */
.display, .h1, .h2, .h3, .h4,
h1, h2, h3, h4 {
  font-family: var(--font-body);
  color: var(--ink);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
  font-weight: var(--fw-body-bold);
  font-style: normal;
}

.display {
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
}
h1, .h1 { font-size: var(--fs-h1); letter-spacing: var(--ls-display); }
h2, .h2 { font-size: var(--fs-h2); }
h3, .h3 { font-size: var(--fs-h3); }
h4, .h4 { font-size: var(--fs-h4); }

/* Sierletter (Fraunces italic) voor de em-accenten in koppen — kleur via inline style of cascade */
.display em, h1 em, h2 em, h3 em, h4 em,
.display i, h1 i, h2 i, h3 i, h4 i {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--fw-display);
  color: var(--brand-navy);
  letter-spacing: var(--ls-heading);
}

/* ---- Eyebrow / label ---- */
.eyebrow {
  font-family: var(--font-label);
  font-size: var(--fs-label);
  font-weight: var(--fw-body-med);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--ink-soft);
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
}
/* Subtiele enkele golf voor eyebrow — currentColor via SVG-masker */
.eyebrow::before {
  content: "";
  width: 1.75rem;
  height: 0.5rem;
  flex-shrink: 0;
  background: currentColor;
  opacity: 0.6;
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 8' fill='none'><path d='M1 3c5 4 9 4 14 0s9 -1 12 2' stroke='black' stroke-width='1.3' stroke-linecap='round'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 8' fill='none'><path d='M1 3c5 4 9 4 14 0s9 -1 12 2' stroke='black' stroke-width='1.3' stroke-linecap='round'/></svg>");
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-position: center;
          mask-position: center;
}

/* ---- Body text variants ---- */
.lead { font-size: var(--fs-body-lg); line-height: var(--lh-body); color: var(--ink-soft); }
.caption { font-size: var(--fs-caption); color: var(--ink-mute); }

/* ---- Links (inline) ---- */
a.link, .prose a {
  color: var(--ink);
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 100% 1px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  padding-bottom: 2px;
  transition: background-size var(--t-med) var(--ease-out), color var(--t-med) var(--ease-out);
}
a.link:hover, .prose a:hover { color: var(--brand-navy); }

/* Inline text-link met pijl */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--fs-body);
  font-weight: var(--fw-body-med);
  color: var(--ink);
  position: relative;
  transition: color var(--t-med) var(--ease-out), gap var(--t-med) var(--ease-out);
}
.link-arrow::after {
  content: "→";
  display: inline-block;
  transition: transform var(--t-med) var(--ease-out);
}
.link-arrow:hover { color: var(--brand-navy); gap: 0.75rem; }
.link-arrow:hover::after { transform: translateX(3px); }

/* ---- Containers ---- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container-narrow {
  width: 100%;
  max-width: var(--container-narrow);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ---- Sections ---- */
.section { padding-block: var(--block-py); }
.section-lg { padding-block: var(--block-py-lg); }
.section-dark { background: var(--brand-navy); color: var(--paper); }
.section-dark h1, .section-dark h2, .section-dark h3, .section-dark h4 { color: var(--paper); }
.section-dark .eyebrow { color: rgba(246, 241, 232, 0.66); }
.section-dark .lead { color: rgba(246, 241, 232, 0.8); }
.section-soft { background: var(--paper-soft); }

/* ---- Dividers ---- */
.hr {
  border: 0;
  height: 1px;
  background: var(--line);
  margin-block: var(--space-16);
}
.hr-center { width: 3rem; margin-inline: auto; background: var(--ink); opacity: 0.3; }

/* ---- Utilities ---- */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.text-center { text-align: center; }
.flow > * + * { margin-top: 1em; }
.flow-sm > * + * { margin-top: 0.5em; }
.flow-lg > * + * { margin-top: 1.5em; }

/* ---- Reveal-animation base (JS voegt .is-in toe bij IntersectionObserver) ---- */
/* will-change wordt via JS na afloop op 'auto' gezet om GPU-layers vrij te geven */
.reveal {
  opacity: 0;
  transform: translate3d(0, 28px, 0);
  transition: opacity var(--t-reveal) var(--ease-out), transform var(--t-reveal) var(--ease-out);
  will-change: opacity, transform;
  backface-visibility: hidden;
}
.reveal.is-in {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}
/* Smoother variant — langere duration, grotere start-translate */
.reveal--slow {
  transform: translate3d(0, 36px, 0);
  transition-duration: 750ms;
  transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}
/* Stagger via data-delay — compacter zodat scroll niet op GPU blijft hangen */
.reveal[data-delay="1"] { transition-delay: 80ms; }
.reveal[data-delay="2"] { transition-delay: 160ms; }
.reveal[data-delay="3"] { transition-delay: 240ms; }
.reveal[data-delay="4"] { transition-delay: 320ms; }
.reveal[data-delay="5"] { transition-delay: 400ms; }
.reveal[data-delay="6"] { transition-delay: 480ms; }

/* Focus-visible — toegankelijk, subtiel */
:focus-visible {
  outline: 2px solid var(--brand-navy);
  outline-offset: 3px;
  border-radius: 2px;
}