/* --------------------------------------------------------------------------
 * Banner block (acf/banner) — standalone component.
 *
 * Two STYLE variants (the `banner_style` field):
 *   .banner-block--hero    — default. Tall hero, min-height 650px on desktop.
 *                            Supports the image layouts below.
 *   .banner-block--simple  — auto height, single centered column; headline,
 *                            content and buttons all centered. An image (if set)
 *                            is used as a full-bleed background, otherwise the
 *                            section falls back to `background_color`.
 *
 * Within the "hero" style, the optional image drives the LAYOUT:
 *   .banner-block--side  — image in a column beside the content (two columns)
 *   .banner-block--bg    — image as a full-bleed background with a color
 *                          overlay; content stays in a limited-width column
 *                          (still a two-column grid)
 *   .banner-block--slider — a sub-mode of `--bg` (adds this class on top of it):
 *                          the single background image is replaced by a crossfade
 *                          slider of the `slider_images` gallery. Controlled by
 *                          banner.js (autoplay / interval / bullet dots).
 * With no image, the content renders centered.
 * -------------------------------------------------------------------------- */
.banner-block {
  padding: 50px 0;
  background: url(/wp-content/themes/elyra-healthcare/assets/images/default-banner.jpg) no-repeat center / cover;
}
@media (min-width: 768px) {
  .banner-block {
    padding: 80px 0px;
  }
}
@media (min-width: 768px) {
  .banner-block--hero {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 650px;
  }
  .banner-block--hero > .row {
    width: 100%;
  }
  .banner-block--hero.banner-block--valign-bottom {
    justify-content: end;
  }
}
.banner-block--simple .banner-block__content {
  text-align: center;
}
.banner-block--simple .banner-block__actions {
  justify-content: center;
}
.banner-block h1 {
  margin-top: 0;
}
.banner-block__content p:last-of-type {
  margin-bottom: 0;
}
.banner-block__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 1.5rem;
}
.banner-block .img-section img {
  display: block;
  width: 100%;
  height: 250px;
  object-fit: cover;
  object-position: top;
  border-radius: 20px;
}
.banner-block--slider .banner-block__slide img{
  width: 100%;
}
.banner-block--slider h1{
  color:#003558;
}
.banner-block--slider p.h1-styling{
  color:#95dcfc;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: 500;
  font-family: "avenir-next-lt-pro", sans-serif;
}
.banner-block--slider p:not(.subheading){
  color:#292929;
}
.banner-block--slider .p-styling{
  font-size: 1.5rem;
  line-height: 1.3;
  font-weight: 400;
}
@media (min-width: 768px) {
  .banner-block .img-section img {
    height: 100%;
    min-height: 360px;
  }
}
.banner-block--bg {
  position: relative;
  overflow: hidden;
}
.banner-block--bg .banner-block__bg-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  z-index: 0;
}
.banner-block--bg .banner-block__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
@media (max-width:768px){
  .banner-block--bg .banner-block__overlay{
    opacity: 0.75 !important;
  }
}
.banner-block--bg .row {
  position: relative;
  z-index: 2;
}
.banner-block--slider .banner-block__slider {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.banner-block--slider .banner-block__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.8s ease;
}
.banner-block--slider .banner-block__slide.is-active {
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  .banner-block--slider .banner-block__slide {
    transition: none;
  }
}
.banner-block .elyra-slider__dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 24px;
  z-index: 3;
  display: flex;
  justify-content: center;
  gap: 10px;
  padding: 0;
  margin: 0;
}
.banner-block .elyra-slider__dot {
  width: 12px;
  height: 12px;
  padding: 0;
  border: 2px solid #ffffff;
  border-radius: 50px;
  background: transparent;
  cursor: pointer;
  transition: background-color 150ms ease;
}
.banner-block .elyra-slider__dot.is-active, .banner-block .elyra-slider__dot:hover {
  background: #ffffff;
}

/* --------------------------------------------------------------------------
 * Default-banner text color.
 *
 * The site's default banner (rendered for pages without an acf/banner block —
 * see brandingcup_render_default_banner()) exposes a "Text Color" select in the
 * "Banner" field group. When set, the body is wrapped in `.banner-text--<color>`.
 * Headings carry their own color by default, so the descendants are set here
 * explicitly (mirrors the dark `.bg-color--*` pattern). This colour only applies
 * to that wrapped default-banner content — it is NOT a Banner block field.
 * -------------------------------------------------------------------------- */
.banner-text--dark-blue,
.banner-text--dark-blue h1,
.banner-text--dark-blue h2,
.banner-text--dark-blue h3,
.banner-text--dark-blue h4,
.banner-text--dark-blue h5,
.banner-text--dark-blue h6,
.banner-text--dark-blue p,
.banner-text--dark-blue li,
.banner-text--dark-blue a:not(.btn) {
  color: #003558;
}

.banner-text--light-blue,
.banner-text--light-blue h1,
.banner-text--light-blue h2,
.banner-text--light-blue h3,
.banner-text--light-blue h4,
.banner-text--light-blue h5,
.banner-text--light-blue h6,
.banner-text--light-blue p,
.banner-text--light-blue li,
.banner-text--light-blue a:not(.btn) {
  color: #95dcfc;
}

.banner-text--mint-green,
.banner-text--mint-green h1,
.banner-text--mint-green h2,
.banner-text--mint-green h3,
.banner-text--mint-green h4,
.banner-text--mint-green h5,
.banner-text--mint-green h6,
.banner-text--mint-green p,
.banner-text--mint-green li,
.banner-text--mint-green a:not(.btn) {
  color: #beeaa1;
}

