/**
 * QUIZTREFF EMOJI SYSTEM
 * ======================
 * Consistent emoji rendering across all platforms
 * Uses Twemoji for standardized appearance
 */

/* ===========================================
   TWEMOJI BASE STYLES
   =========================================== */

/* Parsed Twemoji images */
img.emoji,
img.twemoji {
    height: 1.2em;
    width: 1.2em;
    margin: 0 0.05em 0 0.1em;
    vertical-align: -0.15em;
    display: inline-block;
    object-fit: contain;
    /* Prevent layout shift */
    min-width: 1em;
    min-height: 1em;
}

/* Larger emoji contexts */
.emoji-lg img.emoji,
.emoji-lg img.twemoji,
img.emoji.emoji-lg,
img.twemoji.emoji-lg {
    height: 1.5em;
    width: 1.5em;
}

.emoji-xl img.emoji,
.emoji-xl img.twemoji,
img.emoji.emoji-xl,
img.twemoji.emoji-xl {
    height: 2em;
    width: 2em;
}

.emoji-2xl img.emoji,
.emoji-2xl img.twemoji,
img.emoji.emoji-2xl,
img.twemoji.emoji-2xl {
    height: 2.5em;
    width: 2.5em;
}

.emoji-3xl img.emoji,
.emoji-3xl img.twemoji,
img.emoji.emoji-3xl,
img.twemoji.emoji-3xl {
    height: 3em;
    width: 3em;
}

/* ===========================================
   NATIVE EMOJI FALLBACK FONTS
   =========================================== */

/* For when Twemoji isn't loaded yet or disabled */
.emoji-text,
.uses-emoji {
    font-family:
        "Apple Color Emoji",
        "Segoe UI Emoji",
        "Segoe UI Symbol",
        "Noto Color Emoji",
        "Android Emoji",
        "EmojiSymbols",
        sans-serif;
}

/* ===========================================
   EMOJI IN SPECIFIC CONTEXTS
   =========================================== */

/* Buttons with emoji */
button .emoji,
.btn .emoji,
button img.twemoji,
.btn img.twemoji {
    vertical-align: middle;
    margin-right: 0.35em;
}

/* Flex buttons with emoji */
.btn-with-emoji,
.button-emoji {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
}

.btn-with-emoji img.twemoji,
.button-emoji img.twemoji {
    flex-shrink: 0;
    margin: 0;
    vertical-align: baseline;
}

/* List items with emoji bullets */
.emoji-list {
    list-style: none;
    padding-left: 0;
}

.emoji-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.75em;
    padding: 0.5em 0;
}

.emoji-list li::before {
    content: none; /* Remove default bullet */
}

.emoji-list .emoji-bullet {
    flex-shrink: 0;
    width: 1.5em;
    text-align: center;
}

.emoji-list .emoji-bullet img.twemoji {
    vertical-align: baseline;
}

/* Feature list with emojis */
.feature-list li {
    display: flex;
    align-items: center;
    gap: 0.75em;
    line-height: 1.5;
}

.feature-list li img.twemoji:first-child {
    flex-shrink: 0;
}

/* ===========================================
   EMOJI BADGES & LABELS
   =========================================== */

.emoji-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    padding: 0.25em 0.75em;
    border-radius: 999px;
    font-weight: 600;
    font-size: 0.875rem;
    white-space: nowrap;
}

.emoji-badge img.twemoji {
    height: 1em;
    width: 1em;
    margin: 0;
}

/* ===========================================
   EMOJI ICONS (standalone decorative)
   =========================================== */

.emoji-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    line-height: 1;
}

.emoji-icon-sm { font-size: 1rem; }
.emoji-icon-md { font-size: 1.5rem; }
.emoji-icon-lg { font-size: 2rem; }
.emoji-icon-xl { font-size: 2.5rem; }
.emoji-icon-2xl { font-size: 3rem; }
.emoji-icon-3xl { font-size: 4rem; }

.emoji-icon img.twemoji {
    height: 1em;
    width: 1em;
    margin: 0;
}

/* ===========================================
   PREVENT LINE HEIGHT ISSUES
   =========================================== */

/* Prevent emojis from breaking line height */
p img.twemoji,
span img.twemoji,
li img.twemoji,
td img.twemoji,
th img.twemoji {
    vertical-align: -0.15em;
}

/* Headers need special handling */
h1 img.twemoji,
h2 img.twemoji,
h3 img.twemoji,
h4 img.twemoji,
h5 img.twemoji,
h6 img.twemoji {
    vertical-align: -0.1em;
    height: 0.9em;
    width: 0.9em;
}

/* ===========================================
   CUSTOM EMOTES (non-Unicode)
   =========================================== */

.custom-emote {
    display: inline-block;
    height: 1.5em;
    width: 1.5em;
    vertical-align: -0.25em;
    object-fit: contain;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
}

.custom-emote-sm { height: 1em; width: 1em; }
.custom-emote-md { height: 1.5em; width: 1.5em; }
.custom-emote-lg { height: 2em; width: 2em; }
.custom-emote-xl { height: 3em; width: 3em; }

/* ===========================================
   LOADING STATE / SKELETON
   =========================================== */

.emoji-loading {
    display: inline-block;
    width: 1.2em;
    height: 1.2em;
    background: rgba(255,255,255,0.1);
    border-radius: 4px;
    animation: emoji-pulse 1.5s ease-in-out infinite;
}

@keyframes emoji-pulse {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 0.8; }
}

/* ===========================================
   ACCESSIBILITY
   =========================================== */

/* Screen reader text for emoji-only elements */
.emoji-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Ensure emoji don't interfere with focus */
img.twemoji:focus,
img.emoji:focus {
    outline: none;
}

/* ===========================================
   DARK MODE ADJUSTMENTS (if needed)
   =========================================== */

@media (prefers-color-scheme: dark) {
    /* Twemoji looks good on dark backgrounds by default */
}

/* ===========================================
   PRINT STYLES
   =========================================== */

@media print {
    img.twemoji,
    img.emoji {
        /* Use native emoji for print */
        display: none;
    }

    /* Restore native emoji for print */
    .emoji-text::after {
        content: attr(data-emoji);
    }
}