/* ==========================================================================
   Bookify Kid — Hero slider  v2.0
   Built for transparent artwork (PNG / WebP, ~4:3, art on the right, left edge
   fading to transparent). The section paints a flat background colour, the
   artwork sits on top of it whole and uncropped, and the copy sits in the
   space the artwork leaves. No gradient wash — the file's own alpha does it.
   ========================================================================== */

.hero-slider {
  --hs-coral: #ea3b62;
  --hs-coral-dark: #d02a51;
  --hs-navy: #16234a;
  --hs-navy-soft: #4a5878;
  --hs-violet: #7c4dcc;

  --hs-max: 1600px;
  --hs-pad-x: clamp(20px, 5vw, 64px);
  --hs-ease: cubic-bezier(0.4, 0.14, 0.2, 1);
  --hs-speed: 620ms;

  /* Overridden per slide by the colour theme or the colour picker. */
  --hs-bg: #fdf3ec;

  position: relative;
  overflow: hidden;
  background: var(--hs-bg);
}

/* Full bleed. Add class="hs-no-bleed" to the shortcode to keep the hero
   inside the theme's content column instead. */
.hero-slider {
  margin-inline: calc(50% - 50vw);
  max-width: 100vw;
}

.hero-slider.hs-no-bleed {
  margin-inline: 0;
  max-width: none;
}

/* Viewport + track ------------------------------------------------------- */

.hero-slider .hs-viewport {
  overflow: hidden;
}

.hero-slider .hs-track {
  display: flex;
  align-items: flex-start; /* each slide keeps its own aspect-driven height */
  transition: transform var(--hs-speed) var(--hs-ease);
  will-change: transform;
}

.hero-slider.is-dragging .hs-track {
  transition: none;
  cursor: grabbing;
}

/* Slide ------------------------------------------------------------------ */

.hero-slider .hs-slide {
  position: relative;
  flex: 0 0 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: var(--hs-bg);
}

