/*
 * Veridian Health 2.6.4 — final hero + dropdown refinements
 * Loaded after all previous theme styles.
 * - Stronger synchronized banner blur during the 1.5s carousel movement.
 * - One genuinely rounded, borderless hero viewport on desktop and mobile.
 * - Tighter spacing between subcategories in parent-category dropdowns.
 */

/* ========================================================================== 
   HOME HERO — TRUE ROUNDED VIEWPORT, NO FRAME/BORDER
   ========================================================================== */
.image-slider-block,
.image-slider-block > .carousel,
.image-slider-block > .carousel > .carousel-inner {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* The outer three layers own the rounded mask.  Keeping the moving slides
 * square prevents a second rounded edge from appearing in the middle of the
 * banner while two slides overlap during the horizontal transition. */
.image-slider-block,
.image-slider-block > .carousel,
.image-slider-block > .carousel > .carousel-inner {
  border-radius: 24px !important;
  overflow: hidden !important;
}

.image-slider-block {
  -webkit-clip-path: inset(0 round 24px);
  clip-path: inset(0 round 24px);
  isolation: isolate;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

.image-slider-block .carousel-inner > .carousel-item,
.image-slider-block .carousel-item > a,
.image-slider-block .carousel-item figure,
.image-slider-block .carousel-item figure > img {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

/* Do not allow decorative frame pseudo-elements from any module/theme rule. */
.image-slider-block::before,
.image-slider-block::after,
.image-slider-block > .carousel::before,
.image-slider-block > .carousel::after,
.image-slider-block > .carousel > .carousel-inner::before,
.image-slider-block > .carousel > .carousel-inner::after {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}

/* ========================================================================== 
   HOME HERO — STRONGER BLUR DURING EVERY 1→2→3→1 TRANSITION
   ========================================================================== */
/* Preserve the 2.6.3 1.5s movement; only strengthen the visual crossover. */
.image-slider-block .carousel-item.vh-seamless-out figure > img {
  -webkit-filter: blur(14px) !important;
  filter: blur(14px) !important;
  opacity: .78 !important;
  -webkit-transform: translateZ(0) scale(1.05) !important;
  transform: translateZ(0) scale(1.05) !important;
}

.image-slider-block .carousel-item.vh-seamless-in figure > img {
  -webkit-filter: blur(16px) !important;
  filter: blur(16px) !important;
  opacity: .76 !important;
  -webkit-transform: translateZ(0) scale(1.055) !important;
  transform: translateZ(0) scale(1.055) !important;
}

.image-slider-block .carousel-item.vh-seamless-in.vh-seamless-focus figure > img {
  -webkit-filter: blur(0) !important;
  filter: blur(0) !important;
  opacity: 1 !important;
  -webkit-transform: translateZ(0) scale(1.001) !important;
  transform: translateZ(0) scale(1.001) !important;
}

/* Bootstrap-state fallback gets the same strong crossover so desktop never
 * briefly drops back to the older 8px treatment before the JS classes paint. */
.image-slider-block .carousel-item.next:not(.vh-seamless-focus) figure > img,
.image-slider-block .carousel-item.prev:not(.vh-seamless-focus) figure > img,
.image-slider-block .carousel-item.active.left:not(.vh-seamless-out) figure > img,
.image-slider-block .carousel-item.active.right:not(.vh-seamless-out) figure > img {
  -webkit-filter: blur(15px) !important;
  filter: blur(15px) !important;
  opacity: .77 !important;
  -webkit-transform: translateZ(0) scale(1.052) !important;
  transform: translateZ(0) scale(1.052) !important;
}

/* ========================================================================== 
   DESKTOP PARENT-CATEGORY DROPDOWN — TIGHTER SUBCATEGORY SPACING
   ========================================================================== */
@media (min-width: 768px) {
  #header .top-navigation-menu .top-menu .level0 > .sub-menu.classic-menu,
  #header .top-navigation-menu .top-menu .level0 > .sub-menu {
    padding: 12px 14px 14px !important;
  }

  #header .top-navigation-menu .top-menu .level0 > .sub-menu > .top-menu[data-depth="1"] {
    column-gap: 14px !important;
    row-gap: 6px !important;
  }

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

  #header .top-navigation-menu .top-menu .level1 > a {
    margin: 0 !important;
    padding: 4px 2px !important;
    line-height: 1.25 !important;
  }

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

  #header .top-navigation-menu .top-menu[data-depth="2"],
  #header .top-navigation-menu .top-menu[data-depth="3"],
  #header .top-navigation-menu .top-menu[data-depth="4"] {
    gap: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

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

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

/* On the wide desktop grid, remove the older 20px/12px grouping once more at
 * the exact breakpoint where that rule was introduced. */
@media (min-width: 1200px) {
  #header .top-navigation-menu .top-menu .level0 > .sub-menu > .top-menu[data-depth="1"] {
    column-gap: 14px !important;
    row-gap: 6px !important;
  }
}

@media (max-width: 575.98px) {
  .image-slider-block,
  .image-slider-block > .carousel,
  .image-slider-block > .carousel > .carousel-inner {
    border-radius: 20px !important;
  }

  .image-slider-block {
    -webkit-clip-path: inset(0 round 20px);
    clip-path: inset(0 round 20px);
  }
}