/* 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; }

/* ---------- Niet de voettekst, maar wel site-breed ----------
 *
 * Dubbel tikken op een knop of veld zoomt op iOS de pagina in in plaats van de knop te
 * gebruiken. In een boekflow is dat een echte misser: wie snel twee keer op Continue tikt
 * krijgt een zoom. `manipulation` schakelt alleen die dubbeltik-zoom uit op deze elementen.
 * Knijpen om in te zoomen blijft werken, en dubbel tikken op gewone tekst ook, dus wie
 * slecht ziet verliest niets.
 *
 * Waarom hier en niet in main.css: dit bestand is het enige dat elke pagina gewoon laadt,
 * zonder media-truc. main.css is op de homepage en de vijf trekpagina's inert (zie de kop
 * van dit bestand), dus daar zou de regel niet werken.
 *
 * Niet gedekt, en dat is geen probleem: /book draagt zijn eigen kopie (het laadt geen enkel
 * gedeeld stylesheet), en /booking-thanks plus de twee prep-kit-pagina's hebben geen
 * bediening waar een misgetikte dubbeltik geld kost.
 *
 * Gevraagd door Pares op 17 sep 2026, nadat de zoom bij het focussen van een veld al was
 * verholpen (dat was font-size 15px, nu 16px in book.html).
 */
a,
button,
input,
select,
textarea,
label,
summary,
[role="button"] {
  touch-action: manipulation;
}

/* Het colofon onderaan de artikelpagina's: wie de pagina heeft nagekeken en wanneer. Staat
 * na de veelgestelde vragen en vóór de call to action, de plek waar een lezer een datum
 * verwacht. Eerst stond hij in de hero, maar die draagt al een kop, een intro en drie chips;
 * een vierde element maakte er een opsomming van en duwde de eerste alinea onder de vouw.
 *
 * `html.v2` ervoor is geen opsmuk maar noodzaak: zonder dat wint de alineastijl van de
 * artikeltekst en staat deze regel op 16px, even groot als de tekst erboven. Dat is op
 * 17 sep 2026 twee keer misgegaan, hier en bij de valuta-noot op de kostenpagina.
 *
 * De datum wordt onderhouden door `node scripts/release.mjs sitemap`, uit dezelfde bron als
 * de sitemap-lastmod en dateModified: de laatste commit die de pagina raakte. Schrijf hem
 * nooit met de hand, dan verjaart hij.
 */
html.v2 .byline {
  margin: 0;
  padding: 22px 0 0;
  border-top: 1px solid rgba(115, 107, 97, .22);
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--color-mist, #736b61);
  max-width: 62ch;
}
html.v2 .byline a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }