/* v982: huisstijl-fundament — design-tokens.
 *
 * Eén bron voor kleuren, radius, schaduw en typografie, zodat de
 * landing-restyling (v983/v984) en de definitieve merknaam/het
 * logo in één keer overal doorwerken.
 *
 * v1080: Dayporto (brandbook Direction C). Deep Navy #0A2239 als
 * basis, Dayporto Orange #FF5A1F uitsluitend als actiekleur
 * (verhouding 70% neutraal / 20% navy / 10% orange), Success
 * Mint voor trust/succes en Warm Cream als zacht sectievlak.
 * Contrast op wit: navy #0A2239 ≈ 15:1, orange #FF5A1F op wit
 * alleen voor grote knoppen/accenten (v538-regel blijft: lopende
 * tekst nooit in oranje).
 *
 * Gebruik in templates/CSS: var(--merk-primair) enzovoort.
 * De bestaande style.css blijft leidend voor de app-schermen;
 * deze tokens zijn additief en breken niets.
 */

/* Inter (brandbook-typografie) via jsdelivr — de enige CDN die de
 * CSP voor styles én fonts toestaat. Fallback-stack staat in
 * --merk-font, dus zonder CDN blijft alles leesbaar. */
@import url('https://cdn.jsdelivr.net/npm/@fontsource/caveat@5.2.5/600.css');
@import url('https://cdn.jsdelivr.net/npm/@fontsource/caveat@5.2.5/700.css');
@import url('https://cdn.jsdelivr.net/npm/@fontsource/inter@5.2.5/400.css');
@import url('https://cdn.jsdelivr.net/npm/@fontsource/inter@5.2.5/600.css');
@import url('https://cdn.jsdelivr.net/npm/@fontsource/inter@5.2.5/700.css');

:root {
    /* Merkkleuren — Dayporto Direction C */
    --merk-primair: #0A2239;          /* Deep Navy */
    --merk-primair-donker: #071A2C;
    --merk-primair-licht: #E9EEF4;
    --merk-lucht: #FFF7F2;            /* Warm Cream — hero-/sectievlak */
    --merk-actie: #FF5A1F;            /* Dayporto Orange — CTA's */
    --merk-actie-donker: #E64D15;
    --merk-koraal: #FF7A45;           /* Warm Coral — zachte accenten */
    --merk-accent: #17A57F;           /* Success Mint (donkerder voor
                                         4,5:1-contrast op wit; badges
                                         op mint-licht gebruiken 'm ook) */
    --merk-accent-licht: #E4F9F2;
    /* v1154: tekst-op-tint-varianten die WCAG AA (4,5:1) halen — mint
     * #17A57F op de lichte tint komt op 2,8:1, oranje #FF5A1F onder wit
     * op 3,1:1. Oranje blijft de CTA-achtergrond; de tekst erop is navy. */
    --merk-accent-tekst: #0D6B51;     /* mint op --merk-accent-licht: 5,9:1 */
    --merk-actie-tekst: #C4390B;      /* oranje als tekst op wit: 5,3:1 */
    /* v1197: knoppen zijn wit op donker oranje (5,3:1, APCA Lc 81) —
     * het felle logo-oranje (--merk-actie) blijft voor iconen, badges
     * en accenten. Hover wordt donkerder (6,6:1), niet lichter. */
    --merk-knop: #C4390B;             /* knop-achtergrond */
    --merk-knop-hover: #A8300A;
    --merk-op-knop: #FFFFFF;          /* tekst op de knop: 5,3:1 */
    --merk-op-actie: #FFFFFF;         /* alias (v1188-naam) — wit op --merk-knop */

    /* Signaal */
    --merk-waarschuwing: #d97706;
    --merk-gevaar: #dc2626;

    /* Neutralen */
    --merk-inkt: #102A43;             /* Ink */
    --merk-mist: #F3F5F7;             /* Mist — app-/tabelvlakken */
    --merk-tekst: #374151;
    --merk-grijs: #69707d;            /* v1188: ≥ 4,5:1 op mist/cream (was #6b7280: 4,4:1 op mist) */
    --merk-vlak: #f5f7fa;
    --merk-rand: #e5e7eb;
    --merk-wit: #ffffff;

    /* Vorm */
    --merk-radius: 12px;
    --merk-radius-klein: 8px;
    --merk-schaduw: 0 1px 3px rgba(17, 24, 39, .08);
    --merk-schaduw-zweef: 0 10px 25px rgba(17, 24, 39, .12);

    /* Typografie */
    --merk-font: 'Inter', system-ui, -apple-system, 'Segoe UI',
                 Roboto, sans-serif;
    /* v1091: handgeschreven accent-font uit het brandbook */
    --merk-handschrift: 'Caveat', 'Segoe Script', 'Bradley Hand',
                        cursive;
}

