/* ============================================================
   Hero Slider — hero-slider.css
   Font: Cormorant Garamond  |  Accent: #F7DE31
   ============================================================ */

/* ── Google Font import (fallback if WP doesn't enqueue it) ── */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;0,700;1,300;1,400&display=swap');

/* ── Custom properties ── */
:root {
  --hs-accent:        #F7DE31;
  --hs-accent-hover:  #e5cc1f;
  --hs-white:         #ffffff;
  --hs-overlay-start: rgba(10, 30, 40, 0.55);
  --hs-overlay-end:   rgba(10, 30, 40, 0.30);
  --hs-radius:        6px;
  --hs-margin:        20px;
  --hs-transition:    1.2s ease;
  --hs-font:          'Cormorant Garamond', Georgia, serif;
}

/* ── Wrapper — 20 px margin on all sides ── */
.hs-hero {
  position:     relative;
  margin:       var(--hs-margin);
  border-radius: 12px;
  overflow:     hidden;
  height:       clamp(420px, 65vh, 700px);
  display:      flex;
  align-items:  center;
  justify-content: center;
  font-family:  var(--hs-font);
  /* subtle shadow to lift it off the page */
  box-shadow:   0 8px 40px rgba(0,0,0,.25);
}

/* ── Slide track ── */
.hs-slides {
  position: absolute;
  inset: 0;
}

/* ── Individual slide ── */
.hs-slide {
  position:            absolute;
  inset:               0;
  background-size:     cover;
  background-position: center;
  background-repeat:   no-repeat;
  opacity:             0;
  transform:           scale(1.04);
  transition:
    opacity   var(--hs-transition),
    transform var(--hs-transition);
  will-change: opacity, transform;
}

.hs-slide.is-active {
  opacity:   1;
  transform: scale(1);
}

/* ── Dark gradient overlay ── */
.hs-overlay {
  position: absolute;
  inset:    0;
  background: linear-gradient(
    160deg,
    var(--hs-overlay-start) 0%,
    var(--hs-overlay-end)   100%
  );
  pointer-events: none;
  z-index: 1;
}

/* ── Content ── */
.hs-content {
  position:   relative;
  z-index:    2;
  text-align: center;
  color:      var(--hs-white);
  padding:    0 clamp(1.5rem, 6vw, 5rem);
  max-width:  860px;
  width:      100%;
}

/* ── Headline ── */
.hs-title {
  font-family:   var(--hs-font);
  font-weight:   700;
  font-size:     clamp(2.2rem, 5.5vw, 4rem);
  line-height:   1.15;
  letter-spacing: -0.01em;
  margin:        0 0 0.75rem;
  text-shadow:   0 2px 12px rgba(0,0,0,.35);
  /* entrance animation */
  animation: hs-fadeUp 0.9s 0.2s both ease-out;
}

/* ── Subtitle ── */
.hs-subtitle {
  font-family:  var(--hs-font);
  font-weight:  300;
  font-style:   italic;
  font-size:    clamp(1rem, 2vw, 1.25rem);
  line-height:  1.6;
  letter-spacing: 0.015em;
  margin:       0 auto 2rem;
  max-width:    560px;
  opacity:      0.92;
  text-shadow:  0 1px 6px rgba(0,0,0,.30);
  animation:    hs-fadeUp 0.9s 0.45s both ease-out;
}

/* ── Button row ── */
.hs-buttons {
  display:         flex;
  gap:             1rem;
  justify-content: center;
  flex-wrap:       wrap;
  animation:       hs-fadeUp 0.9s 0.65s both ease-out;
}

/* ── Base button ── */
.hs-btn {
  font-family:     var(--hs-font);
  font-weight:     600;
  font-size:       clamp(0.9rem, 1.5vw, 1.05rem);
  letter-spacing:  0.06em;
  text-transform:  none;
  text-decoration: none;
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  padding:         0.75em 2.1em;
  border-radius:   var(--hs-radius);
  cursor:          pointer;
  transition:
    background-color 0.25s,
    color            0.25s,
    transform        0.2s,
    box-shadow       0.25s;
}

.hs-btn:hover {
  transform:  translateY(-2px);
}

.hs-btn:active {
  transform: translateY(0);
}

/* Primary — filled gold */
.hs-btn--primary {
  background-color: var(--hs-accent);
  color:            #2a2000;
  border:           2px solid var(--hs-accent);
  box-shadow:       0 4px 18px rgba(247,222,49,.35);
}

.hs-btn--primary:hover {
  background-color: var(--hs-accent-hover);
  border-color:     var(--hs-accent-hover);
  box-shadow:       0 6px 22px rgba(247,222,49,.50);
}

/* Outline — transparent with white border */
.hs-btn--outline {
  background-color: transparent;
  color:            var(--hs-white);
  border:           2px solid var(--hs-white);
}

.hs-btn--outline:hover {
  background-color: rgba(255,255,255,.12);
}

/* ── Dot indicators ── */
.hs-dots {
  position:        absolute;
  bottom:          1.25rem;
  left:            50%;
  transform:       translateX(-50%);
  z-index:         3;
  display:         flex;
  gap:             0.5rem;
  align-items:     center;
}

.hs-dot {
  width:            10px;
  height:           10px;
  border-radius:    50%;
  border:           2px solid rgba(255,255,255,.6);
  background-color: transparent;
  cursor:           pointer;
  padding:          0;
  transition:
    background-color 0.3s,
    border-color     0.3s,
    transform        0.3s;
}

.hs-dot.is-active,
.hs-dot:hover {
  background-color: var(--hs-accent);
  border-color:     var(--hs-accent);
  transform:        scale(1.25);
}

/* ── Entrance keyframes ── */
@keyframes hs-fadeUp {
  from {
    opacity:   0;
    transform: translateY(24px);
  }
  to {
    opacity:   1;
    transform: translateY(0);
  }
}

/* ── Responsive ── */
@media (max-width: 600px) {
  :root {
    --hs-margin: 12px;
  }

  .hs-buttons {
    flex-direction: column;
    align-items:    center;
  }

  .hs-btn {
    width: 100%;
    max-width: 280px;
  }
}