/* ════════════════════════════════════════════════════════════
   Alenas — Nieuwe lichte site-schil (header + footer + mobiel menu)
   Laadt ALS LAATSTE in views/layout.php. Body/main-achtergrond wordt
   NIET aangeraakt. Geen logica geraakt.
   ════════════════════════════════════════════════════════════ */

/* ── Header ── */
.sh {
    position: sticky; top: 0; z-index: 50;
    background: rgba(252,252,253,.86);
    -webkit-backdrop-filter: saturate(140%) blur(10px);
    backdrop-filter: saturate(140%) blur(10px);
    border-bottom: 1px solid rgba(20,24,30,.09);
    box-shadow: 0 6px 20px -8px rgba(20,24,30,.14);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
.sh__inner {
    max-width: 1080px; margin: 0 auto; padding: 0 40px; height: 66px;
    display: flex; align-items: center; gap: 22px;
}
.sh__logo { display: inline-flex; align-items: center; flex-shrink: 0; }
.sh__logo img { height: 40px; width: auto; display: block; }
.sh__nav { display: flex; gap: 26px; margin-left: auto; }
.sh__nav a { font-size: 14px; font-weight: 500; color: #3d4652; text-decoration: none; transition: color .15s; }
.sh__nav a:hover { color: #14181E; }
.sh__actions { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.sh__login { font-size: 14px; font-weight: 500; color: #3d4652; text-decoration: none; transition: color .15s; }
.sh__login:hover { color: #14181E; }
.sh__cta {
    font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 600; font-size: 14px;
    color: #fff; background: #5B8FF9; padding: 10px 18px; border-radius: 999px; text-decoration: none;
    transition: background .15s, transform .15s;
}
.sh__cta:hover { background: #3E67D6; transform: translateY(-1px); }

/* Hamburger: geen kader, drie lijntjes, rechts */
.sh__burger {
    display: none; background: none; border: none; box-shadow: none; padding: 8px 4px;
    cursor: pointer; margin-left: 4px; line-height: 0;
}
.sh__burger span, .sh__burger span::before, .sh__burger span::after {
    content: ""; display: block; width: 22px; height: 2px; background: #14181E; border-radius: 2px; position: relative;
}
.sh__burger span::before { position: absolute; top: -7px; }
.sh__burger span::after  { position: absolute; top: 7px; }

@media (max-width: 860px) {
    .sh__inner { padding: 0 20px; }
    .sh__nav, .sh__login, .sh__cta { display: none; }
    .sh__burger { display: block; }
}

/* ── Mobiel menu (uitschuivend paneel) ── */
.sh-drawer { position: fixed; inset: 0; z-index: 100; visibility: hidden; }
.sh-drawer.open { visibility: visible; }
.sh-drawer__overlay {
    position: absolute; inset: 0; background: rgba(10,14,20,.5);
    opacity: 0; transition: opacity .25s ease;
}
.sh-drawer.open .sh-drawer__overlay { opacity: 1; }
.sh-drawer__panel {
    position: absolute; top: 0; left: 0; bottom: 0; width: 86%; max-width: 400px;
    background: #fff; display: flex; flex-direction: column;
    transform: translateX(-100%); transition: transform .28s cubic-bezier(.4,0,.2,1);
    box-shadow: 0 0 50px rgba(0,0,0,.22); font-family: 'Inter', sans-serif;
}
.sh-drawer.open .sh-drawer__panel { transform: translateX(0); }
.sh-drawer__top {
    display: flex; align-items: center; justify-content: space-between;
    padding: 18px 22px; border-bottom: 1px solid rgba(20,24,30,.08); flex-shrink: 0;
}
.sh-drawer__logo img { height: 38px; width: auto; display: block; }
.sh-drawer__close { background: none; border: none; cursor: pointer; color: #14181E; padding: 6px; line-height: 0; }
.sh-drawer__close svg { width: 26px; height: 26px; }
.sh-drawer__nav { display: flex; flex-direction: column; overflow-y: auto; }
.sh-drawer__nav a {
    padding: 18px 22px; font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 600; font-size: 1.05rem;
    color: #14181E; text-decoration: none; border-bottom: 1px solid rgba(20,24,30,.07);
}
.sh-drawer__nav a:active { background: #F4F6FB; }
body.sh-locked { overflow: hidden; }

/* ── Footer (nieuwe donkere mockup-stijl) ── */
.site-footer { background: #1A1E28; color: #96a0ac; border-top: none; position: relative; }
.site-footer::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 46px; background: linear-gradient(180deg, rgba(0,0,0,.5), rgba(0,0,0,0)); pointer-events: none; z-index: 0; }
.site-footer > * { position: relative; z-index: 1; }
.site-footer a { color: #96a0ac; }
.site-footer a:hover { color: #fff; }
.site-footer__brand .site-footer__logo,
.site-footer__brand .site-footer__logo span { color: #fff; }
.site-footer__tagline { color: #78838f; }
.site-footer__col h4 { color: #fff; }
.site-footer__col ul a { color: #96a0ac; }
.site-footer__bottom { border-top: 1px solid rgba(255,255,255,.08); }
.site-footer__copy { color: #5f6a76; }
.site-footer__powered { color: #5f6a76; }
.site-footer__powered strong { color: #96a0ac; font-weight: 600; }
.footer-badge { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.10); color: #cdd4dc; }
.footer-badge:hover { border-color: rgba(255,255,255,.22); }