/* ==========================================================================
   Voordeelacties v1.34 — Human layer
   Doel: minder "AI-template", meer handgemaakt redactioneel gevoel.
   Warmer papierwit, redactionele koppen, rustiger ritme, zachtere randen,
   subtiele diepte in plaats van harde schaduwen en neon-accenten.
   Laadt als laatste, zodat dit de finale toon zet.
   ========================================================================== */

:root {
  /* Warmere, minder digitale basis */
  --kk-bg: #f4f1ec;
  --kk-surface: #fffdfa;
  --kk-surface-soft: #f8f5f0;
  --kk-text: #23201d;
  --kk-muted: #6d675f;
  --kk-border: #e6e0d6;
  --kk-border-strong: #d6cec1;
  --kk-brand: #17233f;
  --kk-brand-dark: #0f1a30;
  --kk-accent: #d9483f;
  --kk-accent-hover: #bf3a33;
  --kk-accent-soft: #fbeeea;
  --kk-success: #1f7a56;
  --kk-radius: 12px;
  --kk-radius-sm: 9px;
  --kk-shadow: 0 1px 1px rgba(35, 32, 29, .04);
  --kk-shadow-lg: 0 18px 40px -32px rgba(35, 32, 29, .45);
  --kk-font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --kk-font-body: "Inter", "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
}

html { background: var(--kk-bg); }

body {
  font-family: var(--kk-font-body);
  font-size: 16.5px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.kk-site-shell {
  border-radius: 18px;
  border-color: var(--kk-border);
  box-shadow: 0 30px 60px -55px rgba(35, 32, 29, .55);
}

#kk-main { background: var(--kk-surface); }

/* --- Typografie: redactioneel, niet marketing-generiek ------------------- */
h1, h2, h3, h4 {
  font-family: var(--kk-font-display);
  font-weight: 600;
  letter-spacing: -.012em;
  color: var(--kk-brand);
}
h1 { line-height: 1.06; }
h2 { line-height: 1.14; }
h3 { font-family: var(--kk-font-body); font-weight: 700; letter-spacing: -.005em; }

p { color: var(--kk-text); }
.kk-section__sub,
.kk-muted { color: var(--kk-muted); }

/* Eyebrows: kleine handgeschreven-achtige kapitalen i.p.v. schreeuwende chips */
.kk-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 6px;
  padding: 0;
  background: none;
  border: 0;
  color: var(--kk-accent);
  font-family: var(--kk-font-body);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.kk-eyebrow::before {
  content: "";
  width: 18px;
  height: 1px;
  background: currentColor;
  opacity: .55;
}

/* --- Hero: rustiger, met ademruimte ------------------------------------- */
.kk-hero { background: var(--kk-surface); }
.kk-hero > .kk-container { padding-top: 62px; padding-bottom: 44px; }
.kk-hero h1 {
  max-width: 17ch;
  font-size: clamp(2.35rem, 4.4vw, 3.5rem);
  letter-spacing: -.02em;
}
.kk-hero__accent {
  color: var(--kk-brand);
  background-image: linear-gradient(transparent 62%, rgba(217, 72, 63, .22) 62%);
  background-repeat: no-repeat;
  padding-inline: .06em;
}
.kk-hero > .kk-container > p:not(.kk-hero__disclosure) {
  max-width: 58ch;
  font-size: 1.06rem;
  color: var(--kk-muted);
}

.kk-hero__routes { gap: 10px; margin-top: 16px; }
.kk-route {
  border: 1px solid var(--kk-border);
  border-radius: var(--kk-radius);
  background: var(--kk-surface-soft);
  color: var(--kk-brand);
  transition: transform .16s ease, border-color .16s ease, background .16s ease;
}
.kk-route:hover {
  transform: translateY(-1px);
  border-color: var(--kk-border-strong);
  background: var(--kk-surface);
  text-decoration: none;
}
.kk-route__icon { opacity: .8; }

/* Trustregel: als zin, niet als badge-rij */
.kk-hero__trust {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin-top: 18px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--kk-muted);
}
.kk-hero__trust li {
  min-height: 0;
  padding: 0;
  border: 0 !important;
  font-size: .84rem;
  font-weight: 500;
  color: var(--kk-muted);
}
.kk-hero__trust li::before {
  content: "\2713";
  width: auto;
  height: auto;
  margin-right: 6px;
  border: 0;
  background: none;
  color: var(--kk-success);
  font-size: .8rem;
}
.kk-hero__disclosure { color: var(--kk-muted) !important; opacity: .85; }

