/* ===========================================================
   De 7 Seizoenen van Rouw — stijl
   Palet & sfeer geïnspireerd op de boekcover en de fotografie.
   =========================================================== */

:root {
  /* Achtergronden */
  --cream:        #FAF3E4;
  --cream-deep:   #F4EAD5;
  --peach:        #F3D9C0;
  --sky:          #BCD3DE;

  /* Seizoenstinten */
  --spring:       #E3B7C8;
  --summer:       #9CB07F;
  --autumn:       #D6A35C;
  --winter:       #DCE3E8;

  /* Tekst & accent */
  --ink:          #4A3526;
  --ink-soft:     #6B5644;
  --gold:         #C9962B;
  --gold-deep:    #B07F1E;
  --wine:         #8C3B45;

  --maxw:         1120px;
  --radius:       18px;
  --shadow:       0 18px 50px rgba(74, 53, 38, 0.16);
  --shadow-soft:  0 8px 30px rgba(74, 53, 38, 0.10);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; scroll-padding-top: 80px; }

body {
  font-family: "Nunito Sans", system-ui, sans-serif;
  color: var(--ink);
  background: var(--cream);
  line-height: 1.75;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

.container { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }

h1, h2, h3 { font-family: "Cormorant Garamond", Georgia, serif; font-weight: 600; line-height: 1.1; }

a { color: var(--gold-deep); text-decoration: none; transition: color .2s; }
a:hover { color: var(--ink); }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ===== Knoppen ===== */
.btn {
  display: inline-block;
  padding: 14px 32px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: .02em;
  cursor: pointer;
  border: 2px solid transparent;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
}
.btn--primary {
  background: var(--gold);
  color: #fff;
  box-shadow: var(--shadow-soft);
}
.btn--primary:hover {
  background: var(--gold-deep);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}
.btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--gold);
}
.btn--ghost:hover {
  background: var(--gold);
  color: #fff;
  transform: translateY(-2px);
}
.btn--lg {
  padding: 18px 40px;
  font-size: 1.15rem;
  box-shadow: var(--shadow);
}
@keyframes cta-pulse {
  0%, 100% { box-shadow: 0 10px 24px rgba(201, 150, 43, 0.35); }
  50%      { box-shadow: 0 12px 40px rgba(201, 150, 43, 0.7); }
}
.btn--pulse { animation: cta-pulse 2.4s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .btn--pulse { animation: none; } }

/* Kleurvarianten: blauw van Tine's baret, groen van gras en natuur */
.btn--blue {
  background: #5c80ab;
  color: #fff;
  box-shadow: 0 10px 24px rgba(92, 128, 171, 0.4);
}
.btn--blue:hover {
  background: #4c6c93;
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(92, 128, 171, 0.55);
}
.btn--green {
  background: #5b7b4a;
  color: #fff;
  box-shadow: 0 10px 24px rgba(91, 123, 74, 0.4);
}
.btn--green:hover {
  background: #4a6639;
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(91, 123, 74, 0.55);
}
.btn--navy {
  background: #2f3d5c;
  color: #fff;
  box-shadow: 0 10px 24px rgba(47, 61, 92, 0.4);
}
.btn--navy:hover {
  background: #26324c;
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(47, 61, 92, 0.55);
}

/* Bestelknop onderaan een sectie, gecentreerd */
.section-cta { text-align: center; margin-top: 44px; }

/* ===== Navigatie ===== */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(250, 243, 228, 0.88);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(74, 53, 38, 0.08);
}
.nav__inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 16px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.nav__brand {
  font-family: "Cormorant Garamond", serif;
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
}
.nav__links { display: flex; gap: 24px; align-items: center; }
.nav__links a { color: var(--ink-soft); font-size: .95rem; font-weight: 600; }
.nav__links a:hover { color: var(--gold-deep); }
.nav__links a.nav__cta {
  color: #fff;
  background: var(--gold);
  padding: 9px 20px;
  border-radius: 999px;
  box-shadow: 0 4px 14px rgba(201, 150, 43, 0.4);
  transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
}
.nav__links a.nav__cta:hover {
  color: #fff;
  background: var(--gold-deep);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(201, 150, 43, 0.5);
}

