/* Aanvullingen op de oorspronkelijke vormgeving. */
.agenda-year { margin: 1.1rem 0 .65rem; font-family: var(--paragraph-font); }
#agenda .next-event { background: var(--lightblue); color: var(--darkblue); border: 3px solid var(--whiteblue); border-left: 8px solid var(--whiteblue); box-shadow: none; margin: 8px 0; }
#agenda .next-event a { color: var(--darkblue); text-decoration: underline; }
.next-event-label { display: inline-block; padding: .25rem .6rem; margin: 0 0 .45rem; background: var(--darkblue); color: var(--whiteblue); font: 600 .75rem var(--paragraph-font); border-radius: 3px; }
.btn { display: inline-block; text-align: center; }

.flyer-slide > a { display: flex; width: 100%; height: 100%; }
[hidden] { display: none !important; }
.gallery-grid > a { display: block; min-width: 0; }
.gallery-grid > a img { max-width: 100%; }
.gallery-grid video { max-width: 100%; }
.honeypot,.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.topnav button.icon { background: var(--jazzblue); display: block; position: absolute; right: 0; top: 0; color: var(--offwhite); padding: 14px 16px; border: 0; font-size: 22px; cursor: pointer; }
.socials a { font-size: 1rem; }
.mail-result { color: var(--whiteblue); padding: 3rem 1.5rem; font-family: var(--paragraph-font); }
:focus-visible { outline: 3px solid #9caddc; outline-offset: 4px; }
@media(min-width: 1025px) { .topnav button.icon { display: none; } }
@media(prefers-reduced-motion: reduce) { *,*::before,*::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }

/* Actieknoppen: bestaande oranje en donkerblauwe paletkleuren. */
.btn,
a.btn:link,
a.btn:visited {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 50px;
    height: auto;
    max-width: 100%;
    padding: .75rem 1.5rem;
    border: 2px solid var(--jazzbrown);
    border-radius: 6px;
    background: var(--jazzbrown);
    color: var(--darkblue);
    font: 600 1rem/1.4 var(--paragraph-font);
    text-decoration: none;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.btn:hover,
a.btn:hover,
.btn:focus-visible,
a.btn:focus-visible {
    background: var(--darkblue);
    color: var(--whiteblue);
    border-color: var(--whiteblue);
}
.flyer-nav,
.topnav button.icon,
#toTopBtn {
    background: var(--jazzbrown);
    color: var(--darkblue);
    border: 2px solid var(--jazzbrown);
    cursor: pointer;
}
.flyer-nav:hover,
.flyer-nav:focus-visible,
.topnav button.icon:hover,
.topnav button.icon:focus-visible,
#toTopBtn:hover,
#toTopBtn:focus-visible {
    background: var(--darkblue);
    color: var(--whiteblue);
    border-color: var(--whiteblue);
}
.flyer-dot { background: var(--jazzbrown); border: 2px solid var(--jazzbrown); }
.flyer-dot.active,
.flyer-dot:hover,
.flyer-dot:focus-visible { background: var(--whiteblue); border-color: var(--darkblue); }

/* Gedeelde ruimte voor agenda, flyer en nieuws, op beide pagina's. */
:root {
    --component-padding: clamp(1rem, 2.5vw, 2rem);
    --component-gap: clamp(1.5rem, 3vw, 2rem);
}
#agenda {
    margin-top: 0;
    padding: 62px 0;
}
/* Dezelfde 80vw inhoudsbreedte als de bestaande bandsectie. */
#agenda .home-agenda-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto;
    grid-template-areas: none;
    align-items: start;
    gap: var(--component-gap);
    width: calc(100% - 2rem);
    max-width: none;
    margin: 0 auto;
    padding: 0;
    overflow: visible;
    background: none;
    border: 0;
}
.home-agenda-layout > .agenda-grid {
    grid-area: auto;
    display: flex;
    align-items: stretch;
    justify-content: flex-start;
    width: 100%;
    min-width: 0;
    margin: 0;
}
.home-agenda-layout .agenda-item {
    width: 100%;
}
.home-agenda-layout .agenda-text { overflow-wrap: anywhere; }
.home-agenda-layout > .news-item {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--component-gap);
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
}
.home-agenda-layout .news-item #newsflash {
    width: 100%;
    margin: 0;
    padding: var(--component-padding);
    border: 1px solid var(--whiteblue-transparent03);
    background: var(--darkjazzblue);
    text-align: left;
    overflow-wrap: anywhere;
}
.home-agenda-layout #newsflash::before,
.home-agenda-layout #newsflash::after { content: none; }
#agenda .home-agenda-layout #newsflash h2 {
    margin: 1.75rem 0 .75rem;
    font-size: clamp(1.35rem, 2vw, 1.75rem);
    line-height: 1.3;
}
#agenda .home-agenda-layout #newsflash h2:first-child { margin-top: 0; }
.home-agenda-layout #newsflash p { margin: 0 0 1rem; line-height: 1.75; font-size: 1rem; }
.home-agenda-layout #newsflash > :last-child { margin-bottom: 0; }
.home-agenda-layout #newsflash .btn { margin-top: .5rem; }
.home-agenda-layout .flyer-slider-container {
    width: 100%;
    max-width: none;
    margin: 0;
    border: 1px solid var(--whiteblue-transparent03);
    border-image: none;
}
@media (min-width: 900px) {
    #agenda .home-agenda-layout {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
        gap: var(--component-gap);
    }
}

