/* ==========================================================================
   Boutier Design — Help Scout Knowledge Base
   Custom CSS · stap 1: lettertype & basis-tekstgrootte
   ==========================================================================

   LET OP: de @import-regel MOET de allereerste regel van het bestand blijven,
   anders negeren browsers hem.
   -------------------------------------------------------------------------- */

@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@300;400;500;600;700&display=swap');

:root {
  /* Archivo als hoofdfont, met de Help Scout-stack als fallback */
  --bd-font: 'Archivo', "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* --- 1. Lettertype overal toepassen ------------------------------------- */
/* Het thema zet op meerdere plekken expliciet de Helvetica-stack. Daarom
   overschrijven we body én de elementen die NIET vanzelf erven
   (form-velden en knoppen erven font-family nooit automatisch).            */
body,
p, li, a, span, div, td, th, label, blockquote,
input, textarea, select, button,
.search-query {
  font-family: var(--bd-font);
}

/* --- 2. Tekst: weight 300 + basisgrootte 16px --------------------------- */
body {
  font-weight: 300;   /* Light, zoals gevraagd */
  font-size: 16px;    /* nieuwe standaard lettergrootte */
}

/* Lopende tekst expliciet op 300 (sommige thema-regels zetten 400) */
p, li, a, span, td, th, label, blockquote {
  font-weight: 300;
}

/* Artikeltekst staat in het thema op 14px → optillen naar 16px,
   met een prettige regelhoogte die meeschaalt.                            */
#fullArticle,
#fullArticle p,
#fullArticle li,
#fullArticle td,
#fullArticle th {
  font-size: 16px;
  line-height: 1.6;
}

/* --- 3. Headings -------------------------------------------------------- */
/* Bewust GEEN font-weight ingesteld (zoals gevraagd): koppen behouden hun
   huidige gewicht uit het thema. We zetten enkel het lettertype, zodat ook
   de koppen in Archivo worden weergegeven.                                 */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--bd-font);
}