/* --- Kaarten: papier, geen glossy SaaS-tegels --------------------------- */
.kk-coupon-card,
.kk-store-card,
.kk-card,
.kk-product-card {
  border: 1px solid var(--kk-border);
  border-radius: var(--kk-radius);
  background: var(--kk-surface);
  box-shadow: var(--kk-shadow);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.kk-coupon-card:hover,
.kk-store-card:hover,
.kk-product-card:hover {
  transform: translateY(-2px);
  border-color: var(--kk-border-strong);
  box-shadow: 0 16px 30px -26px rgba(35, 32, 29, .5);
}

.kk-coupon-card__title,
.kk-product-card__title { font-family: var(--kk-font-body); font-weight: 700; letter-spacing: -.005em; }

/* Kortingcode: bonnetje-gevoel */
.kk-code,
.kk-coupon-card__code {
  border-style: dashed;
  border-color: var(--kk-border-strong);
  background: repeating-linear-gradient(135deg, #fffdfa, #fffdfa 8px, #faf6f0 8px, #faf6f0 16px);
  color: var(--kk-brand);
}

/* --- Knoppen: vast, kalm, geen gradient-glow ---------------------------- */
.kk-btn,
.kk-btn--primary,
.kk-btn--ghost,
.kk-header__cta {
  border-radius: 10px;
  font-family: var(--kk-font-body);
  font-weight: 700;
  letter-spacing: 0;
  box-shadow: none;
  transition: background .16s ease, color .16s ease, border-color .16s ease, transform .12s ease;
}
.kk-btn--primary,
.kk-header__cta { background: var(--kk-accent); }
.kk-btn--primary:hover,
.kk-header__cta:hover { background: var(--kk-accent-hover); }
.kk-btn:active { transform: translateY(1px); }
.kk-btn--ghost {
  border: 1px solid var(--kk-border-strong);
  background: transparent;
  color: var(--kk-brand);
}
.kk-btn--ghost:hover { background: var(--kk-surface-soft); }

/* --- Navigatie & chips --------------------------------------------------- */
.kk-header,
.kk-header--sticky {
  background: color-mix(in srgb, var(--kk-surface) 94%, transparent);
  border-radius: 18px 18px 0 0;
}
.kk-header .kk-nav .kk-menu > li > a { font-size: .875rem; font-weight: 600; color: #55504a; }
.kk-catbar__chip { font-size: .8rem; font-weight: 600; }
.kk-tab { font-family: var(--kk-font-body); font-weight: 600; }

/* --- Ritme: minder strak raster, meer leesritme ------------------------- */
.kk-section,
.kk-page { padding-block: 52px; }
.kk-section__head { margin-bottom: 22px; }
.kk-section + .kk-section { border-top: 1px solid var(--kk-border); }

/* Zachte scheiding i.p.v. harde blokken */
.kk-empty {
  border: 1px dashed var(--kk-border-strong);
  border-radius: var(--kk-radius);
  background: var(--kk-surface-soft);
}

/* --- Footer -------------------------------------------------------------- */
.kk-footer { background: var(--kk-surface-soft); border-top: 1px solid var(--kk-border); color: var(--kk-muted); }
.kk-footer a { color: var(--kk-brand); }

/* --- Toegankelijkheid & motion ------------------------------------------ */
:where(a, button, input, select, textarea, summary):focus-visible {
  outline: 2px solid var(--kk-accent);
  outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

@media (max-width: 720px) {
  .kk-hero > .kk-container { padding-top: 40px; padding-bottom: 32px; }
  .kk-hero h1 { max-width: none; }
  .kk-section, .kk-page { padding-block: 38px; }
}

:root { --kk-font: var(--kk-font-body); }