/*
Theme Name: Club Mom
Theme URI: https://clubmom.nl
Author: Rowan Blijd, Buro Blijd
Description: Homepage-thema voor Club Mom. Ain't no hood like Motherhood.
Version: 6.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: club-mom
*/

:root {
  --rood:#E63329;
  --creme:#F0E8DE;
  --creme-licht:#F8F3EC;
  --inkt:#1A1614;
  --babyblauw:#7EB5D6;
  --roze:#F0A8B8;
  --lila:#B8A5D4;
  --limoen:#9ACD32;
  --fuchsia:#E6007E;
  --lijn:3px solid var(--inkt);
  --schaduw:7px 7px 0 var(--inkt);
  --schaduw-klein:5px 5px 0 var(--inkt);
  --display:'Fraunces','Cooper BT','Cooper Black',Georgia,serif;
  --body:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --grain:url(assets/images/grain.png);
}

*,*::before,*::after { box-sizing:border-box; }
body {
  margin:0; background:var(--creme); color:var(--inkt);
  font-family:var(--body); font-size:17px; line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
html { scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }

h1,h2,h3 {
  font-family:var(--display); font-weight:900; line-height:1.03;
  letter-spacing:-0.015em; text-wrap:balance; margin:0;
}
p { margin:0; }
img { max-width:100%; display:block; }
a { color:inherit; }
:focus-visible { outline:3px solid var(--fuchsia); outline-offset:3px; }

.band { padding-block:clamp(62px,7.5vw,110px); padding-inline:20px; position:relative; }
.wrap { max-width:1120px; margin-inline:auto; }

.korrel::before {
  content:''; position:absolute; inset:0; pointer-events:none;
  background-image:var(--grain); background-size:100px 100px;
  opacity:.22; mix-blend-mode:multiply;
}
.korrel > * { position:relative; z-index:1; }

.eyebrow {
  display:inline-block; font-weight:700; font-size:.75rem;
  text-transform:uppercase; letter-spacing:.16em; margin-bottom:18px;
}

/* ---------- knoppen ---------- */
.knop {
  display:inline-block; font-family:var(--display); font-weight:900;
  font-size:1.02rem; text-decoration:none; padding:14px 30px; cursor:pointer;
  border-radius:999px; border:var(--lijn); box-shadow:var(--schaduw-klein);
  transition:transform .12s ease, box-shadow .12s ease;
}
.knop:hover,.knop:focus-visible { transform:translate(3px,3px); box-shadow:1px 1px 0 var(--inkt); }
@media (prefers-reduced-motion:reduce) { .knop { transition:none; } }
.knop-rood { background:var(--rood); color:var(--creme-licht); }
.knop-creme { background:var(--creme-licht); color:var(--inkt); }
.knop-limoen { background:var(--limoen); color:var(--inkt); }
.knop-fuchsia { background:var(--fuchsia); color:var(--creme-licht); }
.knoprij { display:flex; flex-wrap:wrap; gap:14px; }
.tekstlink { font-weight:700; text-underline-offset:3px; }

/* ---------- nav ---------- */
nav {
  position:sticky; top:0; z-index:60; background:var(--creme);
  border-bottom:var(--lijn); padding:12px 20px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
nav .merk img { height:40px; width:auto; }
nav .links { display:flex; align-items:center; gap:22px; }
nav .links a:not(.knop) {
  text-decoration:none; font-weight:600; font-size:.92rem;
  border-bottom:2px solid transparent;
}
nav .links a:not(.knop):hover { border-bottom-color:var(--rood); }
nav .knop { padding:10px 22px; font-size:.92rem; }
@media (max-width:900px) { nav .links a:not(.knop) { display:none; } }

/* ---------- hero ---------- */
.hero { text-align:center; overflow:hidden; padding-block:clamp(54px,7vw,90px) clamp(46px,6vw,76px); }
.hero h1 { font-size:clamp(2.9rem,10vw,7rem); color:var(--rood); max-width:13ch; margin:0 auto 22px; }
.hero .sub { font-size:clamp(1.05rem,2vw,1.28rem); max-width:50ch; margin:0 auto 32px; }
.hero .heldlogo { height:clamp(78px,11vw,124px); width:auto; margin:0 auto 22px; }
.hero .knoprij { justify-content:center; }
.sticker {
  position:absolute; font-family:var(--display); font-weight:900; font-size:.92rem;
  padding:9px 18px; border-radius:999px; border:var(--lijn); box-shadow:3px 3px 0 var(--inkt);
  white-space:nowrap;
}
.sticker.s1 { background:var(--limoen); top:10%; left:5%; transform:rotate(-8deg); }
.sticker.s2 { background:var(--roze); top:20%; right:5%; transform:rotate(7deg); }
.sticker.s3 { background:var(--babyblauw); bottom:15%; left:8%; transform:rotate(5deg); }
.sticker.s4 { background:var(--lila); bottom:8%; right:7%; transform:rotate(-6deg); }
@media (max-width:1060px) { .sticker { display:none; } }

/* ---------- marquee ---------- */
.marquee { background:var(--rood); border-block:var(--lijn); overflow:hidden; padding:14px 0; }
.marquee-track { display:flex; gap:44px; width:max-content; animation:rol 30s linear infinite; }
.marquee-track span {
  font-family:var(--display); font-weight:900; font-size:1.3rem;
  color:var(--creme-licht); white-space:nowrap;
}
@keyframes rol { from { transform:translateX(0); } to { transform:translateX(-50%); } }
@media (prefers-reduced-motion:reduce) { .marquee-track { animation:none; } }

/* ---------- citaatband ---------- */
.citaat { background:var(--babyblauw); border-bottom:var(--lijn); }
.citaat-grid { display:grid; grid-template-columns:.95fr 1.05fr; gap:52px; align-items:center; }
.citaat-grid > * { min-width:0; }
.carrousel { min-width:0; }
@media (max-width:940px) { .citaat-grid { grid-template-columns:1fr; gap:38px; } }
.citaat blockquote {
  margin:0; font-family:var(--display); font-weight:700; font-style:italic;
  font-size:clamp(1.5rem,3.8vw,2.7rem); line-height:1.15; max-width:20ch;
}
.citaat cite {
  display:block; margin-top:16px; font-style:normal; font-family:var(--body);
  font-size:.9rem; font-weight:600; letter-spacing:.04em;
}
.citaat .antwoord {
  font-family:var(--display); font-weight:900; color:var(--rood);
  font-size:clamp(1.6rem,4vw,2.6rem); line-height:1.05; margin-top:32px; max-width:16ch;
}

/* ---------- showcase ---------- */
.raam { overflow:hidden; border:var(--lijn); border-radius:22px; background:var(--creme-licht); box-shadow:var(--schaduw); }
.spoor { display:flex; transition:transform .6s cubic-bezier(.4,0,.2,1); }
@media (prefers-reduced-motion:reduce) { .spoor { transition:none; } }
.slide { flex:0 0 100%; margin:0; position:relative; }
.slide img { width:100%; aspect-ratio:4/3; object-fit:cover; object-position:center 30%; }
.slide figcaption {
  padding:16px 22px; border-top:var(--lijn); background:var(--creme-licht);
  font-family:var(--display); font-weight:700; font-size:clamp(.98rem,1.8vw,1.2rem);
  color:var(--inkt);
}
@media (max-width:640px) { .slide img { aspect-ratio:4/5; } }
.bediening { display:flex; align-items:center; gap:12px; margin-top:18px; flex-wrap:wrap; }
.fotocredit { margin-top:12px; font-size:.82rem; font-weight:600; letter-spacing:.02em; }
.rond {
  width:44px; height:44px; flex:none; border-radius:50%; border:var(--lijn);
  background:var(--creme-licht); color:var(--inkt); font-size:1.1rem; line-height:1;
  cursor:pointer; font-family:var(--body); box-shadow:3px 3px 0 var(--inkt);
}
.rond:hover { background:var(--limoen); }
.dots { display:flex; gap:7px; flex-wrap:wrap; flex:1 1 200px; }
.dot { width:10px; height:10px; padding:0; border-radius:50%; cursor:pointer; border:2px solid var(--inkt); background:transparent; }
.dot[aria-selected="true"] { background:var(--rood); }
.teller { font-size:.85rem; font-weight:600; font-variant-numeric:tabular-nums; }

/* ---------- missie ---------- */
.missie { background:var(--creme-licht); border-bottom:var(--lijn); }
.missie h2 { font-size:clamp(2.1rem,5.4vw,3.5rem); color:var(--rood); max-width:15ch; }
.missie .kolommen { display:grid; grid-template-columns:1fr 1fr; gap:52px; margin-top:34px; }
.missie p { margin-bottom:18px; max-width:60ch; }
.missie .knal {
  font-family:var(--display); font-weight:900; font-style:italic;
  font-size:clamp(1.3rem,2.6vw,1.75rem); line-height:1.22;
  background:var(--limoen); border:var(--lijn); border-radius:24px;
  padding:30px 28px; box-shadow:var(--schaduw); transform:rotate(-1.2deg);
}
@media (max-width:880px) { .missie .kolommen { grid-template-columns:1fr; gap:32px; } }

/* ---------- pijlers ---------- */
.pijlers {
  border-bottom:var(--lijn); text-align:center;
  background:
    radial-gradient(50% 60% at 22% 30%, rgba(154,205,50,.55), transparent 70%),
    radial-gradient(50% 60% at 78% 26%, rgba(240,168,184,.8), transparent 70%),
    radial-gradient(60% 60% at 50% 92%, rgba(184,165,212,.75), transparent 72%),
    var(--creme-licht);
}
.pijlers h2 { font-size:clamp(2.1rem,5.4vw,3.4rem); }
.pijlers .intro { max-width:48ch; margin:18px auto 0; }
.pijler-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:26px; margin-top:50px; }
.pijler {
  background:var(--creme-licht); border:var(--lijn); border-radius:24px;
  padding:34px 26px 30px; box-shadow:var(--schaduw-klein);
  display:flex; flex-direction:column; align-items:center; gap:14px;
}
.pijler svg { width:62px; height:62px; }
.pijler h3 { font-size:1.42rem; color:var(--rood); }
.pijler p { font-size:.98rem; }

/* ---------- teaser ---------- */
.teaser { background:var(--fuchsia); color:var(--creme-licht); border-bottom:var(--lijn); }
.teaser .wrap { max-width:820px; text-align:center; }
.teaser .eyebrow { color:var(--creme-licht); }
.teaser h2 { color:var(--creme-licht); font-size:clamp(2rem,5.4vw,3.4rem); max-width:14ch; margin-inline:auto; }
.teaser p { margin:22px auto 0; max-width:44ch; font-size:1.06rem; }
.teaser .knoprij { justify-content:center; margin-top:32px; }

/* ---------- welkom / nieuwsbrief ---------- */
.welkom {
  border-bottom:var(--lijn);
  background:
    radial-gradient(60% 70% at 18% 22%, rgba(240,168,184,.95), transparent 68%),
    radial-gradient(55% 65% at 82% 18%, rgba(184,165,212,.95), transparent 66%),
    radial-gradient(65% 70% at 62% 88%, rgba(126,181,214,.9), transparent 70%),
    var(--creme-licht);
}
.welkom h2 { font-size:clamp(2.1rem,5.4vw,3.5rem); max-width:16ch; }
.welkom .lead { font-size:1.1rem; max-width:46ch; margin-top:20px; }
.welkom .kader {
  background:var(--creme-licht); border:var(--lijn); border-radius:26px;
  padding:34px 30px; box-shadow:var(--schaduw); max-width:440px;
}
.welkom .kader .gratis {
  display:inline-block; background:var(--limoen); border:2px solid var(--inkt);
  border-radius:999px; padding:5px 14px; font-weight:700; font-size:.78rem;
  text-transform:uppercase; letter-spacing:.1em; margin-bottom:16px;
}
.welkom .kader h3 { font-size:1.5rem; margin-bottom:12px; }
.welkom .kader p { font-size:1rem; margin-bottom:22px; }
.welkom .kader .onder { margin-top:16px; font-size:.94rem; }
.welkom-grid { display:grid; grid-template-columns:1.1fr .9fr; gap:56px; align-items:center; }
@media (max-width:880px) { .welkom-grid { grid-template-columns:1fr; gap:36px; } }

/* ---------- join the club ---------- */
.joinclub { background:var(--creme); border-bottom:var(--lijn); }
.joinclub h2 { font-size:clamp(2rem,5vw,3.2rem); color:var(--rood); }
.kaarten { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:24px; margin-top:42px; }
.kaart {
  border:var(--lijn); border-radius:24px; padding:30px 26px; box-shadow:var(--schaduw-klein);
  display:flex; flex-direction:column; gap:12px;
}
.kaart h3 { font-size:1.5rem; }
.kaart p { font-size:1rem; }
.kaart .k-link { margin-top:auto; padding-top:8px; font-weight:700; font-size:.93rem; }
.kaart.limoen { background:var(--limoen); }
.kaart.roze { background:var(--roze); }
.kaart.blauw { background:var(--babyblauw); }

/* ---------- over rowan ---------- */
.over {
  border-bottom:var(--lijn);
  background:
    radial-gradient(55% 65% at 85% 20%, rgba(154,205,50,.6), transparent 70%),
    radial-gradient(55% 60% at 12% 78%, rgba(126,181,214,.55), transparent 70%),
    var(--creme);
}
.over-grid { display:grid; grid-template-columns:1.15fr .85fr; gap:60px; align-items:start; }
.over blockquote {
  margin:0 0 20px; font-family:var(--display); font-weight:900; font-style:italic;
  font-size:clamp(1.7rem,4vw,2.6rem); line-height:1.08; color:var(--rood); max-width:16ch;
}
.over .bron { font-weight:700; font-size:.95rem; margin-bottom:24px; }
.over p.tekst { margin-bottom:16px; max-width:58ch; }
.polaroid {
  background:var(--creme-licht); border:var(--lijn); border-radius:10px;
  padding:12px 12px 16px; box-shadow:var(--schaduw); transform:rotate(2deg);
}
.polaroid img { border-radius:4px; width:100%; }
.polaroid .onderschrift { margin-top:12px; font-family:var(--display); font-weight:700; font-size:.95rem; text-align:center; }
.polaroid .credit { display:block; font-family:var(--body); font-weight:400; font-size:.78rem; opacity:.65; }
@media (max-width:900px) {
  .over-grid { grid-template-columns:1fr; gap:40px; }
  .polaroid { max-width:360px; margin-inline:auto; transform:rotate(1deg); }
}

/* ---------- podcast ---------- */
.podcast { background:var(--lila); border-bottom:var(--lijn); }
.podcast-grid { display:grid; grid-template-columns:.85fr 1.15fr; gap:56px; align-items:center; }
.podcast h2 { font-size:clamp(2rem,4.8vw,3.1rem); margin-bottom:18px; }
.podcast p { margin-bottom:16px; max-width:52ch; }
.hoes { border:var(--lijn); border-radius:22px; overflow:hidden; box-shadow:var(--schaduw); }
.hoes img { width:100%; aspect-ratio:1/1; object-fit:cover; }
@media (max-width:900px) {
  .podcast-grid { grid-template-columns:1fr; gap:34px; }
  .hoes { max-width:340px; margin-inline:auto; }
}

/* ---------- events ---------- */
.events { background:var(--babyblauw); border-bottom:var(--lijn); }
.events h2 { font-size:clamp(2rem,4.8vw,3.1rem); }
.events .intro { max-width:56ch; margin-top:16px; }
.fotostrip { display:flex; gap:26px; flex-wrap:wrap; justify-content:center; margin-top:46px; }
.fotostrip .polaroid { flex:1 1 260px; max-width:330px; }
.fotostrip .polaroid:nth-child(1) { transform:rotate(-3deg); }
.fotostrip .polaroid:nth-child(2) { transform:rotate(1.5deg); }
.fotostrip .polaroid:nth-child(3) { transform:rotate(-1.5deg); }
.fotostrip .polaroid img { aspect-ratio:4/5; object-fit:cover; }
.partners { margin-top:54px; text-align:center; }
.partners h3 { font-size:1.3rem; margin-bottom:18px; }
.partnerlijst { display:flex; flex-wrap:wrap; justify-content:center; gap:10px 0; font-weight:600; margin-bottom:26px; }
.partnerlijst span { padding:0 16px; position:relative; }
.partnerlijst span:not(:last-child)::after {
  content:''; position:absolute; right:0; top:50%; transform:translateY(-50%);
  width:5px; height:5px; border-radius:50%; background:var(--inkt);
}
@media (max-width:600px) { .partnerlijst span::after { display:none !important; } }

/* ---------- merch ---------- */
.merch { background:var(--creme); border-bottom:var(--lijn); }
.merch-grid { display:grid; grid-template-columns:1fr 1fr; gap:52px; align-items:center; }
.merch h2 { font-size:clamp(1.9rem,4.4vw,2.8rem); max-width:12ch; margin-bottom:16px; }
.merch p { max-width:44ch; margin-bottom:24px; }
.merch-fotos { display:grid; grid-template-columns:1fr 1fr; gap:18px; align-items:center; }
.merch-fotos .polaroid:first-child { transform:rotate(-2.5deg); }
.merch-fotos .polaroid:last-child { transform:rotate(2.5deg); }
.merch-fotos img { aspect-ratio:4/5; object-fit:cover; }
@media (max-width:880px) { .merch-grid { grid-template-columns:1fr; gap:34px; } }

/* ---------- slot ---------- */
.slot {
  border-bottom:var(--lijn); text-align:center;
  background:
    radial-gradient(55% 65% at 20% 25%, rgba(230,0,126,.5), transparent 70%),
    radial-gradient(55% 65% at 80% 30%, rgba(240,168,184,.9), transparent 70%),
    radial-gradient(60% 60% at 50% 95%, rgba(184,165,212,.85), transparent 72%),
    var(--creme-licht);
}
.slot h2 { font-size:clamp(2.4rem,7vw,4.6rem); color:var(--rood); max-width:12ch; margin-inline:auto; }
.slot p { font-size:1.15rem; margin:20px auto 32px; max-width:40ch; }
.slot .knoprij { justify-content:center; }

/* ---------- save the date ---------- */
.savethedate { background:var(--limoen); border-bottom:var(--lijn); }
.std-grid { display:grid; grid-template-columns:auto 1fr; gap:clamp(32px,6vw,72px); align-items:center; max-width:960px; }
.std-grid > * { min-width:0; }
.std-datum {
  font-family:var(--display); font-weight:900; text-align:center;
  background:var(--creme-licht); border:var(--lijn); border-radius:24px;
  box-shadow:var(--schaduw); padding:20px 34px 24px; transform:rotate(-2.5deg);
}
.std-datum .weekdag { display:block; font-family:var(--body); font-weight:700; font-size:.75rem; text-transform:uppercase; letter-spacing:.16em; }
.std-datum .dag { display:block; font-size:clamp(4.4rem,11vw,7rem); line-height:.95; color:var(--rood); font-variant-numeric:tabular-nums; }
.std-datum .maand { display:block; font-size:1.35rem; text-transform:uppercase; letter-spacing:.08em; }
.savethedate h2 { font-size:clamp(2.2rem,5.4vw,3.5rem); }
.std-feiten { display:flex; flex-wrap:wrap; gap:10px; margin-top:18px; }
.std-feiten span {
  font-weight:700; font-size:.95rem; background:var(--creme-licht);
  border:var(--lijn); border-radius:999px; padding:6px 16px;
}
.savethedate .std-tekst { margin-top:20px; max-width:46ch; font-size:1.06rem; }
.savethedate .knoprij { margin-top:28px; }
@media (max-width:720px) {
  .std-grid { grid-template-columns:1fr; justify-items:center; text-align:center; }
  .std-feiten, .savethedate .knoprij { justify-content:center; }
  .savethedate .std-tekst { margin-inline:auto; }
}

/* ---------- footer ---------- */
footer { background:var(--rood); color:var(--creme-licht); }
.footer-top { padding:60px 20px 38px; }
.footer-top .wrap { display:flex; flex-wrap:wrap; justify-content:space-between; gap:32px; }
.footer-merk { display:flex; align-items:center; gap:12px; margin-bottom:12px; }
.footer-merk img { height:38px; width:auto; background:var(--creme-licht); border-radius:8px; padding:4px; }
footer .payoff { font-family:var(--display); font-weight:900; font-size:1.25rem; }
footer .klein { font-size:.92rem; max-width:36ch; margin-top:8px; opacity:.92; }
footer .flinks { display:flex; flex-wrap:wrap; gap:8px 26px; align-items:flex-start; }
footer .flinks a { text-decoration:none; font-weight:600; font-size:.93rem; border-bottom:2px solid transparent; }
footer .flinks a:hover { border-bottom-color:var(--creme-licht); }
.ig-grid { display:grid; grid-template-columns:repeat(8,1fr); gap:3px; border-block:var(--lijn); }
.ig-grid img { width:100%; aspect-ratio:1/1; object-fit:cover; }
.ig-grid a:hover img { opacity:.85; }
@media (max-width:760px) { .ig-grid { grid-template-columns:repeat(4,1fr); } }
.footer-onder {
  padding:18px 20px; display:flex; flex-wrap:wrap; justify-content:space-between;
  gap:10px; font-size:.82rem; opacity:.9;
}