/* Additions for the static build. The original theme CSS (style.css, off-canvas.css,
   front-end.css) is unchanged apart from image paths. */

/* Home hero: YouTube background, replacing jquery.mb.YTPlayer. */
body.home .video_wrapper #bgndVideo {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
}
body.home .video_wrapper iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  /* Cover the 100vh hero at 16:9, oversized slightly to crop YouTube's own UI. */
  width: max(100vw, 177.78vh);
  height: max(100vh, 56.25vw);
  max-width: none; /* the theme caps iframes at 100% */
  transform: translate(-50%, -50%) scale(1.2);
  border: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1s ease;
}
body.home .video_wrapper iframe.is-playing {
  opacity: 1;
}

/* Form honeypot: invisible to people, tempting to bots. */
.gform_wrapper li.wd-hp {
  position: absolute !important;
  left: -10000px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.wd-form-noscript {
  color: #fff;
}

/* Keep the footer on the bottom edge of the viewport when a page is short.
   On the home page the viewport-high scrolling wrapper holds the content and footer
   directly; on inner pages they sit inside .site-container. Either way, lay the
   parent out as a flex column and let .site-inner take up the spare height. */
body.home .site-container-wrap,
.inner-page .site-container {
  display: flex;
  flex-direction: column;
}
.inner-page .site-container {
  min-height: 100%;
}
body.home .site-container-wrap > *,
.inner-page .site-container > * {
  flex-shrink: 0;
}
body.home .site-container-wrap > .site-inner,
.inner-page .site-container > .site-inner {
  flex-grow: 1;
  width: 100%; /* its auto side margins would otherwise shrink it to fit its content */
}
/* The theme's `.container { height: 100% }` resolves against the flexed footer height
   and shoves the copyright bar out of it; the footer's containers just wrap content. */
footer.footer .container {
  height: auto;
}