/*
 * The agenda takes its look from the website it runs on (owner decision 2026-09-23): this file
 * only does layout. Colours come from the theme through these custom properties, each with a
 * neutral fallback, and every rule stays weak enough for a theme to override without !important.
 */
.ehbo-agenda {
    --ehbo-gap: var(--wp--style--block-gap, 1.5rem);
    --ehbo-line: var(--ehbo-agenda-line, currentColor);
    --ehbo-muted: var(--ehbo-agenda-muted, currentColor);
    --ehbo-accent: var(--ehbo-agenda-accent, var(--primary, var(--wp--preset--color--primary, #2c3e50)));
}

.ehbo-agenda__title {
    margin-block-end: var(--ehbo-gap);
}

/* ---- List ------------------------------------------------------------- */

.ehbo-agenda__list {
    display: grid;
    gap: var(--ehbo-gap);
    margin: 0;
    padding: 0;
    list-style: none;
}

.ehbo-agenda--cols-2 .ehbo-agenda__list {
    grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
}

.ehbo-agenda--cols-3 .ehbo-agenda__list {
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}

.ehbo-agenda--cols-4 .ehbo-agenda__list {
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
}

.ehbo-agenda__item {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding-block-end: var(--ehbo-gap);
    border-block-end: 1px solid var(--ehbo-line);
    /* The line is the only thing we paint, and only faintly. */
    border-color: color-mix(in srgb, var(--ehbo-line) 20%, transparent);
}

.ehbo-agenda__item:last-child {
    border-block-end: 0;
    padding-block-end: 0;
}

.ehbo-agenda__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1rem;
    opacity: 0.8;
}

.ehbo-agenda__heading {
    margin: 0;
}

.ehbo-agenda__meetings {
    margin: 0;
    padding-inline-start: 1.1rem;
}

.ehbo-agenda__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin-block-start: 0.25rem;
}

.ehbo-agenda__spots {
    opacity: 0.8;
}

/* "Geweest" (owner request 2026-10-01): a small label in the theme's accent colour. */
.ehbo-agenda__badge {
    display: inline-flex;
    align-items: center;
    padding: 0.15em 0.6em;
    border-radius: 999px;
    background: color-mix(in srgb, var(--ehbo-accent) 12%, transparent);
    color: var(--ehbo-accent);
    font-size: 0.8em;
    font-weight: 600;
    line-height: 1.4;
    vertical-align: middle;
}

.ehbo-agenda__popup .ehbo-agenda__badge {
    margin-block-end: 0.5rem;
}

.ehbo-agenda--past .ehbo-agenda__item,
.ehbo-agenda.is-past .ehbo-agenda__item {
    opacity: 0.85;
}

/* ---- Pagination -------------------------------------------------------- */

.ehbo-agenda__pagination {
    display: flex;
    gap: 1rem;
    margin-block-start: var(--ehbo-gap);
}

/* ---- Calendar ---------------------------------------------------------- */

/*
 * The calendar draws itself (FullCalendar, bundled). We only hand it the site's colours: its own
 * custom properties, each falling back to the neutral it ships with, so a theme can set
 * --ehbo-agenda-accent (or the --fc-* property itself) and the calendar follows.
 */
.ehbo-agenda__calendar {
    --fc-button-bg-color: var(--ehbo-accent);
    --fc-button-border-color: var(--fc-button-bg-color);
    --fc-button-hover-bg-color: color-mix(in srgb, var(--fc-button-bg-color) 85%, #000);
    --fc-button-hover-border-color: var(--fc-button-hover-bg-color);
    --fc-button-active-bg-color: var(--fc-button-hover-bg-color);
    --fc-button-active-border-color: var(--fc-button-hover-bg-color);
    --fc-event-bg-color: var(--fc-button-bg-color);
    --fc-event-border-color: var(--fc-button-bg-color);
    --fc-today-bg-color: color-mix(in srgb, var(--fc-button-bg-color) 8%, transparent);
    --fc-border-color: color-mix(in srgb, var(--ehbo-line) 20%, transparent);
    margin-block-end: var(--ehbo-gap);
    font-size: 0.95em;
}

/* An event is a link: no underline in the grid, and the whole title stays readable. */
.ehbo-agenda__calendar .fc-event {
    cursor: pointer;
}

.ehbo-agenda__calendar .fc-daygrid-event {
    white-space: normal;
}

/* The start time always whole ("19:30", not "19:"): only the title wraps. FullCalendar lets the time
   shrink and clips it once the title may wrap (owner feedback 2026-09-28). */
.ehbo-agenda__calendar .fc-event-time {
    flex-shrink: 0;
    overflow: visible;
    white-space: nowrap;
}

.ehbo-agenda__calendar .fc-event-title-container,
.ehbo-agenda__calendar .fc-daygrid-event .fc-event-title {
    min-width: 0;
    overflow-wrap: anywhere;
}

/* On a phone the toolbar stacks instead of squeezing the month name. */
@media (max-width: 600px) {
    .ehbo-agenda__calendar .fc-toolbar {
        flex-direction: column;
        gap: 0.5rem;
    }

    .ehbo-agenda__calendar .fc-toolbar-title {
        font-size: 1.1em;
    }
}

/* ---- Kalender of lijst: de bezoeker kiest ----------------------------- */

.ehbo-agenda__switch {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-block-end: var(--ehbo-gap);
}


.ehbo-agenda__switch-btn:focus:not(:focus-visible) {
    outline: none;
}

/* ---- Het venster achter een activiteit in de kalender --------------------
   Draait het thema leflite, dan doet dat zijn eigen `.lef-popup` en raken deze
   regels niets. Op elk ander thema is dit een eenvoudig venster in de kleuren
   van de site; alleen de indeling zit hier. */

/* Het venster hangt aan <body> (zie agenda.js) en staat dus buiten `.ehbo-agenda`: het krijgt
   dezelfde tokens mee, plus de hoogte waarop het boven de zwevende knoppen van de site staat. */
.ehbo-agenda__popup {
    --ehbo-gap: var(--wp--style--block-gap, 1.5rem);
    --ehbo-line: var(--ehbo-agenda-line, currentColor);
    --ehbo-muted: var(--ehbo-agenda-muted, currentColor);
    --ehbo-accent: var(--ehbo-agenda-accent, var(--primary, var(--wp--preset--color--primary, #2c3e50)));
    --ehbo-popup-z: 10050;
}

.ehbo-agenda__popup:not(.lef-popup) {
    display: none;
}

.ehbo-agenda__popup:not(.lef-popup).popup-opened {
    position: fixed;
    inset: 0;
    z-index: var(--ehbo-popup-z);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgb(0 0 0 / 50%);
}

.ehbo-agenda__popup:not(.lef-popup) .popup-inner {
    position: relative;
    max-width: 34rem;
    max-height: calc(100% - 2rem);
    padding: var(--ehbo-gap);
    overflow: auto;
    background: canvas;
    color: canvastext;
    border-radius: 0.5rem;
}

.ehbo-agenda__popup:not(.lef-popup) .popup-close {
    position: absolute;
    inset-block-start: 0.5rem;
    inset-inline-end: 0.5rem;
    padding: 0.25rem 0.5rem;
    border: 0;
    background: none;
    color: inherit;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
}

/* Boven de zwevende knoppen van de site (WhatsApp, toegankelijkheid, winkelwagen): die zitten
   rond z-index 100 tot 10001. agenda.js hangt het venster aan <body>, want binnen de kolom van de
   pagina zit het in een stapelcontext van het thema en helpt een hogere z-index niets. */
.ehbo-agenda__popup.popup-opened {
    z-index: var(--ehbo-popup-z);
}

/* Het venster leest als een kaartje, niet als een balk over de hele breedte. */
.ehbo-agenda__popup .popup-inner {
    width: min(38rem, calc(100vw - 2rem));
}

/* De inhoud krijgt lucht: de regels eronder plakken niet aan de kop vast. */
.ehbo-agenda__popup .popup-content {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.ehbo-agenda__popup .popup-content > * {
    margin: 0;
}

/* De naam is hier de kop van het venster, dus wat rustiger dan in een lijst vol activiteiten;
   de ronde sluitknop staat rechtsboven ín het venster, de naam loopt er niet onderdoor. */
.ehbo-agenda__popup .ehbo-agenda__heading {
    padding-inline-end: 3.5rem;
    font-size: clamp(1.25rem, 1rem + 1vw, 1.6rem);
    line-height: 1.25;
}

/* De aanmeldknop staat los onderaan, niet tegen de tekst aan. */
.ehbo-agenda__popup .ehbo-agenda__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin-block-start: 0.25rem;
}

/* De gegevens in het venster: label links, waarde rechts. Twee kolommen zolang het past, eronder
   op een smal scherm. Alleen indeling — kleuren en letters komen van het thema. */
.ehbo-agenda__facts {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 0.35rem 1rem;
    margin: 0;
}

.ehbo-agenda__facts dt {
    font-weight: 600;
}

.ehbo-agenda__facts dd {
    margin: 0;
}

@media (max-width: 30rem) {
    .ehbo-agenda__facts {
        grid-template-columns: 1fr;
        gap: 0 0;
    }

    .ehbo-agenda__facts dd {
        margin-block-end: 0.5rem;
    }
}