/*
 * Veridian Health 2.6.11 — unified banner blur + compact desktop category menu.
 *
 * This is the final-loaded UI layer. It intentionally replaces the accumulated
 * 2.6.3–2.6.9 banner effects with one implementation that behaves identically
 * on desktop and mobile.
 *
 * Banner transition:
 *   - 250ms horizontal movement on every viewport size
 *   - outgoing/current banner: sharp -> graduated blur
 *   - incoming/following banner: graduated blur -> sharp
 *   - centre blur: 4px (approx. 10% strength)
 *   - left/right edge blur: 40px (100% strength)
 *
 * The blur is rendered with duplicate image layers and CSS filter(), not
 * backdrop-filter, so it does not depend on browser backdrop compositing.
 */

/* ========================================================================== 
   HOME HERO — ONE TRANSITION ENGINE FOR DESKTOP + MOBILE
   ========================================================================== */
.image-slider-block > .carousel {
  --vh-banner-duration: 250ms;
  --vh-banner-centre-blur: 4px;
  --vh-banner-edge-blur: 40px;
}

/* Bootstrap's moving items use exactly the same timing on every breakpoint. */
.image-slider-block > .carousel > .carousel-inner > .carousel-item {
  -webkit-transition-property: -webkit-transform !important;
  transition-property: transform !important;
  -webkit-transition-duration: var(--vh-banner-duration) !important;
  transition-duration: var(--vh-banner-duration) !important;
  -webkit-transition-timing-function: cubic-bezier(.33, 0, .2, 1) !important;
  transition-timing-function: cubic-bezier(.33, 0, .2, 1) !important;
  -webkit-backface-visibility: hidden !important;
  backface-visibility: hidden !important;
  will-change: transform !important;
}

/* Keep the original banner sharp. All spatial blur is rendered by the cloned
 * image layers below. This neutralises old 2.6.3/2.6.4 image-state filters. */
.image-slider-block .carousel-item figure > img:not(.vh-unified-blur-image),
.image-slider-block .carousel-item.next figure > img:not(.vh-unified-blur-image),
.image-slider-block .carousel-item.prev figure > img:not(.vh-unified-blur-image),
.image-slider-block .carousel-item.active.left figure > img:not(.vh-unified-blur-image),
.image-slider-block .carousel-item.active.right figure > img:not(.vh-unified-blur-image),
.image-slider-block .carousel-item.vh-seamless-out figure > img:not(.vh-unified-blur-image),
.image-slider-block .carousel-item.vh-seamless-in figure > img:not(.vh-unified-blur-image),
.image-slider-block .carousel-item.vh-seamless-in.vh-seamless-focus figure > img:not(.vh-unified-blur-image),
.image-slider-block .carousel-item.vh-slide-out figure > img:not(.vh-unified-blur-image),
.image-slider-block .carousel-item.vh-slide-in figure > img:not(.vh-unified-blur-image),
.image-slider-block .carousel-item.vh-slide-in-focus figure > img:not(.vh-unified-blur-image) {
  -webkit-filter: none !important;
  filter: none !important;
  opacity: 1 !important;
  -webkit-transform: translateZ(0) scale(1.001) !important;
  transform: translateZ(0) scale(1.001) !important;
  -webkit-transition: none !important;
  transition: none !important;
  -webkit-animation: none !important;
  animation: none !important;
}

/* Disable all older viewport/backdrop blur panes if cached markup still contains
 * them. The new effect is image-based and does not use backdrop-filter. */
