:root {
    --eu-blue: #003399;
    --eu-yellow: #ffe600;
    --eu-red: #e8002b;
    --eu-green: #10e710;
    --eu-white: #fff;
    --menu-height: 62px;
    --footer-height: 52px;

    --public-header-bg: linear-gradient(90deg, var(--eu-blue) 60%, var(--eu-yellow) 100%);
    --public-footer-bg: linear-gradient(90deg, var(--eu-blue) 60%, var(--eu-yellow) 100%);
    --admin-header-bg: linear-gradient(90deg, var(--eu-blue) 60%, var(--eu-white) 100%);
    --admin-footer-bg: linear-gradient(90deg, var(--eu-blue) 60%, var(--eu-white) 100%);
}

/* -------- FLEX LAYOUT: ANTI-DUBBELE-SCROLL -------- */
html, body {
    height: 100%;
    min-height: 100vh;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    overflow: hidden;  /* Voorkomt dubbele scrollbars! */
}
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    height: 100vh;
    font-family: 'Segoe UI', Arial, Verdana, sans-serif;
    background: #f7f7fa;
}

/* Header en footer nemen vaste ruimte in */
header, footer {
    flex-shrink: 0;
}

/* Hoofdcontent: alleen dit deel mag scrollen */
main.page-content, .public-main, .admin-main {
    flex: 1 1 auto;
    min-height: 0;
    max-height: calc(100vh - var(--menu-height) - var(--footer-height));
    overflow-y: auto;
    padding: 2em 1.5em 2em 1.5em;
    background: none;
    box-sizing: border-box;
}

/* -------- HEADER STYLING -------- */
.public-header, .admin-header {
    width: 100%;
    min-height: var(--menu-height);
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0; z-index: 100;
    box-shadow: 0 2px 16px #0001;
    justify-content: flex-start;
}
.public-header { background: var(--public-header-bg); }
.admin-header  { background: var(--admin-header-bg); }

/* Header-logo (tekst én iconen met outline) */
.public-header-logo, .admin-header-logo {
    font-size: 2em;
    font-weight: 700;
    display: flex;
    align-items: center;
    padding: 1em 2em 0.5em 2em;
    letter-spacing: .01em;
}
.public-header-logo,
.public-header-logo * {
    color: var(--eu-yellow) !important;
    text-shadow:
        -2px -2px 0 var(--eu-red),
         2px -2px 0 var(--eu-red),
        -2px  2px 0 var(--eu-red),
         2px  2px 0 var(--eu-red),
         0px  2px 0 var(--eu-red),
         2px  0px 0 var(--eu-red),
         0px -2px 0 var(--eu-red),
        -2px  0px 0 var(--eu-red) !important;
}
.admin-header-logo,
.admin-header-logo * {
    color: var(--eu-red) !important;
    text-shadow:
        -2px -2px 0 var(--eu-yellow),
         2px -2px 0 var(--eu-yellow),
        -2px  2px 0 var(--eu-yellow),
         2px  2px 0 var(--eu-yellow),
         0px  2px 0 var(--eu-yellow),
         2px  0px 0 var(--eu-yellow),
         0px -2px 0 var(--eu-yellow),
        -2px  0px 0 var(--eu-yellow) !important;
}
/* FORCEER Outline op ALLE FA-iconen types (laatste regel overschrijft alles!) */
.public-header-logo .fa-solid,
.public-header-logo .fa-regular,
.public-header-logo .fa-light,
.public-header-logo .fa-duotone,
.public-header-logo .fa-brands {
    color: var(--eu-yellow) !important;
    text-shadow:
        -2px -2px 0 var(--eu-red),
         2px -2px 0 var(--eu-red),
        -2px  2px 0 var(--eu-red),
         2px  2px 0 var(--eu-red),
         0px  2px 0 var(--eu-red),
         2px  0px 0 var(--eu-red),
         0px -2px 0 var(--eu-red),
        -2px  0px 0 var(--eu-red) !important;
}
.admin-header-logo .fa-solid,
.admin-header-logo .fa-regular,
.admin-header-logo .fa-light,
.admin-header-logo .fa-duotone,
.admin-header-logo .fa-brands {
    color: var(--eu-red) !important;
    text-shadow:
        -2px -2px 0 var(--eu-yellow),
         2px -2px 0 var(--eu-yellow),
        -2px  2px 0 var(--eu-yellow),
         2px  2px 0 var(--eu-yellow),
         0px  2px 0 var(--eu-yellow),
         2px  0px 0 var(--eu-yellow),
         0px -2px 0 var(--eu-yellow),
        -2px  0px 0 var(--eu-yellow) !important;
}
.public-header-logo .fa-solid,
.admin-header-logo .fa-solid { font-size: 1.3em; margin-right: 15px; }

