/* MAIN.CSS - Het Fundament
   Project: Lumina Scan & Aveline Suite
*/

/* 1. KLEUREN EN LETTERTYPES (De 'verfpotten' van Natalie) */
:root {
    --hoofdkleur: #C17A5E;       /* Een professionele donkere kleur */
    --accentkleur: rgb(243, 169, 50);      /* Een kleur die opvalt voor knoppen */
    --achtergrond: #F7F2E8;      /* Schoon wit */
    --tekstkleur: #1A2B44;       /* Goed leesbaar grijs/zwart */
    --lettertype: 'Arial', sans-serif; /* Een strak en simpel lettertype */
}

/* 2. ALGEMENE BASIS (Hoe gedraagt de pagina zich?) */
body {
    margin: 0;
    padding: 0;
    font-family: var(--lettertype);
    color: var(--tekstkleur);
    background-color: var(--achtergrond);
    line-height: 1.6; /* Zorgt voor een fijne witruimte tussen regels tekst */
}

/* 3. TITELS (De koppen van je verhaal) */
h1, h2, h3 {
    color: var(--hoofdkleur);
    margin-bottom: 20px;
}

/* 4. DE PLACEHOLDER STIJL (Zodat we zien wat we doen) */
section {
    padding: 60px 20px; /* Geeft elke sectie lekker veel ademruimte */
    border-bottom: 1px solid #eeeeee; /* Een heel dun lijntje tussen de onderdelen */
}

/* 5. AFBEELDINGEN */
img {
    max-width: 100%; /* Zorgt dat plaatjes nooit groter worden dan het scherm */
    height: auto;
}/* --- AANPASSING VOOR DE HEADER --- */

.main-header {
    background-color: #ffffff;
    padding: 20px 0;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* Een subtiel schaduwtje */
}

.main-header .container {
    display: flex; /* Zorgt dat logo en menu naast elkaar staan */
    justify-content: space-between; /* Logo links, menu rechts */
    align-items: center;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
}

.logo img {
    height: 75px; /* Hier bepalen we hoe groot je logo wordt */
    width: auto;
}

.main-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
}

.main-nav li {
    margin-left: 30px;
}

.main-nav a {
    text-decoration: none;
    color: var(--hoofdkleur);
    font-weight: bold;
}
/* De Knoppen */
.button-primary {
    background-color: var(--accentkleur);
    color: white;
    padding: 15px 30px;
    text-decoration: none;
    border-radius: 5px;
    font-weight: bold;
    display: inline-block;
}

.button-secondary {
    color: var(--hoofdkleur);
    margin-left: 15px;
    text-decoration: underline;
}