/* kg-avada-reset.css
   Neutraliseert BINNEN .kg de globale regels uit themes/Mull2media/style.css die bij
   het huidige ontwerp horen maar ongevraagd op de v2-opmaak aangrijpen.

   De bestaande style.css wordt bewust NIET aangepast: die hoort bij het ontwerp dat
   op dezelfde installatie blijft draaien tot de omschakeling. Opruimen kan pas na
   oplevering.

   Handgeschreven — dit bestand komt niet uit tools/genereer_css.py. */


/* --- Concept-reset, veilig gescopet -------------------------------------------
   Het concept opent met:
       * { box-sizing:border-box; margin:0; padding:0 }
       html { scroll-behavior:smooth }
       body { font-family:var(--body); color:var(--tekst); line-height:1.62; ... }

   Die drie kunnen niet een-op-een mee. `*`, `html` en `body` worden door de
   generator overgeslagen (je kunt ze niet scopen), dus ze staan hier met de hand —
   en bewust versmald:

   - `* { margin:0; padding:0 }` NIET overnemen. Playbook punt 5: die regel heeft
     specificiteit (0,1,0) binnen .kg en wist Avada's kolommarges op
     .fusion-layout-column. Alleen de teksttags krijgen hun marge-reset.
   - `box-sizing` wel breed: dat is de aanname waarop alle conceptmaten rusten.
   - Uit de body-regel alleen typografie. `background` en `overflow-x:clip` horen
     bij de pagina, niet bij een wrapper — die laten we aan Avada. */

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

.kg h1, .kg h2, .kg h3, .kg h4, .kg h5, .kg h6,
.kg p, .kg ul, .kg ol, .kg li, .kg figure, .kg blockquote, .kg dl, .kg dd {
  margin: 0;
  padding: 0;
}

