/* 🎨 TEXT VISIBILITY ENHANCEMENT
 * Date: February 12, 2026
 * Purpose: Ensure ALL text is clearly visible with dark, high-contrast colors
 */

/* ========================================
   1. GLOBAL TEXT DARKNESS & CONTRAST
   ======================================== */

body {
    color: #1a1a1a !important;
}

/* All headings - Make them very dark */
h1, h2, h3, h4, h5, h6 {
    color: #1a1a1a !important;
    font-weight: 700 !important;
}

/* All paragraphs and text */
p, span, div, li, td, th, label {
    color: #2a2a2a !important;
}

/* Links - Dark but distinguishable */
a {
    color: #8B0000 !important;
    font-weight: 600 !important;
}

a:hover {
    color: #DC143C !important;
}

/* ========================================
   2. CARD TEXT VISIBILITY
   ======================================== */

.card h3,
.card h4 {
    color: #8B0000 !important;
    font-weight: 700 !important;
}

.card p,
.card-description {
    color: #1a1a1a !important;
    font-weight: 500 !important;
}

.card-icon {
    color: #DC143C !important;
}

/* ========================================
   3. SECTION TITLES - EXTRA DARK
   ======================================== */

.section-title {
    color: #8B0000 !important;
    font-weight: 800 !important;
    text-shadow: none !important;
}

.section-subtitle {
    color: #1a1a1a !important;
    font-weight: 600 !important;
}

/* ========================================
   4. NAVIGATION TEXT
   ======================================== */

.nav-link {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.3) !important;
}

.nav-link:hover,
.nav-link.active {
    color: #FFD700 !important;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.5) !important;
}

/* ========================================
   5. HERO SECTION TEXT
   ======================================== */

.hero-content h1,
.hero-content-clean h1,
.hero-content-enhanced h1 {
    color: #ffffff !important;
    font-weight: 900 !important;
    text-shadow: 3px 3px 8px rgba(0,0,0,0.8),
                 1px 1px 4px rgba(0,0,0,0.9) !important;
}

.hero-content .tagline,
.hero-content-clean .tagline {
    color: #ffffff !important;
    font-weight: 700 !important;
    text-shadow: 2px 2px 6px rgba(0,0,0,0.8),
                 1px 1px 3px rgba(0,0,0,0.9) !important;
}

.hero-content p {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.7) !important;
}

/* ========================================
   6. BUTTON TEXT
   ======================================== */

.btn {
    font-weight: 700 !important;
    text-shadow: none !important;
}

.btn-primary {
    color: #1a1a1a !important;
}

.btn-secondary {
    color: #ffffff !important;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.3) !important;
}

/* ========================================
   7. FESTIVAL & EVENT TEXT
   ======================================== */

.festival-name,
.festival-card h3,
.festival-card h4 {
    color: #8B0000 !important;
    font-weight: 700 !important;
}

.festival-description,
.festival-card p {
    color: #1a1a1a !important;
    font-weight: 500 !important;
}

.date-number {
    color: #8B0000 !important;
    font-weight: 800 !important;
}

.date-month {
    color: #2a2a2a !important;
    font-weight: 600 !important;
}

.festival-type-badge {
    font-weight: 700 !important;
}

/* ========================================
   8. TABLE TEXT
   ======================================== */

table th {
    color: #ffffff !important;
    font-weight: 700 !important;
    background: #8B0000 !important;
}

table td {
    color: #1a1a1a !important;
    font-weight: 500 !important;
}

/* ========================================
   9. FORM TEXT
   ======================================== */

form label {
    color: #1a1a1a !important;
    font-weight: 700 !important;
}

form input,
form textarea,
form select {
    color: #1a1a1a !important;
    font-weight: 500 !important;
}

form input::placeholder,
form textarea::placeholder {
    color: #666666 !important;
    font-weight: 500 !important;
}

/* ========================================
   10. FOOTER TEXT
   ======================================== */

.footer {
    background: linear-gradient(135deg, #2C1810 0%, #3D2416 50%, #4A2C1A 100%) !important;
}

.footer h4 {
    color: #FFD700 !important;
    font-weight: 700 !important;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5) !important;
    font-size: 1.3rem !important;
}

.footer p,
.footer a {
    color: #f5f5f5 !important;
    font-weight: 500 !important;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.5) !important;
}

