/* Squid Boy lavender site (20 Oct 2026): additions for index, menu and locations only.
   Today's design lives in style.css; this file adds the new parts in the same language. Every url() is relative. */

/* ---------- photos in <picture>: the <img> keeps today's full-bleed fill ---------- */
.sb3-hero-bg picture,
.sb3-feature-bg picture,
.sub-hero-bg picture { display: contents; }
/* an admin hero photo shows as uploaded (today's squid photo is flipped in style.css) */
html body .sb3-hero-bg img.is-cms {
  transform: none !important;
  animation: sbKenburnsSlow 24s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
}

/* ---------- carousel: a poster slide is one link, the whole picture ---------- */
.lav-poster-link {
  position: absolute; inset: 0; z-index: 4;
  display: block; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.lav-poster-link:focus-visible { outline: 3px solid #ffffff; outline-offset: -10px; }
.lav-poster-link .sb3-carousel-poster-hit { pointer-events: none; }
.lav-poster-link:hover .sb3-carousel-poster-hit {
  background: rgba(255, 255, 255, .10);
  border-color: rgba(255, 255, 255, .55);
  animation: none;
}
.lav-poster-link .sb3-carousel-poster-cta .sb3-poster-hint {
  position: static; transform: none;
  font-size: .78rem; padding: .7rem 1.2rem;
  animation: lavHintBob 2.4s ease-in-out infinite;
}
@keyframes lavHintBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
/* phones: the photo is cropped, so the hint sits centred above the dots instead of under "JOIN US NOW" */
@media (max-width: 720px) {
  .lav-poster-link .sb3-carousel-poster-hit {
    left: 0; right: 0; top: auto; bottom: 4.4rem;
    width: auto; height: 0;
    border: 0; background: none; animation: none;
  }
}
#outletCarousel.lav-single .sb3-carousel-arrow,
#outletCarousel.lav-single .sb3-carousel-dots,
#outletCarousel.lav-single .sb3-carousel-counter { display: none !important; }

/* ---------- film: Meet Squid Boy (framed like the menu section; the player is a 16:9 card) ---------- */
.sb3-film .lav-film {
  position: relative;
  max-width: 960px;
  margin: 0 auto;
  aspect-ratio: 16 / 9;
  border-radius: 14px;
  overflow: hidden;
  background: #1a0712;
  border: 1px solid rgba(232,178,60, 0.35);
  box-shadow: 0 22px 60px rgba(46, 27, 38, .18);
}
.lav-film video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block;
  background: #000000;
}
.lav-film-play {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  margin: 0; padding: 0; border: 0;
  display: block;
  background: #1a0712;
  color: #ffffff;
  font: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.lav-film-play img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .9s cubic-bezier(0.16, 1, 0.3, 1);
}
.lav-film-play::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(14,24,48, .38) 0%, rgba(14,24,48, 0) 38%);
}
.lav-film-play:hover img { transform: scale(1.03); }
.lav-film-play:focus-visible { outline: 3px solid var(--primary); outline-offset: 3px; }
.lav-film-disc {
  position: absolute; left: 50%; top: 50%; z-index: 1;
  width: clamp(62px, 8vw, 86px); height: clamp(62px, 8vw, 86px);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: #f5369c;
  color: #ffffff;
  font-size: clamp(1.25rem, 2vw, 1.7rem);
  box-shadow: 0 0 0 10px rgba(245,54,156, .24), 0 14px 34px rgba(46, 4, 26, .45);
  transition: transform .3s ease, box-shadow .3s ease;
}
.lav-film-disc i { margin-left: .18em; }
.lav-film-play:hover .lav-film-disc {
  transform: translate(-50%, -50%) scale(1.06);
  box-shadow: 0 0 0 14px rgba(245,54,156, .2), 0 18px 40px rgba(46, 4, 26, .5);
}
.lav-film-label {
  position: absolute; z-index: 1;
  top: clamp(.7rem, 2vw, 1.2rem); left: clamp(.7rem, 2vw, 1.2rem);
  padding: .5rem .95rem;
  border-radius: 999px;
  background: rgba(14,24,48, .62);
  white-space: nowrap;
  font-family: 'Inter', sans-serif;
  font-weight: 800;
  font-size: .72rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: #fff7ec;
}
.lav-film-dur { color: #f6e7b4; }
.lav-film.is-playing .lav-film-play { display: none; }
@media (max-width: 600px) {
  .lav-film-label { font-size: .6rem; letter-spacing: .16em; padding: .4rem .75rem; }
}

/* ---------- locations: OpenStreetMap tiles, a dark look by inverting them, "Use my location" ---------- */
#map.map-dark .leaflet-tile-pane { filter: invert(1) hue-rotate(180deg) brightness(.95) contrast(.9) saturate(.55); }
.sb-marker-pin[style*="--pin"]::after { background: var(--pin); }
.map-locate:not([hidden]) {
  display: block;
  padding: .85rem 1rem;
  border-bottom: 1px solid var(--line);
}
.locate-btn {
  display: flex; align-items: center; justify-content: center; gap: .55rem;
  width: 100%;
  padding: .72rem 1rem;
  border-radius: 999px;
  border: 1px solid var(--primary);
  background: var(--primary);
  color: #ffffff;
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: .74rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 0 12px rgba(245,54,156, .3);
  transition: background .2s ease, box-shadow .2s ease;
}
.locate-btn:hover { background: var(--primary-dark); box-shadow: 0 0 18px rgba(245,54,156, .4); }
.locate-btn:focus-visible { outline: 3px solid var(--secondary); outline-offset: 2px; }
.locate-btn[disabled] { opacity: .75; cursor: progress; }
.locate-status { margin: .55rem 0 0; font-size: .8rem; line-height: 1.45; color: var(--text-light); text-align: center; }
.locate-status:empty { display: none; }
.nearby-list:not([hidden]) { display: block; margin-top: .45rem; }
.outlet-item.nearby-item { position: relative; padding-left: 2.7rem; }
.nearby-rank {
  position: absolute; left: .75rem; top: .9rem;
  width: 1.45rem; height: 1.45rem;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--primary);
  color: #ffffff;
  font-size: .72rem; font-weight: 800;
}
.nearby-dir {
  display: inline-flex; align-items: center; gap: .35rem;
  margin-top: .35rem;
  font-size: .78rem; font-weight: 700;
  color: var(--primary);
  text-decoration: none;
}
.nearby-dir:hover { text-decoration: underline; }

