/*
 * Huntington Scheduled Slider — part of City of Huntington Elementor Widgets.
 * All sizing is fluid (%, vh, em). Colors, spacing and type are set from
 * the widget's Style tab; values here are only fallbacks.
 */
.ch-ss {
  position: relative;
  width: 100%;
  height: 70vh;
  overflow: hidden;
  background: #1f2a37;
  --ch-ss-speed: 600ms;
}
.ch-ss--empty { background: transparent; }

.ch-ss-track {
  position: relative;
  display: flex;
  width: 100%;
  height: 100%;
}
.ch-ss.is-ready.ch-ss--slide .ch-ss-track {
  transition: transform var(--ch-ss-speed) ease;
}

.ch-ss-slide {
  position: relative;
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6%;
  box-sizing: border-box;
  overflow: hidden;
}

/* Fade: stack slides on top of each other */
.ch-ss--fade .ch-ss-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
}
.ch-ss--fade .ch-ss-slide.is-active { opacity: 1; visibility: visible; z-index: 1; }
.ch-ss--fade.is-ready .ch-ss-slide {
  transition: opacity var(--ch-ss-speed) ease, visibility var(--ch-ss-speed) ease;
}
/* Before JS runs, show the first slide in fade mode */
.ch-ss--fade:not(.is-ready) .ch-ss-slide:first-child { opacity: 1; visibility: visible; }

.ch-ss-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}
.ch-ss-overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, .45);
  pointer-events: none;
}
.ch-ss-cover { position: absolute; inset: 0; z-index: 2; }

.ch-ss-content {
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: 70%;
  text-align: center;
}
.ch-ss-heading {
  margin: 0 0 16px;
  color: #fff;
  font-size: clamp(30px, 4.6vw, 60px);
  font-weight: 800;
  line-height: 1.1;
}
.ch-ss-desc {
  margin: 0 0 28px;
  color: rgba(255, 255, 255, .88);
  font-size: clamp(16px, 1.6vw, 20px);
  line-height: 1.6;
}
.ch-ss-btn {
  display: inline-block;
  padding: 14px 30px;
  border: 2px solid #ffffff;
  border-radius: 6px;
  background: #ffffff;
  color: #1f2a37;
  font-weight: 700;
  text-decoration: none;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.ch-ss-btn:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

/* Button wrapper — horizontal position comes from the Style tab */
.ch-ss-btn-wrap { width: 100%; }

/* Pinned button: its own layer over the slide, positioned by the Style tab */
.ch-ss-btn-layer {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 6%;
  box-sizing: border-box;
  pointer-events: none;
}
.ch-ss-btn-layer .ch-ss-btn { pointer-events: auto; }

/* Arrows */
.ch-ss-arrow {
  position: absolute;
  top: 50%;
  z-index: 4;
  width: 2.75em;
  height: 2.75em;
  margin-top: -1.375em;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, .25);
  color: #fff;
  cursor: pointer;
  font-size: 16px;
  transition: background-color .2s ease, transform .2s ease;
}
.ch-ss-arrow svg { width: 50%; height: 50%; }
.ch-ss-arrow:hover { transform: scale(1.08); }
.ch-ss-arrow:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.ch-ss-prev { left: 2%; }
.ch-ss-next { right: 2%; }
.ch-ss-arrow[hidden], .ch-ss-dots[hidden] { display: none; }

/* Dots */
.ch-ss-dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 4%;
  z-index: 4;
  display: flex;
  justify-content: center;
  gap: .6em;
}
.ch-ss-dot {
  width: .75em;
  height: .75em;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .5);
  cursor: pointer;
  font-size: 16px;
  transition: background-color .2s ease, transform .2s ease;
}
.ch-ss-dot.is-active { background: #ffffff; transform: scale(1.25); }
.ch-ss-dot:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* Editor-only schedule badge */
.ch-ss-badge {
  position: absolute;
  top: 3%;
  left: 2%;
  z-index: 5;
  padding: .35em .8em;
  border-radius: 999px;
  font: 700 12px/1.3 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  letter-spacing: .02em;
  color: #fff;
  background: #2e7d32;
}
.ch-ss-badge--scheduled { background: #1565c0; }
.ch-ss-badge--expired   { background: #c62828; }
.ch-ss--editor .ch-ss-slide:has(.ch-ss-badge--expired) .ch-ss-content { opacity: .55; }

@media (max-width: 767px) {
  .ch-ss-content { max-width: 100%; }
  .ch-ss-arrow { font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  .ch-ss.is-ready .ch-ss-track,
  .ch-ss.is-ready .ch-ss-slide { transition: none !important; }
}
