/* ====== Fonts (lokale TTF, pad is relatief vanaf /styles/) ====== */
@font-face {
  font-family: "Inter";
  src: url("../fonts/Inter-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/Inter-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ====== CSS Reset (licht) ====== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; color: #0f172a; background: #f5f7f6; line-height: 1.6; }

img { display: block; max-width: 100%; height: auto; border: 0; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }

.visually-hidden { position: absolute !important; height: 1px; width: 1px; overflow: hidden; clip: rect(1px,1px,1px,1px); white-space: nowrap; }
.skip-link {
  position: absolute; left: -9999px; top: auto;
}
.skip-link:focus {
  left: 1rem; top: 1rem; z-index: 10000; background: #fff; color: #111; padding: .5rem .75rem; border-radius: .5rem; box-shadow: 0 6px 20px rgba(0,0,0,.15);
}

/* ====== Layout helpers ====== */
.wrap { width: min(1200px, 92vw); margin-inline: auto; }
.page-title { position: absolute; left: -9999px; } /* h1 visueel verbergen, semantisch behouden */

/* ====== Header (fixed) ====== */
.site-header {
  position: sticky; top: 0; z-index: 9990;
  backdrop-filter: blur(10px);
  background: rgba(245, 247, 246, .7);
  border-bottom: 1px solid rgba(15, 23, 42, .08);
}
.site-header .wrap {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .75rem 1rem;
}
.brand { font-weight: 700; letter-spacing: .3px; }
.main-nav ul { display: flex; gap: 1rem; }
.main-nav a { padding: .4rem .7rem; border-radius: .6rem; transition: transform .2s ease, background-color .2s ease; }
.main-nav a:hover { background: rgba(15, 23, 42, .06); transform: translateY(-1px); }
.main-nav a.is-active { background: rgba(15, 23, 42, .12); }

/* Burger */
.nav-toggle { display: none; background: transparent; border: 0; cursor: pointer; padding: .4rem; }
.nav-toggle .bar { display: block; width: 22px; height: 2px; background: #0f172a; margin: 4px 0; border-radius: 2px; transition: transform .2s ease; }
.nav-drawer { background: #f5f7f6; border-bottom: 1px solid rgba(15,23,42,.08); }
.nav-drawer ul { padding: .75rem 1rem; display: grid; gap: .5rem; }

/* ====== Secties ====== */
.section { padding: clamp(2rem, 4vw, 4rem) 0; }
.section-head { width: min(900px, 92vw); margin: 0 auto 1rem; }
.section-title { font-size: clamp(1.4rem, 3.2vw, 2rem); line-height: 1.15; margin: 0 0 .25rem 0; }
.section-sub { color: #334155; max-width: 65ch; }

/* ====== Footer ====== */
.site-footer { border-top: 1px solid rgba(15, 23, 42, .08); padding: 2rem 0; margin-top: 3rem; color: #334155; }
.site-footer .foot-note { opacity: .8; font-size: .95rem; }

/* ====== Reveal-on-scroll basis ====== */
.reveal-on-scroll { opacity: 0; transform: translateY(12px); transition: opacity .6s ease, transform .6s ease; }
.reveal-on-scroll.in-view { opacity: 1; transform: translateY(0); }

/* ====== Media queries (mobiel eerst) ====== */
img { max-width: 100%; height: auto; }

/* Beeldbreedte: nooit groter dan 350px */
img[loading="lazy"] { max-width: 350px; width: 100%; }

/* >= 640px */
@media (min-width: 640px) {
  .main-nav ul { gap: 1.2rem; }
}

/* < 880px: toon burger, verberg desktopmenu */
@media (max-width: 879px) {
  .main-nav { display: none; }
  .nav-toggle { display: inline-block; }
}

/* >= 880px: sluit drawer */
@media (min-width: 880px) {
  .nav-drawer { display: none !important; }
}
/* Footer legal links */
.legal-nav ul {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin: .5rem 0 0 0;
}
.legal-nav a {
  text-decoration: none;
  border-bottom: 1px dashed rgba(15,23,42,.3);
  padding-bottom: 1px;
  transition: color .2s ease, border-color .2s ease;
}
.legal-nav a:hover {
  color: #0f172a;
  border-color: rgba(15,23,42,.6);
}
/* Высота хедера под разные экраны */
:root { --header-h: 64px; }
@media (max-width: 879px) {
  :root { --header-h: 56px; }
}

/* ФИКСИРОВАННЫЙ ХЕДЕР ДЛЯ ВСЕХ СТРАНИЦ */
.site-header{
  position: fixed;         /* было: sticky */
  top: 0; left: 0; right: 0;
  z-index: 9990;
  backdrop-filter: blur(10px);
  background: rgba(245,247,246,.7);
  border-bottom: 1px solid rgba(15,23,42,.08);
}
.site-header .wrap{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:.75rem 1rem;
}

/* Отступ, чтобы фиксированный хедер не накрывал контент */
.site-main{ padding-top: var(--header-h); }

/* Мобильный выдвижной меню-ящик — под шапкой */
.nav-drawer{
  position: fixed;
  top: var(--header-h);
  left: 0; right: 0;
  z-index: 9980;
  background:#f5f7f6;
  border-bottom:1px solid rgba(15,23,42,.08);
}
@media (min-width: 880px){
  .nav-drawer{ display:none !important; position: static; top: auto; }
}