/*
 * WELCOME TO RUSSIA – 2026 Design Polish & Contrast Fix
 * Version: 1.0 | Load AFTER styles_v4_1.css and mobile-fixes.css
 */

/* 1. CONTRAST: .text-meta */
.text-meta {
    color: #5A5854;
}

.hero .text-meta,
[style*="background: var(--color-charcoal)"] .text-meta,
[style*="charcoal"] .text-meta,
.footer .text-meta,
.card-dark .text-meta {
    color: #D4AF37; /* Bright gold for dark backgrounds */
}

/* 2. CONTRAST: Gold on light backgrounds - Keep bright gold for dark backgrounds */
:root {
    --color-gold-accessible: #9E7C1A;
    --color-gold-display: #D4AF37;
}

/* Fix for text-accent on dark backgrounds */
.hero .text-accent,
[style*="background: var(--color-charcoal)"] .text-accent,
[style*="charcoal"] .text-accent,
.footer .text-accent,
.card-dark .text-accent {
    color: #D4AF37; /* Bright gold for dark backgrounds */
}

[style*="background: var(--color-off-white)"] .text-meta[style*="color: var(--color-gold)"],
[style*="background: white"] .text-meta[style*="color: var(--color-gold)"],
[style*="background: linear-gradient"] .text-meta[style*="color: var(--color-gold)"] {
    color: var(--color-gold-accessible) !important;
}

.section[style*="off-white"] span[style*="gold"],
.section[style*="white"] span[style*="gold"] {
    color: var(--color-gold-accessible) !important;
}

[style*="background: var(--color-off-white)"] .section-subtitle,
[style*="background: white"] .section-subtitle {
    color: var(--color-gold-accessible);
}

/* 3. CONTRAST: btn-secondary on light backgrounds */
[style*="background: var(--color-off-white)"] .btn-secondary,
[style*="background: white"] .btn-secondary {
    border-color: var(--color-charcoal);
    color: var(--color-charcoal);
}

[style*="background: var(--color-off-white)"] .btn-secondary:hover,
[style*="background: white"] .btn-secondary:hover {
    background: var(--color-charcoal);
    color: var(--color-off-white);
}

/* 4. GLOBAL TEXT COLOR FIX for light backgrounds */
/* This ensures all text is readable on off-white backgrounds */
section[style*="background: var(--color-off-white)"],
section[style*="background-color: var(--color-off-white)"],
.section[style*="background: var(--color-off-white)"] {
    color: #1A1C1F;
}

section[style*="background: var(--color-off-white)"] h1,
section[style*="background: var(--color-off-white)"] h2,
section[style*="background: var(--color-off-white)"] h3,
section[style*="background: var(--color-off-white)"] h4,
section[style*="background: var(--color-off-white)"] h5,
section[style*="background: var(--color-off-white)"] h6,
section[style*="background: var(--color-off-white)"] p,
section[style*="background: var(--color-off-white)"] li,
section[style*="background-color: var(--color-off-white)"] h1,
section[style*="background-color: var(--color-off-white)"] h2,
section[style*="background-color: var(--color-off-white)"] h3,
section[style*="background-color: var(--color-off-white)"] h4,
section[style*="background-color: var(--color-off-white)"] h5,
section[style*="background-color: var(--color-off-white)"] h6,
section[style*="background-color: var(--color-off-white)"] p,
section[style*="background-color: var(--color-off-white)"] li {
    color: #1A1C1F;
}

/* 5. AG HERO SECTION FIX - Ensure text is visible */
.hero-ctas {
    display: flex;
    gap: 1rem;
    margin-top: 2rem;
    justify-content: center;
    align-items: center;
}

@media (max-width: 768px) {
    .hero-ctas {
        flex-direction: column;
        align-items: center;
    }
    
    .hero-ctas .btn {
        width: 100%;
        max-width: 300px;
    }
}

/* 6. FOOTER FIX - Ensure footer links are visible */
.footer a {
    color: rgba(255, 255, 255, 0.8);
}

.footer a:hover {
    color: var(--color-gold);
}

/* 7. VIDEO CONTAINER FIX */
@media (max-width:380px) {
    .video-container {
        border-radius: 10px;
    }

    .video-controls {
        bottom: 6px;
        left: 6px;
        right: 6px;
        border-radius: 10px;
    }
}

/* 8. CARD REFINEMENT */
.card { background:rgba(255,255,255,.92); border-left:3px solid var(--color-gold);
    box-shadow:0 1px 3px rgba(0,0,0,.04),0 4px 16px rgba(0,0,0,.03); border-radius:8px;
    transition:all .35s cubic-bezier(.2,0,0,1); }
.card:hover { box-shadow:0 2px 8px rgba(0,0,0,.06),0 8px 32px rgba(0,0,0,.08); transform:translateY(-3px); }
.card h3 { color:#1A1C1F; font-weight:600; }
.card p { color:#3D3F44; }
a.card { text-decoration:none; transition:all .35s cubic-bezier(.2,0,0,1); }

/* 9. CRITICAL: CTA Sections on light backgrounds */
.section[style*="background: var(--color-off-white)"].text-center h2,
.section[style*="background: var(--color-off-white)"].text-center p {
    color: #1A1C1F !important;
}

/* 9.1 CTA TEXT CENTERING FIX */
.section.text-center .text-lead,
.section.cta-final.text-center p,
.section.cta-final.text-center .text-lead {
    text-align: center !important;
    margin-left: auto;
    margin-right: auto;
}

.section.text-center h2,
.section.text-center h3,
.section.cta-final.text-center h2 {
    text-align: center !important;
}

/* 9.5 BUTTON GROUP CENTERING FIX */
.hero-ctas.btn-group {
    justify-content: center !important;
    align-items: center !important;
    width: 100%;
}

.section.cta-final .hero-ctas,
.section.cta-final .btn-group {
    justify-content: center !important;
    align-items: center !important;
}

/* 10. INTRO CONTENT FIX */
.intro-content h2,
.intro-content p {
    color: #1A1C1F;
}

.section[style*="var(--color-off-white)"] .intro-content h2,
.section[style*="var(--color-off-white)"] .intro-content p {
    color: #1A1C1F !important;
}

/* 11. FIX: Sections without explicit background on dark pages */
/* These sections inherit dark body background but may have text without proper color */
.section:not([style*="background"]):not([class*="bg-"]) .section-title,
.section:not([style*="background"]):not([class*="bg-"]) p {
    color: #FFFFFF;
}

.section:not([style*="background"]):not([class*="bg-"]) .text-center .section-title,
.section:not([style*="background"]):not([class*="bg-"]) .text-center p {
    color: #FFFFFF;
}