/* Hero Slider — all rules scoped to .bsd-hero. Ported from the former BSD Hero Slider plugin into the theme. */

.bsd-hero {
  --c-ink: #002345;
  --c-accent: #52CBCB;
  --c-soft: #8FE0E0;
  --c-muted: #BFE7E7;
  --dur: 6500ms;
  --fade: 1300ms;
  position: relative;
  width: 100%;
  height: var(--bsd-h, 100vh); /* --bsd-h is injected via inline style from the backend height field */
  min-height: 560px;
  max-height: 980px;
  overflow: hidden;
  background: #002345;
  font-family: 'Nunito Sans', system-ui, sans-serif; /* site body font, self-hosted — no external font request */
  box-sizing: border-box;
}

/* ── slides ── */
.bsd-hero .bsd-slides { position: absolute; inset: 0; }

.bsd-hero .bsd-slide {
  position: absolute; inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--fade) cubic-bezier(.4,0,.2,1);
}
.bsd-hero .bsd-slide.bsd-on { opacity: 1; pointer-events: auto; }

/* ── image ── */
.bsd-hero .bsd-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  transform: scale(1);
  transition: transform var(--fade) ease-out;
  will-change: transform;
}
.bsd-hero .bsd-slide.bsd-on .bsd-img {
  /* runs for the slide's full time on screen (autoplay interval + the fade
     into the next slide) so the zoom never gets cut off and restarted */
  animation: bsdKB calc(var(--dur) + var(--fade)) ease-out forwards;
}
@keyframes bsdKB { to { transform: scale(1.13); } }

/* ── overlay ── */
.bsd-hero .bsd-overlay {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(0,35,69,.55) 0%, rgba(0,35,69,.32) 40%, rgba(0,35,69,.72) 100%),
    radial-gradient(120% 90% at 50% 35%, rgba(0,35,69,0) 0%, rgba(0,35,69,.5) 100%);
}

/* ── content column ── */
.bsd-hero .bsd-wrap {
  position: relative; z-index: 2;
  height: 100%;
  display: flex; align-items: center; justify-content: center;
  text-align: center; padding: 0 1.25rem;
}
.bsd-hero .bsd-content { max-width: 760px; }

/* ── eyebrow ── */
.bsd-hero .bsd-eyebrow {
  display: inline-flex; align-items: center; gap: .6rem;
  color: #8FE0E0;
  font-size: .78rem; font-weight: 600;
  letter-spacing: .22em; text-transform: uppercase;
  margin: 0 0 1.1rem;
  opacity: 0; transform: translateY(14px);
}
.bsd-hero .bsd-line {
  width: 34px; height: 1px;
  background: #8FE0E0;
  display: inline-block;
}

/* ── heading ── */
.bsd-hero .bsd-title {
  font-family: 'Heebo', Georgia, serif; /* site heading font, self-hosted (was already forced to Heebo by a child-theme override) */
  font-weight: 500;
  color: #fff;
  font-size: clamp(2.1rem, 5.2vw, 4.1rem);
  line-height: 1.12;
  margin: 0 0 1.1rem;
  opacity: 0; transform: translateY(18px);
}
.bsd-hero .bsd-title em { font-style: italic; color: #8FE0E0; }

/* ── subtitle ── */
.bsd-hero .bsd-sub {
  color: #BFE7E7;
  font-size: clamp(.98rem, 1.1vw, 1.12rem); line-height: 1.7;
  max-width: 540px; margin: 0 auto 2.1rem;
  opacity: 0; transform: translateY(18px);
}

/* ── button ── */
.bsd-hero .bsd-btn {
  display: inline-flex; align-items: center; gap: .65rem;
  background: #52CBCB; color: #002345;
  font-family: 'Nunito Sans', system-ui, sans-serif; /* site body font, self-hosted — no external font request */
  font-weight: 600; font-size: .95rem; letter-spacing: .01em;
  padding: .95rem 1.85rem; border-radius: 100px;
  text-decoration: none;
  box-shadow: 0 10px 30px -8px rgba(82,203,203,.55);
  transition: transform .35s cubic-bezier(.34,1.56,.64,1), box-shadow .35s, background .35s;
  opacity: 0; transform: translateY(18px);
}
.bsd-hero .bsd-btn:hover,
.bsd-hero .bsd-btn:focus-visible {
  background: #8FE0E0; color: #002345;
  transform: translateY(-3px);
  box-shadow: 0 16px 36px -8px rgba(82,203,203,.65);
}
.bsd-hero .bsd-btn svg { width: 16px; height: 16px; transition: transform .35s; }
.bsd-hero .bsd-btn:hover svg,
.bsd-hero .bsd-btn:focus-visible svg { transform: translateX(4px); }

/* ── staggered entrance animations ── */
.bsd-hero .bsd-slide.bsd-on .bsd-eyebrow { animation: bsdUp  .9s cubic-bezier(.16,1,.3,1) .15s forwards; }
.bsd-hero .bsd-slide.bsd-on .bsd-title   { animation: bsdUp   1s cubic-bezier(.16,1,.3,1) .32s forwards; }
.bsd-hero .bsd-slide.bsd-on .bsd-sub     { animation: bsdUp   1s cubic-bezier(.16,1,.3,1)  .5s forwards; }
.bsd-hero .bsd-slide.bsd-on .bsd-btn     { animation: bsdUp   1s cubic-bezier(.16,1,.3,1) .68s forwards; }
@keyframes bsdUp { to { opacity: 1; transform: translateY(0); } }

/* ── prev / next arrows ── */
.bsd-hero .bsd-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 5;
  background: none; border: none; padding: 0; cursor: pointer;
}
.bsd-hero .bsd-arrow-prev { left: 24px; }
.bsd-hero .bsd-arrow-next { right: 24px; }

