/* Local overrides for the static mirror of sterlingfamilypractice.com.
   Additive only. These restore behaviour that Squarespace's (removed) runtime
   JavaScript used to provide; they do not change the original visual design. */

/* Section background images: Squarespace normally renders these into a WebGL
   canvas via its (removed) runtime and hides the plain <img> (visibility:hidden).
   Its own prefers-reduced-motion fallback simply shows the <img>; we do the same
   so hero/section backgrounds appear (without the decorative motion effects). */
.background-image-fx { visibility: visible; }

/* Masonry gallery (the certificate gallery on /sarahfletcher): Squarespace's JS
   positions the items into columns and fades them in. With the runtime removed,
   reveal the items and approximate the 5-column masonry with CSS columns. */
.gallery-masonry-item-wrapper { opacity: 1 !important; }
.gallery-masonry .gallery-masonry-wrapper { column-count: 5; column-gap: 12px; }
.gallery-masonry .gallery-masonry-item { break-inside: avoid; margin-bottom: 12px; display: block; width: 100% !important; }
.gallery-masonry .gallery-masonry-item img { width: 100%; height: auto; }
@media (max-width: 1200px) { .gallery-masonry .gallery-masonry-wrapper { column-count: 4; } }
@media (max-width: 900px)  { .gallery-masonry .gallery-masonry-wrapper { column-count: 3; } }
@media (max-width: 640px)  { .gallery-masonry .gallery-masonry-wrapper { column-count: 2; } }

/* Header stacking: the absolute, overlay header must paint above section
   backgrounds/borders (some of which use translateZ and would otherwise cover it
   on collection pages). Squarespace's JS managed this ordering. */
#header { z-index: 1000; }

/* Collection pages (the events list and event detail pages) are excluded from
   Squarespace's automatic first-section header offset, which its JS applied.
   Restore it so their content starts below the overlay header. */
body[class*="collection-type-events"] #page { padding-top: var(--header-height, 130px); }

/* Mobile menu: clip the off-screen "For Patients" subfolder panel so it can
   slide in/out cleanly (Squarespace's JS used to manage this). */
.header-menu { overflow: hidden; }

/* The nested mobile subfolder is display:none by default in site.css; keep it
   rendered (parked off-screen at translateX(100%)) so its slide animates. */
.header-menu-nav-folder .header-menu-nav-folder { display: flex; }

/* When a subfolder ("For Patients") is open, give it an opaque background and
   raise it so it fully covers the root list as it slides in (Squarespace's JS
   slid the root panel away; here the subfolder slides in over it instead). */
.header-menu-nav-folder .header-menu-nav-folder.header-menu-nav-folder--active {
  background-color: var(--siteBackgroundColor, #ffffff);
  z-index: 2;
  transform: translateX(0) !important;
}

/* "Collage" image layout (the Dr. Fletcher / Cynthia Yew bio blocks): on phones
   Squarespace's layout JS stacks the photo above the caption. Without the JS the
   flex row stays side-by-side and cramped, so restore the stacked layout at phone
   widths to match the live site. (Desktop is unaffected — it renders correctly on
   its own once sfp.js marks the caption text ready.) Scoped to collage only. */
@media (max-width: 767px) {
  .sqs-block-image .design-layout-collage.image-position-left { display: block; }
  .sqs-block-image .design-layout-collage.image-position-left > * {
    width: 100% !important; margin-left: 0 !important;
  }
  .sqs-block-image .design-layout-collage.image-position-left img,
  .sqs-block-image .design-layout-collage.image-position-left .intrinsic,
  .sqs-block-image .design-layout-collage.image-position-left .image-inset {
    width: 100% !important; height: auto !important;
  }
}

/* Accordion blocks (the six service pages): the toggle JavaScript was removed,
   so every panel but the first was stuck collapsed and unopenable. Show every
   panel's content permanently — each title stays as its heading with its full
   content directly beneath, in document order — and drop the +/- icon and the
   clickable affordance. Scoped to accordion blocks only; keeps the component's
   fonts, colors and spacing. */
.sqs-block-accordion .accordion-item__dropdown { display: block !important; }
.sqs-block-accordion .plus,
.sqs-block-accordion .arrow-container,
.sqs-block-accordion .accordion-item__icon,
.sqs-block-accordion .accordion-item__click-target-icon { display: none !important; }
.sqs-block-accordion .accordion-item__title-wrapper { cursor: default !important; }