/* Section background images set from the CMS.
   Applied to anything carrying data-bg-slot once main.js has found a saved
   image for it. The element itself gets the photo; this adds the scrim that
   keeps the text on top of it readable. */

[data-bg-slot].has-bg {
  position: relative;
  /* The section's own flat colour would sit on top of the photo. */
  background-color: transparent;
}

/* The scrim: the theme's own background colour, laid over the image at the
   opacity she chooses. Using the theme colour rather than plain black or white
   means it still looks like her site, whichever scheme is selected. */
[data-bg-slot].has-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--bg-primary);
  opacity: var(--bg-fade, 0.7);
  backdrop-filter: blur(var(--bg-blur, 0));
  -webkit-backdrop-filter: blur(var(--bg-blur, 0));
  pointer-events: none;
  z-index: 0;
}

/* Content must sit above the scrim, or the section renders as a flat wash of
   colour with the text buried underneath it. */
[data-bg-slot].has-bg > * {
  position: relative;
  z-index: 1;
}

/* An alternating section sets its own colour, which would hide the photo. */
[data-bg-slot].has-bg.section-alt,
[data-bg-slot].has-bg.cta-banner {
  background-color: transparent;
}

@media (prefers-reduced-motion: reduce) {
  /* Fixed attachment reads as motion to people who have asked for less of it. */
  [data-bg-slot].has-bg { background-attachment: scroll !important; }
}

/* ── Whole-page backgrounds ─────────────────────────────────────────────
   One image behind an entire page, generalised from what the booking page
   does. Fixed rather than scrolling: on a long page a background that slides
   away halfway down reads as a mistake. */

body.has-page-bg::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: var(--page-bg-image);
  background-size: var(--page-bg-size, cover);
  background-position: var(--page-bg-position, center);
  background-repeat: no-repeat;
  filter: blur(var(--page-bg-blur, 0));
  z-index: -2;
}

/* The scrim, in the theme's own colour so the page still looks like hers. */
body.has-page-bg::after {
  content: '';
  position: fixed;
  inset: 0;
  background: var(--bg-primary);
  opacity: var(--page-bg-fade, 0.7);
  z-index: -1;
}

/* Every block paints its own solid colour, which would cover the image. These
   go see-through so it shows through the whole page. */
body.has-page-bg,
body.has-page-bg .hero,
body.has-page-bg .page-hero,
body.has-page-bg .section,
body.has-page-bg .section-alt,
body.has-page-bg .cta-banner {
  background: transparent;
}

/* Cards keep their fill — they are what makes text on top of a photo readable.
   :not(.featured) matters: the highlighted plan card is filled with the accent
   colour and sets its own text to white. Forcing --card-bg onto it left white
   text on a white card, so the "Most Popular" plan rendered as an empty box. */
body.has-page-bg .contact-info-card,
body.has-page-bg .service-card,
body.has-page-bg .service-full-card,
body.has-page-bg .plan-card:not(.featured),
body.has-page-bg .testimonial-card,
body.has-page-bg .faq-item {
  background: var(--card-bg);
}

/* Stated explicitly so a future page-background rule cannot quietly take it
   over again. */
body.has-page-bg .plan-card.featured {
  background: var(--accent);
}

/* The home hero paints its own image; with a page background behind everything
   the two would stack. The page background wins, since it was chosen later. */
body.has-page-bg .hero-bg { display: none; }