/* Decorative only: never change question data, text opacity or answer handling. */
[data-seapass-question-watermark="true"] {
  position: relative;
  isolation: isolate;
}

[data-seapass-question-watermark="true"]::before {
  content: "";
  position: absolute;
  inset: 0.75rem 12%;
  background-image: url("/seapass-question-watermark.svg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  opacity: 0.06;
  mix-blend-mode: multiply;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  z-index: 0;
}

/* Keep readable foreground and illustrations above the decorative ink. */
[data-seapass-question-watermark="true"] h3,
[data-seapass-question-watermark="true"] p,
[data-seapass-question-watermark="true"] button > span,
[data-seapass-question-watermark="true"] figure {
  position: relative;
  z-index: 1;
}

@media (max-width: 640px) {
  [data-seapass-question-watermark="true"]::before {
    left: 6%;
    right: 6%;
    opacity: 0.055;
  }
}

@media (forced-colors: active) {
  [data-seapass-question-watermark="true"]::before { display: none; }
}