/*
  Vormgeving van het Reisportaal, in de huisstijl van de Nederlandse Reisopera.

  De kleuren komen rechtstreeks uit het themapalet van reisopera.nl:
  aubergine #200028, koningspaars #64007D, zalm #FFA58D, magenta #E0008F en
  lilawit #FDF7FF. Het lettertype van de Reisopera (GT America Extended) is
  commercieel; Archivo (SIL Open Font License, zelf gehost — de CSP staat geen
  externe bronnen toe) is de vrij beschikbare tegenhanger, met een brede snit
  voor koppen.

  De doelgroep is grotendeels 70-plus en niet per se digitaal vaardig. Daar
  blijven de harde regels vandaan komen: letters minimaal 20px, klikvlakken
  minimaal 56px, ruime regelafstand, hoge contrasten, en niets dat beweegt of
  vanzelf verdwijnt. Mooi mag, maar nooit ten koste daarvan.
*/

/* --- Lettertype ---------------------------------------------------------- */

@font-face {
    font-family: "Archivo";
    src: url("../fonts/archivo-400.woff2") format("woff2");
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: "Archivo";
    src: url("../fonts/archivo-600.woff2") format("woff2");
    font-weight: 600;
    font-display: swap;
}

@font-face {
    font-family: "Archivo";
    src: url("../fonts/archivo-700.woff2") format("woff2");
    font-weight: 700;
    font-display: swap;
}

/* De brede snit, alleen voor koppen — de "Extended"-uitstraling van de huisstijl. */
@font-face {
    font-family: "Archivo Expanded";
    src: url("../fonts/archivo-exp-700.woff2") format("woff2");
    font-weight: 700;
    font-display: swap;
}

/* --- Kleuren ------------------------------------------------------------- */

:root {
    --aubergine: #200028;      /* huisstijl: theme-dark_purple */
    --paars: #64007D;          /* huisstijl: theme-velours */
    --paars-donker: #4A005D;
    --zalm: #FFA58D;           /* huisstijl: accentkleur */
    --magenta: #E0008F;        /* huisstijl: theme-grief, voor focus en accenten */
    --lilawit: #FDF7FF;        /* huisstijl: theme-light_pink */

    --tekst: var(--aubergine);
    --gedempt: #5B4665;        /* aubergine-grijs, ruim voldoende contrast op wit */
    --achtergrond: #FFFFFF;
    --vlak: var(--lilawit);
    --lijn: #E2D3EA;

    --fout: #8C1044;
    --fout-vlak: #FCEDF4;
    --goed: #1B5E33;
    --goed-vlak: #EEF7F0;

    --rand: 12px;
    --schaduw: 0 2px 10px rgba(32, 0, 40, 0.07);
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--achtergrond);
    color: var(--tekst);
    font-family: "Archivo", system-ui, "Segoe UI", Arial, sans-serif;
    font-size: 20px;      /* ondergrens voor deze doelgroep, niet 16 */
    line-height: 1.7;
}

::selection { background: var(--zalm); color: var(--aubergine); }

a {
    color: var(--paars);
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}

/* Rustige overgangen op alles wat aanraakbaar is; de reduced-motion-regel
   onderaan zet ze uit voor wie daar last van heeft. */
a, .knop, .reis-kaart, input, select, textarea {
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease,
                box-shadow 0.15s ease, transform 0.15s ease;
}

h1, h2 {
    font-family: "Archivo Expanded", "Archivo", system-ui, sans-serif;
    font-weight: 700;
    letter-spacing: -0.01em;
}

/* Zichtbaar zodra iemand met de toetsenbord-tab binnenkomt. */
.overslaan {
    position: absolute;
    left: -9999px;
}
.overslaan:focus {
    position: static;
    display: inline-block;
    padding: 12px 16px;
    background: var(--paars);
    color: #fff;
}

/* --- Kop ----------------------------------------------------------------- */