.footer i {
    color: #FFD700 !important;
    font-size: 1.1rem !important;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5) !important;
}

.footer a:hover {
    color: #FFD700 !important;
    text-shadow: 1px 1px 4px rgba(0,0,0,0.6) !important;
}

.footer-bottom {
    color: #f5f5f5 !important;
    border-top: 2px solid rgba(255, 215, 0, 0.3) !important;
}

.developer-credit {
    color: #FFD700 !important;
    font-weight: 600 !important;
}

.developer-credit a {
    color: #FFD700 !important;
    font-weight: 700 !important;
}

.developer-credit a:hover {
    color: #FFA500 !important;
}

/* ========================================
   11. DEITY & TEMPLE INFO TEXT
   ======================================== */

.deity-info h3,
.deity-card h3 {
    color: #8B0000 !important;
    font-weight: 700 !important;
}

.deity-info p,
.deity-card p {
    color: #1a1a1a !important;
    font-weight: 500 !important;
}

/* ========================================
   12. TIMING & SCHEDULE TEXT
   ======================================== */

.timing-card h4 {
    color: #8B0000 !important;
    font-weight: 700 !important;
}

.timing-card .time {
    color: #DC143C !important;
    font-weight: 800 !important;
}

.timing-card p {
    color: #1a1a1a !important;
    font-weight: 500 !important;
}

/* ========================================
   13. ANNOUNCEMENT TEXT
   ======================================== */

.announcements {
    background: #8B0000 !important;
}

.announcement-item {
    background: rgba(255, 255, 255, 0.15) !important;
}

.announcement-item h4,
.announcement-item p {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5) !important;
}

.announcement-date {
    color: #FFD700 !important;
    font-weight: 700 !important;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5) !important;
}

/* ========================================
   14. GALLERY TEXT
   ======================================== */

.gallery-overlay h4 {
    color: #ffffff !important;
    font-weight: 700 !important;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.8) !important;
}

.gallery-overlay p {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.8) !important;
}

.lightbox-caption {
    color: #ffffff !important;
    font-weight: 700 !important;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.9) !important;
}

/* ========================================
   15. CONTACT INFO TEXT
   ======================================== */

.contact-card h4 {
    color: #8B0000 !important;
    font-weight: 700 !important;
}

.contact-card p,
.contact-card a {
    color: #1a1a1a !important;
    font-weight: 600 !important;
}

/* ========================================
   16. DONATION TEXT
   ======================================== */

.donation-amount {
    color: #8B0000 !important;
    font-weight: 800 !important;
}

.donation-info p {
    color: #1a1a1a !important;
    font-weight: 600 !important;
}

/* ========================================
   17. COMMITTEE MEMBER TEXT
   ======================================== */

.committee-card h4 {
    color: #8B0000 !important;
    font-weight: 700 !important;
}

.committee-card p {
    color: #1a1a1a !important;
    font-weight: 600 !important;
}

/* ========================================
   18. POOJA SERVICE TEXT
   ======================================== */

.pooja-name {
    color: #8B0000 !important;
    font-weight: 700 !important;
}

.pooja-price {
    color: #DC143C !important;
    font-weight: 800 !important;
}

.pooja-description {
    color: #1a1a1a !important;
    font-weight: 500 !important;
}

/* ========================================
   19. SPECIAL EMPHASIS TEXT
   ======================================== */

strong, b {
    color: #8B0000 !important;
    font-weight: 800 !important;
}

em, i {
    color: #2a2a2a !important;
    font-weight: 600 !important;
}

/* ========================================
   20. LIST TEXT
   ======================================== */

ul li,
ol li {
    color: #1a1a1a !important;
    font-weight: 500 !important;
}

ul li::marker,
ol li::marker {
    color: #8B0000 !important;
    font-weight: 700 !important;
}

/* ========================================
   21. CALENDAR TEXT
   ======================================== */

.calendar-month-title {
    color: #8B0000 !important;
    font-weight: 700 !important;
}

.weekday {
    color: #8B0000 !important;
    font-weight: 700 !important;
}

.calendar-date .date-number {
    color: #1a1a1a !important;
    font-weight: 700 !important;
}

