/* ==========================================================================
   1. RESET & STANDAARD STYLING (Mobile-First Basis)
   ========================================================================== */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 16px;          /* Optimale lettergrootte voor smartphones */
    line-height: 1.6;         /* Zorgt voor voldoende witruimte tussen tekstregels */
    color: #2c3e50;
    background-color: #fcfcfc;
    -webkit-text-size-adjust: 100%; /* Voorkomt automatische tekstschaling op iOS */
}

/* Hoofdcontainer die voorkomt dat tekst tegen de smartphone-schermranden plakt */
.container {
    padding: 15px;
    max-width: 800px;
    margin: 0 auto;
}

/* ==========================================================================
   2. TYPOGRAFIE & KOPPEN (Aangepast voor kleine schermen)
   ========================================================================== */
h1 { 
    font-size: 28px; 
    letter-spacing: 1px; 
    margin-bottom: 5px;
}

h2 { 
    font-size: 22px; 
    margin-bottom: 10px; 
    color: #c0392b; 
}

h3 { 
    font-size: 20px; 
    margin: 30px 0 15px 0; 
    color: #2c3e50; 
    border-bottom: 2px solid #ecf0f1; 
    padding-bottom: 5px; 
}

h4 { 
    font-size: 17px; 
    margin: 20px 0 10px 0; 
    color: #c0392b; 
}

p { 
    margin-bottom: 15px; 
}

/* Structuur voor geordende en ongeordende lijsten op mobiel */
ul, ol { 
    margin-left: 20px; 
    margin-bottom: 15px; 
}

li { 
    margin-bottom: 8px; 
}

/* Zorgt ervoor dat lange URL-links netjes afbreken en niet buiten het scherm vallen */
a { 
    color: #2980b9; 
    text-decoration: none; 
    word-wrap: break-word; 
    word-break: break-all;
}

a:hover { 
    text-decoration: underline; 
}

/* ==========================================================================
   3. HEADER & NAVIGATIE ELEMENTEN
   ========================================================================== */
.main-header {
    background-color: #1a1a1a;
    color: #ffffff;
    padding: 20px 15px;
    text-align: center;
}

.lang-switch {
    font-size: 14px;
    margin-top: 5px;
    color: #888888;
}

.lang-switch .active {
    color: #ffffff;
    font-weight: bold;
}

/* ==========================================================================
   4. VISUELE ELEMENTEN & BLOKKEN (Voor betere smartphone-leesbaarheid)
   ========================================================================== */

/* Introductie / Bovenste alarmbox */
.hero-box {
    background-color: #fdf2f2;
    border: 1px solid #f5c6cb;
    border-left: 5px solid #d9534f;
    padding: 20px;
    border-radius: 4px;
    margin-bottom: 25px;
}

.hero-text { 
    font-size: 18px; 
    font-weight: bold; 
    color: #721c24; 
}

.badge {
    display: inline-block;
    background-color: #d9534f;
    color: white;
    padding: 4px 12px;
    font-size: 13px;
    font-weight: bold;
    border-radius: 12px;
    margin-top: 10px;
}

/* Citatenkaarten: breken de tekst op in behapbare stukken tijdens het scrollen */
.quote-card {
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    border-left: 4px solid #4a5568;
    padding: 15px;
    margin: 20px 0;
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.quote-card p { 
    font-style: italic; 
    margin-bottom: 8px; 
    color: #4a5568; 
}

.quote-card cite { 
    font-size: 13px; 
    color: #718096; 
    font-weight: bold; 
    display: block; 
    text-align: right; 
    margin-top: 5px;
}

/* Gemarkeerde tussenteksten */
.info-highlight {
    background-color: #fff9db;
    border: 1px solid #ffe066;
    padding: 15px;
    border-radius: 4px;
    margin: 15px 0;
    font-weight: bold;
}

/* De behandelingssectie onderaan de pagina */
.treatment-box {
    background-color: #f4fbf7;
    border: 1px solid #c3e6cb;
    border-left: 5px solid #28a745;
    padding: 20px;
    border-radius: 4px;
    margin-top: 35px;
}

.formula {
    background-color: #ffffff;
    padding: 12px;
    border-radius: 4px;
    border: 1px dashed #28a745;
    margin: 15px 0;
}

.styled-list li { 
    list-style-type: square; 
}

/* ==========================================================================
   5. FOOTER
   ========================================================================== */
.main-footer {
    text-align: center;
    padding: 20px;
    font-size: 13px;
    color: #7f8c8d;
    background-color: #f1f2f6;
    margin-top: 40px;
}

/* ==========================================================================
   6. MEDIA QUERY: SCHALING VOOR GROTERE SCHERMEN (Desktop/Tablet)
   ========================================================================== */
@media screen and (min-width: 768px) {
    body { 
        font-size: 17px; /* Iets grotere basisletter op computerschermen */
    }
    
    .container { 
        padding: 40px 20px; /* Meer ademruimte aan de zijkanten op desktop */
    }
    
    h1 { font-size: 36px; }
    h2 { font-size: 26px; }
    h3 { font-size: 24px; }
}