.banner-text--white,
.banner-text--white h1,
.banner-text--white h2,
.banner-text--white h3,
.banner-text--white h4,
.banner-text--white h5,
.banner-text--white h6,
.banner-text--white p,
.banner-text--white li,
.banner-text--white a:not(.btn) {
  color: #ffffff;
}

.banner-text--black,
.banner-text--black h1,
.banner-text--black h2,
.banner-text--black h3,
.banner-text--black h4,
.banner-text--black h5,
.banner-text--black h6,
.banner-text--black p,
.banner-text--black li,
.banner-text--black a:not(.btn) {
  color: #292929;
}

.banner-text--medium-teal,
.banner-text--medium-teal h1,
.banner-text--medium-teal h2,
.banner-text--medium-teal h3,
.banner-text--medium-teal h4,
.banner-text--medium-teal h5,
.banner-text--medium-teal h6,
.banner-text--medium-teal p,
.banner-text--medium-teal li,
.banner-text--medium-teal a:not(.btn) {
  color: #beeaa1;
}

.banner-text--light-teal,
.banner-text--light-teal h1,
.banner-text--light-teal h2,
.banner-text--light-teal h3,
.banner-text--light-teal h4,
.banner-text--light-teal h5,
.banner-text--light-teal h6,
.banner-text--light-teal p,
.banner-text--light-teal li,
.banner-text--light-teal a:not(.btn) {
  color: #beeaa1;
}

.banner-text--light-light-teal,
.banner-text--light-light-teal h1,
.banner-text--light-light-teal h2,
.banner-text--light-light-teal h3,
.banner-text--light-light-teal h4,
.banner-text--light-light-teal h5,
.banner-text--light-light-teal h6,
.banner-text--light-light-teal p,
.banner-text--light-light-teal li,
.banner-text--light-light-teal a:not(.btn) {
  color: #beeaa1;
}

.banner-text--light-medium-teal,
.banner-text--light-medium-teal h1,
.banner-text--light-medium-teal h2,
.banner-text--light-medium-teal h3,
.banner-text--light-medium-teal h4,
.banner-text--light-medium-teal h5,
.banner-text--light-medium-teal h6,
.banner-text--light-medium-teal p,
.banner-text--light-medium-teal li,
.banner-text--light-medium-teal a:not(.btn) {
  color: #beeaa1;
}

.banner-text--yellow,
.banner-text--yellow h1,
.banner-text--yellow h2,
.banner-text--yellow h3,
.banner-text--yellow h4,
.banner-text--yellow h5,
.banner-text--yellow h6,
.banner-text--yellow p,
.banner-text--yellow li,
.banner-text--yellow a:not(.btn) {
  color: #beeaa1;
}

.banner-text--light-yellow,
.banner-text--light-yellow h1,
.banner-text--light-yellow h2,
.banner-text--light-yellow h3,
.banner-text--light-yellow h4,
.banner-text--light-yellow h5,
.banner-text--light-yellow h6,
.banner-text--light-yellow p,
.banner-text--light-yellow li,
.banner-text--light-yellow a:not(.btn) {
  color: #beeaa1;
}

.banner-text--cream,
.banner-text--cream h1,
.banner-text--cream h2,
.banner-text--cream h3,
.banner-text--cream h4,
.banner-text--cream h5,
.banner-text--cream h6,
.banner-text--cream p,
.banner-text--cream li,
.banner-text--cream a:not(.btn) {
  color: #ffffff;
}

.banner-text--light-cream,
.banner-text--light-cream h1,
.banner-text--light-cream h2,
.banner-text--light-cream h3,
.banner-text--light-cream h4,
.banner-text--light-cream h5,
.banner-text--light-cream h6,
.banner-text--light-cream p,
.banner-text--light-cream li,
.banner-text--light-cream a:not(.btn) {
  color: #ffffff;
}

.banner-text--light-light-cream,
.banner-text--light-light-cream h1,
.banner-text--light-light-cream h2,
.banner-text--light-light-cream h3,
.banner-text--light-light-cream h4,
.banner-text--light-light-cream h5,
.banner-text--light-light-cream h6,
.banner-text--light-light-cream p,
.banner-text--light-light-cream li,
.banner-text--light-light-cream a:not(.btn) {
  color: #ffffff;
}

.banner-text--light-gray,
.banner-text--light-gray h1,
.banner-text--light-gray h2,
.banner-text--light-gray h3,
.banner-text--light-gray h4,
.banner-text--light-gray h5,
.banner-text--light-gray h6,
.banner-text--light-gray p,
.banner-text--light-gray li,
.banner-text--light-gray a:not(.btn) {
  color: #ffffff;
}

.banner-text--medium-gray,
.banner-text--medium-gray h1,
.banner-text--medium-gray h2,
.banner-text--medium-gray h3,
.banner-text--medium-gray h4,
.banner-text--medium-gray h5,
.banner-text--medium-gray h6,
.banner-text--medium-gray p,
.banner-text--medium-gray li,
.banner-text--medium-gray a:not(.btn) {
  color: #ffffff;
}

.banner-text--gray,
.banner-text--gray h1,
.banner-text--gray h2,
.banner-text--gray h3,
.banner-text--gray h4,
.banner-text--gray h5,
.banner-text--gray h6,
.banner-text--gray p,
.banner-text--gray li,
.banner-text--gray a:not(.btn) {
  color: #ffffff;
}