/*
 * Custom overrides for the BHF theme (folder: noevents).
 *
 * This file is enqueued in functions.php (handle "bhf-custom") and loads AFTER
 * the compiled production stylesheet (css/production/index-*.css, linked in
 * header.php) and after style.css — so rules here win the cascade.
 *
 * Use this for home-page layout/style changes while the original Sass source
 * (the "bhf-2018" build project) isn't available. Once that source is
 * recovered, changes can move back into the real build.
 */

/* --- Home page --- */

/* Shared box-sizing safety (in case the base build doesn't set it globally). */
.bhf-announcement-banner,
.bhf-why-inner,
.bhf-ownership-inner,
.bhf-ownership-media,
.bhf-ownership-img { box-sizing: border-box; }


/* ============================================================
 * Announcement banner (header.php) — sits above the site header
 * ============================================================ */
.bhf-announcement-banner {
  width: 100%;
  background: #2b6ca3;
  color: #fff;
  font-family: 'Open Sans', sans-serif;
  font-weight: 600;
  font-size: 15px;
  line-height: 1.4;
  text-align: center;
  padding: 15px 30px;
}
.bhf-announcement-banner-link {
  color: #fff;
  text-decoration: underline;
  font-weight: 700;
  transition: color 0.15s ease;
}
/* Stay white in every non-hover state — the theme's a:visited / a:focus rules
   would otherwise recolor the link once it's been clicked or focused. */
.bhf-announcement-banner-link:link,
.bhf-announcement-banner-link:visited,
.bhf-announcement-banner-link:focus {
  color: #fff;
}
.bhf-announcement-banner-link:hover {
  color: #cfe4f5;
}


/* ============================================================
 * Home: "Why We're Here"
 * ============================================================ */
.bhf-why {
  width: 100%;
  background: #fff;
}
.bhf-why-inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: 88px 30px 0;
}
.bhf-why-title {
  margin: 0 0 24px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  color: #1c3d5a;
  font-size: 38px;
  line-height: 1.08;
  letter-spacing: -0.3px;
}
.bhf-why-lead {
  margin: 0 0 16px;
  max-width: 760px;
  font-family: 'Open Sans', sans-serif;
  font-weight: 700;
  color: #1c3d5a;
  font-size: 21px;
  line-height: 1.5;
}
.bhf-why-body {
  margin: 0;
  max-width: 760px;
  font-family: 'Open Sans', sans-serif;
  font-weight: 400;
  color: #555;
  font-size: 16.5px;
  line-height: 1.7;
}
.bhf-why-body u { text-decoration: underline; }


/* ============================================================
 * Home: "Owning a business starts with knowing how" (Starter U)
 * ============================================================ */
.bhf-ownership {
  width: 100%;
  background: #fff;
}
.bhf-ownership-inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: 64px 30px 40px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}
.bhf-ownership-media {
  width: 100%;
  aspect-ratio: 4 / 3;
}
.bhf-ownership-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.bhf-ownership-title {
  margin: 0 0 24px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  color: #1c3d5a;
  font-size: 38px;
  line-height: 1.08;
  letter-spacing: -0.3px;
}
.bhf-ownership-body {
  margin: 0 0 32px;
  font-family: 'Open Sans', sans-serif;
  font-weight: 400;
  color: #555;
  font-size: 16.5px;
  line-height: 1.7;
}
.bhf-ownership-cta {
  display: inline-block;
  background: #1c3d5a;
  color: #fff;
  font-family: 'Open Sans', sans-serif;
  font-weight: 600;
  font-size: 16px;
  padding: 15px 30px;
  border-radius: 4px;
  text-decoration: none;
  transition: background-color 0.15s ease;
}
/* Keep white text + base background in every non-hover state (beats the theme's
   a:visited / a:focus rules after the button has been clicked or focused). */
.bhf-ownership-cta:link,
.bhf-ownership-cta:visited,
.bhf-ownership-cta:focus {
  color: #fff;
  background: #1c3d5a;
  text-decoration: none;
}
.bhf-ownership-cta:hover {
  background: #2c588a;
  color: #fff;
}


