/* Site-wide corrections that sit on top of the copied theme. Loaded on every page,
   last, so it wins without needing !important on ordinary rules. */

/* The theme's maroon top bar and sticky header belong to the desktop header, and the
   theme leans on main.js to decide which header is on show. If that script is slow,
   blocked, or errors, the desktop bar can render on a phone. Below the theme's own
   mobile breakpoint (option_ob.enable_mobile = 991) neither may ever paint, whatever
   the JS is doing. Requested by the client: no red navigation on mobile. */
@media (max-width: 991px) {
  .bt-header-desktop,
  .bt-header-stick,
  #bt_header .bt-subheader.bt-top {
    display: none !important;
  }
}

/* The theme pins the footer with position:fixed and reserves room for it with a
   margin on the content, so the page scrolls over a stationary footer. On a phone
   that footer is 809px tall with its top at -9px, i.e. taller than the viewport and
   starting above it, so its maroon panel shows in any strip the content does not
   cover - including above the header, where it reads as a red bar with the footer
   logo in it.
   
   Below the theme's mobile breakpoint the footer is an ordinary block at the end of
   the document instead. Nothing is lost: same footer, same content, it just stops
   showing through. main.js sets the reservation inline, hence !important. */
@media (max-width: 991px) {
  #bt_footer.bt-stick,
  #bt_footer {
    position: static !important;
  }
  .bt-main-content {
    margin-bottom: 0 !important;
  }
  /* The theme also gives the footer a 60px top margin, which a fixed footer never
     shows - margins on position:fixed do not push anything. Un-stuck, it became a
     real 60px gap between the content and the footer that the source never has. */
  #bt_footer {
    margin-top: 0 !important;
  }
}

/* The theme reserves room for its fixed footer by putting a bottom margin on
   .bt-main-content. The Events Calendar's archive template replaces that wrapper with
   its own, so on those twelve pages nothing reserved anything and the footer sat on
   top of the last of the content. They get an ordinary footer instead. */
body.tribe-events-page-template #bt_footer {
  position: static !important;
}

/* The "Diversity and Inclusion [Strategies|Training|Partnerships]" heading types its
   last word on a loop, forever. On narrow screens the longer words push it onto an
   extra line, so the block grows and shrinks by one line every few seconds and
   everything below it moves with it. Scroll while that fires and the page shifts under
   your finger. Her site does the same; this reserves the taller of the two so the
   layout stops moving.

   Measured with the widest word ("Partnerships") pinned: one line down to 755px, two
   down to 470px, three below that. The earlier bounds of 768 and 480 were the layout
   breakpoints, not the wrap points, and left a permanent 42px blank band at 755-767
   and 470-479. */
@media (max-width: 754.98px) { .uvc-type-wrap { min-height: 84px; } }
@media (max-width: 469.98px) { .uvc-type-wrap { min-height: 126px; } }

/* DIVERGENCE: her theme sets `iframe, embed { min-height: 450px }` on every iframe
   on the site. WPBakery's video widget sizes a video by giving its wrapper a
   56.25% top padding and stretching the iframe to fill it, so that blanket
   minimum makes every embedded video taller than the box it sits in. The
   overflow lands on whatever follows: on News & Media the three Vimeo videos
   overlapped each other and the article card below them, worst on a phone, where
   the wrapper is only 163px tall against the iframe's forced 450px. Scoped to the
   video wrapper so any other embed keeps the theme's minimum. */
.wpb_video_wrapper iframe {
  min-height: 0;
}

/* DIVERGENCE: the contact page's "Call Today / Email Today / Open Hours" bar is
   positioned absolutely (top:-95px) inside a section only 35px tall, so nothing
   reserves room for it. At desktop widths the three boxes sit side by side and
   the fixed footer hid the spill. Below 1024px they stack, the bar grows to
   between 237px and 635px, and it printed straight over the footer. It stays
   absolute where that works and flows normally below it, keeping the same 95px
   upward pull so the layout still reads the same. */
@media (max-width: 1023px) {
  .bt-contact-section .vc_row.bt-contact-info-box {
    position: static;
    margin-top: -95px;
  }
}

