/* ============================================================
   HALE NUDGE HEALTHCARE — slider.css
   Loaded ONLY on homepage (performance optimization)
   ============================================================ */

/* ── HERO CONTAINER ───────────────────────────────────────── */
.hero {
  position:relative;
  width:100%;
  height:100vh;
  min-height:640px;
  max-height:1000px;
  overflow:hidden;
  background:#04193A; /* fallback while images load */
}

/* ── SLIDE TRACK ──────────────────────────────────────────── */
.hero-track {
  position:relative;
  width:100%;
  height:100%;
}

/* ── INDIVIDUAL SLIDES ────────────────────────────────────── */
.slide {
  position:absolute;
  inset:0;
  opacity:0;
  pointer-events:none;
  transition:opacity 0.55s ease;
  /* GPU compositing layer for smooth transitions */
  will-change:opacity;
}
.slide.active {
  opacity:1;
  pointer-events:auto;
}

/* Background image with Ken Burns zoom */
.slide-bg {
  position:absolute;
  inset:-6%;          /* extra room for zoom without showing edges */
  background-size:cover;
  background-position:center;
  transform:scale(1.07);
  transition:transform 4.5s ease-out;
  will-change:transform;
}
.slide.active .slide-bg {
  transform:scale(1);
}

/* Gradient overlay per-slide */
.slide-overlay {
  position:absolute;
  inset:0;
}

/* ── SLIDE CONTENT ────────────────────────────────────────── */
.slide-content {
  position:relative;
  z-index:2;
  height:100%;
  display:flex;
  flex-direction:column;
  justify-content:center;
  /* KEY: enough top padding on mobile so text never overlaps nav */
  padding-top:100px;
  padding-bottom:80px;
}

/* ── TEXT ELEMENTS — always visible, animated when .js ── */
.slide-tag {
  display:inline-flex;
  align-items:center;
  gap:9px;
  background:rgba(200,156,64,.18);
  border:1px solid rgba(200,156,64,.48);
  color:#f4cc72;
  padding:6px 18px;
  border-radius:2px;
  font-size:.71rem;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  margin-bottom:18px;
  width:fit-content;
}

