/* ============================================================
   THEMA "Samen" — de look van het nieuwe ontwerp
   Donkere header en footer, zacht roze vlakken, Libre Baskerville
   koppen, Montserrat tekst, roze pillknoppen.

   Laadt als laatste stylesheet op elke pagina. Het eerste blok
   herdefinieert de bestaande tokens, zodat alle componenten die
   tokens gebruiken vanzelf meekleuren. Daarna volgen alleen de
   overrides die nodig zijn waar componenten vaste waarden hebben.
   ============================================================ */

:root{
  /* ---- nieuwe merkwaarden ---- */
  --t-ink:        #1d1a1b;   /* bijna-zwart van header, footer, knoppen */
  --t-ink-2:      #2a2526;   /* topbalk, iets lichter */
  --t-text:       #2c2728;
  --t-muted:      #6f6668;
  --t-rose:       #c9767d;
  --t-rose-dark:  #a9525b;   /* links: genoeg contrast op licht */
  --t-rose-soft:  #f6dcdc;
  --t-rose-hover: #f0caca;
  --t-blush:      #fbf1f0;
  --t-cream:      #fdf8f7;
  --t-white:      #ffffff;
  --t-line:       #ecdfdf;
  --t-star:       #e7b25c;

  --t-font-display: "Libre Baskerville", Georgia, "Times New Roman", serif;
  --t-font-body:    "Montserrat", -apple-system, "Helvetica Neue", Arial, sans-serif;
  --t-font-script:  "Sacramento", "Segoe Script", cursive;

  --t-radius-card: 10px;
  --t-shadow-card: 0 4px 18px rgba(60,30,30,.06);
  --t-shadow-hover: 0 14px 30px rgba(60,30,30,.12);
  --t-logo-h: 54px;
  --t-logo-h-sm: 60px;

  /* ---- bestaande tokens omgezet ---- */
  --blush:       var(--t-cream);
  --blush-deep:  var(--t-blush);
  --blush-line:  var(--t-line);
  --cream:       var(--t-white);

  --forest:      var(--t-ink);
  --forest-deep: #000000;
  --forest-soft: var(--t-text);

  --teal:        var(--t-rose);
  --teal-deep:   var(--t-rose-dark);
  --teal-tint:   var(--t-rose-soft);

  --ink:         var(--t-text);
  --ink-soft:    var(--t-muted);

  --line:        rgba(60,30,30,.10);
  --line-soft:   rgba(60,30,30,.06);
  --shadow-color: 60,30,30;

  --font-display: var(--t-font-display);
  --font-body:    var(--t-font-body);
  --font-script:  var(--t-font-script);

  --fs-h1: clamp(2rem, 1.4rem + 2.4vw, 3.1rem);
  --fs-h2: clamp(1.45rem, 1.15rem + 1.3vw, 2.05rem);
  --fs-h3: clamp(1.1rem, 1rem + .5vw, 1.3rem);
  --fs-body: .97rem;
  --fs-eyebrow: .7rem;

  --radius-m: 12px;
  --radius-l: 18px;
}

/* ---------- basis ---------- */
body{ background: var(--t-cream); color: var(--t-text); }
h1, h2, h3{ font-family: var(--t-font-display); font-weight: 700; color: var(--t-ink); letter-spacing: -.005em; }
h1{ font-family: var(--t-font-display); line-height: 1.12; }
h2, h3{ line-height: 1.2; }
h4{ font-family: var(--t-font-body); letter-spacing: .14em; font-size: .72rem; }
.accent, h1 em, h2 em{ color: var(--t-rose); font-weight: 400; font-style: normal; }

.eyebrow{
  color: var(--t-ink); font-weight: 600; letter-spacing: .2em; font-size: var(--fs-eyebrow);
}
.eyebrow .accent{ font-weight: 600; }
.lede{ color: var(--t-text); }
a{ color: var(--t-rose-dark); }
a:hover{ color: var(--t-ink); }
strong{ color: var(--t-ink); }

.section--alt{ background: var(--t-blush); }

/* geen grijze foto's meer: het ontwerp is warm en in kleur */
.photo{ filter: none; border-radius: var(--t-radius-card); box-shadow: var(--t-shadow-card); }
.photo:hover{ filter: none; }

