/**
 * Project: Driven Racing – Drupal 11 tweaks
 * File: css/home-slider.css
 * Version: 2025-11-25 v1.1.2
 * Change log:
 * - 2025-11-25 21:37  Adjusted slider navigation dots to sit inside the
 *                     hero frame (relative to .view-driven-home-slider),
 *                     simplified bullets to solid grey/blue circles
 *                     (no white inner dot), and fully hid the legacy
 *                     View footer arrows below the slider.
 * - 2025-11-25 21:18  Restored flex/track layout on
 *                     .view-driven-home-slider .view-content so the
 *                     JS slider works again; kept design changes from
 *                     1.1.0 (hide [TITLE], hide arrows, D7-style dots).
 * - 2025-11-25 21:18  (v1.1.0) Hid [TITLE] captions, removed arrows,
 *                     styled bottom dots as bullets.
 * - 2025-11-25 15:30  Initial hero slider CSS baseline.
 */

/******************************
 * HERO SLIDER CONTAINER
 ******************************/

#driven-home-slider {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: #000;
}

/* The View wrapper that contains the slider */
.view-driven-home-slider {
  position: relative; /* anchor for absolute-positioned dots */
}

/* Outer viewport */
#driven-home-slider .slider-viewport {
  position: relative;
  width: 100%;
  margin: 0 auto;
}

/* The "track" that JS moves is the Views .view-content */
.view-driven-home-slider .view-content {
  display: flex;
  flex-wrap: nowrap;
  transition: transform 0.4s ease-in-out;
  will-change: transform;
}

/* Individual slide */
.view-driven-home-slider .view-content .slide {
  flex: 0 0 100%;
  position: relative;
}

/* Slide images */
.view-driven-home-slider .view-content .slide img {
  width: 100%;
  height: auto;
  display: block;
}

/******************************
 * CAPTION (HIDE [TITLE])
 ******************************/

/* D7 hero does not show the [TITLE] overlay */
#driven-home-slider .slide-caption,
.view-driven-home-slider .slide-caption {
  display: none !important;
}

/******************************
 * ARROWS / LEGACY CONTROLS
 ******************************/

/* Hide JS-added arrow buttons on sides of slider */
.slider-arrow {
  display: none !important;
}

/* Hide any legacy arrows / text controls in the View footer
 * that appear under the left side of the slider.
 */
.view-driven-home-slider .view-footer {
  display: none !important;
}

/******************************
 * BOTTOM NAVIGATION DOTS
 * D7-style bullets (solid grey / blue)
 ******************************/

/* Position the dots centered at the bottom INSIDE the hero frame */
.view-driven-home-slider .slider-dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 12px;   /* inside the image, not below it */
  text-align: center;
  z-index: 10;
}

/* Base bullet style – solid grey circle */
.view-driven-home-slider .slider-dots button {
  display: inline-block;
  margin: 0 6px !important;
  width: 12px !important;
  height: 12px !important;
  padding: 0 !important;
  cursor: pointer;
  border: none;
  outline: none;
  background: rgba(0, 0, 0, 0.35) !important; /* inactive grey */
  border-radius: 50%;
  transition: background 0.2s;
}

/* Remove any pseudo-decoration from previous versions */
.view-driven-home-slider .slider-dots button::before,
.view-driven-home-slider .slider-dots button::after {
  content: none !important;
}

/* Active bullet: solid blue */
.view-driven-home-slider .slider-dots button.is-active {
  background: #3498db !important;
}

/******************************
 * RESPONSIVE TWEAKS
 ******************************/

@media (max-width: 768px) {
  .view-driven-home-slider .slider-dots {
    bottom: 10px;
  }

  .view-driven-home-slider .slider-dots button {
    width: 10px !important;
    height: 10px !important;
    margin: 0 4px !important;
  }
}