/* vacationpv self-contained enhancements (no external deps, no Squarespace runtime)
   Restores: accordion toggle, masonry gallery layout, image lightbox, scroll fade-ins,
   and a keyless Google Map. Progressive enhancement — everything degrades gracefully. */

/* ---------- Accordion ---------- */
.accordion-item__title-wrapper { cursor: pointer; }
.accordion-item__dropdown {
  display: block !important;      /* override Squarespace's display:none so our height animation can reveal content */
  height: 0;
  overflow: hidden;
  opacity: 0;
  transition: height .38s cubic-bezier(.4,0,.2,1), opacity .38s ease;
}
.accordion-item.vpv-open > .accordion-item__dropdown { opacity: 1; }
/* Draw our own +/- icon so it never depends on Squarespace's baked icon state */
.accordion-icon-container .plus { display: none !important; }
.accordion-icon-container {
  position: relative;
  width: 20px; height: 20px;
  flex: 0 0 20px;
}
.accordion-icon-container::before,
.accordion-icon-container::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  background: currentColor;
  transition: transform .38s cubic-bezier(.4,0,.2,1), opacity .3s ease;
}
.accordion-icon-container::before { width: 100%; height: 2px; transform: translate(-50%, -50%); }        /* horizontal bar (always) */
.accordion-icon-container::after  { width: 2px;  height: 100%; transform: translate(-50%, -50%); }        /* vertical bar (closed = +) */
.accordion-item.vpv-open .accordion-icon-container::after {
  transform: translate(-50%, -50%) rotate(90deg);
  opacity: 0;
}

/* ---------- Masonry gallery (override Squarespace's JS absolute positioning) ---------- */
.gallery-masonry-wrapper {
  height: auto !important;
  column-count: 3;
  column-gap: 12px;
}
@media (max-width: 991px) { .gallery-masonry-wrapper { column-count: 2; column-gap: 8px; } }
@media (max-width: 991px) { .gallery-masonry-item { margin-bottom: 8px !important; } }
@media (max-width: 380px)  { .gallery-masonry-wrapper { column-count: 1; } }
.gallery-masonry-item {
  position: static !important;
  width: 100% !important;
  transform: none !important;
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  margin: 0 0 12px !important;
  display: block;
}
.gallery-masonry-item-wrapper { height: auto !important; overflow: visible !important; }
.gallery-masonry-item img {
  position: static !important;
  width: 100% !important;
  height: auto !important;
  display: block;
  cursor: zoom-in;
  border-radius: 2px;
}

/* ---------- Scroll fade-in ---------- */
.vpv-fade {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .7s ease, transform .7s cubic-bezier(.4,0,.2,1) !important;
  will-change: opacity, transform;
}
.vpv-fade.vpv-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .vpv-fade { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ---------- Lightbox ---------- */
.vpv-lb {
  position: fixed; inset: 0; z-index: 2147483000;
  background: rgba(10,10,12,.94);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden; transition: opacity .3s ease;
  touch-action: pan-y;
}
.vpv-lb.vpv-lb-open { opacity: 1; visibility: visible; }
.vpv-lb__img {
  max-width: 92vw; max-height: 88vh;
  object-fit: contain;
  box-shadow: 0 10px 60px rgba(0,0,0,.5);
  user-select: none; -webkit-user-drag: none;
  transition: opacity .18s ease;
}
.vpv-lb__btn {
  position: absolute; background: rgba(255,255,255,.12); color: #fff;
  border: 0; cursor: pointer; display: flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; border-radius: 50%; font-size: 26px; line-height: 1;
  transition: background .2s ease; -webkit-tap-highlight-color: transparent;
}
.vpv-lb__btn:hover { background: rgba(255,255,255,.24); }
.vpv-lb__close { top: 18px; right: 18px; font-size: 30px; }
.vpv-lb__prev { left: 18px; top: 50%; transform: translateY(-50%); }
.vpv-lb__next { right: 18px; top: 50%; transform: translateY(-50%); }
.vpv-lb__count {
  position: absolute; bottom: 20px; left: 0; right: 0; text-align: center;
  color: rgba(255,255,255,.85); font: 500 14px/1 "Work Sans", sans-serif; letter-spacing: .04em;
}
@media (max-width: 640px) {
  .vpv-lb__prev, .vpv-lb__next { width: 44px; height: 44px; font-size: 22px; }
  .vpv-lb__prev { left: 8px; } .vpv-lb__next { right: 8px; }
  .vpv-lb__close { top: 10px; right: 10px; }
  .vpv-lb__img { max-width: 96vw; max-height: 82vh; }
}
body.vpv-lb-lock { overflow: hidden; }

/* ---------- Scaled headings ----------
   The visible scaled span is display:inline-block; give the container text-align:center
   so it (and its text) is centered on both mobile and desktop. */
.sqsrte-scaled-text-container { text-align: center !important; }
/* Keep scaled headings hidden until JS has sized them, so they never flash at the wrong
   (baked desktop) size first. JS adds .vpv-sized; a 1.5s safety timeout reveals regardless. */
.sqsrte-scaled-text-container:not(.vpv-sized) { visibility: hidden; }
/* Elements carry inline `transition-duration:.6s` with default transition-property:all,
   so our font-size recompute would animate ("expand/reduce"). Make sizing instant. */
.sqsrte-scaled-text,
.sqsrte-scaled-text h1, .sqsrte-scaled-text h2, .sqsrte-scaled-text h3,
.sqsrte-scaled-text h4, .sqsrte-scaled-text h5, .sqsrte-scaled-text p,
.sqsrte-scaled-text a, .sqsrte-scaled-text strong {
  transition: none !important;
}

/* ---------- Regular headings: size to screen WIDTH ----------
   Squarespace sizes h1/h2/h3 from min(100vh,900px) (viewport HEIGHT) → oversized long
   headings on both desktop and mobile. Cap them to width-based clamps. Scaled-text headings
   are unaffected (more-specific `... .sqsrte-scaled-text h2 {font-size:inherit!important}` wins). */
.sqs-html-content h1 { font-size: clamp(26px, 4vw, 40px) !important; }
.sqs-html-content h2 { font-size: clamp(21px, 3vw, 32px) !important; }
.sqs-html-content h3 { font-size: clamp(19px, 3.6vw, 40px) !important; }

/* ---------- Map (interactive Leaflet, keyless CARTO Voyager tiles) ---------- */
.sqs-block-map .sqs-block-content { height: 100%; }
.vpv-map-wrap { position: relative; width: 100%; height: 100%; min-height: 380px; overflow: hidden; }
.vpv-map { position: absolute; inset: 0; width: 100%; height: 100%; }
/* Keep the required attribution credit small and unobtrusive */
.vpv-map .leaflet-control-attribution { font-size: 10px; opacity: .7; }
/* Custom SVG pin */
.vpv-pin svg { display: block; filter: drop-shadow(0 2px 3px rgba(0,0,0,.35)); }