/* Zodiac Text Symbols CSS - ASCII symbols with custom styling, never emoji */

.zodiac-text-symbol {
    /* Force text rendering, never emoji */
    font-family: 'Arial Unicode MS', 'Lucida Grande', 'DejaVu Sans', sans-serif;
    font-feature-settings: "liga" 0, "clig" 0, "calt" 0;
    -webkit-font-feature-settings: "liga" 0, "clig" 0, "calt" 0;
    -moz-font-feature-settings: "liga" 0, "clig" 0, "calt" 0;
    font-variant-ligatures: none;
    font-variant-emoji: text;
    -webkit-font-variant-emoji: text;
    text-rendering: optimizeSpeed;
    -webkit-text-stroke: 0.3px currentColor;
    text-shadow: none;
    font-weight: 600;

    /* Badge styling */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    border-radius: 12px;
    padding: 0.45em;
    background: var(--velora-accent-primary, #8B5CF6);
    color: white;
    border: none;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    aspect-ratio: 1 / 1;
}

[data-theme="dark"] .zodiac-text-symbol {
    background: var(--velora-accent-primary, #8B5CF6);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* Hover effect */
.zodiac-text-symbol:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    filter: brightness(1.1);
}

[data-theme="dark"] .zodiac-text-symbol:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}


/* Force text rendering instead of emoji */
.zodiac-text-symbol::before {
    font-variation-settings: "GRAD" 0;
    -webkit-font-variant-emoji: text;
    font-variant-emoji: text;
}

/* Individual zodiac symbol colors - using solid backgrounds for icon look */
.zodiac-text-symbol[data-sign="aries"] {
    background: #FF6B6B;
    color: white;
}

.zodiac-text-symbol[data-sign="taurus"] {
    background: #66BB6A;
    color: white;
}

.zodiac-text-symbol[data-sign="gemini"] {
    background: #FFA726;
    color: white;
}

.zodiac-text-symbol[data-sign="cancer"] {
    background: #42A5F5;
    color: white;
}

.zodiac-text-symbol[data-sign="leo"] {
    background: #FFD54F;
    color: #1A1A1A;
    /* Dark text for better contrast on yellow */
}

.zodiac-text-symbol[data-sign="virgo"] {
    background: #8D6E63;
    color: white;
}

.zodiac-text-symbol[data-sign="libra"] {
    background: #EC407A;
    color: white;
}

.zodiac-text-symbol[data-sign="scorpio"] {
    background: #AB47BC;
    color: white;
}

.zodiac-text-symbol[data-sign="sagittarius"] {
    background: #7E57C2;
    color: white;
}

.zodiac-text-symbol[data-sign="capricorn"] {
    background: #5C6BC0;
    color: white;
}

.zodiac-text-symbol[data-sign="aquarius"] {
    background: #29B6F6;
    color: white;
}

.zodiac-text-symbol[data-sign="pisces"] {
    background: #26C6DA;
    color: white;
}


/* Size variants - maintain badge proportions */
.zodiac-text-symbol.small {
    font-size: 1em;
    padding: 0.35em;
    border-radius: 6px;
}

.zodiac-text-symbol.medium {
    font-size: 1.25em;
    padding: 0.4em;
    border-radius: 8px;
}

.zodiac-text-symbol.large {
    font-size: 1.75em;
    padding: 0.45em;
    border-radius: 10px;
}

.zodiac-text-symbol.xl {
    font-size: 2.5em;
    padding: 0.5em;
    border-radius: 12px;
}

/* Navigation specific styling - smaller badges for navigation */
.nav-link .zodiac-text-symbol {
    font-size: 0.95em;
    margin-right: 0.35rem;
    vertical-align: middle;
    padding: 0.25em 0.3em;
    border-radius: 5px;
}

/* Footer zodiac grid styling */
.zodiac-link .zodiac-text-symbol,
.zodiac-link-with-name .zodiac-text-symbol {
    font-size: 1.1em;
    transition: all 0.2s ease;
}

.zodiac-link:hover .zodiac-text-symbol,
.zodiac-link-with-name:hover .zodiac-text-symbol {
    transform: scale(1.08);
}

/* Mobile dropdown styling */
.mobile-dropdown .zodiac-text-symbol {
    font-size: 0.9em;
    padding: 0.25em 0.3em;
    border-radius: 5px;
    margin-right: 0.35rem;
}

/* Ensure proper spacing in lists */
a .zodiac-text-symbol {
    margin-right: 0.5rem;
}

/* Accessibility - ensure symbols don't interfere with text selection */
.zodiac-text-symbol {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
}

/* Print styles - ensure symbols render properly when printed */
@media print {
    .zodiac-text-symbol {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}