/* ================================================================
   VMA Watermark & Section Icon System
================================================================ */

:root {
  --section-icon: url('../images/VMA-TABS-Logo250x244.gif');
  --watermark-icon: url('../images/VMA_TABS_Logo.png');
}

/* ── 1. FLOATING FIXED WATERMARK — inverted for smooth blending ── */
.vma-watermark {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 85vmin;
  height: 85vmin;
  background-image: var(--watermark-icon);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  pointer-events: none;
  z-index: 1;
  opacity: 0.06;
  /* Inverted from previous — white icon shows as soft glow on light sections */
  filter: invert(0) brightness(1.5);
  mix-blend-mode: screen;
}

/* ── 2. SECTION HEADING ICON — new GIF left of each main h2 ── */
.section-title::before,
.svc-title::before {
  content: '';
  display: inline-block;
  width: 36px;
  height: 36px;
  background-image: var(--section-icon);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  vertical-align: middle;
  margin-right: 12px;
  opacity: 0.9;
}

/* On dark sections the GIF (light outline) shows naturally */
.dark-section .section-title::before,
.section-title.light::before,
#quality .section-title::before,
#cta .section-title::before {
  opacity: 1;
}

/* Page hero h1 on service pages */
.page-hero h1::before {
  content: '';
  display: inline-block;
  width: 44px;
  height: 44px;
  background-image: var(--section-icon);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  vertical-align: middle;
  margin-right: 14px;
  opacity: 1;
}

/* ── 3. BLOCK WATERMARK from bleeding into solid sections ── */
.image-gallery,
#hero,
#bookkeeping,
.dark-section,
nav,
footer,
.tax-cta-strip,
.tax-track-header,
.sidebar-box {
  isolation: isolate;
}

/* ── 4. NO per-section background watermarks ── */
.section-watermark {
  display: none !important;
}