/* Site overrides — minimal additions on top of the actual Squarespace vendor CSS.
   The vendor CSS already handles header layout, breakpoints, burger, folder dropdowns,
   transparent/solid header switching, etc. Only add rules here for things that need
   the Squarespace runtime JS to function (and which we are simulating). */

/* Adobe Typekit fonts may not be available without the owner's kit; provide
   Google Font fallbacks that map to the same families used by Squarespace tokens. */
:root {
  --adobe-garamond-fallback: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --heading-font-font-family: var(--display-font-family);
  --small-text-size: 1.1rem;
  --small-text-size-value: 1.1;
  --normal-text-size: 1.32rem;
  --normal-text-size-value: 1.32;
  --large-text-size: 1.65rem;
  --large-text-size-value: 1.65;
  --primary-button-font-font-family: var(--display-font-family);
  --secondary-button-font-font-family: var(--display-font-family);
  --tertiary-button-font-font-family: var(--display-font-family);
  --header-button-font-font-family: var(--display-font-family);
  --primary-button-font-font-size: 1.05rem;
  --primary-button-font-font-size-value: 1.05;
  --secondary-button-font-font-size: 1.15rem;
  --secondary-button-font-font-size-value: 1.15;
  --tertiary-button-font-font-size: 0.95rem;
  --tertiary-button-font-font-size-value: 0.95;
  --header-button-font-font-size: 0.95rem;
  --header-button-font-font-size-value: 0.95;
}

/* Hide YouTube player overlay UI (play button, branding, title) in background videos */
.sqs-video-background iframe {
  pointer-events: none;
}

/* Squarespace sets .header { pointer-events: none } so click-through works on the
   transparent area, then re-enables pointer-events on specific inner targets via JS
   or via more specific CSS. Without their runtime, re-enable for all interactive
   header descendants. */
.header .header-display-desktop,
.header .header-display-mobile,
.header .header-burger,
.header .header-actions,
.header .header-title,
.header .header-nav,
.header .header-nav-wrapper,
.header .header-nav-list,
.header .header-nav-item,
.header .header-menu,
.header a,
.header button {
  pointer-events: auto;
}

/* Hide elements that only show in Squarespace admin/edit mode */
.sqs-edit-mode-only,
.squarespace-managed-ui {
  display: none !important;
}

/* Squarespace runtime normally toggles section background image data-load="false" -> "true"
   and lets the browser load it. The img tag in our static HTML already has a real src,
   so we just need to ensure it's positioned and sized correctly inside .section-background. */
