/* Kleuren zijn overgenomen uit Burendag_flyer_A4.pdf, zodat flyer en site
   hetzelfde ogen. Wie de flyer aanpast, past ze hier ook aan. */
:root {
    --groen-donker: #1e3b39; /* koptekst "Grasbuurt" en alle bodytekst */
    --groen-zacht:  #4a6360; /* ondertitel en labels */
    --amber:        #f6a821; /* "Burendag 2026", accenten */
    --amber-donker: #dd9016;
    --koraal:       #ef6f5c; /* kopjes van secties */
    --blauw:        #4ea3de;
    --groen:        #5fb65a;
    --paars:        #9b6bc9;
    --creme:        #fff3d6; /* vlak met wanneer/waar */
    --creme-rand:   #e7c877;
    --mint:         #eef9ee; /* vlak met de kosten */
    --mint-rand:    #d0e8cf;
    --papier:       #fcfefc;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--papier);
    color: var(--groen-donker);
    font: 17px/1.6 "Segoe UI", system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;
    -webkit-text-size-adjust: 100%;
}

/* De flyer is gezet in Trebuchet MS; die staat op vrijwel elke Mac en
   Windows, dus de koppen komen er hetzelfde uit als op papier. */
h1, h2 {
    font-family: "Trebuchet MS", "Segoe UI", system-ui, sans-serif;
}

.wrap { max-width: 720px; margin: 0 auto; padding: 0 20px; }

/* ---------- taalkeuze ---------- */

/* Boven de kop en klein gehouden: het is een uitwijkmogelijkheid voor wie de
   pagina niet leest, geen navigatie waar de pagina omheen gebouwd is. */
.talen {
    max-width: 720px;
    margin: 0 auto;
    padding: 14px 20px 0;
    text-align: right;
    font-size: .9rem;
    color: var(--groen-zacht);
}
.talen a { color: var(--groen-zacht); text-decoration: none; border-bottom: 1px solid var(--creme-rand); }
.talen a:hover { color: var(--amber-donker); }
.talen [aria-current] { color: var(--groen-donker); font-weight: 700; }

/* ---------- kop ---------- */

header.wrap { padding: 34px 20px 0; text-align: center; }
header h1 {
    margin: 0;
    font-size: clamp(2rem, 7vw, 2.9rem);
    line-height: 1.15;
    letter-spacing: -.01em;
}
header h1 .jaar { color: var(--amber); }
header p {
    margin: 14px 0 0;
    color: var(--groen-zacht);
    font-weight: 600;
}

/* De huisjes van de flyer, als SVG zodat ze op elk scherm scherp blijven en
   meeschalen met de breedte van de pagina. Ze staan in een .wrap, dus het
   straatje loopt netjes even breed als de tekst eronder. */
.huisjes-wrap { margin-top: 22px; }
.huisjes { display: block; width: 100%; height: auto; }

main.wrap { padding: 30px 20px 50px; }
section + section { margin-top: 34px; }

h2 {
    font-size: 1.3rem;
    margin: 0 0 14px;
    color: var(--koraal);
}

p { margin: 0 0 14px; }
p:last-child { margin-bottom: 0; }

/* ---------- wanneer / waar ---------- */

.praktisch {
    background: var(--creme);
    border: 2px dashed var(--creme-rand);
    border-radius: 14px;
    padding: 22px 26px;
}
.praktisch dl { margin: 0; }
.praktisch div { display: flex; gap: 22px; align-items: baseline; }
.praktisch div + div { margin-top: 14px; }
.praktisch dt {
    flex: 0 0 92px;
    color: var(--koraal);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
}
.praktisch dd {
    margin: 0;
    font-size: 1.12rem;
    font-weight: 600;
}
.praktisch dd span { display: block; font-weight: 400; font-size: 1rem; }

/* ---------- wat gaan we doen ---------- */

.programma {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 24px;
}
.programma li {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    font-weight: 600;
}
/* De gekleurde stip vóór elk programmaonderdeel, in dezelfde volgorde als op
   de flyer: koraal, blauw, amber, groen. */
.programma li::before {
    content: "";
    flex: 0 0 14px;
    width: 14px;
    height: 14px;
    margin-top: .42em;
    border-radius: 50%;
    background: var(--stip);
}
.programma li:nth-child(1) { --stip: var(--koraal); }
.programma li:nth-child(2) { --stip: var(--blauw); }
.programma li:nth-child(3) { --stip: var(--amber); }
.programma li:nth-child(4) { --stip: var(--groen); }

/* ---------- kosten ---------- */

.kosten {
    background: var(--mint);
    border: 1px solid var(--mint-rand);
    border-radius: 14px;
    padding: 22px 26px;
}
.kosten h2 { margin-top: 0; }
.kosten table { width: 100%; border-collapse: collapse; }
.kosten td { padding: 7px 0; vertical-align: baseline; }
.kosten td + td { text-align: right; font-weight: 700; white-space: nowrap; }
.kosten tr + tr td { border-top: 1px solid var(--mint-rand); }
.kosten .gratis { color: var(--groen); }
.deadline {
    margin: 16px 0 0;
    color: var(--koraal);
    font-weight: 700;
}

/* ---------- aanmelden ---------- */

/* Het formulier komt uit aanmeldronde.nl en stelt zijn eigen hoogte in via
   embed.js. Geen eigen kader eromheen: het formulier tekent zelf al een kaart. */
.formulier { margin-top: 6px; }
/* height is een startwaarde tegen een sprong voordat embed.js meet; géén
   min-height, want die zou de hoogte die embed.js instelt overrulen en bij
   een korte inhoud (bijvoorbeeld "aanmeldingen gesloten") lege ruimte laten. */
.formulier iframe { width: 100%; border: 0; height: 320px; display: block; }

/* ---------- sponsors ---------- */

.sponsors { text-align: center; }
.sponsors h2 { color: var(--amber); }
/* Eén rij op een breed scherm, twee rijen van drie op een telefoon — dus een
   grid en geen flex-wrap, anders blijft er onderaan één logo alleen over. */
.sponsors ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(6, auto);
    align-items: center;
    justify-content: center;
    gap: 26px 34px;
}
.sponsors li { display: flex; justify-content: center; }
/* De logo's zijn op twee keer de weergavegrootte geëxporteerd, zodat ze op
   een retinascherm scherp blijven; de hoogte hieronder bepaalt hoe groot ze
   daadwerkelijk staan. */
.sponsors img {
    display: block;
    height: 52px;
    width: auto;
    max-width: 100%;
}
.sponsors .breed img { height: 34px; } /* Gemeente Delft is liggend, dus lager */

a { color: var(--koraal); }
a:hover { color: var(--amber-donker); }

@media (max-width: 560px) {
    header.wrap { padding-top: 32px; }
    .programma { grid-template-columns: 1fr; }
    .praktisch, .kosten { padding: 18px 20px; }
    .praktisch div { flex-direction: column; gap: 2px; }
    .praktisch dt { flex: none; }
    .sponsors ul { grid-template-columns: repeat(3, 1fr); gap: 24px 16px; }
    .sponsors img { height: 44px; }
    .sponsors .breed img { height: 28px; }
}