/* ========== Smart Ink (auto-contrasting text) ========== */

/* Base: difference blends white into the inverse of bg: bright bg → dark text, dark bg → white text */
.smart-ink {
  color: #fff;                     /* base color for difference to invert from */
  mix-blend-mode: difference;      /* the magic */
  isolation: isolate;              /* ensure a new stacking context for predictable blending */
}

/* Make sure inline SVGs/icons follow the text color */
.smart-ink svg, .smart-ink svg * {
  fill: currentColor !important;
  stroke: currentColor !important;
}

/* Buttons/links that sit atop photos or variable backgrounds */
.btn-smart {
  color: #fff;
  mix-blend-mode: difference;
  border: 1.5px solid currentColor;
  background: transparent;
  transition: transform .15s ease, opacity .15s ease;
}
.btn-smart:hover { transform: translateY(-1px); opacity: .92; }

/* Optional: stronger weight for headings on images */
.smart-ink.bold { font-weight: 800; }

/* Fallbacks for browsers/contexts where blend-mode is unsupported or visually not sufficient */
@supports not (mix-blend-mode: difference) {
  .smart-ink,
  .btn-smart {
    mix-blend-mode: normal;
    color: var(--text-on-image, #ffffff);
    text-shadow:
      0 0 2px rgba(0,0,0,.45),
      0 2px 16px rgba(0,0,0,.55);
    /* Provide a subtle dark underlay via pseudo-element on containers */
  }
}

/* Container helper: adds an adaptive underlay behind text to guarantee contrast */
.ink-wrap {
  position: relative;
}
.ink-wrap::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,.18));
  pointer-events: none;
  opacity: var(--ink-underlay, 0);          /* set to 0.18–0.28 where needed */
}

/* Utility when text sits on extremely noisy/brilliant images */
.force-readable .smart-ink {
  mix-blend-mode: normal !important;
  color: #ffffff !important;
  text-shadow:
    0 2px 14px rgba(0,0,0,.55),
    0 0 1px rgba(0,0,0,.35);
}