/* ============================================================
   J. Randle Law - Header parallax (pairs with js/parallax.js)
   Site by Aday Interactive, Inc. - https://adayinteractive.com/
   Standalone file: no Tailwind rebuild needed.
   ============================================================ */

[data-plx-scope] { overflow: hidden; }
[data-plx] { will-change: translate; }

/* Home hero: the photo moves to its own layer so it can lag the page. */
.plx-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center top;
}

/* Inner page header: the texture layer is oversized so its pattern never
   shows an edge while it drifts. */
.page-header .texture[data-plx] { bottom: -40%; }

@media (prefers-reduced-motion: reduce) {
  [data-plx] { translate: none !important; opacity: 1 !important; will-change: auto; }
}

/* Page header with a photo (includes/page-header.php $headerImage). Taller,
   and the photo sits under a green shade so the title reads like every
   other page header on the site. */
.page-header-photo { height: 340px; }
@media (min-width: 640px) { .page-header-photo { height: 440px; } }
.page-header .ph-photo { position: absolute; inset: 0; display: block; }
.page-header .ph-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 60%; display: block; }
.page-header .ph-photo-shade {
  position: absolute; inset: 0;
  background: linear-gradient(to right, oklch(0.19 0.075 155 / 0.92) 0%, oklch(0.19 0.075 155 / 0.6) 55%, oklch(0.19 0.075 155 / 0.35) 100%),
              linear-gradient(to top, oklch(0.19 0.075 155 / 0.85) 0%, transparent 60%);
}