.nav__lang { display: flex; gap: 4px; align-items: center; }
.nav__lang a {
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding: 4px 8px;
  border-radius: 6px;
}
.nav__lang a:hover { color: var(--gold-deep); }
.nav__lang a.is-active {
  background: var(--peach);
  color: var(--ink);
}

.nav__toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 6px;
}
.nav__toggle span {
  width: 26px; height: 2px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform .3s, opacity .3s;
}

/* ===== Hero ===== */
.hero {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(188, 211, 222, 0.55) 0%, rgba(243, 217, 192, 0.55) 55%, var(--cream) 100%);
  padding: 80px 0 100px;
}
.hero__inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 56px;
  align-items: center;
}
.hero__eyebrow {
  text-transform: uppercase;
  letter-spacing: .22em;
  font-size: .78rem;
  font-weight: 700;
  color: var(--gold-deep);
  margin-bottom: 18px;
}
.hero__title {
  font-size: clamp(2.6rem, 6vw, 4.2rem);
  color: var(--ink);
  margin-bottom: 22px;
}
.hero__subtitle {
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-size: clamp(1.2rem, 2.2vw, 1.5rem);
  color: var(--ink-soft);
  margin-bottom: 32px;
  max-width: 48ch;
}
.hero__guide {
  margin-top: 18px;
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-size: 1.25rem;
  color: var(--gold-deep);
}

.hero__cover { display: flex; justify-content: center; }
.hero__cover img {
  width: 100%;
  max-width: 380px;
  border-radius: 10px;
  filter: drop-shadow(0 26px 44px rgba(74, 53, 38, 0.32));
  transform: rotate(1.5deg);
  transition: transform .5s ease;
}
.hero__cover img:hover { transform: rotate(0deg) translateY(-6px); }

/* ===== Generieke secties ===== */
.section { padding: 90px 0; }
.section__title {
  font-size: clamp(2rem, 4vw, 2.8rem);
  color: var(--ink);
  margin-bottom: 28px;
  text-align: center;
}
.section__title--left { text-align: left; }
.section__intro {
  text-align: center;
  max-width: 60ch;
  margin: 0 auto 48px;
  color: var(--ink-soft);
  font-size: 1.1rem;
}
.section__note {
  text-align: center;
  margin-top: 40px;
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-size: 1.3rem;
  color: var(--ink);
}
.prose { max-width: 60ch; margin: 0 auto; }
.prose p { margin-bottom: 20px; font-size: 1.12rem; }

/* ===== Split-layout (tekst + beeld) ===== */
.split {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: 56px;
  align-items: center;
}
.split--reverse .split__media { order: 2; }
.split__media { margin: 0; }
.split__media img {
  width: 100%;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  display: block;
}
.split__text .lead {
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-size: 1.4rem;
  color: var(--gold-deep);
  margin-bottom: 18px;
}
.split__text p { margin-bottom: 18px; font-size: 1.08rem; }
.split__text blockquote {
  border-left: 4px solid var(--gold);
  padding: 6px 0 6px 22px;
  margin: 26px 0 6px;
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-size: 1.5rem;
  color: var(--ink);
}

.section--book { background: var(--cream); }
.section--gift { background: var(--cream-deep); }
.section--why  { background: var(--cream); }

/* ===== Voor wie ===== */
.section--audience { background: var(--peach); }
.audience { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }
.audience__col {
  background: rgba(255, 255, 255, 0.55);
  border-radius: var(--radius);
  padding: 36px 32px;
  box-shadow: var(--shadow-soft);
}
.checklist, .crosslist { list-style: none; }
.checklist li, .crosslist li {
  position: relative;
  padding-left: 32px;
  margin-bottom: 16px;
  font-size: 1.02rem;
  color: var(--ink-soft);
}
.checklist li::before {
  content: "❧";
  position: absolute; left: 0; top: 0;
  color: var(--summer);
  font-size: 1.1rem;
}
.crosslist li::before {
  content: "—";
  position: absolute; left: 0; top: 0;
  color: var(--wine);
  font-weight: 700;
}
.audience__soft {
  margin-top: 22px;
  font-style: italic;
  color: var(--ink);
}
.audience__quote {
  margin-top: 18px;
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-size: 1.35rem;
  color: var(--wine);
}

