/* ============================================================
   attesten.css — /attesten/

   Kop in de taal van de homepage-hero (huisgroen, doodle-patroon,
   gele titel, handschrift). Daaronder rustige blokken die elkaar
   afwisselen tussen warm wit en zacht, met genummerde stappen:
   dit is een volgorde, en bij elke stap staat WIE hem zet.
   ============================================================ */

.att-kop {
    position: relative;
    background: var(--brand);
    color: #fff;
    overflow: hidden;
    padding: clamp(2.5rem, 6vw, 4.5rem) 1.5rem clamp(2.5rem, 6vw, 4.5rem);
}

.att-kop::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url('../../images/static/doodle-patroon.svg') repeat;
    background-size: 460px;
    opacity: .38;
    pointer-events: none;
}

.att-kop__inner { position: relative; max-width: var(--wrap); margin: 0 auto; }

.att-kop__leus {
    display: block;
    font-family: var(--font-hand);
    font-weight: 700;
    font-size: var(--step-2);
    color: var(--brand-licht);
    transform: rotate(-1.5deg);
    transform-origin: left center;
    margin-bottom: .3rem;
}

.att-kop h1 { color: var(--accent); text-transform: uppercase; line-height: 1; }

.att-kop__tekst {
    margin-top: 1rem;
    max-width: 58ch;
    font-size: var(--step-1);
    color: rgba(255, 255, 255, .92);
}

.att-keuze {
    margin-top: 2rem;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1rem;
    max-width: 820px;
}

.att-keuze__kaart {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: .2rem 1rem;
    align-items: center;
    padding: 1.1rem 1.3rem;
    border-radius: var(--radius);
    background: #fff;
    color: var(--ink);
    text-decoration: none;
    transition: background-color .18s ease, transform .18s ease;
}
.att-keuze__kaart:hover,
.att-keuze__kaart:focus-visible { background: var(--accent-soft); transform: translateY(-2px); }
.att-keuze__kaart svg { grid-row: 1 / span 2; width: 40px; height: 40px; color: var(--brand); }
.att-keuze__kaart strong { font-family: var(--font-display); font-size: var(--step-1); }
.att-keuze__kaart small { color: var(--muted); font-size: var(--step--1); }

/* ── Blokken ── */
.att-blok { padding: clamp(2.5rem, 6vw, 4.5rem) 1.5rem; background: var(--bg); scroll-margin-top: 5rem; }
.att-blok--zacht { background: var(--bg-soft); }
/* Zelfde breedte als de rest van de site; de tekst zelf blijft leesbaar
   smal via max-width op de alinea's. */
.att-blok__inner { max-width: var(--wrap); margin: 0 auto; display: grid; gap: 1.1rem; }
.att-blok__inner--smal { justify-items: start; }

.att-label {
    font-family: var(--font-hand);
    font-weight: 700;
    font-size: var(--step-1);
    color: var(--brand);
}
.att-blok h2 { color: var(--brand-dark); line-height: 1.05; }
.att-intro { font-size: var(--step-1); max-width: 62ch; color: var(--body); }

.att-feiten {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1rem;
    margin-top: .4rem;
}
.att-feiten > div {
    padding: 1.1rem 1.3rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #fff;
}
.att-feiten h3 { font-size: var(--step-0); color: var(--ink); margin-bottom: .4rem; }
.att-feiten ul { margin: 0; padding-left: 1.1rem; display: grid; gap: .25rem; }
.att-feiten li::marker { color: var(--brand); }

.att-stappen__kop { margin-top: 1rem; color: var(--ink); }

/* De stappen: nummer in een gele cirkel, verbonden door een lijn. */
.att-stappen {
    list-style: none;
    margin: 0;
    padding: 0;
    counter-reset: stap;
    display: grid;
    gap: 0;
}
.att-stappen > li {
    counter-increment: stap;
    position: relative;
    display: grid;
    gap: .35rem;
    padding: 0 0 1.6rem 3.6rem;
    justify-items: start;
}
.att-stappen > li::before {
    content: counter(stap);
    position: absolute;
    left: 0;
    top: 0;
    width: 2.4rem;
    height: 2.4rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--accent);
    color: var(--brand-deep);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.15rem;
}
.att-stappen > li:not(:last-child)::after {
    content: '';
    position: absolute;
    left: calc(1.2rem - 1px);
    top: 2.6rem;
    bottom: .3rem;
    width: 2px;
    background: var(--line);
}
.att-stappen__wie {
    font-size: .8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--muted);
}
.att-stappen strong { font-family: var(--font-display); font-size: var(--step-1); color: var(--ink); line-height: 1.2; }
.att-stappen p { max-width: 62ch; }

.att-link {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-weight: 700;
    color: var(--brand-dark);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.att-link svg { width: 18px; height: 18px; flex: none; }
.att-link:hover { color: var(--brand-deep); }


.att-fondsen {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1rem;
}
/* Eén kaart per ziekenfonds: logo, naam, de knop, en hoe je indient.
   Alle kaarten even hoog, de knop op dezelfde hoogte. */
.att-fonds {
    display: grid;
    grid-template-rows: 56px auto 1fr auto;
    gap: .7rem;
    justify-items: start;
    padding: 1.25rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #fff;
}
.att-fonds__logo { height: 48px; width: auto; max-width: 100%; object-fit: contain; align-self: center; }
.att-fonds__naam { display: grid; gap: .1rem; }
.att-fonds__naam strong { font-family: var(--font-display); font-size: var(--step-1); color: var(--ink); }
.att-fonds__naam small { color: var(--muted); font-size: var(--step--1); }
.att-fonds__knop { font-size: .95rem; padding: .65rem 1.2rem; }
.att-fonds__indienen { font-size: var(--step--1); color: var(--muted); }
.att-fonds__knop { align-self: end; }

@media (prefers-reduced-motion: reduce) {
    .att-keuze__kaart { transition: none; }
}

/* ── De keuzelijst voor het attest ── */
.att-download {
    margin-top: .4rem;
    width: 100%;
    max-width: 640px;
    padding: 1.1rem 1.25rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #fff;
    display: grid;
    grid-template-columns: 1fr 1.6fr;
    gap: .9rem 1rem;
    align-items: end;
}
.att-download__veld { display: grid; gap: .3rem; font-weight: 700; font-size: var(--step--1); color: var(--ink); }
.att-download__veld select { width: 100%; }
.att-download__knop { grid-column: 1 / -1; justify-self: start; }
.att-download__knop[aria-disabled="true"] { opacity: .55; cursor: not-allowed; transform: none; }
.att-download__melding { grid-column: 1 / -1; color: var(--brand-dark); font-size: var(--step--1); }
.att-stappen__wie--verplicht { color: var(--tak-givers); }
@media (max-width: 560px) { .att-download { grid-template-columns: 1fr; } }
.att-feiten p { max-width: 60ch; }
.att-vraag { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.att-link--klein { font-weight: 400; font-size: var(--step--1); color: var(--muted); }