.section-background {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.section-background > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.section-background-overlay {
  position: absolute;
  inset: 0;
  background: hsl(var(--black-hsl));
}

.page-section {
  position: relative;
}

.page-section > .content-wrapper {
  position: relative;
  z-index: 2;
}

/* Mobile menu drawer — Squarespace runtime toggles the menu open via a body class.
   Vendor CSS sets .header-menu { opacity: 0; visibility: hidden } by default; flip it
   when our JS sets body.header--menu-open. */
body.header--menu-open .header-menu {
  opacity: 1;
  visibility: visible;
}

/* Keep burger button above the full-screen menu overlay so it can close the menu.
   .header-inner (z-index:1) and .header-menu (z-index:1, position:fixed) are siblings
   inside .header-announcement-bar-wrapper. Since .header-menu comes later in DOM it
   paints on top. Raise .header-inner above it when menu is open. */
body.header--menu-open .header-inner {
  z-index: 2;
}

/* Override Squarespace's slide-in subfolder animation in the mobile menu.
   Instead, show subfolders inline as toggleable sections. */

/* The vendor CSS positions all nav-folders absolutely for its slide animation.
   Reset the root folder and subfolders to normal flow to prevent layout jumps. */
.header-menu-nav-folder[data-folder='root'] {
  position: relative;
  transform: none !important;
  min-height: auto;
  max-height: none;
  overflow: visible;
}
.header-menu-nav-folder[data-folder]:not([data-folder='root']) {
  position: relative;
  transform: none !important;
  display: none;
  min-height: auto;
  max-height: none;
  overflow: visible;
  width: 100%;
}
.header-menu-nav-folder[data-folder]:not([data-folder='root']).folder-open {
  display: flex;
}
/* Hide back buttons — not needed with inline toggle */
.header-menu .header-menu-controls {
  display: none;
}
/* Stop the nav list from sliding up on open (vendor sets translateY(20px) by default) */
.header-menu-nav-list {
  transform: none !important;
}

/* Dropdown arrow on folder parent items */
.header-menu a[data-folder-id] .header-menu-nav-item-content {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
}
.header-menu a[data-folder-id] .header-menu-nav-item-content::after {
  content: '';
  display: inline-block;
  width: 0.5em;
  height: 0.5em;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform 250ms ease;
  flex-shrink: 0;
  margin-top: -0.15em;
}
.header-menu a[data-folder-id].folder-parent-open .header-menu-nav-item-content::after {
  transform: rotate(-135deg);
  margin-top: 0.15em;
}

/* Submenu items: indented and smaller to distinguish from top-level */
.header-menu-nav-folder[data-folder]:not([data-folder='root']) .header-menu-nav-item a {
  margin-left: 8vw;
  margin-right: 8vw;
  opacity: 0.75;
  font-size: 0.85em;
}

/* Push menu items down so they clear the header logo visible through the overlay */
.header-menu-nav-folder[data-folder='root'] > .header-menu-nav-folder-content {
  padding-top: calc(6vw + 50px + 2vw);
}

/* Visually-hidden helper used by Squarespace markup */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Carousel — show multiple slides in a horizontal row instead of one at a time.
   Override vendor grid (all slides stacked in same cell) to a flex row. */
.user-items-list-carousel__slides {
  display: flex !important;
  opacity: 1 !important;
  overflow: visible;
  gap: 20px;
  grid-gap: 20px !important;
}
.user-items-list-carousel__slides-revealer {
  overflow: hidden;
}
.user-items-list-carousel__slide {
  transform: none !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  flex: 0 0 calc((100% - 40px) / 3);
  min-width: calc((100% - 40px) / 3);
  box-sizing: border-box;
  padding: 3% 5% !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  align-self: stretch;
}
/* Make the inner card fill the full slide height so all boxes match */
.user-items-list-carousel__slide .list-item-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
}
@media screen and (max-width: 899px) {
  .user-items-list-carousel__slide {
    flex: 0 0 calc((100% - 20px) / 2);
    min-width: calc((100% - 20px) / 2);
  }
}
@media screen and (max-width: 575px) {
  .user-items-list-carousel__slide {
    flex: 0 0 100%;
    min-width: 100%;
  }
}

/* Carousel arrow buttons */
.user-items-list-carousel__arrow-button,
.mobile-arrow-button {
  pointer-events: auto;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  color: inherit;
}
.user-items-list-carousel__arrow-icon {
  width: 44px;
  height: 18px;
}
.user-items-list-carousel__arrow-icon-path,
.mobile-arrow-icon-path {
  stroke: currentColor;
  fill: none;
  stroke-width: 1.5;
}

/* Fluid image blocks — Squarespace loads external CSS + JS for these.
   Replicate the essential layout rules so images display correctly. */
.sqs-block[data-definition-name='website.components.imageFluid'] .sqs-block-content,
.sqs-block[data-definition-name='website.components.imageFluid'] .image-block-outer-wrapper,
.sqs-block[data-definition-name='website.components.imageFluid'] .sqs-image {
  width: 100%;
  height: 100%;
}
.sqs-block[data-definition-name='website.components.imageFluid'] .sqs-image-content {
  position: relative;
  width: var(--image-component-container-width, 100%);
  height: var(--image-component-container-height, 100%);
}
.sqs-block[data-definition-name='website.components.imageFluid'] .design-layout-fluid img {
  width: 100%;
  height: 100%;
  position: absolute;
}
.sqs-block[data-definition-name='website.components.imageFluid'] .design-layout-fluid .sqs-image {
  display: flex;
}
.sqs-block[data-definition-name='website.components.imageFluid']
  .design-layout-fluid.image-position-left
  .sqs-image {
  justify-content: flex-start;
}
.sqs-block[data-definition-name='website.components.imageFluid']
  .design-layout-fluid.image-position-center
  .sqs-image {
  justify-content: center;
}
.sqs-block[data-definition-name='website.components.imageFluid']
  .design-layout-fluid.image-position-right
  .sqs-image {
  justify-content: flex-end;
}
.sqs-block[data-definition-name='website.components.imageFluid'] .fluidImageOverlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  mix-blend-mode: var(--image-component-overlay-blend-mode);
  opacity: var(--image-component-overlay-opacity);
  background-color: var(--image-block-overlay-color);
}
.sqs-block[data-definition-name='website.components.imageFluid']
  .design-layout-fluid
  .fluid-image-container
  .content-fill,