.kg {
  font-family: var(--kg-body);
  color: var(--kg-tekst);
  /* Het concept zet geen font-size op body en draait dus op de browserstandaard
     van 16px. Avada zet --body_typography-font-size op 18px, en dat erven alle
     elementen binnen .kg die zelf geen grootte opgeven. Gemeten: de cijferrij in
     de hero kwam op 18px uit tegen 16px in het concept, en dat schuift alles wat
     in em is uitgedrukt mee. */
  font-size: 16px;
  /* Zelfde oorzaak als de font-size hierboven, en op dezelfde manier gemist: Avada
     zet --body_typography-letter-spacing op -0.44px en past dat toe op body, terwijl
     het concept letter-spacing op body niet aanraakt (normal). Alles binnen .kg dat
     zelf geen waarde opgeeft erfde die -0.44px. Gemeten op /ons-verhaal/#mensen:
     posities, hoogtes en marges klopten tot op de pixel, alleen de TEKSTBREEDTES
     weken af (.section-title 767px tegen 781px in het concept) en daardoor braken
     regels op andere plekken af — in de mensenkaarten paste "Commercieel directeur ·
     vijfde generatie" bij ons op een regel en in het concept op twee.
     De blok-CSS zet zijn eigen waardes waar het concept die heeft (.eyebrow .2em,
     h2.section-title -.01em enzovoort) en wint hiervan, want die lagen laden later. */
  letter-spacing: normal;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

/* Ankerlinks in de longreads (175-jaar, ons-verhaal) leunen hierop. Met :has()
   geldt het alleen op pagina's waar ook echt v2-inhoud staat, zodat het bestaande
   ontwerp zijn scrollgedrag houdt. */
html:has(.kg) {
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html:has(.kg) {
    scroll-behavior: auto;
  }
}


/* --- Avada Counters Box -------------------------------------------------------
   style.css r.11-15 zet padding/margin/width met !important op ELKE counters box.
   Dat blokkeert het hergebruik van Counters Box voor de v2-cijferblokken. */
.kg .fusion-counters-box .fusion-counter-box {
  padding: revert !important;
  margin-bottom: revert !important;
}
.kg .fusion-counters-box .fusion-counter-box .counter-box-container {
  width: revert !important;
  padding: revert !important;
}
.kg .fusion-counters-box .fusion-counter-box.col-lg-4 {
  width: revert !important;
}


/* --- Avada Forms --------------------------------------------------------------
   style.css r.46 forceert 7px marge op elk formulierveld; het v2-contactformulier
   heeft een eigen ritme. */
.kg .fusion-form-field {
  margin-top: revert !important;
  margin-bottom: revert !important;
}


/* --- Footer -------------------------------------------------------------------
   style.css r.65 plakt een decoratieve lines.svg achter ELKE footer, ook een
   nieuwe v2-footer die dat niet moet hebben. */
.kg footer:after,
footer.kg-footer:after {
  content: none;
  background-image: none;
}


/* --- Losse globale selectors --------------------------------------------------
   style.css r.21 (h3 p) en r.93 (h2.fusion-nothing-found) staan zonder blokklasse
   en raken dus alles. */
.kg h3 p {
  margin-top: revert;
}
.kg h2.fusion-nothing-found {
  font-size: revert !important;
  font-weight: revert !important;
}
.kg .fusion-content-boxes .content-container {
  font-size: revert;
}


/* --- Stapelvolgorde van de header ---------------------------------------------
   Het megamenu klapt open als een overlay met z-index 210, binnen `header.site`
   (position:sticky, z-index:200). Dat is in het concept genoeg, maar in Avada zit
   die header in een eigen container met een eigen stapelcontext. Zonder z-index op
   die container tekent de eerstvolgende sectie — de hero — over het opengeklapte
   paneel heen: je ziet dan de heroafbeelding dwars door het menu.

   Gemeten voor de fix: .mega.exp had bg=rgb(255,255,255) en z=210, dus het paneel
   was wel wit en wel zichtbaar — het werd alleen overtekend. */
.fusion-tb-header,
.kg-header-v2,
.kg-header-v2 .fusion-row,
.kg-header-v2 .fusion-layout-column,
.kg-footer-v2 .fusion-layout-column {
  position: relative;
  z-index: 300;
}

/* De header moet van rand tot rand lopen, net als in het concept. Avada zet daar
   drie dingen tussen, gemeten op een viewport van 1407px:
     .fusion-fullwidth   padding 30px links/rechts   -> header begon op x=30
     .fusion-row         max-width 104%
     .fusion-column-wrapper draagt de kolomtussenruimte als marge (playbook punt 2)
   Samen scheelde dat 60px, waardoor het opengeklapte megamenu donkere randen hield. */
.kg-header-v2.fusion-fullwidth,
.kg-footer-v2.fusion-fullwidth {
  padding-left: 0;
  padding-right: 0;
}
.kg-header-v2 .fusion-row,
.kg-footer-v2 .fusion-row {
  /* Avada zet hier inline `width:104%;max-width:104%;margin-left:calc(-4%/2)` MET
     !important, om de kolomtussenruimte te compenseren. Zonder !important verliest
     onze regel daarvan: gemeten stond de headerrij op x=-28 met w=1463 op een
     viewport van 1407, en het opengeklapte megamenu erfde die 28px aan beide
     kanten omdat het absoluut binnen de header staat. */
  max-width: none !important;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
.kg-header-v2 .fusion-layout-column,
.kg-footer-v2 .fusion-layout-column {
  width: 100%;
  margin: 0;
}
.kg-header-v2 .fusion-column-wrapper,
.kg-footer-v2 .fusion-column-wrapper {
  margin: 0;
}

/* De containers eronder mogen geen eigen stapelcontext boven de header vormen. */
.fusion-tb-header ~ .fusion-fullwidth {
  z-index: auto;
}


/* --- Restanten van de handmatige opzet van juli --------------------------------
   themes/Mull2media/style.css definieert `.jub-pill` ONGESCOPET, met o.a.
   `max-width:420px` en `font-family:Inter`. Onze `.kg .jub-pill` wint op alles wat
   daar ook in staat, maar niet op eigenschappen die alleen het thema zet — en die
   max-width brak de pill in de hero over twee regels.

   Gemeten: concept w=432 h=38 max-width:none, hier w=420 h=59 max-width:420px.
   De negen `.exp-*`-regels in datzelfde bestand zijn wel netjes gescopet onder
   `.m2m-exp` en mogen blijven; die horen bij het expertise-accordeon dat we
   hergebruiken. */
.kg .jub-pill {
  max-width: none;
}


/* --- Contactsectie -------------------------------------------------------------
   Het concept laat de links hun kleur erven van `.contact{color:#fff}`. Avada
   styleert `a` op hogere specificiteit, dus zonder deze regel krijgen het e-mail-
   adres en het telefoonnummer de themalinkkleur in plaats van wit.

   Avada heeft bovendien een eigen ongescopete `.meta{color:#333}` voor zijn
   berichtmeta, en onze contactblok gebruikt diezelfde klassenaam. Vandaar
   !important, strak gescopet tot de contacttekst zodat het nergens anders raakt. */
.kg .contact .contact-text a,
.kg .contact .contact-text .meta a {
  color: #fff !important;
}
.kg .contact .contact-text a:hover,
.kg .contact .contact-text .meta a:hover {
  color: var(--kg-goud-licht) !important;
}

/* Het akkoordvinkje. Het concept gebruikt `.check` met flex en een vaste
   vakjesgrootte; Avada rendert een eigen `.fusion-form-checkbox` waar die CSS niet
   op aangrijpt, waardoor vinkje en tekst niet op één lijn stonden. */
.kg .form-card .fusion-form-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 11px;
}
.kg .form-card .fusion-form-checkbox input[type="checkbox"] {
  flex: none;
  width: 17px;
  height: 17px;
  margin: 2px 0 0;
}
.kg .form-card .fusion-form-checkbox label {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--kg-grijs);
}
.kg .form-card fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}