/* ===== Sfeerbanner ===== */
.banner {
  position: relative;
  min-height: 56vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background:
    linear-gradient(rgba(28, 40, 50, 0.42), rgba(28, 40, 50, 0.42)),
    url("../assets/images/tine-boombrug.jpg") center/cover no-repeat;
  background-attachment: fixed;
}
.banner--light {
  background:
    linear-gradient(rgba(28, 40, 50, 0.42), rgba(28, 40, 50, 0.42)),
    url("../assets/images/tine-licht.jpg") center 30%/cover no-repeat;
  background-attachment: fixed;
}
.banner__text {
  color: #fff;
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-size: clamp(1.6rem, 4vw, 2.8rem);
  line-height: 1.4;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.5);
  max-width: 24ch;
  padding: 0 24px;
}

/* ===== Auteur ===== */
.section--author { background: var(--peach); }
.author__photo figcaption {
  margin-top: 14px;
  text-align: center;
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-size: 1.1rem;
  color: var(--ink);
}
.author__photo figcaption span { font-style: normal; color: var(--ink-soft); }
.author__sign { margin-top: 24px; }
.signature {
  font-family: "Dancing Script", cursive;
  font-size: 2.4rem;
  color: var(--gold-deep);
  line-height: 1;
}

/* ===== De seizoenen ===== */
.section--seasons { background: var(--cream-deep); }
.seasons {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 22px;
}
.season {
  position: relative;
  background: #fff;
  border-radius: var(--radius);
  padding: 32px 26px 28px;
  box-shadow: var(--shadow-soft);
  border-top: 5px solid var(--summer);
  transition: transform .25s ease, box-shadow .25s ease;
}
.season:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.season__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--cream-deep);
  color: var(--ink);
  font-family: "Cormorant Garamond", serif;
  font-size: 1.4rem;
  font-weight: 600;
  margin-bottom: 16px;
}
.season h3 { font-size: 1.5rem; margin-bottom: 10px; color: var(--ink); }
.season p { font-size: .98rem; color: var(--ink-soft); }

