/* ntws.css — overrides that let the site run WITHOUT Squarespace's runtime JS.
   Loaded after the Squarespace stylesheets so these rules win.

   Two things Squarespace's JS used to do that we now handle in CSS:
   1. Image load-in: its loader added a `.loaded` class (and set `src`) on
      gallery/summary images; without it those images stayed at opacity:0.
   2. Mobile menu: its JS revealed the root nav "folder" on open and slid a
      sub-panel in for the Services folder. We reveal the root folder on open
      and flatten the Services sub-folder into an inline group instead.
   The hamburger open/close itself is handled by a small script in Header.astro. */

/* ---- 1. Image load-in gating ------------------------------------------- */
.sqs-gallery img,
.sqs-gallery-block-grid img,
.sqs-gallery-design-autocolumns-slide img,
.sqs-block-summary-v2 .summary-thumbnail-container img {
  opacity: 1 !important;
}

/* imageFluid "content-fit" images (e.g. the footer logo) take their aspect
   ratio from --image-component-native-aspect-ratio, which Squarespace's JS
   applied. Without it the image stretches to fill its cell; re-apply it so the
   image keeps its real shape (the footer logo is square, 632/632). */
/* Match Squarespace's JS: content-fit images are positioned ABSOLUTE and
   object-fit:contain within their grid cell (out of flow, so they don't inflate
   the Fluid Engine rows), showing the image at native aspect, contained. Our
   old `position:static; height:100%` version put them in flow and inflated the
   cells, making some images the wrong size (and the footer logo non-responsive).
   This also lets the footer logo scale with the viewport like the live site. */
.sqs-block[data-definition-name="website.components.imageFluid"] .content-fit img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  aspect-ratio: auto !important;
  margin: 0 !important;
}

/* ---- 2. Mobile menu (no folder-navigation JS) -------------------------- */
/* Reveal the root menu list when the overlay is open. */
.header--menu-open .header-menu-nav-folder[data-folder="root"] {
  display: flex !important;
  transform: none !important;
  position: relative !important;
}

/* Flatten every sub-folder (e.g. Services) into an inline group in place of
   the original slide-in panel, and drop its "back" control. */
.header--menu-open .header-menu-nav-folder:not([data-folder="root"]) {
  display: flex !important;
  transform: none !important;
  position: static !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
}
.header--menu-open .header-menu-nav-folder:not([data-folder="root"]) .header-menu-controls {
  display: none !important;
}

/* Prevent the page from scrolling behind the open mobile menu. */
body.header--menu-open {
  overflow: hidden;
}

/* ---- 3. "Gallery strips" galleries ------------------------------------- */
/* Squarespace lays these out as a justified row (all images the SAME height,
   widths proportional to each image's aspect ratio) that fills the container
   width — via JS. We re-create it: a flex row whose items get flex-grow +
   aspect-ratio set to each image's aspect ratio (in BaseLayout), so widths are
   proportional and heights uniform. The `opacity` reset undoes Squarespace's
   load-in gate, which its JS would otherwise clear. */
.gallery-strips .gallery-strips-wrapper {
  display: flex !important;
  flex-wrap: wrap;
  gap: 8px;
  align-items: stretch;
  width: 100%;
}
.gallery-strips .gallery-strips-item {
  position: relative !important;
  flex: 1 1 0 !important;      /* flex-grow is overridden per-aspect in JS */
  min-width: 120px;
  height: auto !important;
  aspect-ratio: 1 / 1;         /* fallback; JS sets each item's real ratio */
  margin: 0 !important;
  overflow: hidden;
}
.gallery-strips .gallery-strips-item-wrapper {
  height: 100% !important;
  width: 100% !important;
  opacity: 1 !important; /* Squarespace's JS reveals this; without it, hidden */
}
.gallery-strips .gallery-strips-item img {
  position: relative !important;
  height: 100% !important;
  width: 100% !important;
  object-fit: cover !important;
  display: block;
}

/* ---- 4. "User items list" carousels (fonts / colours) ------------------ */
/* JS-driven: the whole slide track is opacity:0 and every slide is stacked into
   one grid column until the JS runs, so nothing shows. Reveal the track and lay
   the slides out as a single row that fits ALL items (no arrows).
   On the Memory Bins page every item fits on one line at desktop widths, so the
   original prev/next arrows are pointless (the fonts row never scrolled) — we
   remove them for both carousels for consistency. On narrow screens where the
   items can't shrink further (min-width), the row falls back to swipe-scroll. */
.user-items-list-carousel__slides {
  opacity: 1 !important;
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 20px !important; /* matches Squarespace's data-space-between-slides = 20px */
  transform: none !important;
  /* The flex row is the scroll container (arrows removed). On desktop everything
     fits so there's no scroll; on narrow screens the row overflows and swipe-
     scrolls here. overflow-y MUST be explicit hidden — with only overflow-x set,
     CSS computes overflow-y to `auto`, which would let the row swallow the
     page's vertical scroll. Scrolling the row directly (not the outer holder)
     is what actually works: the holder's scroll extent was capped by this row's
     width:100%, so the holder never scrolled. */
  overflow-x: auto !important;
  overflow-y: hidden !important;
  overscroll-behavior-x: contain;
  /* Squarespace reserves a right gutter (~40px) for the arrow/peek; with arrows
     gone that just makes the strip's right margin larger than its left. Zero it
     so the row fills the centred container with symmetric margins. */
  padding-left: 0 !important;
  padding-right: 0 !important;
}
/* Default: fit 5 across (the fonts carousel has 5). grow:1 lets the items expand
   to fill the row exactly so the strip spans the full container (symmetric
   margins) instead of leaving trailing space on the right. shrink:0 + min-width
   is the mobile floor: when the row can't fit legibly it overflows and swipe-
   scrolls rather than squashing the items. */
