/* ============================================================================
   voet.css — de voettekst van de homepage, overal dezelfde
   ----------------------------------------------------------------------------
   SEED en de Alliance hadden alleen een dun streepje onderaan: een regel met
   het jaartal en twee of drie links. Wie daar beneden komt, kan nergens heen.
   De homepage heeft een echte voettekst met negentien links, en die hoort daar
   ook te staan.

   Waarom een los bestand en niet nog een keer in elke pagina: de betrokken
   pagina's laden drie verschillende stylesheets (site.css, seed/seed.css, of
   helemaal geen). De opmaak in elke pagina overschrijven zou betekenen dat
   dezelfde regels op vijftien plekken staan, en dan lopen ze uit elkaar.

   De kleuren komen uit de variabelen van de pagina zelf, dus de voettekst past
   zich aan bij het blad dat er al hangt.
   ========================================================================== */
footer{padding:0}

.footer-grid{
  display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;
  border-top:1px solid var(--hairline);
  border-bottom:1px solid var(--hairline);
}
.footer-col{padding:40px 28px;border-right:1px solid var(--hairline)}
.footer-col:last-child{border-right:none}
.footer-col img{height:56px;width:auto;margin-bottom:18px}
.footer-col h4{
  font-family:var(--font-body);font-size:11px;font-weight:600;
  text-transform:uppercase;letter-spacing:.14em;color:var(--ink-soft);
  margin-bottom:16px;
}
.footer-col a{
  display:block;color:var(--ink);text-decoration:none;font-size:.9rem;
  margin-bottom:9px;width:fit-content;
}
.footer-col a:hover{color:var(--teal-text,var(--ink-soft))}
.footer-col p{color:var(--ink-soft);font-size:.85rem;max-width:240px}

.footer-bottom{
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;
  padding:20px 28px;
}
/* .caption bestaat niet op elke pagina die dit blad laadt, dus hier staat wat
   de regel onderaan nodig heeft in plaats van erop te vertrouwen. */
.footer-bottom .caption{
  font-family:var(--font-body);font-size:11px;font-weight:500;
  text-transform:uppercase;letter-spacing:.14em;color:var(--ink-soft);
}

@media(max-width:900px){
  .footer-grid{grid-template-columns:1fr 1fr}
  .footer-col{border-bottom:1px solid var(--hairline)}
  .footer-col:first-child{grid-column:1/-1;border-right:none}
  .footer-col:nth-child(3){border-right:none}
  .footer-col:nth-last-child(-n+2){border-bottom:none}
}
@media(max-width:560px){
  .footer-grid{grid-template-columns:1fr}
  .footer-col{border-right:none;border-bottom:1px solid var(--hairline);padding:30px 22px}
  .footer-col:last-child{border-bottom:none}
  .footer-bottom{padding:18px 22px}
}

/* ----------------------------------------------------- de Alliance-variant --
   De Alliance-pagina's zijn donker vanaf de held. Een papieren voettekst
   eronder is een breuk in plaats van een afsluiting. Eén vlak voor alle
   rolpagina's en niet var(--role): elke rol heeft een eigen kleur, en dan zou
   de voettekst per pagina verspringen. Het vlak onderaan hoort bij The Door,
   niet bij de rol. */
footer.donker{background:hsl(220 28% 16%);color:#f4f2ec}
footer.donker .footer-grid,
footer.donker .footer-col{border-color:rgba(244,242,236,.16)}
footer.donker .footer-col h4{color:rgba(244,242,236,.62)}
footer.donker .footer-col a{color:#f4f2ec}
footer.donker .footer-col a:hover{color:hsl(30 72% 62%)}
footer.donker .footer-col p{color:rgba(244,242,236,.72)}
footer.donker .footer-bottom .caption{color:rgba(244,242,236,.62)}
/* Het beeldmerk is zwart op transparant en verdwijnt op dit vlak. */
footer.donker .footer-col img{filter:invert(1) brightness(1.6)}

/* Het voetlogo anderhalf keer zo groot op een groot scherm.
   56 wordt 84. Alleen vanaf 900px: op een telefoon staat de voettekst onder
   elkaar en zou een logo van 84 pixels de eerste kolom opeten. */
@media (min-width: 900px) {
  .footer-col img { height: 84px; }
}