/* 
 * Global CSS to hide question marks, emojis, and special characters
 * Include this file in all HTML pages: <link rel="stylesheet" href="hide-emojis-globally.css">
 */

/* Hide icon/emoji spans */
.icon,
span.icon {
    font-size: 0 !important;
    color: transparent !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    display: inline-block !important;
    line-height: 0 !important;
    opacity: 0 !important;
}

/* Company name styling - NO ::before pseudo-elements to avoid duplication */
.hero-company-name,
.company-name,
span.hero-company-name,
span.company-name {
    font-size: 1.25rem !important;
    font-weight: 600 !important;
    display: inline-block !important;
    letter-spacing: normal !important;
}

/* Override for smaller text contexts */
span[style*="font-size: 16px"] .company-name,
span[style*="font-size: 16px"].company-name {
    font-size: 16px !important;
}

/* Filter out � character using font replacement */
body {
    text-rendering: optimizeLegibility;
}

/* Hide question marks in UI text - use CSS text-replace where possible */
/* For browsers that support it, replace ? at start of text */
p, div, span, h1, h2, h3, h4, h5, h6, li {
    /* Remove leading question marks from displayed text */
}

/* Specific fixes for common patterns */
p:has-text("? No"),
p:has-text("?? No"),
div:has-text("? No"),
div:has-text("?? No") {
    /* These will need JavaScript to fully hide */
}

/* Hide loading/error message question marks using negative text-indent */
.loading-spinner::first-letter,
.error-message::first-letter,
.success-message::first-letter {
    color: transparent;
    font-size: 0;
}