.hero-slider .hs-theme--cream { --hs-bg: #fdf3ec; }
.hero-slider .hs-theme--blush { --hs-bg: #fce8ec; }
.hero-slider .hs-theme--white { --hs-bg: #ffffff; }

/* Artwork ---------------------------------------------------------------- */

.hero-slider .hs-media {
  order: -1; /* artwork above the copy on phones */
  position: relative;
  z-index: 1;
  overflow: hidden;
}

.hero-slider .hs-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain; /* never crop the artwork */
  object-position: center bottom;
}

/* Copy ------------------------------------------------------------------- */

.hero-slider .hs-copy {
  position: relative;
  z-index: 2;
  padding: clamp(22px, 5vw, 40px) var(--hs-pad-x) clamp(32px, 7vw, 52px);
  text-align: center;
}

.hero-slider .hs-eyebrow {
  display: inline-block;
  margin-bottom: 14px;
  padding: 7px 16px;
  border-radius: 999px;
  background: rgba(234, 59, 98, 0.12);
  color: var(--hs-coral-dark);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.hero-slider .hs-title {
  margin: 0;
  font-size: clamp(1.85rem, 7.6vw, 2.6rem);
  line-height: 1.06;
  letter-spacing: -0.015em;
  font-weight: 800;
  text-wrap: balance;
}

.hero-slider .hs-title-a,
.hero-slider .hs-title-b,
.hero-slider .hs-title-c {
  display: block;
}

.hero-slider .hs-title-a { color: var(--hs-navy); }
.hero-slider .hs-title-b { color: var(--hs-coral); }
.hero-slider .hs-title-c { color: var(--hs-violet); }

.hero-slider .hs-tagline {
  display: inline-block;
  margin: 12px 0 0;
  color: var(--hs-navy);
  font-family: "Caveat", "Segoe Script", cursive;
  font-size: clamp(1.05rem, 4vw, 1.4rem);
  line-height: 1.3;
  text-wrap: balance;

  text-decoration: none;   
}

.hero-slider .hs-tagline em {
  color: var(--hs-coral);
  font-style: normal;
  text-decoration: underline;
  text-decoration-color: rgba(234, 59, 98, 0.6);
  text-decoration-thickness: 2px;
  text-underline-offset: 7px;
}

.hero-slider .hs-desc {
  margin: 16px auto 0;
  max-width: 42ch;
  color: var(--hs-navy-soft);
  font-size: clamp(0.95rem, 3.4vw, 1.05rem);
  line-height: 1.6;
}

.hero-slider .hs-desc em,
.hero-slider .hs-desc strong {
  color: var(--hs-coral);
  font-style: normal;
  font-weight: 700;
}

/* Buttons ---------------------------------------------------------------- */

.hero-slider .hs-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 22px;
}

.hero-slider .hs-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 30px;
  border-radius: 999px;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  transition: transform 180ms var(--hs-ease), background-color 180ms var(--hs-ease),
    box-shadow 180ms var(--hs-ease), color 180ms var(--hs-ease),
    border-color 180ms var(--hs-ease);
}

.hero-slider .hs-btn--primary {
  background: var(--hs-coral);
  color: #fff;
  box-shadow: 0 14px 28px -14px rgba(234, 59, 98, 0.8);
}

.hero-slider .hs-btn--primary:hover,
.hero-slider .hs-btn--primary:focus-visible {
  background: var(--hs-coral-dark);
  transform: translateY(-2px);
}

.hero-slider .hs-btn--ghost {
  background: rgba(255, 255, 255, 0.7);
  color: var(--hs-navy);
  border: 2px solid rgba(22, 35, 74, 0.16);
}

.hero-slider .hs-btn--ghost:hover,
.hero-slider .hs-btn--ghost:focus-visible {
  border-color: var(--hs-coral);
  color: var(--hs-coral);
}

.hero-slider .hs-btn-arrow {
  width: 1.05em;
  height: 1.05em;
  transition: transform 220ms var(--hs-ease);
}

.hero-slider .hs-btn--primary:hover .hs-btn-arrow {
  transform: translateX(4px);
}

/* Dots ------------------------------------------------------------------- */

.hero-slider .hs-dots {
  position: absolute;
  left: 50%;
  bottom: clamp(12px, 2.4vw, 22px);
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 8px;
  transform: translateX(-50%);
}

.hero-slider .hs-dot {
  position: relative;
  width: 22px;
  height: 24px; /* tap target, the visible bar is drawn below */
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.hero-slider .hs-dot::after {
  content: "";
  position: absolute;
  inset: 50% 0 auto 0;
  height: 6px;
  border-radius: 999px;
  background: rgba(22, 35, 74, 0.22);
  transform: translateY(-50%);
  transition: background-color 260ms var(--hs-ease);
}

.hero-slider .hs-dot:hover::after {
  background: rgba(22, 35, 74, 0.38);
}

.hero-slider .hs-dot.is-active {
  width: 52px;
}

.hero-slider .hs-dot.is-active::after {
  background: var(--hs-coral);
}

.hero-slider .hs-dot {
  transition: width 300ms var(--hs-ease);
}

/* Arrows are hidden by default. Pass arrows="true" to the shortcode to
   render them, and this rule lets them show. */
.hero-slider .hs-arrow {
  position: absolute;
  top: 50%;
  z-index: 5;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.94);
  color: var(--hs-navy);
  box-shadow: 0 8px 24px -10px rgba(22, 35, 74, 0.55);
  cursor: pointer;
  transform: translateY(-50%);
}

.hero-slider .hs-arrow svg { width: 21px; height: 21px; }
.hero-slider .hs-arrow--prev { left: clamp(10px, 1.5vw, 22px); }
.hero-slider .hs-arrow--next { right: clamp(10px, 1.5vw, 22px); }

.hero-slider .hs-arrow:hover {
  background: var(--hs-coral);
  color: #fff;
}

.hero-slider .hs-arrow:focus-visible,
.hero-slider .hs-dot:focus-visible,
.hero-slider .hs-btn:focus-visible {
  outline: 3px solid var(--hs-navy);
  outline-offset: 3px;
}

.hero-slider .bhs-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Entrance --------------------------------------------------------------- */

.hero-slider .hs-copy > * {
  opacity: 0;
  transform: translateY(14px);
}

.hero-slider .hs-slide.is-active .hs-copy > * {
  animation: hs-rise 600ms var(--hs-ease) forwards;
}

.hero-slider .hs-slide.is-active .hs-copy > *:nth-child(1) { animation-delay: 60ms; }
.hero-slider .hs-slide.is-active .hs-copy > *:nth-child(2) { animation-delay: 130ms; }
.hero-slider .hs-slide.is-active .hs-copy > *:nth-child(3) { animation-delay: 200ms; }
.hero-slider .hs-slide.is-active .hs-copy > *:nth-child(4) { animation-delay: 270ms; }
.hero-slider .hs-slide.is-active .hs-copy > *:nth-child(5) { animation-delay: 340ms; }

.hero-slider.is-single .hs-copy > *,
.hero-slider:not(.hs-ready) .hs-copy > * {
  opacity: 1;
  transform: none;
}

@keyframes hs-rise {
  to { opacity: 1; transform: none; }
}

/* ==========================================================================
   Phones and small tablets
   The artwork is capped in height so it cannot push the copy off screen.
   ========================================================================== */



@media (max-width: 991px) {

  /* width ÷ height of the part of the artwork you want to see */
  .hero-slider { --hs-art-ratio: 0.7; }

  .hero-slider .hs-media {
    width: 100%;
    height: auto;                    /* was clamp(180px, 34vh, 300px) */
    aspect-ratio: var(--hs-art-ratio);
  }

  .hero-slider .hs-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: right center;   /* keeps girl + book, trims the empty left edge */
  }

  .hero-slider .hs-dots {
    top: calc(100vw / var(--hs-art-ratio));
    bottom: auto;
    margin-top: -18px;
  }

  .hero-slider .hs-tagline {

    line-height: 1.7;
   
  }


}