/* ---------- topbalk ---------- */
.topbar{ background: var(--t-ink-2); color: var(--t-cream); }
.topbar__claims li, .topbar__rating{ color: var(--t-cream); }
.topbar__claims svg{ color: var(--t-rose-soft); }
.topbar__rating:hover{ color: var(--t-rose-soft); }
.topbar__rating strong{ color: var(--t-white); }
.topbar__stars svg{ color: var(--t-star); }
@media (max-width: 640px){
  .topbar__rating{ background: transparent; color: var(--t-cream); box-shadow: none; }
}

/* ---------- header ---------- */
.site-header{ background: var(--t-ink); border-bottom: 0; }
.logo__mark--wordmark{ height: var(--t-logo-h); width: auto; }
.site-nav > li > a{ color: var(--t-white); font-weight: 500; font-size: .86rem; opacity: .92; }
.site-nav > li > a:hover{ color: var(--t-rose-soft); opacity: 1; }
.site-nav a[aria-current="page"]{ border-bottom-color: var(--t-rose-soft); }
.site-nav .sub-menu{ background: var(--t-white); border-color: var(--t-line); }
.site-nav .sub-menu a{ color: var(--t-ink); font-weight: 500; }
.site-nav .sub-menu a:hover{ background: var(--t-rose-soft); color: var(--t-ink); }
.nav-toggle{ color: var(--t-white); }
.site-header .btn--primary{ background: var(--t-rose-soft); border-color: var(--t-rose-soft); color: var(--t-ink); }
.site-header .btn--primary:hover{ background: var(--t-rose-hover); border-color: var(--t-rose-hover); color: var(--t-ink); }

@media (max-width: 1140px){
  .site-nav .sub-menu{ background: transparent; }
  .site-nav .sub-menu a{ color: var(--t-cream); opacity: .8; }
  .site-nav .sub-menu a:hover{ background: transparent; color: var(--t-rose-soft); opacity: 1; }
  .site-nav.is-open{ padding-bottom: var(--space-4); }
}