/* ---------- footer, same as the form pages: logo keeps its shape, inline brand icons, privacy link ---------- */
.lav-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.lav-ico { flex: none; display: inline-block; width: 1.2em; height: 1.2em; vertical-align: -0.2em; }
.footer-brand img { width: auto; }
.footer-bottom a { color: rgba(255, 255, 255, 0.62); text-decoration: underline; text-underline-offset: 3px; }
.footer-bottom a:hover { color: var(--secondary); }
.footer-bottom .sep { margin: 0 0.5rem; opacity: 0.6; }

/* ---------- outlet carousel: the WHOLE picture shows (20 Oct; it was 560-760px tall and cropped every picture) ----------
   Desktop: a 16:9 box (the poster's shape), never taller than 80% of the screen. Each picture is drawn whole ("contain")
   over a blurred, darkened copy of itself. Phones: the picture across the top, the text card underneath it.
   Only when the page script runs (it adds .sb-fit and the --bg picture); without it the old cover look stays. */
#outletCarousel.sb-fit { height: auto !important; min-height: 340px !important; aspect-ratio: 16 / 9; max-height: 80vh; }
#outletCarousel.sb-fit .sb3-carousel-slide { background-image: none !important; background-color: #1a0712; }
#outletCarousel.sb-fit .sb3-carousel-slide::before,
#outletCarousel.sb-fit .sb3-carousel-slide::after {
  content: ""; position: absolute; pointer-events: none; background-image: var(--bg, none); background-repeat: no-repeat;
}
#outletCarousel.sb-fit .sb3-carousel-slide::before {
  inset: -40px; z-index: 0; background-size: cover; background-position: center; filter: blur(26px) brightness(.5) saturate(1.15);
}
#outletCarousel.sb-fit .sb3-carousel-slide::after { inset: 0; z-index: 1; background-size: contain; background-position: center; }
/* the poster is the link as a whole; the old "JOIN US NOW" hotspot pointed at the previous poster's artwork */
#outletCarousel.sb-fit .lav-poster-link .sb3-carousel-poster-hit { display: none; }
#outletCarousel.sb-fit .sb3-carousel-slide--poster .sb3-carousel-overlay { background: none !important; }
#outletCarousel.sb-fit .lav-poster-link:hover { box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .55); }
/* under 900px the picture never sits under the card: a band across the top (16:9 on tablets, the 4:3 photo's
   full width on phones), the card underneath it, the poster's "Tap to Register" in the space below the poster */
@media (max-width: 899px) {
  #outletCarousel.sb-fit { aspect-ratio: auto; height: calc(56.25vw + 26rem) !important; min-height: 0 !important; max-height: none !important; }
  #outletCarousel.sb-fit .sb3-carousel-slide::after { background-position: center top; background-size: auto 56.25vw; }
  #outletCarousel.sb-fit .sb3-carousel-card { top: auto !important; bottom: 2.7rem !important; transform: none !important; padding: 1.1rem 1.2rem !important; }
  #outletCarousel.sb-fit .sb3-carousel-card p { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  #outletCarousel.sb-fit .sb3-carousel-arrow { top: 28.125vw !important; }
  #outletCarousel.sb-fit .lav-poster-link .sb3-carousel-poster-hit { display: block; }
  /* every other picture whole INSIDE the band, whatever its shape (admin uploads can be square or tall) */
  #outletCarousel.sb-fit .sb3-carousel-slide:not(.sb3-carousel-slide--poster)::after { bottom: auto; height: 56.25vw; background-size: contain; background-position: center; }
}
@media (max-width: 540px) {
  #outletCarousel.sb-fit { height: calc(75vw + 22rem) !important; }
  #outletCarousel.sb-fit .sb3-carousel-slide::after { background-size: 100% auto; }
  #outletCarousel.sb-fit .sb3-carousel-slide:not(.sb3-carousel-slide--poster)::after { height: 75vw; background-size: contain; }
  #outletCarousel.sb-fit .sb3-carousel-slide--poster::after { background-position: center 30%; }
  #outletCarousel.sb-fit .sb3-carousel-arrow { top: 37.5vw !important; }
}