/* ═══════════════════════════════════════════
   De nieuwe stijl voor de overige pagina's en blogs.
   Werkt over stijl.css heen, zonder de HTML van de pagina's te veranderen.
   Alles hangt aan body.nk-oud, zodat de homepage en Nu kies ik niet raken.
   Kleuren en nk-variabelen komen uit nieuwe-stijl.css.
═══════════════════════════════════════════ */

body.nk-oud {
  --nk-bruin: #8B6F47; --nk-licht: #BFD8D5; --nk-zee: #6FA6A3; --nk-zand: #E9C3A8;
  --nk-teal-tekst: #EEF4F3; --nk-lijn: #D9CBB4;
  font-weight: 400; color: #2E2634;
  /* de oude groene en roze tinten worden de kleuren van de nieuwe stijl */
  --salie: #3E5C5B; --salie-bg: #E9F0EC; --roos: #9C593F; --roos-bg: #F2EBDD;
}
.nk-oud p:not(.nk-footer p) { color: #3F3646; line-height: 1.8; }
.nk-oud li { color: inherit; }

/* ── Koppen ── */
.nk-oud h1, .nk-oud h2, .nk-oud h3 { font-weight: 400; letter-spacing: normal; color: var(--tekst); }
.nk-oud h1 i, .nk-oud h2 i, .nk-oud h3 i, .nk-oud h1 em, .nk-oud h2 em { font-style: italic; color: var(--aarde); }
.nk-oud .pagina-top.groen h1 i, .nk-oud .pagina-top.roos h1 i { color: var(--aarde); }

/* ── Labels ── */
.nk-oud .sectie-label, .nk-oud .pagina-top .label-pill {
  font-size: 0.8rem; letter-spacing: 0.22em; color: var(--nk-bruin); gap: 0;
}
.nk-oud .sectie-label::before, .nk-oud .pagina-top .label-pill::before { display: none; }
.nk-oud .sectie-label.groen, .nk-oud .sectie-label.roos, .nk-oud .pagina-top.groen .label-pill, .nk-oud .pagina-top.roos .label-pill { color: var(--diepzee); }

/* ── Paginakop ── */
.nk-oud .pagina-top { background: var(--aarde-bg); padding: clamp(8rem, 12vw, 11rem) clamp(20px, 5vw, 72px) clamp(3.5rem, 6vw, 6rem); }
.nk-oud .pagina-top.groen { background: var(--lav-bg); }
.nk-oud .pagina-top h1 { font-size: clamp(2.8rem, 5.6vw, 5rem); line-height: 1.02; }
.nk-oud .pagina-top p { color: #3F3646; font-size: 1.1rem; }
.nk-oud .pagina-top .sectie-binnen { max-width: 760px; }

/* Paginakop met foto: de foto staat in een boog, zoals op de homepage */
.nk-oud .pagina-top.foto { background: var(--aarde-bg); min-height: 0; padding: clamp(92px, 7.5vw, 148px) 0 0; align-items: stretch; }
.nk-oud .pagina-top.foto .pagina-top-foto-vlak {
  aspect-ratio: auto !important; align-self: stretch; display: flex; align-items: flex-end; justify-content: center;
  padding: clamp(24px, 4vw, 56px) clamp(20px, 4vw, 56px) 0;
}
.nk-oud .pagina-top.foto .pagina-top-foto-vlak img {
  position: static !important; width: 100%; max-width: 520px; height: clamp(420px, 46vw, 640px) !important;
  object-fit: cover; object-position: 55% 28% !important; border-radius: 260px 260px 0 0;
}
.nk-oud .pagina-top.foto .sectie-binnen { max-width: none; padding: clamp(2.5rem, 5vw, 5rem) clamp(20px, 5vw, 72px); }
@media (max-width: 960px) {
  .nk-oud .pagina-top.foto { padding-top: 92px; }
  .nk-oud .pagina-top.foto .pagina-top-foto-vlak { padding: 20px 20px 0; }
  .nk-oud .pagina-top.foto .pagina-top-foto-vlak img { height: 400px !important; border-radius: 200px 200px 0 0; }
}

/* ── Secties ── */
.nk-oud .sectie { padding: clamp(64px, 8vw, 120px) clamp(20px, 5vw, 72px); }
.nk-oud .sectie-salie { background: var(--lav-bg); }
.nk-oud .sectie-roos { background: var(--aarde-bg); }
.nk-oud .golf-scheiding { display: none; }

/* ── Knoppen ── */
.nk-oud .knop-aarde, .nk-oud .knop-donker, .nk-oud .knop-paars, .nk-oud .knop-roos, .nk-oud .knop-groen {
  display: inline-flex; align-items: center; justify-content: center; text-align: center;
  background: var(--aarde); color: var(--wit); border: 0; border-radius: 999px;
  padding: 15px 30px; font-size: 1rem; font-weight: 500; letter-spacing: 0; transition: background 0.25s, transform 0.25s;
}
.nk-oud .knop-aarde:hover, .nk-oud .knop-donker:hover, .nk-oud .knop-paars:hover, .nk-oud .knop-roos:hover, .nk-oud .knop-groen:hover { background: var(--diepzee); color: #fff; transform: translateY(-2px); }
.nk-oud .knop-lijn {
  display: inline-flex; align-items: center; justify-content: center; text-align: center;
  background: transparent; color: var(--diepzee); border: 2px solid var(--diepzee); border-radius: 999px;
  padding: 13px 28px; font-size: 1rem; font-weight: 500; letter-spacing: 0; transition: background 0.25s, color 0.25s;
}
.nk-oud .knop-lijn:hover { background: var(--diepzee); color: var(--wit); border-color: var(--diepzee); }
.nk-oud .knop-tekst { color: var(--diepzee); font-size: 1rem; letter-spacing: 0; text-decoration: underline; text-underline-offset: 4px; }
.nk-oud .nav-cta, .nk-oud .nav-cta.aarde { background: var(--aarde) !important; color: #fff !important; }
.nk-oud .nav-cta:hover { background: var(--diepzee) !important; }
.nk-oud .cta-knop-groep { gap: 14px; }

/* ── Foto's: ronde vormen, geen offset-vlak ── */
.nk-oud .foto-organisch-wrap::before { display: none; }
.nk-oud .foto-organisch { border-radius: 32px 160px 32px 32px; }
.nk-oud .foto-organisch-wrap[style*="3/4"] .foto-organisch, .nk-oud .foto-organisch-wrap[style*="4/5"] .foto-organisch { border-radius: 220px 220px 32px 32px; }
.nk-oud .foto-organisch-wrap[style*="1/1"] .foto-organisch { border-radius: 50%; }
.nk-oud .foto-organisch-wrap[style*="16/9"] .foto-organisch { border-radius: 32px 120px 32px 32px; }
.nk-oud .foto-blok { border-radius: 220px 220px 32px 32px; }
.nk-oud .dienst-kaart img { border-radius: 32px 160px 32px 32px; }
.nk-oud .quote-foto { border-radius: 24px; }

/* ── Citaten ── */
.nk-oud .grote-quote { background: var(--diepzee); margin: clamp(20px, 4vw, 56px) clamp(20px, 5vw, 72px); border-radius: 48px; padding: clamp(40px, 6vw, 88px) clamp(24px, 5vw, 72px); }
.nk-oud .grote-quote.groen, .nk-oud .grote-quote.roos { background: var(--diepzee); }
.nk-oud .grote-quote blockquote { color: var(--wit); font-weight: 400; }
.nk-oud .grote-quote cite, .nk-oud .grote-quote.groen cite, .nk-oud .grote-quote.roos cite { color: var(--nk-zand); letter-spacing: 0.2em; }
.nk-oud blockquote { border-color: var(--aarde); }
.nk-oud .t-kaart { border-left: 0; background: var(--aarde-bg); border-radius: 40px; padding: 38px 40px; }
.nk-oud .t-kaart:nth-child(even) { background: var(--lav-bg); }
.nk-oud .t-kaart q { color: var(--tekst); font-weight: 400; font-size: 1.35rem; line-height: 1.5; }
.nk-oud .t-naam { color: var(--diepzee); border-top: 0; padding-top: 0; font-size: 0.8rem; }
.nk-oud .ster { background: var(--aarde); }

/* ── Call-to-action ── */
.nk-oud .cta-blok { background: var(--wit); border-radius: 48px; padding: clamp(36px, 5vw, 64px); max-width: 760px; }
.nk-oud .cta-blok h2 { font-size: clamp(2.2rem, 4vw, 3.4rem); }
.nk-oud .sectie-wit .cta-blok { background: var(--aarde-bg); }

/* ── Lijsten, prijs, stappen ── */
.nk-oud .kenmerken li { color: #3F3646; }
.nk-oud .kenmerken li::before { content: ''; width: 10px; height: 10px; border-radius: 50%; background: var(--aarde); margin-top: 0.55rem; font-size: 0; }
.nk-oud .kenmerken li:nth-child(even)::before { background: var(--diepzee); }
.nk-oud .prijs-blok { background: var(--wit); border-radius: 40px; border-top: 0 !important; padding: clamp(28px, 4vw, 44px); box-shadow: 0 2px 0 #E2D6C2; }
.nk-oud .prijs-bedrag, .nk-oud .prijs-blok .prijs-bedrag { color: var(--tekst) !important; font-weight: 400; font-size: 4rem; }
.nk-oud .prijs-label { color: var(--diepzee); font-size: 0.8rem; }
.nk-oud .stap { border-color: var(--nk-lijn); }
.nk-oud .stap-nr, .nk-oud .stap.groen .stap-nr, .nk-oud .stap.roos .stap-nr { color: var(--aarde); font-weight: 400; }

/* ── Veelgestelde vragen ── */
.nk-oud .faq-item { background: var(--aarde-bg); border: 0; border-radius: 40px; margin-bottom: 14px; overflow: hidden; }
.nk-oud .sectie-aarde .faq-item { background: var(--wit); }
.nk-oud .faq-vraag { padding: 22px 34px; font-size: 1.45rem; line-height: 1.25; font-weight: 400; }
.nk-oud .faq-vraag::after { font-size: 1.9rem; }
.nk-oud .faq-antwoord { padding: 0 34px 26px; font-size: 1.02rem; line-height: 1.8; color: #3F3646; }

/* ── Formulieren ── */
.nk-oud .veld label { color: var(--nk-bruin); font-size: 0.78rem; }
.nk-oud .veld input, .nk-oud .veld textarea, .nk-oud .veld select { background: var(--lav-bg); border-radius: 24px; padding: 0.95rem 1.3rem; font-weight: 400; }
.nk-oud .veld input:focus, .nk-oud .veld textarea:focus, .nk-oud .veld select:focus { border-color: var(--diepzee); }
.nk-oud .veld textarea { border-radius: 28px; }
.nk-oud input[type="text"], .nk-oud input[type="email"], .nk-oud input[type="tel"], .nk-oud textarea { border-radius: 24px; }
.nk-oud button[type="submit"] { border-radius: 999px; }

/* ── Contact en overig ── */
.nk-oud .contact-gegevens a, .nk-oud .contact-gegevens span { color: #3F3646; font-size: 1rem; }
.nk-oud .contact-gegevens a:hover { color: var(--aarde); }
.nk-oud .dienst-kaart { background: var(--wit); border-radius: 48px; padding: clamp(24px, 3vw, 40px); }
.nk-oud .dienst-kaart:not(:last-child) { border-bottom: 0; padding-bottom: clamp(24px, 3vw, 40px); margin-bottom: 24px; }
.nk-oud .weetje { border-radius: 32px; }
.nk-oud a[style*="color:var(--aarde)"] { color: var(--aarde); }

/* kaarten met een kleine inline-rondng worden zachter en ronder */
.nk-oud div[style*="border-radius:16px"], .nk-oud div[style*="border-radius:20px"], .nk-oud section[style*="border-radius:16px"] { border-radius: 36px !important; }

/* ── Blog: Mail van Wenda-kaart onderaan ── */
.nk-blog-mail { background: var(--lav-bg); padding: clamp(40px, 6vw, 80px) clamp(20px, 5vw, 72px); }
.nk-blog-mail .nk-nieuwsbrief { max-width: 720px; margin: 0 auto; }

/* ── Mobiel ── */
@media (max-width: 700px) {
  .nk-oud .grote-quote { border-radius: 32px; }
  .nk-oud .cta-blok { border-radius: 36px; }
  .nk-oud .faq-item, .nk-oud .t-kaart, .nk-oud .prijs-blok, .nk-oud .dienst-kaart { border-radius: 32px; }
  .nk-oud .faq-vraag { padding: 18px 24px; font-size: 1.25rem; }
  .nk-oud .faq-antwoord { padding: 0 24px 22px; }
  .nk-oud .t-kaart { padding: 30px 28px; }
  .nk-oud .foto-organisch { border-radius: 28px 120px 28px 28px; }
  .nk-oud .foto-organisch-wrap[style*="3/4"] .foto-organisch, .nk-oud .foto-organisch-wrap[style*="4/5"] .foto-organisch { border-radius: 160px 160px 28px 28px; }
}