/* =====================================================================================================================================
 * Round 230 — the "Soft Anchor" page background (Option B), shared by the Members Portal, ACTS Messenger, the sign-in page and the Youth Portal.
 * Markup: includes/portal-backdrop.php (one <div class="pbg"> right after <body>, body class "pbg-on"). Setting: System Settings → Members Portal →
 * Portal Appearance → Page background (Soft anchor · Plain cream). Never in ACTS System; never printed.
 *   1 gradient  #E9F0F7 → #F1F1EC → the church cream        2 morning light at the top left
 *   3 misty sea and hills, bottom 30 % (22 % on phones)        4 the ACTS anchor outline, navy 5–7 %, right side, lower half (240 px at 4–5 % on phones)
 * One fixed layer: content scrolls over it, nothing stretches or repeats on long pages, nothing moves, it never takes a click, no text, no people.
 * ===================================================================================================================================== */
.pbg { display: none; }
body.pbg-on { position: relative; z-index: 0; }          /* its own layer, so the backdrop (z-index -1) sits above the page colour and below everything else */
body.pbg-on .pbg {
  display: block; position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; -webkit-user-select: none; user-select: none;
  background:
    radial-gradient(circle at 15% 8%, rgba(255, 255, 255, .75), transparent 45%),                          /* 2 · morning light */
    linear-gradient(180deg, #E9F0F7 0%, #F1F1EC 52%, var(--acts-cream, #F7F3EA) 100%);                      /* 1 · pale sky → the church cream */
}
body.pbg-on .pbg-hills { position: absolute; left: 0; right: 0; bottom: 0; display: block; width: 100%; height: 30vh; }                  /* 3 */
body.pbg-on .pbg-anchor { position: absolute; right: max(4vw, calc((100vw - var(--portal-max, 1304px)) / 2 - 120px)); bottom: 9vh; height: clamp(300px, 50vh, 420px); width: auto; aspect-ratio: 58 / 54; color: var(--acts-navy, #13233A); opacity: .06; }   /* 4 */
@media (max-width: 767px) {
  body.pbg-on .pbg-hills { height: 22vh; }
  body.pbg-on .pbg-anchor { height: 240px; right: 8px; bottom: calc(var(--ui-nav-h, 76px) + 6vh); opacity: .045; }
}
@media (prefers-reduced-transparency: reduce) {
  body.pbg-on .pbg { background: linear-gradient(180deg, #E9F0F7 0%, #F1F1EC 52%, var(--acts-cream, #F7F3EA) 100%); }
  body.pbg-on .pbg-hills, body.pbg-on .pbg-anchor { display: none; }
}
@media print { .pbg { display: none !important; } body.pbg-on { background: #fff !important; } }
/* the Portal sign-in page on the soft background: its gold links and grey notes are a shade darker so they keep ≥ 4.5 : 1 over the misty hills */
body.si-body.pbg-on :is(.si-eyebrow, .si-forgot, .si-link, .si-foot a) { color: #7A5612; }
body.si-body.pbg-on :is(.si-forgot, .si-link, .si-foot a):hover { color: #6B4B10; }
body.si-body.pbg-on :is(.si-lead, .si-copy, .si-or, .si-note, .si-foot) { color: #545B6A; }

/* =====================================================================================================================================
 * Round 231 — "Sunrise photo" (default): the church's photo of a morning sea, sunrise, mountains and an anchor on the rocks, behind the Members Portal
 * and ACTS Messenger (the sign-in page and the Youth Portal keep the drawn background above). One fixed layer, cover, anchored bottom right so the
 * anchor always shows; a light cream wash over the lower half (the sea) keeps text on the page at ≥ 4.5 : 1. WebP where the browser supports it,
 * a smaller portrait crop on phones. Reduced data → the drawn gradient instead; print → none.
 * ===================================================================================================================================== */
body.pbg-on .pbg.pbg--photo {
  --pbg-wash: linear-gradient(180deg, rgba(255, 255, 255, .18) 0%, rgba(247, 243, 234, .22) 40%, rgba(247, 243, 234, .52) 66%, rgba(247, 243, 234, .64) 100%);
  background: var(--pbg-wash), url("../images/portal-bg-sunrise.jpg") right bottom / cover no-repeat, #DCE8F3;
  background: var(--pbg-wash), image-set(url("../images/portal-bg-sunrise.webp") type("image/webp"), url("../images/portal-bg-sunrise.jpg") type("image/jpeg")) right bottom / cover no-repeat, #DCE8F3;
}
@media (max-width: 767px) {
  body.pbg-on .pbg.pbg--photo {
    --pbg-wash: linear-gradient(180deg, rgba(255, 255, 255, .20) 0%, rgba(247, 243, 234, .24) 40%, rgba(247, 243, 234, .56) 64%, rgba(247, 243, 234, .68) 100%);
    background: var(--pbg-wash), url("../images/portal-bg-sunrise-phone.jpg") right bottom / cover no-repeat, #DCE8F3;
    background: var(--pbg-wash), image-set(url("../images/portal-bg-sunrise-phone.webp") type("image/webp"), url("../images/portal-bg-sunrise-phone.jpg") type("image/jpeg")) right bottom / cover no-repeat, #DCE8F3;
  }
}
@media (prefers-reduced-transparency: reduce) {   /* the photo stays, under a heavier, even wash */
  body.pbg-on .pbg.pbg--photo { --pbg-wash: linear-gradient(rgba(247, 243, 234, .70), rgba(247, 243, 234, .70)); }
}
@media (prefers-reduced-data: reduce) {
  body.pbg-on .pbg.pbg--photo { background: radial-gradient(circle at 15% 8%, rgba(255, 255, 255, .75), transparent 45%), linear-gradient(180deg, #E9F0F7 0%, #F1F1EC 52%, var(--acts-cream, #F7F3EA) 100%); }
}

/* Round 244 — the My Faith Journal pages have their own pictures: the Bible Journaling guide on the Journal tab, the prayer picture on the Prayers tab.
   Same cream wash and fixed layer as the Sunrise photo (the church's photo setting still decides whether a photo is shown at all). */
body.pbg-on.mfj-bg-journal .pbg.pbg--photo { --pbg-wash: linear-gradient(rgba(247, 243, 234, .55), rgba(247, 243, 234, .55));
  background: var(--pbg-wash), image-set(url("../images/mfj-bg-journal.webp") type("image/webp"), url("../images/mfj-bg-journal.jpg") type("image/jpeg")) right bottom / cover no-repeat, #DCE8F3; }
body.pbg-on.mfj-bg-prayer .pbg.pbg--photo { --pbg-wash: linear-gradient(rgba(247, 243, 234, .55), rgba(247, 243, 234, .55));
  background: var(--pbg-wash), image-set(url("../images/mfj-bg-prayer.webp") type("image/webp"), url("../images/mfj-bg-prayer.jpg") type("image/jpeg")) right bottom / cover no-repeat, #DCE8F3; }