/*
 * Opmaak voor de drie publieke embeds (§8).
 *
 * Bewust los van app.css. Deze pagina's staan in een iframe op de
 * WordPress-site en moeten zich naar die breedte voegen; het beheerscherm
 * heeft een navigatiebalk en een zijbalk die hier niets te zoeken hebben.
 * Eén stylesheet voor beide zou betekenen dat elke wijziging aan het
 * beheerscherm de website kan raken.
 *
 * Achtergrond blijft transparant: het iframe staat op een pagina met een
 * eigen achtergrondkleur, en een wit vlak eromheen valt daar altijd op.
 */

:root {
    --oranje:        #f3901f;
    --oranje-donker: #d97b0d;
    --navy:          #1f2a44;
    --zwart:         #0f0a0a;
    --wit:           #ffffff;
    --rand:          #d8dce3;
    --gedempt:       #6b7280;
    --groen:         #1a5c31;
    --groen-vlak:    #dff3e4;
    --rood:          #8a1f1f;
    --rood-vlak:     #fbe0e0;
}

* { box-sizing: border-box; }

body.embed {
    margin: 0;
    padding: 0;
    background: transparent;
    color: var(--zwart);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    font-size: 16px;
    line-height: 1.55;
}

.embed-romp {
    max-width: 46rem;
    margin: 0 auto;
    padding: 1rem;
}

.embed h1 {
    font-size: 1.5rem;
    margin: 0 0 .25rem;
    color: var(--navy);
}

.embed h2 {
    font-size: 1.05rem;
    margin: 1.75rem 0 .5rem;
    color: var(--navy);
}

.inleiding {
    color: var(--gedempt);
    margin: 0 0 1.5rem;
}

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

.veld { margin-bottom: 1rem; }

.veld label {
    display: block;
    font-weight: 600;
    margin-bottom: .25rem;
}

.veld .verplicht { color: var(--oranje-donker); }

.veld input[type="text"],
.veld input[type="email"],
.veld input[type="tel"],
.veld input[type="date"],
.veld input[type="number"],
.veld select,
.veld textarea {
    width: 100%;
    padding: .6rem .7rem;
    border: 1px solid var(--rand);
    border-radius: 6px;
    background: var(--wit);
    font: inherit;
    color: inherit;
}

.veld input:focus,
.veld select:focus,
.veld textarea:focus {
    outline: 2px solid var(--oranje);
    outline-offset: 1px;
    border-color: var(--oranje);
}

.veld .hint {
    display: block;
    font-weight: 400;
    color: var(--gedempt);
    font-size: .85rem;
    margin-top: .2rem;
}

/* Naam en adres staan naast elkaar zolang er ruimte is. */
.rij {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: 0 1rem;
}

/*
 * De keuzevelden zijn de kern van dit formulier: elke keuze onthult de
 * volgende. Ze mogen breder zijn dan een tekstregel, maar niet de volle
 * breedte — een dropdown van 46rem oogt als een fout. In een rij naast een
 * ander veld telt de kolombreedte, dus daar geen begrenzing.
 */
.veld select { max-width: 26rem; }
.rij .veld select { max-width: none; }

/* Een select ziet er zonder dit uit als een tekstveld dat niet meewerkt. */
.veld select {
    appearance: none;
    background-image:
        linear-gradient(45deg, transparent 50%, var(--gedempt) 50%),
        linear-gradient(135deg, var(--gedempt) 50%, transparent 50%);
    background-position:
        calc(100% - 1.1rem) calc(50% + 2px),
        calc(100% - .75rem) calc(50% + 2px);
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
    padding-right: 2.2rem;
}

.veld select:disabled,
.veld option:disabled { color: var(--gedempt); }

.keuzes label {
    display: block;
    font-weight: 400;
    margin-bottom: .2rem;
}

.keuzes input { width: auto; margin-right: .4rem; }

/* ---- Blokken ------------------------------------------------------------ */

.blok {
    border: 1px solid var(--rand);
    border-radius: 8px;
    background: var(--wit);
    padding: 1.1rem 1.2rem .35rem;
    margin-bottom: 1.25rem;
}

/*
 * De kop van een blok. Zonder deze regel pakt hij de marge van .embed h2 mee
 * en staat er een gat van bijna twee regels boven het eerste veld.
 */
.blok h2 {
    margin: 0 0 .9rem;
    font-size: 1rem;
    padding-bottom: .5rem;
    border-bottom: 1px solid var(--rand);
}

/* Het laatste veld in een blok hoeft geen marge meer: de padding doet het al. */
.blok .veld:last-child,
.blok .rij:last-child .veld { margin-bottom: .75rem; }

/* Alles ná de cursuskeuze blijft verborgen tot er een cursus gekozen is
   (§3: progressive disclosure — één dropdown in plaats van een muur). */
.verborgen { display: none; }

.tijdslot {
    background: var(--groen-vlak);
    color: var(--groen);
    border-radius: 6px;
    padding: .5rem .7rem;
    font-size: .9rem;
}

.toelichting {
    background: #fdf3e3;
    border-left: 3px solid var(--oranje);
    padding: .6rem .8rem;
    font-size: .92rem;
    margin-bottom: 1rem;
}

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