/* Basishulpen voor de publieke pagina's (landing, security,
 * juridisch, status) — de app-schermen houden hun eigen stijl. */
.merk-knop-primair {
    /* v1080: primaire actie = Dayporto Orange (brandbook: orange
     * uitsluitend voor CTA's en actieve status). */
    background: var(--merk-knop);
    border: 1px solid var(--merk-knop);
    color: var(--merk-op-knop);   /* v1197: wit op donker oranje 5,3:1 */
    border-radius: var(--merk-radius-klein);
    padding: .6rem 1.25rem;
    font-weight: 600;
    text-decoration: none;
    display: inline-block;
    transition: background .15s ease;
}
.merk-knop-primair:hover {
    background: var(--merk-knop-hover);
    border-color: var(--merk-knop-hover);
    color: var(--merk-op-knop);
}
.merk-kaart {
    background: var(--merk-wit);
    border: 1px solid var(--merk-rand);
    border-radius: var(--merk-radius);
    box-shadow: var(--merk-schaduw);
}
.merk-badge-trust {
    background: var(--merk-accent-licht);
    color: var(--merk-accent-tekst);   /* v1154: was --merk-accent (2,8:1) */
    border-radius: 999px;
    padding: .25rem .75rem;
    font-size: .8rem;
    font-weight: 600;
    display: inline-block;
}

/* v1057: gedeelde stijl voor álle publieke pagina's (juridisch,
 * security, status, contact, aanmeld-wizard), zodat de hele
 * site één gezicht heeft. De navbar is licht met staalblauwe
 * accenten; de oude zwarte bg-dark-balken zijn verdwenen. */
