/*
Theme Name: Karakters in Kleur
Theme URI: https://karaktersinkleur.com
Author: Artilla van den Boogaart-Thissen
Description: Aangepast thema voor Karakters in Kleur® — Gedrag begrijpen, verbinding maken
Version: 1.0
Template: kadence
Text Domain: karaktersinkleur
*/

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,wght@0,300;0,400;0,600;0,700;1,300;1,400&family=DM+Sans:wght@300;400;500;600&display=swap');

:root {
  --rood:    #C0392B;
  --rood-l:  #FDECEA;
  --geel:    #D4A017;
  --geel-l:  #FEF9E7;
  --groen:   #27AE60;
  --groen-l: #EAFAF1;
  --blauw:   #2980B9;
  --blauw-l: #EBF5FB;
  --donker:  #2C3E50;
  --zand:    #F5F0E8;
  --zand-d:  #E8E0D0;
  --tekst:   #3D3530;
  --grijs:   #8B7D6B;
  --wit:     #FFFDF9;
  --radius:  12px;
  --shadow:  0 4px 24px rgba(44,62,80,.10);
}

/* ── BASIS ── */
body {
  font-family: 'DM Sans', sans-serif !important;
  background: var(--wit) !important;
  color: var(--tekst) !important;
  line-height: 1.7;
  font-size: 16px;
}

h1, h2, h3, h4, h5, h6,
.wp-block-heading {
  font-family: 'Fraunces', serif !important;
  font-weight: 600 !important;
  color: var(--donker) !important;
  line-height: 1.2;
}

h1 { font-size: clamp(2.4rem, 5vw, 4rem); }
h2 { font-size: clamp(1.8rem, 3vw, 2.6rem); }
h3 { font-size: 1.3rem; }

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

/* ── HEADER / NAV ── */
.site-header,
.kadence-sticky-header,
header.kadence-header {
  background: rgba(255,253,249,.95) !important;
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--zand-d) !important;
}

.site-branding .site-title,
.site-title a,
.kadence-logo-title {
  font-family: 'Fraunces', serif !important;
  font-weight: 700 !important;
  color: var(--donker) !important;
  font-size: 1.2rem !important;
}

/* Nav links */
.primary-navigation a,
.kadence-navigation a,
.nav-primary a {
  font-family: 'DM Sans', sans-serif !important;
  color: var(--grijs) !important;
  font-weight: 500;
  padding: 6px 14px;
  border-radius: 999px;
  transition: all .2s;
}
.primary-navigation a:hover,
.kadence-navigation a:hover {
  color: var(--donker) !important;
  background: var(--zand) !important;
}

/* Contact knop in nav */
.nav-cta a,
.button-nav a,
.kadence-menu-item-button a {
  background: var(--donker) !important;
  color: var(--wit) !important;
  border-radius: 999px !important;
  padding: 8px 20px !important;
}
.nav-cta a:hover {
  background: var(--rood) !important;
}

/* ── KNOPPEN ── */
.wp-block-button__link,
.btn, button[type="submit"],
.kadence-button {
  font-family: 'DM Sans', sans-serif !important;
  font-weight: 600 !important;
  border-radius: 999px !important;
  padding: 14px 28px !important;
  transition: all .25s !important;
}

.wp-block-button.is-style-fill .wp-block-button__link,
.btn-primary {
  background: var(--donker) !important;
  color: var(--wit) !important;
  border: none !important;
}
.wp-block-button.is-style-fill .wp-block-button__link:hover {
  background: var(--rood) !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(192,57,43,.25);
}

.wp-block-button.is-style-outline .wp-block-button__link {
  background: transparent !important;
  color: var(--donker) !important;
  border: 2px solid var(--zand-d) !important;
}
.wp-block-button.is-style-outline .wp-block-button__link:hover {
  border-color: var(--donker) !important;
  background: var(--zand) !important;
}

/* ── ACHTERGROND SECTIES ── */
.has-zand-background-color,
.bg-zand { background: var(--zand) !important; }
.has-donker-background-color,
.bg-donker { background: var(--donker) !important; color: var(--wit) !important; }

