/* 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 up and away to uncover a stationary
   footer underneath. The client asked for that reveal to go, site-wide: the footer is
   an ordinary block at the end of every page.

   It had already been removed below 991px, where the footer is taller than a phone
   screen and showed through as a red bar above the header, and on the Events Calendar
   pages, whose template never reserved the room. This makes it the rule everywhere.
   main.js sets the reservation inline, hence !important. */
#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 would become
   a 60px gap between the content and the footer that her site never had. */
#bt_footer {
  margin-top: 0 !important;
}

/* With the footer in the flow, a page shorter than the window would end above the
   bottom of the screen and leave a white strip under the footer. The page wrapper
   fills the window and the content takes up the slack, so the footer always sits at
   the bottom. */
#bt-main {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

#bt-main > .bt-main-content {
  flex: 1 0 auto;
}

/* 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;
}

/* Community Outreach: the sections added after launch (src/additions/). Built from
   the site's own palette and type (maroon #471310, gold #cb9d5e, rust #a93d20, the
   #f7f7f7 panel grey of her News cards; Open Sans headings over Lato body) so they
   read as part of her theme rather than a second design. Scoped to .abc-co. */
.abc-co {
  margin-top: 20px;
  padding-bottom: 80px;
  color: #70706e;
}

.abc-co section + section {
  margin-top: 70px;
}

.abc-co .abc-co__h {
  margin: 0 0 16px;
  color: #471310;
  font-family: "Open Sans", sans-serif;
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.3px;
  line-height: 38px;
}

.abc-co h3 {
  margin: 0 0 10px;
  color: #471310;
  font-family: "Open Sans", sans-serif;
  font-size: 19px;
  font-weight: 700;
  line-height: 26px;
}

.abc-co p {
  margin: 0 0 14px;
}

.abc-co p:last-child {
  margin-bottom: 0;
}

.abc-co .abc-co__eyebrow {
  margin: 0 0 10px;
  color: #a93d20;
  font-family: "Lato", sans-serif;
  font-size: 15px;
  font-style: italic;
  letter-spacing: 0.3px;
}

/* lead */
.abc-co__lead {
  max-width: 820px;
  margin-right: auto;
  margin-left: auto;
  text-align: center;
}

.abc-co__lead .abc-co__h::after {
  display: block;
  width: 64px;
  height: 3px;
  margin: 18px auto 0;
  background: #cb9d5e;
  content: "";
}

.abc-co .abc-co__intro {
  font-size: 18px;
  line-height: 30px;
}

/* three pillars */
.abc-co__pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

.abc-co__card {
  padding: 46px 28px 30px;
  border: 1px solid #f0f0f0;
  border-top: 3px solid #cb9d5e;
  border-radius: 5px;
  background: #f7f7f7;
  text-align: center;
}

/* the theme's own service icon: a dashed frame, a second dashed frame inset, and a
   white diamond over both. Same measurements as .bt-header .bt-icon. */
.abc-co__icon {
  position: relative;
  display: block;
  width: 100px;
  height: 100px;
  margin: 0 auto 26px;
  border: 1px dashed #b5b5b5;
  border-radius: 5px;
}

.abc-co__icon::before {
  position: absolute;
  top: 5px;
  left: 5px;
  width: 88px;
  height: 88px;
  border: 1px dashed #b5b5b5;
  border-radius: 5px;
  content: "";
}

.abc-co__icon::after {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 98px;
  height: 98px;
  border-radius: 5px;
  background: #ffffff;
  box-shadow: 5px 0 35px rgba(0, 0, 0, 0.15);
  content: "";
  transform: rotate(45deg) scale(0.85);
}

.abc-co__icon .fa {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  color: #cb9d5e;
  font-size: 32px;
  transform: translate(-50%, -50%);
}

/* her original intro and service list, restyled */
.abc-co__about {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  align-items: start;
}

/* two short callouts under the intro: an icon and a phrase, both her own words */
.abc-co__callouts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin: 28px 0 0;
  padding: 26px 0 0;
  border-top: 1px solid #ece4da;
  list-style: none;
}

.abc-co__callouts li {
  display: flex;
  align-items: center;
  gap: 14px;
  color: #471310;
  font-family: "Open Sans", sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 22px;
}

.abc-co__callout-icon {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border: 1px dashed #b5b5b5;
  border-radius: 5px;
  color: #cb9d5e;
  font-size: 20px;
}

.abc-co__about .bt-header {
  margin-bottom: 24px;
}

.abc-co__about .abc-co__intro {
  color: #471310;
}

.abc-co__about-list {
  padding: 34px 34px 30px;
  border: 1px solid #f0f0f0;
  border-top: 3px solid #cb9d5e;
  border-radius: 5px;
  background: #f7f7f7;
}

.abc-co .abc-co__list-title {
  margin: 0 0 4px;
  color: #471310;
  font-family: "Open Sans", sans-serif;
  font-size: 20px;
  font-weight: 800;
  line-height: 28px;
}

.abc-co__about-list .abc-co__checks li {
  color: #70706e;
}

