/* ==========================================================================
   Poelstraat 38 — Oostkamp
   Basisstijlen, hairline-rust en scroll-reveal (.reveal / .is-visible)
   ========================================================================== */

html {
  scroll-behavior: smooth;
  scroll-padding-top: 5.5rem;
  -webkit-text-size-adjust: 100%;
}

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Fraunces: zachte, warme optische maat voor koppen en cijfers */
.font-display {
  font-optical-sizing: auto;
  letter-spacing: -0.015em;
}

/* Cijfers netjes onder elkaar uitlijnen in de prijsband */
.tabular {
  font-variant-numeric: tabular-nums;
}

/* Materiaal-iconen iets compacter zodat ze in de tekstlijn passen */
.material-symbols-outlined {
  font-size: 1.25em;
  line-height: 1;
  vertical-align: -0.2em;
}

/* --------------------------------------------------------------------------
   Scroll-reveal — verplichte conventie: .reveal (verborgen) + .is-visible
   -------------------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s cubic-bezier(0.22, 0.61, 0.36, 1),
              transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: opacity, transform;
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

.reveal-delay-1 { transition-delay: 0.08s; }
.reveal-delay-2 { transition-delay: 0.16s; }
.reveal-delay-3 { transition-delay: 0.24s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* --------------------------------------------------------------------------
   Fotogalerij — platte thumbnail-links in een rustig raster
   -------------------------------------------------------------------------- */
figure.gallery img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* --------------------------------------------------------------------------
   Toetsenbordfocus zonder de rustige look te breken
   -------------------------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
summary:focus-visible {
  outline: 2px solid #2E6BA4;
  outline-offset: 3px;
  border-radius: 2px;
}

/* --------------------------------------------------------------------------
   Selectie in de merkkleur
   -------------------------------------------------------------------------- */
::selection {
  background-color: #D9EAFB;
  color: #1D4468;
}

/* Sitekiln: icons stay ligatures inside uppercase or letter-spaced text */
.material-symbols-outlined{font-family:'Material Symbols Outlined' !important;font-weight:normal;font-style:normal;text-transform:none !important;letter-spacing:normal !important;text-decoration:none;font-feature-settings:'liga';-webkit-font-feature-settings:'liga';white-space:nowrap;direction:ltr;}