/*
Theme Name: KnolsIT Child
Theme URI: https://knolsit.nl
Description: Child theme van Divi 5 voor KnolsIT. Alle maatwerk hoort hier, zodat Divi-updates niets overschrijven.
Author: KnolsIT
Template: Divi
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: knolsit-child
*/

/* ==========================================================================
   1. Design tokens
   Prefix `kit` komt overeen met css_prefix in .claude/divi5-toolkit.local.md.
   Dit zijn startwaarden - vervang ze door de echte huisstijl van KnolsIT.
   Divi's eigen Design Variables (Visual Builder) blijven daarnaast gewoon
   bruikbaar; deze tokens zijn voor wat je in CSS schrijft.
   ========================================================================== */

:root {
  /* Kleur - merk. Overgenomen uit template/KnolsIT-Topbalk.html. */
  --kit-color-ink: #2E294E;          /* hoofdkleur, menubalk donker      */
  --kit-color-ink-deep: #251F42;     /* servicebalk donkere variant      */
  --kit-color-accent: #E6551E;       /* oranje: knoppen, actieve pagina  */
  --kit-color-accent-hover: #C9450F;

  /* Kleur - tekst */
  --kit-color-text: #333333;
  --kit-color-heading: var(--kit-color-ink);
  --kit-color-on-dark-muted: #C9C6D8;   /* menu-items op donkere balk    */
  --kit-color-on-light-muted: #4A4758;  /* menu-items op witte balk      */

  /* Kleur - vlakken */
  --kit-color-surface: #FFFFFF;
  --kit-color-surface-alt: #F4F4F1;
  --kit-color-page: #FFFFFF;           /* de template zet body op wit (16 sep) */
  --kit-color-border: #E4E4E0;

  /* Typografie */
  --kit-font-body: 'Archivo', Helvetica, Arial, sans-serif;
  --kit-font-heading: var(--kit-font-body);
  --kit-font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Maatvoering. Het ontwerp gaat uit van 1440px paginabreedte met
     1200px inhoud en 40px binnenmarge. */
  --kit-container: 1280px;           /* 1200 inhoud + 2x 40 marge        */
  --kit-container-pad: 40px;
  --kit-space-section: clamp(3rem, 6vw, 7rem);
  --kit-space-block: clamp(1rem, 3vw, 2.5rem);
  --kit-radius: 8px;
  --kit-max-width-text: 60rem;

  /* Interactie */
  --kit-transition: 0.25s ease;
  --kit-focus-color: var(--kit-color-accent);
  --kit-focus-width: 3px;
}

/* ==========================================================================
   2. Beweging
   Respecteert de systeeminstelling "verminder beweging".
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   3. Maatwerk
   Zet hieronder je eigen regels. Twee dingen om te onthouden bij Divi 5:
   - Overschrijf knoppen met `body` ervoor en `!important`, anders wint Divi.
   - Gebruik eigen klassen via Advanced > Attributes, geen genummerde
     selectors als .et_pb_text_0 (die verschuiven zodra je modules verplaatst).

   Voorbeeld:

   body .et_pb_button.kit-btn--primary {
     background-color: var(--kit-color-primary) !important;
     border-color: var(--kit-color-primary) !important;
     color: #ffffff !important;
     border-radius: var(--kit-radius) !important;
     transition: background-color var(--kit-transition) !important;
   }

   body .et_pb_button.kit-btn--primary:hover {
     background-color: var(--kit-color-primary-hover) !important;
     border-color: var(--kit-color-primary-hover) !important;
   }
   ========================================================================== */