/* ==========================================================================
   C2 · ft — Footer
   v1.0 · 2026-08-31 · Natuurlijk Gezonder
   --------------------------------------------------------------------------
   Prefix: ft-. Gebruikt uitsluitend tokens uit 00-tokens.css.
   Laadt na 90-ct-contact.css.

   Wat het vervangt: één regel copyright, en verder niets. Geen menu, geen
   adres, geen KvK, geen privacyverklaring. En die ene regel klopte niet eens
   over de talen heen: NL zei "©2021 Gezond aan Zee in Ouddorp", EN en DE
   zeiden "©2025 B&B Gezond aan Zee" — ander jaartal én een andere naam.

   Dit is de donkerste vlakte van de pagina en dat is bedoeld: de footer is
   het anker onderaan. Het is ook de enige plek waar het lichte logo wordt
   gebruikt (`ng-logo-licht.svg`).

   GEEN JAARTAL. Een hardgecodeerd jaar veroudert en niemand denkt eraan het
   bij te werken — dat is precies hoe de oude site aan een footer uit 2021
   kwam. Een copyrightvermelding heeft geen jaartal nodig. Wil je er toch
   een, laat WordPress hem dan zetten; zie de README.
   ========================================================================== */

.ft {
  padding: var(--ng-sectie-y) 0 var(--ng-s-6);
  background: var(--ng-groen-900);
  color: var(--ng-tekst-op-diep);
}

/* --------------------------------------------------------------------------
   Bovenste helft: logo en vier kolommen
   -------------------------------------------------------------------------- */

.ft__boven {
  display: grid;
  gap: var(--ng-s-6);
  padding-bottom: var(--ng-s-6);
  border-bottom: 1px solid rgba(255, 254, 252, .16);
}
@media (min-width: 48rem) {
  .ft__boven { grid-template-columns: repeat(2, 1fr); gap: var(--ng-s-7) var(--ng-s-6); }
}
@media (min-width: 62rem) {
  /* Het logoblok krijgt meer ruimte dan een kolom links; de vier
     kolommen erna zijn gelijk. */
  .ft__boven { grid-template-columns: 1.4fr repeat(4, 1fr); gap: var(--ng-s-6); }
}

.ft__merk img {
  display: block;
  width: auto;
  height: 2.5rem;
  margin-bottom: var(--ng-s-4);
}
.ft__merk p {
  margin: 0;
  max-width: 30ch;
  font-size: var(--ng-t-klein);
  line-height: var(--ng-lh-klein);
  color: rgba(255, 254, 252, .78);
}

.ft__kolomkop {
  display: block;
  margin: 0 0 var(--ng-s-3);
  font-size: var(--ng-t-micro);
  font-weight: var(--ng-w-half);
  letter-spacing: var(--ng-ls-caps);
  text-transform: uppercase;
  color: var(--ng-munt-200);
}

.ft__lijst { margin: 0; padding: 0; list-style: none; }
.ft__lijst li + li { margin-top: var(--ng-s-2); }

.ft__lijst a,
.ft__adres a {
  font-size: var(--ng-t-klein);
  line-height: var(--ng-lh-klein);
  color: rgba(255, 254, 252, .86);
  text-decoration: none;
  /* R5 (02-10-2026): op een breed scherm waren het mailadres en het
     telefoonnummer 18 px hoog, direct onder elkaar: onder de 24 px die
     WCAG 2.2 (2.5.8) als ondergrens vraagt. Gevonden door Lighthouse
     (target-size, desktop, elke pagina). 3 px boven en onder maakt 24.
     Op smal geldt de ruimere regel verderop (44 px). */
  display: inline-block;
  padding-block: .1875rem;
}
.ft__lijst a:hover,
.ft__adres a:hover { color: var(--ng-tekst-op-diep); text-decoration: underline; }

.ft__adres {
  margin: 0 0 var(--ng-s-3);
  font-style: normal;
  font-size: var(--ng-t-klein);
  line-height: var(--ng-lh-klein);
  color: rgba(255, 254, 252, .86);
}

/* De taalkolom staat horizontaal: drie korte codes onder elkaar zetten is
   ruimte verspillen. */
.ft__talen { display: flex; flex-wrap: wrap; gap: var(--ng-s-2) var(--ng-s-3); }
.ft__talen a[aria-current="true"] {
  color: var(--ng-tekst-op-diep);
  font-weight: var(--ng-w-half);
  text-decoration: underline;
  text-underline-offset: .2em;
}

/* --------------------------------------------------------------------------
   Onderste regel: wie dit is, juridisch
   -------------------------------------------------------------------------- */