.bsd-hero .bsd-ainner {
  width: 52px; height: 52px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.35);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  transition: background .3s, border-color .3s, transform .3s;
}
.bsd-hero .bsd-arrow:hover .bsd-ainner,
.bsd-hero .bsd-arrow:focus-visible .bsd-ainner {
  background: #52CBCB; border-color: #52CBCB; transform: scale(1.08);
}
.bsd-hero .bsd-ainner svg { width: 18px; height: 18px; stroke: #fff; fill: none; transition: stroke .3s; }
.bsd-hero .bsd-arrow:hover .bsd-ainner svg,
.bsd-hero .bsd-arrow:focus-visible .bsd-ainner svg { stroke: #002345; }

/* ── indicator dots ── */
.bsd-hero .bsd-dots {
  position: absolute; bottom: 30px;
  left: 50%; transform: translateX(-50%);
  z-index: 5; display: flex; gap: 10px;
}
/* The button is 24px tall (WCAG 2.5.8 minimum tap target); the visible
   5px bar is drawn by ::before, and .bsd-prog fills over it. */
.bsd-hero .bsd-dot {
  width: 34px; height: 24px;
  background: transparent;
  border: none; padding: 0; cursor: pointer;
  position: relative;
  transition: width .4s cubic-bezier(.4,0,.2,1);
}
.bsd-hero .bsd-dot::before {
  content: ''; position: absolute;
  left: 0; right: 0; top: 50%; height: 5px; margin-top: -2.5px;
  border-radius: 100px;
  background: rgba(255,255,255,.32);
  transition: background .4s;
}
.bsd-hero .bsd-dot:not(.bsd-dot-on):hover::before { background: rgba(255,255,255,.55); }
.bsd-hero .bsd-dot.bsd-dot-on { width: 64px; }
.bsd-hero .bsd-dot.bsd-dot-on::before { background: rgba(255,255,255,.28); }

.bsd-hero .bsd-prog {
  position: absolute; left: 0; top: 50%; height: 5px; margin-top: -2.5px;
  width: 0; background: #52CBCB; border-radius: 100px;
}
.bsd-hero .bsd-dot.bsd-dot-on .bsd-prog { animation: bsdFill var(--dur) linear forwards; }
.bsd-hero:hover .bsd-prog,
.bsd-hero:focus-within .bsd-prog { animation-play-state: paused; }
@keyframes bsdFill { to { width: 100%; } }

/* ── responsive ── */
@media (max-width: 767px) {
  .bsd-hero .bsd-arrow-prev { left: 12px; }
  .bsd-hero .bsd-arrow-next { right: 12px; }
  .bsd-hero .bsd-ainner { width: 40px; height: 40px; }
  .bsd-hero .bsd-ainner svg { width: 15px; height: 15px; }
  .bsd-hero .bsd-sub { display: none; }
  .bsd-hero .bsd-dots { bottom: 18px; }
  .bsd-hero .bsd-btn { padding: .85rem 1.5rem; font-size: .88rem; }
}
@media (max-width: 575px) {
  .bsd-hero .bsd-eyebrow { font-size: .75rem; } /* 12px floor — WCAG readability minimum */
  .bsd-hero .bsd-line { width: 22px; }
}

/* ── reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  .bsd-hero .bsd-slide.bsd-on .bsd-img { animation: none; }
  .bsd-hero .bsd-eyebrow,
  .bsd-hero .bsd-title,
  .bsd-hero .bsd-sub,
  .bsd-hero .bsd-btn { opacity: 1 !important; transform: none !important; animation: none !important; }
  .bsd-hero .bsd-slide { transition: opacity .25s linear; }
}