:root {
    --hitisit-rood: #FF0000;
    --hitisit-oranje: #FA5500;
    --hitisit-blauw: #0DA6E0;
    --hitisit-groen: #8EC26A;
    --hitisit-zwart: #000000;
    /* Office 365: blauwe navigatie */
    --accent: var(--hitisit-blauw);
}

/* ==========================================================
   HITisIT – algemene moderne huisstijl
   Dit bestand kan later op andere pagina's worden gebruikt.
   ========================================================== */

* {
    box-sizing: border-box;
}

html {
    min-height: 100%;
}

body.modern-site {
    min-height: 100%;
    margin: 0;
    background: #f5f7f9;
    color: #2b2b2b;
    font-family: "Segoe UI", Arial, Helvetica, sans-serif;
    font-size: 16px;
    line-height: 1.6;
}

.modern-site img {
    display: block;
    max-width: 100%;
}

.modern-site a {
    color: inherit;
}

/* ==========================================================
   Header
   ========================================================== */

.site-header {
    background: #ffffff;
    border-bottom: 1px solid #e3e3e3;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.06);
}

.header-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: min(1180px, calc(100% - 40px));
    min-height: 82px;
    margin: 0 auto;
}

/* Origineel HITisIT-logo */

.site-logo {
    display: flex;
    align-items: center;
    text-decoration: none;
}

    .site-logo img {
        display: block;
        width: 42px;
        height: 42px;
        object-fit: contain;
    }

/* Uitloggen */

.logout-button {
    padding: 9px 17px;
    color: #444444;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    background: #f4f4f4;
    border: 1px solid #dddddd;
    border-radius: 8px;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

    .logout-button:hover {
        color: #ffffff;
        background: var(--hitisit-rood);
        border-color: var(--hitisit-rood);
    }

/* ==========================================================
   Navigatie
   De kleur wordt bepaald door --accent
   ========================================================== */

.main-navigation {
    display: flex;
    justify-content: center;
    gap: 2px;
    padding: 0 20px;
    background: var(--accent);
}

    .main-navigation a {
        position: relative;
        display: flex;
        align-items: center;
        min-height: 58px;
        padding: 0 22px;
        color: #ffffff;
        font-size: 15px;
        font-weight: 600;
        text-decoration: none;
        transition: background 0.2s ease;
    }

        .main-navigation a:hover {
            background: rgba(0, 0, 0, 0.10);
        }

        .main-navigation a.active {
            background: rgba(0, 0, 0, 0.18);
        }

            .main-navigation a.active::after {
                position: absolute;
                right: 22px;
                bottom: 0;
                left: 22px;
                height: 4px;
                background: var(--hitisit-rood);
                content: "";
            }

/* ==========================================================
   Pagina
   ========================================================== */

.page-container {
    width: min(1180px, calc(100% - 40px));
    margin: 38px auto 60px;
}

.content-card {
    background: #ffffff;
    border: 1px solid #e3e3e3;
    border-radius: 16px;
    box-shadow: 0 8px 26px rgba(0, 0, 0, 0.07);
}

/* Kleine tekst boven een titel */

.eyebrow {
    display: block;
    margin-bottom: 5px;
    color: var(--hitisit-rood);
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}

.download-panel-heading .eyebrow {
    color: #FF0000;
    font-weight: 800;
}

.section-heading h2 {
    margin: 0;
    color: var(--hitisit-zwart);
    font-size: 27px;
    line-height: 1.25;
}

/* ==========================================================
   Footer
   ========================================================== */

.site-footer {
    padding: 25px 20px;
    color: #666666;
    text-align: center;
    background: #ffffff;
    border-top: 1px solid #e3e3e3;
}

    .site-footer p {
        margin: 0;
    }

/* ==========================================================
   Tablet
   ========================================================== */

@media (max-width: 850px) {
    .main-navigation {
        flex-wrap: wrap;
        padding: 8px;
    }

        .main-navigation a {
            min-height: 44px;
            padding: 0 13px;
        }
}

/* ==========================================================
   Telefoon
   ========================================================== */

@media (max-width: 600px) {
    .header-top,
    .page-container {
        width: min(100% - 24px, 1180px);
    }

    .header-top {
        min-height: 68px;
    }

    .site-logo img {
        width: 36px;
        height: 36px;
    }

    .logout-button {
        padding: 7px 11px;
    }
}

/* ==========================================================
   Edge/Chrome consistente navigatie
   ========================================================== */
.main-navigation a,
.main-navigation a:link,
.main-navigation a:visited,
.main-navigation a:hover,
.main-navigation a:focus,
.main-navigation a.active,
.main-navigation .teacher-navigation {
    font-family: "Segoe UI", Arial, Helvetica, sans-serif !important;
    font-weight: 500 !important;
    font-synthesis: none;
    -webkit-font-smoothing: antialiased;
    text-rendering: geometricPrecision;
}