/**
 * Carmel design system — typografie en knoppen.
 *
 * Alleen geladen met add_theme_support( 'carmel-design-system' ), na
 * tokens.css. Gebaseerd op het systeem dat CCS en BCE allebei gebruiken
 * ("schakelaars"): elke kop leest een eigen variabele (--h2-size, ...).
 * Een component herdefinieert alleen die variabele, zonder !important:
 *
 *     .mijn-sectie { --h3-size: var(--h1-size); }
 *
 * De enige !important-regels voor koppen en tekst staan hier — Kadence
 * gebruikt specifiekere selectors (.entry-content h1) die anders winnen.
 */

/* ================================================================
   1. SCHAKELAARS
   ================================================================ */
:where(body:not(.wp-admin):not(.wp-customizer), .editor-styles-wrapper) {
    --h1-size: var(--carmel-font-size-h1);
    --h1-line-height: var(--carmel-line-height-h1);
    --h1-letter-spacing: var(--carmel-letter-spacing-h1);
    --h1-weight: var(--carmel-font-weight-h1);

    --h2-size: var(--carmel-font-size-h2);
    --h2-line-height: var(--carmel-line-height-h2);
    --h2-letter-spacing: var(--carmel-letter-spacing-h2);
    --h2-weight: var(--carmel-font-weight-h2);

    --h3-size: var(--carmel-font-size-h3);
    --h3-line-height: var(--carmel-line-height-h3);
    --h3-letter-spacing: var(--carmel-letter-spacing-h3);
    --h3-weight: var(--carmel-font-weight-h3);

    --h4-size: var(--carmel-font-size-h4);
    --h4-line-height: var(--carmel-line-height-h4);
    --h4-letter-spacing: var(--carmel-letter-spacing-h4);
    --h4-weight: var(--carmel-font-weight-h4);

    --h5-size: var(--carmel-font-size-h5);
    --h5-line-height: var(--carmel-line-height-h5);
    --h5-letter-spacing: var(--carmel-letter-spacing-h5);
    --h5-weight: var(--carmel-font-weight-h5);

    --h6-size: var(--carmel-font-size-h6);
    --h6-line-height: var(--carmel-line-height-h6);
    --h6-letter-spacing: var(--carmel-letter-spacing-h6);
    --h6-weight: var(--carmel-font-weight-h6);

    --display1-size: var(--carmel-font-size-display1);
    --display1-line-height: var(--carmel-line-height-display1);
    --display1-letter-spacing: var(--carmel-letter-spacing-display1);
    --display1-weight: var(--carmel-font-weight-display1);

    --display2-size: var(--carmel-font-size-display2);
    --display2-line-height: var(--carmel-line-height-display2);
    --display2-letter-spacing: var(--carmel-letter-spacing-display2);
    --display2-weight: var(--carmel-font-weight-display2);

    --body-size: var(--carmel-font-size-body-large);
    --body-line-height: var(--carmel-line-height-body-large);
    --body-letter-spacing: var(--carmel-letter-spacing-body-large);
    --body-weight: var(--carmel-font-weight-regular);
    --body-color: var(--carmel-color-text);

    /* Verticale ruimte tussen secties */
    --section-gap: 120px;
}

@media (max-width: 1024px) {
    :where(body:not(.wp-admin):not(.wp-customizer), .editor-styles-wrapper) {
        --section-gap: var(--carmel-space-xl);
    }
}

/* Mobiel: line-height blijft procentueel gelijk aan desktop */
@media (max-width: 782px) {
    :where(body:not(.wp-admin):not(.wp-customizer), .editor-styles-wrapper) {
        --h1-size: var(--carmel-font-size-h1-mobile);
        --h1-letter-spacing: var(--carmel-letter-spacing-h1-mobile);
        --h2-size: var(--carmel-font-size-h2-mobile);
        --h2-letter-spacing: var(--carmel-letter-spacing-h2-mobile);
        --h3-size: var(--carmel-font-size-h3-mobile);
        --h3-letter-spacing: var(--carmel-letter-spacing-h3-mobile);
        --h4-size: var(--carmel-font-size-h4-mobile);
        --h5-size: var(--carmel-font-size-h5-mobile);
        --h6-size: var(--carmel-font-size-h6-mobile);
        --display1-size: var(--carmel-font-size-display1-mobile);
        --display1-letter-spacing: var(--carmel-letter-spacing-display1-mobile);
        --display2-size: var(--carmel-font-size-display2-mobile);
        --display2-letter-spacing: var(--carmel-letter-spacing-display2-mobile);
        --body-size: var(--carmel-font-size-body-large-mobile);
    }
}


/* ================================================================
   2. BASIS-TYPOGRAFIE
   ================================================================ */
:where(body:not(.wp-admin):not(.wp-customizer), .editor-styles-wrapper) :is(h1, h2, h3, h4, h5, h6) {
    font-family: var(--carmel-font-heading) !important;
    overflow-wrap: break-word;
    hyphens: auto;
}

/* Kleur en marge bewust zonder !important en zonder specificiteit:
   elk component kan ze gewoon overschrijven (bv. een witte kop in een
   gekleurd blok). */
:where(body:not(.wp-admin):not(.wp-customizer), .editor-styles-wrapper) :where(h1, h2, h3, h4, h5, h6) {
    color: var(--carmel-color-heading);
    margin: 0 0 var(--carmel-space-sm);
}

