/* Hand-written fixes on top of the CSS captured from the live site for the legacy pages. The old theme resized
   embedded videos with JavaScript; keep them 16:9 and never wider than their column with CSS alone. */
body.jth-legacy-page iframe[src*="vimeo.com"],
body.jth-legacy-page iframe[src*="youtube.com"],
body.jth-legacy-page iframe[src*="youtube-nocookie.com"] { max-width: 100%; height: auto; aspect-ratio: 16 / 9; }

/* Wait list: the old theme shrinks the embedded Google Form on phones with JavaScript (measured: 830px at 390px wide). */
@media (max-width: 767px) { body.jth-legacy-page .cancellation-box iframe { height: 830px !important; } }

/* The old theme is "boxed": page content is capped at 1600px and centred on wider screens (the sand body shows either side). */
body.jth-legacy-page #main { max-width: 1600px; margin-left: auto; margin-right: auto; }

/* The old theme's accordions draw their +/- with the FontAwesome icon font. */
@font-face {
  font-family: "FontAwesome";
  src: url("../fonts/fontawesome-webfont.woff2") format("woff2"), url("../fonts/fontawesome-webfont.woff") format("woff");
  font-weight: normal; font-style: normal; font-display: swap;
}
/* Bootstrap's collapse (its stylesheet isn't loaded): closed panels hidden, open ones shown. */
body.jth-legacy-page .panel-collapse.collapse { display: none; }
body.jth-legacy-page .panel-collapse.collapse.in { display: block; }

/* "At Home in Joshua Tree" hero: live's photo only fills the top 600px of its 800px-tall column, so the picture appears to be cut
   off with a band of empty beige under it (and on tablets/phones it disappears completely). Let it fill its whole column, and
   give it a proper height when the columns stack. */
body.jth-legacy-page .athome-book_hero-image { display: flex; }
body.jth-legacy-page .athome-book_hero-image > .fw-wrap-col-inner { flex: 1 1 100%; }
@media (max-width: 991px) {
  body.jth-legacy-page .athome-book_hero-image { display: block; min-height: 0; }
  body.jth-legacy-page .athome-book_hero-image > .fw-wrap-col-inner { height: 62vw; min-height: 320px; max-height: 560px; background-position: center; }
}