/* ==========================================================================
   vp/footer.css  —  alleen de uitgebreide voet.

   De template levert de voet al bijna helemaal: .footer met zijn padding per
   breekpunt, .footer-detail-div voor de rijen, .footer-line voor de scheiding,
   .footer-circle voor de warme boog eronder, .footer-info-div, .footer-div,
   .copyright-wrapper, .copyright-div, .footer-divider en .back-to-top-link.
   Die blijven allemaal doen wat ze doen; hier staat GEEN regel die er een
   overschrijft.

   Wat de template niet heeft is een rij LINKKOLOMMEN met een kop erboven.
   Dat is het enige dat dit bestand toevoegt, plus twee losse blokken (merk en
   contact) die een eigen kolomstand nodig hebben omdat ze in de voet naast de
   kolommen staan in plaats van eronder.

   Kleuren komen uit de tokenlaag van css/vastpilot-v6.webflow.css. Er staat
   hier geen enkele kleurwaarde met de hand. Het accent is contextafhankelijk:
   de voet is een LICHT vlak (--color--white #FBF9F4, met de boog van
   .footer-circle er als warme tint van 6 procent overheen), dus geldt de
   licht-helft --color--blue-700 = --vp-accent-op-licht #a5441a. De donkere
   helft #FF6B35 hoort hier niet, want die haalt op dit vlak geen 3:1.

   Breekpunten zijn die van de template zelf: 991, 767 en 479. Geen eigen
   getallen.

   Er wordt hier NIETS geanimeerd. Een linkkleur bewegen zou color animeren, en
   color staat niet in de lijst van toegestane eigenschappen (transform,
   opacity, clip-path, filter). De aanwijsstand schakelt daarom direct, net als
   de onderstreping. Dat is ook eerlijker: de streep hoort er op het moment van
   aanwijzen te staan, niet 200ms later.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. De rij met kolommen

   .footer-detail-div legt de RIJEN van de voet neer, niet de kolommen daarin.
   Deze flexrij is dus nieuw. min-width op de kolom houdt vier kolommen op
   desktop even breed en laat ze op smalle schermen netjes terugvallen naar
   twee en daarna naar een, zonder eigen mediaquery.
   -------------------------------------------------------------------------- */

.vp-ft-kolommen {
  width: 100%;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 32px;
  display: grid;
}

.vp-ft-kolom {
  min-width: 0;
}

/* --------------------------------------------------------------------------
   2. De kop boven een kolom

   Ink en 700, tegenover de lopende tekst in --color--gray-900 en 600 van de
   links eronder. Kleur en gewicht dragen het verschil; er staat geen vlak
   omheen. De maat komt uit het small-paragraph-token, dus dezelfde 16px als
   de links, met de tracking van .small-text als koptoon.
   -------------------------------------------------------------------------- */

.vp-ft-kop {
  color: var(--color--gray-950);
  font-size: var(--_typography---paragraph-font-size--small-paragraph);
  line-height: var(--_typography---font-line-height--medium);
  font-weight: var(--_typography---font-weight--bold);
  letter-spacing: .5px;
  margin: 0 0 8px;
}

/* --------------------------------------------------------------------------
   3. De lijst

   webflow.css zet op ul een padding-left van 40px en een margin-bottom van
   10px. .w-list-unstyled haalt de padding en de bolletjes weg maar laat die
   marge staan, dus die drie regels staan hier alsnog. Verder niets: de links
   zijn blokken en stapelen vanzelf.
   -------------------------------------------------------------------------- */

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

/* --------------------------------------------------------------------------
   4. De link

   Een blok van de volle kolombreedte met 12px lucht boven en onder. Tekst van
   16px op 120 procent is 19,2px hoog, dus 19,2 + 24 = 43,2; min-height tilt
   het raakvlak naar de 44px die de norm vraagt. Volle kolombreedte betekent
   dat ook de breedte ruim over de 44 gaat.

   display: block in plaats van flex is met opzet: zo erft de link de
   text-align die .footer-detail-div op 767 en smaller op center zet, en volgt
   deze rij dus vanzelf de uitlijning van de rest van de voet.

   Aanwijzen en focus geven allebei kleur EN onderstreping, dus de link is ook
   herkenbaar als de kleur niet doorkomt.
   -------------------------------------------------------------------------- */