.ft__onder {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ng-s-2) var(--ng-s-4);
  justify-content: space-between;
  align-items: baseline;
  margin-top: var(--ng-s-5);
}

.ft__onder p {
  margin: 0;
  font-size: var(--ng-t-micro);
  line-height: 1.5;
  color: rgba(255, 254, 252, .64);
}
.ft__onder a { color: inherit; }
.ft__onder a:hover { color: var(--ng-tekst-op-diep); }

/* Een tweede kolomkop binnen dezelfde kolom heeft ruimte boven zich nodig.
   Als modifier en niet als inline style: waarden horen in dit bestand. */
.ft__kolomkop--tweede { margin-top: var(--ng-s-4); }

/* --------------------------------------------------------------------------
   Aanraakdoelen — toegevoegd 02-09
   --------------------------------------------------------------------------
   Gemeten op 390 px: de dertien links in de voettekstkolommen waren 18 tot
   21 px hoog. Dat is onder de 24 px die WCAG 2.5.8 (AA) als ondergrens stelt
   voor een doel dat geen inline-link in een zin is, en ver onder de 44 px die
   als praktijknorm geldt. Naast elkaar in een lijst betekent dat: mistikken.

   `@media (pointer: coarse)` en niet een breedtegrens: het gaat om de
   bediening, niet om het schermformaat. Een tablet met een muis heeft dit
   niet nodig, een grote telefoon wél. Zo blijft de desktopopmaak precies
   zoals hij is.

   De regelafstand tussen de items gaat omlaag met hetzelfde bedrag als de
   padding omhoog, zodat de kolom niet langer wordt.
   -------------------------------------------------------------------------- */

@media (pointer: coarse) {
  /* Eén regel voor alle voettekstlinks. Een eerdere versie had er twee — een
     voor de lijsten en een voor de losse links — met hetzelfde gewicht
     (0,1,1). De tweede stond later in het bestand en won dus ook voor de
     lijstlinks, die daardoor op 36 px bleven staan in plaats van 44. Twee
     regels die elkaar overlappen zijn hier niets waard. */
  .ft__boven a,
  .ft__onder a,
  .ft__lijst a,
  .ft__adres a {
    display: inline-block;
    padding-block: .75rem;        /* 12px boven + onder; met een regelhoogte van
                                     20px komt dat op precies 44px uit — gemeten,
                                     niet geschat: .6875rem gaf 42. */
  }

  /* De regelafstand tussen de items gaat eraf: de padding levert hem nu. */
  .ft__lijst li + li { margin-top: 0; }
}


/* ==========================================================================
   R3 · 2026-10-01 · wijziging uit het goedgekeurde R2-prototype
   (prototype/r2/r2.css, blok 9), ongewijzigd overgenomen. Staat achteraan,
   zodat het net als in het prototype ná de regels hierboven telt.
   ========================================================================== */

/* --------------------------------------------------------------------------
   9 · ft — footer · WIJZIGING op 95-ft-footer.css
   De link "Route" droeg geen klasse en erfde de sitebrede linkkleur:
   zeegroen #2A7C6F op diep zeegroen #143B35 = 2,4 : 1. Dat staat zo op elke
   pagina. Hier krijgt hij de kleur van de andere footerlinks.
   -------------------------------------------------------------------------- */

a.ft__route {
  font-size: var(--ng-t-klein);
  line-height: var(--ng-lh-klein);
  color: rgba(255, 254, 252, .86);
  text-underline-offset: .2em;
}
a.ft__route:hover { color: var(--ng-tekst-op-diep); }
@media (pointer: coarse) {
  a.ft__route { display: inline-block; padding-block: .75rem; }
}

/* R3 · 2026-10-01 · gemeten op staging: Elementor haalt de onderstreping van elke link weg. */
a.ft__route,
.ft__onder a { text-decoration: underline; }

/* R4 · 2026-10-01 · de taalkeuze in de footer is nu zichtbaar (NL · EN · DE).
   De niet-gekozen talen erfden de standaard-linkkleur: 2,47 : 1 op het donkere vlak — dezelfde fout als de
   routelink in R3. Ze krijgen de kleur van de andere footerlinks; de gekozen taal blijft onderstreept en vet.
   Op een aanraakscherm is elke code een vlak van 44 px hoog. */
.ft__talen a { color: rgba(255, 254, 252, .86); text-decoration: none; }
.ft__talen a:hover { color: var(--ng-tekst-op-diep); text-decoration: underline; }
@media (pointer: coarse) {
  .ft__talen a { display: inline-flex; align-items: center; min-width: 2.75rem; min-height: 2.75rem; }
}