/* Static hosting fixes — override Squarespace parallax/dynamic positioning */

/* Parallax items — let the JS shim handle positioning,
   but ensure the container doesn't block layout */
.Parallax-host-outer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 0;
  overflow: visible;
  z-index: 0;
}

/* Once parallax-fix.js moves items into sections, these styles apply */
.Index-page {
  position: relative !important;
  overflow: hidden !important;
}

.Index-page > .Parallax-item {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  transform: none !important;
  z-index: 0 !important;
}

.Index-page > .Parallax-item figure {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  overflow: hidden !important;
  transform: none !important;
}

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

.Index-page .Index-page-content {
  position: relative !important;
  z-index: 2 !important;
}

/* Sponsor section specifically — use white background instead of image overlay */
#sponsor-logos {
  background: #fff !important;
}
#sponsor-logos::before {
  display: none !important;
}
#sponsor-logos .Index-page-content {
  color: #222 !important;
}
#sponsor-logos h1,
#sponsor-logos h2,
#sponsor-logos h3,
#sponsor-logos p {
  color: #222 !important;
}

/* Fix font loading — don't hide text while waiting for fonts */
html.wf-loading * {
  animation: none !important;
  color: inherit !important;
}

/* Ensure the main Index-gallery (hero) renders properly */
.Index-gallery {
  position: relative !important;
}

.Index-gallery-wrapper {
  position: relative !important;
}

.Index-gallery-item {
  position: relative !important;
  display: block !important;
}

.Index-gallery-item img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

/* Fix Squarespace video blocks that stay hidden without JS */
.sqs-video-wrapper.video-none {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.sqs-video-wrapper .intrinsic,
.sqs-video-wrapper .intrinsic-inner {
  display: block !important;
  position: relative !important;
}

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

.embed-block-wrapper {
  position: relative !important;
}

/* Mobile nav fixes for static hosting */
.Mobile-overlay {
  display: none;
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #fff;
  z-index: 9999;
  overflow: auto;
}

body.is-mobile-overlay-active .Mobile-overlay {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

body.is-mobile-overlay-active .Mobile-overlay .Mobile-overlay-menu {
  transform: translate3d(0, 0, 0) !important;
}

body.is-mobile-overlay-active .Mobile-overlay .Mobile-overlay-menu-main {
  transform: translate3d(0, 0, 0) !important;
  position: relative !important;
}

.Mobile-overlay-close {
  display: block !important;
  cursor: pointer;
}

.Mobile-overlay-folder {
  display: none;
}

/* Force hamburger icon visible — site is configured for plus icon
   but plus uses external SVG that won't load. Override to show hamburger. */
.Mobile-bar-menu {
  cursor: pointer;
  z-index: 1002;
}

.Mobile-bar-menu .Icon--hamburger {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  color: #222 !important;
  stroke: #222 !important;
}

.Mobile-bar-menu .Icon--hamburger line {
  stroke: #222 !important;
  stroke-width: 2 !important;
}

/* Hide other icon variants that use broken external SVG */
.Mobile-bar-menu .Icon--plus,
.Mobile-bar-menu .Icon--hotdog,
.Mobile-bar-menu .Icon--dots-horizontal,
.Mobile-bar-menu .Icon--dots-vertical,
.Mobile-bar-menu .Icon--squares-horizontal,
.Mobile-bar-menu .Icon--squares-vertical {
  display: none !important;
}

/* Close button in overlay */
.Mobile-overlay-close .Icon--close {
  display: block !important;
}
.Mobile-overlay-close .Icon--close line {
  stroke: #222 !important;
  stroke-width: 2 !important;
}

/* Ensure mobile bar is above content and doesn't overlap page */
.Mobile-bar {
  z-index: 1001 !important;
}

/* Push page content below the fixed mobile bar on small screens */
@media screen and (max-width: 768px) {
  body {
    padding-top: 52px !important;
  }

  /* The menu overlay should start below the mobile bar */
  .Mobile-overlay .Mobile-overlay-menu-main {
    padding-top: 60px !important;
  }
}

/* Desktop header — show on desktop, hide on mobile (mobile uses Mobile-bar) */
.Header {
  display: flex !important;
  visibility: visible !important;
}

.Header-inner {
  display: flex !important;
  visibility: visible !important;
}

@media screen and (max-width: 768px) {
  .Header {
    display: none !important;
  }
}

/* Fix parallax/scroll jank on mobile — disable parallax transforms */
@media screen and (max-width: 768px) {
  .Parallax-host-outer {
    display: none !important;
  }

  .Index-page--has-image {
    position: relative !important;
    background-size: cover !important;
    background-position: center !important;
  }
}

/* Fix button alignment on Programs and Summer Camps pages */
/* All button containers should be consistently left-aligned */
.Main-content .sqs-block-button-container {
  text-align: left !important;
}
.Main-content .sqs-block-button-container--center {
  text-align: left !important;
}