.sqs-block[data-definition-name='website.components.imageFluid']
  .design-layout-fluid
  .fluid-image-container
  .content-fill
  img {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  display: block;
}
/* Container-fit variant: image uses its native aspect ratio */
.design-layout-fluid.image-component-container-fit .fluid-image-container {
  --image-component-container-width: initial;
  --image-component-container-height: initial;
}
/* Ensure the image container has a height from the native aspect ratio */
.fluid-image-container {
  aspect-ratio: var(--image-component-native-aspect-ratio);
}

/* ── Gallery block grid ─────────────────────────────────────────────────────── */
/* Replace Squarespace's float-based grid with CSS Grid for clean equal spacing
   and automatic responsive scaling. */

/* Reset vendor float layout */
.sqs-gallery-block-grid .slide {
  float: none !important;
  width: auto !important;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  position: relative;
}

/* CSS Grid on the gallery container */
.sqs-gallery-block-grid .sqs-gallery {
  display: grid;
  gap: 35px;
  grid-template-columns: repeat(6, 1fr);
}
@media (max-width: 899px) {
  .sqs-gallery-block-grid .sqs-gallery {
    grid-template-columns: repeat(4, 1fr);
  }
}
@media (max-width: 575px) {
  .sqs-gallery-block-grid .sqs-gallery {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Make margin-wrapper and anchor fill the slide cell */
.sqs-gallery-block-grid .slide .margin-wrapper,
.sqs-gallery-block-grid .slide .margin-wrapper a.image-slide-anchor {
  position: absolute !important;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  display: block;
  overflow: hidden;
}

/* Fill the square with the image */
.sqs-gallery-block-grid .slide .margin-wrapper a.image-slide-anchor img.thumb-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Hide vendor elements that add extra height (content-wrapper, meta, title) */
.sqs-gallery-block-grid .slide .margin-wrapper .content-wrapper,
.sqs-gallery-block-grid .slide .margin-wrapper .image-slide-title,
.sqs-gallery-block-grid .slide .meta {
  display: none !important;
}

/* Override vendor rule that hides images until Squarespace runtime adds .loaded */
.sqs-gallery-block-grid img:not(.loaded) {
  opacity: 1;
}

/* Gallery strips also wait for Squarespace to add runtime visibility attributes.
   In the static Astro version that never happens, so keep items visible by default. */
.gallery-strips-item:not([data-show]) .gallery-strips-item-wrapper {
  opacity: 1 !important;
  animation-name: none !important;
}

/* Newsletter block: vendor hides it until Squarespace runtime adds .rendered */
.newsletter-block:not(.rendered) {
  opacity: 1;
}

/* ── Gallery Lightbox ──────────────────────────────────────────────────────── */
.gallery-lightbox-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.25s ease,
    visibility 0.25s ease;
}
.gallery-lightbox-overlay.lightbox-open {
  opacity: 1;
  visibility: visible;
}
.gallery-lightbox-overlay img {
  max-width: 90vw;
  max-height: 88vh;
  object-fit: contain;
  border-radius: 2px;
  user-select: none;
}
.gallery-lightbox-close {
  position: absolute;
  top: 20px;
  right: 24px;
  background: none;
  border: none;
  color: #fff;
  font-size: 36px;
  cursor: pointer;
  line-height: 1;
  padding: 4px 10px;
  z-index: 1;
}
.gallery-lightbox-close:hover {
  opacity: 0.7;
}
.gallery-lightbox-prev,
.gallery-lightbox-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: #fff;
  font-size: 40px;
  cursor: pointer;
  padding: 12px 18px;
  z-index: 1;
  line-height: 1;
}
.gallery-lightbox-prev {
  left: 12px;
}
.gallery-lightbox-next {
  right: 12px;
}
.gallery-lightbox-prev:hover,
.gallery-lightbox-next:hover {
  opacity: 0.7;
}

/* ── Blog basic grid ─────────────────────────────────────────────────────── */
/* Squarespace runtime adds .is-loaded to fade in blog cards; override for static build */
.blog-basic-grid .blog-basic-grid--container {
  opacity: 1 !important;
  transform: none !important;
}