/*
Theme Name:   Wirtshaus Wolfsburg
Theme URI:    https://wirtshauswob.appdemoz.de
Description:  Child-Theme für Kadence. Enthält das Design-System des Wirtshauses (Palette, Typografie) sowie die wiederverwendbaren Bausteine aus dem Nachbau von wirtshausbs.de.
Author:       Damian Zur
Template:     kadence
Version:      1.3.1
Requires PHP: 7.4
Text Domain:  wirtshaus-child
*/

/* ============================================================
   INHALT
   0. Selbst gehostete Schriften
   1. Design-Tokens
   2. Grundtypografie
   3. Baustein 1 — Abschnitts-Header mit Wappen-Trenner
   4. Baustein 2 — Inset-Bildrahmen
   5. Baustein 3 — Parallax-Sektion mit Zackenrand
   6. Baustein 4 — Speisen-Zeile
   7. Baustein 5 — Button / CTA-Zeile
   8. Baustein 6 — Navigation mit Rauten-Trennern
   9. Hero mit Ken-Burns-Effekt
  10. Footer
  11. Hilfsklassen
  12. Reduced Motion
   ============================================================ */


/* ------------------------------------------------------------
   0. SELBST GEHOSTETE SCHRIFTEN
   Open Sans, Lora und Cookie liegen als woff2 im Theme unter
   assets/fonts/ und werden von hier geladen — NICHT von
   fonts.googleapis.com. Damit gibt es keine Verbindung zu Google
   und der Fall aus LG München I, 20.01.2022, Az. 3 O 17493/20
   entsteht gar nicht erst.

   Alle drei stehen unter der SIL Open Font License 1.1, dürfen
   also frei mitgeliefert werden. Bezogen über die npm-Pakete
   @fontsource/open-sans, @fontsource/lora und @fontsource/cookie.

   Subset: latin (enthält ä, ö, ü, ß).
   font-display: swap — Text ist sofort lesbar, die Schrift wird
   nachgeladen, kein unsichtbarer Text beim ersten Aufbau.

   WICHTIG: In Kadence unter Customizer → Typography KEINE dieser
   Schriften auswählen. Sonst lädt Kadence sie zusätzlich von
   Google und der externe Request ist wieder da. Systemstandard
   stehen lassen — die Zuweisung passiert hier über die Tokens.
   ------------------------------------------------------------ */
@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/open-sans-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Open Sans";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/open-sans-latin-400-italic.woff2") format("woff2");
}
@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/fonts/open-sans-latin-600-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/fonts/open-sans-latin-700-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Lora";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/lora-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Lora";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/lora-latin-400-italic.woff2") format("woff2");
}
@font-face {
  font-family: "Lora";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/fonts/lora-latin-700-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Cookie";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/cookie-latin-400-normal.woff2") format("woff2");
}


/* ------------------------------------------------------------
   1. DESIGN-TOKENS
   Werte ausgelesen aus den Computed Styles von wirtshausbs.de
   (27.07.2026). Diese Palette zusätzlich im Customizer unter
   Kadence → Colors hinterlegen, damit der Blockeditor sie kennt.
   ------------------------------------------------------------ */
