/* lele-hero-scroller.css
   Homepage banner (#slideshow0): visible prev/next arrows, clearer dots,
   and a desktop spacer that matches the live hero height so the featured
   strip no longer covers the controls.
   Approved by Lele 12 Nov 2026, 11:23am SGT. Cache-bust ?v=20261112a.

   Brand palette P1: teal #00313C, gold #d4b06a / #bc920d, cream #F6EEDB.
   Font: Montserrat (icons are SVG, not type).

   Does not edit stylesheet.css, slideshow.php / slideshow.tpl, or Owl init.
*/

/* -------------------------------------------------------------------------
   1. Desktop spacer
   The parallax layout gives .slideshow-27 height:0 and pushes the next
   section down with margin-top. Live CSS still uses the old 1920x640 ratio
   (33.333vw). The Christmas posters are 2048x768 / 1920x720 (37.5vw), so
   at 1280px the trust strip overlaps the bottom ~53px of the hero — which
   is exactly where the existing dots sit.
   JS sets --lele-hero-h to the measured carousel height.
   Only from 768px: below 542px the carousel is in-flow (master.css) and
   margin-top is already 0; 542–767 already reserves space via aspect-ratio.
   ------------------------------------------------------------------------- */
@media (min-width: 768px) {
  html body.common-home .section-space.slideshow + .section-space {
    margin-top: var(--lele-hero-h, 37.5vw) !important;
  }
}

/* -------------------------------------------------------------------------
   2. Arrows — always visible, not the theme hover-show off-canvas pair.
   Injected by lele-hero-scroller.js as .lele-hero-nav inside #slideshow0.
   z-index stays inside the carousel stacking context (the carousel itself
   is z-index:1). Visibility depends on the spacer fix above; raising the
   carousel z-index would break the parallax (content would no longer scroll
   over the hero).
   pointer-events:none on the wrapper so the full-bleed slide link still
   works; buttons re-enable clicks.
   ------------------------------------------------------------------------- */
#slideshow0 .lele-hero-nav {
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
}

#slideshow0 .lele-hero-btn {
  pointer-events: auto;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  padding: 0;
  margin: 0;
  border: 1px solid rgba(188, 146, 13, 0.9);
  border-radius: 50%;
  background: rgba(0, 49, 60, 0.78);
  color: #F6EEDB;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.28);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-appearance: none;
  appearance: none;
  font: inherit;
  line-height: 0;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

#slideshow0 .lele-hero-btn:hover,
#slideshow0 .lele-hero-btn:focus {
  background: #00313C;
  border-color: #d4b06a;
  outline: none;
}

#slideshow0 .lele-hero-btn:focus-visible {
  box-shadow: 0 0 0 3px rgba(212, 176, 106, 0.55);
}

#slideshow0 .lele-hero-prev { left: 14px; }
#slideshow0 .lele-hero-next { right: 14px; }

#slideshow0 .lele-hero-btn svg {
  width: 16px;
  height: 16px;
  display: block;
  fill: none;
  stroke: #F6EEDB;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (max-width: 767px) {
  #slideshow0 .lele-hero-btn {
    width: 40px;
    height: 40px;
  }
  #slideshow0 .lele-hero-prev { left: 8px; }
  #slideshow0 .lele-hero-next { right: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  #slideshow0 .lele-hero-btn { transition: none; }
}

/* -------------------------------------------------------------------------
   3. Dots — already in the DOM (dots: true) but easy to miss: 4px bars at
   50% cream, and on desktop they sit under the overlapping trust strip.
   Strengthen contrast and give them a small teal pill so they read on any
   poster. Keep the existing gold (#d4b06a) active colour.
   ------------------------------------------------------------------------- */
html body .section-space.slideshow #slideshow0 .slider-custom-dots {
  z-index: 6 !important;
  bottom: 14px !important;
  gap: 2px;
  width: auto !important;
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%);
  padding: 6px 12px !important;
  border-radius: 999px;
  background: rgba(0, 49, 60, 0.55);
}

html body .section-space.slideshow #slideshow0 .slider-custom-dots .owl-dot {
  width: 28px !important;
  height: 5px !important;
  padding: 8px 0 !important;
  margin: 0 4px !important;
  background: rgba(246, 239, 226, 0.55) !important;
  background-clip: content-box !important;
  border-radius: 2px !important;
}

html body .section-space.slideshow #slideshow0 .slider-custom-dots .owl-dot.active {
  background: #d4b06a !important;
  background-clip: content-box !important;
}

html body .section-space.slideshow #slideshow0 .slider-custom-dots .owl-dot:hover,
html body .section-space.slideshow #slideshow0 .slider-custom-dots .owl-dot:focus {
  background: #F6EEDB !important;
  background-clip: content-box !important;
}

html body .section-space.slideshow #slideshow0 .slider-custom-dots .owl-dot:focus-visible {
  outline: 2px solid #d4b06a;
  outline-offset: 2px;
}