/* ── KLEURKAARTEN ── */
.kleur-kaart {
  padding: 20px;
  border-radius: var(--radius);
  transition: transform .25s, box-shadow .25s;
}
.kleur-kaart:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.k-rood  { background: var(--rood-l);  border: 1px solid #f5c6c0; }
.k-geel  { background: var(--geel-l);  border: 1px solid #f5e5a0; }
.k-groen { background: var(--groen-l); border: 1px solid #a9dfbf; }
.k-blauw { background: var(--blauw-l); border: 1px solid #aed6f1; }

/* ── HERO SECTIE ── */
.hero-sectie,
.wp-block-cover.hero {
  background: linear-gradient(160deg, var(--zand) 0%, var(--wit) 60%) !important;
  padding: 100px 0 80px;
}

/* ── BLOG KAARTEN ── */
.wp-block-post,
.entry-card,
article.type-post {
  background: var(--wit);
  border-radius: var(--radius);
  border: 1px solid var(--zand-d);
  overflow: hidden;
  transition: box-shadow .2s, transform .2s;
}
article.type-post:hover {
  box-shadow: var(--shadow);
  transform: translateY(-3px);
}

.entry-title a {
  font-family: 'Fraunces', serif !important;
  color: var(--donker) !important;
}
.entry-title a:hover { color: var(--rood) !important; }

.cat-links a,
.entry-categories a {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* Blog achtergrond */
.blog-sectie,
.archive,
main.blog {
  background: var(--zand);
}

/* ── FORMULIEREN ── */
input[type="text"],
input[type="email"],
input[type="tel"],
select,
textarea {
  width: 100%;
  padding: 12px 16px;
  border: 1.5px solid var(--zand-d) !important;
  border-radius: 8px !important;
  font-size: .9rem;
  font-family: 'DM Sans', sans-serif !important;
  color: var(--tekst);
  background: var(--wit) !important;
  transition: border-color .2s, box-shadow .2s;
  outline: none;
}
input:focus, textarea:focus, select:focus {
  border-color: var(--blauw) !important;
  box-shadow: 0 0 0 3px rgba(41,128,185,.1) !important;
}
textarea { resize: vertical; min-height: 120px; }

/* ── FOOTER ── */
.site-footer,
footer.site-footer {
  background: var(--donker) !important;
  color: rgba(255,255,255,.6) !important;
  padding: 64px 0 32px !important;
}
.site-footer a {
  color: rgba(255,255,255,.55) !important;
  font-size: .88rem;
}
.site-footer a:hover { color: var(--wit) !important; }
.site-footer h4,
.site-footer .widget-title {
  color: var(--wit) !important;
  font-size: .85rem !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.footer-bottom-wrap,
.site-footer .footer-bottom {
  border-top: 1px solid rgba(255,255,255,.1) !important;
  color: rgba(255,255,255,.4) !important;
  font-size: .82rem !important;
}

/* ── KLEUR LABELS / TAGS ── */
.tag-rood  { color: var(--rood) !important; }
.tag-geel  { color: var(--geel) !important; }
.tag-groen { color: var(--groen) !important; }
.tag-blauw { color: var(--blauw) !important; }

.cat-rood-profiel   a { color: var(--rood) !important; }
.cat-geel-profiel   a { color: var(--geel) !important; }
.cat-groen-profiel  a { color: var(--groen) !important; }
.cat-blauw-profiel  a { color: var(--blauw) !important; }
.cat-praktijktips   a { color: var(--grijs) !important; }

/* ── SOCIAL PROOF STRIP ── */
.strip {
  background: var(--donker);
  color: var(--wit);
  padding: 20px 0;
}
.strip-inner {
  display: flex;
  gap: 48px;
  justify-content: center;
  flex-wrap: wrap;
}
.strip-item { font-size: .9rem; opacity: .8; }
.strip-item strong { opacity: 1; font-weight: 600; }

/* ── ANIMATIES ── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
.fade-up   { animation: fadeUp .6s ease both; }
.fade-up-2 { animation: fadeUp .6s .15s ease both; }
.fade-up-3 { animation: fadeUp .6s .3s ease both; }

/* ── RESPONSIVE ── */
@media (max-width: 900px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .footer-grid { grid-template-columns: 1fr; }
}