/* ==========================================================================
   HYDRATION TAP — photographic background (Aug 2026)

   Her citrus-in-water photograph sits behind the whole page, with the cards
   floating on top. Two things make that work rather than fight the content:

     1. A WHITE SCRIM between the photo and everything else. The photo has very
        bright highlights and mid-blue darks, so text laid straight on it would
        swing between 2:1 and 12:1 depending on where it landed. The scrim
        holds a predictable base, and the cards themselves stay solid white.
     2. THE BACKDROP IS FIXED, so the photo stays put while the page scrolls
        and the cards drift over it. `background-attachment:fixed` is unreliable
        on iOS, so this uses a `position:fixed` layer instead.
   ========================================================================== */
#page-hydration{
  background:#F4F8FA !important;
  position:relative;
  isolation:isolate;              /* keeps the backdrop behind this page only */
}
#page-hydration .hyd-bg{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:url('assets/img/img-b1516a8268fa.webp');
  background-size:cover; background-position:center 30%; background-repeat:no-repeat;
}
/* the scrim — strong enough that every card and caption keeps its contrast,
   light enough that the fruit and bubbles still read */
#page-hydration .hyd-bg::after{
  content:''; position:absolute; inset:0;
  /* light at the top so the fruit and bubbles actually read behind the banner,
     firming up further down where the cards and body copy live */
  background:linear-gradient(180deg,
    rgba(255,255,255,.30) 0%,
    rgba(255,255,255,.48) 26%,
    rgba(255,255,255,.66) 55%,
    rgba(255,255,255,.74) 100%);
}
/* everything on the page sits above the backdrop */
#page-hydration > *{ position:relative; z-index:1; }

/* the banner was an opaque panel; letting the photo through makes it the hero */
#page-hydration .hyd-banner{
  background:linear-gradient(180deg, rgba(255,255,255,.30), rgba(255,255,255,.62)) !important;
  border-bottom:1px solid rgba(255,255,255,.55) !important;
  backdrop-filter:blur(2px);
}
/* THE CARDS ARE SOLID; THEIR SECTION WRAPPER IS NOT. Painting `.hyd-sec` white
   too covered the photograph in one long slab below the banner — the point is
   for the cards to float ON the picture, so the wrapper only takes enough of a
   veil to keep its own headings legible. */
#page-hydration .hyd-card{
  background:#fff !important;
  box-shadow:0 12px 36px rgba(31,62,80,.16), 0 2px 8px rgba(31,62,80,.06);
  border-color:rgba(190,210,220,.85) !important;
}
#page-hydration .hyd-sec{
  background:rgba(255,255,255,.52) !important;
  border-color:rgba(255,255,255,.6) !important;
  box-shadow:none;
  backdrop-filter:blur(3px);
}
#page-hydration .hyd-chip{
  background:rgba(255,255,255,.94) !important;
  border-color:rgba(190,210,220,.85) !important;
}
#page-hydration .hyd-sticky{
  background:rgba(255,255,255,.94) !important;
  backdrop-filter:blur(8px);
}
/* Where the page has bare text on the canvas rather than inside a card, the
   scrim alone is not a guarantee, so those lines get their own quiet plate. */
#page-hydration .hyd-wrap > .hyd-note,
#page-hydration .hyd-prog-top{
  background:rgba(255,255,255,.86) !important;
  border-radius:12px; padding:8px 12px;
}
@media (prefers-reduced-motion:no-preference){
  #page-hydration .hyd-bg{ transition:opacity .3s ease; }
}

/* ---- contrast, found while adding the background --------------------------
   Both PRE-EXISTING (identical on the previous shipped build) — the photograph
   did not cause them, it just prompted the measurement. `.hyd-eb` measured 4.09
   and `.hyd-note` 3.11 against white, both under AA at their sizes. */
#page-hydration .hyd-eb{
  color:#3F615E !important; -webkit-text-fill-color:#3F615E !important;
}
#page-hydration .hyd-note{
  color:#5F6773 !important; -webkit-text-fill-color:#5F6773 !important;
}