/* Essential fixes for common UI issues */

/* Fix for blog navigation styling */
.blog-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
}

.blog-nav a {
    color: #5B3AFF;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.3s ease;
}

.blog-nav a:hover {
    color: #4A2FD9;
}

/* Mobile header optimization overrides */
@media (max-width: 768px) {
    /* Ensure consistent header container padding across all pages */
    header .container {
        padding: 0 0.75rem !important; /* Override any inline styles */
    }
    
    /* Ensure consistent header padding */
    header {
        padding: 0.05rem 0 !important; /* Override any inline styles */
    }
    
    /* Mobile Hero Buttons Horizontal Centering Override */
    .hero-buttons {
        justify-content: center !important; /* Center buttons horizontally on all mobile devices */
    }
    
    /* Mobile Section Padding Overrides - 40% reduction from desktop */
    .hero {
        padding: 2.1rem 0 2.7rem !important; /* Override any inline styles */
    }
    
    .about {
        padding: 2.1rem 0 1.5rem !important; /* Override any inline styles */
    }
    
    .features {
        padding: 2.1rem 0 1.5rem !important; /* Override any inline styles */
    }
    
    .vision {
        padding: 1.8rem 0 1.2rem !important; /* Override any inline styles */
    }
    
    .product-showcase {
        padding: 1.8rem 0 !important; /* Override any inline styles */
    }
    
    .waitlist {
        padding: 2.4rem 0 !important; /* Override any inline styles */
    }
    
    .podmod-showcase {
        padding: 1.8rem 0 !important; /* Override any inline styles */
    }
}

@media (max-width: 480px) {
    /* Mobile Hero Buttons Horizontal Centering Override */
    .hero-buttons {
        justify-content: center !important; /* Center buttons horizontally on mobile */
    }
}

@media (max-width: 400px) {
    /* Ultra-Mobile Hero Buttons Horizontal Centering Override */
    .hero-buttons {
        justify-content: center !important; /* Center buttons horizontally on ultra-mobile */
    }
}

/* Essential UI fixes for PodMod */

/* 1. Hero section text size increases */
.hero-content h1 {
    font-size: 3.2rem !important; /* Larger header text */
}

/* Hero section sub heading - customized styling for cleaner look */
.hero-content p {
    font-size: 1.1rem !important; /* Smaller, more readable font size */
    line-height: 1.4 !important; /* Tighter line spacing for cleaner appearance */
    text-align: left !important; /* Left-aligned for cleaner, more structured look */
    max-width: 600px; /* Maintain readable line length */
}

/* 2. Hide ALL email-related elements */
a[href^="mailto"],
button.email,
.email-link,
.share-btn.email,
.waitlist-form a[href^="mailto"] {
    display: none !important;
}

/* 3. Blog header consistency - white text for blog headers */
.blog-post-header h1,
.blog-content h1 {
    background: none !important; 
    -webkit-background-clip: initial !important;
    -webkit-text-fill-color: #ffffff !important;
    background-clip: initial !important;
    text-fill-color: initial !important;
    color: #ffffff !important;
}

/* Blog header (main blog page) - white text on gradient background */
.blog-header h1,
h1.blog-title {
    background: none !important; 
    -webkit-background-clip: initial !important;
    -webkit-text-fill-color: #ffffff !important;
    background-clip: initial !important;
    text-fill-color: #ffffff !important;
    color: #ffffff !important;
}

/* Blog header description - white text on gradient background */
.blog-header p,
.blog-description {
    color: #ffffff !important;
}