.season--1 { border-top-color: #6B7C88; }    /* De Inslag — koel, hard */
.season--2 { border-top-color: var(--sky); }  /* Overprikkelde pijn */
.season--3 { border-top-color: var(--wine); } /* Opgespannen vuur */
.season--4 { border-top-color: #9FB8C4; }     /* Rauwe eenzaamheid */
.season--5 { border-top-color: var(--spring); } /* Voorzichtige beweging */
.season--6 { border-top-color: var(--summer); } /* Opnieuw durven openen */
.season--7 { border-top-color: var(--gold); }   /* De vuurtoren in de mist */

/* Tussenseizoen — het kantelpunt tussen neergang en terugkeer */
.season-turn {
  margin: 28px auto;
  max-width: 720px;
  text-align: center;
  padding: 34px 32px;
  border-radius: var(--radius);
  background: linear-gradient(135deg, rgba(201, 150, 43, 0.14), rgba(227, 183, 200, 0.18));
  border: 1px dashed rgba(176, 127, 30, 0.55);
  box-shadow: var(--shadow-soft);
}
.season-turn__label {
  display: inline-block;
  text-transform: uppercase;
  letter-spacing: .2em;
  font-size: .72rem;
  font-weight: 700;
  color: var(--gold-deep);
  margin-bottom: 12px;
}
.season-turn h3 { font-size: 1.7rem; color: var(--ink); margin-bottom: 10px; }
.season-turn p { font-size: 1.02rem; color: var(--ink-soft); max-width: 56ch; margin: 0 auto; }

/* ===== Testimonials ===== */
.section--quotes { background: var(--sky); }
.testimonials {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 22px;
}
.testimonial {
  background: rgba(255, 255, 255, 0.7);
  border-radius: var(--radius);
  padding: 28px 26px;
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-size: 1.3rem;
  color: var(--ink);
  box-shadow: var(--shadow-soft);
}

/* ===== Gratis gids ===== */
.section--guide { background: var(--cream); }

/* ===== Formulieren ===== */
.signup {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}
.signup input {
  flex: 1 1 200px;
  padding: 13px 18px;
  border: 1px solid rgba(74, 53, 38, 0.25);
  border-radius: 999px;
  font: inherit;
  background: #fff;
  color: var(--ink);
}
.signup input:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(201, 150, 43, 0.2);
}
.signup .btn { flex: 0 0 auto; }
.signup--center { justify-content: center; }
.form__note { margin-top: 12px; font-size: .85rem; color: var(--ink-soft); opacity: .85; }
/* De regel over grotere oplages is een uitnodiging, geen kleine lettertjes.
   Ze staat daarom op gewone tekstgrootte en in de volle inktkleur, niet in de
   verzachte stijl van .form__note. */
.preorder .preorder__bulk {
  margin: 20px 0 0;
  font-size: 1rem;
  color: var(--ink);
}
.preorder__bulk a {
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.form__success {
  margin-top: 24px;
  padding: 16px 22px;
  border-radius: var(--radius);
  background: rgba(156, 176, 127, 0.25);
  border: 1px solid rgba(156, 176, 127, 0.6);
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-size: 1.2rem;
  color: var(--ink);
}
.form__error {
  margin-top: 16px;
  padding: 12px 18px;
  border-radius: var(--radius);
  background: rgba(140, 59, 69, 0.12);
  border: 1px solid rgba(140, 59, 69, 0.5);
  color: var(--wine);
  font-size: .95rem;
}

/* ===== Preorder / bestelformulier ===== */
.section--preorder { background: var(--cream); }
.preorder { max-width: 52ch; margin: 0 auto; text-align: center; }
.preorder p { color: var(--ink-soft); }
.preorder__gift {
  margin: 24px auto 0;
  max-width: 46ch;
  padding: 16px 22px;
  border-radius: var(--radius);
  background: rgba(156, 176, 127, 0.22);
  border: 1px solid rgba(156, 176, 127, 0.55);
}
.preorder__gift strong {
  display: block;
  font-size: .8rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin-bottom: 6px;
}
.preorder__gift em {
  font-family: "Cormorant Garamond", serif;
  font-size: 1.25rem;
  color: var(--ink);
}
.preorder__badge {
  display: inline-block;
  margin: 8px auto 0;
  padding: 7px 18px;
  border-radius: 999px;
  background: var(--gold);
  color: #fff;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.preorder__price {
  font-family: "Cormorant Garamond", serif;
  font-size: 2rem;
  font-weight: 600;
  color: var(--ink);
  margin: 14px 0 4px;
}
.preorder__price span {
  display: block;
  font-size: .9rem;
  font-family: "Nunito Sans", sans-serif;
  font-weight: 400;
  color: var(--ink-soft);
}
.preorder__price .preorder__was {
  display: inline;
  margin-right: 10px;
  font-size: inherit;
  font-weight: inherit;
  color: var(--ink-soft);
  text-decoration: line-through;
  text-decoration-thickness: 2px;
}
.preorder__shipping {
  margin: 0 0 6px;
  font-family: "Nunito Sans", sans-serif;
  font-size: 1rem;
  font-weight: 700;
  color: var(--ink);
}
.preorder__later {
  margin: 0 0 4px;
  font-size: .95rem;
  color: var(--ink-soft);
}
.preorder__later strong {
  color: var(--gold-deep);
  font-weight: 700;
}
.order-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 24px auto 0;
  text-align: left;
}
.order-form input,
.order-form select {
  width: 100%;
  padding: 13px 18px;
  border: 1px solid rgba(74, 53, 38, 0.25);
  border-radius: 999px;
  font: inherit;
  background: #fff;
  color: var(--ink);
}
/* Het landveld is een keuzelijst. De eigen stijl van de browser wordt vervangen
   door dezelfde pil als de andere velden, met een pijltje zodat meteen duidelijk
   is dat je hier kan kiezen (en niet alleen België kan bestellen). */
.order-form select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 46px;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%236B5644' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 18px center;
  background-size: 12px 8px;
}
.order-form input:focus,
.order-form select:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(201, 150, 43, 0.2);
}
.order-form__row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.order-form__row > div { flex: 1 1 140px; }
.order-form .btn { margin-top: 12px; align-self: stretch; width: 100%; }