/* ============================================================
 * Homepage hero + announcement banner
 * The feature-image hero is position:absolute; top:0; height:<68/90/100>vh, and
 * .homepage-wrap reserves room for it with padding-top: calc(<vh> - 77px) — a value
 * that assumes ONLY the 77px header sits above it. The announcement banner adds its
 * own height above that. So: (1) lift the banner above the absolute hero with
 * z-index (otherwise the hero paints over it and hides it), and (2) subtract the
 * banner's height from the hero padding so "Why We're Here" still tucks directly
 * under the hero. The banner wraps to different heights by viewport width, so its
 * rendered height is published as --bhf-banner-h by a small script (see
 * functions.php); the per-breakpoint fallbacks approximate it before/without JS.
 * Only applies when the feature-image hero is present (.post-feature-image-pad).
 * ============================================================ */
.home:has(.post-feature-image-pad) .bhf-announcement-banner {
  position: relative;
  z-index: 30;
}
.home:has(.post-feature-image-pad) .homepage-wrap.post-feature-image-pad {
  padding-top: calc(68vh - 77px - var(--bhf-banner-h, 93px));
}
@media (min-width: 23.5rem) {
  .home:has(.post-feature-image-pad) .homepage-wrap.post-feature-image-pad {
    padding-top: calc(90vh - 77px - var(--bhf-banner-h, 72px));
  }
}
@media (min-width: 52rem) {
  .home:has(.post-feature-image-pad) .homepage-wrap.post-feature-image-pad {
    padding-top: calc(100vh - 77px - var(--bhf-banner-h, 51px));
  }
}


/* The "Owning a Business" section already provides bottom spacing, so drop the
   Main Feature slider's large top margin (lg-mt6 ≈ 80px) on the homepage — the two
   were stacking into an oversized gap above the slider. */
.home .main-feature {
  margin-top: 32px;
}


/* --- Responsive: stack the two-column Starter U section on small screens --- */
@media (max-width: 800px) {
  .bhf-why-inner { padding-top: 56px; }
  .bhf-why-title,
  .bhf-ownership-title { font-size: 30px; }
  .bhf-why-lead { font-size: 19px; }
  .bhf-ownership-inner {
    grid-template-columns: 1fr;
    gap: 28px;
    padding: 40px 30px 32px;
  }
  .bhf-ownership-media { order: -1; }
}


/* ============================================================
 * WYSIWYG body fields ("Why We're Here" / "Owning a Business") emit their own
 * <p>. Let the .bhf-*-body wrapper own the outer spacing so it matches the
 * original single-paragraph markup, while still spacing multiple paragraphs if
 * an editor adds them.
 * ============================================================ */
.bhf-why-body > :first-child,
.bhf-ownership-body > :first-child { margin-top: 0; }
.bhf-why-body > :last-child,
.bhf-ownership-body > :last-child { margin-bottom: 0; }


/* ============================================================
 * Starter U click-to-play video "facade" (Main Feature grid, home-alt.php)
 * A still poster + play button; BHF.VideoFacade (js/bhf-scripts.js) swaps in an
 * autoplaying YouTube iframe on click. Mirrors the hero on starteru.org.
 * ============================================================ */
.bhf-video-facade {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  cursor: pointer;
  background: #000;
}
/* aspect-ratio fallback for very old browsers */
@supports not (aspect-ratio: 16 / 9) {
  .bhf-video-facade::before { content: ""; display: block; padding-top: 56.25%; }
}
.bhf-video-facade__poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  margin: 0;
}
.bhf-video-facade__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 76px;
  height: 76px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: #c8102e;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
  transition: transform 0.15s ease, background-color 0.15s ease;
}
.bhf-video-facade__play svg {
  width: 30px;
  height: 30px;
  margin-left: 4px; /* optically center the play triangle */
  display: block;
}
.bhf-video-facade:hover .bhf-video-facade__play,
.bhf-video-facade__play:hover,
.bhf-video-facade__play:focus-visible {
  transform: translate(-50%, -50%) scale(1.06);
  background: #fff;
}
.bhf-video-facade__caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 18px;
  color: #fff;
  font-weight: 600;
  font-size: 15px;
  line-height: 1.2;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0));
  pointer-events: none;
}
.bhf-video-facade__accent {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  color: #c8102e;
}
.bhf-video-facade.is-playing {
  cursor: default;
}
.bhf-video-facade iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}