:root {
  /* Farben */
  --wh-gold:        #A7781D;  /* Primär: Buttons, Links, Teaser-Headlines, Preise, Linien */
  --wh-gold-light:  #D3BC8E;  /* Navigation aktiv, Rauten-Trenner */
  --wh-cream:       #EBE4D5;  /* Flächenhintergrund, Hero-Bereich */
  --wh-dark:        #232323;  /* Navigationsleiste, Footer */
  --wh-ink:         #404040;  /* Fließtext */
  --wh-head:        #1E1E1E;  /* Display-Überschriften */
  --wh-orange:      #E68B1F;  /* Badge „LECKER" */
  --wh-amber:       #E3AD47;  /* Akzent, Hover */
  --wh-paper:       #FFFFFF;  /* Content-Flächen, Karten über Parallax */
  --wh-leader:      #CFC6B4;  /* Punktführungslinie in der Speisen-Zeile */

  /* Schriften.
     Cookie, Open Sans, Lora und Berkshire Swash in Kadence unter
     Customizer → Typography wählen UND unter General → Performance
     „Load Google Fonts Locally" aktivieren (DSGVO). */
  --wh-font-body:    "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --wh-font-display: "Cookie", "Snell Roundhand", "Brush Script MT", cursive;
  --wh-font-accent:  "Lora", Georgia, "Times New Roman", serif;
  --wh-font-fancy:   "Berkshire Swash", Georgia, serif;

  /* Typo-Skala.
     Cookie hat eine sehr kleine x-Höhe — 72px wirken wie ~40px
     einer normalen Schrift. Deshalb der große Wert. */
  --wh-size-display: clamp(2.75rem, 6.5vw, 4.5rem);   /* 44 – 72px */
  --wh-size-sub:     clamp(1.75rem, 3.6vw, 2.6rem);   /* 28 – 42px, Serif-Zwischenzeile */
  --wh-size-teaser:  clamp(1.05rem, 1.6vw, 1.25rem);  /* Teaser-Headline */
  --wh-size-body:    1rem;
  --wh-lh-body:      1.65;

  /* Rhythmus */
  --wh-space-section: clamp(3.5rem, 8vw, 6.5rem);
  --wh-space-block:   clamp(1.5rem, 3vw, 2.5rem);
  --wh-maxw:          1240px;

  /* Zackenrand */
  --wh-torn-h: 14px;
  --wh-torn-w: 28px;
  --wh-torn-color: var(--wh-paper);

  /* Bildrahmen */
  --wh-frame-inset: 10px;
}


/* ------------------------------------------------------------
   2. GRUNDTYPOGRAFIE
   ------------------------------------------------------------ */
body {
  font-family: var(--wh-font-body);
  font-size: var(--wh-size-body);
  line-height: var(--wh-lh-body);
  color: var(--wh-ink);
}

a { color: var(--wh-gold); }
a:hover, a:focus-visible { color: var(--wh-amber); }

/* Display-Überschriften. Klasse bewusst opt-in, damit Kadence-
   Defaults nicht global überschrieben werden. */
.wh-display {
  font-family: var(--wh-font-display);
  font-size: var(--wh-size-display);
  font-weight: 400;
  line-height: 1.05;
  color: var(--wh-head);
  text-transform: none;
  margin: 0;
}

/* Serif-Zwischenzeile, z. B. „Wir haben für Dich geöffnet!" */
.wh-sub {
  font-family: var(--wh-font-accent);
  font-size: var(--wh-size-sub);
  font-weight: 400;
  color: var(--wh-head);
  line-height: 1.2;
  text-align: center;
  margin: 0;
}
.wh-sub small {
  display: block;
  font-size: .46em;
  font-style: italic;
  margin-top: .35em;
  color: var(--wh-ink);
}


/* ------------------------------------------------------------
   3. BAUSTEIN 1 — ABSCHNITTS-HEADER MIT WAPPEN-TRENNER
   Markup:
   <div class="wh-section-head">
     <h2 class="wh-display">…</h2>
     <div class="wh-divider"><span class="wh-divider__mark"></span></div>
   </div>
   ------------------------------------------------------------ */
.wh-section-head { text-align: center; }

.wh-divider {
  display: flex;
  align-items: center;
  gap: clamp(14px, 3vw, 26px);
  max-width: var(--wh-maxw);
  margin: clamp(.75rem, 2vw, 1.35rem) auto 0;
}
.wh-divider::before,
.wh-divider::after {
  content: "";
  flex: 1 1 0;
  height: 1px;
  background: var(--wh-gold);
}
.wh-divider__mark {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  background: url("assets/img/wappen.svg") center / contain no-repeat;
}
/* Variante ohne Wappen: reine Linie */
.wh-divider--plain .wh-divider__mark { display: none; }
.wh-divider--plain { gap: 0; }