.merk-publiek {
    color: var(--merk-tekst);
    background: var(--merk-wit);
}
.merk-publiek main a {
    color: var(--merk-primair);
}
.merk-publiek .btn-primary {
    background: var(--merk-primair);
    border-color: var(--merk-primair);
    color: #fff;   /* v1154: Bootstrap-override liet zwarte tekst op navy staan (1,3:1) */
}
.merk-publiek .btn-primary:hover,
.merk-publiek .btn-primary:focus {
    background: var(--merk-primair-donker);
    border-color: var(--merk-primair-donker);
}
.merk-publiek .btn-outline-primary {
    color: var(--merk-primair);
    border-color: var(--merk-primair);
}
.merk-publiek .btn-outline-primary:hover,
.merk-publiek .btn-outline-primary:focus {
    background: var(--merk-primair);
    border-color: var(--merk-primair);
    color: var(--merk-wit);
}
.merk-nav {
    background: var(--merk-wit);
    border-bottom: 1px solid var(--merk-rand);
    box-shadow: var(--merk-schaduw);
}
.merk-nav .navbar-brand {
    color: var(--merk-inkt);
    font-weight: 700;
}
.merk-nav a:not(.btn) {
    color: var(--merk-grijs);
    text-decoration: none;
}
.merk-nav a:not(.btn):hover,
.merk-nav a.fw-bold {
    color: var(--merk-primair);
}
.merk-hero-licht {
    background: linear-gradient(165deg, #f8fafd 0%,
        var(--merk-lucht) 55%, #e9eff7 100%);
    border-bottom: 1px solid var(--merk-rand);
    color: var(--merk-inkt);
}
.merk-chip {
    background: var(--merk-primair-licht);
    color: var(--merk-primair);
    border-radius: 999px;
    padding: .25rem .75rem;
    font-size: .8rem;
    font-weight: 600;
    display: inline-block;
}

/* ── v1091: grafische vormgevingslaag (brandbook/mockups) ─────
 * Warme organische vormen, handgeschreven accenten en de oranje
 * kicker — puur CSS/inline-SVG, dus CSP-veilig. */
.merk-kicker {
    text-transform: uppercase;
    letter-spacing: .14em;
    font-weight: 700;
    font-size: .8rem;
    color: var(--merk-actie);
}
.merk-handschrift {
    font-family: var(--merk-handschrift);
    font-weight: 600;
    font-size: 1.35rem;
    line-height: 1.15;
    transform: rotate(-3deg);
    display: inline-block;
}
.merk-decor { position: relative; overflow: hidden; }
.merk-decor > * { position: relative; z-index: 1; }
.merk-blob {
    position: absolute;
    z-index: 0 !important;
    pointer-events: none;
    border-radius: 62% 38% 55% 45% / 55% 45% 55% 45%;
}
.merk-blob--warm {
    background: linear-gradient(135deg, #FFE3D6 0%, #FF9A6B 100%);
    opacity: .45;
}
.merk-blob--koraal {
    /* zachte oranje gloed — leesbaar op donkere (navy) vlakken */
    background: radial-gradient(circle at 35% 35%,
        rgba(255, 122, 69, .55) 0%, rgba(255, 90, 31, 0) 68%);
    border-radius: 50%;
}
.merk-blob--cream { background: #FFF0E6; opacity: .8; }
.merk-zwiep { display: block; margin-top: .35rem; }
.merk-zwiep path {
    stroke: var(--merk-actie);
    stroke-width: 4;
    stroke-linecap: round;
    fill: none;
}

/* v1180: gedeelde site-schil — het menu en de footer van de homepage
 * staan als partials (templates/publiek/_nav.html, _footer.html) op
 * álle publieke pagina's (branche, ketenscan, contact, juridisch,
 * security, status). Deze regels stonden inline in landing.html. */
.merk-site {
    --primary: var(--merk-primair, #0A2239);
    --primary-donker: var(--merk-primair-donker, #071A2C);
    --accent: var(--merk-primair, #0A2239);
    --accent-licht: var(--merk-primair-licht, #E9EEF4);
    --trust: var(--merk-accent, #17A57F);
    --inkt: var(--merk-inkt, #111827);
    font-family: var(--merk-font, 'Inter', 'Segoe UI', system-ui, sans-serif);
    color: var(--merk-tekst, #374151);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
.merk-site > main { flex: 1 0 auto; }
.merk-site .btn-accent { background: var(--merk-knop, #C4390B); color: var(--merk-op-knop, #fff); border: none; }
.merk-site .btn-accent:hover { background: var(--merk-knop-hover, #A8300A); color: var(--merk-op-knop, #fff); }
.merk-site .text-white-75 { color: rgba(255,255,255,.75) !important; }
.merk-site .site-footer { background: var(--merk-primair-donker, #071A2C); color: rgba(255,255,255,0.7); }
.merk-site .site-footer a { color: rgba(255,255,255,0.6); text-decoration: none; }
.merk-site .site-footer a:hover { color: #fff; }
.merk-site .footer-logo { color: #fff; font-weight: 700; font-size: 1.1rem; }
.merk-site .section-title { font-size: 2rem; font-weight: 700; color: var(--inkt); }


/* ─── v1188: klikdoelen ≥ 24×24 px (WCAG 2.2 2.5.8) op de publieke site ── */
.merk-nav .nav-link { padding: .45rem .6rem; min-height: 24px; }
.merk-nav .navbar-toggler { min-width: 24px; min-height: 24px; padding: .35rem .6rem; }
/* v1194: sitemenu-dropdowns (Modules, Specialismen) + actief item */
.merk-nav .nav-link { border-radius: .5rem; font-weight: 500; }
.merk-nav .nav-link.active { color: var(--merk-primair); background: var(--merk-primair-licht, #E9EEF4); }
.merk-nav .dropdown-toggle::after { margin-left: .3em; vertical-align: .15em; opacity: .6; }
.merk-nav .mnav-menu { border: 1px solid var(--merk-rand); border-radius: .75rem; box-shadow: 0 12px 32px rgba(10,34,57,.14); padding: .6rem; margin-top: .35rem; min-width: 22rem; }
.merk-nav .mnav-menu-breed { min-width: 38rem; }
.merk-nav .mnav-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 .25rem; }
.merk-nav .mnav-kop { font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--merk-grijs); padding: .35rem .75rem .5rem; }
.merk-nav .mnav-item { display: flex; align-items: center; gap: .6rem; padding: .5rem .75rem; border-radius: .5rem; color: var(--merk-inkt); font-weight: 500; white-space: normal; }
.merk-nav .mnav-item i { color: var(--merk-primair); font-size: 1.05rem; width: 1.25rem; text-align: center; flex: 0 0 auto; }
.merk-nav .mnav-item:hover, .merk-nav .mnav-item:focus-visible { background: var(--merk-primair-licht, #E9EEF4); color: var(--merk-primair); }
.merk-nav .mnav-alle { margin-top: .35rem; padding: .55rem .75rem; border-top: 1px solid var(--merk-rand); border-radius: 0 0 .5rem .5rem; font-weight: 600; color: var(--merk-primair); }
.merk-nav .mnav-alle:hover, .merk-nav .mnav-alle:focus-visible { background: var(--merk-primair-licht, #E9EEF4); color: var(--merk-primair); }
@media (min-width: 992px) and (hover: hover) {
  /* Open bij aanwijzen; klik/toetsenbord blijft via Bootstrap werken. */
  .merk-nav .mnav-dropdown:hover > .mnav-menu, .merk-nav .mnav-dropdown:focus-within > .mnav-menu { display: block; }
}
@media (max-width: 991.98px) {
  .merk-nav .mnav-menu { box-shadow: none; border: 0; margin: 0 0 .5rem; padding: 0 .5rem; min-width: 0; }
  .merk-nav .mnav-menu-breed { min-width: 0; }
  .merk-nav .mnav-grid { grid-template-columns: 1fr; }
}
.taalkeuze a { display: inline-block; min-width: 24px; min-height: 24px; padding: .2rem .4rem; }
.merk-publiek main p a:not(.btn), .merk-publiek main li a:not(.btn) { text-decoration: underline; }

/* v1195: mockup-kaarten (landing "Zo ziet het eruit" + modulepagina's) — verhuisd uit landing.html zodat de partials overal werken. */
.mock-phone { width: 244px; margin: 0 auto; border: 9px solid #0b1520; border-radius: 38px; background: var(--merk-mist,#F3F5F7); overflow: hidden; box-shadow: var(--merk-schaduw-zweef, 0 10px 25px rgba(17,24,39,.12)); display: flex; flex-direction: column; }
.mock-ios-status { display: flex; align-items: center; justify-content: space-between; padding: .3rem .85rem .1rem; font-size: .62rem; font-weight: 700; color: #0A2239; position: relative; }
.mock-ios-status .bi { font-size: .58rem; margin-left: .12rem; }
.mock-ios-island { position: absolute; left: 50%; top: .28rem; transform: translateX(-50%); width: 52px; height: 12px; background: #0b1520; border-radius: 8px; }
.mock-ios-nav { display: flex; align-items: flex-end; justify-content: space-between; padding: .1rem .8rem .35rem; }
.mock-ios-nav .datum { font-size: .58rem; color: #5F6B78; /* v1154: 4,4→4,9:1 */ font-weight: 600; text-transform: uppercase; letter-spacing: .03em; }
.mock-ios-nav .titel { font-size: 1.35rem; font-weight: 800; color: #0A2239; line-height: 1.05; }
.mock-ios-avatar { width: 26px; height: 26px; border-radius: 50%; background: #0A2239; color: #fff; font-size: .6rem; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.mock-ios-body { padding: 0 .7rem .3rem; font-size: .74rem; }
.mock-ios-sync { display: flex; align-items: center; gap: .3rem; background: #FFF1E2; color: #92400E; border-radius: 10px; padding: .3rem .55rem; font-size: .64rem; font-weight: 600; margin-bottom: .55rem; }
.mock-ios-groep { background: #fff; border-radius: 14px; overflow: hidden; box-shadow: 0 1px 3px rgba(17,24,39,.06); }
.mock-ios-rij { display: flex; align-items: center; gap: .5rem; padding: .5rem .6rem; border-bottom: 1px solid #eef1f5; }
.mock-ios-rij:last-child { border-bottom: 0; }
.mock-ios-icoon { width: 26px; height: 26px; border-radius: 7px; background: var(--merk-primair-licht,#E9EEF4); color: #0A2239; display: flex; align-items: center; justify-content: center; font-size: .72rem; flex-shrink: 0; }
.mock-ios-rij .tekst { min-width: 0; flex: 1; overflow: hidden; }
.mock-ios-rij .nr { display: block; font-weight: 700; color: #0A2239; font-size: .68rem; }
.mock-ios-rij .sub { display: block; color: var(--merk-grijs,#6b7280); font-size: .62rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mock-ios-status-badge { font-size: .55rem; font-weight: 700; padding: .1rem .4rem; border-radius: 999px; white-space: nowrap; }
.mock-ios-s-onderweg { background: #FDECD2; color: #92400E; } /* v1154: 4,3→5,6:1 */
.mock-ios-s-ingepland { background: #EAEDF1; color: #4b5563; }
.mock-ios-s-afgerond { background: #DCF5EC; color: #0F7A5A; }
.mock-ios-chev { color: #C3CAD3; font-size: .6rem; flex-shrink: 0; }
.mock-ios-tab { margin-top: auto; display: flex; background: #fff; border-top: 1px solid #e6e9ee; padding: .3rem .2rem calc(.3rem + 6px); }
.mock-ios-tab span { flex: 1; text-align: center; font-size: .5rem; font-weight: 600; color: #5F6B78; /* v1154: 2,5→5,4:1 */ display: flex; flex-direction: column; align-items: center; gap: .1rem; }
.mock-ios-tab span .bi { font-size: .78rem; }
.mock-ios-tab span.actief { color: var(--merk-actie-tekst, #C4390B); }
.mock-plattegrond { background: #fbfcfe; border: 1px solid var(--merk-rand, #e5e7eb); border-radius: 8px; width: 100%; height: auto; }