/* The home page carousels (components/HomeSliders.tsx). This replaced slick.min.css and the jQuery + slick scripts.
   The classes it adds: .dm-fade on the banner list, .is-current on the showing slide, .dm-vlist on the item list when it
   scrolls, .dm-one on the phone feature boxes. The .slick-prev / .slick-next names are kept so the site's arrow styling applies. */

/* Without the script (or before it runs) only the first banner shows, so the page does not jump when it loads. */
.banners .images > .image:not(:first-child) { display: none; }

/* Fade: every banner sits in the same grid cell, and only the current one is visible. */
.banners .images.dm-fade { display: grid; }
.banners .images.dm-fade > .image {
  display: block;
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s linear, visibility 0s linear 0.5s;
}
.banners .images.dm-fade > .image.is-current {
  opacity: 1;
  visibility: visible;
  z-index: 1;
  transition: opacity 0.5s linear;
}

/* The item list, when there are more than five: a column in which JavaScript sets each item's order. */
.latestitemsslider .block .inner.dm-vlist { display: flex; flex-direction: column; }

/* Phone feature boxes: one at a time, in the same grid cell. */
.featureboxesgrid.dm-one { display: grid; position: relative; }
.featureboxesgrid.dm-one > .box {
  grid-area: 1 / 1;
  float: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0s linear 0.4s;
}
.featureboxesgrid.dm-one > .box.is-current { opacity: 1; visibility: visible; transition: opacity 0.4s ease; }
.featureboxesgrid.dm-one > .slick-prev,
.featureboxesgrid.dm-one > .slick-next { z-index: 3; cursor: pointer; }

/* Arrow buttons need to be clickable like the old ones. */
.banners .latestitemsslider .slick-prev,
.banners .latestitemsslider .slick-next { cursor: pointer; background: transparent; border: 0; padding: 0; z-index: 2; }

/* Pause button: off-screen until it is reached with the keyboard. */
.banners { position: relative; }
.dm-carousel-pause {
  position: absolute;
  left: -9999px;
  top: 12px;
  z-index: 10;
  padding: 10px 16px;
  font: 700 14px/1.2 Arial, sans-serif;
  background: #fff;
  color: #1300c1;
  border: 2px solid #1300c1;
  border-radius: 6px;
  cursor: pointer;
}
.dm-carousel-pause:focus { left: 12px; outline: 3px solid #ff0071; outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .banners .images.dm-fade > .image,
  .featureboxesgrid.dm-one > .box { transition: none !important; }
}