/* ---------- knoppen ---------- */
.btn{ font-weight: 600; font-size: .9rem; padding: .95em 1.7em; }
.btn--primary{ background: var(--t-ink); border-color: var(--t-ink); color: var(--t-white); }
.btn--primary:hover{ background: #000000; border-color: #000000; color: var(--t-white); box-shadow: 0 10px 24px rgba(0,0,0,.18); }
.btn--secondary{ background: var(--t-rose-soft); border-color: var(--t-rose-soft); color: var(--t-ink); }
.btn--secondary:hover{ background: var(--t-rose-hover); border-color: var(--t-rose-hover); color: var(--t-ink); box-shadow: 0 10px 24px rgba(201,118,125,.25); }
.btn--primary::after, .btn--secondary::after{
  content: "\2192"; font-weight: 400; transition: transform .2s var(--ease);
}
.btn:hover::after{ transform: translateX(3px); }
.site-header .btn::after, .btn--icon::after, button.btn::after{ content: none; }

/* ---------- kaarten ---------- */
.card, .quote, .agenda__day, .week-kaart, .faq details, .note{
  background: var(--t-white);
  border: 1px solid var(--t-line);
  border-radius: var(--t-radius-card);
  box-shadow: var(--t-shadow-card);
}
.card{ transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
.week-kaart:hover{ border-color: var(--t-rose); box-shadow: var(--t-shadow-hover); }
.week-kaart__nummer{ color: var(--t-rose); font-weight: 700; }

/* uitgelichte kaart = het donkere prijsblok uit het ontwerp */
.card--featured{
  background: var(--t-ink); border-color: var(--t-ink); color: var(--t-cream);
  box-shadow: 0 20px 44px rgba(0,0,0,.18);
}
.card--featured::before{ background: var(--t-rose-soft); color: var(--t-ink); }
.card--featured h3, .card--featured .price, .card--featured strong{ color: var(--t-white); }
.card--featured .price__term, .card--featured li{ color: var(--t-cream); }
.card--featured a:not(.btn){ color: var(--t-rose-soft); }
.card--featured .list-check svg{ color: var(--t-rose-soft); }
.card--featured .badge--product{ background: rgba(255,255,255,.1); color: var(--t-cream); }
.card--featured .btn--primary{ background: var(--t-rose-soft); border-color: var(--t-rose-soft); color: var(--t-ink); }
.card--featured .btn--primary:hover{ background: var(--t-rose-hover); border-color: var(--t-rose-hover); }

.price{ font-family: var(--t-font-display); }
.list-check svg{ color: var(--t-rose); }
.list-check__term{ text-transform: none; }
.list-check__term::first-letter{ text-transform: uppercase; }

.badge--product, .badge{ font-weight: 600; }

/* ---------- recensies ---------- */
.quote blockquote p{ font-family: var(--t-font-body); font-style: normal; font-size: .95rem; color: var(--t-muted); line-height: 1.65; }
.quote figcaption{ color: var(--t-ink); }
.quote figcaption img{ filter: none; }
.quote figcaption::after{ content: "\2605\2605\2605\2605\2605"; color: var(--t-rose); letter-spacing: 2px; margin-left: auto; font-size: .85rem; }

/* ---------- faq, callout, formulier ---------- */
.faq summary{ font-family: var(--t-font-display); font-size: 1rem; }
.faq summary::after{ color: var(--t-rose); }
.callout{ background: var(--t-rose-soft); border-color: transparent; border-radius: var(--t-radius-card); }
.callout svg{ color: var(--t-rose-dark); }
.input, .select{ background: var(--t-white); border-color: var(--t-line); }
.input:focus, .select:focus{ border-color: var(--t-rose); }
.table--data thead th{ border-bottom-color: var(--t-ink); }
.table--data tbody tr:hover{ background: var(--t-blush); }

/* ---------- onderwerpknoppen ---------- */
.onderwerp-knop{ background: var(--t-rose-soft); border-color: var(--t-rose-soft); color: var(--t-ink); font-weight: 600; }
.onderwerp-knop:hover{ background: var(--t-ink); border-color: var(--t-ink); color: var(--t-white); }

/* ---------- agenda ---------- */
.agenda__month-name{ font-family: var(--t-font-display); }
.agenda--locatie .agenda__day{ border-color: var(--t-line); }

/* ---------- footer ---------- */
.site-footer{ background: var(--t-ink); color: var(--t-cream); }
.site-footer a{ color: var(--t-cream); opacity: .9; }
.site-footer a:hover{ color: var(--t-rose-soft); opacity: 1; text-decoration: none; }
.site-footer h4{ color: var(--t-rose-soft); }
.site-footer p{ color: var(--t-cream); opacity: .8; }
.site-footer .logo-chip{ background: transparent; padding: 0; }
.logo--sm .logo__mark--wordmark{ height: var(--t-logo-h-sm); }

/* ---------- handschrift-accent ---------- */
.script{ font-family: var(--t-font-script); color: var(--t-rose); }

/* ============================================================
   HOMEPAGE — hero en secties uit het ontwerp
   ============================================================ */
.hero--samen{ background: var(--t-blush); padding: 0; position: relative; overflow: hidden; }
.hero--samen .hero__grid{ display: grid; grid-template-columns: 1fr 1.05fr; align-items: center; min-height: 520px; }
.hero--samen .hero__body{ padding-block: var(--space-8); max-width: 540px; }
.hero--samen h1{ text-align: left; }
.hero--samen .hero__photo{ position: absolute; top: 0; right: 0; bottom: 0; width: 55%; }
.hero--samen .hero__photo::before{
  content: ""; position: absolute; inset: 18% 42% 8% -5%;
  background: var(--t-rose-soft); opacity: .75;
  border-radius: 48% 52% 40% 60% / 50% 40% 60% 50%;
}
.hero--samen .hero__photo img{
  position: relative; width: 100%; height: 100%; object-fit: cover;
  clip-path: polygon(12% 0, 100% 0, 100% 100%, 0 100%, 6% 55%);
}
.proof__figure{ font-family: var(--t-font-display); font-weight: 700; color: var(--t-ink); }
.proof__item{ color: var(--t-muted); }

.split-samen{ display: grid; grid-template-columns: 1fr 2fr; background: var(--t-white); border-block: 1px solid var(--t-line); }
.split-samen__photo{ min-height: 360px; background: var(--t-rose-soft); }
.split-samen__photo img{ width: 100%; height: 100%; object-fit: cover; }
.split-samen__body{ display: grid; grid-template-columns: 1.3fr 1fr; gap: var(--space-7); align-items: center; padding: var(--space-7) var(--space-8) var(--space-7) var(--space-7); }

.belofte{ position: relative; padding: var(--space-7); }
.belofte::before{
  content: ""; position: absolute; inset: 0; background: var(--t-rose-soft); opacity: .6;
  border-radius: 30px 60px 40px 70px / 60px 30px 70px 40px; transform: rotate(-1.2deg);
}
.belofte > *{ position: relative; }

@media (max-width: 960px){
  .split-samen{ grid-template-columns: 1fr; }
  .split-samen__body{ grid-template-columns: 1fr; padding: var(--space-6) var(--space-5); gap: var(--space-5); }
}
@media (max-width: 860px){
  .hero--samen .hero__grid{ grid-template-columns: 1fr; min-height: 0; }
  .hero--samen .hero__body{ padding-block: var(--space-7) var(--space-6); }
  .hero--samen .hero__photo{ position: relative; width: auto; height: 320px; margin-inline: calc(var(--space-5) * -1); }
  .hero--samen .hero__photo::before{ display: none; }
  .hero--samen .hero__photo img{ clip-path: none; }
  .belofte{ padding: var(--space-6) var(--space-5); }
}
@media (max-width: 640px){
  h1{ text-align: left; }
}

/* ---------- verfijningen na controle ---------- */
.site-header .container{ max-width: 1260px; }
.site-header__inner{ gap: var(--space-4); }
.site-nav{ gap: 1.35rem; }
.site-nav > li > a{ white-space: nowrap; }
.hero--samen .hero__body{ max-width: min(470px, 42vw); }
.hero--samen .hero__photo{ width: 52%; }
.hero--samen .hero__photo img{ object-position: 85% center; }
.badge{ background: var(--t-line); color: var(--t-muted); }
.agenda__day .badge{ align-self: flex-start; }
@media (max-width: 860px){
  .hero--samen .hero__body{ max-width: none; }
  .hero--samen .hero__photo{ width: auto; }
}
.grid > *{ min-width: 0; }
.hero--samen .hero__photo img{ object-position: 65% center; }
@media (max-width: 860px){
  .hero--samen .hero__photo{ margin-inline: 0; }
}
@media (max-width: 860px){
  .grid--2, .grid--3, .grid--hero{ grid-template-columns: minmax(0, 1fr); }
  .grid--hero > img{ width: 100%; }
}

/* ---------- één containerbreedte: tekst lijnt uit met het logo ---------- */
:root{ --container-w: 1260px; }
.site-header .container{ max-width: var(--container-w); }
.hero--samen .hero__body{ max-width: min(500px, 42vw); }
.btn--terug::after{ content: none !important; }

/* ============================================================
   MOBIEL
   ============================================================ */
@media (max-width: 1140px){
  /* hamburger blijft naast het logo staan, ook als het menu open is */
  .nav-toggle{ top: 1.35rem; transform: none; padding: .6rem; }
  .site-nav{ gap: 0; }
  .site-nav.is-open{ padding-top: var(--space-4); max-height: 75vh; }
  .site-nav > li{ border-top: 1px solid rgba(255,255,255,.08); }
  .site-nav > li > a{ font-size: 1rem; padding: .85em 0; min-height: 48px; border-bottom: 0; }
  .site-nav a[aria-current="page"]{ color: var(--t-rose-soft); }
  .site-nav .sub-menu{ padding: 0 0 .6em 1em; margin: 0; }
  .site-nav .sub-menu a{ text-decoration: none; padding: .55em 0; font-size: .92rem; }
  /* Aanmelden-knop onderaan het opengeklapte menu */
  .site-nav.is-open ~ .btn{
    display: flex; order: 5; width: 100%; margin-block: var(--space-3) var(--space-4);
    padding-block: 1em;
  }
}

@media (max-width: 860px){
  .hero--samen .hero__body{ max-width: none; padding-block: var(--space-6) var(--space-6); }
  .hero--samen .hero__photo{ height: 300px; }
  .hero--samen .row .btn{ flex: 1 1 auto; }
  .proof{ display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); }
  .proof__item{ font-size: .78rem; line-height: 1.35; }
  .proof__figure{ font-size: 1.3rem; }
  .split-samen__photo{ min-height: 0; aspect-ratio: 4 / 3; }
}

@media (max-width: 640px){
  :root{ --fs-h1: clamp(1.75rem, 1.2rem + 3vw, 2.1rem); }
  .container{ padding-inline: 20px; }
  .section{ padding-block: var(--space-7); }
  .eyebrow{ letter-spacing: .14em; }
  .btn{ min-height: 48px; }
  .row .btn{ width: 100%; }
  .card{ padding: var(--space-5); }
  .quote{ padding: var(--space-5); }

  /* footer: logo bovenaan, links in twee kolommen */
  .site-footer .logo{ order: 0; margin: 0; }
  .site-footer__grid{ grid-template-columns: 1fr 1fr; gap: var(--space-6) var(--space-5); }
  .site-footer__grid > :first-child{ grid-column: 1 / -1; }
  .site-footer ul{ gap: .75em; }
}

/* ---------- locatiefoto op de locatiepagina's ---------- */
.locatie-intro{ align-items: center; }
.locatie-foto{ margin: 0; }
.locatie-foto img{
  width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: var(--t-radius-card); box-shadow: var(--t-shadow-card);
  background: var(--t-rose-soft);
}
@media (max-width: 860px){
  .locatie-foto{ order: -1; }
}

/* ---------- onderwerpkaarten (klikbaar, met omschrijving) ---------- */
.onderwerpen-grid--kaarten{
  display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: var(--space-4);
}
.onderwerpen-grid--smal{ grid-template-columns: 1fr; gap: var(--space-3); }
.onderwerp-kaart{
  position: relative; display: flex; flex-direction: column; gap: .35rem;
  text-decoration: none; color: var(--t-text);
  background: var(--t-white); border: 1px solid var(--t-line); border-radius: var(--t-radius-card);
  box-shadow: var(--t-shadow-card);
  padding: 1.1rem 1.25rem 1rem; min-height: 48px;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease), background-color .2s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.onderwerp-kaart__titel{ font-family: var(--t-font-display); font-weight: 700; color: var(--t-ink); font-size: 1.02rem; line-height: 1.3; }
.onderwerp-kaart__tekst{ font-size: .9rem; line-height: 1.5; color: var(--t-muted); }
.onderwerp-kaart__meer{ margin-top: auto; padding-top: .35rem; font-size: .78rem; font-weight: 600; color: var(--t-rose-dark); display: inline-flex; align-items: center; gap: .35em; }
.onderwerp-kaart__meer::after{ content: "\2192"; transition: transform .2s var(--ease); }
.onderwerp-kaart:hover{ border-color: var(--t-rose); color: var(--t-text); }
.onderwerp-kaart:hover .onderwerp-kaart__meer::after{ transform: translateX(4px); }
.onderwerp-kaart:focus-visible{ outline: 2.5px solid var(--t-rose-dark); outline-offset: 3px; }
/* de klik zelf: kaart drukt kort in */
.onderwerp-kaart:active{ transform: scale(.98); background: var(--t-blush); box-shadow: none; }
@media (hover: hover) and (prefers-reduced-motion: no-preference){
  .onderwerp-kaart:hover{ transform: translateY(-3px); box-shadow: 0 14px 30px rgba(60,30,30,.12); }
  .onderwerp-kaart:active{ transform: translateY(-1px) scale(.98); }
}
@media (max-width: 640px){
  .onderwerpen-grid--kaarten{ grid-template-columns: 1fr; gap: var(--space-3); }
}

/* foto bovenaan de onderwerpkaart (valt terug op een zacht roze vlak) */
.onderwerp-kaart{ overflow: hidden; }
.onderwerp-kaart__beeld{
  display: block; margin: -1.1rem -1.25rem .6rem; aspect-ratio: 16 / 9; overflow: hidden;
  background:
    radial-gradient(60% 80% at 80% 20%, rgba(255,255,255,.6), transparent 70%),
    linear-gradient(135deg, var(--t-rose-soft), var(--t-blush));
}
.onderwerp-kaart__beeld img{ width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
@media (hover: hover) and (prefers-reduced-motion: no-preference){
  .onderwerp-kaart:hover .onderwerp-kaart__beeld img{ transform: scale(1.04); }
}
.onderwerpen-grid--smal .onderwerp-kaart{ display: grid; grid-template-columns: 96px 1fr; column-gap: 1rem; align-items: start; }
.onderwerpen-grid--smal .onderwerp-kaart__beeld{ grid-row: 1 / span 3; margin: -1.1rem 0 -1rem -1.25rem; aspect-ratio: auto; height: calc(100% + 2.1rem); }

/* foto bovenaan een onderwerppagina: liggend, niet te hoog */
.container > .post__media{ max-width: 900px; }
.container > .post__media img{
  width: 100%; aspect-ratio: 16 / 9; max-height: 480px; object-fit: cover;
  border-radius: var(--t-radius-card); box-shadow: var(--t-shadow-card);
}

/* bij het bijsnijden liever de bovenkant houden (gezichten staan meestal hoog) */
.onderwerp-kaart__beeld img, .container > .post__media img{ object-position: 50% 30%; }