/* EMERGENCY FIX - MAKE EVERYTHING VISIBLE */

/* Pricing Section - Ensure everything is readable */
.pricing-section {
    background: white !important;
}

/* All text in pricing cards should be black by default */
.pricing-section .bg-white {
    color: black !important;
}

.pricing-section .bg-white * {
    color: black !important;
}

/* DIY Plan - Gold gradient card needs white text */
.pricing-section div[style*="linear-gradient"][style*="#D4AF37"] {
    color: white !important;
}

.pricing-section div[style*="linear-gradient"][style*="#D4AF37"] h3,
.pricing-section div[style*="linear-gradient"][style*="#D4AF37"] div,
.pricing-section div[style*="linear-gradient"][style*="#D4AF37"] li,
.pricing-section div[style*="linear-gradient"][style*="#D4AF37"] span,
.pricing-section div[style*="linear-gradient"][style*="#D4AF37"] strong {
    color: white !important;
}

/* Diwali Banner - Orange gradient needs white text */
.pricing-section div[style*="linear-gradient"][style*="#ff6b35"] {
    color: white !important;
}

.pricing-section div[style*="linear-gradient"][style*="#ff6b35"] p,
.pricing-section div[style*="linear-gradient"][style*="#ff6b35"] span {
    color: white !important;
}

/* Free, Assisted, Managed cards - white background needs black text */
.pricing-section .border-gray-200 {
    background: white !important;
    color: black !important;
}

.pricing-section .border-gray-200 h3,
.pricing-section .border-gray-200 div,
.pricing-section .border-gray-200 li,
.pricing-section .border-gray-200 span {
    color: black !important;
}

/* Green checkmarks should stay green */
.pricing-section .text-green-500 {
    color: #10b981 !important;
}

/* Buttons in white cards */
.pricing-section .border-gray-200 a {
    background: #1f2937 !important;
    color: white !important;
    border: 2px solid #1f2937 !important;
}

.pricing-section .border-gray-200 a:hover {
    background: #374151 !important;
}

/* DIY card button (white bg, gold text) */
.pricing-section div[style*="#D4AF37"] a {
    background: white !important;
    color: #D4AF37 !important;
    border: 2px solid white !important;
}

/* Value proposition box */
.pricing-section .bg-gray-50 {
    background: #f9fafb !important;
}

.pricing-section .bg-gray-50 h3,
.pricing-section .bg-gray-50 h4,
.pricing-section .bg-gray-50 p,
.pricing-section .bg-gray-50 li {
    color: black !important;
}

.pricing-section .text-red-600 {
    color: #dc2626 !important;
}

.pricing-section .text-green-600 {
    color: #059669 !important;
}

.pricing-section .text-gray-700 {
    color: #374151 !important;
}

.pricing-section .text-gray-600 {
    color: #4b5563 !important;
}

/* Gold gradient text should remain gold */
.gold-gradient-text {
    background: linear-gradient(135deg, #F0D98D 0%, #D4AF37 50%, #B8941F 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

/* ================================
   MOBILE RESPONSIVENESS FIX
   Fix hero section text cutoff on mobile
   ================================ */

/* Mobile devices (320px - 639px) */
@media (max-width: 639px) {
    .hero-section {
        padding-top: 5rem !important; /* 80px - accounts for fixed nav bar */
        min-height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .hero-title {
        margin-top: 1rem !important;
        font-size: 2.25rem !important; /* Slightly smaller on very small screens */
        line-height: 1.2 !important;
    }

    .hero-subtitle {
        margin-top: 1.5rem !important;
        font-size: 1.125rem !important;
    }

    .hero-buttons {
        margin-top: 2rem !important;
    }
}

/* Small tablets and larger phones (640px - 767px) */
@media (min-width: 640px) and (max-width: 767px) {
    .hero-section {
        padding-top: 6rem !important; /* 96px */
    }

    .hero-title {
        margin-top: 1.5rem !important;
    }
}

/* Tablets (768px - 1023px) */
@media (min-width: 768px) and (max-width: 1023px) {
    .hero-section {
        padding-top: 4rem !important; /* 64px */
    }
}

/* Desktop (1024px and up) - Remove padding-top */
@media (min-width: 1024px) {
    .hero-section {
        padding-top: 0 !important;
    }
}

/* Ensure navigation doesn't overlap content */
nav {
    z-index: 9999 !important;
}

.hero-section {
    position: relative;
    z-index: 1;
}