/*
 * Gebruik zoveel mogelijk nested CSS
 * Meer informatie: https://www.w3schools.com/cssref/sel_nesting.php
 */

/* ==========================================================================
   Kozijnhuis Goirle — globale stylesheet
   --------------------------------------------------------------------------
   BELANGRIJK — laadvolgorde

   Dit bestand wordt door de awcf-module als LAATSTE stylesheet ingeladen,
   ná elementor-frontend, ná de kit (post-6.css) en ná de per-pagina CSS
   (post-30.css, post-26.css, ...). Alles wat hier staat wint dus van wat je
   in de Elementor-editor instelt.

   Daarom is de regel voor dit bestand: het mag niets stylen wat Elementor
   zelf al kan. Geen sectiepadding, geen marges op widgets, geen
   afbeeldingsradius, geen tekstbreedtes, geen kleuren op widgets. Zet je dat
   hier toch, dan kun je het in de editor niet meer corrigeren en lijkt
   Elementor stuk.

   Wat hier wél hoort:
     1. Een reset en tokens
     2. Toegankelijkheid — focus, skip-link, reduced motion, contrast
     3. Basistypografie voor tekst die NIET uit een Elementor-widget komt
        (de posttekst op de detailpagina's)
     4. Print
     5. Opt-in hulpklassen (kg-*) die je zelf op een element zet via
        Geavanceerd → CSS Classes. Die doen niets tenzij je ze toepast.

   Merkkleuren en lettertypen staan hier niet hardcoded. Alles leest uit de
   Elementor-globals: --e-global-color-* en --e-global-typography-*.
   Verander je de globals, dan verandert dit mee.

   Browsers: CSS-nesting en color-mix(), beide Baseline sinds eind 2023.
   ========================================================================== */


/* ==========================================================================
   1. Tokens
   ========================================================================== */

