/* ===============================================
Fellenoord 2040 — Placeholder v5
- Logo schaalt proportioneel mee (masthead + footer)
- Bodytekst: desktop 26px, mobiel kleiner
- Extra marge boven/onder de hero-afbeelding
================================================= */
@font-face {
  font-family: 'JaSN';
  src: url('../assets/fonts/JaSN-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root{
  --plum: #4b0f2a;
  --cream: #efe6e1;
  --pink: #f6c3d8;
  --ink: #2b2b2b;

  /* Gutters en kolombreedte */
  --side: clamp(16px, 4vw, 48px);
  --copy-w: 720px;

  /* Typografie */
  --brand: 'JaSN', system-ui, sans-serif;
  --text-size: clamp(17px, 2.1vw, 26px); /* ~26px op desktop, kleiner op mobiel */
}

*{ box-sizing: border-box; }
html, body { height: 100%; }
body{
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--brand);
  font-size: var(--text-size);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Accessibility */
.skip-link{ position:absolute; left:-999px; top:0; background:#fff; padding:.5rem .75rem; border-radius:.5rem; }
.skip-link:focus{ left:.75rem; }

/* Masthead */
.masthead{
  background: var(--plum);
  color: #fff;
  padding: 24px 0 clamp(64px, 10vw, 10px) 0;
}
/* Top logo: proportioneel meeschalen */
.logo-top{
  display:block;
  width: clamp(160px, 22vw, 340px); /* schaalt mee met viewport */
  height: auto;
  margin-left: var(--side);
}
.headline{
  margin: clamp(28px, 6vw, 56px) 0 0 0;
  padding-left: var(--side);
  padding-right: var(--side);
  max-width: 20ch;
  font-weight: 400;
  font-size: clamp(42px, 6vw, 64px);
  line-height: 1.08;
}
.headline .white{ color:#fff; }
.headline .pink{ color: var(--pink); }

/* Content */
.content{ padding: clamp(24px, 4vw, 40px) 0; }
.copy{
  margin-left: var(--side);
  margin-right: var(--side);
  max-width: var(--copy-w);
  text-align: left;
}
.copy p{ margin: 0 0 1em 0; color: var(--plum); }
.copy p + p{ color: var(--ink); }

/* CTA’s */
.cta-row{ display:flex; flex-wrap:wrap; gap:12px; margin-top: 18px; }
.btn{
  display:inline-block; padding:12px 16px; font-weight:400; text-decoration:none;
  border:2px solid transparent; border-radius:0;
}
.btn-primary{ background: var(--plum); color:#fff; }
.btn-secondary{ background: var(--pink); color: var(--plum); }

/* Hero image — schermvullend met marge + extra vertical space */
.hero{
  padding: clamp(36px, 5vw, 84px) 0;  /* méér marge boven/onder */
}
.hero img{
  display:block;
  width: calc(100% - (var(--side) * 2));
  margin-left: var(--side);
  margin-right: var(--side);
  height:auto;
}

/* Footer */
.footer{
  background: var(--pink);
  color: var(--plum);
  padding: clamp(40px, 5vw, 72px) 0 clamp(56px, 7vw, 100px) 0;
  position: relative;
  overflow: hidden;
}
.footer-copy{
  margin-left: var(--side);
  margin-right: var(--side);
  max-width: var(--copy-w);
  text-align: left;
  text-decoration:none;
}
.footer-copy p{ margin: 0 0 .8em 0; }

/* Groot logo footer – proportioneel meeschalen + marges */
.footer-logo-wrap{ margin-top: clamp(20px, 4vw, 40px); }
.logo-footer{
  display:block;
  width: calc(100% - (var(--side) * 2));
  margin-left: var(--side);
  margin-right: var(--side);
  height:auto; /* behoudt aspect ratio */
  max-width: 100%;
  object-fit: contain;
  opacity: .92;
}

/* Extra verfijning voor heel kleine schermen */
@media (max-width: 420px){
  .cta-row .btn{ padding:10px 14px; }
}


/* ===== v7 adjustments ===== */
/* Headline verder naar beneden zoals het ontwerp */
.headline{
  margin-top: clamp(80px, 14vw, 160px);
}

/* Body copy tot 70% breedte, links uitgelijnd */
.copy{
  max-width: min(70%, 960px);
  text-align: left;
}

/* Buttons iets kleiner dan bodytekst */
.btn{ font-size: 0.85em; }

/* Footer-tekst kleiner dan body */
.footer{ font-size: 0.68em; }


/* ===== v8 adjustments ===== */
/* Op mobiel: tekst mag de volledige breedte met marge links/rechts innemen */
@media (max-width: 640px){
  .copy{
    max-width: none;
    width: calc(100% - (var(--side) * 2));
    margin-left: var(--side);
    margin-right: var(--side);
  }
}