button {
    background: var(--oranje);
    color: var(--wit);
    border: 0;
    border-radius: 6px;
    padding: .7rem 1.4rem;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

button:hover { background: var(--oranje-donker); }

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

.melding {
    border-radius: 6px;
    padding: .7rem .9rem;
    margin-bottom: 1rem;
}

.melding.goed { background: var(--groen-vlak); color: var(--groen); }
.melding.fout { background: var(--rood-vlak);  color: var(--rood); }

/*
 * "Er staat niets gepland, bel ons" is geen fout van de bezoeker en hoort er
 * dus ook niet als een fout uit te zien — hij heeft niets verkeerd gedaan.
 */
.melding.let-op {
    background: #fdf3e3;
    color: #8a5a08;
    border-left: 3px solid var(--oranje);
}

.melding a { color: inherit; font-weight: 600; }

.melding ul { margin: .4rem 0 0; padding-left: 1.1rem; }

/* Het honeypotveld hoort onzichtbaar te zijn voor mensen én bereikbaar voor
   een robot die de opmaak negeert. Daarom uit beeld en niet display:none —
   dat laatste slaan sommige invulrobots juist over. */
.honingpot {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* ---- Agenda: filterbalk en maandblokken ---------------------------------- */

.filterbalk {
    display: flex;
    gap: 1rem;
    align-items: flex-end;
    flex-wrap: wrap;
    background: #f6f8fb;
}
.filterbalk .veld { flex: 1 1 12rem; margin-bottom: .75rem; }
.filterbalk .veld select { max-width: none; }
.filterbalk .knopveld { flex: 0 0 auto; }
.filterbalk .knop,
.filterbalk button {
    background: var(--navy);
    color: var(--wit);
    border: 0;
    border-radius: 6px;
    padding: .6rem 1.1rem;
    font-weight: 600;
    text-decoration: none;
    display: inline-block;
    cursor: pointer;
}
.filterbalk .knop:hover,
.filterbalk button:hover { background: #2c3a5c; }

.maand {
    border: 1px solid var(--rand);
    border-radius: 8px;
    background: var(--wit);
    margin-bottom: .75rem;
    overflow: hidden;
}

.maand > summary {
    /* De standaard driehoek weg: er staat rechts al een + / − teken. */
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .75rem;
    position: relative;
    padding: .9rem 3rem;
    background: #f6f8fb;
    color: var(--navy);
    font-size: 1.25rem;
    font-weight: 700;
}
.maand > summary::-webkit-details-marker { display: none; }
.maand > summary:hover { background: #eef2f8; }

/* Het plusje rechts. Wordt een minteken zodra de maand openstaat — dat is de
   enige aanwijzing dat je hem ook weer dicht kunt klappen. */
.maand > summary::after {
    content: "+";
    position: absolute;
    right: .9rem;
    top: 50%;
    transform: translateY(-50%);
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    background: var(--navy);
    color: var(--wit);
    font-size: 1rem;
    font-weight: 700;
    display: grid;
    place-items: center;
    line-height: 1;
}
.maand[open] > summary::after { content: "\2212"; }

.maand .teller {
    background: var(--oranje);
    color: var(--wit);
    border-radius: 1rem;
    font-size: .8rem;
    font-weight: 700;
    padding: .05rem .55rem;
}

.maandinhoud { padding: 0; }
.maandinhoud .agenda { border: 0; border-radius: 0; }

/* ---- Agenda-embed (WEB-01) ---------------------------------------------- */

.agenda {
    width: 100%;
    border-collapse: collapse;
    background: var(--wit);
    border: 1px solid var(--rand);
    border-radius: 8px;
    overflow: hidden;
}

.agenda th,
.agenda td {
    text-align: left;
    padding: .65rem .8rem;
    border-bottom: 1px solid var(--rand);
}

.agenda th {
    background: var(--navy);
    color: var(--wit);
    font-size: .82rem;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.agenda tr:last-child td { border-bottom: 0; }

.agenda .kleurstip {
    display: inline-block;
    width: .7rem;
    height: .7rem;
    border-radius: 50%;
    margin-right: .45rem;
    vertical-align: -1px;
}

.plekken.vrij { color: var(--groen); font-weight: 600; }
.plekken.vol  { color: var(--rood);  font-weight: 600; }

.agenda a.aanmelden {
    display: inline-block;
    background: var(--oranje);
    color: var(--wit);
    text-decoration: none;
    border-radius: 6px;
    padding: .35rem .8rem;
    font-weight: 600;
    font-size: .9rem;
}

.agenda a.aanmelden:hover { background: var(--oranje-donker); }

/*
 * Zeven kolommen hebben ruimte nodig. De grens ligt daarom op 52rem en niet op
 * de gebruikelijke telefoonbreedte: een iframe in een WordPress-kolom is vaak
 * 600 à 700 pixels breed, en precies daar liep de tabel vast — kolommen die
 * over drie regels braken en een knop die buiten beeld viel.
 */
@media (max-width: 52rem) {
    .embed-romp { padding: .75rem; }

    /* Een tabel van zeven kolommen past niet in een smalle kolom; elke
       training wordt daar een blokje. */
    .agenda, .agenda tbody, .agenda tr, .agenda td { display: block; width: 100%; }
    .agenda thead { display: none; }

    .agenda tr {
        border-bottom: 1px solid var(--rand);
        padding: .6rem .2rem;
    }

    /* Zonder kolomkoppen is "Ja" in een losse regel betekenisloos, dus komt de
       kop op mobiel vóór de waarde te staan. */
    .agenda td {
        border: 0;
        padding: .15rem .6rem;
    }

    .agenda td[data-kop]::before {
        content: attr(data-kop) ": ";
        font-weight: 600;
        color: var(--gedempt);
    }

    .agenda td:empty { display: none; }

    /* De aanmeldknop staat als laatste en heeft geen kop; die mag wel wat
       lucht en over de volle breedte, zodat hij op een telefoon te raken is. */
    .agenda td:not([data-kop]) { padding-top: .5rem; }
    .agenda a.aanmelden { display: block; text-align: center; }

    .maand > summary { font-size: 1.05rem; padding: .8rem 2.6rem; }
    .filterbalk { gap: 0 .75rem; }
}