/* ------------------------------------------------------------
   4. BAUSTEIN 2 — INSET-BILDRAHMEN
   Dünne weiße Linie innerhalb des Bildes, kein Rand am Bildrand.
   Auf das Bild-Block-Wrapper anwenden: <figure class="wp-block-image wh-framed">
   ------------------------------------------------------------ */
.wh-framed { position: relative; }
.wh-framed img { display: block; width: 100%; height: auto; }
.wh-framed::after {
  content: "";
  position: absolute;
  inset: var(--wh-frame-inset);
  border: 1px solid rgba(255, 255, 255, .85);
  pointer-events: none;
}
/* Auf hellen Bildern besser lesbar */
.wh-framed--dark::after { border-color: rgba(0, 0, 0, .35); }

/* Bildunterschrift des Blocks nicht mitrahmen */
.wh-framed figcaption { position: relative; z-index: 1; }


/* ------------------------------------------------------------
   5. BAUSTEIN 3 — PARALLAX-SEKTION MIT ZACKENRAND
   Markup:
   <div class="wh-parallax wh-torn" style="--wh-parallax-img:url(…)">
     <div class="wh-card">…</div>
   </div>

   Das Bild kommt über die Variable --wh-parallax-img, NICHT über
   background-image. Grund: darüber liegt fest eine dunkle Abdunklung,
   damit die weiße Überschrift auf jedem Bild lesbar bleibt. Stärke
   über --wh-parallax-dim justierbar (0 = aus, .42 = Standard).
   ------------------------------------------------------------ */
.wh-parallax {
  position: relative;
  background-image:
    linear-gradient(rgba(0, 0, 0, var(--wh-parallax-dim, .42)),
                    rgba(0, 0, 0, var(--wh-parallax-dim, .42))),
    var(--wh-parallax-img, none);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-color: var(--wh-head);   /* Fallback, solange kein Bild gesetzt ist */
  padding-block: calc(var(--wh-space-section) + var(--wh-torn-h));
}

/* Inhalte in der Parallax-Sektion liegen auf dunklem Grund */
.wh-parallax .wh-display,
.wh-parallax .wh-sub { color: #fff; }

/* Das Wappen ist dunkel gezeichnet — auf dunklem Grund weiß einfärben */
.wh-parallax .wh-divider__mark { filter: brightness(0) invert(1); }

/* Auf dunklem Grund trägt das kräftige Gold zu wenig — helle Variante */
.wh-parallax .wh-divider::before,
.wh-parallax .wh-divider::after { background: var(--wh-gold-light); }
/* iOS und Android ignorieren background-attachment:fixed teilweise
   bzw. rendern es fehlerhaft — auf Touch/klein sauber abschalten. */
@media (max-width: 1024px), (hover: none) {
  .wh-parallax { background-attachment: scroll; }
}

/* Gezackte Kanten oben und unten.
   Farbe kommt aus --wh-torn-color, die Form aus der Maske. */
.wh-torn { position: relative; }
.wh-torn::before,
.wh-torn::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: var(--wh-torn-h);
  background: var(--wh-torn-color);
  z-index: 2;
  pointer-events: none;
}
.wh-torn::before {
  top: 0;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='14'%3E%3Cpath d='M0 0 L14 14 L28 0 Z' fill='%23000'/%3E%3C/svg%3E") repeat-x top center / var(--wh-torn-w) var(--wh-torn-h);
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='14'%3E%3Cpath d='M0 0 L14 14 L28 0 Z' fill='%23000'/%3E%3C/svg%3E") repeat-x top center / var(--wh-torn-w) var(--wh-torn-h);
}
.wh-torn::after {
  bottom: 0;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='14'%3E%3Cpath d='M0 14 L14 0 L28 14 Z' fill='%23000'/%3E%3C/svg%3E") repeat-x bottom center / var(--wh-torn-w) var(--wh-torn-h);
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='14'%3E%3Cpath d='M0 14 L14 0 L28 14 Z' fill='%23000'/%3E%3C/svg%3E") repeat-x bottom center / var(--wh-torn-w) var(--wh-torn-h);
}
/* Nur oben bzw. nur unten */
.wh-torn--top-only::after,
.wh-torn--bottom-only::before { display: none; }