/* Zelfstandige social-iconen; geen extern icoonfont nodig. */
footer .socials { grid-column: 1 / -1; justify-self: stretch; width: 100%; margin: 0; padding: 0; }
footer .socials p { display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 12px; width: 100%; margin: 0; padding: 0; }
footer .socials a { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex: 0 0 40px; padding: 8px; color: var(--whiteblue); border-radius: 6px; }
footer .socials .social-icon { display: block; width: 24px; height: 24px; flex: 0 0 24px; }
footer .socials a:hover, footer .socials a:focus-visible { color: var(--jazzbrown); }

/* Gelijke panelranden en binnenruimte, zonder extra verschuiving per kolom. */
.home-agenda-layout > .agenda-grid,
.home-agenda-layout .flyer-slider-container {
    padding: var(--component-padding);
    background: transparent;
    border: 1px solid var(--whiteblue-transparent03);
}
.home-agenda-layout .agenda-year:first-child { margin-top: 0; }
.home-agenda-layout .agenda-year { margin-bottom: 1rem; }
.home-agenda-layout .agenda-item,
.home-agenda-layout .agenda-item-page {
    width: 100%;
    padding: 1rem;
}
.home-agenda-layout .ext-info { overflow-wrap: anywhere; }
.home-agenda-layout .ext-info h3 { font-size: clamp(1.2rem, 2vw, 1.65rem); line-height: 1.4; }
.home-agenda-layout #agenda-btn { margin-bottom: 0; }
@media (min-width: 481px) {
    #agenda .home-agenda-layout { width: 80vw; }
}
@media (max-width: 480px) {
    #agenda { padding: 40px 0; }
    .home-agenda-layout .agenda-item,
    .home-agenda-layout .agenda-item-page { padding: .75rem; }
}

/* Extra afstand tot de menubalk op de afzonderlijke agendapagina. */
#agenda.agenda-page {
    margin-top: 0;
    padding-top: 100px;
}
@media (max-width: 480px) {
    #agenda.agenda-page { padding-top: 64px; }
}

/* Transparante ruimte rondom en binnen de flyer. */
.home-agenda-layout .flyer-slider,
.home-agenda-layout .flyer-slide {
    background: transparent;
}

/* Datumkolommen groeien mee met de tekst; tweecijferige dagen overlappen niet. */
.home-agenda-layout .agenda-item,
.home-agenda-layout .agenda-item-page {
    grid-template-columns: max-content max-content minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: .75rem;
    align-items: center;
}
.home-agenda-layout .agenda-item-page {
    grid-template-rows: auto auto auto;
}
.home-agenda-layout .date-number {
    min-width: 2ch;
    font-size: 3rem;
    line-height: 1.1;
    text-align: center;
    white-space: nowrap;
    margin: 0;
    padding: 0;
}
.home-agenda-layout .date-day,
.home-agenda-layout .date-month {
    min-width: 3ch;
    font-size: 1rem;
    line-height: 1.35;
    text-align: center;
    white-space: nowrap;
    margin: 0;
    padding: 0;
}
.home-agenda-layout .date-day { align-self: end; }
.home-agenda-layout .date-month { align-self: start; }
.home-agenda-layout .agenda-text {
    min-width: 0;
    align-self: center;
    padding-top: 0;
}
.home-agenda-layout .agenda-item-page .ext-info { padding-top: 1rem; }
@media (max-width: 480px) {
    .home-agenda-layout .agenda-item,
    .home-agenda-layout .agenda-item-page { column-gap: .5rem; }
    .home-agenda-layout .date-number { font-size: 2.5rem; }
}