.calendar-date.today .date-number {
    color: #DC143C !important;
    font-weight: 800 !important;
}

/* ========================================
   22. SEARCH & FILTER TEXT
   ======================================== */

.search-input,
.filter-select {
    color: #1a1a1a !important;
    font-weight: 600 !important;
}

.search-btn,
.filter-btn {
    color: #ffffff !important;
    font-weight: 700 !important;
}

/* ========================================
   23. BADGE & TAG TEXT
   ======================================== */

.badge,
.tag {
    font-weight: 700 !important;
}

/* ========================================
   24. QUOTE & BLOCKQUOTE TEXT
   ======================================== */

blockquote {
    color: #2a2a2a !important;
    font-weight: 600 !important;
    border-left: 4px solid #8B0000 !important;
}

/* ========================================
   25. MOBILE TEXT ADJUSTMENTS
   ======================================== */

@media (max-width: 768px) {
    body {
        font-size: 16px !important;
    }
    
    h1 {
        font-size: 1.8rem !important;
    }
    
    h2 {
        font-size: 1.5rem !important;
    }
    
    h3 {
        font-size: 1.3rem !important;
    }
    
    p, li, td {
        font-size: 0.95rem !important;
        line-height: 1.6 !important;
    }
    
    /* Ensure hero text is extra visible on mobile */
    .hero-content h1 {
        font-size: 1.8rem !important;
        text-shadow: 4px 4px 10px rgba(0,0,0,0.9),
                     2px 2px 6px rgba(0,0,0,1) !important;
    }
    
    .hero-content .tagline {
        font-size: 1.1rem !important;
        text-shadow: 3px 3px 8px rgba(0,0,0,0.9),
                     1px 1px 4px rgba(0,0,0,1) !important;
    }
}

/* ========================================
   26. PRINT TEXT VISIBILITY
   ======================================== */

@media print {
    * {
        color: #000000 !important;
        text-shadow: none !important;
    }
    
    h1, h2, h3, h4, h5, h6 {
        color: #000000 !important;
    }
    
    a {
        color: #000000 !important;
        text-decoration: underline !important;
    }
}

/* ========================================
   27. HIGH CONTRAST MODE SUPPORT
   ======================================== */

@media (prefers-contrast: high) {
    body {
        color: #000000 !important;
    }
    
    h1, h2, h3, h4, h5, h6 {
        color: #000000 !important;
    }
    
    p, span, div, li {
        color: #000000 !important;
    }
    
    a {
        color: #8B0000 !important;
        text-decoration: underline !important;
    }
}

/* ========================================
   28. ENSURE NO LIGHT TEXT ON LIGHT BG
   ======================================== */

.light-gray p,
.light-gray h1,
.light-gray h2,
.light-gray h3,
.light-gray h4,
.light-gray span,
.light-gray div {
    color: #1a1a1a !important;
}

.white p,
.white h1,
.white h2,
.white h3,
.white h4,
.white span,
.white div {
    color: #1a1a1a !important;
}

/* ========================================
   29. SCROLLING TEXT VISIBILITY
   ======================================== */

.scrolling-text {
    color: #ffffff !important;
    font-weight: 700 !important;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.8) !important;
}

/* ========================================
   30. TOOLTIP & POPUP TEXT
   ======================================== */

.tooltip,
.popup {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.8) !important;
}

/* ========================================
   31. ERROR & SUCCESS MESSAGE TEXT
   ======================================== */

.error-message {
    color: #8B0000 !important;
    font-weight: 700 !important;
}

.success-message {
    color: #006400 !important;
    font-weight: 700 !important;
}

.warning-message {
    color: #FF8C00 !important;
    font-weight: 700 !important;
}

/* ========================================
   32. ENSURE READABILITY ON ALL BACKGROUNDS
   ======================================== */

/* On red backgrounds */
[style*="background: var(--temple-red)"] *,
[style*="background: var(--primary-maroon)"] *,
[style*="background: #DC143C"] *,
[style*="background: #8B0000"] * {
    color: #ffffff !important;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5) !important;
}

/* On light backgrounds */
[style*="background: var(--light-gray)"] *,
[style*="background: var(--white)"] *,
[style*="background: #ffffff"] *,
[style*="background: white"] * {
    color: #1a1a1a !important;
    text-shadow: none !important;
}