/* ===========================================================================
   hsb-voet.css — de voettekst
   ===========================================================================

   Vier banden onder elkaar:

     1. ontdekken   drie kolommen met sprekers, dagvoorzitters en thema's
     2. hoofd       merk en sociale kanalen, service, over ons, contact
     3. slogan      één regel, gecentreerd
     4. onderaan    rechten, KvK en de kleine links

   De inhoud komt uit `voet_groepen` en `voet_links`; in dit bestand staat
   alleen hoe het eruitziet. Laad het ná site.css.

   Deze opmaak gaat uit van hsb-merk.css voor de kleurtokens.
   =========================================================================== */


/* ---------------------------------------------------------------------------
   1. De banden
   --------------------------------------------------------------------------- */

.voet {
    --voet-tekst:  rgba(255, 255, 255, .74);
    --voet-lijn:   rgba(255, 255, 255, .12);

    background: var(--merk-blauw);
    color: #fff;
    margin-top: 72px;
}

.voet__band--ontdek {
    background: var(--merk-blauw-diep);
}

.voet__band--slogan {
    border-top: 1px solid var(--voet-lijn);
}

.voet__band--onderaan {
    background: var(--vlak-zacht);
    color: var(--tekst-zacht);
}

.voet__binnen {
    max-width: 1240px;
    margin-inline: auto;
    padding: 48px 24px;
}

.voet__band--slogan .voet__binnen,
.voet__band--onderaan .voet__binnen {
    padding-block: 22px;
}


/* ---------------------------------------------------------------------------
   2. De kolommen
   ---------------------------------------------------------------------------
   Mobiel één kolom, vanaf 600 px twee, vanaf 992 px het volle aantal.
   Met auto-fit zou een kolom met weinig links onnodig breed worden; vandaar
   vaste aantallen per stap.
   --------------------------------------------------------------------------- */

.voet__rooster {
    display: grid;
    gap: 36px 40px;
    grid-template-columns: 1fr;
}

@media (min-width: 600px) {
    .voet__rooster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 992px) {
    .voet__rooster--drie { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .voet__rooster--vier { grid-template-columns: 1.4fr 1fr 1fr 1.1fr; }
}


/* ---------------------------------------------------------------------------
   3. Koppen en lijsten
   --------------------------------------------------------------------------- */

.voet-kolom__kop {
    margin: 0 0 16px;
    font-size: 1.0625rem;
    font-weight: 700;
    line-height: 1.3;
    color: #fff;
}

.voet-kolom__kop--klein {
    margin-top: 28px;
    font-size: .8125rem;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--voet-tekst);
}

.voet-kolom__kop a {
    color: inherit;
    text-decoration: none;
}

.voet-kolom__kop a:hover,
.voet-kolom__kop a:focus-visible {
    color: var(--merk-oranje-licht);
}

.voet-lijst {
    margin: 0;
    padding: 0;
    list-style: none;
}

.voet-lijst li + li {
    margin-top: 9px;
}

.voet-lijst a,
.voet-lijst__tekst {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    color: var(--voet-tekst);
    text-decoration: none;
    line-height: 1.45;
}

.voet-lijst a:hover,
.voet-lijst a:focus-visible {
    color: #fff;
}

/* Het pijltje voor de link. Oranje, en het schuift een paar pixels mee.
   In het oude ontwerp stond hier een gevuld driehoekje; dat werd op een
   klein scherm een vlek. Een dunne chevron blijft ook op 320 px leesbaar. */
.voet-lijst__pijl {
    margin-top: .18em;
    color: var(--merk-oranje);
    transition: transform .18s ease;
}

.voet-lijst a:hover .voet-lijst__pijl {
    transform: translateX(3px);
}

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


/* ---------------------------------------------------------------------------
   4. Het merkblok
   --------------------------------------------------------------------------- */

.voet-merk__logo {
    display: inline-block;
    line-height: 0;
}

.voet-merk__logo img {
    width: auto;
    height: 38px;
}

.voet-merk__intro {
    margin: 18px 0 0;
    max-width: 34ch;
    color: var(--voet-tekst);
    line-height: 1.6;
}


/* ---------------------------------------------------------------------------
   5. De sociale kanalen
   ---------------------------------------------------------------------------
   Knoppen van 42 px. Dat is de ondergrens waarop een vinger een link op een
   telefoon betrouwbaar raakt; kleiner dan dat gaat het mis.
   --------------------------------------------------------------------------- */

.voet-social {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 12px 0 0;
    padding: 0;
    list-style: none;
}

.voet-social__knop {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: var(--radius-chip);
    background: rgba(255, 255, 255, .09);
    color: #fff;
    text-decoration: none;
    transition: background-color .18s ease, color .18s ease, transform .18s ease;
}

.voet-social__knop:hover,
.voet-social__knop:focus-visible {
    background: var(--merk-oranje);
    color: #fff;
    transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
    .voet-social__knop { transition: none; }
    .voet-social__knop:hover { transform: none; }
}


/* ---------------------------------------------------------------------------
   6. Contact
   --------------------------------------------------------------------------- */

.voet-contact__naam {
    margin: 0;
    font-weight: 600;
    color: #fff;
}

.voet-contact__adres {
    margin: 4px 0 16px;
    color: var(--voet-tekst);
    line-height: 1.55;
}

.voet-lijst--contact a {
    align-items: center;
}

.voet-lijst--contact .merk-icoon {
    color: var(--merk-oranje);
}


/* ---------------------------------------------------------------------------
   7. De slogan
   --------------------------------------------------------------------------- */

.voet-slogan {
    margin: 0;
    text-align: center;
    font-size: clamp(1.25rem, 1rem + 1.1vw, 1.75rem);
    line-height: 1.3;
}

.voet-slogan__merk {
    font-weight: 700;
    color: #fff;
}

.voet-slogan__regel {
    font-style: italic;
    font-weight: 700;
    color: var(--merk-oranje);
}


/* ---------------------------------------------------------------------------
   8. De onderste balk
   --------------------------------------------------------------------------- */

.voet-onderaan {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 28px;
    align-items: center;
    justify-content: space-between;
    font-size: .8125rem;
}

.voet-onderaan__rechten {
    margin: 0;
}

.voet-onderaan__scheiding {
    margin-inline: 6px;
    opacity: .5;
}

.voet-onderaan__links {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.voet-onderaan a {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid transparent;
}

.voet-onderaan a:hover,
.voet-onderaan a:focus-visible {
    color: var(--merk-blauw);
    border-bottom-color: currentColor;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-thema="licht"]) .voet-onderaan a:hover {
        color: var(--merk-oranje-licht);
    }
}

:root[data-thema="donker"] .voet-onderaan a:hover {
    color: var(--merk-oranje-licht);
}

@media (max-width: 575.98px) {
    .voet__binnen { padding: 36px 20px; }
    .voet-onderaan { justify-content: flex-start; }
}