/* =========================================================
   RAIDHO GLOBAL DESIGN SYSTEM
   Doel: typografie + kleuren overal identiek
   Font: Lexend (beste leesrust), fallback Inter Tight
========================================================= */

:root{
  --raidho-font: "Lexend", "Inter Tight", Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --raidho-text: #4a3b57;
  --raidho-head: #2f203b;
  --raidho-link: #2f203b;
  --raidho-link-hover-opacity: .85;

  /* optioneel */
  --raidho-line-height: 1.6;
}

/* Baseline */
html, body{
  font-family: var(--raidho-font);
  color: var(--raidho-text);
  line-height: var(--raidho-line-height);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Headings */
h1,h2,h3,h4,h5,h6{
  font-family: var(--raidho-font);
  color: var(--raidho-head);
  font-weight: 600;
  letter-spacing: .2px;
  line-height: 1.2;
}

/* Body text */
p, li, span, label, small, strong, em{
  color: var(--raidho-text);
}

/* Links */
a{
  color: var(--raidho-link);
  text-decoration-thickness: 2px;
  text-underline-offset: 2px;
}
a:hover{
  opacity: var(--raidho-link-hover-opacity);
}

/* ---------------------------------------------------------
   Mobirise / mbr classes (dit is waar het vaak misgaat)
--------------------------------------------------------- */
.mbr-fonts-style,
.mbr-section-title,
.mbr-section-subtitle,
.display-1,.display-2,.display-3,.display-4,.display-5,.display-6,.display-7{
  font-family: var(--raidho-font);
}

/* Mobirise display classes zijn vaak titels */
.mbr-section-title,
.display-1,.display-2,.display-3,.display-4,.display-5,.display-6{
  color: var(--raidho-head);
  font-weight: 600;
}

/* Mobirise body varianten */
.mbr-section-subtitle,
.display-7{
  color: var(--raidho-text);
}

/* ---------------------------------------------------------
   Fluent Forms (optioneel maar meestal nodig)
--------------------------------------------------------- */
.fluentform,
.fluentform *{
  font-family: var(--raidho-font);
}
.fluentform label{
  color: var(--raidho-head);
}
.fluentform input,
.fluentform textarea,
.fluentform select{
  color: var(--raidho-text);
}
/* =========================================
   RAIDHO – LEESRUST FINETUNING (SITE-WIDE)
========================================= */

/* Basis leescomfort */
html { font-size: 18px; }              /* iets groter dan standaard */
body {
  line-height: 1.7;                    /* meer ademruimte */
  letter-spacing: 0.01em;              /* subtiele tracking */
}

/* Headings: rustiger hiërarchie */
h1 { font-size: 2.2rem; line-height: 1.2; }
h2 { font-size: 1.8rem; line-height: 1.25; }
h3 { font-size: 1.5rem; line-height: 1.3; }

h1,h2,h3,h4,h5,h6{
  font-weight: 700;                    /* consistent gewicht */
  letter-spacing: 0.02em;              /* iets meer onderscheid */
}

/* Paragrafen */
p { margin-bottom: 1.1em; }

/* Lijsten */
ul, ol { padding-left: 1.2em; }

/* Knoppen leesbaarder */
.btn {
  font-family: var(--raidho-font) !important;
  letter-spacing: 0.03em;
}

/* Fluent Forms ook meenemen */
.fluentform,
.fluentform *{
  line-height: 1.6;
}
/* =========================================================
   RAIDHO – SUBTIELE MODES PER PAGINATYPE
========================================================= */

/* 1) BASIS (overal) */
:root{
  --raidho-font: "Lexend", "Inter Tight", Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --raidho-text: #4a3b57;
  --raidho-head: #2f203b;

  /* basis typografie */
  --raidho-base-size: 18px;
  --raidho-line: 1.70;
  --raidho-max-text: 72ch; /* standaard max tekstbreedte */
}

html{ font-size: var(--raidho-base-size); }
body{ line-height: var(--raidho-line); }

/* Optioneel: maak lange tekstblokken leesbaarder zonder je layout te slopen */
.raidho-readable p,
.raidho-readable li{
  max-width: var(--raidho-max-text);
}

/* 2) INFORMATIEF MODE (Over ons / uitleg) */
body.page-template-over-ons,
body.page-template-default.raidho-info,
body.page-id-OVERONS_ID {
  --raidho-base-size: 18.5px;
  --raidho-line: 1.80;
  --raidho-max-text: 68ch; /* iets smaller = rustiger */
}

/* Rustigere headings op info-pagina’s */
body.page-id
}
/* =========================================================
   RAIDHO – SUBTIELE MODES PER PAGINA (exacte selectors)
========================================================= */

