/**
 * STY-02 - Unified left/right nav controls (gallery lightbox §17.4 caret pattern).
 * Loads after child skin.css. See _md/SESSION-RESUME-2026-09-18.md §4.
 */

:root {
  --dv-nav-chevron-size: 0.55rem;

  /*
   * ---- STY-02 CHEVRON TUNER ----
   * Nudge chevrons inside their hit area. Units: rem.
   *   +x = right    -x = left
   *   +y = down     -y = up
   *
   * Locked defaults from Tim (Sep 19). Edit to fine-tune; report changes back to Theo.
   */
  --dv-nav-tune-carousel-prev-x: 0.2rem;
  --dv-nav-tune-carousel-prev-y: -0.06rem;
  --dv-nav-tune-carousel-next-x: -0.2rem;
  --dv-nav-tune-carousel-next-y: 0;

  --dv-nav-tune-promo-prev-x: 0.2rem;
  --dv-nav-tune-promo-prev-y: -0.06rem;
  --dv-nav-tune-promo-next-x: -0.2rem;
  --dv-nav-tune-promo-next-y: 0;

  --dv-nav-tune-slick-prev-x: 0.2rem;
  --dv-nav-tune-slick-prev-y: -0.06rem;
  --dv-nav-tune-slick-next-x: -0.2rem;
  --dv-nav-tune-slick-next-y: 0;

  --dv-nav-tune-room-prev-x: 0.2rem;
  --dv-nav-tune-room-prev-y: -0.06rem;
  --dv-nav-tune-room-next-x: -0.2rem;
  --dv-nav-tune-room-next-y: 0;

  --dv-nav-tune-calendar-prev-x: 0.2rem;
  --dv-nav-tune-calendar-prev-y: 0;
  --dv-nav-tune-calendar-next-x: -0.2rem;
  --dv-nav-tune-calendar-next-y: 0;

  /* Gallery Featherlight - consumed by Esplanade skin.css §17.4 */
  --dv-nav-tune-lightbox-prev-x: 0.1rem;
  --dv-nav-tune-lightbox-prev-y: -0.04rem;
  --dv-nav-tune-lightbox-next-x: 0;
  --dv-nav-tune-lightbox-next-y: 0;
}

/* Hide legacy unicode arrow glyphs and slick font icons. */
.carousel__prev::after,
.carousel__next::after,
.room__prev::after,
.room__next::after,
.slick-prev::after,
.slick-next::after {
  content: none !important;
  display: none !important;
}

/* CSS chevron (same technique as Featherlight §17.4). */
.carousel__prev::before,
.carousel__next::before,
.room__prev::before,
.room__next::before,
.slick-prev::before,
.slick-next::before,
body[class*="skin-"] .promo-embed--carousel .promo-embed__track .slick-prev::before,
body[class*="skin-"] .promo-embed--carousel .promo-embed__track .slick-next::before {
  content: "" !important;
  display: block !important;
  width: var(--dv-nav-chevron-size);
  height: var(--dv-nav-chevron-size);
  border: solid currentColor;
  border-width: 0 2px 2px 0;
  padding: 0 !important;
  opacity: 1 !important;
  position: static !important;
  font-family: inherit !important;
  font-size: inherit !important;
  line-height: 1 !important;
  color: inherit !important;
  background: none !important;
  transform-origin: center !important;
}

/* --- Per-surface tuner (margin = screen-space nudge) --------------------- */

.carousel__prev::before {
  transform: rotate(135deg) !important;
  margin-left: var(--dv-nav-tune-carousel-prev-x) !important;
  margin-top: var(--dv-nav-tune-carousel-prev-y) !important;
  margin-right: 0 !important;
  margin-bottom: 0 !important;
}

.carousel__next::before {
  transform: rotate(-45deg) !important;
  margin-left: var(--dv-nav-tune-carousel-next-x) !important;
  margin-top: var(--dv-nav-tune-carousel-next-y) !important;
  margin-right: 0 !important;
  margin-bottom: 0 !important;
}

/* Legacy `_carousel.scss` flips .carousel__next for SVG arrows - breaks CSS chevrons above. */
.carousel .carousel__prev,
.carousel .carousel__next {
  transform: none !important;
  background-image: none !important;
}

body[class*="skin-"] .promo-embed--carousel .promo-embed__track .slick-prev::before {
  transform: rotate(135deg) !important;
  margin-left: var(--dv-nav-tune-promo-prev-x) !important;
  margin-top: var(--dv-nav-tune-promo-prev-y) !important;
  margin-right: 0 !important;
  margin-bottom: 0 !important;
}

