/* Hero slide layers (also in bho-theme.css 2.0.53; repeated here so the hero works even if the live theme CSS is older) */
.bho-slide-bg { position: absolute; inset: 0; z-index: 0; background-size: cover; background-position: center; }
.bho-slide-overlay { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.bho-slide-link { position: absolute; inset: 0; z-index: 1; display: block; }
.bho-slide-inner { position: relative; z-index: 2; pointer-events: none; }
.bho-slide-inner a, .bho-slide-inner button { pointer-events: auto; }

/* Custom HTML overlay */
.bho-hero-has-html .bho-slides-track { display: grid; height: auto; }
.bho-hero-has-html .bho-slide { position: relative; inset: auto; grid-area: 1 / 1; min-width: 0; }
.bho-slide-inner.bho-slide-inner-html { max-width: none; padding: 0; display: block; }
.bho-support-overlay {
  --support-ink: #062342;
  --support-red: #ff002b;
  --support-btn: #e0002a;
  position: relative;
  isolation: isolate;
  width: 100%;
  padding: clamp(28px, 3.5vw, 48px) clamp(24px, 5vw, 80px) 48px;
  color: var(--support-ink);
  text-align: left;
}
.bho-support-overlay, .bho-support-overlay *, .bho-support-overlay *::before, .bho-support-overlay *::after { box-sizing: border-box; }
.bho-support-overlay::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(255,255,255,.98), rgba(255,255,255,.94) 33%, rgba(255,255,255,.72) 52%, rgba(255,255,255,.22) 72%, transparent 90%);
}
.bho-support-overlay .support-copy { width: min(100%, 760px); }
.bho-support-overlay .support-title {
  margin: 0;
  padding: 0;
  font: 900 clamp(68px, 9vw, 124px)/.9 Impact, 'Arial Narrow', 'Helvetica Neue', Arial, sans-serif;
  letter-spacing: -.045em;
  text-transform: uppercase;
  color: var(--support-ink);
}
.bho-support-overlay .support-title-line { display: block; }
.bho-support-overlay .support-o { color: var(--support-red); }
.bho-support-overlay .support-explanation {
  margin: 12px 0 0;
  font: 400 clamp(23px, 2.7vw, 38px)/1.08 Georgia, 'Times New Roman', serif;
  color: var(--support-ink);
  letter-spacing: -.035em;
}
.bho-support-overlay .support-obviously {
  position: relative;
  display: inline-block;
  margin: 0 0 14px;
  padding-bottom: 12px;
  font: italic 700 clamp(42px, 4.7vw, 64px)/1.04 Georgia, 'Times New Roman', serif;
  color: var(--support-red);
  letter-spacing: -.045em;
}
.bho-support-overlay .support-obviously::after {
  content: '';
  position: absolute;
  left: 0;
  right: -8px;
  bottom: 0;
  height: 17px;
  border-top: 5px solid var(--support-red);
  border-radius: 50% 50% 0 0;
  transform: rotate(-1deg);
}
.bho-support-overlay .support-record {
  margin: 0 0 18px;
  color: var(--support-ink);
  font: 800 clamp(14px, 1.6vw, 22px)/1.4 Arial, Helvetica, sans-serif;
  letter-spacing: .17em;
  text-transform: uppercase;
}
.bho-support-overlay .support-cta-group { width: min(100%, 550px); }
.bho-support-overlay a.support-cta, .bho-support-overlay a.support-cta:visited {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 18px;
  width: 100%;
  min-height: 54px;
  padding: 16px 20px;
  border: 0;
  border-radius: 8px;
  background: var(--support-btn);
  color: #fff;
  font: 800 clamp(13px, 1.5vw, 20px)/1.25 Arial, Helvetica, sans-serif;
  letter-spacing: .09em;
  text-transform: uppercase;
  text-decoration: none;
}
.bho-support-overlay a.support-cta:hover { background: #c00024; color: #fff; }
.bho-support-overlay a.support-cta:focus-visible { outline: 3px solid var(--support-ink); outline-offset: 5px; }
.bho-support-overlay .support-arrow {
  width: 12px;
  height: 12px;
  border-top: 3px solid currentColor;
  border-right: 3px solid currentColor;
  transform: rotate(45deg);
  flex: 0 0 auto;
}
.bho-support-overlay .support-date {
  margin: 10px 0 0;
  text-align: center;
  color: var(--support-ink);
  font: 700 clamp(11px, 1.2vw, 17px)/1.5 Arial, Helvetica, sans-serif;
  letter-spacing: .22em;
  text-transform: uppercase;
}
@media (max-width: 600px) {
  .bho-support-overlay { padding: 30px 22px 48px; }
  .bho-support-overlay::before { background: linear-gradient(90deg, rgba(255,255,255,.97), rgba(255,255,255,.87) 65%, rgba(255,255,255,.42)); }
  .bho-support-overlay .support-title { font-size: clamp(58px, 18vw, 105px); }
  .bho-support-overlay .support-explanation { max-width: 350px; }
  .bho-support-overlay .support-record { letter-spacing: .12em; }
  .bho-support-overlay a.support-cta { padding-inline: 12px; gap: 12px; letter-spacing: .04em; }
}

/* Custom HTML slides: pin content to the top so it doesn't float in the middle of a tall hero */
.bho-hero-has-html .bho-slide:has(.bho-slide-inner-html) { align-items: flex-start; }

/* Standard slides on tablets/phones: stack text above the stat callouts instead of squeezing the text into a narrow column */
@media (max-width: 900px) {
  .bho-slide-inner:not(.bho-slide-inner-html) { flex-direction: column; align-items: flex-start; }
  .bho-slide-inner .bho-slide-content { max-width: none; width: 100%; }
}

/* "What does the O stand for?" word flip. Plays each time the slide becomes active, then lands on Observatory.
   SPEED: change --o-step (time each word is on screen). .9s = default. 1.2s = slower. .6s = faster. */
.bho-support-overlay { --o-step: .9s; --o-start: .3s; }
/* Speed classes you can add in the Customizer HTML box: <div class="bho-support-overlay o-slow"> */
.bho-support-overlay.o-fast    { --o-step: .65s; }
.bho-support-overlay.o-slow    { --o-step: 1.2s; }
.bho-support-overlay.o-slower  { --o-step: 1.5s; }
.bho-support-overlay.o-slowest { --o-step: 1.8s; }
.bho-support-overlay .support-cycle { display: inline-grid; vertical-align: bottom; }
.bho-support-overlay .o-word { grid-area: 1 / 1; white-space: nowrap; }
.bho-support-overlay .o-word:not(.o-final) { opacity: 0; color: var(--support-red); font-style: italic; }
.bho-slide.active .bho-support-overlay .o-word { animation: bhoOFlip var(--o-step) ease both; }
.bho-slide.active .bho-support-overlay .o-word:nth-child(1) { animation-delay: var(--o-start); }
.bho-slide.active .bho-support-overlay .o-word:nth-child(2) { animation-delay: calc(var(--o-start) + var(--o-step) * 1); }
.bho-slide.active .bho-support-overlay .o-word:nth-child(3) { animation-delay: calc(var(--o-start) + var(--o-step) * 2); }
.bho-slide.active .bho-support-overlay .o-word:nth-child(4) { animation-delay: calc(var(--o-start) + var(--o-step) * 3); }
.bho-slide.active .bho-support-overlay .o-word:nth-child(5) { animation-delay: calc(var(--o-start) + var(--o-step) * 4); }
.bho-slide.active .bho-support-overlay .o-word:nth-child(6) { animation-delay: calc(var(--o-start) + var(--o-step) * 5); }
.bho-slide.active .bho-support-overlay .o-word:nth-child(7) { animation-delay: calc(var(--o-start) + var(--o-step) * 6); }
.bho-slide.active .bho-support-overlay .o-word:nth-child(8) { animation-delay: calc(var(--o-start) + var(--o-step) * 7); }
.bho-slide.active .bho-support-overlay .o-word:nth-child(9) { animation-delay: calc(var(--o-start) + var(--o-step) * 8); }
.bho-slide.active .bho-support-overlay .o-word:nth-child(10) { animation-delay: calc(var(--o-start) + var(--o-step) * 9); }
/* Landing: timed from the final word's position, so you can use 1 to 10 teaser words */
.bho-slide.active .bho-support-overlay .o-word.o-final:nth-child(2) { animation: bhoOLand .6s calc(var(--o-start) + var(--o-step) * 1) ease both; }
.bho-slide.active .bho-support-overlay .support-explanation:has(.o-final:nth-child(2)) + .support-obviously { animation: bhoOFade .5s calc(var(--o-start) + var(--o-step) * 1 + .55s) ease both; }
.bho-slide.active .bho-support-overlay .support-explanation:has(.o-final:nth-child(2)) + .support-obviously::after { animation: bhoODraw .5s calc(var(--o-start) + var(--o-step) * 1 + .95s) ease both; }
.bho-slide.active .bho-support-overlay .o-word.o-final:nth-child(3) { animation: bhoOLand .6s calc(var(--o-start) + var(--o-step) * 2) ease both; }
.bho-slide.active .bho-support-overlay .support-explanation:has(.o-final:nth-child(3)) + .support-obviously { animation: bhoOFade .5s calc(var(--o-start) + var(--o-step) * 2 + .55s) ease both; }
.bho-slide.active .bho-support-overlay .support-explanation:has(.o-final:nth-child(3)) + .support-obviously::after { animation: bhoODraw .5s calc(var(--o-start) + var(--o-step) * 2 + .95s) ease both; }
.bho-slide.active .bho-support-overlay .o-word.o-final:nth-child(4) { animation: bhoOLand .6s calc(var(--o-start) + var(--o-step) * 3) ease both; }
.bho-slide.active .bho-support-overlay .support-explanation:has(.o-final:nth-child(4)) + .support-obviously { animation: bhoOFade .5s calc(var(--o-start) + var(--o-step) * 3 + .55s) ease both; }
.bho-slide.active .bho-support-overlay .support-explanation:has(.o-final:nth-child(4)) + .support-obviously::after { animation: bhoODraw .5s calc(var(--o-start) + var(--o-step) * 3 + .95s) ease both; }
.bho-slide.active .bho-support-overlay .o-word.o-final:nth-child(5) { animation: bhoOLand .6s calc(var(--o-start) + var(--o-step) * 4) ease both; }
.bho-slide.active .bho-support-overlay .support-explanation:has(.o-final:nth-child(5)) + .support-obviously { animation: bhoOFade .5s calc(var(--o-start) + var(--o-step) * 4 + .55s) ease both; }
.bho-slide.active .bho-support-overlay .support-explanation:has(.o-final:nth-child(5)) + .support-obviously::after { animation: bhoODraw .5s calc(var(--o-start) + var(--o-step) * 4 + .95s) ease both; }
.bho-slide.active .bho-support-overlay .o-word.o-final:nth-child(6) { animation: bhoOLand .6s calc(var(--o-start) + var(--o-step) * 5) ease both; }
.bho-slide.active .bho-support-overlay .support-explanation:has(.o-final:nth-child(6)) + .support-obviously { animation: bhoOFade .5s calc(var(--o-start) + var(--o-step) * 5 + .55s) ease both; }
.bho-slide.active .bho-support-overlay .support-explanation:has(.o-final:nth-child(6)) + .support-obviously::after { animation: bhoODraw .5s calc(var(--o-start) + var(--o-step) * 5 + .95s) ease both; }
.bho-slide.active .bho-support-overlay .o-word.o-final:nth-child(7) { animation: bhoOLand .6s calc(var(--o-start) + var(--o-step) * 6) ease both; }
.bho-slide.active .bho-support-overlay .support-explanation:has(.o-final:nth-child(7)) + .support-obviously { animation: bhoOFade .5s calc(var(--o-start) + var(--o-step) * 6 + .55s) ease both; }
.bho-slide.active .bho-support-overlay .support-explanation:has(.o-final:nth-child(7)) + .support-obviously::after { animation: bhoODraw .5s calc(var(--o-start) + var(--o-step) * 6 + .95s) ease both; }
.bho-slide.active .bho-support-overlay .o-word.o-final:nth-child(8) { animation: bhoOLand .6s calc(var(--o-start) + var(--o-step) * 7) ease both; }
.bho-slide.active .bho-support-overlay .support-explanation:has(.o-final:nth-child(8)) + .support-obviously { animation: bhoOFade .5s calc(var(--o-start) + var(--o-step) * 7 + .55s) ease both; }
.bho-slide.active .bho-support-overlay .support-explanation:has(.o-final:nth-child(8)) + .support-obviously::after { animation: bhoODraw .5s calc(var(--o-start) + var(--o-step) * 7 + .95s) ease both; }
.bho-slide.active .bho-support-overlay .o-word.o-final:nth-child(9) { animation: bhoOLand .6s calc(var(--o-start) + var(--o-step) * 8) ease both; }
.bho-slide.active .bho-support-overlay .support-explanation:has(.o-final:nth-child(9)) + .support-obviously { animation: bhoOFade .5s calc(var(--o-start) + var(--o-step) * 8 + .55s) ease both; }
.bho-slide.active .bho-support-overlay .support-explanation:has(.o-final:nth-child(9)) + .support-obviously::after { animation: bhoODraw .5s calc(var(--o-start) + var(--o-step) * 8 + .95s) ease both; }
.bho-slide.active .bho-support-overlay .o-word.o-final:nth-child(10) { animation: bhoOLand .6s calc(var(--o-start) + var(--o-step) * 9) ease both; }
.bho-slide.active .bho-support-overlay .support-explanation:has(.o-final:nth-child(10)) + .support-obviously { animation: bhoOFade .5s calc(var(--o-start) + var(--o-step) * 9 + .55s) ease both; }
.bho-slide.active .bho-support-overlay .support-explanation:has(.o-final:nth-child(10)) + .support-obviously::after { animation: bhoODraw .5s calc(var(--o-start) + var(--o-step) * 9 + .95s) ease both; }
.bho-slide.active .bho-support-overlay .o-word.o-final:nth-child(11) { animation: bhoOLand .6s calc(var(--o-start) + var(--o-step) * 10) ease both; }
.bho-slide.active .bho-support-overlay .support-explanation:has(.o-final:nth-child(11)) + .support-obviously { animation: bhoOFade .5s calc(var(--o-start) + var(--o-step) * 10 + .55s) ease both; }
.bho-slide.active .bho-support-overlay .support-explanation:has(.o-final:nth-child(11)) + .support-obviously::after { animation: bhoODraw .5s calc(var(--o-start) + var(--o-step) * 10 + .95s) ease both; }
@keyframes bhoOFlip { 0% { opacity: 0; transform: translateY(.35em); } 15% { opacity: 1; transform: none; } 85% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-.35em); } }
@keyframes bhoOLand { 0% { opacity: 0; transform: translateY(.35em); } 100% { opacity: 1; transform: none; } }
@keyframes bhoOFade { 0% { opacity: 0; transform: translateY(.2em); } 100% { opacity: 1; transform: none; } }
@keyframes bhoODraw { 0% { clip-path: inset(0 100% 0 0); } 100% { clip-path: inset(0 0 0 0); } }
@media (prefers-reduced-motion: reduce) {
  .bho-slide.active .bho-support-overlay .o-word,
  .bho-slide.active .bho-support-overlay .support-obviously,
  .bho-slide.active .bho-support-overlay .support-obviously::after { animation: none; }
}
