/* ============================================================
   Hebbeding — stijl
   De kleuren en lettertypes staan hieronder bij elkaar.
   Wil je een kleur wijzigen? Pas hem hier één keer aan.
   ============================================================ */

:root {
  /* Merkkleuren, overgenomen uit het originele logo-bestand (fullcolor.pdf).
     Pantone 7475C = groen, Pantone 5015C = roze.
     De "donker" varianten zijn er voor tekst en knoppen: op de merkkleuren zelf
     is witte tekst te licht om goed leesbaar te zijn. */
  --groen:         #4c8f8b;   /* merkgroen — grote koppen, vlakken, het logo   */
  --groen-donker:  #3a6f6c;   /* knoppen, voettekst, links, kleine tekst       */
  --groen-licht:   #eaf1f0;
  --roze:          #d699a1;   /* merkroze — hartjes, streepjes, accenten       */
  --roze-donker:   #a85258;   /* link-hover en de focusrand                    */
  --roze-band:     #e5abac;   /* roze balk achter de uitspraken — zoals de oude winkel */
  --roze-licht:    #fbf2f3;
  --tekst:         #635959;
  --tekst-sterk:   #46403f;
  --wit:           #ffffff;
  --achtergrond:   #f7f7f7;
  --lijn:          #e6e0e0;

  --serif:  "Lora", Georgia, "Times New Roman", serif;
  --sans:   "Roboto", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;

  --breed:  1120px;
  --rand:   4px;
  --schaduw: 0 1px 2px rgba(70, 64, 63, .05), 0 8px 24px rgba(70, 64, 63, .07);
}

