/* ============================================
   PURRCOSY — MERKSTIJLEN
   Plak dit volledige bestand in:
   WordPress-dashboard → Weergave → Aanpassen → Extra CSS
   ============================================ */

/* Lettertypen inladen (zelfde als huidig ontwerp) */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&family=JetBrains+Mono:wght@500;600&display=swap');

/* Merkkleuren als herbruikbare variabelen */
:root{
  --pc-ink:#1f2321;      /* hoofdtekstkleur (bijna zwart) */
  --pc-muted:#6b7370;    /* grijze, secundaire tekst */
  --pc-line:#e7eae8;     /* lijnen/randen */
  --pc-wash:#f5f7f6;     /* lichte achtergrondvlakken */
  --pc-mint:#7cc6a6;     /* accentkleur (groen/mint) */
  --pc-coral:#e89e8d;    /* accentkleur (koraal) */
  --pc-yellow:#ecc766;   /* accentkleur (geel) */
  --pc-radius:14px;
}

/* Basis lettertype voor de hele site */
body{
  font-family:'Manrope', system-ui, -apple-system, sans-serif;
  color:var(--pc-ink);
  line-height:1.55;
}

/* ---- Herbruikbare klassen ----
   Voeg deze klassenamen toe bij elk blok via:
   Bloekinstellingen (rechts) → Geavanceerd → Extra CSS-klasse(n) */

/* Kleine label boven een titel, bijv. "VOOR WIE THUISKOMT BIJ EEN KAT" */
.pc-kicker{
  font-size:.72rem;
  text-transform:uppercase;
  letter-spacing:.2em;
  font-weight:600;
  color:var(--pc-mint);
}

/* Grote uitgelichte titel (hero) */
.pc-display{
  font-size:clamp(2.6rem,6.2vw,5rem);
  line-height:.98;
  letter-spacing:-.025em;
  font-weight:600;
}

/* Sectietitel (grootte 1) */
.pc-h1{
  font-size:clamp(2rem,4.4vw,3.3rem);
  line-height:1.02;
  letter-spacing:-.02em;
  font-weight:600;
}

/* Sectietitel (grootte 2, iets kleiner) */
.pc-h2{
  font-size:clamp(1.45rem,2.7vw,2.15rem);
  line-height:1.1;
  letter-spacing:-.015em;
  font-weight:600;
}

/* Subtitel/lead-tekst onder een grote titel */
.pc-lead{
  font-size:clamp(1.05rem,1.7vw,1.35rem);
  line-height:1.5;
  color:var(--pc-muted);
  max-width:48ch;
}

/* Gewone paragraaftekst, iets gedempt van kleur */
.pc-p{
  color:var(--pc-muted);
  line-height:1.65;
}

/* Lichte achtergrondsectie (afwisseling wit/grijs tussen secties) */
.pc-wash{
  background:var(--pc-wash);
  padding:60px 0;
}

/* Zwarte, pilvormige hoofdknop */
.pc-btn a, .pc-btn .wp-block-button__link{
  background:var(--pc-ink) !important;
  color:#fff !important;
  border:none !important;
  border-radius:999px !important;
  padding:14px 26px !important;
  font-weight:600 !important;
  font-size:.95rem !important;
}

/* Omlijnde, transparante knop (secundaire actie) */
.pc-ghost a, .pc-ghost .wp-block-button__link{
  background:transparent !important;
  color:var(--pc-ink) !important;
  border:1px solid var(--pc-line) !important;
  border-radius:999px !important;
  padding:13px 26px !important;
  font-weight:600 !important;
  font-size:.95rem !important;
}