/* =====================================================================
   Gedeelde header en footer van alle Chimeo-pagina's: homepage, auth,
   /download, /voorwaarden, portaal, beheer en foutpagina's.
   Alle selectors beginnen met .site-, zodat dit naast Bootstrap (chimeo.css)
   én naast de losstaande homepage-stijl (home.css) werkt. Markup staat in
   app/Views/partials/site_header.php en site_footer.php.
   ===================================================================== */
.site-header,
.site-footer,
.site-body {
    --s-navy: #1F2965;
    --s-navy-900: #141a33;
    --s-teal: #16B0B6;
    --s-teal-600: #118f94;
    --s-muted: #5b6478;
    --s-line: #e7eaf0;
    --s-soft: #f5f7fb;
    font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}
.site-header *, .site-footer * { box-sizing: border-box; }
/* Homepage en foutpagina's (geen Bootstrap): eigen breedte. Pagina's met Bootstrap geven de
   wrapper ook de class .container mee (layouts/main.php), zodat header, footer en inhoud
   exact dezelfde breedte en zijpadding hebben. */
.site-wrap:not(.container) { max-width: 1140px; margin: 0 auto; padding: 0 24px; }

/* ---- Header ---- */
.site-header {
    position: sticky;
    top: 0;
    z-index: 1030;
    background: rgba(255, 255, 255, .88);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--s-line);
}
.site-bar { display: flex; align-items: center; height: 74px; gap: 40px; }
.site-brand { display: flex; align-items: center; }
.site-brand img { display: block; }
.site-links { display: flex; gap: 28px; align-items: center; margin-left: 8px; }
.site-links a { color: var(--s-muted); font-weight: 500; font-size: 15px; text-decoration: none; }
.site-links a:hover { color: var(--s-navy); }
.site-cta { display: flex; gap: 14px; align-items: center; margin-left: auto; }
.site-login { color: var(--s-navy); font-weight: 600; font-size: 15px; text-decoration: none; }
.site-login:hover { color: var(--s-navy); }
.site-who { color: var(--s-muted); font-size: 14px; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.site-btn {
    display: inline-block;
    padding: 13px 24px;
    border-radius: 10px;
    font-weight: 600;
    font-size: 15px;
    line-height: 1.55;
    text-decoration: none;
    border: 2px solid transparent;
    cursor: pointer;
    transition: .15s;
}
.site-btn { white-space: nowrap; }
.site-btn-short { display: none; }
.site-btn-teal { background: var(--s-teal); color: #fff; box-shadow: 0 10px 22px -8px rgba(22, 176, 182, .6); }
.site-btn-teal:hover { background: var(--s-teal-600); color: #fff; transform: translateY(-1px); }

/* ---- Footer ---- */
.site-footer { background: var(--s-navy-900); color: #aab2cc; padding: 64px 0 30px; font-size: 14.5px; }
.site-footer a { color: inherit; text-decoration: none; }
.site-footer a:hover { color: #fff; }
.site-footer p { margin: 0; }
.site-foot-grid { display: grid; grid-template-columns: 1.7fr 1fr 1fr 1fr; gap: 34px; margin-bottom: 40px; }
.site-foot-brand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 20px; color: #fff; margin-bottom: 14px; }
.site-footer h4 {
    margin: 0 0 16px;
    color: #fff;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.55;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: 10px; }
.site-footer-compact { padding: 20px 0; }
.site-footer-compact .site-foot-bottom { border-top: 0; padding-top: 0; }
.site-foot-bottom { border-top: 1px solid #273155; padding-top: 22px; display: flex; justify-content: space-between; color: #7b85a6; font-size: 13px; }

/* ---- Pagina-opbouw voor losse pagina's zonder Bootstrap (foutpagina's) ---- */
.site-body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; background: var(--s-soft); color: #1d2333; }
.site-body > main { flex: 1; }
.site-error { max-width: 560px; margin: 0 auto; padding: 96px 24px; text-align: center; }
.site-error-code { font-size: 96px; font-weight: 800; line-height: 1; letter-spacing: -.04em; color: var(--s-teal); }
.site-error h1 { margin: 16px 0 12px; font-size: 32px; font-weight: 800; line-height: 1.14; letter-spacing: -.015em; color: var(--s-navy); }
.site-error p { margin: 0 0 8px; font-size: 17px; color: var(--s-muted); }
.site-error-detail { margin: 20px 0 0; padding: 12px 16px; background: #fff; border: 1px solid var(--s-line); border-radius: 12px; font-family: Menlo, monospace; font-size: 13px; text-align: left; white-space: pre-wrap; word-break: break-word; color: var(--s-muted); }
.site-error-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 28px; }
.site-btn-ghost { background: #fff; color: var(--s-navy); border-color: var(--s-line); }
.site-btn-ghost:hover { color: var(--s-navy); border-color: var(--s-navy); }

/* ---- Responsief ---- */
@media (max-width: 991px) {
    .site-links { display: none; }
    .site-foot-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 575px) {
    .site-bar { gap: 16px; }
    .site-cta { gap: 10px; }
    .site-login-guest, .site-who { display: none; }
    .site-btn-long { display: none; }
    .site-btn-short { display: inline; }
    .site-btn { padding: 11px 18px; }
    .site-foot-grid { grid-template-columns: 1fr; }
    .site-foot-bottom { flex-direction: column; gap: 8px; }
    .site-error-code { font-size: 72px; }
    .site-error h1 { font-size: 26px; }
}