/* * PK: 10-03-2026 - TYPOGRAFIE SCHEMA: InChange-Advies
 * Compatibel met: Joomla 6 & Astroid Framework
 * Achtergrondreferentie: #F5F1E8
 */

/* 1. GLOBALE BASISINSTELLINGEN */
:root {
    --primary-orange: #B34700;    /* WCAG AA Veilig op crème */
    --hover-orange: #803300;      /* Donkerder voor interactie */
    --text-dark: #2D2D2D;         /* Zacht zwart voor betere leesbaarheid */
    --bg-cream: #F5F1E8;          /* Jouw specifieke achtergrond */
}

html {
    font-size: 16px; /* Basis voor rem berekeningen */
}

body {
    background-color: var(--bg-cream);
    font-family: 'Lato', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 1.125rem; /* 18px */
    font-weight: 400;
    line-height: 1.6;
    color: var(--text-dark);
    -webkit-font-smoothing: antialiased;
}

/* 2. KOPPEN (PLAYFAIR DISPLAY) */
h1, h2, h3 {
    font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
    color: var(--primary-orange);
    margin-top: 1.5rem;
    margin-bottom: 1rem;
    line-height: 1.2;
}

h1 { font-size: 2.5rem; font-weight: 700; } /* 40px */
h2 { font-size: 2.0rem; font-weight: 600; } /* 32px */
h3 { font-size: 1.5rem; font-weight: 600; } /* 24px */

/* 3. SUBKOPPEN (LATO) */
h4, h5, h6 {
    font-family: 'Lato', 'Helvetica Neue', Arial, sans-serif;
    color: var(--text-dark);
    margin-top: 1.25rem;
    margin-bottom: 0.75rem;
    line-height: 1.3;
}

h4 { font-size: 1.25rem; font-weight: 700; } /* 20px */
h5 { font-size: 1.125rem; font-weight: 700; } /* 18px */
h6 { font-size: 1rem; font-weight: 700; }     /* 16px */

/* 4. PARAGRAAF & TEKST */
p {
    margin-bottom: 1.5rem;
}

/* 5. NAVIGATIE & LINKS */
/* Specifieke Astroid selectors voor maximale compatibiliteit */
/* Specifieke styling voor het Astroid Menu van InChange-Advies */

/* 1. Standaard staat van de menu-link */
.astroid-header .astroid-nav-menu .nav-link, 
.astroid-header nav a {
    font-family: 'Lato', sans-serif !important;
    font-size: 1.2rem !important;      /* basis 16px */
    font-weight: 700 !important;
    color: #B34700 !important;       /* Het veilige oranje */
    text-transform: none;            /* Voorkomt dat alles in hoofdletters komt als de template dat dwingt */
    transition: color 0.3s ease, border-bottom 0.3s ease;
    padding-bottom: 5px;             /* Ruimte voor de onderlijn */
    border-bottom: 2px solid transparent;
}

/* 2. Mouseover / Hover effect */
.astroid-header .astroid-nav-menu .nav-link:hover,
.astroid-header nav a:hover {
    color: #803300 !important;       /* De donkerdere hover-kleur */
    border-bottom: 2px solid #803300 !important;
}

/* 3. Actieve pagina (waar je nu bent) */
.astroid-header .astroid-nav-menu .nav-item.active > .nav-link,
.astroid-header .astroid-nav-menu .nav-item.current > .nav-link {
    color: #803300 !important;
    border-bottom: 2px solid #B34700 !important;
}

/* 6. RESPONSIVE AANPASSINGEN (Mobiel) */
@media (max-width: 768px) {
    h1 { font-size: 2rem; }   /* Iets kleiner op mobiel voor leesbaarheid */
    h2 { font-size: 1.75rem; }
    body { font-size: 1rem; } /* 16px op mobiel is vaak prettiger */
}