/*
  Keep emojis full‑color inside gradient text.
  Usage: wrap the emoji with <span class=\"emoji\">🙂</span>
  No JS required; works anywhere, including inside .brand h1/h2.
*/

/* Base emoji reset */
.emoji{
  /* Prefer color-emoji fonts so glyphs stay multicolor */
  font-family: "Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji","Twemoji Mozilla","EmojiOne Color", system-ui, sans-serif;
  display:inline-block;                /* isolate from parent background clipping */

  /* Neutralize gradient clipping coming from parents */
  background:none !important;
  -webkit-background-clip:initial !important;
          background-clip:initial !important;
  text-shadow:none; filter:none;

  /* Ensure fill is visible even if parent sets color:transparent */
  color: var(--fg, #f4fff6);
  -webkit-text-fill-color: currentColor; /* Safari/Chromium */
}

/* Common gradient-heading containers on this site */
.brand h1 .emoji,
.brand h2 .emoji{
  color: var(--fg, #f4fff6);
  -webkit-text-fill-color: currentColor;
}

/* Optional helper: apply gradient only where you want it */
.gradient-text{
  background: linear-gradient(90deg, var(--accent) 0%, var(--accent-2) 40%, var(--accent-3) 80%);
  -webkit-background-clip:text; background-clip:text;
  color: transparent;
}