/* 
   style-custom.css
   Contains Component Styles (Hero, Sections, Cards, Footer, etc.)
   
   NOTE: 
   - Base styles, Variables, Reset, Typography -> critical.css
   - Navigation -> assets/css/navigation.css
   - Buttons -> assets/css/buttons.css
*/

/* ========================================
   Utility Classes (Extensions)
   ======================================== */

.section {
    padding-top: var(--spacing-3xl);
    padding-bottom: var(--spacing-3xl);
}

.section-black {
    background-color: var(--color-black);
    color: var(--color-text-inverse);
}

.text-center {
    text-align: center;
}

.text-inverse {
    color: var(--color-text-inverse);
}

.text-secondary {
    color: var(--color-text-secondary);
}

@media (max-width: 768px) {
    .section {
        padding-top: var(--spacing-lg);
        padding-bottom: var(--spacing-lg);
    }
}

/* Focus visible styles */
*:focus-visible {
    outline: 2px solid var(--color-brand-red);
    outline-offset: 2px;
}

/* ========================================
   Animations
   ======================================== */

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes slideInFromTop {
    from {
        transform: translateY(-100%);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes slideInFromBottom {
    from {
        transform: translateY(100%);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.fade-in {
    animation: fadeIn var(--transition-base);
}

.slide-in-top {
    animation: slideInFromTop var(--transition-base);
}

.slide-in-bottom {
    animation: slideInFromBottom var(--transition-base);
}

/* Page Sections moved to assets/css/sections.css */

/* Footer Component Styles moved to assets/css/footer.css */

/* ========================================
   Fix Contrast Issues in Dark Sections
   ======================================== */

/* Force white text for headings in known dark containers */
.section-black h1,
.section-black h2,
.section-black h3,
.section-black h4,
.section-black h5,
.section-black h6,
.cta-box h1,
.cta-box h2,
.cta-box h3,
.cta-box h4,
.cta-box h5,
.cta-box h6,
.visa-hero h1,
.visa-hero h2,
.visa-hero h3,
.visa-hero h4,
.visa-hero h5,
.visa-hero h6,
.contact-info h1,
.contact-info h2,
.contact-info h3,
.contact-info h4,
.contact-info h5,
.contact-info h6,
.hero h1,
.hero h2,
.hero h3,
.hero h4,
.hero h5,
.hero h6,
.footer h1,
.footer h2,
.footer h3,
.footer h4,
.footer h5,
.footer h6 {
    color: #ffffff !important;
}

/* Force light text for paragraphs and list items in known dark containers */
.section-black p,
.section-black li,
.visa-hero p,
.visa-hero li,
.cta-box p,
.cta-box li,
.contact-info p,
.contact-info li,
.hero p,
.hero li,
.footer p,
.footer li {
    color: rgba(255, 255, 255, 0.9);
}

/* Force white text for links in known dark containers */
.section-black a,
.visa-hero a,
.cta-box a,
.contact-info a,
.hero a,
.footer a {
    color: #ffffff;
}

.section-black a:hover,
.visa-hero a:hover,
.cta-box a:hover,
.contact-info a:hover,
.hero a:hover,
.footer a:hover {
    color: var(--color-brand-red);
}

/* Standardized Components moved to assets/css/blocks.css */

/* Global Overrides */
.page .entry-header,
.page .entry-title {
    display: none !important;
}