/*
 * De Craft-site begon met "<!DOCTYPE html lang="nl">". Door het extra attribuut
 * zet de browser die pagina's in quirks mode; React/Next schrijven altijd een
 * correcte <!DOCTYPE html> (standards mode). Het zichtbare verschil zit vooral in
 * de "blocks ignore line-height"-quirk: in quirks mode telt de regelhoogte van een
 * blok niet mee als het alleen inline-elementen bevat (iconen, sterren, knoppen).
 * Deze regels bootsen dat na op de plekken waar het verschil gaf.
 */

/* Blokken met alleen een svg/inline-elementen: regel = hoogte van de inhoud */
.reisgegevens-tabel .icon,
.rating:not(.reis-prijsPerPersoon):not(.reis-totaalprijs),
.tooltip-trigger,
footer a.social-icon,
.gegeven-row .title-wrapper,
.price-per-person,
.price-total,
.slick-dots {
  line-height: 0;
}

/* UA-stylesheet in quirks mode: form { margin-bottom: 1em } */
form {
  margin-bottom: 1em;
}

/* Alleen een <span style="font-size:.8rem"> in het blok */
footer .d-flex.flex-row > .col-auto {
  font-size: 0.8rem;
}

/* Geen ruimte onder inline-block formuliervelden/labels (zoals in quirks mode) */
.field .input textarea,
.field.optin .input label {
  vertical-align: top;
}

/* Een leeg inline-block telt in quirks mode niet mee voor de regelhoogte */
.reisgegevens-tabel .gegeven-row .title-wrapper > h5:empty {
  display: none !important;
}

/* /reservering-zijbalk: in quirks mode telt de lege regel na de prijs niet mee */
.sidebar.reis-informatie .reisgegevens-tabel .reisgegevens-tabel-wrapper .gegeven-row.prijsPerPersoon > span {
  display: block;
}

/* Deelknoppen naast "Reisbeschrijving": regelafstand zoals in quirks mode (mobiel loopt het door op 2 regels) */
.r-beschrijving h2 .ml-auto {
  line-height: 37px;
  margin-bottom: -4px;
  position: relative;
  top: 1px;
}

/*
 * De slogan in nav en footer is een <img> i.p.v. een inline svg (scheelt 2x 14 kB per
 * pagina). Een <img> met vaste hoogte rekt mee in de breedte; een svg schaalt met
 * behoud van verhouding en centreert (preserveAspectRatio meet). object-fit doet hetzelfde.
 */
.headerPayOff,
footer .copyright .slogan img {
  object-fit: contain;
}
footer .copyright .slogan img {
  width: 100%;
}
@media only screen and (max-width: 768px) {
  footer .copyright .slogan img {
    width: auto;
    max-width: 100%;
  }
}

/*
 * "Of bericht Hans direct op ..." stond inline op wit. Dat is alleen leesbaar in de donkere
 * sticky kopie van de balk (.duplicate, gemaakt door scripts-reis.js); in de lichte balk
 * bovenaan was het onzichtbaar (wit op #f5f5f5).
 */
.reservation-bar a[href^="tel:"] {
  color: #252947;
}
.reservation-bar.duplicate a[href^="tel:"] {
  color: #fff;
}