/* De voettekst, opmaak en al, in één bestand.
 *
 * Waarom apart en niet in main.css: op 11 sep 2026 bleek de site uit twee generaties
 * pagina's te bestaan. De homepage en de vijf trekpagina's laden main.css met
 * media="print" en zetten dat nooit om, dus daar is main.css op het scherm inert; hun
 * opmaak staat in de pagina zelf. De gedeelde voettekst uit partials/footer.html kon
 * daar dus niet werken: het raster viel terug op display:block en het merklogo werd
 * 1120 pixels breed. Gemeten in de browser, niet geraden.
 *
 * Dit bestand laadt elke pagina gewoon, zonder media-truc. Eén bron voor de inhoud
 * (partials/footer.html) en één voor de opmaak (dit bestand).
 *
 * De kleuren staan als variabelen op .footer zelf en niet op :root. Daardoor is de
 * voettekst onafhankelijk van wat een pagina verder definieert en ziet hij er overal
 * hetzelfde uit. Wat hier stond als html.v2-variant is de gewone variant geworden,
 * want dat is de voettekst die op 11 sep 2026 is goedgekeurd.
 */

.footer {
  /* zelfvoorzienend: geen enkele van deze waarden komt van de pagina */
  --font-body: 'Libre Franklin', 'Helvetica Neue', Arial, sans-serif;
  --space-sm: clamp(1rem, 2vw, 1.5rem);
  --color-obsidian: #161513;
  --color-ash: #f5f2e8;
  --color-mist: #b0a99e;
  --color-gold: #c9a84c;
}

.footer {
  padding: 4rem 0 0;
  border-top: 1px solid rgba(201,168,76,0.12);
  font-family: var(--font-body);
}
/* Afstand via gap en niet via padding op de items. Met padding plus losse
   scheidingsstreepjes bleef er bij het afbreken eentje aan het eind van de eerste regel
   hangen, en begon de tweede regel ingesprongen in plaats van links uitgelijnd. */
.footer__trust {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.85rem 2.25rem;
  padding-bottom: 2.5rem;
  margin-bottom: 3rem;
  border-bottom: 1px solid rgba(107,102,96,0.1);
  flex-wrap: wrap;
}
.footer__trust-badge {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-mist);
  white-space: nowrap;
}
.footer__trust-badge svg {
  color: var(--color-gold);
  flex-shrink: 0;
  display: inline;
  width: 14px;
  height: 14px;
  max-width: none;
}
.footer__ta-inline {
  display: inline-flex;
  align-items: center;
}
/* Hun lockup heeft een groene uil en een zwarte woordmerktekst, dus onleesbaar op deze
   donkere footer. Eerst opgelost met filter: brightness(0) invert(1), maar dat maakt ook
   de uil wit en die wordt dan een dichte schijf zonder ogen. Nu een eigen bestand met de
   omkeer-variant: woordmerk wit, uil groen, zoals Tripadvisor zelf voorschrijft voor een
   donkere ondergrond. Ook niet meer van hun server geleend. */