/* -------- HAMBURGER (MOBILE) -------- */
.menu-hamburger {
    display: none;
    cursor: pointer;
    align-items: center;
    background: transparent;
    border: none;
    color: inherit;
    font-size: 1.9em;
    margin-left: auto;
    margin-right: 10px;
    padding: 0.2em 0.7em 0.1em 0.7em;
    border-radius: 7px;
    transition: background 0.15s;
}
.menu-hamburger:focus,
.menu-hamburger:hover {
    background: #ffe60033;
}

/* -------- MENU BAR (Dynamisch via menu.js) -------- */
nav.menu-bar {
    display: flex; gap: 3px;
    padding: 0 2em 0.7em 2em;
}
nav.menu-bar .menu-item {
    background: var(--eu-yellow);
    color: var(--eu-blue);
    border-radius: 7px;
    margin-right: 8px;
    padding: 0.53em 1.3em 0.53em 1em;
    font-weight: 600;
    border: 2px solid var(--eu-blue);
    box-shadow: 0 2px 10px #0001;
    cursor: pointer;
    display: flex; align-items: center;
    font-size: 1.13em;
    gap: 0.7em;
    position: relative;
    transition: background .13s, color .13s, border-color .13s;
}
nav.menu-bar .menu-item:hover,
nav.menu-bar .menu-item:focus {
    background: var(--eu-blue);
    color: var(--eu-yellow);
    border-color: var(--eu-yellow);
}
.admin-header nav.menu-bar .menu-item {
    background: var(--eu-white);
    color: var(--eu-red);
    border: 2px solid var(--eu-yellow);
    box-shadow: 0 0 0 2px var(--eu-red) inset;
}
.admin-header nav.menu-bar .menu-item:hover {
    background: var(--eu-red);
    color: var(--eu-yellow);
    border-color: var(--eu-yellow);
    box-shadow: 0 0 0 2px var(--eu-yellow) inset;
}
nav.menu-bar .fa-solid { margin-right: 0.25em; }
nav.menu-bar .submenu {
    display: none;
    position: absolute; left: 0; top: 100%;
    min-width: 220px;
    background: var(--eu-yellow);
    color: var(--eu-blue);
    border: 2px solid var(--eu-blue);
    box-shadow: 0 4px 20px #00339928;
    flex-direction: column;
    z-index: 20;
}
nav.menu-bar .menu-item:hover > .submenu,
nav.menu-bar .menu-item:focus-within > .submenu {
    display: flex;
}
.admin-header nav.menu-bar .submenu {
    background: var(--eu-white);
    color: var(--eu-red);
    border: 2px solid var(--eu-red);
}
.submenu .menu-item {
    border-radius: 0; margin: 0;
    font-weight: 500; font-size: 1em;
    background: transparent; color: inherit;
    box-shadow: none;
    padding: .6em 1.2em .6em 1.2em;
    border-bottom: 1px solid #f4f4f4;
}
.submenu .menu-item:last-child { border-bottom: none; }

/* -------- FOOTER -------- */
.public-footer, .admin-footer {
    position: fixed; bottom: 0; left: 0; right: 0;
    height: var(--footer-height); min-height: 48px;
    box-shadow: 0 -2px 12px #00339916;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.1em;
    font-weight: 600;
    letter-spacing: .03em;
    z-index: 100;
}
.public-footer {
    background: var(--public-footer-bg);
    color: var(--eu-yellow);
}
.admin-footer {
    background: var(--admin-footer-bg);
    color: var(--eu-red);
}
.public-footer .fa-solid, .admin-footer .fa-solid { margin-right: 0.5em; }

/* -------- RESPONSIVE -------- */
@media (max-width: 900px) {
    nav.menu-bar { display: none; }
    .menu-hamburger { display: flex; }
    .menu-bar.menu-mobile { display: flex; }
    .public-header-logo, .admin-header-logo { font-size: 1.35em; padding: 0.7em 0.7em 0.7em 0.8em;}
}
:root {
    --eu-blue: #003399;
    --eu-yellow: #ffe600;
    --eu-red: #e8002b;
    --eu-green: #10e710;
    --eu-white: #fff;
    --menu-height: 62px;
    --footer-height: 52px;
    --public-header-bg: linear-gradient(90deg, var(--eu-blue) 60%, var(--eu-yellow) 100%);
    --public-footer-bg: linear-gradient(90deg, var(--eu-blue) 60%, var(--eu-yellow) 100%);
    --admin-header-bg: linear-gradient(90deg, var(--eu-blue) 60%, var(--eu-white) 100%);
    --admin-footer-bg: linear-gradient(90deg, var(--eu-blue) 60%, var(--eu-white) 100%);
}