/* ===== Contactpopup ===== */
.modal {
  width: min(560px, calc(100vw - 32px));
  /* De globale reset zet `margin: 0`; een <dialog> centreert zichzelf met
     `margin: auto`, dus die zetten we hier terug. */
  margin: auto;
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  padding: 0;
  border: none;
  border-radius: var(--radius);
  background: var(--cream);
  color: var(--ink);
  box-shadow: var(--shadow);
}
.modal::backdrop { background: rgba(40, 28, 24, 0.55); }
.modal__inner { padding: 40px 36px 36px; }
.modal__title { font-size: 2rem; margin-bottom: 8px; }
.modal__intro { color: var(--ink-soft); margin-bottom: 24px; }
.modal__close {
  position: absolute;
  top: 14px;
  right: 16px;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--ink-soft);
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  transition: background .2s, color .2s;
}
.modal__close:hover { background: rgba(74, 53, 38, 0.08); color: var(--ink); }
.contact-form { display: flex; flex-direction: column; gap: 12px; }
/* `display: flex` wint van het hidden-attribuut, dus dat expliciet terugzetten:
   na een verstuurd bericht verbergt de JS het formulier zo wel echt. */
.contact-form[hidden] { display: none; }
.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 13px 18px;
  border: 1px solid rgba(74, 53, 38, 0.25);
  border-radius: var(--radius);
  font: inherit;
  background: #fff;
  color: var(--ink);
}
.contact-form input { border-radius: 999px; }
.contact-form textarea { min-height: 140px; resize: vertical; line-height: 1.6; }
.contact-form input:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(201, 150, 43, 0.2);
}
.contact-form .btn { margin-top: 12px; width: 100%; }
/* Honeypot: onzichtbaar voor bezoekers, wel invulbaar voor bots. */
.contact-form__trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.modal .form__success, .modal .form__error { margin-top: 0; }

@media (max-width: 560px) {
  .modal__inner { padding: 34px 22px 26px; }
  .modal__title { font-size: 1.7rem; }
}

/* ===== Donatie ===== */
.section--donation { background: var(--cream-deep); }
.donation { max-width: 64ch; margin: 0 auto; text-align: center; }
.donation p { font-size: 1.1rem; margin-bottom: 16px; color: var(--ink-soft); }
.donation__line {
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-size: 1.4rem;
  color: var(--ink);
}

/* ===== Audiospeler (rustpagina) ===== */
.audio { margin: 40px 0 0; text-align: center; }
.audio__title {
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-size: 1.3rem;
  color: var(--ink);
  margin-bottom: 14px;
}
.audio__player { width: 100%; max-width: 520px; }
.audio__back { margin-top: 28px; font-size: .95rem; }

