/*
 * ═══════════════════════════════════════════════════════
 *  KUWA ADVISORY — SHARED COMPONENTS
 *  Link this file from any page that uses these patterns.
 *  <link rel="stylesheet" href="/components.css">
 * ═══════════════════════════════════════════════════════
 */

/* ──────────────────────────────────────────────────────
   SECTION WATERMARK
   Full-height background image mark, right-aligned,
   barely visible — works on any dark (black/teal) section.

   Usage:
     <div class="section-watermark" aria-hidden="true">
       <img src="/assets/favicon-32x32.png" alt="">
     </div>

   The parent section must have position:relative and overflow:hidden.
   On light sections swap the filter: remove brightness(0) invert(1)
   and lower opacity further (~0.03).
   ────────────────────────────────────────────────────── */
.section-watermark {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  pointer-events: none;
  user-select: none;
  z-index: 0;
  overflow: hidden;
}

.section-watermark img {
  display: block;
  height: 100%;
  width: auto;
  opacity: 0.045;
  filter: brightness(0) invert(1);
}

/* Light section variant — add class="section-watermark section-watermark--light" */
.section-watermark--light img {
  filter: none;
  opacity: 0.03;
}

/* Centered variant (for sections that need the mark centred) */
.section-watermark--center {
  right: 50%;
  transform: translateX(50%);
}