/* navigatie.css - de weg terug en de weg dicht (WQ-061). Eigen bestand, zoals toonzaal.css en regelingen.css:
   style.css blijft onaangeroerd. Alleen tokens uit tokens.css, geen vaste kleuren. */

/* ===========================================================================
   DE WEG TERUG EN DE WEG DICHT (WQ-061, Nico 23-09 en 30-09)
   "← Terug" bovenaan: één stap terug, zoals de terugknop van de gsm. De ✕ staat
   rechtsboven in elk venster en blijft zichtbaar bij het scrollen (sticky, geen
   position:relative op het venster: dat zou lijstjes die uitklappen afknippen).
   =========================================================================== */
.ss-terug {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    margin-right: .7rem;
    padding: .3rem .75rem;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text);
    font-size: .85rem;
    line-height: 1.2;
    cursor: pointer;
    transition: background .18s cubic-bezier(.22, 1, .36, 1), border-color .18s cubic-bezier(.22, 1, .36, 1);
}
.ss-terug[hidden] { display: none; }
.ss-terug:hover { background: var(--hover-bg); }
.ss-terug:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
@media (max-width: 480px) {
    .ss-terug { padding: .35rem .6rem; margin-right: .45rem; }
    .ss-terug-tekst { display: none; }
}
.ss-venster-x {
    float: right;
    position: sticky;
    top: 0;
    z-index: 2;
    width: 2.1rem;
    height: 2.1rem;
    margin: -.7rem -.7rem .3rem .6rem;
    border: none;
    border-radius: 999px;
    background: transparent;
    color: var(--muted-leesbaar);
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
}
.ss-venster-x:hover { background: var(--hover-bg); color: var(--text); }
.ss-venster-x:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }