/* Mobile stability patch for exported Squarespace pages */

/* Hide Squarespace editor/admin overlays and buttons */
.sqs-frontend-overlay-editor-widget-host .header-edit-button-container,
.sqs-frontend-overlay-editor-widget-host .footer-edit-button-container,
.page-edit-button-container,
.section-toolbar-button-wrapper,
.edit-tool-button,
.header-skip-link {
  display: none !important;
  visibility: hidden !important;
}

/* Hide floating commerce cart widget from static export */
#floatingCart,
.sqs-custom-cart {
  display: none !important;
}

/* Hide placeholder social links (Squarespace defaults) */
.header-actions-action--social,
.header-menu-actions-action--social,
.header-menu-actions.social-accounts {
  display: none !important;
}

/* Section background images must fill the band (Squarespace JS normally handles this) */
.section-background img[elementtiming="nbf-background"] {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  min-height: 280px;
}

.section-background:has(img[elementtiming="nbf-background"]) {
  min-height: 280px;
}

/* Animated gradient hero fallback when Squarespace BackgroundGradient JS is absent */
.section-background-content[data-controller="BackgroundGradient"] {
  background: linear-gradient(145deg, #3d4f5f 0%, #6b7f6a 45%, #8a9a7a 100%);
  min-height: 320px;
  width: 100%;
}

.section-background-content[data-controller="BackgroundGradient"] .section-background-canvas {
  display: none !important;
}

/* Portfolio hover: hide broken-image alt bleed only (main menu stays visible) */
img[elementtiming="nbf-portfolio-index-background"] {
  color: transparent;
}

/* Ensure header nav stays visible on homepage */
.header-display-desktop,
.header-title-nav-wrapper,
.header-nav,
.header-nav-list {
  visibility: visible !important;
  opacity: 1 !important;
}

/* Prevent aggressive background animation flicker */
.portfolio-hover-bg,
.portfolio-hover-bg-mask,
.portfolio-hover-bg-img,
.portfolio-hover-bg-overlay {
  animation: none !important;
  transition: none !important;
}

/* Keep only active portfolio background to avoid flashing */
.portfolio-hover-backgrounds .portfolio-hover-bg:not([data-active="true"]) {
  display: none !important;
}

/* Extra mobile hardening */
@media (max-width: 900px) {
  .portfolio-hover-bgs {
    contain: layout paint;
  }

  /*
   * Static-export mobile fallback:
   * Squarespace JS is removed, so burger overlay toggle may not open.
   * Keep original header/menu markup, but force mobile menu visible.
   */
  .header-burger {
    display: none !important;
  }

  .header-menu {
    display: block !important;
    position: relative !important;
    inset: auto !important;
    height: auto !important;
    min-height: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    padding-top: 0 !important;
  }

  .header-menu .header-menu-bg {
    display: none !important;
  }

  .header-menu-nav-list,
  .header-menu-nav-folder,
  .header-menu-nav-folder-content,
  .header-menu-nav-wrapper {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
  }

  .header-menu-nav-item a {
    display: block !important;
    padding: 10px 0 !important;
  }

  /* Hard fallback: show desktop nav on phones */
  .header-display-desktop {
    display: block !important;
  }

  .header-display-mobile {
    display: none !important;
  }

  .header-nav,
  .header-nav-wrapper,
  .header-nav-list {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  .header-title-nav-wrapper {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 16px !important;
    width: auto !important;
    margin: 0 auto !important;
    flex-wrap: nowrap !important;
  }

  .header-title {
    margin: 0 !important;
    flex: 0 0 auto !important;
  }

  .header-nav {
    flex: 0 1 auto !important;
  }

  .header-nav-item {
    display: inline-block !important;
    float: none !important;
    margin: 0 8px !important;
  }

  .header-nav-item a {
    display: inline-block !important;
    padding: 8px 0 !important;
  }
}