/* ========================================
   FONT REPLACEMENTS
   Typekit fonts are domain-locked to lexiandzach.com.
   Google Fonts equivalents loaded via <link> in each HTML file:
     brandon-grotesque  → Raleway
     ff-meta-serif-web-pro → Source Serif 4
     futura-pt → Jost
     proxima-nova → Montserrat
   ======================================== */

/* Body text (was ff-meta-serif-web-pro) */
body {
  font-family: 'Source Serif 4', Georgia, serif !important;
}

/* Headings (was brandon-grotesque) */
h1, h2, h3 {
  font-family: 'Raleway', 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
}

/* Header nav, branding, cart, index nav (was brandon-grotesque) */
.Header-nav,
.Header-nav-inner,
a.Header-nav-item,
a.Header-branding,
.Header .Cart,
.Index-nav-text,
.Mobile-bar-branding {
  font-family: 'Raleway', 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
}

/* UI elements: buttons, mobile nav, footer, tagline, search, quotes (was futura-pt) */
.Mobile-overlay-nav-item,
.Mobile-overlay-folder-item,
.Header-tagline,
.Header-search,
.Footer-nav,
.Footer-nav-folder-heading,
.Footer-business-hours,
.Footer-business-hours-heading,
.Footer-business-info-item--name,
.sqs-block-button .sqs-block-button-element--small,
.sqs-block-button .sqs-block-button-element--medium,
.sqs-block-button .sqs-block-button-element--large,
.sqs-block-quote,
.sqs-block-quote .source,
.Mobile-bar .Cart,
.Index-gallery-item-content-heading,
.sqs-announcement-bar-text {
  font-family: 'Jost', 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
}

/* Secondary text: excerpts, subtitles, gallery body (was proxima-nova) */
.Footer-business-info,
.Index-gallery-item-content-body,
.image-subtitle p {
  font-family: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
}

/* Force ALL content visible - override Squarespace JS-dependent hiding */
* {
  visibility: visible !important;
  animation: none !important;
}

html, body {
  opacity: 1 !important;
}

/* Kill any loading overlay */
.Loader,
.sqs-spin {
  display: none !important;
}

/* Force images to display without JS lazy-loader */
img {
  opacity: 1 !important;
  visibility: visible !important;
}

/* Ensure gallery and sections are visible */
.sqs-gallery-block-slideshow .sqs-gallery-design-strip-slide,
.page-section,
.content-wrapper,
.content,
section,
[data-section-id],
.Index-page,
.Index-page-content {
  opacity: 1 !important;
  visibility: visible !important;
}

/* Force nav visibility */
.header-nav,
.header-nav-list,
.Header-nav--primary,
nav {
  opacity: 1 !important;
  visibility: visible !important;
}

/* Override any font-loading transparency */
html.wf-loading *,
html.wf-loading body {
  color: inherit !important;
  visibility: visible !important;
  animation: none !important;
}

/* ========================================
   PARALLAX BACKGROUND IMAGE FIX
   Squarespace uses JS to position these images;
   without JS we display them as CSS backgrounds
   ======================================== */

/* The parallax host is not needed without JS */
.Parallax-host-outer,
.Parallax-host {
  position: static !important;
}

.Parallax-item {
  display: none !important;
}

/* Index page sections with background images — full viewport height */
.Index-page--has-image {
  position: relative !important;
  min-height: 100vh !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
}

/* The figure containing the background image */
.Index-page-image {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  z-index: 0 !important;
  overflow: hidden !important;
}

.Index-page-image img {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
}

/* Ensure content overlays the background image */
.Index-page--has-image .Index-page-content {
  position: relative !important;
  z-index: 1 !important;
  width: 100% !important;
}

/* Non-banner sections without background images */
.Index-page:not(.Index-page--has-image) {
  position: relative !important;
}

/* Sections with background images but no --has-image class
   (like "our-story" and "the-proposal" which have Index-page-image figures) */
.Index-page .Index-page-image {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 0 !important;
}

section.Index-page:has(.Index-page-image) {
  position: relative !important;
  min-height: 100vh !important;
  overflow: hidden !important;
}

section.Index-page:has(.Index-page-image) > .Index-page-content {
  position: relative !important;
  z-index: 1 !important;
}

/* ========================================
   GALLERY GRID FIX
   Make thumbnail images visible without JS lazy-loading
   ======================================== */