/* De privacyregel boven de verzendknop. Avada zet die maten als INLINE
   CSS-variabelen op het element (`style="--awb-font-size:14px;..."`), dus de
   variabele overschrijven is de juiste ingang — niet de property (playbook punt 1).
   Wel met !important: een stylesheetregel verliest anders van een inline
   declaratie op datzelfde element. */
.kg .form-card .fusion-text {
  --awb-font-size: 13px !important;
  --awb-margin-bottom: 10px !important;
}

/* De marge apart: het blok draagt ook `fusion-text-no-margin`, en die klasse zet
   `margin-bottom` als gewone property. De variabele overschrijven doet daar dus
   niets — gemeten bleef het op 0px staan. */
.kg .form-card .fusion-text,
.kg .form-card .fusion-text.fusion-text-no-margin {
  margin-bottom: 10px !important;
}
.kg .form-card .fusion-text p:last-child {
  margin-bottom: 0;
}


/* --- Kolomwrapper -------------------------------------------------------------
   Playbook punt 2: .fusion-column-wrapper draagt achtergrond, rand, radius, schaduw,
   padding EN de kolomtussenruimte als margin. Kaart-chrome hoort daar, niet op de
   kolom. Binnen .kg zetten we de wrapper neutraal zodat de v2-kaarten hun eigen
   chrome kunnen dragen; blokken die de wrapper wel gebruiken zetten hem zelf terug. */
.kg .fusion-layout-column > .fusion-column-wrapper {
  background-color: transparent;
}


/* --- Titelkleur ---------------------------------------------------------------
   Playbook punt 4: #wrapper .fusion-title hN{color:var(--awb-text-color)} heeft
   specificiteit (1,2,1) en wint bijna altijd. Niet ertegen vechten maar laten
   erven, zodat de v2-CSS de kleur bepaalt. */
.kg .fusion-title h1,
.kg .fusion-title h2,
.kg .fusion-title h3,
.kg .fusion-title h4,
.kg .fusion-title h5,
.kg .fusion-title h6 {
  --awb-text-color: inherit;
}

/* Avada geeft elke blockquote een grijs vlak, een groene linkerrand en cursief:
 * .fusion-body blockquote{background:#f5f5f5;border-left:4px solid;padding:15px;
 * font-style:italic}. Het concept gebruikt blockquote puur als tekst, in de
 * referentiekaarten, met witte letters op een donkere kaart. Ongemoeid gelaten
 * levert dat witte tekst op een lichtgrijs vlak op: onleesbaar.
 *
 * Gemeten op 28-08 in de kloon: background rgb(243,244,246), border-left 4px
 * rgb(19,133,88), font-style italic. Padding en marge stonden al op 0 door de
 * reset hierboven; alleen deze drie bleven over. */
.kg blockquote {
  background: none;
  border: 0;
  font-style: normal;
  quotes: none;
  /* Avada zet hier 18px; het concept laat de blockquote gewoon erven (16px). Dat telt
     door in de bronvermelding eronder, die in em staat. Gemeten op het nieuwsbericht:
     het citaatblok werd er 5px hoger van. */
  font-size: inherit;
}

.kg blockquote::before,
.kg blockquote::after {
  content: none;
}

/* De gouden streep links van een citaat werd groen.
 *
 * Avada zet de randkleur in `#wrapper .post-content blockquote` — met een ID in de
 * selector, dus specificiteit (1,2,1). Onze paginaregel `.kg .art-quote` is (0,2,0) en
 * verliest daarvan: de breedte kwam wél van ons (3px) en de kleur van Avada (groen).
 * Playbook punt 4 in het klein.
 *
 * Hier met dezelfde ID ervoor, zodat we op (1,3,0) uitkomen. De waarde blijft het
 * token, zodat Klaassen de kleur gewoon in Theme Options kan wijzigen. */
#wrapper .kg .art-quote {
  border-left-color: var(--kg-jub-goud);
}

/* Zelfde verhaal voor de kleur en de regelhoogte van een citaat: Avada zet die in
   `.fusion-body blockquote` en `#wrapper .post-content blockquote`. Het concept laat ze
   gewoon erven. Gemeten: regelhoogte 27.2px tegen 25.92px en kleur grijs in plaats van
   de tekstkleur; dat telde door in de bronvermelding eronder. */
#wrapper .kg blockquote {
  color: inherit;
  line-height: inherit;
  /* En de letter-spacing, die hier op dezelfde manier binnenkwam als eerder op body:
     Avada zet -0.44px, het concept laat hem met rust. Gemeten op de bronvermelding:
     301px breed tegen 324px in het concept. */
  letter-spacing: normal;
}