/* ========================================
   VOLTUX — Footer (volledig nieuw 2026-09-26)

   Vier stroken op een lichtgroene ondergrond: kolommen, de witte kaart met
   betaalmethoden en keurmerken, inloggen, onderregel.
   Markup: includes/inc-footer.php. Geen enkele klasse uit de oude footer; alles
   begint met vf-.

   Ruimte (aangepast 2026-09-26 na melding gebruiker): de logo's stonden strak
   tegen de haarlijnen en de regels zaten te dicht op elkaar. Betalen en
   keurmerken staan nu samen in één witte kaart met echte binnenruimte, en overal
   is de verticale ritmiek ruimer gezet.

   Licht en groen, niet donker (wens gebruiker 2026-09-26): de footer loopt zacht
   door vanaf de witte pagina erboven in plaats van er als een zwart blok onder te
   staan. Alle tekst is daardoor donker; kaartjes en logo's staan op wit.

   Geen blok "klaar om te boeken" met een knop (weg op 2026-09-26, wens gebruiker):
   zo'n uitnodiging hoort op de pagina zelf, niet in de footer die onder élke
   pagina staat.

   De oude footer-opmaak stond middenin site-style.css. Die is bij deze herbouw
   verwijderd, want geen pagina gebruikte die klassen nog.

   Achtergrondgloed: een background-image op .vf zelf, GEEN pseudo-element met
   negatieve randen. Dat laatste gaf op faq.php een horizontale schuifbalk op
   mobiel (2026-09-25) — die fout maken we hier niet opnieuw.
   ======================================== */

@import url('/shared/voltux-variables.css');

.vf {
    --vf-lijn:  rgba(15, 110, 86, 0.14);
    --vf-tekst: var(--dark-600);        /* gewone tekst en links */
    --vf-zacht: var(--dark-500);        /* onderregel, bijschriften */
    --vf-kaart: rgba(255, 255, 255, 0.75);

    position: relative;
    padding: 64px 0 0;
    border-top: 1px solid var(--vf-lijn);
    background-color: #EAF7F1;
    background-image:
        linear-gradient(180deg, #F5FBF8 0%, #E4F5EE 62%, #DCF1E8 100%),
        radial-gradient(900px 360px at 88% 0%, rgba(29, 158, 117, 0.16), transparent 70%);
    background-repeat: no-repeat;
    color: var(--vf-tekst);
    font-family: var(--font-sans);
    font-size: var(--text-md);
    line-height: var(--leading-normal);
}
.vf *, .vf *::before, .vf *::after { box-sizing: border-box; }

/* Groene haarlijn met een gloed in het midden, precies op de bovenrand */
.vf::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, rgba(29,158,117,0) 0%, rgba(29,158,117,0.55) 50%, rgba(29,158,117,0) 100%);
}

.vf-wrap {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--container-padding);
}
/* LET OP: een blok dat óók .vf-wrap heeft mag NOOIT de korte schrijfwijze `padding:`
   gebruiken — die zet links en rechts op 0 en dan plakt de tekst tegen de rand van
   het scherm (zo stond de onderregel op mobiel, gemeld 2026-09-26). Alleen
   padding-top / padding-bottom gebruiken. */

/* De basis-reset staat in :where(), want dat telt NIET mee voor de specificiteit.
   Met een gewone `.vf h2 { margin: 0 }` won de reset het van `.vf-kop { margin-bottom }`
   en van `.vf-claim { margin-top }` — een klasse alleen weegt namelijk minder dan een
   klasse + een elementnaam. Alle kopjes plakten daardoor tegen hun lijst en tegen de
   logo's, en elke ruimte die ik hier instelde deed niets (gevonden 2026-09-26).
   Zo wint elke regel hieronder wél van de reset. */
:where(.vf) :where(h2) { margin: 0; color: var(--dark-900); }
:where(.vf) :where(ul) { list-style: none; margin: 0; padding: 0; }
:where(.vf) :where(p)  { margin: 0; }

.vf a:focus-visible,
.vf button:focus-visible {
    outline: 2px solid var(--green-500);
    outline-offset: 3px;
    border-radius: var(--radius-sm);
}

/* ══ 1 — Merk en kolommen ══ */

.vf-top {
    display: grid;
    grid-template-columns: 1.9fr 1fr 1fr 1.25fr;
    gap: var(--space-12) var(--space-10);
    padding-bottom: var(--space-16);
}
.vf-merk, .vf-kolom { min-width: 0; }   /* lange e-mailadressen mogen niets oprekken */

/* Het logo in zijn eigen kleur: op deze lichte ondergrond is het groen juist goed
   leesbaar. (Op de eerdere donkere versie moest het wit gemaakt worden.) */