:where(body:not(.wp-admin):not(.wp-customizer), .editor-styles-wrapper) h1 {
    font-size: var(--h1-size) !important;
    line-height: var(--h1-line-height) !important;
    letter-spacing: var(--h1-letter-spacing) !important;
    font-weight: var(--h1-weight) !important;
}
:where(body:not(.wp-admin):not(.wp-customizer), .editor-styles-wrapper) h2 {
    font-size: var(--h2-size) !important;
    line-height: var(--h2-line-height) !important;
    letter-spacing: var(--h2-letter-spacing) !important;
    font-weight: var(--h2-weight) !important;
}
:where(body:not(.wp-admin):not(.wp-customizer), .editor-styles-wrapper) h3 {
    font-size: var(--h3-size) !important;
    line-height: var(--h3-line-height) !important;
    letter-spacing: var(--h3-letter-spacing) !important;
    font-weight: var(--h3-weight) !important;
}
:where(body:not(.wp-admin):not(.wp-customizer), .editor-styles-wrapper) h4 {
    font-size: var(--h4-size) !important;
    line-height: var(--h4-line-height) !important;
    letter-spacing: var(--h4-letter-spacing) !important;
    font-weight: var(--h4-weight) !important;
}
:where(body:not(.wp-admin):not(.wp-customizer), .editor-styles-wrapper) h5 {
    font-size: var(--h5-size) !important;
    line-height: var(--h5-line-height) !important;
    letter-spacing: var(--h5-letter-spacing) !important;
    font-weight: var(--h5-weight) !important;
}
:where(body:not(.wp-admin):not(.wp-customizer), .editor-styles-wrapper) h6 {
    font-size: var(--h6-size) !important;
    line-height: var(--h6-line-height) !important;
    letter-spacing: var(--h6-letter-spacing) !important;
    font-weight: var(--h6-weight) !important;
}

:where(body:not(.wp-admin):not(.wp-customizer), .editor-styles-wrapper),
:where(body:not(.wp-admin):not(.wp-customizer), .editor-styles-wrapper) :is(p, ul, ol, li) {
    font-family: var(--carmel-font-body) !important;
    font-weight: var(--body-weight) !important;
    font-size: var(--body-size) !important;
    letter-spacing: var(--body-letter-spacing) !important;
    line-height: var(--body-line-height) !important;
    color: var(--body-color) !important;
}

/* Standaard 24px onder alinea's (Kadence: 32px) */
body .single-content p {
    margin-bottom: var(--carmel-space-md);
}

/* Tekst-varianten zonder eigen HTML-element */
.carmel-text-body-medium { font-size: var(--carmel-font-size-body-medium) !important; }
.carmel-text-caption     { font-size: var(--carmel-font-size-caption) !important; }
.carmel-text-eyebrow     { font-size: var(--carmel-font-size-eyebrow) !important; }

.carmel-display-1,
.carmel-display-2 {
    font-family: var(--carmel-font-heading) !important;
}

.carmel-display-1 {
    font-size: var(--display1-size) !important;
    line-height: var(--display1-line-height) !important;
    letter-spacing: var(--display1-letter-spacing) !important;
    font-weight: var(--display1-weight) !important;
}

.carmel-display-2 {
    font-size: var(--display2-size) !important;
    line-height: var(--display2-line-height) !important;
    letter-spacing: var(--display2-letter-spacing) !important;
    font-weight: var(--display2-weight) !important;
}

/* Op een sectie: de h1 daarbinnen wordt Display 1 */
.carmel-hero-uses-display1,
.bighero,
.ptrn-herobigimage {
    --h1-size: var(--display1-size);
    --h1-line-height: var(--display1-line-height);
    --h1-letter-spacing: var(--display1-letter-spacing);
    --h1-weight: var(--display1-weight);
}

/* Kop-schakelaars van plugin-blokken: deze blokken tonen een ander
   kopniveau dan hun HTML-element (zelfde keuze in CCS en BCE). */
.cta-pattern,
.cta-pattern-wide {
    --h2-size: var(--h1-size);
    --h2-line-height: var(--h1-line-height);
    --h2-letter-spacing: var(--h1-letter-spacing);
    --h3-size: var(--h1-size);
    --h3-line-height: var(--h1-line-height);
    --h3-letter-spacing: var(--h1-letter-spacing);
}
.carmel-faq-accordion__category-title {
    --h5-size: var(--h3-size);
    --h5-line-height: var(--h3-line-height);
    --h5-letter-spacing: var(--h3-letter-spacing);
}
.carmel-faq-accordion__question-text {
    --h6-size: var(--h5-size);
    --h6-line-height: var(--h5-line-height);
    --h6-letter-spacing: var(--h5-letter-spacing);
    --h6-weight: var(--h5-weight);
}
.carmel-team-slider__name,
.carmel-team-grid__name {
    --h3-size: var(--h4-size);
    --h3-line-height: var(--h4-line-height);
    --h3-letter-spacing: var(--h4-letter-spacing);
}


/* ================================================================
   3. KNOPPEN
   ================================================================ */
.kb-button.wp-block-button__link,
.wp-block-search__button {
    font-family: var(--carmel-font-heading) !important;
    font-size: var(--carmel-font-size-button-large) !important;
    font-weight: var(--carmel-font-weight-medium) !important;
    border-radius: var(--carmel-btn-radius) !important;
    padding: var(--carmel-btn-padding) !important;
}

.kb-button.wp-block-button__link {
    background-color: var(--carmel-color-btn-primary-bg) !important;
    color: var(--carmel-color-btn-primary-text) !important;
}

.kb-button.wp-block-button__link.button-style-secondary {
    background-color: var(--carmel-color-btn-secondary-bg) !important;
    color: var(--carmel-color-btn-secondary-text) !important;
    border: 1px solid var(--carmel-color-btn-secondary-border) !important;
}


/* ================================================================
   4. SECTIES
   ================================================================ */
.wp-block-kadence-rowlayout {
    margin-bottom: var(--section-gap);
}