/* --- lettertypes (lokaal, geen externe verzoeken) --------- */
@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(../fonts/lora-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(../fonts/lora-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url(../fonts/roboto-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url(../fonts/roboto-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --- basis ------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* --- overgang tussen pagina's ------------------------------
   Kom je op een pagina, dan schuift de inhoud van onderen omhoog en
   verschijnt hij. Klik je door naar een andere pagina, dan schuift hij
   omhoog weg (dat laatste regelt menu.js). De koptekst blijft staan.
   Zonder JavaScript krijg je nog steeds de binnenkomst-animatie.
   --------------------------------------------------------- */
@keyframes pagina-erin  { from { opacity: 0; transform: translateY(24px); } }
@keyframes pagina-eruit { to   { opacity: 0; transform: translateY(-16px); } }

main { animation: pagina-erin 300ms cubic-bezier(0, 0, .2, 1) both; }
main.pagina-eruit { animation: pagina-eruit 180ms cubic-bezier(.4, 0, 1, 1) both; }

/* Wie in zijn systeem heeft staan dat animaties uit moeten: geen beweging. */
@media (prefers-reduced-motion: reduce) {
  main, main.pagina-eruit { animation: none; }
}

body {
  margin: 0;
  background: var(--achtergrond);
  color: var(--tekst);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

h1, h2, h3 {
  font-family: var(--serif);
  color: var(--groen);
  font-weight: 700;          /* de warme, ronde Lora — net als op de oude winkel */
  line-height: 1.2;
  margin: 0 0 .5em;
}
h1 { font-size: clamp(1.9rem, 1.35rem + 2.2vw, 2.7rem); }
h2 { font-size: clamp(1.55rem, 1.25rem + 1.3vw, 2.1rem); }
h3 { font-size: 1.25rem; color: var(--tekst-sterk); }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--groen-donker); }
a:hover { color: var(--roze-donker); }

:focus-visible {
  outline: 3px solid var(--roze-donker);
  outline-offset: 2px;
  border-radius: 2px;
}

.wrap {
  width: 100%;
  max-width: var(--breed);
  margin-inline: auto;
  padding-inline: 20px;
}

.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;
}

.overslaan {
  position: absolute; left: 12px; top: -60px;
  background: var(--groen); color: #fff; padding: 10px 16px;
  border-radius: var(--rand); z-index: 100; transition: top .15s;
}
.overslaan:focus { top: 12px; color: #fff; }

/* --- knoppen ---------------------------------------------- */
.knop {
  display: inline-flex; align-items: center; gap: .5em;
  font-family: var(--sans); font-size: .95rem; font-weight: 500;
  letter-spacing: .02em;
  padding: .8em 1.5em;
  border: 1px solid var(--groen);
  border-radius: var(--rand);
  background: var(--groen);
  color: #fff;
  text-decoration: none;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.knop:hover { background: var(--groen-donker); border-color: var(--groen-donker); color: #fff; }

.knop--licht { background: #fff; color: var(--groen-donker); }
.knop--licht:hover { background: var(--groen-licht); color: var(--groen-donker); border-color: var(--groen-donker); }

/* Zelfde roze als de balk in de carrousel. Witte letters op dit lichte roze
   geven weinig contrast, daarom staan ze vet. */
.knop--roze {
  background: var(--roze-band);
  border-color: var(--roze-band);
  color: #fff;
  font-weight: 700;
}
.knop--roze:hover { background: #d98486; border-color: #d98486; color: #fff; }

/* --- header ----------------------------------------------- */
.site-header {
  background: var(--wit);
  border-bottom: 1px solid var(--lijn);
  position: sticky; top: 0; z-index: 50;
}
.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  min-height: 76px;
}
.logo img { width: auto; height: 46px; }

.menu-knop {
  display: none;
  background: none; border: 0; padding: 8px;
  color: var(--groen); cursor: pointer;
  font: inherit;
}
.menu-knop svg { display: block; }

.hoofdmenu ul {
  display: flex; align-items: center; gap: 4px;
  list-style: none; margin: 0; padding: 0;
}
.hoofdmenu a {
  display: block;
  padding: .6em .9em;
  color: var(--tekst);
  text-decoration: none;
  font-size: .97rem;
  border-radius: var(--rand);
  transition: color .15s, background .15s;
}
.hoofdmenu a:hover { color: var(--groen-donker); background: var(--groen-licht); }
.hoofdmenu a[aria-current="page"] { color: var(--groen-donker); position: relative; }
.hoofdmenu a[aria-current="page"]::after {
  content: "";
  position: absolute; left: .9em; right: .9em; bottom: .3em;
  height: 2px; background: var(--roze);
}

@media (max-width: 780px) {
  .menu-knop { display: block; }
  .hoofdmenu {
    display: none;
    position: absolute; left: 0; right: 0; top: 100%;
    background: var(--wit);
    border-bottom: 1px solid var(--lijn);
    box-shadow: var(--schaduw);
  }
  .hoofdmenu.open { display: block; }
  .hoofdmenu ul { flex-direction: column; align-items: stretch; gap: 0; padding: 8px 20px 16px; }
  .hoofdmenu a { padding: .85em .6em; border-bottom: 1px solid var(--lijn); border-radius: 0; }
  .hoofdmenu li:last-child a { border-bottom: 0; }
  .hoofdmenu a[aria-current="page"]::after { display: none; }
  .hoofdmenu a[aria-current="page"] { background: var(--groen-licht); }
}

/* --- carrousel -------------------------------------------
   Nagebouwd naar de diavoorstelling van de oude Shopify-winkel:
   een foto op volle breedte met de uitspraak in een roze balk.
   De balk loopt per regel mee dankzij box-decoration-break.
   --------------------------------------------------------- */
.carrousel {
  position: relative;
  background: var(--groen-licht);
  overflow: hidden;
}
.carrousel__spoor {
  position: relative;
  height: clamp(300px, 45vw, 560px);
}
.carrousel__dia {
  position: absolute; inset: 0;
  opacity: 0;
  transition: opacity .8s cubic-bezier(.44, .13, .48, .87);
  pointer-events: none;
}
.carrousel__dia.is-actief { opacity: 1; pointer-events: auto; }
.carrousel__dia img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center top;
}

/* Zonder JavaScript blijft de eerste dia gewoon staan. */
.carrousel:not(.is-klaar) .carrousel__dia:first-child { opacity: 1; }

.carrousel__tekst {
  position: absolute; left: 0; right: 0; bottom: clamp(30px, 5vw, 66px);
  padding-inline: 20px;
}
.carrousel__tekst > div { width: 100%; max-width: var(--breed); margin-inline: auto; }

.carrousel__uitspraak {
  display: inline;
  margin: 0;
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(1.7rem, 1rem + 3vw, 3.4rem);
  line-height: 1.35;
  color: #fff;
  background-color: var(--roze-band);
  padding: .1em .3em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  opacity: 0;
  transform: translateY(40px);
  transition: opacity .6s cubic-bezier(.44, .13, .48, .87) .3s,
              transform .6s cubic-bezier(.44, .13, .48, .87) .3s;
}
.carrousel__dia.is-actief .carrousel__uitspraak { opacity: 1; transform: translateY(0); }

/* --- bediening --- */
.carrousel__knoppen { position: absolute; right: 0; bottom: 0; display: flex; }
.carrousel__knop {
  border: 0; cursor: pointer;
  background: rgba(255, 255, 255, .92);
  color: var(--tekst);
  padding: 13px 17px;
  font: inherit; line-height: 1;
  display: flex; align-items: center;
  transition: background .15s;
}
.carrousel__knop:hover { background: #fff; }
.carrousel__knop + .carrousel__knop { border-left: 1px solid var(--lijn); }
.carrousel__knop svg { display: block; width: 12px; height: 12px; fill: currentColor; }

.carrousel__bolletjes {
  position: absolute; left: 0; right: 0; bottom: 15px;
  display: flex; justify-content: center; gap: 9px;
  padding-inline: 20px;
}
.carrousel__bol {
  width: 11px; height: 11px; padding: 0;
  border: 1px solid rgba(255, 255, 255, .95);
  border-radius: 50%;
  background: rgba(255, 255, 255, .3);
  cursor: pointer;
  transition: background .15s;
}
.carrousel__bol[aria-current="true"] { background: #fff; }

@media (prefers-reduced-motion: reduce) {
  .carrousel__dia, .carrousel__uitspraak { transition: none; }
  .carrousel__uitspraak { opacity: 1; transform: none; }
}

@media (max-width: 600px) {
  .carrousel__knoppen { display: none; }
  .carrousel__bolletjes { bottom: 11px; }
}

/* --- secties ---------------------------------------------- */
.sectie { padding-block: clamp(48px, 7vw, 84px); }
section[id] { scroll-margin-top: 92px; }   /* plakkende koptekst niet over de titel */
.sectie--wit { background: var(--wit); }
.sectie--groen { background: var(--groen-licht); }
.sectie--roze { background: var(--roze-licht); }

.sectie-kop { max-width: 620px; margin: 0 auto clamp(32px, 4vw, 52px); text-align: center; }
.sectie-kop p { font-size: 1.05rem; }

.streep {
  display: block; width: 68px; height: 0; margin: 0 auto 1.4em;
  border-top: 1px solid var(--roze);
  position: relative;
}
.streep::after {
  content: "";
  position: absolute; left: 50%; top: -7px;
  width: 14px; height: 14px; margin-left: -7px;
  background: var(--roze);
  clip-path: path("M7 13.5C2.4 9.6 .5 7 .5 4.6A3.6 3.6 0 0 1 7 2.4 3.6 3.6 0 0 1 13.5 4.6C13.5 7 11.6 9.6 7 13.5Z");
}

/* --- thema's ---------------------------------------------- */
.themas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(20px, 2.4vw, 30px);
}
.thema {
  background: var(--wit);
  border-radius: var(--rand);
  overflow: hidden;
  box-shadow: var(--schaduw);
  display: flex; flex-direction: column;
}

/* De kaarten op de homepagina zijn links naar het juiste stuk van "Wat je vindt". */
a.thema {
  color: inherit;
  text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease;
}
a.thema:hover,
a.thema:focus-visible {
  color: inherit;            /* alleen de kop verkleurt, niet de hele kaart */
  transform: translateY(-7px);
  box-shadow: 0 3px 6px rgba(70, 64, 63, .08), 0 18px 38px rgba(70, 64, 63, .16);
}
a.thema:hover h3,
a.thema:focus-visible h3 { color: var(--roze-donker); }
a.thema img { transition: transform .4s ease; }
a.thema:hover img,
a.thema:focus-visible img { transform: scale(1.04); }

@media (prefers-reduced-motion: reduce) {
  a.thema, a.thema img { transition: none; }
  a.thema:hover, a.thema:focus-visible { transform: none; }
  a.thema:hover img, a.thema:focus-visible img { transform: none; }
}
.thema img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.thema-tekst { padding: 22px 24px 26px; }
.thema h3 { margin-bottom: .4em; color: var(--groen-donker); font-family: var(--serif); }
.thema p { font-size: .95rem; margin: 0; }

/* --- tekst + beeld naast elkaar --------------------------- */
.duo {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
}
@media (min-width: 781px) {
  .duo { grid-template-columns: 1fr 1fr; }
  .duo--omgekeerd .duo-beeld { order: 2; }
}
.duo-beeld img {
  width: 100%;
  max-height: 520px;          /* staande foto's niet te hoog laten worden */
  object-fit: cover;
  border-radius: var(--rand);
  box-shadow: var(--schaduw);
}
.duo-tekst > :last-child { margin-bottom: 0; }

/* --- seizoensblok ----------------------------------------
   Het blok op de homepagina dat met het jaar meewisselt.
   --------------------------------------------------------- */
.seizoen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: clamp(16px, 2vw, 26px);
}
.seizoen img {
  width: 100%; aspect-ratio: 3 / 4; object-fit: cover;
  border-radius: var(--rand);
  box-shadow: var(--schaduw);
}

/* --- fotostrip -------------------------------------------- */
.strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}
.strip img {
  width: 100%; aspect-ratio: 1 / 1; object-fit: cover;
  border-radius: var(--rand);
}

/* --- bezoekblok ------------------------------------------- */
.bezoek {
  display: grid; grid-template-columns: 1fr; gap: clamp(28px, 4vw, 48px);
}
@media (min-width: 781px) { .bezoek { grid-template-columns: 1fr 1fr; } }

.gegevens { list-style: none; margin: 0 0 1.6em; padding: 0; }
.gegevens li {
  display: grid; grid-template-columns: 130px 1fr; gap: 4px 16px;
  padding: .7em 0;
  border-bottom: 1px solid var(--lijn);
}
.gegevens li:first-child { border-top: 1px solid var(--lijn); }
.gegevens dt, .gegevens b {
  font-weight: 500; color: var(--tekst-sterk);
}
@media (max-width: 480px) {
  .gegevens li { grid-template-columns: 1fr; }
}

.knoppenrij { display: flex; flex-wrap: wrap; gap: 12px; }

/* --- opsomming met hartjes -------------------------------- */
.lijst { list-style: none; margin: 0 0 1.1em; padding: 0; }
.lijst li {
  position: relative; padding-left: 1.6em; margin-bottom: .45em;
}
.lijst li::before {
  content: ""; position: absolute; left: 0; top: .55em;
  width: 11px; height: 11px; background: var(--roze);
  clip-path: path("M5.5 10.6C1.9 7.5 .4 5.5 .4 3.6A2.8 2.8 0 0 1 5.5 1.9 2.8 2.8 0 0 1 10.6 3.6C10.6 5.5 9.1 7.5 5.5 10.6Z");
}

/* --- merken ----------------------------------------------- */
.merken {
  display: flex; flex-wrap: wrap; gap: 10px; justify-content: center;
  list-style: none; margin: 0; padding: 0;
}
.merken li {
  background: var(--wit);
  border: 1px solid var(--lijn);
  border-radius: 999px;
  padding: .5em 1.15em;
  font-size: .95rem;
  color: var(--tekst-sterk);
}

/* --- footer ----------------------------------------------- */
.site-footer {
  background: var(--groen-donker);
  color: #fff;
  padding-block: clamp(40px, 5vw, 60px) 28px;
  font-size: .95rem;
}
.site-footer a { color: #fff; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.35); }
.site-footer a:hover { color: #fff; border-bottom-color: #fff; }
.footer-grid {
  display: grid; grid-template-columns: 1fr; gap: 32px;
  padding-bottom: 32px;
}
@media (min-width: 640px) { .footer-grid { grid-template-columns: 1.2fr 1fr 1fr; } }
.site-footer h2 {
  font-family: var(--sans); font-size: .8rem; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase;
  color: rgba(255,255,255,.88); margin-bottom: 1em;
}
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: .5em; }
.footer-logo img { height: 58px; width: auto; margin-bottom: 16px; }
.footer-onder {
  border-top: 1px solid rgba(255,255,255,.22);
  padding-top: 20px;
  display: flex; flex-wrap: wrap; gap: 8px 24px;
  font-size: .88rem; color: rgba(255,255,255,.88);
}
.footer-onder a { color: #fff; }

/* --- losse pagina's --------------------------------------- */
.paginakop {
  background: var(--groen-licht);
  padding-block: clamp(40px, 6vw, 68px);
  text-align: center;
}
.paginakop p { max-width: 620px; margin-inline: auto; font-size: 1.05rem; }

.prose { max-width: 720px; margin-inline: auto; }
.prose h2 { margin-top: 1.8em; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { margin-top: 1.6em; }
.prose ul { padding-left: 1.2em; }
.prose li { margin-bottom: .4em; }

.midden { text-align: center; }