/* =============================================================================
   wa_info — info-bolletjes + toggle in de header + modal.

   - `.sit-header__infotoggle` : klein rond icoontje in de header. Actief =
     primaire kleur; inactief = grijs. Klik = toggle voor de hele app.
   - `body.wa-info-off .wa-info-dot` : bolletjes verborgen als toggle uit
     staat (default). `body.wa-info-on .wa-info-dot` toont ze.
   - `.wa-info-dot` : kleine ronde "i"-knop naast een knop/sectie-titel.
   - `dialog.wa-info-dlg` : modal met titel + body op klik.

   Alle SIT-apps kunnen dit hergebruiken door dit bestand + wa_info.js in te
   linken en de body-class op basis van localStorage['wa.info.tips'] te zetten.
   ========================================================================== */

/* ─── Header-toggle ───────────────────────────────────────────────────── */
.sit-header__infotoggle {
    background: transparent;
    border: 1px solid transparent;
    color: #94a3b8;
    width: 32px; height: 32px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%;
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
    font-size: 16px;
    padding: 0;
    margin-right: 6px;
}
.sit-header__infotoggle:hover {
    background: color-mix(in srgb, var(--sit-primary, #FF6B1A) 12%, transparent);
    color: var(--sit-primary, #FF6B1A);
}
.sit-header__infotoggle[aria-pressed="true"] {
    color: var(--sit-primary, #FF6B1A);
    background: color-mix(in srgb, var(--sit-primary, #FF6B1A) 15%, transparent);
    border-color: var(--sit-primary, #FF6B1A);
}
.sit-header__infotoggle[aria-pressed="true"]:hover {
    background: color-mix(in srgb, var(--sit-primary, #FF6B1A) 25%, transparent);
}

/* ─── Info-bolletjes bij knoppen/secties ─────────────────────────────── */
.wa-info-dot {
    display: none; /* default: verborgen (JS zet body-class bij load) */
    align-items: center; justify-content: center;
    width: 16px; height: 16px;
    margin-left: 6px;
    border-radius: 50%;
    border: none;
    background: var(--sit-primary, #FF6B1A);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    vertical-align: middle;
    padding: 0;
    box-shadow: 0 0 0 0 rgba(255, 107, 26, .4);
    transition: transform .15s, box-shadow .2s;
}
body.wa-info-on .wa-info-dot { display: inline-flex; }
.wa-info-dot:hover {
    transform: scale(1.15);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--sit-primary, #FF6B1A) 25%, transparent);
}
.wa-info-dot:focus-visible {
    outline: 2px solid var(--sit-primary, #FF6B1A);
    outline-offset: 2px;
}
.wa-info-dot::before {
    content: "i";
    font-family: Georgia, "Times New Roman", serif;
    font-style: italic;
}

/* ─── Info-modal ─────────────────────────────────────────────────────── */
dialog.wa-info-dlg {
    border: none;
    border-radius: 12px;
    padding: 0;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .35);
    max-width: 520px;
    width: min(92vw, 520px);
    color: #0F172A;
}
dialog.wa-info-dlg::backdrop { background: rgba(15, 23, 42, .55); }
.wa-info-dlg-inner {
    padding: 22px 24px;
}
.wa-info-dlg h3 {
    margin: 0 0 8px 0;
    font-size: 18px;
    display: flex; align-items: center; gap: 8px;
    color: var(--sit-primary, #FF6B1A);
}
.wa-info-dlg h3 .bi { font-size: 20px; }
.wa-info-dlg .wa-info-body {
    font-size: 14px;
    line-height: 1.55;
    color: #334155;
    white-space: pre-wrap;
}
.wa-info-dlg .wa-info-actions {
    display: flex; justify-content: flex-end; margin-top: 18px;
}
.wa-info-dlg button.wa-info-close {
    padding: 8px 18px;
    border-radius: 6px;
    border: 1px solid var(--sit-primary, #FF6B1A);
    background: var(--sit-primary, #FF6B1A);
    color: #fff;
    font-size: 13px; font-weight: 600;
    cursor: pointer;
}
.wa-info-dlg button.wa-info-close:hover {
    background: color-mix(in srgb, var(--sit-primary, #FF6B1A) 85%, #000);
}