/* Shared hero watermark treatment across public pages. */

html {
  background: #F7F4EA;
}

/*
 * Use a fixed viewport layer for the watermark. This prevents mobile browser
 * chrome from making the artwork jump while the page scrolls.
 */
body {
  position: relative;
  isolation: isolate;
  background-color: #F7F4EA !important;
  background-image: none !important;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(rgba(247, 244, 234, 0.72), rgba(247, 244, 234, 0.72)),
    url("/hero.webp") center center / cover no-repeat !important;
  transform: translateZ(0);
}

/* Let the page canvas reveal the single site-wide background. */
main {
  background: transparent !important;
}

/* Homepage intro: fully transparent so the background artwork is uninterrupted. */
.hero-copy {
  background: transparent !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

/* Stronger contrast while keeping the intro panel 100% transparent. */
.hero-copy h1,
.hero-copy h2,
.hero-copy h3 {
  color: #080808 !important;
  font-weight: 800 !important;
  text-shadow:
    0 1px 1px rgba(255, 255, 255, 0.95),
    0 2px 5px rgba(255, 255, 255, 0.72);
}

.hero-copy p {
  color: #202020 !important;
  font-weight: 600 !important;
  text-shadow:
    0 1px 1px rgba(255, 255, 255, 0.95),
    0 2px 4px rgba(255, 255, 255, 0.78);
}

/* SEO/explainer surface keeps the previous readability level. */
.seo-text {
  background: rgba(255, 255, 255, 0.78) !important;
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}

/* Requested alignment for the homepage SEO/explainer block. */
.seo-text,
.seo-text h1,
.seo-text h2,
.seo-text h3,
.seo-text p {
  text-align: center !important;
}

.seo-text p {
  margin-left: auto !important;
  margin-right: auto !important;
}

@media (max-width: 820px) {
  /*
   * Mobile only: keep the background fixed and show three complete copies of
   * the hero artwork through the viewport. Each watermark preserves the
   * source aspect ratio, so the image is visible in full rather than cropped.
   */
  body::before {
    inset: 0 auto auto 0;
    width: 100vw;
    height: 100vh;
    height: 100svh;
    background-color: #F7F4EA !important;
    background-image:
      linear-gradient(rgba(247, 244, 234, 0.70), rgba(247, 244, 234, 0.70)),
      url("/hero.webp"),
      url("/hero.webp"),
      url("/hero.webp") !important;
    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat !important;
    background-position:
      center center,
      center 6%,
      center 50%,
      center 94% !important;
    background-size:
      100% 100%,
      92vw auto,
      92vw auto,
      92vw auto !important;
  }

  .hero-copy {
    background: transparent !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    border-color: transparent !important;
    box-shadow: none !important;
  }

  .seo-text {
    background: rgba(255, 255, 255, 0.82) !important;
  }
}