.thumb-image {
  opacity: 1 !important;
  visibility: visible !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

/* Gallery grid container — 4 column grid with gaps */
.sqs-gallery-block-grid .sqs-gallery {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 10px !important;
  padding: 0 !important;
}

.sqs-gallery-block-grid .slide {
  opacity: 1 !important;
  visibility: visible !important;
  width: 100% !important;
}

.sqs-gallery-block-grid .margin-wrapper {
  position: relative !important;
  overflow: hidden !important;
  margin: 0 !important;
}

.sqs-gallery-block-grid .image-slide-anchor {
  display: block !important;
  position: relative !important;
  padding-bottom: 100% !important; /* Square aspect ratio */
}

/* Hide noscript duplicate images */
noscript {
  display: none !important;
}

/* ========================================
   HEADER / NAV FIX
   Match live site: light background, branding left, nav right
   Local HTML has branding/nav in Header--bottom; live site's JS
   moves them to Header--top at runtime. We style Header--bottom
   to match the live site's Header--top appearance.
   ======================================== */

/* Hide Header--top (only has search bar in local HTML) */
header.Header.Header--top {
  display: none !important;
}

/* Style Header--bottom to look like the live site's header */
header.Header.Header--bottom {
  display: block !important;
  position: static !important;
  background-color: rgb(250, 250, 250) !important;
  z-index: 1000 !important;
}

.Header-inner.Header-inner--bottom {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 20px 46px !important;
}

/* Force all nc-container/group/element divs in header to show */
.Header [data-nc-group] {
  display: flex !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.Header [data-nc-container] {
  display: flex !important;
  opacity: 1 !important;
  visibility: visible !important;
  flex: 1 1 auto !important;
}

.Header [data-nc-element] {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* bottom-center has branding — move to left */
.Header-inner--bottom [data-nc-container="bottom-center"] {
  order: -1 !important;
  justify-content: flex-start !important;
}

/* bottom-left has primary-nav — move to right */
.Header-inner--bottom [data-nc-container="bottom-left"] {
  order: 1 !important;
  justify-content: flex-end !important;
}

/* bottom-right has secondary-nav — hide it */
.Header-inner--bottom [data-nc-container="bottom-right"] {
  order: 2 !important;
  display: none !important;
}

.Header-nav.Header-nav--primary {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.Header-nav-inner {
  display: flex !important;
  gap: 2em !important;
}

a.Header-nav-item {
  color: rgba(0, 0, 0, 0.68) !important;
  text-decoration: none !important;
  font-size: 12px !important;
  letter-spacing: 2.16px !important;
  text-transform: uppercase !important;
  opacity: 1 !important;
  visibility: visible !important;
  display: inline-block !important;
}

a.Header-nav-item:hover {
  opacity: 0.5 !important;
}

a.Header-branding {
  color: rgb(0, 0, 0) !important;
  text-decoration: none !important;
  font-size: 17px !important;
  letter-spacing: 4.25px !important;
  opacity: 1 !important;
  visibility: visible !important;
  display: inline-block !important;
}

/* ========================================
   MOBILE MENU FIX
   ======================================== */

.Mobile-overlay {
  display: none;
}

.Mobile-overlay.is-visible {
  display: block !important;
}

/* ========================================
   SCROLL INDICATOR
   Show on first banner section of each page
   ======================================== */
.Index-page-scroll-indicator {
  opacity: 1 !important;
  visibility: visible !important;
  position: absolute !important;
  bottom: 30px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  z-index: 2 !important;
  text-align: center !important;
  color: white !important;
}

.Index-page-scroll-indicator .Index-page-scroll-indicator-text {
  display: none !important;
}

.Index-page-scroll-indicator .Index-page-scroll-indicator-arrow {
  display: block !important;
  width: 24px !important;
  height: 12px !important;
  fill: white !important;
  opacity: 0.8 !important;
}

/* Only show on the first section of each page */
.Index-page-scroll-indicator.hidden {
  display: block !important;
}

/* ========================================
   VIDEO EMBED FIX
   ======================================== */
.sqs-block-video .sqs-block-content {
  opacity: 1 !important;
  visibility: visible !important;
}

.sqs-video-wrapper {
  opacity: 1 !important;
  visibility: visible !important;
  position: relative !important;
  padding-bottom: 56.25% !important; /* 16:9 aspect ratio */
  height: 0 !important;
  overflow: hidden !important;
}

.sqs-video-wrapper iframe {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
}

.video-caption-wrapper {
  margin-top: 8px !important;
}

/* ========================================
   FOOTER FIX
   ======================================== */
.Footer {
  opacity: 1 !important;
  visibility: visible !important;
}

/* ========================================
   LIGHTBOX
   ======================================== */
.lightbox-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgb(0, 0, 0) !important;
  z-index: 10000;
  align-items: center;
  justify-content: center;
}

.lightbox-overlay.is-active {
  display: flex !important;
}

.lightbox-img {
  max-width: 90vw;
  max-height: 85vh;
  object-fit: contain;
  user-select: none;
  -webkit-user-select: none;
}

.lightbox-close {
  position: absolute;
  top: 20px;
  right: 24px;
  background: none;
  border: none;
  color: white;
  font-size: 40px;
  cursor: pointer;
  line-height: 1;
  padding: 0 8px;
  opacity: 0.8;
  z-index: 10001;
}

.lightbox-close:hover {
  opacity: 1;
}

.lightbox-prev,
.lightbox-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: white;
  font-size: 60px;
  cursor: pointer;
  padding: 0 16px;
  opacity: 0.7;
  z-index: 10001;
  user-select: none;
  -webkit-user-select: none;
}

.lightbox-prev { left: 12px; }
.lightbox-next { right: 12px; }

.lightbox-prev:hover,
.lightbox-next:hover {
  opacity: 1;
}

.lightbox-counter {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255, 255, 255, 0.7);
  font-size: 14px;
  letter-spacing: 1px;
}