/* process */
.abc-co__process {
  text-align: center;
}

.abc-co__steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
  margin: 34px 0 0;
  padding: 0;
  counter-reset: abc-step;
  list-style: none;
}

.abc-co__steps li {
  position: relative;
  padding-top: 68px;
  counter-increment: abc-step;
}

.abc-co__steps li::before {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 50%;
  width: 48px;
  height: 48px;
  margin-left: -24px;
  border-radius: 50%;
  background: #471310;
  color: #cb9d5e;
  content: counter(abc-step);
  font-family: "Open Sans", sans-serif;
  font-size: 18px;
  font-weight: 800;
  line-height: 48px;
}

/* the line joining the steps */
.abc-co__steps li + li::after {
  position: absolute;
  top: 23px;
  right: calc(50% + 24px);
  width: calc(100% + 30px - 48px);
  height: 2px;
  background: #e5d2b4;
  content: "";
}

/* photo beside copy */
.abc-co__split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  align-items: center;
}

.abc-co__photo img {
  display: block;
  width: 100%;
  height: auto;
  min-height: 0;
  border-radius: 5px;
  box-shadow: 14px 14px 0 #f1e6d4;
}

.abc-co__checks {
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
}

.abc-co__checks li {
  position: relative;
  margin-bottom: 12px;
  padding-left: 30px;
  color: #471310;
}

.abc-co__checks .fa {
  position: absolute;
  top: 4px;
  left: 0;
  color: #cb9d5e;
  font-size: 18px;
}

/* experience panel, in the footer's maroon */
.abc-co__record {
  padding: 56px 50px;
  border-radius: 5px;
  background: #471310;
  color: #e9dcd6;
}

.abc-co__record .abc-co__eyebrow {
  color: #cb9d5e;
}

.abc-co__record .abc-co__h,
.abc-co__record h3 {
  color: #ffffff;
}

.abc-co__entries {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  margin-top: 30px;
  padding-top: 30px;
  border-top: 1px solid rgba(203, 157, 94, 0.35);
}

.abc-co .abc-co__meta {
  margin-bottom: 14px;
  color: #cb9d5e;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.abc-co .abc-co__source {
  font-size: 13px;
  font-style: italic;
  opacity: 0.85;
}

.abc-co__record a {
  color: #cb9d5e;
  text-decoration: underline;
}

.abc-co__record a:hover {
  color: #ffffff;
}

/* call to action */
.abc-co__cta {
  text-align: center;
}

.abc-co__cta .abc-co__h {
  margin-bottom: 8px;
}

.abc-co .abc-co__btn {
  display: inline-block;
  margin-top: 22px;
  padding: 15px 34px;
  border-radius: 3px;
  background: #a93d20;
  color: #ffffff;
  font-family: "Open Sans", sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  transition: background 0.25s ease;
}

.abc-co .abc-co__btn:hover,
.abc-co .abc-co__btn:focus {
  background: #232323;
  color: #ffffff;
}

@media (max-width: 991.98px) {
  .abc-co__steps {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 40px;
  }

  .abc-co__steps li:nth-child(3)::after {
    display: none;
  }

  .abc-co__split,
  .abc-co__about {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .abc-co__entries {
    grid-template-columns: 1fr;
    gap: 36px;
  }
}

@media (max-width: 767.98px) {
  .abc-co section + section {
    margin-top: 54px;
  }

  .abc-co .abc-co__h {
    font-size: 25px;
    line-height: 32px;
  }

  .abc-co__pillars {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .abc-co__steps {
    grid-template-columns: 1fr;
    row-gap: 0;
    text-align: left;
  }

  .abc-co__steps li {
    padding: 0 0 30px 68px;
  }

  .abc-co__steps li::before {
    left: 0;
    margin-left: 0;
    text-align: center;
  }

  .abc-co__steps li + li::after,
  .abc-co__steps li:nth-child(3)::after {
    display: block;
    top: -30px;
    right: auto;
    left: 23px;
    width: 2px;
    height: 30px;
  }

  .abc-co__steps li:last-child {
    padding-bottom: 0;
  }

  .abc-co__photo img {
    box-shadow: 8px 8px 0 #f1e6d4;
  }

  .abc-co__record {
    padding: 38px 24px;
  }
}

/* On a phone the theme stacks the service icon above the page title, which leaves
   the icon stranded once the title block lives inside the intro column. Here it
   keeps its desktop arrangement, icon left and title right, at a smaller size. */
@media (max-width: 767.98px) {
  .abc-co__callouts {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .abc-co__about .bt-header {
    display: flex;
    align-items: center;
    text-align: left;
  }

  .abc-co__about .bt-header .bt-icon {
    flex: 0 0 auto;
    margin: 0 18px 0 0;
    float: none;
    zoom: 0.72;
  }

  .abc-co__about .bt-header .bt-content {
    flex: 1 1 auto;
    min-width: 0;
    text-align: left;
  }

  /* the theme sizes this title per page type with long selectors, hence !important */
  .abc-co__about .bt-header .bt-title {
    font-size: 23px !important;
    line-height: 28px !important;
  }
}