/* Weiße Content-Karte über dem Parallax-Bild */
.wh-card {
  background: var(--wh-paper);
  padding: clamp(1.75rem, 4vw, 3.25rem);
  position: relative;
  z-index: 1;
}


/* ------------------------------------------------------------
   6. BAUSTEIN 4 — SPEISEN-ZEILE
   Markup:
   <p class="wh-badge">Lecker</p>
   <p class="wh-dish">
     <span class="wh-dish__name">Ganze knusprig gebratene Riesenschweinshaxe</span>
     <span class="wh-dish__leader"></span>
     <span class="wh-dish__price">€24,90</span>
   </p>
   ------------------------------------------------------------ */
.wh-badge {
  display: inline-block;
  background: var(--wh-orange);
  color: #fff;
  font-family: var(--wh-font-body);
  font-size: .69rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  line-height: 1;
  padding: 5px 9px;
  margin: 0 0 .6rem;
  border-radius: 2px;
}

.wh-dish {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  margin: 0 0 .5rem;
}
.wh-dish__name {
  font-weight: 700;
  color: var(--wh-head);
}
.wh-dish__leader {
  flex: 1 1 40px;
  min-width: 30px;
  border-bottom: 2px dotted var(--wh-leader);
  transform: translateY(-.3em);
}
.wh-dish__price {
  color: var(--wh-gold);
  font-weight: 700;
  white-space: nowrap;
}
.wh-dish + p { margin-top: 0; }


/* ------------------------------------------------------------
   7. BAUSTEIN 5 — BUTTON UND CTA-ZEILE
   Der Button wird links und rechts von je einer dünnen goldenen
   Linie flankiert. Auf einen core/buttons-Block anwenden.
   ------------------------------------------------------------ */
.wh-btn .wp-block-button__link,
a.wh-btn,
.wh-btn-solid {
  background-color: var(--wh-gold);
  color: #fff;
  font-family: var(--wh-font-accent);
  font-style: italic;
  font-size: 1.0625rem;
  font-weight: 400;
  line-height: 1.2;
  padding: 13px 34px;
  border: 0;
  border-radius: 0;
  text-decoration: none;
  display: inline-block;
  transition: background-color .18s ease;
}
.wh-btn .wp-block-button__link:hover,
.wh-btn .wp-block-button__link:focus-visible,
a.wh-btn:hover,
a.wh-btn:focus-visible {
  background-color: var(--wh-head);
  color: #fff;
}

/* Zeile mit flankierenden Linien */
.wh-cta {
  display: flex;
  align-items: center;
  gap: clamp(14px, 3vw, 28px);
  justify-content: center;
}
.wh-cta::before,
.wh-cta::after {
  content: "";
  flex: 1 1 0;
  height: 1px;
  background: var(--wh-gold);
}
/* Kadence/Gutenberg setzt bei core/buttons ggf. eigene Flex-Regeln */
.wh-cta.wp-block-buttons { flex-wrap: nowrap; }
@media (max-width: 540px) {
  .wh-cta::before, .wh-cta::after { display: none; }
}


/* ------------------------------------------------------------
   8. BAUSTEIN 6 — NAVIGATION MIT RAUTEN-TRENNERN
   Dunkle Leiste, cremefarbene kursive Links, goldene Rauten.
   Im Kadence-Header-Builder der Navigation die CSS-Klasse
   „wh-nav" geben (Customizer → Header → Navigation → Advanced),
   oder die Body-Klasse-Variante weiter unten nutzen.
   ------------------------------------------------------------ */
