/* ═══════════════════════════════════════════════════════════════════════
   SAIB — Sprint 19
   Beoordelingen & werkervaring

   Additief bestand, zoals saib-responsive.css (Sprint 18). saib.css blijft
   ongemoeid. Laden ná saib.css en saib-responsive.css.

   Bootstrap 5 via CDN — geen build-tooling, geen preprocessors.
   ═══════════════════════════════════════════════════════════════════════ */


/* ───────────────────────────────────────────────────────────────────────
   Sterren-invoer (beoordelingsformulier)

   Radio-buttons als sterren, zonder JavaScript. Werkt met toetsenbord,
   werkt als scripts falen, en het formulier valt niet om.

   De truc: de sterren staan in de HTML van 5 naar 1 (omgekeerd), en met
   flex-direction:row-reverse zetten we ze visueel weer goed. Zo kan de
   CSS-selector `input:checked ~ label` alle sterren links van de gekozen
   ster raken — die staan in de DOM namelijk ná de gekozen input.
   Zonder :has() of JS is dit de enige manier die overal werkt.
   ─────────────────────────────────────────────────────────────────────── */

.saib-sterren-input {
    display: inline-flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
    gap: 4px;
}

.saib-sterren-input input[type="radio"] {
    /* Niet display:none — dan is de radio onbereikbaar voor toetsenbord
       en screenreaders. Onzichtbaar maar wel focusbaar. */
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

.saib-sterren-input label {
    cursor: pointer;
    font-size: 26px;
    line-height: 1;
    color: var(--border, #2a3550);
    transition: color 0.12s ease, transform 0.12s ease;
    margin: 0;
    /* Sprint 18-les: touch targets minimaal 44px op mobiel */
    padding: 6px 2px;
}

/* Gekozen ster + alle sterren ervóór (die in de DOM erna staan) */
.saib-sterren-input input[type="radio"]:checked ~ label,
.saib-sterren-input label:hover,
.saib-sterren-input label:hover ~ label {
    color: var(--gold, #c8a24a);
}

.saib-sterren-input label:hover {
    transform: scale(1.12);
}

/* Zichtbare focus-ring voor toetsenbordnavigatie */
.saib-sterren-input input[type="radio"]:focus-visible + label {
    outline: 2px solid var(--gold, #c8a24a);
    outline-offset: 2px;
    border-radius: 3px;
}


/* ───────────────────────────────────────────────────────────────────────
   Sterren-weergave (alleen lezen)
   ─────────────────────────────────────────────────────────────────────── */

.saib-sterren {
    white-space: nowrap;
    letter-spacing: 1px;
}

.saib-sterren i {
    font-size: 14px;
}


/* ───────────────────────────────────────────────────────────────────────
   Uitklap 'Aanvullend beoordelen'
   ─────────────────────────────────────────────────────────────────────── */

details > summary {
    outline: none;
}

details > summary::-webkit-details-marker {
    color: var(--gold, #c8a24a);
}

details[open] > summary {
    margin-bottom: 4px;
}


/* ───────────────────────────────────────────────────────────────────────
   Mobiel

   Sprint 18 stelde vast dat het dashboard onder 992px onbruikbaar was.
   Die lessen gelden ook hier: touch targets groot genoeg, en 16px minimum
   op inputs zodat iOS niet inzoomt bij focus.
   ─────────────────────────────────────────────────────────────────────── */

@media (max-width: 767.98px) {

    /* Sterren groter en verder uit elkaar: met een duim mik je minder
       precies dan met een muis. */
    .saib-sterren-input label {
        font-size: 30px;
        padding: 8px 4px;
    }

    .saib-sterren-input {
        gap: 6px;
    }

    /* iOS zoomt in op elk inputveld onder de 16px. Sprint 18-fix, hier
       herhaald voor de nieuwe velden. */
    .saib-sterren-input + input,
    #tekst,
    input[name^="jaren"] {
        font-size: 16px !important;
    }

    /* Moderatieformulier: knop onder het reden-veld in plaats van ernaast */
    .saib-moderatie-form {
        flex-direction: column;
        align-items: stretch;
    }

    .saib-moderatie-form input {
        max-width: 100% !important;
    }
}