/* ===== Events ===== */
.section--events { background: var(--peach); }
.events { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.event {
  background: rgba(255, 255, 255, 0.6);
  border-radius: var(--radius);
  padding: 36px 32px;
  box-shadow: var(--shadow-soft);
}
.event p { margin-bottom: 24px; color: var(--ink-soft); font-size: 1.05rem; }

/* ===== Blijf dichtbij ===== */
.section--stayclose {
  padding: 0;
  background:
    url("../assets/images/tine-sepia.jpg") center/cover no-repeat;
}
.stayclose__overlay {
  background: linear-gradient(rgba(40, 28, 24, 0.55), rgba(40, 28, 24, 0.65));
  padding: 100px 0;
}
.stayclose { max-width: 60ch; margin: 0 auto; text-align: center; color: #fff; }
.stayclose .section__title { color: #fff; }
.stayclose p { font-size: 1.15rem; margin-bottom: 28px; color: rgba(255, 255, 255, 0.92); }
.stayclose .form__success {
  display: inline-block;
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.4);
  color: #fff;
}

/* ===== Footer ===== */
.footer { background: var(--ink); color: var(--cream); padding: 56px 0; text-align: center; }
.footer__title { font-family: "Cormorant Garamond", serif; font-size: 1.7rem; }
.footer__sub { color: var(--peach); margin-bottom: 18px; font-style: italic; }
.footer__contact { margin-bottom: 14px; }
.footer__contact a { color: var(--autumn); }
.footer__contact a:hover { color: #fff; }
.footer__help { font-size: .9rem; color: rgba(250, 243, 228, 0.75); margin-bottom: 18px; }
.footer__help a { color: var(--autumn); }
.footer__copy { font-size: .85rem; opacity: .7; }

/* ===== Scroll-reveal animatie ===== */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
.reveal.is-visible { opacity: 1; transform: none; }

/* ===== Responsive ===== */
@media (max-width: 920px) {
  .nav__links { gap: 18px; }
  .nav__brand { font-size: 1.2rem; }
}

@media (max-width: 860px) {
  .nav__toggle { display: flex; }
  .nav__links {
    position: absolute;
    top: 100%; left: 0; right: 0;
    flex-direction: column;
    gap: 0;
    background: var(--cream);
    border-bottom: 1px solid rgba(74,53,38,.1);
    max-height: 0;
    overflow: hidden;
    transition: max-height .35s ease;
  }
  .nav__links.is-open { max-height: 460px; }
  .nav__links a { padding: 16px 24px; border-top: 1px solid rgba(74,53,38,.07); }
  .nav__links a.nav__cta { border-top: 0; margin: 12px auto; padding: 12px 28px; }

  .hero { padding: 56px 0 70px; }
  .hero__inner { grid-template-columns: 1fr; gap: 40px; text-align: center; }
  .hero__subtitle { margin-left: auto; margin-right: auto; }
  .hero__cover { order: -1; }
  .hero__cover img { max-width: 260px; }

  .split, .split--reverse { grid-template-columns: 1fr; gap: 32px; }
  .split--reverse .split__media { order: -1; }
  .split__media { max-width: 460px; margin: 0 auto; }
  .section__title--left { text-align: center; }
  .split__text blockquote { margin-left: auto; margin-right: auto; }

  .audience { grid-template-columns: 1fr; gap: 28px; }
  .events { grid-template-columns: 1fr; gap: 28px; }

  .banner { background-attachment: scroll; min-height: 46vh; }

  .section { padding: 64px 0; }
}

/* ===== Vaste bestelbalk (mobiel) ===== */
.order-bar { display: none; }
@media (max-width: 860px) {
  .order-bar {
    display: block;
    position: fixed;
    left: 16px;
    right: 16px;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    z-index: 200;
    text-align: center;
    padding: 15px 24px;
    border-radius: 999px;
    background: var(--gold);
    color: #fff;
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: .01em;
    box-shadow: 0 8px 26px rgba(201, 150, 43, 0.5);
    transition: transform .35s ease, opacity .35s ease;
  }
  .order-bar:hover { background: var(--gold-deep); color: #fff; }
  .order-bar--hidden {
    transform: translateY(160%);
    opacity: 0;
    pointer-events: none;
  }
  /* ruimte zodat de balk de laatste inhoud niet afdekt; enkel op pagina's die
     de bestelbalk hebben, anders blijft er onderaan een lege strook staan */
  body:has(.order-bar) { padding-bottom: 78px; }
}

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