.vp-ft-link {
  color: var(--color--gray-900);
  font-size: var(--_typography---paragraph-font-size--small-paragraph);
  line-height: var(--_typography---font-line-height--medium);
  font-weight: var(--_typography---font-weight--semi-bold);
  min-height: 44px;
  padding: 12px 0;
  text-decoration: none;
  display: block;
}

.vp-ft-link:hover,
.vp-ft-link:focus-visible {
  color: var(--color--blue-700);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.vp-ft-link[aria-current="page"] {
  color: var(--color--blue-700);
  font-weight: var(--_typography---font-weight--bold);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.vp-ft-linksrij {
  align-items: flex-start;
  gap: 40px;
}

.vp-ft-actie {
  flex: 0 0 auto;
}

.vp-ft-kenmerken {
  flex-flow: row wrap;
}

.vp-ft-utility {
  align-items: center;
  gap: 20px;
}

.vp-ft-utility > a[href^="mailto:"] {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

/* Dezelfde ring als de knoppen, de navigatie en .back-to-top-link hem hebben
   in css/vastpilot-v6.webflow.css. Die selectorlijst kent deze nieuwe klasse
   niet, en dat bestand is niet van mij, dus staat de regel hier.
   3px accent met 3px lucht: #a5441a haalt 5,5 op de warme voetkleur, ruim
   boven de 3:1 die een focusring tegen zijn achtergrond moet halen. */
.vp-ft-link:focus-visible {
  outline: 3px solid var(--vp-accent-op-licht);
  outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   5. Merk en contact

   Twee kolomblokken. .footer-info-div doet dit ook, maar zonder maatbreedte,
   waardoor de zin onder het logo over de volle containerbreedte uitloopt.
   max-width houdt hem op een leesbare regel.
   -------------------------------------------------------------------------- */

.vp-ft-merk {
  grid-row-gap: 20px;
  flex-flow: column;
  align-items: flex-start;
  max-width: 360px;
  display: flex;
}

/* GEEN eigen row-gap. In de opgeleverde HTML staat .vp-ft-contact als tweede
   klasse op een .vp-ft-kolom met dezelfde kop-en-lijst-opbouw als de andere
   drie. Een gap van 12px kwam daar bovenop de 8px marge onder .vp-ft-kop, en
   dan begint de eerste link van de contactkolom 20px onder zijn kop terwijl
   die van Product, Bedrijf en Juridisch op 8px staan. Gemeten op 1440: eerste
   link op y 454,5 tegen 442,5 bij de andere drie. De ruimte komt nu overal uit
   dezelfde bron, namelijk de marge van de kop. */
.vp-ft-contact {
  flex-flow: column;
  align-items: flex-start;
  display: flex;
}

/* --------------------------------------------------------------------------
   6. De breekpunten van de template

   991: .footer-info-div gaat daar van 24 naar 16px, dus de kolomruimte krimpt
   mee. 767: .footer-detail-div en .footer-div gaan daar op center staan, dus
   deze rij ook.
   -------------------------------------------------------------------------- */

@media screen and (max-width: 991px) {
  .vp-ft-kolommen {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px 36px;
  }

  .vp-ft-linksrij {
    flex-flow: column;
  }
}

@media screen and (max-width: 767px) {
  .vp-ft-kolommen {
    grid-template-columns: minmax(0, 1fr);
    text-align: center;
  }

  .vp-ft-merk,
  .vp-ft-contact {
    align-items: center;
  }

  .vp-ft-actie,
  .vp-ft-utility {
    justify-content: center;
    width: 100%;
  }
}