/* Basis instellingen voor font-size en fonts */
:root {
    font-size: 16px; /* Baseline font-size (1rem = 16px) */
    --primary-font: 'Open Sans', sans-serif; /* Globaal font voor alle tekst */
    --heading-font: 'quatro-slab', serif;    /* Specifiek font voor h1 en h2 */
}

/* Body en algemene tekstinstellingen */
body {
    font-family: var(--primary-font);
    font-size: 1rem; /* 16px */
    line-height: 1.6; /* Verbeterde leesbaarheid */
    color: #333; /* Donkergrijze kleur voor tekst */
    margin: 0;
    padding: 0;
}

/* Koppen (h1-h6) */
h1, h2 {
    font-family: var(--heading-font);
    font-weight: 700; /* Vetgedrukte stijlen */
    line-height: 1.3;
    margin: 0 0 1.5rem;
}

h1 {
    font-size: 3.25rem; /* 40px */
}

h2 {
    font-size: 2rem; /* 32px */
}

h3, h4, h5, h6 {
    font-family: var(--primary-font); /* Overige koppen in Open Sans */
    line-height: 1.4;
    margin: 0 0 1rem;
}

h3 {
    font-size: 1.75rem; /* 28px */
}

h4 {
    font-size: 1.5rem; /* 24px */
}

h5 {
    font-size: 1.25rem; /* 20px */
}

h6 {
    font-size: 1rem; /* 16px */
}

/* Paragrafen en andere tekstelementen */
p {
    font-size: 1rem; /* 16px */
    margin-bottom: 1rem;
}

small {
    font-size: 0.875rem; /* 14px */
    line-height: 1.4;
}

/* Lijsten */
ul, ol {
    font-size: 1rem; /* 16px */
    margin: 0 0 1rem 1.5rem; /* Inspringing */
    line-height: 1.5;
}

/* Links */
a {
    font-family: var(--primary-font);
    font-size: 1rem;
    text-decoration: none;
    color: #E6147C; /* Roze kleur voor links */
    transition: color 0.2s ease-in-out;
}

a:hover {
    color: #5D68AE; /* Paars bij hover */
}

/* Navigatie */
.nav-menu {
    font-family: var(--primary-font);
    font-size: 1.125rem; /* 18px */
}

/* Knoppen */
.button {
    font-family: var(--primary-font);
    font-size: 1rem; /* 16px */
    padding: 0.75rem 1.5rem; /* 12px 24px */
    border-radius: 12rem; /* 100px */
    background-color: #E6147C;
    color: #fff;
    text-transform: /*uppercase;
}

.button:hover {
    background-color: #5D68AE;
}

/* Footer */
.footer {
    font-family: var(--primary-font);
    font-size: 0.875rem; /* 14px */
    line-height: 1.5;
    padding: 2rem 0;
    color: #666;
}

/* Formulier elementen */
input, textarea {
    font-family: var(--primary-font);
    font-size: 1rem;      /* 16px */
    padding: 0.625rem;    /* 10px */
    margin: 0.5rem 0;     /* 8px 0 */
    border: 1px solid #ccc;
    border-radius: 0.25rem;
}

/* Responsieve typografie met media queries */
@media screen and (max-width: 768px) {
    :root {
        font-size: 14px; /* Basis font-size aanpassen voor kleinere schermen */
    }

    h1 {
        font-size: 2rem; /* Kleiner h1 op mobiele schermen */
    }

    h2 {
        font-size: 1.75rem;
    }

    .nav-menu {
        font-size: 1rem; /* Maak menu kleiner voor mobiel */
    }
}