/* ==========================================================================
   Notting Hill Vape — home slideshow
   NHV-03 - Home Slideshow

   Depends on the design tokens in ../nhv.css. No colour, font or spacing
   literal below — add a token there first.
   ========================================================================== */

/* ==========================================================================
   Home slideshow (core slideshow module + Swiper)
   ========================================================================== */

/* Full-bleed. The module renders inside .container > .row > .col-sm-12, so the
   slider is pulled out to the viewport edges with the standard 50%/50vw trick.
   `.nhv-slideshow.swiper-viewport` (0,2,0) is needed because opencart.css sets a
   white 4px border, a 4px radius and a drop shadow on `.swiper-viewport` (0,1,0)
   and loads AFTER this file — at equal specificity it would win on source order. */
.nhv-slideshow.swiper-viewport {
  position: relative;
  width: 100vw;
  max-width: 100vw;
  /* No bottom margin: the slider, brand strip and tile band stack as one
     continuous run of full-bleed bands with no white gaps between them. */
  margin: 0;
  margin-left: calc(50% - 50vw);
  background: var(--nhv-navy);
  border: 0;
  border-radius: 0;
  box-shadow: none;
  overflow: hidden;
}

.nhv-slideshow .swiper-slide { text-align: center; }
.nhv-slideshow .swiper-slide img { display: block; width: 100%; height: auto; }

/* Pagination bullets.
   This build emits .swiper-pagination-bullet / -bullet-active (Swiper 3 markup
   via swiper.jquery.min.js). swiper.min.css and opencart.css are injected by the
   module AFTER this file, so both are scoped to .nhv-slideshow-pager to win on
   specificity rather than relying on source order. `background` is deliberately
   left out of the transition: animating it makes the active state ambiguous
   mid-swap and is not worth the flicker. */
.nhv-slideshow-pager .swiper-pagination-bullet {
  background: var(--nhv-cream);
  opacity: 0.4;
  width: 10px;
  height: 10px;
  display: inline-block;
  margin: 0 4px;
  border-radius: 50%;
  box-shadow: none;
  cursor: pointer;
  transition: opacity var(--nhv-transition);
}
.nhv-slideshow-pager .swiper-pagination-bullet:hover { opacity: 0.7; }
.nhv-slideshow-pager .swiper-pagination-bullet.swiper-pagination-bullet-active {
  background: var(--nhv-copper);
  opacity: 1;
}

.nhv-slideshow-pager {
  position: absolute;
  bottom: 12px;
  left: 0;
  right: 0;
  text-align: center;
  z-index: 2;
}

/* Arrows.
   opencart.css draws these as FontAwesome ::before glyphs in rgba(0,0,0,.8) and
   hides them at opacity 0 until the viewport is hovered — black arrows on a navy
   slide, invisible either way. Both are overridden explicitly here rather than
   inherited: colour the glyph, and keep the arrows visible without requiring
   hover (they are unreachable on touch otherwise). */
.nhv-slideshow .swiper-button-next,
.nhv-slideshow .swiper-button-prev {
  width: 44px;
  height: 64px;
  margin-top: -32px;
  background-color: var(--nhv-navy-veil);
  background-image: none;
  border-radius: var(--nhv-radius);
  opacity: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color var(--nhv-transition);
}
.nhv-slideshow .swiper-button-next::before,
.nhv-slideshow .swiper-button-prev::before {
  color: var(--nhv-cream);
  font-size: 30px;
  width: auto;
  height: auto;
  line-height: 1;
  text-shadow: none;
}
.nhv-slideshow .swiper-button-next:hover,
.nhv-slideshow .swiper-button-prev:hover { background-color: var(--nhv-copper); }
.nhv-slideshow .swiper-button-next:hover::before,
.nhv-slideshow .swiper-button-prev:hover::before { color: var(--nhv-cream-bright); }

/* opencart.css parks the arrows off-canvas at opacity 0 above 768px and slides
   them in on :hover. Equal specificity to the rules above and loaded later, so
   it wins on source order — hence the compound .nhv-slideshow.swiper-viewport
   selector here (0,3,0), which wins outright without !important.
   Persistently visible is the deliberate choice: hover-reveal is undiscoverable
   and unreachable on a touch-capable laptop. */
.nhv-slideshow.swiper-viewport .swiper-button-prev { opacity: 0.85; left: 10px; }
.nhv-slideshow.swiper-viewport .swiper-button-next { opacity: 0.85; right: 10px; }
.nhv-slideshow.swiper-viewport:hover .swiper-button-prev,
.nhv-slideshow.swiper-viewport:hover .swiper-button-next { opacity: 1; }
.nhv-slideshow.swiper-viewport .swiper-button-prev:hover,
.nhv-slideshow.swiper-viewport .swiper-button-next:hover { opacity: 1; }

@media (max-width: 767px) {
  .nhv-slideshow .swiper-button-next,
  .nhv-slideshow .swiper-button-prev { display: none; }
  .nhv-slideshow-pager { bottom: 6px; }
}