:root {

  /* Afgeleide vlakken en lijnen, getint met de merkkleur */
  --aw-surface:        #ffffff;
  --aw-surface-muted:  var(--e-global-color-surface);
  --aw-surface-sunken: color-mix(in srgb, var(--e-global-color-secondary) 4%, #ffffff);
  --aw-line:           var(--e-global-color-line);
  --aw-text-invert:    #ffffff;

  --aw-text-sm:  clamp(0.875rem, 0.85rem + 0.15vw, 0.9375rem);
  --aw-text-xl:  clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
  --aw-text-2xl: clamp(1.5rem, 1.32rem + 0.9vw, 2rem);

  --aw-space-2xs: 0.5rem;
  --aw-space-sm:  1rem;
  --aw-space-lg:  2rem;
  --aw-space-xl:  3rem;

  --aw-radius-md: 8px;
  --aw-radius-lg: 16px;

  --aw-shadow-md: 0 4px 12px color-mix(in srgb, var(--e-global-color-secondary) 12%, transparent);

  --aw-ease: cubic-bezier(0.2, 0, 0.2, 1);
  --aw-duration: 180ms;
}


/* ==========================================================================
   2. Reset
   --------------------------------------------------------------------------
   Alleen wat geen enkele Elementor-control raakt.
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: var(--aw-space-xl);
}

img,
picture,
video,
canvas,
svg {
  max-width: 100%;
  height: auto;
}

figure {
  margin: 0;
}


/* ==========================================================================
   3. Toegankelijkheid
   --------------------------------------------------------------------------
   Dit is de enige plek waar overschrijven de bedoeling is: Elementor en
   Hello zetten op sommige elementen outline:none, en dat maakt de site
   onbruikbaar met een toetsenbord.
   ========================================================================== */

:focus-visible {
  outline: 3px solid var(--e-global-color-accent);
  outline-offset: 2px;
}

.elementor a:focus-visible,
.elementor button:focus-visible,
.elementor input:focus-visible,
.elementor select:focus-visible,
.elementor textarea:focus-visible {
  outline: 3px solid var(--e-global-color-accent);
  outline-offset: 2px;
}

/* Skip-link van Hello Elementor zichtbaar maken zodra hij focus krijgt */
.skip-link:focus {
  z-index: 100000;
  top: var(--aw-space-2xs);
  left: var(--aw-space-2xs);
  padding: var(--aw-space-2xs) var(--aw-space-sm);
  border-radius: 4px;
  background-color: var(--aw-surface);
  box-shadow: var(--aw-shadow-md);
  color: var(--e-global-color-secondary);
  font-size: var(--aw-text-sm);
}

/* Aanraakvlak van de mobiele menuknop naar de WCAG-richtlijn van 44px */
.elementor-menu-toggle {
  min-width: 44px;
  min-height: 44px;
}

@media (prefers-reduced-motion: reduce) {

  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

@media (prefers-contrast: more) {

  :root {
    --aw-line: color-mix(in srgb, var(--e-global-color-secondary) 45%, transparent);
  }
}

::selection {
  background-color: var(--e-global-color-accent);
  color: var(--aw-text-invert);
}


/* ==========================================================================
   4. Posttekst op de detailpagina's
   --------------------------------------------------------------------------
   Deze tekst komt uit het WordPress-veld, niet uit losse widgets. Er is dus
   geen Elementor-control per kopje of alinea. Alleen hier is ritme aanbrengen
   nodig — en het is scoped, dus het raakt niets anders.
   ========================================================================== */

.elementor-widget-theme-post-content {

  & h2 {
    margin-block-start: var(--aw-space-xl);
    font-size: var(--aw-text-2xl);

    &:first-child {
      margin-block-start: 0;
    }
  }

  & h3 {
    margin-block-start: var(--aw-space-lg);
    font-size: var(--aw-text-xl);
  }

  & p {
    margin-block-end: var(--aw-space-sm);
  }

  & ul,
  & ol {
    margin-block: 0 var(--aw-space-sm);
    padding-inline-start: 1.25em;

    & li + li {
      margin-block-start: 0.25rem;
    }
  }

  & > *:last-child {
    margin-block-end: 0;
  }
}


/* ==========================================================================
   5. Hulpklassen — opt-in
   --------------------------------------------------------------------------
   Deze doen niets tenzij je de klasse zelf op een element zet via
   Geavanceerd → CSS Classes. Ze vullen gaten die Elementor niet native heeft:
   een vlak dat mee-tint met de huisstijl, en leesbare tekst op een donker
   vlak zonder per widget een kleur in te typen.
   ========================================================================== */

/* Zacht getint vlak, 6% van de primaire kleur op wit. Blijft licht, ook als
   de huisstijl donker wordt. */
.kg-soft {
  background-color: var(--aw-surface-muted);
}

/* Tweede tint, in de secundaire kleur. */
.kg-soft-alt {
  background-color: var(--aw-surface-sunken);
}

/* Kaart. Alleen rand, radius en hover — padding en achtergrond blijven aan
   Elementor, zodat je die per kaart kunt bijstellen. */
.kg-card {
  border: 1px solid var(--aw-line);
  border-radius: var(--aw-radius-lg);
  transition: border-color var(--aw-duration) var(--aw-ease),
              box-shadow var(--aw-duration) var(--aw-ease);

  &:hover {
    border-color: color-mix(in srgb, var(--e-global-color-primary) 45%, transparent);
    box-shadow: var(--aw-shadow-md);
  }
}

/* Omgekeerd vlak. Zet dit op een container waarop je in Elementor een donkere
   achtergrondkleur hebt gezet; de tekst erin wordt dan licht. */
.kg-invert {
  color: var(--aw-text-invert);

  & .elementor-heading-title,
  & .elementor-widget-text-editor,
  & .elementor-icon-list-text,
  & p,
  & li,
  & strong {
    color: var(--aw-text-invert);
  }

  & a:not(.elementor-button) {
    color: var(--aw-text-invert);
    text-decoration: underline;
  }

  & .elementor-icon-list-icon svg,
  & .elementor-icon-list-icon i {
    color: var(--aw-text-invert);
    fill: var(--aw-text-invert);
  }

  & :focus-visible {
    outline-color: var(--aw-text-invert);
  }
}

/* Bovenkopje boven een sectietitel. */
.kg-eyebrow .elementor-heading-title {
  color: var(--e-global-color-accent);
  font-size: var(--aw-text-sm);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}


/* ==========================================================================
   6. Printen
   ========================================================================== */

@media print {

  .elementor-location-header,
  .elementor-location-footer,
  .elementor-menu-toggle,
  .elementor-widget-form,
  .elementor-widget-button {
    display: none;
  }

  body {
    background: #ffffff;
    color: #000000;
    font-size: 11pt;
  }

  a {
    color: #000000;
    text-decoration: underline;

    &[href^="http"]::after {
      content: " (" attr(href) ")";
      font-size: 9pt;
      word-break: break-all;
    }
  }

  h1, h2, h3 {
    break-after: avoid;
  }

  p, blockquote, table {
    break-inside: avoid;
  }
}



.title {
    animation: flyUpFade 0.6s ease-out forwards;
}

@keyframes flyUpFade {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

body {margin: 0px;}