/* ==========================================================================
   SPOT-ON — site-backgrounds.css
   Websiteachtergronden per onderdeel (zie js/site-backgrounds.js).

   Alles hangt aan body[data-site-bg], dat ALLEEN gezet wordt op de vijf
   klantschermen, in lichte modus en niet voor een zaak. Zonder dat
   attribuut doet dit bestand niets: elk ander scherm, de donkere modus en
   het hele zaakgedeelte blijven exact zoals ze waren.

   - #site-bg ligt vast achter de app (position: fixed), even breed als de
     app-kolom (560 px smartphone, 760 px tablet, volle breedte desktop —
     dezelfde maten als #app in base.css en desktop.css).
   - background-size: cover, verticaal gecentreerd; horizontaal volgens
     de instelling "uitsnede" (--site-bg-x) zodat op smalle schermen het
     juiste deel van het ontwerp zichtbaar blijft. Het ontwerp zelf wordt
     niet bewerkt.
   - #app wordt op die schermen doorzichtig, zodat de afbeelding achter de
     inhoud zichtbaar wordt. Kaarten, knoppen, kopbalk en tabbalk houden
     hun eigen achtergrond.
   - Geen fixed achtergrond op body (problemen op iOS), geen animatie.
   ========================================================================== */

#site-bg {
  --site-bg-veil: rgba(251, 247, 241, 0);
  display: none;
  position: fixed;
  top: 0; bottom: 0; left: 0; right: 0;
  max-width: 560px;
  margin: 0 auto;
  z-index: 0;
  pointer-events: none;
  background-color: var(--cream);
  background-image: linear-gradient(var(--site-bg-veil), var(--site-bg-veil)), var(--site-bg-image, none);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: var(--site-bg-x, 50%) center;
}

body[data-site-bg] #site-bg { display: block; }
body[data-site-bg] #app { background: transparent; }

@media (min-width: 768px) {
  #site-bg { max-width: 760px; }
}
@media (min-width: 1024px) {
  #site-bg { max-width: none; }
}

/* Veiligheidsnet: in donkere modus nooit tonen (JavaScript doet dit al). */
[data-theme="dark"] #site-bg { display: none !important; }
[data-theme="dark"] body[data-site-bg] #app { background: var(--app-bg-gradient); }

/* Leesbaarheid — alleen wanneer er een afbeelding is:
   1. Tekst die rechtstreeks op de afbeelding staat (titels, kleine labels,
      uitleg bij lege lijsten) krijgt een zachte crème gloed in de kleur van
      de gewone app-achtergrond. Lettertype en afbeelding blijven gelijk; in
      kaarten (lichte achtergrond) valt de gloed niet op.
   2. De lichtgrijze hulptekst (--muted) gebruikt op deze schermen de
      bestaande kleur voor secundaire tekst (--ink-soft). Op het gewone
      verloop had die grijze tekst al een contrast onder de norm (3,6:1);
      op een foto zou dat nog lager worden. De kleine koperen labels
      (.eyebrow) gebruiken de bestaande donkerdere koperkleur
      (--copper-deep). Geen nieuwe kleuren. */
body[data-site-bg] .screen.is-active :is(.eyebrow, .muted, .display, .section-title,
  .empty-state, .profile-v2-header__text) {
  text-shadow:
    0 0 1px var(--cream), 0 0 2px var(--cream), 0 0 3px var(--cream),
    0 0 6px var(--cream), 0 0 12px rgba(251, 247, 241, 0.9),
    0 0 22px rgba(251, 247, 241, 0.7);
}
body[data-site-bg] .screen.is-active :is(.section > .muted, .empty-state p) {
  color: var(--ink-soft);
}
body[data-site-bg] .screen.is-active .section > .eyebrow {
  color: var(--copper-deep);
}

/* Contact (zesde onderdeel): de inleiding, de kleine titels en de
   veldlabels van het formulier staan rechtstreeks op de afbeelding, op
   desktop deels boven het donkerdere tafelgedeelte. Ze krijgen de crème
   gloed van hierboven met een dichtere rand tot 5 px; de veldlabels
   gebruiken de bestaande hoofdtekstkleur (--ink). Geen nieuwe kleuren.
   Alleen op Contact en alleen met afbeelding: de vijf andere onderdelen
   en alle andere schermen blijven ongewijzigd. */
body[data-site-bg="contact"] .screen.is-active :is(.contact-intro, .field > label, .section > .eyebrow) {
  text-shadow:
    0 0 1px var(--cream), 0 0 1px var(--cream), 0 0 2px var(--cream), 0 0 2px var(--cream),
    0 0 3px var(--cream), 0 0 3px var(--cream), 0 0 4px var(--cream), 0 0 4px var(--cream),
    0 0 5px var(--cream), 0 0 5px var(--cream), 0 0 6px var(--cream),
    0 0 12px rgba(251, 247, 241, 0.9), 0 0 22px rgba(251, 247, 241, 0.7);
}
body[data-site-bg="contact"] .screen.is-active .field > label {
  color: var(--ink);
}