/* ═══ DE VOETTEKST ══════════════════════════════════════════════════════════════
 * Eén linkerrand voor alles, in plaats van drie gecentreerde eilandjes.
 * Zie inc/voettekst.php voor waarom de vorige eruit ging.
 *
 * Kleuren: bordeaux #421419 als grond, crème #F9F3E7 als inkt, #64242C voor de
 * gevulde knop. Dezelfde set als de rest van de site.
 * Letters: Aboreto voor de kopjes, Albert Sans voor de tekst, Gallient voor de knop.
 */

.bb-voet {
  background-color: #421419;
  color: #F9F3E7;
  font-family: "Albert Sans", sans-serif;
  /* ⚠️ Ruim onderaan. De taalkiezer van GTranslate staat vast linksonder en lag anders
     over de btw-regel en de credit. Die widget is van een plugin en verplaatsen raakt
     elke pagina; ruimte maken is het kleinste ingrijpen. */
  padding: clamp(3rem, 7vw, 5rem) 1.25rem clamp(4.5rem, 9vw, 5.5rem);
}
.bb-voet__binnen {
  max-width: 1140px;
  margin-inline: auto;
}

/* ── merkblok ───────────────────────────────────────────────────────────────── */
.bb-voet__merk {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.25rem clamp(1.5rem, 4vw, 3rem);
  padding-bottom: clamp(1.75rem, 4vw, 2.5rem);
  border-bottom: 1px solid rgb(249 243 231 / .16);
}
.bb-voet__logo { display: block; line-height: 0; }
.bb-voet__logo img { width: 220px; max-width: 55vw; height: auto; }
.bb-voet__slogan {
  margin: 0;
  flex: 1 1 12rem;
  color: rgb(249 243 231 / .66);
  font-size: 13px;
  letter-spacing: 2.4px;
  text-transform: uppercase;
}
.bb-voet__slogan span { margin-inline: .35rem; }
/* De knop duwt zichzelf naar rechts zolang er plaats is. */
/* ⚠️ De witte pil, niet de gevulde bordeaux. #64242C op #421419 haalt 1,4:1 en dat is
   geen knop. Op een donkere band gebruikt de site altijd zijn witte pil. */
.bb-voet .bb-voet__actie {
  margin-inline-start: auto;
  background-color: #FFFFFF;
  border-color: #FFFFFF;
  color: #421419;
}
.bb-voet .bb-voet__actie:hover,
.bb-voet .bb-voet__actie:focus-visible {
  background-color: #F9F3E7;
  border-color: #F9F3E7;
  color: #421419;
}

/* ── de drie kolommen ───────────────────────────────────────────────────────── */
.bb-voet__raster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: clamp(1.75rem, 4vw, 3rem);
  padding-block: clamp(2rem, 5vw, 3rem);
}
/* ⚠️ `.bb-voet .bb-voet__kop` en niet alleen de klasse.
   ✓ `.elementor-kit-42 h2 { font-size:50px; font-family:Alice; color:#FFF9F5 }` is
   (0,1,1) en verslaat één klasse. Zonder die tweede klasse werden deze kopjes 40 px
   Alice in plaats van 13 px Aboreto. Hetzelfde kit dat eerder de FAQ-kop kaapte. */
.bb-voet .bb-voet__kop {
  margin: 0 0 1rem;
  color: #FFF9F5;
  font-family: "Aboreto", serif;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 2.6px;
  line-height: 1.4;
  text-transform: uppercase;
}
.bb-voet .bb-voet__lijst { margin: 0; padding: 0; list-style: none; }

/* ⚠️ Het kit zet op elke `a` zijn eigen lettertype, grootte en letterspatiëring
   (`.elementor-kit-42 a`, (0,1,1)). Daardoor stonden het adres, het nummer en het
   mailadres in kapitalen met brede spatiëring terwijl de parkings gewoon liepen.
   Hier wordt dat één keer rechtgezet voor alles in de voettekst. */
.bb-voet .bb-voet__regel a,
.bb-voet .bb-voet__regel span {
  font-family: "Albert Sans", sans-serif;
  font-size: 14.5px;
  font-weight: 400;
  letter-spacing: .3px;
  line-height: 1.5;
  text-transform: none;
}

/* ⚠️ Eén kolom iconen, één kolom tekst. Dat was precies het euvel van de vorige
   voettekst: elke regel centreerde zichzelf, dus stonden de iconen op x=65, 10 en 68.
   Met `align-items: start` staat het icoon bij de EERSTE regel, ook als de tekst wrapt. */
.bb-voet .bb-voet__regel {
  display: flex;
  align-items: start;
  gap: .6rem;
  margin-bottom: .5rem;
  color: rgb(249 243 231 / .82);
  font-size: 14.5px;
  line-height: 1.5;
  letter-spacing: .3px;
}
.bb-voet__regel a {
  display: flex;
  align-items: start;
  gap: .6rem;
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color .2s ease, border-color .2s ease;
}
.bb-voet__regel a:hover,
.bb-voet__regel a:focus-visible { color: #FFF9F5; }
.bb-voet__regel a:hover span,
.bb-voet__regel a:focus-visible span { border-bottom: 1px solid rgb(249 243 231 / .5); }
.bb-voet__regel a:focus-visible { outline: 2px solid #F9F3E7; outline-offset: 3px; border-radius: 3px; }

.bb-voet__icoon {
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
  /* Optisch op de x-hoogte van de eerste regel. */
  margin-top: .22em;
  opacity: .6;
}
.bb-voet__noot {
  margin: .9rem 0 0;
  padding-inline-start: calc(17px + .6rem);
  color: rgb(249 243 231 / .5);
  font-size: 13.5px;
  letter-spacing: .3px;
}

/* ── onderbalk ──────────────────────────────────────────────────────────────── */
.bb-voet__onder {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  padding-block: clamp(1.25rem, 3vw, 1.75rem);
  border-top: 1px solid rgb(249 243 231 / .16);
}
.bb-voet__nav {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem clamp(1.25rem, 3vw, 2rem);
}
.bb-voet .bb-voet__nav a {
  color: rgb(249 243 231 / .85);
  font-family: "Aboreto", serif;
  font-size: 13px;
  letter-spacing: 2.2px;
  text-transform: uppercase;
  text-decoration: none;
  /* ⚠️ Raakvlak van 44 px zonder de regel uit elkaar te duwen. */
  padding-block: 12px;
  border-bottom: 1px solid transparent;
  transition: color .2s ease, border-color .2s ease;
}
.bb-voet__nav a:hover,
.bb-voet__nav a:focus-visible { color: #FFF9F5; border-bottom-color: rgb(249 243 231 / .5); }
.bb-voet__nav a:focus-visible { outline: 2px solid #F9F3E7; outline-offset: 4px; }

.bb-voet__sociaal { display: flex; gap: .6rem; }
.bb-voet__sociaallink {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgb(249 243 231 / .28);
  border-radius: 50%;
  color: #F9F3E7;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.bb-voet__sociaallink svg { width: 19px; height: 19px; }
.bb-voet__sociaallink:hover,
.bb-voet__sociaallink:focus-visible { background: #F9F3E7; color: #421419; border-color: #F9F3E7; }
.bb-voet__sociaallink:focus-visible { outline: 2px solid #F9F3E7; outline-offset: 3px; }

/* ── de kleine lettertjes ───────────────────────────────────────────────────── */
.bb-voet__klein {
  padding-top: clamp(1.25rem, 3vw, 1.75rem);
  border-top: 1px solid rgb(249 243 231 / .16);
  color: rgb(249 243 231 / .5);
  font-size: 12.5px;
  line-height: 1.7;
  letter-spacing: .3px;
}
.bb-voet__klein p { margin: 0 0 .3rem; }
/* Het copyright opent het blok, dus iets meer aanwezig dan de regels eronder. */
.bb-voet .bb-voet__klein--sterk { color: rgb(249 243 231 / .72); }
/* De partnervermelding sluit af en mag het rustigst staan. */
.bb-voet .bb-voet__partner { margin-top: .5rem; color: rgb(249 243 231 / .38); font-size: 12px; }
.bb-voet__klein p:last-child { margin-bottom: 0; }
.bb-voet .bb-voet__klein a {
  color: inherit;
  font-family: "Albert Sans", sans-serif;
  font-size: 12.5px;
  letter-spacing: .3px;
  text-transform: none;
  text-decoration: none;
  border-bottom: 1px solid rgb(249 243 231 / .22);
  transition: color .2s ease, border-color .2s ease;
}
.bb-voet__klein a:hover,
.bb-voet__klein a:focus-visible { color: #F9F3E7; border-bottom-color: #F9F3E7; }
.bb-voet__klein a:focus-visible { outline: 2px solid #F9F3E7; outline-offset: 3px; }
.bb-voet__klein span { margin-inline: .3rem; }

/* ── telefoon ───────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  /* Het merkblok gecentreerd. Thierry, 18-9-2026: *"op mobile zou ik het logo bonbon en
     slogan parisian soul centreren in de footer"*. De kolommen eronder blijven links
     uitgelijnd, want daar gaat het om scannen en niet om presentatie. */
  .bb-voet__merk { flex-direction: column; align-items: center; text-align: center; gap: 1rem; }
  .bb-voet .bb-voet__actie { margin-inline-start: 0; width: 100%; box-sizing: border-box; }
  .bb-voet__slogan { flex: 0 0 auto; font-size: 11.5px; letter-spacing: 2px; }

  /* Twee kolommen naast elkaar: "Weet ons te vinden" en de parkings.
     ⚠️ De openingsuren blijven over de volle breedte. Die regels zijn het langst
     ("Zat en zon 12u00 tot 14u00 & 18u00 tot 00u00") en worden in een halve kolom een
     trap van vier regels. */
  .bb-voet__raster { grid-template-columns: 1fr; gap: 1.75rem; }
  .bb-voet__kolom--paar { grid-column: span 1; }
  .bb-voet__raster:has(.bb-voet__kolom--paar) {
    grid-template-columns: 1fr 1fr;
    column-gap: 1rem;
  }
  .bb-voet__kolom:not(.bb-voet__kolom--paar) { grid-column: 1 / -1; }

  /* In een halve kolom is er geen ruimte voor een icoonkolom van 23 px naast tekst die
     toch al wrapt. De iconen blijven staan in de volle-breedte blokken. */
  .bb-voet__kolom--paar .bb-voet__icoon { display: none; }
  .bb-voet__kolom--paar .bb-voet__regel,
  .bb-voet__kolom--paar .bb-voet__regel a { gap: 0; font-size: 13.5px; }
  .bb-voet__kolom--paar .bb-voet__regel { margin-bottom: .7rem; line-height: 1.45; }

  /* Een raakvlak van 44 px per regel, en genoeg ruimte ertussen om de juiste te raken. */
  .bb-voet__regel { margin-bottom: .75rem; font-size: 15px; }
  .bb-voet__regel a { padding-block: 4px; }

  .bb-voet__onder { flex-direction: column; align-items: flex-start; gap: .5rem; }
  /* De vier pagina's op ÉÉN regel. Op 13px met 2,2 px spatiëring paste "Contact" er niet
     meer bij en viel die eronder. Kleiner en strakker gespatieerd past het wel; gemeten
     op 390 px, de smalste telefoon die er nog toe doet. */
  .bb-voet .bb-voet__nav {
    flex-wrap: nowrap;
    justify-content: space-between;
    width: 100%;
    gap: 0;
  }
  .bb-voet .bb-voet__nav a {
    font-size: 10.5px;
    letter-spacing: .9px;
    white-space: nowrap;
  }
}

/* ⚠️ Onder de 360 px past het niet meer op één regel.
   ✓ Gemeten: op 360, 390 en 430 px staan de vier pagina's op één regel zonder overloop.
   Op 320 px heeft de rij 284 px nodig en is er 280. Daar liever een nette tweede regel
   dan de letters nog kleiner maken; onder 10 px lees je een voettekst niet meer. */
@media (max-width: 359px) {
  .bb-voet .bb-voet__nav { flex-wrap: wrap; gap: .3rem 1rem; justify-content: flex-start; }
  .bb-voet .bb-voet__nav a { font-size: 11px; letter-spacing: 1.4px; }
}

@media (prefers-reduced-motion: reduce) {
  .bb-voet__regel a, .bb-voet__nav a, .bb-voet__sociaallink, .bb-voet__klein a { transition: none; }
}