.wh-nav,
.wh-nav .header-navigation-layout-standard {
  background-color: var(--wh-dark);
}
.wh-nav .menu > li > a,
.wh-nav .header-navigation ul li a {
  font-family: var(--wh-font-accent);
  font-style: italic;
  font-size: 1.0625rem;
  color: var(--wh-cream);
  text-transform: none;
  letter-spacing: 0;
}
.wh-nav .menu > li.current-menu-item > a,
.wh-nav .menu > li > a:hover,
.wh-nav .menu > li > a:focus-visible {
  color: var(--wh-gold-light);
}

/* Rauten zwischen den Punkten. Liegt auf dem li, damit es auch
   bei Kadences Flex-Menü sauber sitzt. */
.wh-nav .menu > li + li {
  position: relative;
}
.wh-nav .menu > li + li::before {
  content: "\25C6";              /* ◆ */
  position: absolute;
  left: calc(var(--wh-nav-gap, 1.35rem) * -.5);
  top: 50%;
  transform: translate(-50%, -50%);
  color: var(--wh-gold-light);
  font-size: .6rem;
  font-style: normal;
  line-height: 1;
  pointer-events: none;
}
/* Auf Mobil (Off-Canvas) keine Rauten */
@media (max-width: 1024px) {
  .wh-nav .menu > li + li::before { display: none; }
}

/* --- Kadence-Header direkt treffen -------------------------------
   Ohne dass im Customizer eine CSS-Klasse gesetzt werden muss.
   Kadence rendert die Hauptnavigation als
   nav.header-navigation > .primary-menu-container > ul#primary-menu
   Die Vorlage hat Logo auf Creme über einer dunklen Navileiste;
   das ließe sich nur mit dem Header-Builder exakt nachbauen
   (Navigation in die Bottom-Row ziehen). Bis dahin: eine
   durchgehend dunkle Kopfleiste — gleiche Farben, gleiche Schrift,
   gleiche Rauten-Trenner.
   ----------------------------------------------------------------- */
#masthead .site-header-row-container-inner,
#masthead .site-header-main-section-left,
#masthead .site-header-main-section-right {
  background-color: var(--wh-dark);
}

#masthead .site-title,
#masthead .site-title a,
#masthead .site-branding a {
  font-family: var(--wh-font-accent);
  font-style: italic;
  font-weight: 400;
  color: var(--wh-cream);
}
#masthead .site-title a:hover { color: var(--wh-gold-light); }

#primary-menu > li > a,
.header-navigation .menu > li > a {
  font-family: var(--wh-font-accent);
  font-style: italic;
  font-weight: 400;
  font-size: 1.0625rem;
  color: var(--wh-cream);
  text-transform: none;
  letter-spacing: 0;
}
#primary-menu > li.current-menu-item > a,
#primary-menu > li.current_page_item > a,
#primary-menu > li > a:hover,
#primary-menu > li > a:focus-visible,
.header-navigation .menu > li.current-menu-item > a,
.header-navigation .menu > li > a:hover {
  color: var(--wh-gold-light);
}

/* Rauten-Trenner zwischen den Menüpunkten */
#primary-menu > li + li { position: relative; }
#primary-menu > li + li::before {
  content: "\25C6";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translate(-50%, -50%);
  color: var(--wh-gold-light);
  font-size: .55rem;
  font-style: normal;
  line-height: 1;
  pointer-events: none;
}

/* Kadence zeichnet unter aktiven Punkten eine Linie — stört hier */
#primary-menu > li > a::after,
.header-navigation-style-underline .menu > li > a::after { display: none !important; }