.footer__ta-inline img {
  opacity: 0.82;
  transition: opacity 0.3s;
  display: block;
}
.footer__ta-inline img:hover { opacity: 0.95; }
.footer__cols {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  column-gap: 3.5rem;
  row-gap: 0;
  padding-bottom: 3.5rem;
  align-items: start;
}
.footer__col { display: flex; flex-direction: column; }
.footer__brand {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--color-ash);
  display: flex;
  align-items: center;
  gap: 0.5em;
  margin-bottom: 0.9rem;
}
.footer__brand svg { width: 18px; height: 18px; flex: 0 0 auto; }
.footer__tagline {
  font-size: 0.8rem;
  color: var(--color-mist);
  line-height: 1.7;
  margin-bottom: 1.25rem;
}
.footer__contact {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.footer__contact a {
  font-size: 0.78rem;
  color: var(--color-mist);
  transition: color 0.15s ease;
}
.footer__contact a:hover { color: var(--color-ash); }
.footer__col-title {
  display: block;
  font-size: 0.58rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--color-gold);
  padding-bottom: 0.75rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid rgba(201,168,76,0.15);
}
.footer__links {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.footer__links a {
  font-size: 0.78rem;
  color: var(--color-mist);
  line-height: 1.3;
  transition: color 0.15s ease;
}
.footer__links a:hover { color: var(--color-ash); }
.footer__connect-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.78rem;
  color: var(--color-mist);
  text-decoration: none;
  line-height: 1.3;
  transition: color 0.15s ease;
}
.footer__connect-item:hover { color: var(--color-ash); }
.footer__connect-item svg {
  flex-shrink: 0;
  display: inline;
  width: 16px;
  height: 16px;
  max-width: none;
  opacity: 0.55;
}
.footer__connect-item:hover svg { opacity: 1; }
.footer__bottom {
  border-top: 1px solid rgba(107,102,96,0.1);
  padding: 1.1rem 0 1.1rem;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.footer__copy {
  font-size: 0.68rem;
  color: var(--color-mist);
  opacity: 0.5;
}
.footer__social {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.9rem;
}
.footer__social a {
  display: flex;
  align-items: center;
  color: var(--color-mist);
  opacity: 0.45;
  transition: color 0.15s ease, opacity 0.15s ease;
}
.footer__social a svg {
  display: inline;
  max-width: none;
}
.footer__social a:hover { color: var(--color-gold); opacity: 1; }
.footer__studio {
  font-size: 0.58rem;
  color: var(--color-mist);
  opacity: 0.25;
  transition: opacity 0.15s ease;
  text-decoration: none;
}
.footer__studio:hover { opacity: 0.6; }
.footer__reg {
  display: block;
  text-align: center;
  font-size: 0.58rem;
  color: var(--color-mist);
  opacity: 0.45;   /* was 0.25 en daarmee vrijwel onleesbaar */
  padding: 0.5rem 0 1.5rem;
  letter-spacing: 0.04em;
}

@media (max-width: 960px) {
  .footer__cols {
    grid-template-columns: 1fr 1fr;
    row-gap: 2.5rem;
  }
  .footer__trust-badge { padding: 0 1.25rem; }
}

@media (max-width: 640px) {
  .footer {
    padding-top: 3rem;
  }
  .footer__trust {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.6rem;
    padding-bottom: 2rem;
    margin-bottom: 2rem;
  }
  .footer__trust-badge {
    padding: 0;
    white-space: normal;
    align-items: flex-start;
  }
  .footer__trust-badge svg { margin-top: 0.15em; }
  .footer__cols {
    grid-template-columns: 1fr;
    row-gap: 2rem;
  }
  .footer__bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }
}
.footer__ta {
  margin-top: var(--space-sm);
  max-width: 320px;
}
.footer__ta img:hover {
  opacity: 0.8 !important;
}
.footer__ta iframe {
  max-width: 100% !important;
  border-radius: 4px;
}
.footer {
  --color-obsidian: #161513;
  --color-ash:      #f5f2e8;
  --color-mist:     #b0a99e;
  --color-gold:     var(--v2-gold-fill);
  background-color: #161513;
  border-top: 0;
  margin-top: 0;
  padding-top: 3.75rem;
}
.footer__trust,
.footer__bottom { border-color: rgba(255, 255, 255, 0.1); }
.footer__col-title { border-bottom-color: rgba(201, 168, 76, 0.25); }

/* Deze twee stonden in main.css in een opsomming samen met de navigatie en andere
   blokken. Daar blijven ze staan; hier zijn ze herhaald zodat de voettekst ook werkt
   op een pagina waar main.css niet geldt. */
.footer__links,
.footer__social,
.footer__ta ul,
.footer__ta li {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* De betaalregel onderin. Verhuisd uit main.css om dezelfde reden als de rest, en de
   inhoud zelf uit js/main.js naar partials/footer.html: statische tekst hoort in de
   opmaak, niet in een script dat de helft van de pagina's niet laadt. */
.pay-trust {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem 0.6rem;
  flex-wrap: wrap;
  font-family: var(--font-body);
  font-size: 0.72rem;
  line-height: 1;
  color: var(--color-mist);
}
.pay-trust svg { width: 12px; height: 12px; flex: none; color: var(--color-gold); }
.pay-trust__methods { color: var(--color-mist); letter-spacing: 0.01em; }