/* WarUnited Support wing: Care, Resources, Community and Build a Friend.

   One photograph of an empty clinic waiting area sits behind all four pages. It is
   attached to the viewport rather than to the page, so it holds still while the content
   scrolls over it, and the whole Support section reads as one continuous room.

   Three deliberate choices:
   1. No CSS `filter` on this element. A filter makes the element a containing block for
      fixed things, which silently turns background-attachment:fixed back into an ordinary
      scrolling background. The photograph is toned down with a flat colour wash layered
      over it instead, which also settles it into the page's cream palette.
   2. Sections lose their own background COLOUR. The alternating cream-2 bands used to
      tint the wash differently section by section, which showed up as faint horizontal
      banding straight across the photograph. Gradient backgrounds are left alone, so the
      solid closing bands keep theirs.
   3. Below 820px the attachment drops back to `scroll`. Mobile Safari handles fixed
      backgrounds badly, and it costs a full-image repaint on every frame. */

body[data-page="care"] > section,
body[data-page="resources"] > section,
body[data-page="community"] > section,
body[data-page="befriend"] > section{position:relative;overflow:hidden;background-color:transparent}

body[data-page="care"] > section::after,
body[data-page="resources"] > section::after,
body[data-page="community"] > section::after,
body[data-page="befriend"] > section::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:linear-gradient(rgba(245,247,250,.74),rgba(245,247,250,.74)),url(care-room-a.jpg);
  background-position:center center;
  background-size:cover;
  background-repeat:no-repeat;
  background-attachment:fixed}

/* every section's own content stays above the photograph */
body[data-page="care"] > section > *,
body[data-page="resources"] > section > *,
body[data-page="community"] > section > *,
body[data-page="befriend"] > section > *{position:relative;z-index:1}

/* the two solid green closing bands wash it back much further, or the white type suffers */
body[data-page="care"] > section.care-close::after,
body[data-page="community"] > section.cm-close::after{background-image:linear-gradient(rgba(43,120,98,.90),rgba(37,105,83,.90)),url(care-room-a.jpg)}

@media(max-width:820px){
  body[data-page="care"] > section::after,
body[data-page="resources"] > section::after,
body[data-page="community"] > section::after,
body[data-page="befriend"] > section::after{background-attachment:scroll;background-position:center bottom;
     background-image:linear-gradient(rgba(245,247,250,.80),rgba(245,247,250,.80)),url(care-room-a.jpg)}
  body[data-page="care"] > section.care-close::after,
body[data-page="community"] > section.cm-close::after{background-image:linear-gradient(rgba(43,120,98,.92),rgba(37,105,83,.92)),url(care-room-a.jpg)}
}