/* BASE.CSS — fonts, body, typografie */

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


.title-wrapper h2 {
    -webkit-text-size-adjust: 100% !important;
    font-size: 1.6rem !important;
}


/* ============================================
   BASIS TYPOGRAFIE — SCHAALBAAR & IPHONE-PROOF
============================================ */

/* 1) HTML bepaalt de universele schaal
   100% = 16px → meest stabiel op iOS */
html {
    font-size: 100%;
    -webkit-text-size-adjust: 100%; /* voorkomt iPhone zoom / wiebelen */
	padding-top: 90px; /* ruim voor navbar */
}

/* 2) Body volgt HTML in rem
   1rem = 16px */
body {
    font-size: 1rem;
    line-height: 1.6;
    font-family: "Lora", Georgia, serif;
    color: #222;
}

/* --------------------------------------------
   TEKST ELEMENTEN
-------------------------------------------- */

/* Paragrafen en lijsten */
p, li {
    font-size: 1.1rem;   /* 17.6px */
    line-height: 1.5;
    letter-spacing: 0.3px;
}

/* Kleinere tekst */
.p-klein {
    font-size: 0.7rem;
    color: #666;
}

/* --------------------------------------------
   HEADINGS — REM-GEBASEERD EN CONSISTENT
-------------------------------------------- */

h1, h2, h3, h4, h5, h6 {
    font-family: "Lora", Georgia, serif;
    color: #000;
    margin: 0 0 0.6em 0;
    line-height: 1.25;
}

/* Heading schaal (professionele verhouding) */
h1 { font-size: 2rem; }     /* 32px */
h2 { font-size: 1.6rem; }   /* 25.6px */
h3 { font-size: 1.35rem; }  /* 21.6px */
h4 { font-size: 1.15rem; }  /* 18.4px */
h5 { font-size: 1rem; }
h6 { font-size: 0.9rem; color: #0096FF; }

/* Superscript goed uitgelijnd */
sup {
    line-height: 0;
    font-size: 0.7em;
}

/* ============================================
   RESPONSIVE TYPOGRAFIE (optioneel)
   — elegant en zonder jumps —
============================================ */

/* Kleinere telefoons */
@media (max-width: 600px) {
    html { font-size: 93.75%; }  /* 15px basis */
    p, li { font-size: 1.05rem; }
    h1 { font-size: 1.8rem; }
}

/* Kleine tablets / grotere telefoons */
@media (min-width: 600px) and (max-width: 767px) {
    html { font-size: 100%; }    /* 16px */
}

/* iPad portrait */
@media (min-width: 768px) and (max-width: 991px) {
    html { font-size: 105%; }    /* 16.8px */
}

/* iPad landscape / medium desktops */
@media (min-width: 992px) and (max-width: 1199px) {
    html { font-size: 110%; }    /* 17.6px */
}

/* Grote desktop */
@media (min-width: 1200px) {
    html { font-size: 112.5%; }  /* 18px */
}