/*

Theme Name: Twents Carmel College
Template: kadence
Author: Cloudwise
Version: 1.0.0
Text Domain: carmel-theme
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
*/

/**
 * Alma College — thema op het Carmel design system.
 *
 * Kleuren, fonts en maten staan in css/variables.css. Basis-typografie,
 * kop-schakelaars, knoppen en sectie-afstand komen uit de plugin
 * (carmel-core: assets/css/design-system/). Header, footer en patronen
 * ook (assets/css/shared/).
 *
 * In dit bestand ALLEEN wat echt bij Alma hoort: schoolspecifieke vormen,
 * decoraties en kop-schakelaars voor eigen componenten. Geen font-size
 * met !important op koppen; gebruik de schakelaars, bv.:
 *     .mijn-component { --h3-size: var(--h1-size); }
 *
 * Opbouw
 *  1. Basis
 *  2. Knoppen
 *  3. Header & navigatie
 *  4. Breadcrumbs
 *  5. Secties & componenten
 *  6. Footer
 */


/* ================================================================
   1. Basis
   ================================================================ */

body {
    background-color: var(--carmel-color-bg);
}


/* ================================================================
   2. Knoppen (Figma "Components" → Button Large: 64px hoog, 32px
   padding, 16px tussenruimte, Poppins medium; mobiel 48 / 16 / 8)
   Afronding en kleuren komen uit de tokens via de plugin. Alleen
   tekstknoppen; icoonknoppen (zoeken, slider-pijlen) houden hun maat.
   ================================================================ */

/* Voorkant: a.kb-button > .kt-btn-inner-text + .kb-svg-icon-wrap.
   Editor: span.kt-button > .kt-button-text + .kt-btn-svg-icon. De regels
   hieronder dekken allebei, zodat knoppen in de editor er hetzelfde
   uitzien. */
:is(.kb-button, .kt-button).wp-block-button__link:has(:is(.kt-btn-inner-text, .kt-button-text)) {
    font-family: var(--carmel-font-body) !important;
    min-height: var(--alma-btn-height);
    padding: 0 var(--alma-btn-padding-x) !important;
    gap: var(--alma-btn-gap);
    align-items: center;
}

/* Pill met pijl (Figma Button "Pill"): de pijl staat in een rondje dat
   rechts tegen de rand van de knop zit (4px rand eromheen), tekst links
   met 32px ruimte en 24px tot het rondje. Het rondje heeft de tekstkleur
   van de knop, de pijl de achtergrondkleur: op licht een donkerblauwe
   knop met wit rondje, op het verloop een witte knop met donkerblauw
   rondje. */
:is(.kb-button, .kt-button).wp-block-button__link:has(:is(.kt-btn-inner-text, .kt-button-text)):has(:is(.kt-btn-icon-side-right, .kt-btn-side-right)) {
    padding: 0 var(--alma-btn-inset) 0 var(--alma-btn-padding-x) !important;
    gap: var(--alma-btn-icon-gap) !important;
    /* hover (plugin buttons.js, "circle-animatie"): de pijl schuift door
       het rondje, het rondje krimpt even en veert terug */
    --carmel-btn-arrow-anim: in-rondje;

    :is(.kb-svg-icon-wrap, .kt-btn-svg-icon) {
        overflow: hidden;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: calc(var(--alma-btn-height) - 2 * var(--alma-btn-inset));
        height: calc(var(--alma-btn-height) - 2 * var(--alma-btn-inset));
        border-radius: 50%;
        background-color: var(--carmel-color-btn-primary-text);
        color: var(--carmel-color-btn-primary-bg);
        flex-shrink: 0;

        svg {
            width: 16px !important;
            height: 16px !important;
        }

        svg path {
            stroke: currentColor !important;
        }
    }
}

/* Secundaire knop: "gradient-animatie" (Figma Motion, Buttons). Bij hover
   komt vanuit het midden een roze gloed op die zachtjes ademt; bij
   weggaan vervaagt hij weer. Puur CSS: een ::before onder de tekst. */
:is(.kb-button, .kt-button).wp-block-button__link.button-style-secondary {
    position: relative;
    isolation: isolate;
    overflow: hidden;

    &::before {
        content: '';
        position: absolute;
        inset: -30% 18%; /* smaller dan de knop: gloed in het midden */
        z-index: -1;
        background: radial-gradient(closest-side, var(--alma-roze) 0%, rgba(229, 0, 126, 0) 100%);
        opacity: 0;
        transform: scale(0.6);
        transition: opacity 0.4s ease, transform 0.4s ease;
        pointer-events: none;
    }

    &:is(:hover, :focus-visible)::before {
        opacity: 1;
        transform: scale(1);
        animation: alma-btn-gloed 1.2s ease-in-out 0.4s infinite alternate;
    }
}

@keyframes alma-btn-gloed {
    from { transform: scale(1); }
    to   { transform: scale(0.75); }
}

@media (prefers-reduced-motion: reduce) {
    :is(.kb-button, .kt-button).wp-block-button__link.button-style-secondary:is(:hover, :focus-visible)::before {
        animation: none;
    }
}


/* ================================================================
   3. Header & navigatie
   ================================================================ */


/* ================================================================
   4. Breadcrumbs (plugin: Carmel instellingen → Breadcrumbs)
   De plugin kiest zelf tussen deze twee op basis van de achtergrond.
   ================================================================ */

:root {
    --carmel-breadcrumbs-color-on-light: var(--alma-donker-blauw);
    --carmel-breadcrumbs-color-on-dark: var(--alma-ac-grijs);
}


/* ================================================================
   5. Secties & componenten
   ================================================================ */

/* Label (Figma UI Components → Label): een ring in plaats van een vol
   bolletje, licht blauw; tekst Poppins medium. Op het verloop wordt de
   tekst wit (hero-_basis.css). Voor de roze variant: geef het label de
   extra klasse "label-roze". */
.carmel-label__dot {
    width: 12px;
    height: 12px;
    background: transparent !important;
    border: 2px solid var(--alma-licht-blauw);
    box-sizing: border-box;
}

.label-roze .carmel-label__dot {
    border-color: var(--alma-roze);
}

.carmel-label__text {
    font-family: var(--carmel-font-body);
    font-weight: var(--carmel-font-weight-medium);
    color: var(--alma-donker-blauw);
}


/* ================================================================
   6. Footer
   ================================================================ */