.image-slider-block .vh-slide-blur-layer,
.image-slider-block > .carousel > .vh-banner-spatial-layer {
  display: none !important;
  opacity: 0 !important;
  -webkit-animation: none !important;
  animation: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

.image-slider-block .carousel-item figure {
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate;
}

/* Original image establishes the figure's dimensions. */
.image-slider-block .carousel-item figure > img:not(.vh-unified-blur-image) {
  position: relative;
  z-index: 1;
}

/* Three pre-created image copies form the spatial blur profile. Their filter is
 * static; only opacity animates, which is smoother and more reliable on phones. */
.image-slider-block .vh-unified-blur-image {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  border: 0 !important;
  outline: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  object-fit: cover !important;
  object-position: center center !important;
  pointer-events: none !important;
  opacity: 0;
  -webkit-transition: none !important;
  transition: none !important;
  -webkit-animation: none;
  animation: none;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transform: translateZ(0) scale(1.11) !important;
  transform: translateZ(0) scale(1.11) !important;
  -webkit-transform-origin: center center;
  transform-origin: center center;
  will-change: opacity;
  user-select: none;
}

/* 10% blur across the middle/base of the whole banner. */
.image-slider-block .vh-unified-blur-image.vh-unified-blur-base {
  z-index: 5;
  -webkit-filter: blur(var(--vh-banner-centre-blur)) !important;
  filter: blur(var(--vh-banner-centre-blur)) !important;
}

/* Edge copies use the full blur and fade smoothly toward transparent at centre.
 * Both standard and WebKit mask syntaxes are included for desktop + mobile. */
.image-slider-block .vh-unified-blur-image.vh-unified-blur-left,
.image-slider-block .vh-unified-blur-image.vh-unified-blur-right {
  z-index: 6;
  -webkit-filter: blur(var(--vh-banner-edge-blur)) !important;
  filter: blur(var(--vh-banner-edge-blur)) !important;
}

.image-slider-block .vh-unified-blur-image.vh-unified-blur-left {
  -webkit-mask-image: linear-gradient(
    to right,
    #000 0%,
    rgba(0,0,0,.96) 8%,
    rgba(0,0,0,.84) 18%,
    rgba(0,0,0,.62) 30%,
    rgba(0,0,0,.36) 40%,
    rgba(0,0,0,.14) 47%,
    transparent 54%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    #000 0%,
    rgba(0,0,0,.96) 8%,
    rgba(0,0,0,.84) 18%,
    rgba(0,0,0,.62) 30%,
    rgba(0,0,0,.36) 40%,
    rgba(0,0,0,.14) 47%,
    transparent 54%,
    transparent 100%
  );
}

.image-slider-block .vh-unified-blur-image.vh-unified-blur-right {
  -webkit-mask-image: linear-gradient(
    to left,
    #000 0%,
    rgba(0,0,0,.96) 8%,
    rgba(0,0,0,.84) 18%,
    rgba(0,0,0,.62) 30%,
    rgba(0,0,0,.36) 40%,
    rgba(0,0,0,.14) 47%,
    transparent 54%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to left,
    #000 0%,
    rgba(0,0,0,.96) 8%,
    rgba(0,0,0,.84) 18%,
    rgba(0,0,0,.62) 30%,
    rgba(0,0,0,.36) 40%,
    rgba(0,0,0,.14) 47%,
    transparent 54%,
    transparent 100%
  );
}

/* Current banner: blur grows as it leaves. */
.image-slider-block .carousel-item.vh-unified-blur-outgoing .vh-unified-blur-image {
  -webkit-animation: vh-unified-blur-up-2611 var(--vh-banner-duration) cubic-bezier(.33, 0, .2, 1) both !important;
  animation: vh-unified-blur-up-2611 var(--vh-banner-duration) cubic-bezier(.33, 0, .2, 1) both !important;
}

/* Following banner: starts blurred and becomes sharp while it enters. */
.image-slider-block .carousel-item.vh-unified-blur-incoming .vh-unified-blur-image {
  -webkit-animation: vh-unified-blur-down-2611 var(--vh-banner-duration) cubic-bezier(.33, 0, .2, 1) both !important;
  animation: vh-unified-blur-down-2611 var(--vh-banner-duration) cubic-bezier(.33, 0, .2, 1) both !important;
}

@-webkit-keyframes vh-unified-blur-up-2611 {
  0%   { opacity: 0; }
  20%  { opacity: .14; }
  44%  { opacity: .43; }
  68%  { opacity: .73; }
  86%  { opacity: .91; }
  100% { opacity: 1; }
}

@keyframes vh-unified-blur-up-2611 {
  0%   { opacity: 0; }
  20%  { opacity: .14; }
  44%  { opacity: .43; }
  68%  { opacity: .73; }
  86%  { opacity: .91; }
  100% { opacity: 1; }
}

@-webkit-keyframes vh-unified-blur-down-2611 {
  0%   { opacity: 1; }
  14%  { opacity: .91; }
  30%  { opacity: .70; }
  50%  { opacity: .40; }
  68%  { opacity: .16; }
  82%  { opacity: 0; }
  100% { opacity: 0; }
}

@keyframes vh-unified-blur-down-2611 {
  0%   { opacity: 1; }
  14%  { opacity: .91; }
  30%  { opacity: .70; }
  50%  { opacity: .40; }
  68%  { opacity: .16; }
  82%  { opacity: 0; }
  100% { opacity: 0; }
}

/* HARD RESTING STATE: outside an active transition every cloned blur layer is
 * guaranteed invisible. This is a second line of defence if an event is missed. */
.image-slider-block .carousel-item:not(.vh-unified-blur-outgoing):not(.vh-unified-blur-incoming) .vh-unified-blur-image {
  opacity: 0;
  -webkit-animation: none !important;
  animation: none !important;
}

.image-slider-block .carousel-item.active:not(.vh-unified-blur-outgoing):not(.vh-unified-blur-incoming) figure > img:not(.vh-unified-blur-image) {
  -webkit-filter: none !important;
  filter: none !important;
  opacity: 1 !important;
}

/* Caption and controls must remain readable above the image blur copies. */
.image-slider-block .carousel-item figcaption,
.image-slider-block .carousel-item .caption,
.image-slider-block .carousel-indicators,
.image-slider-block .carousel-control-prev,
.image-slider-block .carousel-control-next,
.image-slider-block .carousel-control,
.image-slider-block .direction {
  position: relative;
  z-index: 20 !important;
}

/* Explicit all-device parity: old desktop/mobile rules and reduced-motion rules
 * cannot shorten or disable the requested owner-controlled transition. */
@media (max-width: 767.98px), (min-width: 768px) {
  .image-slider-block > .carousel > .carousel-inner > .carousel-item {
    -webkit-transition-duration: 250ms !important;
    transition-duration: 250ms !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .image-slider-block > .carousel > .carousel-inner > .carousel-item {
    -webkit-transition: -webkit-transform 250ms cubic-bezier(.33, 0, .2, 1) !important;
    transition: transform 250ms cubic-bezier(.33, 0, .2, 1) !important;
  }

  .image-slider-block .carousel-item.vh-unified-blur-outgoing .vh-unified-blur-image {
    -webkit-animation: vh-unified-blur-up-2611 250ms cubic-bezier(.33, 0, .2, 1) both !important;
    animation: vh-unified-blur-up-2611 250ms cubic-bezier(.33, 0, .2, 1) both !important;
  }

  .image-slider-block .carousel-item.vh-unified-blur-incoming .vh-unified-blur-image {
    -webkit-animation: vh-unified-blur-down-2611 250ms cubic-bezier(.33, 0, .2, 1) both !important;
    animation: vh-unified-blur-down-2611 250ms cubic-bezier(.33, 0, .2, 1) both !important;
  }
}

/* ========================================================================== 
   DESKTOP HEADER — MORE COMPACT SUBCATEGORIES UNDER PARENT CATEGORIES
   ========================================================================== */
@media (min-width: 768px) {
  /* Compact the dropdown panel itself. */
  #header #_desktop_top_menu .top-menu .level0 > .sub-menu.classic-menu,
  #header #_desktop_top_menu .top-menu .level0 > .sub-menu {
    padding: 7px 9px 8px !important;
  }

  /* Parent-category groups sit much closer together horizontally and vertically. */
  #header #_desktop_top_menu .level0 > .sub-menu > .top-menu[data-depth="1"] {
    margin: 0 !important;
    padding: 0 !important;
    column-gap: 6px !important;
    row-gap: 2px !important;
    align-items: flex-start !important;
    align-content: flex-start !important;
  }

  #header #_desktop_top_menu .level0 > .sub-menu > .top-menu[data-depth="1"] > li.level1,
  #header #_desktop_top_menu .sub-menu.classic-menu > .top-menu > li.level1 {
    margin: 0 4px 0 0 !important;
    padding: 0 2px !important;
  }

  /* First-level subcategory names. */
  #header #_desktop_top_menu .top-menu .level1 > a {
    margin: 0 !important;
    padding: 2px 1px 3px !important;
    line-height: 1.14 !important;
  }

  #header #_desktop_top_menu .top-menu .level1 > .collapse {
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Deeper children beneath each first-level subcategory. */
  #header #_desktop_top_menu .top-menu[data-depth="2"],
  #header #_desktop_top_menu .top-menu[data-depth="3"],
  #header #_desktop_top_menu .top-menu[data-depth="4"] {
    margin: 0 !important;
    padding: 0 !important;
    gap: 0 !important;
  }

  #header #_desktop_top_menu .top-menu .level2,
  #header #_desktop_top_menu .top-menu .level3,
  #header #_desktop_top_menu .top-menu .level4 {
    margin: 0 !important;
    padding: 0 !important;
  }

  #header #_desktop_top_menu .top-menu .level2 > a,
  #header #_desktop_top_menu .top-menu .level3 > a,
  #header #_desktop_top_menu .top-menu .level4 > a {
    margin: 0 !important;
    padding: 0 1px 1px !important;
    line-height: 1.16 !important;
  }
}