/*
Theme Name: Koen Engelenburg Child
Theme URI: https://koenengelenburg.nl
Description: Custom child theme voor Koen Engelenburg — Holistisch Creatief Therapeut. Brand tokens, signature elementen en block patterns. Gebouwd door Sircle Agency op basis van Kadence.
Author: Sircle Agency
Author URI: https://sircle.agency
Template: kadence
Version: 1.0.0
Requires PHP: 7.4
Text Domain: koen-engelenburg
*/

/* ============================================================
   BRAND TOKENS — officiële Koen-kleuren (sRGB)
============================================================ */
:root {
    /* Primair */
    --ke-gold:       #EBB33F;
    --ke-gold-deep:  #C9961F;
    --ke-paper:      #F3F1E9;
    --ke-paper-soft: #FAF8F1;
    --ke-cream:      #E8E3D2;
    --ke-ink:        #1F1F1F;
    --ke-ink-soft:   #4A4A4A;
    --ke-muted:      #8A8578;
    --ke-line:       #D6D0BC;

    /* Chakra-palette voor accent per dienst/niveau */
    --ke-purple:     #725271;
    --ke-pink:       #C2768D;
    --ke-blue:       #7BA7C8;
    --ke-olive:      #948752;
    --ke-peach:      #F7955F;
    --ke-terra:      #C75C3E;

    /* Typografie */
    --ke-font-display: "ArmorPiercing", "Impact", sans-serif;
    --ke-font-hand:    "MarydaleBlack", "Bradley Hand", cursive;
    --ke-font-body:    -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* ============================================================
   GLOBAL — body, headings, accents
============================================================ */
body {
    background: var(--ke-paper);
    color: var(--ke-ink);
    font-family: var(--ke-font-body);
}

h1, h2, h3, h4, h5,
.wp-block-heading {
    font-family: var(--ke-font-display);
    letter-spacing: 0.01em;
    line-height: 1.1;
    color: var(--ke-ink);
}

/* ============================================================
   SIGNATURE — eyebrow + handgeschreven accent
============================================================ */
.ke-eyebrow {
    font-family: var(--ke-font-hand);
    color: var(--ke-gold);
    font-size: 18px;
    margin-bottom: 8px;
    display: block;
}

.ke-hand {
    font-family: var(--ke-font-hand);
    color: var(--ke-gold);
}

.ke-rule {
    display: inline-block;
    width: 40px;
    height: 2px;
    background: var(--ke-gold);
    vertical-align: middle;
    margin: 14px 0;
}

/* ============================================================
   STAR — Koen's signature zon-mark als utility class
============================================================ */
.ke-star {
    display: inline-block;
    width: 26px;
    height: 26px;
    background: url("assets/images/star.svg") no-repeat center / contain;
    vertical-align: middle;
}
.ke-star.is-lg { width: 60px; height: 60px; }
.ke-star.is-xl { width: 180px; height: 180px; }

.ke-star.is-peach  { filter: hue-rotate(-15deg) saturate(1.2); }
.ke-star.is-purple { filter: hue-rotate(180deg) saturate(0.7); }
.ke-star.is-blue   { filter: hue-rotate(200deg) saturate(0.8); }
.ke-star.is-olive  { filter: hue-rotate(40deg) saturate(0.6) brightness(0.85); }
.ke-star.is-terra  { filter: hue-rotate(-30deg) saturate(1.3) brightness(0.85); }

/* ============================================================
   BLOCK PATTERN STYLES — herbruikbare componenten
============================================================ */

/* Card variants voor diensten / pakketten */
.ke-card {
    background: var(--ke-paper);
    border: 1px solid var(--ke-line);
    border-left: 6px solid var(--ke-gold);
    border-radius: 10px;
    padding: 36px 28px;
}
.ke-card.is-peach  { border-left-color: var(--ke-peach); }
.ke-card.is-blue   { border-left-color: var(--ke-blue); }
.ke-card.is-olive  { border-left-color: var(--ke-olive); }
.ke-card.is-purple { border-left-color: var(--ke-purple); }
.ke-card.is-terra  { border-left-color: var(--ke-terra); }
.ke-card.is-pink   { border-left-color: var(--ke-pink); }

/* B2B-CTA blok — donker purple paneel */
.ke-b2b {
    background: var(--ke-purple);
    color: var(--ke-paper);
    padding: 80px 60px;
    border-radius: 12px;
}
.ke-b2b h2, .ke-b2b h3 { color: var(--ke-paper); }
.ke-b2b .ke-eyebrow { color: #E8C5E0; }

/* Footer-CTA — donker met goud */
.ke-footer-cta {
    background: var(--ke-ink);
    color: var(--ke-paper);
    text-align: center;
    padding: 110px 60px;
    border-radius: 12px;
}
.ke-footer-cta h2 {
    color: var(--ke-gold);
    font-size: 76px;
    line-height: 1;
}

/* 5 holistische niveaus grid */
.ke-niveaus {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 18px;
}
.ke-niveau {
    background: var(--ke-paper);
    padding: 22px 18px;
    border-radius: 8px;
    border-top: 4px solid var(--ke-gold);
}
.ke-niveau:nth-child(1) { border-top-color: var(--ke-terra); }
.ke-niveau:nth-child(2) { border-top-color: var(--ke-peach); }
.ke-niveau:nth-child(3) { border-top-color: var(--ke-gold); }
.ke-niveau:nth-child(4) { border-top-color: var(--ke-olive); }
.ke-niveau:nth-child(5) { border-top-color: var(--ke-blue); }
.ke-niveau h4 {
    font-family: var(--ke-font-display);
    font-size: 22px;
    margin-bottom: 8px;
}
.ke-niveau p {
    font-size: 13px;
    color: var(--ke-ink-soft);
    line-height: 1.5;
}

@media (max-width: 900px) {
    .ke-niveaus { grid-template-columns: 1fr 1fr; }
}

/* ============================================================
   BUTTON — override Kadence defaults
   Kadence button class = .wp-block-button__link
   We forceren ink pill als brand-default
============================================================ */
.wp-block-button .wp-block-button__link,
.wp-block-button__link.wp-element-button {
    background-color: var(--ke-ink) !important;
    color: var(--ke-paper) !important;
    border: 2px solid var(--ke-ink) !important;
    border-radius: 30px !important;
    padding: 12px 26px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    transition: all 0.2s !important;
}
.wp-block-button .wp-block-button__link:hover {
    background-color: var(--ke-paper) !important;
    color: var(--ke-ink) !important;
}

/* Outline variant */
.wp-block-button.is-style-outline .wp-block-button__link {
    background-color: transparent !important;
    color: var(--ke-ink) !important;
    border: 2px solid var(--ke-ink) !important;
}
.wp-block-button.is-style-outline .wp-block-button__link:hover {
    background-color: var(--ke-ink) !important;
    color: var(--ke-paper) !important;
}

/* Gold variant via .has-gold-background-color */
.wp-block-button__link.has-gold-background-color {
    background-color: var(--ke-gold) !important;
    border-color: var(--ke-gold) !important;
    color: var(--ke-ink) !important;
}
.wp-block-button__link.has-gold-background-color:hover {
    background-color: var(--ke-gold-deep) !important;
    border-color: var(--ke-gold-deep) !important;
}

/* Paper variant op donkere achtergrond (footer-cta) */
.has-ink-background-color .wp-block-button.is-style-outline .wp-block-button__link {
    background-color: transparent !important;
    color: var(--ke-paper) !important;
    border: 2px solid var(--ke-paper) !important;
}

/* ============================================================
   HEADING COLOR OVERRIDES — Kadence vs onze brand-kleuren
============================================================ */
.wp-block-heading.has-gold-color,
h1.has-gold-color,
h2.has-gold-color,
h3.has-gold-color {
    color: var(--ke-gold) !important;
}
.wp-block-heading.has-paper-color,
h1.has-paper-color,
h2.has-paper-color {
    color: var(--ke-paper) !important;
}

/* Text color override voor inline paragraph color attrs */
.has-gold-color { color: var(--ke-gold) !important; }
.has-paper-color { color: var(--ke-paper) !important; }
.has-ink-color { color: var(--ke-ink) !important; }
.has-ink-soft-color { color: var(--ke-ink-soft) !important; }
.has-muted-color { color: var(--ke-muted) !important; }
.has-purple-color { color: var(--ke-purple) !important; }

/* Background color overrides */
.has-paper-background-color { background-color: var(--ke-paper) !important; }
.has-paper-soft-background-color { background-color: var(--ke-paper-soft) !important; }
.has-cream-background-color { background-color: var(--ke-cream) !important; }
.has-ink-background-color { background-color: var(--ke-ink) !important; }
.has-purple-background-color { background-color: var(--ke-purple) !important; }
.has-gold-background-color { background-color: var(--ke-gold) !important; }