/* Activiteitkaarten uit agenda-vernieuwd-v2, met de kleuren van het actieve dorp. */
.da-agenda {
    --da-paper:var(--fr-bg,#f7f5ef);
    --da-card:var(--fr-kaart,#fff);
    --da-ink:var(--fr-tekst,#1b2935);
    --da-muted:var(--fr-stil,#5b6874);
    --da-line:var(--fr-rand,#dce1db);
    --da-brand:var(--fr-knop,var(--fr-link,#1d4e79));
    --da-soft:color-mix(in srgb,var(--da-brand) 9%,var(--da-card));
    color:var(--da-ink);
    font-family:var(--fr-sans,system-ui,sans-serif);
    min-width:0;
    container-type:inline-size
}
.da-agenda.da-agenda [hidden],
.fr-rubriek-agenda .fr-pager[hidden],
#club-agenda nav[aria-label="Bladeren door activiteiten"][hidden] {
    display:none
}
.da-agenda * {
    box-sizing:border-box
}
.da-agenda button,.da-agenda input,.da-agenda select {
    font:inherit
}
.da-agenda button {
    cursor:pointer
}
.da-agenda a {
    color:inherit
}
.da-agenda :is(a,button,input,select):focus-visible {
    outline:3px solid var(--da-brand);
    outline-offset:3px
}
.da-icon {
    width:17px;
    height:17px;
    flex:0 0 17px;
    vertical-align:middle
}
.da-sr {
    position:absolute;
    width:1px;
    height:1px;
    overflow:hidden;
    clip-path:inset(50%)
}
.da-controls {
    display:grid;
    gap:10px;
    margin-bottom:20px
}
.da-search {
    display:block
}
.da-search-veld {
    position:relative;
    display:block
}
.da-search .da-icon {
    position:absolute;
    left:12px;
    top:50%;
    transform:translateY(-50%);
    color:var(--da-muted)
}
.da-search input {
    display:block;
    width:100%;
    min-width:0;
    min-height:48px;
    padding:11px 12px 11px 38px;
    border:1px solid var(--da-line);
    border-radius:10px;
    background:var(--da-card);
    color:var(--da-ink);
    /* 16px: daaronder zoomt iOS bij het aantikken van een veld in op de pagina. */
    font-size:16px
}
/* De knopjes staan op één regel en schuiven opzij als ze niet passen. Dat is op een telefoon
   prettiger dan omvallen naar twee regels: de eerste knop blijft op zijn plek staan.
   De rechterrand vervaagt zodra er nog iets staat -- anders is "Geweest", de enige weg naar het
   archief, onzichtbaar buiten beeld zonder dat iets dat verraadt. `mask` hangt aan de scrollstand,
   dus hij verdwijnt vanzelf zodra je aan het eind bent. */
.da-periods {
    display:flex;
    gap:8px;
    overflow-x:auto;
    scrollbar-width:none;
    /* Ruimte voor de focusrand van de eerste en laatste knop; overflow knipt die anders weg. */
    padding:4px;
    margin:-4px;
    mask:linear-gradient(90deg,#000 calc(100% - 34px),transparent);
    -webkit-mask:linear-gradient(90deg,#000 calc(100% - 34px),transparent)
}
.da-periods::-webkit-scrollbar {
    width:0;
    height:0
}
/* Past alles, dan hoeft er niets te vervagen. */
@container(min-width:520px) {
    .da-periods {
        mask:none;
        -webkit-mask:none
    }
}
.da-chip {
    flex:none;
    min-height:44px;
    padding:0 15px;
    border:1px solid var(--da-line);
    border-radius:22px;
    background:var(--da-card);
    color:var(--da-ink);
    font-size:14px;
    font-weight:600;
    white-space:nowrap
}
.da-chip.is-aan {
    background:var(--da-brand);
    border-color:var(--da-brand);
    color:var(--da-card)
}
.da-count {
    margin:0;
    font-size:13px;
    color:var(--da-muted)
}
.da-count strong {
    color:var(--da-ink)
}
.da-loading {
    font-size:13px;
    color:var(--da-muted)
}
.da-group+.da-group {
    margin-top:30px
}
.da-group-heading {
    display:flex;
    align-items:baseline;
    flex-wrap:wrap;
    gap:8px 12px;
    margin:4px 0 14px
}
.da-group-heading h3 {
    margin:0;
    font:700 21px/1.35 var(--fr-sans,system-ui,sans-serif);
    color:var(--da-ink)
}
.da-group-heading small {
    font-size:12px;
    color:var(--da-muted)
}
.da-group-count {
    margin-left:auto;
    min-width:24px;
    padding:1px 7px;
    text-align:center;
    border:1px solid var(--da-line);
    border-radius:20px;
    font-size:12px;
    color:var(--da-muted)
}
.da-card {
    position:relative;
    display:grid;
    grid-template-columns:64px minmax(0,1fr);
    gap:18px;
    align-items:center;
    margin:0 0 12px;
    padding:18px;
    border:1px solid var(--da-line);
    border-radius:12px;
    background:var(--da-card);
    box-shadow:0 2px 7px rgb(29 43 45 / 2%)
}
.da-card:hover {
    border-color:color-mix(in srgb,var(--da-brand) 40%,var(--da-line));
    box-shadow:0 5px 17px rgb(30 54 59 / 5%)
}
.da-date {
    width:64px;
    min-height:56px;
    align-self:start;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    padding:9px 3px;
    background:var(--da-soft);
    color:var(--da-brand);
    border-radius:10px;
    line-height:1.1
}
.da-date strong {
    font:750 28px/1.1 var(--fr-sans,system-ui,sans-serif);
    white-space:nowrap;
    word-break:normal;
    overflow-wrap:normal
}
.da-date strong.da-range {
    font-size:19px
}
.da-date span {
    font-size:11px;
    font-weight:700;
    text-transform:uppercase;
    margin-top:5px;
    white-space:nowrap
}
.da-content {
    min-width:0
}
.da-card-heading {
    display:flex;
    align-items:baseline;
    flex-wrap:wrap;
    gap:7px 10px;
    margin-bottom:6px
}
.da-card-heading h3 {
    margin:0;
    font:700 18px/1.35 var(--fr-sans,system-ui,sans-serif);
    overflow-wrap:anywhere
}
.da-card-heading h3 a {
    text-decoration:none
}
.da-card-heading h3 a:hover {
    text-decoration:underline
}
.da-when {
    display:flex;
    align-items:center;
    gap:6px;
    font-size:13px;
    font-weight:600;
    margin:0 0 5px;
    color:var(--da-ink)
}
.da-meta {
    display:flex;
    flex-wrap:wrap;
    gap:5px 15px;
    color:var(--da-muted);
    font-size:13px;
    line-height:1.6
}
.da-meta>span {
    display:inline-flex;
    align-items:baseline;
    gap:6px;
    min-width:0;
    overflow-wrap:anywhere
}
.da-meta .da-icon {
    align-self:center
}
.da-description {
    white-space:pre-line;
    font-size:14px;
    line-height:1.6;
    margin:8px 0 0;
    color:var(--da-muted);
    overflow-wrap:anywhere
}
.da-organizer {
    font-size:12px;
    color:var(--da-muted);
    margin:7px 0 0
}
.da-button {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:7px;
    min-height:44px;
    padding:10px 12px;
    border:1px solid var(--da-line);
    border-radius:7px;
    text-align:center;
    text-decoration:none;
    font-size:13px;
    font-weight:600;
    line-height:1.4;
    background:var(--da-card);
    color:var(--da-brand)
}
.da-empty {
    padding:35px 18px;
    text-align:center;
    background:var(--da-card);
    border:1px dashed var(--da-line);
    border-radius:12px;
    color:var(--da-muted)
}
.da-club .da-group-heading h3 {
    font-size:19px
}
@container(max-width:780px) {
    .da-card {
        grid-template-columns:60px minmax(0,1fr);
        gap:14px
    }
    .da-date {
        width:60px
    }
}
@container(max-width:500px) {
    /* Het datumblokje naast de tekst kost hier een derde van de breedte. Het gaat boven de titel
       staan als één regel, zodat de naam van de activiteit de volle breedte krijgt. */
    .da-card {
        padding:13px;
        gap:9px;
        grid-template-columns:minmax(0,1fr)
    }
    .da-date {
        width:auto;
        min-height:0;
        flex-direction:row;
        align-items:baseline;
        gap:6px;
        padding:4px 10px;
        /* Het blokje is zo breed als de datum zelf; zonder dit rekt het over de hele kaart. */
        align-self:start;
        justify-self:start;
        border-radius:8px
    }
    .da-date strong {
        font-size:19px
    }
    .da-date span {
        margin-top:0
    }
    .da-date strong.da-range {
        font-size:16px
    }
    .da-card-heading h3 {
        font-size:17px
    }
    .da-description {
        font-size:13px
    }
    .da-meta {
        font-size:12px
    }
    .da-group-heading h3 {
        font-size:20px
    }
    .da-search input {
        font-size:16px
    }
}
@media print {
    .da-agenda .da-controls {
        display:none
    }
    .da-card {
        break-inside:avoid;
        box-shadow:none
    }
}

.da-card-link::after { content:""; position:absolute; inset:0; border-radius:12px; }
.da-card:has(.da-card-link:focus-visible) { outline:3px solid var(--da-brand); outline-offset:3px; }

[data-rr-lijst] a.da-organizer-active { background:var(--fr-kaart,#fff); color:var(--fr-link,#1d4e79); outline:2px solid currentColor; outline-offset:-2px; border-radius:6px; }

/* Een vast moment: één kaart voor een hele reeks. De regel onder de titel zegt dan "elke maandag"
   in plaats van de datum van deze ene keer, en het pijltje maakt dat ook zonder lezen zichtbaar. */
.da-herhaalt .da-when {
    color:var(--da-brand)
}