/* Final visual alignment for the approved /pray mockup.
 * Scoped so the production PrayerMap and global I Prayed Here control remain untouched.
 */

/* Use the same real PrayYXE header/wordmark, but integrate it into this page's navy hero. */
body:has(.pray-page) .site-photo-header--compact {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 70;
  height: 86px;
  background: rgba(2, 23, 45, .97);
  overflow: visible;
}

body:has(.pray-page) .site-photo-header--compact .site-photo-header__image,
body:has(.pray-page) .site-photo-header--compact .site-photo-header__wash,
body:has(.pray-page) .site-photo-header--compact .site-photo-header__top-gradient {
  display: none;
}

body:has(.pray-page) .site-photo-header--compact .site-photo-header__bar {
  min-height: 86px;
  padding-top: 16px;
  padding-bottom: 14px;
}

/* Render the approved Saskatoon hero photograph as the section background.
 * Using separate background properties avoids browser shorthand parsing issues. */
body:has(.pray-page) .pray-hero {
  min-height: 570px;
  background-color: #031f3b !important;
  background-image:
    linear-gradient(90deg, #031f3b 0%, rgba(3,31,59,.985) 31%, rgba(3,31,59,.86) 49%, rgba(3,31,59,.46) 72%, rgba(3,31,59,.12) 100%),
    linear-gradient(180deg, rgba(2,23,45,.04), rgba(2,23,45,.35)),
    url('/images/pray/pray-hero-city.jpg') !important;
  background-position: center, center, right center !important;
  background-size: 100% 100%, 100% 100%, 72% 100% !important;
  background-repeat: no-repeat !important;
}

body:has(.pray-page) .pray-hero__photo,
body:has(.pray-page) .pray-hero__shade {
  display: none !important;
}

body:has(.pray-page) .pray-hero .pray-page__shell {
  position: relative;
  z-index: 2;
}

body:has(.pray-page) .pray-hero__copy {
  padding-top: 132px;
  padding-bottom: 62px;
}

/* Keep the three approved focus cards visually consistent. */
body:has(.pray-page) .pray-focus {
  padding-top: 46px;
  padding-bottom: 52px;
}

body:has(.pray-page) .pray-focus__cards {
  gap: 20px;
}

body:has(.pray-page) .pray-focus__card {
  border-color: rgba(244,173,50,.88);
  box-shadow: 0 16px 40px rgba(0,0,0,.2);
}

/* Keep the completion screen on the same verified hero asset as the main Pray page. */
body:has(.pray-page) .pray-complete {
  background:
    linear-gradient(90deg, rgba(3,31,59,.97), rgba(3,31,59,.72)),
    url('/images/pray/pray-hero-city.jpg') center / cover no-repeat !important;
}

/* The approved concept uses a dark PrayYXE closing footer. */
body:has(.pray-page) .footer {
  background: #031f3b;
  color: rgba(255,255,255,.78);
  border-top: 1px solid rgba(255,255,255,.1);
}

body:has(.pray-page) .footer .brand--footer span:first-child,
body:has(.pray-page) .footer p,
body:has(.pray-page) .footer a,
body:has(.pray-page) .footer span {
  color: rgba(255,255,255,.86) !important;
}

body:has(.pray-page) .footer .brand--footer span:last-child {
  color: #c7ddb2 !important;
}

body:has(.pray-page) .footer a:hover {
  color: #f4ad32 !important;
}

@media (max-width: 900px) {
  body:has(.pray-page) .pray-hero {
    background-image:
      linear-gradient(90deg, rgba(3,31,59,.98) 0%, rgba(3,31,59,.91) 50%, rgba(3,31,59,.48) 100%),
      linear-gradient(180deg, rgba(2,23,45,.08), rgba(2,23,45,.42)),
      url('/images/pray/pray-hero-city.jpg') !important;
    background-position: center, center, 68% center !important;
    background-size: 100% 100%, 100% 100%, cover !important;
  }
}

@media (max-width: 640px) {
  body:has(.pray-page) .site-photo-header--compact {
    height: 72px;
  }

  body:has(.pray-page) .site-photo-header--compact .site-photo-header__bar {
    min-height: 72px;
    padding: 12px 16px;
  }

  body:has(.pray-page) .pray-hero {
    min-height: 650px;
    background-image:
      linear-gradient(180deg, rgba(3,31,59,.48) 0%, rgba(3,31,59,.78) 34%, rgba(3,31,59,.98) 78%, #031f3b 100%),
      linear-gradient(90deg, rgba(3,31,59,.76), rgba(3,31,59,.24)),
      url('/images/pray/pray-hero-city.jpg') !important;
    background-position: center, center, 74% center !important;
    background-size: 100% 100%, 100% 100%, cover !important;
  }

  body:has(.pray-page) .pray-hero__copy {
    width: 100%;
    padding-top: 104px;
    padding-bottom: 46px;
  }

  body:has(.pray-page) .pray-focus {
    padding-top: 38px;
    padding-bottom: 42px;
  }

  body:has(.pray-page) .pray-focus__heading p {
    max-width: 250px;
    margin-left: auto;
    margin-right: auto;
  }

  body:has(.pray-page) .pray-focus__cards {
    gap: 14px;
  }

  body:has(.pray-page) .footer {
    padding-bottom: 34px;
  }
}