/* BASIS (overal) */
:root{
  --raidho-base-size: 18px;
  --raidho-line: 1.70;
  --raidho-text-max: 72ch;
}

html{ font-size: var(--raidho-base-size); }
body{ line-height: var(--raidho-line); }

/* Helper: zet deze class op secties met lange tekst voor max-width */
.raidho-readable p,
.raidho-readable li{
  max-width: var(--raidho-text-max);
}

/* =========================================================
   INFO MODE — Over ons (page-id-92 / template page-over-ons)
   Rustiger: iets meer regelafstand, iets smallere tekstkolom
========================================================= */
body.page-template-page-over-ons,
body.page-id-92{
  --raidho-base-size: 18.5px;
  --raidho-line: 1.80;
  --raidho-text-max: 68ch;
}

/* Headings op info-pagina: iets minder “schreeuwerig” */
body.page-template-page-over-ons h1,
body.page-template-page-over-ons h2,
body.page-template-page-over-ons h3,
body.page-id-92 h1,
body.page-id-92 h2,
body.page-id-92 h3{
  letter-spacing: 0.015em;
  font-weight: 700;
}

/* =========================================================
   COMMERCIAL MODE — Prijzen (page-id-90 / template page-prijzen)
   Directer: iets compacter, headings iets assertiever
========================================================= */
body.page-template-page-prijzen,
body.page-id-90{
  --raidho-base-size: 18px;
  --raidho-line: 1.65;
  --raidho-text-max: 80ch;
}

/* Headings op prijzen: net wat sterker */
body.page-template-page-prijzen h1,
body.page-template-page-prijzen h2,
body.page-template-page-prijzen .mbr-section-title,
body.page-id-90 h1,
body.page-id-90 h2,
body.page-id-90 .mbr-section-title{
  letter-spacing: 0.02em;
  font-weight: 800;
}
/* =========================================================
   RAIDHO – PROFESSIONAL POLISH
   1) Contrast & leescomfort
   2) Typografische hiërarchie
   3) CTA consistentie
========================================================= */

/* 1) Contrast & leescomfort */
:root{
  /* iets donkerder voor betere leesbaarheid op lichte achtergronden */
  --raidho-text: #3a2c47;   /* was #4a3b57 */
  --raidho-head: #2f203b;

  /* CTA kleuren (1 set, overal) */
  --raidho-cta-bg: #2f203b;
  --raidho-cta-text: #ffffff;
  --raidho-cta-bg-hover: #241a2e; /* iets donkerder */
  --raidho-cta-radius: 14px;
}

body{
  line-height: 1.72;                 /* net rustiger */
  letter-spacing: 0.01em;            /* minimale tracking */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Leesbreedte (alleen waar jij raidho-readable gebruikt) */
.raidho-readable p,
.raidho-readable li{
  max-width: var(--raidho-text-max, 72ch);
}

/* Extra witruimte in langere tekst (rustiger scanbaar) */
.raidho-readable p{ margin-bottom: 1.15em; }
.raidho-readable li{ margin-bottom: 0.35em; }

/* 2) Typografische hiërarchie (Mobirise/Bootstrap display classes normaliseren) */
/* Doel: minder “schreeuwerig”, meer premium */
.display-1{ font-size: clamp(2.2rem, 3vw, 3.0rem); line-height: 1.12; }
.display-2{ font-size: clamp(2.0rem, 2.6vw, 2.6rem); line-height: 1.15; }
.display-3{ font-size: clamp(1.7rem, 2.2vw, 2.2rem); line-height: 1.18; }