.user-items-list-carousel__slide {
  transform: none !important;
  flex: 1 0 calc((100% - 4 * 20px) / 5) !important;
  min-width: 140px;
}
/* No drag/scroll interaction and the items aren't links, so drop the `grab`
   cursor Squarespace put on the track/slides — apply it carousel-wide so the
   wrappers (__slides / __slideshow-holder / __gutter) don't show it either. */
.user-items-list-carousel,
.user-items-list-carousel * {
  cursor: default !important;
}
/* The colours carousel has 6 items — size it to fit all 6 on one line (6 across,
   5 gaps) so it behaves like the fonts row (no arrows, no scroll on desktop).
   The swatch image scales down with the slide, but the label font-size is a
   fixed px so labels stay the same size. */
.user-items-list-carousel:has(.user-items-list-carousel__slides > :nth-child(6)) .user-items-list-carousel__slide {
  flex-basis: calc((100% - 5 * 20px) / 6) !important;
}
/* Colours only: Squarespace sizes each swatch at a fixed width (~161px) with a
   large right margin, so the swatches sit left-of-centre in their slots and the
   strip doesn't use the full width (unlike the fonts, whose images fill their
   slots). Make the swatch media fill the slot as a square so the 6 swatches span
   the full centred row with symmetric margins, matching the fonts strip. Scoped
   to the 6-item (colours) carousel so the wide font-sample images are untouched. */
.user-items-list-carousel:has(.user-items-list-carousel__slides > :nth-child(6)) .user-items-list-carousel__media-container {
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  aspect-ratio: 1 / 1 !important;
  margin: 0 0 12.9px 0 !important; /* keep the original gap below the swatch; drop the side margin */
}
.user-items-list-carousel:has(.user-items-list-carousel__slides > :nth-child(6)) .user-items-list-carousel__media-inner,
.user-items-list-carousel:has(.user-items-list-carousel__slides > :nth-child(6)) .user-items-list-carousel__media,
.user-items-list-carousel:has(.user-items-list-carousel__slides > :nth-child(6)) .user-items-list-carousel__slide img {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  object-fit: cover !important;
}
/* Remove the prev/next (and mobile) arrows on both carousels. */
.user-items-list-carousel [class*="arrow"] {
  display: none !important;
}
/* Let the outer wrappers pass through — the flex row (__slides) scrolls itself. */
.user-items-list-carousel__gutter,
.user-items-list-carousel__slideshow-holder {
  position: relative;
  overflow: visible !important;
}

/* ---- 5. Home: tighten reviews -> Instagram gap ------------------------- */
/* The reviews block spans many Fluid Engine rows, so its grid reserves far more
   height than the Elfsight widget uses — a big gap before the Instagram feed.
   Zeroing THIS grid's row-height scaling factor collapses the empty spacer rows
   so the section hugs its content (the heading + widget keep their own height).

   NOTE: this must target ONLY the reviews grid. It previously also matched
   `:has(.ntws-ig)`, but that grid holds the "@neatandtidywithstephanie" header
   image, whose height comes from the fluid-engine row track — zeroing the scaling
   factor collapsed the header to a sliver. That grid already lays out correctly
   from Squarespace's baked `--row-height-scaling-factor` (0.0215), so we leave it
   alone. See §6-note. */
.fluid-engine:has(.fe-block-yui_3_17_2_1_1718461053217_6120) {
  --row-height-scaling-factor: 0 !important;
}

/* ---- 6. "Website component" buttons (Fluid Engine) --------------------- */
/* These button blocks (e.g. "Order a Gift Certificate") are Squarespace
   "website components": their dedicated component CSS — removed with the
   Squarespace runtime — stretched the link to FILL its grid cell as a centered
   flex box. Their block wrapper is `.website-component-block`, so the classic
   `.sqs-block-button.sqs-stretched …` fill rules never match, and a later
   `display:inline-block` rule wins — so the button collapsed to text size
   (232x26 instead of the cell's 281x71). Re-fill the cell and center. */
.sqs-block-button-container.sqs-stretched .sqs-block-button-element {
  display: flex !important;
  width: 100% !important;
  height: 100% !important;
  align-items: center;
  justify-content: center;
}
/* The content wrapper between the cell and the button must pass the height
   through (Squarespace's stretched rule did this only for `.sqs-block-button`). */
.website-component-block .sqs-block-content:has(> .sqs-block-button-container.sqs-stretched) {
  height: 100% !important;
  display: flex !important;
}
/* …and the button container must grow to fill that content box, so the button
   stretches to the full cell WIDTH too (was 232 vs the cell's 281). */
.website-component-block .sqs-block-content > .sqs-block-button-container.sqs-stretched {
  flex: 1 1 auto !important;
}

/* ---- 7. FAQ accordion: answer text full width ------------------------- */
/* Intentional deviation from the original: the Squarespace accordion caps each
   answer (`__description`) at a small max-width (~300px, rendering ~728px), so
   the answer stops well short of the full-width divider rules / question text.
   Let answers run the full accordion width like the questions and rules do. */
.accordion-item__description {
  max-width: none !important;
  width: 100% !important;
}
/* Style links inside answers so they read as links (Squarespace rendered them
   in the body colour with no underline — indistinguishable from the text).
   Dark teal matches the brand button text; underline is the link affordance. */
.accordion-item__description a {
  /* Mid teal: clearly reads as a link on the pale-mint FAQ background (the brand
     button's own text colour is near-black, which looked like plain text). */
  color: rgb(13, 110, 114) !important; /* beats Squarespace's more-specific link colour */
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.accordion-item__description a:hover,
.accordion-item__description a:focus-visible {
  text-decoration-thickness: 2px;
}