/* ==========================================================================
   Desktop
   The slide is a 16:9 stage. The artwork is laid into it whole, anchored to
   the bottom right. Type scales with the stage width (cqw) so the whole
   composition holds the same proportions as the design at every size.
   ========================================================================== */

@media (min-width: 992px) {

  .hero-slider .hs-slide {
    display: block;
    container-type: inline-size;
    aspect-ratio: 16 / 9;
    min-height: 440px;
    max-height: 82vh;
  }

  .hero-slider .hs-media {
    position: absolute;
    inset: 0 0 0 auto;
    order: 0;
    width: var(--hs-art-w, 72%);
    height: 100%;
  }

  .hero-slider .hs-media img {
    object-position: right bottom;
  }

  .hero-slider .hs-copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    height: 100%;
    width: 38cqw;
    margin-inline-start: 5cqw;
    padding: 0;
    text-align: start;
  }

  .hero-slider .hs-text--right .hs-copy {
    margin-inline: auto 5cqw;
  }

  .hero-slider .hs-text--right .hs-media {
    inset: 0 auto 0 0;
  }

  .hero-slider .hs-text--right .hs-media img {
    object-position: left bottom;
  }

  /* Proportional type. The vh half of each min() keeps things sane on short,
     very wide windows where the stage is capped by max-height. */
  .hero-slider .hs-eyebrow {
    margin-bottom: 1.4cqw;
    padding: 0.55cqw 1.2cqw;
    font-size: min(0.86cqw, 1.6vh);
  }

  .hero-slider .hs-title {
    font-size: min(3.45cqw, 6.2vh);
    line-height: 1.08;
    text-wrap: pretty;
  }

  .hero-slider .hs-tagline {
    margin-top: 1.2cqw;
    font-size: min(1.7cqw, 3.1vh);
    text-underline-offset: 0.5cqw;
  }

  .hero-slider .hs-desc {
    margin: 1.5cqw 0 0;
    max-width: 30cqw;
    font-size: min(1.2cqw, 2.2vh);
    line-height: 1.62;
  }

  .hero-slider .hs-actions {
    justify-content: flex-start;
    margin-top: 2cqw;
    gap: 1cqw;
  }

  .hero-slider .hs-btn {
    padding: 1.25cqw 2.4cqw;
    font-size: min(1.15cqw, 2.1vh);
  }

  .hero-slider .hs-dots {
    left: 5cqw;
    bottom: 3.4cqw;
    transform: none;
  }
}

/* Reduced motion --------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .hero-slider .hs-track { transition-duration: 1ms; }

  .hero-slider .hs-copy > * {
    opacity: 1;
    transform: none;
    animation: none !important;
  }

  .hero-slider .hs-btn,
  .hero-slider .hs-arrow,
  .hero-slider .hs-dot { transition-duration: 1ms; }
}