/* Mobil: Burger und Off-Canvas in denselben Farben, keine Rauten */
@media (max-width: 1024px) {
  #primary-menu > li + li::before { display: none; }
  #masthead .menu-toggle-open,
  #masthead .menu-toggle-open .menu-toggle-icon { color: var(--wh-cream); }
}


/* ------------------------------------------------------------
   9. HERO MIT KEN-BURNS-EFFEKT
   Ersetzt den Slider-Revolution-Hero der Vorlage.
   Auf einen core/cover-Block anwenden.
   ------------------------------------------------------------ */
.wh-hero { overflow: hidden; }
.wh-hero .wp-block-cover__image-background,
.wh-hero .wp-block-cover__video-background,
.wh-hero .wh-hero__img {
  animation: wh-kenburns 24s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes wh-kenburns {
  from { transform: scale(1)    translate3d(0, 0, 0); }
  to   { transform: scale(1.12) translate3d(-1.5%, -1%, 0); }
}

.wh-hero .wh-hero__title {
  font-family: var(--wh-font-display);
  font-size: var(--wh-size-display);
  font-weight: 400;
  line-height: 1.05;
  color: #fff;
  text-shadow: 0 2px 18px rgba(0, 0, 0, .45);
  margin: 0;
}


/* ------------------------------------------------------------
   10. FOOTER
   Drei Spalten: Parkplätze · Kontakt · Öffnungszeiten
   ------------------------------------------------------------ */
.wh-footer {
  background: var(--wh-dark);
  color: var(--wh-cream);
}
.wh-footer h2,
.wh-footer h3,
.wh-footer .wh-footer__title {
  font-family: var(--wh-font-accent);
  font-size: 1.35rem;
  font-style: italic;
  color: var(--wh-gold-light);
  margin: 0 0 .65rem;
}
.wh-footer a { color: var(--wh-gold-light); }
.wh-footer a:hover, .wh-footer a:focus-visible { color: #fff; }

/* Drei Spalten, gespeist aus den Widget-Bereichen Footer 1–3 */
.wh-footer { padding-block: clamp(2.5rem, 5vw, 4rem); }
.wh-footer__inner {
  max-width: var(--wh-maxw);
  margin-inline: auto;
  padding-inline: 24px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 4vw, 3.25rem);
}
@media (max-width: 860px) {
  .wh-footer__inner { grid-template-columns: 1fr; }
}
.wh-footer__col p { margin: 0 0 .75rem; font-size: .95rem; }
.wh-footer__col :last-child { margin-bottom: 0; }
.wh-footer .widget { margin: 0; }

/* Kadences eigene Fußzeile darunter in denselben Farben */
#colophon,
#colophon .site-bottom-footer-wrap,
#colophon .site-footer-row-container-inner { background-color: var(--wh-dark); }
#colophon,
#colophon .site-info { color: var(--wh-cream); font-size: .9rem; }
#colophon a { color: var(--wh-gold-light); }
#colophon a:hover { color: #fff; }


/* ------------------------------------------------------------
   11. HILFSKLASSEN
   ------------------------------------------------------------ */
.wh-bg-cream { background-color: var(--wh-cream); }
.wh-bg-dark  { background-color: var(--wh-dark); color: var(--wh-cream); }
.wh-bg-paper { background-color: var(--wh-paper); }

.wh-teaser-title {
  font-family: var(--wh-font-accent);
  font-style: italic;
  font-size: var(--wh-size-teaser);
  line-height: 1.35;
  color: var(--wh-gold);
  text-align: center;
  margin: 1rem 0 .6rem;
}
.wh-center { text-align: center; }
.wh-section { padding-block: var(--wh-space-section); }
.wh-narrow  { max-width: 780px; margin-inline: auto; }


/* ------------------------------------------------------------
   12. REDUCED MOTION
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .wh-hero .wp-block-cover__image-background,
  .wh-hero .wp-block-cover__video-background,
  .wh-hero .wh-hero__img {
    animation: none;
  }
  .wh-parallax { background-attachment: scroll; }
}