.slide h1 {
  font-family:'DM Serif Display', Georgia, serif;
  font-size:clamp(2.4rem, 5.2vw, 5.2rem);
  font-weight:400;
  color:#fff;
  line-height:1.06;
  margin-bottom:18px;
}
.slide h1 em  { color:#6de8e8; font-style:italic }
.slide h1 .g  { color:#f4cc72 }

.slide-sub {
  font-size:clamp(.96rem, 1.65vw, 1.14rem);
  color:rgba(255,255,255,.78);
  line-height:1.72;
  max-width:580px;
  margin-bottom:28px;
  font-family:'DM Sans', system-ui, sans-serif;
  font-weight:300;
}

.slide-btns {
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  align-items:center;
  margin-bottom:32px;
}

.slide-trust {
  display:flex;
  gap:20px;
  flex-wrap:wrap;
}
.trust-item {
  display:flex;
  align-items:center;
  gap:7px;
  font-size:.81rem;
  font-weight:500;
  color:rgba(255,255,255,.62);
}
.trust-dot {
  width:6px; height:6px; border-radius:50%;
  background:#0aa5a6; flex-shrink:0;
}

/* JS-gated animations — only hidden when .js body class present */
.js .slide-tag,
.js .slide h1,
.js .slide-sub,
.js .slide-btns,
.js .slide-trust {
  opacity:0;
  transform:translateY(18px);
  transition:opacity .40s ease, transform .40s ease;
}
.js .slide.active .slide-tag  { opacity:1; transform:none; transition-delay:.05s }
.js .slide.active h1           { opacity:1; transform:none; transition-delay:.18s }
.js .slide.active .slide-sub   { opacity:1; transform:none; transition-delay:.32s }
.js .slide.active .slide-btns  { opacity:1; transform:none; transition-delay:.46s }
.js .slide.active .slide-trust { opacity:1; transform:none; transition-delay:.58s }

/* ── PROGRESS BAR ─────────────────────────────────────────── */
.hero-prog {
  position:absolute; bottom:0; left:0; right:0;
  height:3px; background:rgba(255,255,255,.1); z-index:10;
}
.hero-prog-fill {
  height:100%;
  background:linear-gradient(90deg,#C89C40,#0aa5a6);
  width:0%;
  transition:width linear;
}

/* ── ARROWS ───────────────────────────────────────────────── */
.hero-arrow {
  position:absolute; top:50%; transform:translateY(-50%); z-index:10;
  width:50px; height:50px; border-radius:50%;
  background:rgba(255,255,255,.1); backdrop-filter:blur(10px);
  border:1.5px solid rgba(255,255,255,.2); color:#fff;
  display:flex; align-items:center; justify-content:center;
  transition:all .25s ease; cursor:pointer;
}
.hero-arrow svg { width:19px; height:19px; stroke:#fff; fill:none; stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round }
.hero-arrow:hover { background:rgba(255,255,255,.22); transform:translateY(-50%) scale(1.08) }
.hero-prev { left:22px }
.hero-next { right:22px }

/* ── DOTS ─────────────────────────────────────────────────── */
.hero-dots {
  position:absolute; bottom:20px; left:50%; transform:translateX(-50%);
  display:flex; gap:7px; z-index:10;
}
.hero-dot {
  width:8px; height:8px; border-radius:4px;
  background:rgba(255,255,255,.3); cursor:pointer;
  border:none; padding:0; transition:all .32s ease;
}
.hero-dot.active { width:28px; background:#C89C40 }

/* ── COUNTER ──────────────────────────────────────────────── */
.hero-count {
  position:absolute; bottom:22px; right:82px;
  color:rgba(255,255,255,.38); font-size:.75rem;
  font-weight:600; letter-spacing:.1em; z-index:10;
}
.hero-count .cn {
  color:rgba(255,255,255,.85); font-size:.98rem; font-weight:700;
}

/* ── FLOATING STATS CARD ──────────────────────────────────── */
.hero-card {
  position:absolute; bottom:56px; right:40px; z-index:10;
  background:rgba(255,255,255,.97); backdrop-filter:blur(20px);
  border-radius:16px; padding:20px 24px; min-width:262px;
  box-shadow:0 24px 60px rgba(8,44,97,.26);
  animation:floatY 5s ease-in-out infinite;
}
@keyframes floatY { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }
.hcard-label { font-size:.67rem; font-weight:700; text-transform:uppercase; letter-spacing:.12em; color:#6b7280; margin-bottom:12px }
.hcard-stats { display:flex; align-items:center }
.hcard-stat  { text-align:center; padding:4px 14px }
.hcard-stat:not(:last-child) { border-right:1px solid #d1d5db }
.hcard-n { display:block; font-family:'DM Serif Display',Georgia,serif; font-size:1.82rem; color:#082C61; line-height:1 }
.hcard-l { display:block; font-size:.65rem; color:#6b7280; margin-top:3px; font-weight:600; white-space:nowrap }

/* ── MOBILE FIXES ─────────────────────────────────────────── */
@media(max-width:768px){
  .hero {
    height:100svh;   /* use small viewport height for mobile browser chrome */
    min-height:620px;
  }
  .slide-content {
    /* Push text lower — well below the 78px navbar + 30px gap */
    padding-top:160px;
    padding-bottom:90px;
    justify-content:center;
  }
  .slide h1      { font-size:clamp(2rem,7vw,2.9rem) }
  .slide-sub     { font-size:.93rem; margin-bottom:20px }
  .slide-btns    { gap:10px; margin-bottom:20px }
  .slide-btns .btn-lg { padding:13px 20px; font-size:.88rem }
  .slide-trust   { gap:14px }
  .hero-prev     { left:10px }
  .hero-next     { right:10px }
  .hero-count    { display:none }
  .hero-card     { display:none }    /* too cramped on mobile */
}

@media(max-width:480px){
  .slide-tag  { font-size:.64rem; padding:5px 14px }
  .slide-btns { flex-direction:column; align-items:flex-start }
  .slide-btns .btn { width:100%; justify-content:center }
}