.error {
  color: red;
}

/* Facts block (includes/facts-block.blade.php) */
.facts-list {
  margin: 0 0 20px 0;
}

.facts-list dt {
  font-weight: 700;
  margin-top: 10px;
}

.facts-list dd {
  margin: 0;
}

/*
 * Heading structure (SEO 2.1): the page title moved from <h2> to <h1> and the
 * subtitle from <h3> to <h2>, so every public page has exactly one <h1>. The
 * Webflow bundle styles headings per element (h1 38px/44px, h2 32px/36px,
 * h3 24px/30px), so these two rules keep the typography the old elements had.
 * The font-size of the title itself already comes from .vivaldi (40px). The
 * font-family is not repeated here: the Vivaldi face was taken off the h2
 * element in the Webflow bundle itself, so every h2 already uses the body font.
 */
h1.vivaldi {
  line-height: 36px;
}

h2.page-subheading {
  font-size: 24px;
  line-height: 30px;
}

/*
 * Images that carry their intrinsic width and height as attributes.
 *
 * The attributes let the browser reserve the right amount of space before the
 * file arrives, which is what keeps the page from jumping while it loads. The
 * Webflow bundle caps images with `img { max-width: 100% }` but never sets
 * `height: auto`, so on a screen narrower than the image the width shrank while
 * the height attribute held: the picture came out squashed. That is what made
 * the attributes look like the problem. They were not — this rule is what was
 * missing, and with it the dimensions can stay.
 */
.uitje-image,
.content-image,
.brand-image,
.slider-room-image {
  height: auto;
}

/*
 * Heading structure (GEO round 2): three pages skipped levels — rooms went
 * h2 -> h5, surroundings h2 -> h4, arrangements h1 -> h3 -> h5. A heading level
 * is the boundary a reader, a screen reader and a language model all use to tell
 * where a section starts and what it belongs to, and a skipped level leaves a
 * block without a parent.
 *
 * Only the element changed; the Webflow bundle styles headings per element, so
 * these two rules carry the old element's typography over verbatim. Both are
 * scoped to the block the heading already sits in, so no class had to be added
 * to the markup, and both outrank the bare element rules they replace.
 */

/* Was <h5>: the coloured band above a price or spec list. */
.specs-header-blok h3,
.specs-header-blok h4 {
  margin-top: 0;
  margin-bottom: 20px;
  padding: 10px 0 10px 10px;
  font-family: Verdana, Geneva, sans-serif;
  color: #fff;
  font-size: 15px;
  line-height: 20px;
  font-weight: 400;
  letter-spacing: 1px;
  text-transform: uppercase;
}

@media screen and (max-width: 479px) {
  .specs-header-blok h3,
  .specs-header-blok h4 {
    padding-right: 10px;
  }
}

/*
 * Was <h3>: the slogan on the second homepage slide. It sat above the <h1> in
 * document order, so the page opened on a heading that names no section — a
 * tagline, not a level in the outline. It is a paragraph now, and these rules
 * repeat what the h3 element gave it, including the steps down per breakpoint.
 */
.slide-heading {
  margin-top: 0;
  margin-bottom: 10px;
  font-family: Verdana, Geneva, sans-serif;
  color: #d67013;
  font-size: 24px;
  line-height: 30px;
  font-weight: 400;
}

@media screen and (max-width: 991px) {
  .slide-heading {
    font-size: 18px;
  }
}

@media screen and (max-width: 767px) {
  .slide-heading {
    margin-bottom: 5px;
    font-size: 17px;
  }
}

@media screen and (max-width: 479px) {
  .slide-heading {
    margin-bottom: 5px;
    font-size: 13px;
    line-height: 24px;
  }
}

/*
 * Was <h5>: the two footer section headings, which appear on every page and so
 * put an h3 -> h5 jump at the bottom of all six of them. They are top level
 * sections of their own, which makes h2 the level that fits.
 *
 * The Webflow class name still says h5. It records which element the styling came
 * from, not which element carries it; renaming it would mean editing the exported
 * bundle. These declarations spell the result out in full — the bare h5 rule the
 * class used to lean on no longer applies.
 */
.footer-heading-h5 {
  margin-top: 0;
  margin-bottom: 0;
  padding: 10px 0;
  font-family: Verdana, Geneva, sans-serif;
  color: #fff;
  font-size: 15px;
  line-height: 20px;
  font-weight: 400;
  letter-spacing: 1px;
  text-transform: uppercase;
}

/* Was <h4>: the name of a day trip on the surroundings page. */
.dagje-uit-block h3 {
  margin-top: 0;
  margin-bottom: 10px;
  font-family: Verdana, Geneva, sans-serif;
  color: #630d0e;
  font-size: 18px;
  line-height: 24px;
  font-weight: 400;
}

/* FAQ block (includes/faq-block.blade.php) */
.faq-list {
  margin: 0 0 20px 0;
}

.faq-item {
  margin-bottom: 15px;
}

.faq-question {
  font-size: 18px;
  line-height: 24px;
  margin-top: 0;
  margin-bottom: 5px;
}

.faq-answer {
  margin: 0;
}

/*
 * Fact cards (includes/facts-cards.blade.php).
 *
 * The location block used to be a dl and moved to cards with four entries in two
 * rows of two. Everything visual comes from .cta-home-block and .cta-column in
 * the Webflow bundle and from the bare h4 rule, exactly as the highlights block
 * on the homepage does; these two rules only take the browser's default
 * paragraph margins off the value, the same thing .facts-list dd does for the
 * list version.
 */
.facts-card p {
  margin: 0;
}

.facts-cards .w-row:last-child .facts-card {
  margin-bottom: 0;
}