/* -------- FLEX LAYOUT -------- */
html, body { height: 100%; min-height: 100vh; margin: 0; padding: 0; box-sizing: border-box; overflow: hidden;}
body { display: flex; flex-direction: column; min-height: 100vh; height: 100vh; font-family: 'Segoe UI', Arial, Verdana, sans-serif; background: #f7f7fa;}
header, footer { flex-shrink: 0; }
main.page-content, .public-main, .admin-main { flex: 1 1 auto; min-height: 0; max-height: calc(100vh - var(--menu-height) - var(--footer-height)); overflow-y: auto; padding: 2em 1.5em 2em 1.5em; background: none; box-sizing: border-box; }

/* -------- HEADER -------- */
.public-header, .admin-header {
    width: 100%; min-height: var(--menu-height); display: flex; flex-direction: column;
    position: sticky; top: 0; z-index: 100; box-shadow: 0 2px 16px #0001; justify-content: flex-start;
}
.public-header { background: var(--public-header-bg);}
.admin-header  { background: var(--admin-header-bg);}

/* -------- HEADER LOGO + OUTLINE -------- */
.public-header-logo, .admin-header-logo {
    font-size: 2em; font-weight: 700; display: flex; align-items: center;
    padding: 1em 2em 0.5em 2em; letter-spacing: .01em;
}
.public-header-logo, .public-header-logo * {
    color: var(--eu-yellow) !important;
    text-shadow:
        -2px -2px 0 var(--eu-red),  2px -2px 0 var(--eu-red),
        -2px  2px 0 var(--eu-red),  2px  2px 0 var(--eu-red),
         0px  2px 0 var(--eu-red),  2px  0px 0 var(--eu-red),
         0px -2px 0 var(--eu-red), -2px  0px 0 var(--eu-red) !important;
}
.admin-header-logo, .admin-header-logo * {
    color: var(--eu-red) !important;
    text-shadow:
        -2px -2px 0 var(--eu-yellow),  2px -2px 0 var(--eu-yellow),
        -2px  2px 0 var(--eu-yellow),  2px  2px 0 var(--eu-yellow),
         0px  2px 0 var(--eu-yellow),  2px  0px 0 var(--eu-yellow),
         0px -2px 0 var(--eu-yellow), -2px  0px 0 var(--eu-yellow) !important;
}

/* --- ENFORCE OUTLINE ON FA ICON (header only) --- */
.public-header-logo > i[class^="fa"], .public-header-logo > i[class*=" fa-"] {
    color: var(--eu-yellow) !important;
    text-shadow:
        -2px -2px 0 var(--eu-red),  2px -2px 0 var(--eu-red),
        -2px  2px 0 var(--eu-red),  2px  2px 0 var(--eu-red),
         0px  2px 0 var(--eu-red),  2px  0px 0 var(--eu-red),
         0px -2px 0 var(--eu-red), -2px  0px 0 var(--eu-red) !important;
    font-size: 1.3em; margin-right: 15px;
}
.admin-header-logo > i[class^="fa"], .admin-header-logo > i[class*=" fa-"] {
    color: var(--eu-red) !important;
    text-shadow:
        -2px -2px 0 var(--eu-yellow),  2px -2px 0 var(--eu-yellow),
        -2px  2px 0 var(--eu-yellow),  2px  2px 0 var(--eu-yellow),
         0px  2px 0 var(--eu-yellow),  2px  0px 0 var(--eu-yellow),
         0px -2px 0 var(--eu-yellow), -2px  0px 0 var(--eu-yellow) !important;
    font-size: 1.3em; margin-right: 15px;
}

/* -------- HAMBURGER (MOBILE) -------- */
.menu-hamburger { display: none; cursor: pointer; align-items: center; background: transparent; border: none; color: inherit; font-size: 1.9em; margin-left: auto; margin-right: 10px; padding: 0.2em 0.7em 0.1em 0.7em; border-radius: 7px; transition: background 0.15s;}
.menu-hamburger:focus, .menu-hamburger:hover { background: #ffe60033; }

@media (max-width: 900px) {
    .menu-hamburger { display: flex; }
    nav.menu-bar { display: none; }
    .menu-bar.menu-mobile { display: flex; }
    .public-header-logo, .admin-header-logo { font-size: 1.35em; padding: 0.7em 0.7em 0.7em 0.8em;}
}

/* -------- MENU BAR -------- */
/* ... hier jouw bestaande menu-bar code, evt. toevoegen ... */

/* -------- FOOTER -------- */
.public-footer, .admin-footer {
    position: fixed; bottom: 0; left: 0; right: 0;
    height: var(--footer-height); min-height: 48px;
    box-shadow: 0 -2px 12px #00339916;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.1em; font-weight: 600; letter-spacing: .03em; z-index: 100;
}
.public-footer { background: var(--public-footer-bg); color: var(--eu-yellow);}
.admin-footer  { background: var(--admin-footer-bg); color: var(--eu-red);}
.public-footer .fa-solid, .admin-footer .fa-solid { margin-right: 0.5em;}