.kop {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    padding: 20px 28px;
    background:
        radial-gradient(circle at 88% -20%, rgba(255, 165, 141, 0.28), transparent 42%),
        linear-gradient(115deg, var(--paars) 0%, #4B005E 55%, var(--aubergine) 100%);
    color: #fff;
    border-bottom: 4px solid var(--zalm);
    box-shadow: 0 4px 18px rgba(32, 0, 40, 0.22);
    position: relative;
    z-index: 1;
}

.kop__titel {
    display: flex;
    align-items: center;
    gap: 16px;
    color: #fff;               /* het logo kleurt mee via currentColor */
    text-decoration: none;
    font-weight: 600;
}

.kop__titel .logo {
    height: 44px;
    width: auto;
    display: block;
}

/* Het label naast het woordmerk ("Reisportaal", "Beheer"). */
.kop__merk {
    border-left: 2px solid var(--zalm);
    padding-left: 16px;
    font-size: 19px;
    line-height: 1.3;
    color: var(--zalm);
    white-space: nowrap;
}

.kop__uit {
    display: inline-block;
    color: #fff;
    font-size: 18px;
    font-weight: 600;
    text-decoration: none;
    padding: 10px 24px;
    border: 2px solid rgba(255, 255, 255, 0.85);
    border-radius: 999px;
}
.kop__uit:hover {
    background: #fff;
    color: var(--paars);
}

.inhoud {
    max-width: 42rem;      /* korte regels lezen makkelijker */
    margin: 0 auto;
    padding: 40px 24px 72px;
}

h1 {
    font-size: 34px;
    line-height: 1.25;
    margin: 0 0 12px;
}

/* Een klein zalmkleurig voetlicht onder elke paginatitel. */
h1::after {
    content: "";
    display: block;
    width: 64px;
    height: 6px;
    border-radius: 3px;
    background: var(--zalm);
    margin-top: 14px;
}

h1 + * { margin-top: 24px; }

h2 {
    font-size: 25px;
    line-height: 1.35;
    margin: 0;
}

/* Sectiekoppen direct in de pagina krijgen ademruimte en een dunne scheidslijn;
   koppen ín kaarten en blokken blijven strak. */
.inhoud > h2 {
    margin: 48px 0 16px;
    padding-top: 22px;
    border-top: 2px solid var(--lijn);
}

/* --- Voortgang (deelnemersstappen) ---------------------------------------
   Zonder inline-stijlen (de CSP staat die niet toe): één segment per stap,
   gevuld tot waar de deelnemer is. Vier blokjes waarvan drie gevuld leest
   voor iedereen als "bijna klaar". */

.voortgang {
    margin-bottom: 10px;
}

.voortgang__tekst {
    display: block;
    color: var(--paars);
    font-size: 17px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.voortgang__segmenten {
    display: flex;
    gap: 6px;
    list-style: none;
    margin: 0;
    padding: 0;
    max-width: 320px;
}

.voortgang__segmenten li {
    flex: 1;
    height: 10px;
    border-radius: 5px;
    background: var(--lijn);
}

.voortgang__segmenten li.is-klaar { background: var(--zalm); }
.voortgang__segmenten li.is-huidig { background: var(--paars); }

/* --- Velden -------------------------------------------------------------- */

.veld {
    margin: 0 0 36px;
}

.veld label {
    display: block;
    font-weight: 600;
    margin-bottom: 6px;
}

.veld label.inline {
    display: inline;
    font-weight: 400;
    margin-left: 10px;
}

.optioneel {
    font-weight: 400;
    color: var(--gedempt);
}

.uitleg {
    margin: 0 0 10px;
    color: var(--gedempt);
    font-size: 18px;
}

.uitleg-blok {
    background: var(--vlak);
    border-left: 6px solid var(--zalm);
    border-radius: 0 var(--rand) var(--rand) 0;
    padding: 18px 22px;
    margin: 0 0 28px;
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="date"],
input[type="number"],
select,
textarea {
    width: 100%;
    padding: 14px 16px;
    font-size: 20px;
    font-family: inherit;
    color: var(--tekst);
    background: #fff;
    border: 2px solid #C9B2D3;
    border-radius: 10px;
}

/* Foutmelding bij een veld: direct onder het label, in de kleur van de melding-fout */
.veld .fout {
    color: #B3003B;
    font-size: 18px;
    font-weight: 600;
    margin: 4px 0 8px;
}

input[aria-invalid="true"],
select[aria-invalid="true"],
textarea[aria-invalid="true"] {
    border-color: #B3003B;
}

.ontbrekend {
    margin: 8px 0 0 22px;
    padding: 0;
}

.ontbrekend li {
    margin: 6px 0;
}

.leeg--verplicht {
    color: #B3003B;
    font-weight: 600;
}

/* Datumvelden: gewoon zwarte cijfers, ook in de kalender die de browser opent. */
input[type="date"] {
    color: #000;
    accent-color: #000;
    color-scheme: light;
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.knop:focus-visible,
a:focus-visible {
    outline: 3px solid var(--magenta);
    outline-offset: 2px;
}

/* Knoppen naast elkaar in een tabelrij */
.rij-acties {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.rij-acties form {
    margin: 0;
}

.keuze-rij {
    display: flex;
    align-items: center;
}

.keuze-rij input[type="checkbox"] {
    width: 28px;
    height: 28px;      /* standaard vinkje is te klein om te raken */
    accent-color: var(--paars);
}

/* --- Knoppen ------------------------------------------------------------- */

.knoppen {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin: 40px 0 16px;
}

.knop {
    display: inline-block;
    padding: 15px 30px;
    min-height: 56px;          /* ruim boven de 44px die als ondergrens geldt */
    font-size: 20px;
    font-family: inherit;
    font-weight: 600;
    text-decoration: none;
    text-align: center;
    border: 2px solid transparent;
    border-radius: 999px;      /* de ronde vormen van de huisstijl */
    cursor: pointer;
}

.knop:hover { transform: translateY(-1px); }
.knop:active { transform: translateY(0); }

.knop--verder {
    background: var(--paars);
    color: #fff;
    box-shadow: 0 4px 14px rgba(100, 0, 125, 0.28);
}
.knop--verder:hover {
    background: var(--paars-donker);
    box-shadow: 0 6px 18px rgba(100, 0, 125, 0.34);
}

.knop--terug {
    background: #fff;
    color: var(--paars);
    border-color: var(--paars);
}
.knop--terug:hover { background: var(--vlak); }

.knop--klein {
    padding: 8px 18px;
    min-height: 0;
    font-size: 18px;
}

/* De zalmkleurige actieknop, voor hét belangrijkste moment op een pagina. */
.knop--zalm {
    background: var(--zalm);
    color: var(--aubergine);
    box-shadow: var(--schaduw);
}
.knop--zalm:hover { background: #FF9377; }

/* --- Podium (voorpagina) -------------------------------------------------
   De busfoto als toneel, met een paarse gloed van links zodat de tekst op
   elke foto leesbaar blijft. Ontbreekt de foto, dan vangt de onderste
   gradientlaag het op en blijft het vlak gewoon paars. */

.podium {
    background:
        linear-gradient(100deg,
            rgba(32, 0, 40, 0.93) 0%,
            rgba(32, 0, 40, 0.82) 42%,
            rgba(74, 0, 93, 0.45) 75%,
            rgba(100, 0, 125, 0.25) 100%),
        url("../beeld/bus-hero.jpg") center / cover no-repeat,
        linear-gradient(130deg, var(--paars) 0%, #4B005E 60%, var(--aubergine) 100%);
    color: var(--lilawit);
    border-radius: 22px;
    padding: 48px 42px;
    min-height: 340px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    box-shadow: 0 10px 30px rgba(32, 0, 40, 0.22);
    margin-bottom: 32px;
}

.podium h1 {
    color: #fff;
    margin-bottom: 4px;
}

.podium .knop { margin-top: 8px; }

.gerust {
    color: var(--gedempt);
    font-size: 18px;
}

/* --- Meldingen ----------------------------------------------------------- */

.melding {
    padding: 18px 22px;
    border-radius: var(--rand);
    margin: 0 0 28px;
}

.melding--fout {
    background: var(--fout-vlak);
    border-left: 6px solid var(--fout);
    color: var(--fout);
}

.melding--goed {
    background: var(--goed-vlak);
    border-left: 6px solid var(--goed);
}

.melding--goed h1 { color: var(--goed); }

/* --- Reizen en samenvatting ---------------------------------------------- */

.reis-kaart {
    border: 2px solid var(--lijn);
    border-radius: var(--rand);
    background: #fff;
    box-shadow: var(--schaduw);
    padding: 26px;
    margin-bottom: 28px;
}

.reis-kaart:hover {
    border-color: #C9B2D3;
    box-shadow: 0 8px 24px rgba(32, 0, 40, 0.12);
}

/* Kaarttitels zijn de klikbare ingang: aubergine, zonder permanente streep. */
.reis-kaart h2 a {
    color: var(--aubergine);
    text-decoration: none;
}
.reis-kaart h2 a:hover {
    color: var(--paars);
    text-decoration: underline;
    text-decoration-color: var(--zalm);
}

/* Klikbare tegel: de link in de kop krijgt een onzichtbare laag over de hele
   kaart, zodat een klik waar dan ook op de tegel de link volgt. Geen JavaScript,
   en voor schermlezers en toetsenbord blijft het gewoon één link met de reisnaam. */
.reis-kaart--klikbaar {
    position: relative;
    cursor: pointer;
}
.reis-kaart--klikbaar h2 a::after {
    content: "";
    position: absolute;
    inset: 0;
}
.reis-kaart--klikbaar:focus-within {
    outline: 4px solid var(--paars);
    outline-offset: 3px;
}
.reis-kaart--klikbaar h2 a:focus-visible {
    outline: none; /* de tegel zelf toont de focusrand */
}

.datums { color: var(--gedempt); margin: 8px 0 20px; }

.status--klaar { color: var(--goed); font-weight: 600; }

/* --- Badges en tellers ----------------------------------------------------
   Een status is altijd tekst mét kleur, nooit kleur alleen. */

.badge {
    display: inline-block;
    padding: 4px 14px;
    border-radius: 999px;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
    background: var(--vlak);
    color: var(--aubergine);
    border: 1px solid var(--lijn);
}

.badge--concept     { background: #F1E8F5; color: var(--gedempt); }
.badge--open        { background: var(--goed-vlak); color: var(--goed); border-color: #CFE5D5; }
.badge--gesloten    { background: #FFF0EA; color: #8A3A1E; border-color: #F5CDBF; }
.badge--afgerond    { background: #EFEDF0; color: var(--gedempt); }
.badge--uitgenodigd { background: #F1E8F5; color: var(--paars); border-color: #E2D3EA; }
.badge--bezig       { background: #FFF0EA; color: #8A3A1E; border-color: #F5CDBF; }
.badge--ingeschreven{ background: var(--goed-vlak); color: var(--goed); border-color: #CFE5D5; }
.badge--afgemeld    { background: #EFEDF0; color: var(--gedempt); }

.tellers {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 6px 0 0;
    padding: 0;
    list-style: none;
}

.tellers li {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 999px;
    background: var(--vlak);
    border: 1px solid var(--lijn);
    font-size: 17px;
    color: var(--gedempt);
}

.tellers strong {
    font-size: 19px;
    color: var(--aubergine);
}

.tellers li.is-goed strong { color: var(--goed); }

/* Metaregel onder een paginatitel: badge plus data op één rij. */
.meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 18px;
    color: var(--gedempt);
    margin: 0 0 24px;
}

/* --- Panelen ------------------------------------------------------------- */

/* Het actiepaneel: één plek voor de handelingen die de reis sturen. */
.acties {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    background: var(--vlak);
    border: 2px solid var(--lijn);
    border-radius: var(--rand);
    padding: 18px 22px;
    margin: 0 0 8px;
}

.acties form { margin: 0; }

/* Een rustig formulierpaneel voor secundaire bewerkingen. */
.paneel {
    border: 2px solid var(--lijn);
    border-radius: var(--rand);
    background: #fff;
    padding: 26px;
    margin: 0 0 28px;
}

.paneel .knoppen { margin-top: 20px; }
.paneel .veld:last-of-type { margin-bottom: 0; }

/* Lege toestand: vriendelijk en herkenbaar, geen kale zin in het niets. */
.leeg-toestand {
    border: 2px dashed #C9B2D3;
    border-radius: var(--rand);
    background: var(--vlak);
    padding: 28px;
    text-align: center;
    color: var(--gedempt);
    margin: 0 0 28px;
}

.hulplinks {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 26px;
    margin: 40px 0 0;
    font-size: 18px;
}

.hulplinks a { color: var(--gedempt); }
.hulplinks a:hover { color: var(--paars); }

/* --- "Zo werkt het" (voorpagina) ------------------------------------------ */

.stappen {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 18px;
    list-style: none;
    margin: 8px 0 40px;
    padding: 0;
    counter-reset: stap;
}

.stappen li {
    counter-increment: stap;
    background: #fff;
    border: 2px solid var(--lijn);
    border-radius: var(--rand);
    padding: 22px 22px 24px;
    box-shadow: var(--schaduw);
}

.stappen li::before {
    content: counter(stap);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--zalm);
    color: var(--aubergine);
    font-family: "Archivo Expanded", "Archivo", system-ui, sans-serif;
    font-weight: 700;
    font-size: 20px;
    margin-bottom: 12px;
}

.stappen h2 {
    font-family: "Archivo", system-ui, sans-serif;
    font-size: 20px;
    margin: 0 0 6px;
}

.stappen p {
    margin: 0;
    color: var(--gedempt);
    font-size: 18px;
}

.samenvatting-blok {
    border: 2px solid var(--lijn);
    border-radius: var(--rand);
    background: #fff;
    padding: 22px 26px;
    margin-bottom: 24px;
}

.samenvatting-kop {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
}

dl { margin: 16px 0 0; }
dt { font-weight: 600; margin-top: 16px; }
dd { margin: 4px 0 0; }

.leeg { color: var(--gedempt); font-style: italic; }

/* --- Beheer ---------------------------------------------------------------
   Zelfde taal als de deelnemerskant, maar breder: tabellen met genodigden
   passen niet in 42rem. */

.inhoud--breed { max-width: 66rem; }

.tabel-wikkel {
    overflow-x: auto;
    margin: 0 0 28px;
    border: 2px solid var(--lijn);
    border-radius: var(--rand);
    box-shadow: var(--schaduw);
}

.tabel {
    width: 100%;
    border-collapse: collapse;
    font-size: 18px;
    background: #fff;
}

.tabel th,
.tabel td {
    text-align: left;
    padding: 12px 16px;
    border-bottom: 2px solid var(--lijn);
    vertical-align: top;
}

.tabel th {
    background: var(--vlak);
    color: var(--aubergine);
    border-bottom: 3px solid var(--zalm);
    white-space: nowrap;
}

.tabel td:first-child { font-weight: 600; }

.tabel tbody tr:nth-child(even) td { background: #FCF9FE; }
.tabel tbody tr:last-child td { border-bottom: none; }
.tabel tbody tr:hover td { background: #F6ECFA; }

/* --- Voet ---------------------------------------------------------------- */

.voet {
    border-top: 4px solid var(--zalm);
    background:
        radial-gradient(circle at 10% 120%, rgba(255, 165, 141, 0.2), transparent 45%),
        linear-gradient(295deg, var(--paars) 0%, #4B005E 55%, var(--aubergine) 100%);
    color: var(--lilawit);
    padding: 34px 24px;
}

.voet p {
    max-width: 42rem;
    margin: 0 auto 8px;
}

.voet a { color: var(--zalm); }
.voet strong { color: #fff; }

.voet__klein { font-size: 18px; }

/* Onderste regel van de voet: woordmerk plus de kleine links. */
.voet__rij {
    max-width: 42rem;
    margin: 26px auto 0;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.18);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px 24px;
}

.voet__rij .logo {
    height: 30px;
    width: auto;
    color: var(--zalm);
    display: block;
}

/* --- Afdrukken ------------------------------------------------------------
   De samenvatting moet netjes op papier kunnen, zonder inkt te verspillen. */

@media print {
    .kop, .voet, .knoppen, .samenvatting-kop a { display: none; }
    body { font-size: 12pt; color: #000; }
    .inhoud { max-width: none; padding: 0; }
    h1::after { display: none; }
}

/* Respecteer de systeeminstelling van mensen die bewegen vervelend vinden. */
@media (prefers-reduced-motion: reduce) {
    * { animation: none !important; transition: none !important; }
}

/* ------------------------------------------------------------------------
   Minimale maten voor de doelgroep (70+): geen letters onder 20px, geen
   klikvlak onder 56px. Deze regels staan onderaan en winnen daardoor van de
   eerdere, kleinere maten; accent komt van kleur en gewicht, niet van grootte.
   ------------------------------------------------------------------------ */
.uitleg,
.veld .fout,
.gerust,
.voet__klein,
.stappen p,
.voortgang__tekst,
.kop__merk,
.kop__uit,
.leeg {
    font-size: 20px;
}

.kop__uit {
    min-height: 56px;
    padding: 12px 24px;
    display: inline-flex;
    align-items: center;
}

.keuze-rij {
    min-height: 56px;
    gap: 14px;
}

.keuze-rij label {
    cursor: pointer;
}

.samenvatting-kop {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.ontbrekend a {
    display: inline-block;
    min-height: 56px;
    line-height: 56px;
}

/* De uitlogknop in de kop is een formulierknop (POST), opgemaakt als de pil van eerst. */
.kop__uitloggen {
    margin: 0;
}

button.kop__uit {
    background: transparent;
    font-family: inherit;
    cursor: pointer;
}

/* Knoppen die in een formulier naast andere knoppen staan, niet laten inspringen. */
.knoppen form {
    display: inline;
    margin: 0;
}