.vf-logo { height: 34px; width: auto; display: block; }

.vf-claim {
    margin-top: 24px;
    max-width: 420px;
    font-size: var(--text-md);
    line-height: var(--leading-relaxed);
}

.vf-punten { margin-top: 34px; display: flex; flex-direction: column; gap: 18px; }
.vf-punten li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: var(--text-base);
    line-height: 1.4;
    color: var(--dark-700);
    font-weight: var(--font-medium);
}
.vf-punten i { font-size: 17px; color: var(--green-500); flex: 0 0 auto; }

.vf-social { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.vf-social a {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: var(--radius-xl);
    border: 1px solid var(--vf-lijn);
    background: var(--white);
    color: var(--dark-500);
    font-size: 19px;
    text-decoration: none;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.vf-social a:hover { color: var(--white); transform: translateY(-3px); }
/* De eigen kleur van elk kanaal, alleen bij hover — daarbuiten blijft de rij rustig */
.vf-social a[data-kanaal="facebook"]:hover  { background: #1877F2; border-color: #1877F2; }
.vf-social a[data-kanaal="linkedin"]:hover  { background: #0A66C2; border-color: #0A66C2; }
.vf-social a[data-kanaal="youtube"]:hover   { background: #FF0000; border-color: #FF0000; }
.vf-social a[data-kanaal="instagram"]:hover {
    background: linear-gradient(45deg, #F9CE34 5%, #EE2A7B 50%, #6228D7 95%);
    border-color: transparent;
}

.vf-kop {
    margin-bottom: 26px;
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--green-700);
}

.vf-kolom ul { display: flex; flex-direction: column; gap: 12px; }

.vf-kolom a,
.vf-cookie {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
    font-size: var(--text-md);
    color: var(--vf-tekst);
    text-decoration: none;
    transition: color 0.18s ease, transform 0.18s ease;
}
.vf-kolom a:hover,
.vf-cookie:hover { color: var(--green-600); transform: translateX(3px); }

/* De knop "Cookie-instellingen" hoort in dezelfde rij thuis als de links.
   .vc-footer-link (site-cookies.css) geeft hem al font: inherit en color: inherit,
   maar ook een vaste onderstreping — en die stylesheet wordt ná deze geladen.
   Vandaar de extra .vf-kolom ervoor: anders verliest deze regel (2026-09-26). */
.vf-kolom .vf-cookie {
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}
.vf-kolom .vf-cookie:hover { text-decoration: underline; text-underline-offset: 3px; }

.vf-contact ul { gap: 22px; }
.vf-contact li {
    display: flex;
    gap: 11px;
    font-size: var(--text-md);
    line-height: 1.5;
}
.vf-contact li > i { margin-top: 2px; font-size: 17px; color: var(--green-500); flex: 0 0 auto; }
.vf-contact a {
    padding: 0;
    color: var(--vf-tekst);
    text-decoration: none;
    overflow-wrap: anywhere;
    transition: color 0.18s ease;
}
.vf-contact a:hover { color: var(--green-600); text-decoration: underline; text-underline-offset: 3px; }

/* ══ 2 — Witte kaart: betalen en keurmerken ══ */

.vf-vertrouwen {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 28px 48px;
    margin-bottom: var(--space-10);
    padding: 30px 32px;
    border: 1px solid rgba(15, 23, 42, 0.06);
    border-radius: var(--radius-2xl);
    background: var(--white);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03), 0 14px 34px -26px rgba(15, 23, 42, 0.30);
}

.vf-groep { min-width: 0; }

/* De tweede groep krijgt links een dun scheidingslijntje in plaats van een eigen
   kader: rustiger dan twee kaarten naast elkaar. */
.vf-groep-keur { padding-left: 48px; border-left: 1px solid rgba(15, 23, 42, 0.08); margin-left: -24px; }

.vf-groep-kop {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 28px;
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    color: var(--vf-zacht);
    letter-spacing: 0.01em;
}
.vf-groep-kop i { font-size: 16px; color: var(--green-500); }

/* De logo's staan los op het wit van de kaart — geen pilletjes meer, die gaven samen
   met de kaart een dubbel kader. Genoeg ruimte ertussen, ook als ze afbreken. */
.vf-logos { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 24px; }
.vf-logos li { display: flex; align-items: center; justify-content: center; }
/* Een vaste HOOGTE en niet alleen een max-height: met max-width/max-height rekende de
   browser nog met de eigen breedte van het bestand (iDEAL is 480 px breed), werd de rij
   te breed en werden alle logo's platgedrukt — het iDEAL-logo kwam er op 32 px uit
   (gemeten 2026-09-26). Met een vaste hoogte volgt de breedte uit de verhouding;
   object-fit houdt die verhouding ook bij het brede Visa-logo. */
.vf-logos img { display: block; height: 24px; width: auto; max-width: 68px; object-fit: contain; }

/* Keurmerken zijn vierkante zegels: die mogen groter en in hun eigen kleur —
   een grijs keurmerk herkent niemand. */
.vf-logos-keur { gap: 18px 22px; }
.vf-logos-keur a { display: flex; align-items: center; }
.vf-logos-keur img {
    height: 46px;
    max-width: 120px;
    transition: transform 0.2s ease;
}
.vf-logos-keur li:hover img { transform: scale(1.05); }

/* ══ 3 — Inloggen ══ */

.vf-portaal {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 14px;
    padding-bottom: 40px;
}

.vf-poort {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    border: 1px solid var(--vf-lijn);
    border-radius: var(--radius-xl);
    background: var(--vf-kaart);
    color: var(--vf-tekst);
    text-decoration: none;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.vf-poort:hover {
    background: var(--white);
    border-color: var(--green-300);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.vf-poort-icoon {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    flex: 0 0 auto;
    border-radius: var(--radius-lg);
    background: var(--green-50);
    color: var(--green-600);
    font-size: 20px;
}

.vf-poort-tekst { display: flex; flex-direction: column; min-width: 0; }
.vf-poort-tekst strong {
    color: var(--dark-900);
    font-size: var(--text-md);
    font-weight: var(--font-bold);
}
.vf-poort-tekst small { font-size: var(--text-sm); color: var(--vf-zacht); }

.vf-poort-pijl {
    margin-left: auto;
    font-size: 18px;
    color: var(--dark-300);
    transition: color 0.2s ease, transform 0.2s ease;
}
.vf-poort:hover .vf-poort-pijl { color: var(--green-500); transform: translateX(3px); }

/* ══ 4 — Onderregel ══ */

.vf-onder {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 22px 32px;
    padding-top: 30px;
    padding-bottom: 52px;
    border-top: 1px solid var(--vf-lijn);
    font-size: var(--text-sm);
    line-height: 1.6;
    color: var(--vf-zacht);
}

.vf-onder-lijst { display: flex; flex-wrap: wrap; align-items: center; }
/* Het scheidingsteken hoort ACHTER een regel en niet ervóór: breekt de rij af op een
   smal scherm, dan begon de nieuwe regel anders met een losse punt (2026-09-26). */
.vf-onder-lijst li:not(:last-child)::after {
    content: '\00B7';
    padding: 0 10px;
    color: var(--dark-300);
}

.vf-boven {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 15px;
    border: 1px solid var(--vf-lijn);
    border-radius: var(--radius-full);
    background: var(--vf-kaart);
    color: var(--vf-tekst);
    font-weight: var(--font-semibold);
    text-decoration: none;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.vf-boven:hover {
    background: var(--white);
    border-color: var(--green-300);
    color: var(--green-600);
}
.vf-boven i { font-size: 16px; }

/* ══ Smaller dan een laptop ══ */

@media (max-width: 1100px) {
    /* Onder elkaar: naast elkaar werd de keurmerkenrij te smal en brak hij lelijk af */
    .vf-vertrouwen { grid-template-columns: 1fr; gap: 24px; }
    .vf-groep-keur {
        margin-left: 0;
        padding-left: 0;
        padding-top: 24px;
        border-left: 0;
        border-top: 1px solid rgba(15, 23, 42, 0.08);
    }
}

@media (max-width: 1000px) {
    .vf-top { grid-template-columns: 1fr 1fr; gap: var(--space-12) var(--space-8); }
    .vf-merk { grid-column: 1 / -1; }
    .vf-claim { max-width: 560px; }
}

@media (max-width: 700px) {
    .vf { padding-top: 48px; }
    .vf-vertrouwen { padding: 24px 22px; }
    .vf-contact { grid-column: 1 / -1; }
    .vf-portaal { grid-template-columns: 1fr; }
    /* Onder elkaar met echte ruimte ertussen; naast elkaar met wrap ging het op een
       smal scherm door elkaar lopen (gemeld 2026-09-26). */
    .vf-onder {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
        padding-bottom: 44px;
    }
    .vf-boven { margin-left: 0; margin-top: 4px; }
}

@media (prefers-reduced-motion: reduce) {
    .vf a, .vf button, .vf img, .vf .vf-poort-pijl { transition: none; }
    .vf a:hover, .vf .vf-poort:hover, .vf .vf-social a:hover { transform: none; }
    .vf .vf-logos-keur li:hover img { transform: none; }
}