body[class*="skin-"] .promo-embed--carousel .promo-embed__track .slick-next::before {
  transform: rotate(-45deg) !important;
  margin-left: var(--dv-nav-tune-promo-next-x) !important;
  margin-top: var(--dv-nav-tune-promo-next-y) !important;
  margin-right: 0 !important;
  margin-bottom: 0 !important;
}

.slick-prev::before {
  transform: rotate(135deg) !important;
  margin-left: var(--dv-nav-tune-slick-prev-x) !important;
  margin-top: var(--dv-nav-tune-slick-prev-y) !important;
  margin-right: 0 !important;
  margin-bottom: 0 !important;
}

.slick-next::before {
  transform: rotate(-45deg) !important;
  margin-left: var(--dv-nav-tune-slick-next-x) !important;
  margin-top: var(--dv-nav-tune-slick-next-y) !important;
  margin-right: 0 !important;
  margin-bottom: 0 !important;
}

.room__prev::before {
  transform: rotate(135deg) !important;
  margin-left: var(--dv-nav-tune-room-prev-x) !important;
  margin-top: var(--dv-nav-tune-room-prev-y) !important;
  margin-right: 0 !important;
  margin-bottom: 0 !important;
}

.room__next::before {
  transform: rotate(-45deg) !important;
  margin-left: var(--dv-nav-tune-room-next-x) !important;
  margin-top: var(--dv-nav-tune-room-next-y) !important;
  margin-right: 0 !important;
  margin-bottom: 0 !important;
}

/* Promo calendar month/year nav (was HTML ←/→ in Twig). */
.promo-calendar__head {
  align-items: center !important;
}

.promo-calendar__nav {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 2.4rem !important;
  height: 2.4rem !important;
  padding: 0 !important;
  font-size: 0 !important;
  line-height: 0 !important;
  overflow: hidden;
  text-decoration: none !important;
  color: var(--dv-color-accent) !important;
  background: color-mix(in srgb, var(--dv-color-bg) 50%, transparent) !important;
  border: 0 !important;
  border-radius: var(--dv-calendar-view-radius, 999px) !important;
  transition: background 0.18s ease, box-shadow 0.18s ease, color 0.18s ease;
}

.promo-calendar__nav:hover {
  color: var(--dv-color-link) !important;
  background: color-mix(in srgb, var(--dv-color-bg) 92%, transparent) !important;
  box-shadow: var(--dv-shadow);
}

.promo-calendar__nav--prev::before,
.promo-calendar__nav--next::before {
  content: "" !important;
  display: block !important;
  width: var(--dv-nav-chevron-size);
  height: var(--dv-nav-chevron-size);
  border: solid currentColor;
  border-width: 0 2px 2px 0;
  padding: 0 !important;
  transform-origin: center !important;
}

.promo-calendar__nav--prev::before {
  transform: rotate(135deg) !important;
  margin-left: var(--dv-nav-tune-calendar-prev-x) !important;
  margin-top: var(--dv-nav-tune-calendar-prev-y) !important;
}

.promo-calendar__nav--next::before {
  transform: rotate(-45deg) !important;
  margin-left: var(--dv-nav-tune-calendar-next-x) !important;
  margin-top: var(--dv-nav-tune-calendar-next-y) !important;
}

/* Circle + colour states (§17.4 reference). */
.carousel__prev,
.carousel__next,
.room__prev,
.room__next,
.slick-prev,
.slick-next,
body[class*="skin-"] .carousel__prev,
body[class*="skin-"] .carousel__next,
body[class*="skin-"] .room__prev,
body[class*="skin-"] .room__next,
body[class*="skin-"] .slick-prev,
body[class*="skin-"] .slick-next,
body[class*="skin-"] .promo-embed--carousel .promo-embed__track .slick-prev,
body[class*="skin-"] .promo-embed--carousel .promo-embed__track .slick-next {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--dv-color-accent) !important;
  background: color-mix(in srgb, var(--dv-color-bg) 50%, transparent) !important;
  border: 0 !important;
  border-radius: 999px !important;
  box-shadow: none;
  transition: background 0.18s ease, box-shadow 0.18s ease, color 0.18s ease;
}

.carousel__prev:hover,
.carousel__next:hover,
.room__prev:hover,
.room__next:hover,
.slick-prev:hover,
.slick-next:hover,
body[class*="skin-"] .carousel__prev:hover,
body[class*="skin-"] .carousel__next:hover,
body[class*="skin-"] .room__prev:hover,
body[class*="skin-"] .room__next:hover,
body[class*="skin-"] .slick-prev:hover,
body[class*="skin-"] .slick-next:hover {
  color: var(--dv-color-link) !important;
  background: color-mix(in srgb, var(--dv-color-bg) 92%, transparent) !important;
  box-shadow: var(--dv-shadow);
}

.slick-prev.slick-disabled,
.slick-next.slick-disabled {
  opacity: 0.35;
  cursor: default;
}