/**
 * SEO fixes: gedemoteerde mobiele koppen.
 *
 * De mobiele header-varianten zijn van <h1> naar <p class="... h1"> omgezet
 * zodat elke pagina precies één H1 heeft. De theme-CSS target die koppen op
 * element (h1) binnen hun context; deze regels spiegelen die styling voor
 * de p-varianten. Zie inc/recipe-schema.php voor de bijbehorende schema-fix.
 */

.navbar-search p.display-4 {
  font-size: 3.5rem;
  color: #000;
  margin-bottom: 5.5rem;
  font-family: Lora, serif;
  font-weight: 400;
  line-height: 1.2;
}

@media (max-width: 767.98px) {
  .navbar-search p.display-4 {
    font-size: 2rem;
    font-weight: 500;
  }
}

.entry-header .header-mobile .header-mobile-content p.h1 {
  color: #fff;
  font-size: 1.5rem;
  line-height: 1.5rem;
}

.entry-header.single-header .header-image .mobile-content-wrapper .container p.h1 {
  color: #fff;
  font-size: 1.5rem;
  line-height: 1.5rem;
  font-weight: 400;
}

.header-image-slider .mobile-content-wrapper .content p.h1 {
  color: #fff;
  font-size: 1.5rem;
  line-height: 1.5rem;
}

/**
 * CLS-fix homepage header-slider.
 *
 * .header-image-slider staat absoluut (rechterhelft); de bloklengte komt van
 * .js-header-content die pas via JS (setHeaderHeight) de sliderhoogte krijgt.
 * Daardoor verschoof alle content eronder na het laden (CLS 0.13). Deze regels
 * reserveren dezelfde hoogte direct in CSS: sliderhoogte = 50vw x padding-top
 * van de slide (75% / 100% / 150% per breakpoint). JS zet daarna dezelfde
 * waarde en veroorzaakt geen shift meer. Onder 768px is de content-wrapper
 * d-none en heeft de slider een vaste 85vh, dus daar is niets nodig.
 */

@media (min-width: 768px) and (max-width: 992px) {
  .block-header-slider .js-header-content { height: 75vw; }
}

@media (min-width: 993px) and (max-width: 1199px) {
  .block-header-slider .js-header-content { height: 50vw; }
}

@media (min-width: 1200px) {
  .block-header-slider .js-header-content { height: 37.5vw; }
}