/* Same 450px minimum, second symptom. The four video posts embed the player
   directly in the post body rather than through WPBakery's widget, so there is no
   aspect-ratio wrapper to fill: the iframe is full-width and at least 450px tall.
   On a phone that makes a 360x450 portrait box holding a 16:9 video, most of it
   letterbox. Giving the player its own ratio keeps the video the shape it was shot
   in at every width. */
iframe[src*="player.vimeo.com"],
iframe[src*="youtube.com/embed"],
iframe[src*="youtube-nocookie.com/embed"] {
  min-height: 0;
  height: auto;
  aspect-ratio: 16 / 9;
}

/* News & Media is laid out with hand-tuned desktop offsets: the rows carry a 50px
   right margin and a 30px left padding, the column wrappers are pulled up 24px and
   75px and pushed right 25px and 50px, and one video widget is pulled up another
   75px. Side by side at desktop widths that staggers the videos against the text.
   Once the two columns stack on a phone the same offsets drag each video up into
   the one above it, so the players overlapped each other and sat indented and
   narrower than the cards they belong to. Below the stacking breakpoint the
   offsets are dropped and each video becomes an ordinary full-width 16:9 block.
   Written against the section rather than the generated vc_custom_* class names,
   which change whenever the page is re-saved in WordPress. */
@media (max-width: 767.98px) {
  .bt-blog-section .vc_row {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
  }

  .bt-blog-section .vc_column-inner {
    margin-top: 0 !important;
    margin-left: 0 !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
  }

  .bt-blog-section .wpb_video_widget,
  .bt-blog-section .wpb_text_column {
    margin-top: 0 !important;
  }

  /* every row reads video, then its write-up. Left alone, the desktop
     zigzag stacks as video/text, text/video, video/text. */
  .bt-blog-section .vc_row {
    display: flex;
    flex-direction: column;
  }

  .bt-blog-section .vc_row > .abc-video-column {
    order: -1;
  }

  /* video and write-up become one card: the player is the lid, the panel below it
     the body, sharing a border and a rounded outline with nothing between them */
  .bt-blog-section .abc-video-column .wpb_video_widget {
    margin-bottom: 0 !important;
  }

  .bt-blog-section .abc-video-column .wpb_video_wrapper iframe {
    background: #000;
    border: 1px solid #f0f0f0;
    border-bottom: 0;
    border-radius: 5px 5px 0 0;
  }

  .bt-blog-section .vc_cta3 {
    margin-bottom: 0 !important;
    border-top: 0 !important;
    border-radius: 0 0 5px 5px !important;
    padding: 24px !important;
  }

  /* spacers that held the cards clear of the staggered videos on the desktop */
  .bt-blog-section .vc_empty_space {
    display: none !important;
  }

  /* one clear gap between stories */
  .bt-blog-section .vc_row {
    margin-bottom: 45px !important;
  }

  /* the player fills a normal block instead of being stretched over an
     aspect-ratio pad, so nothing can escape its own row */
  .bt-blog-section .wpb_video_wrapper {
    position: static;
    height: auto;
    padding-top: 0 !important;
  }

  .bt-blog-section .wpb_video_wrapper iframe {
    position: static;
    display: block;
    width: 100%;
    height: auto;
    min-height: 0;
    aspect-ratio: 16 / 9;
  }
}

/* The heading each page shows as its title is now an <h1> (see the promotion in
   scripts/extract.py). Her theme wrote a handful of rules against the old tag name,
   so those are mirrored here for h1. Values copied verbatim from the theme, which is
   why they carry its exact numbers: the promoted headings render pixel for pixel as
   they did as h2 or h3. */
.bt-titlebar .bt-titlebar-inner .bt-page-title h1 {
  margin: 0;
  color: #ffffff;
  font-family: "Open Sans";
  font-size: 30px;
  font-style: normal;
  font-weight: 700;
  letter-spacing: -0.64px;
  line-height: 30px;
}

.single-bt_testimonial h1.bt-title {
  font-size: 24px;
  line-height: 30px;
}

.tribe-events-before-html h1 {
  font-size: 30px;
  line-height: 36px;
}