/* Essential UI fixes for Podmod */

/* 1. Hero section text size increases - RESPONSIVE */
/* Desktop - Default */
.hero-content h1 {
    font-size: 3.5rem !important; /* Desktop: Large header text */
}

/* Large Desktop */
@media (max-width: 1200px) {
    .hero-content h1 {
        font-size: 3.2rem !important;
    }
}

/* Tablet */
@media (max-width: 992px) {
    .hero-content h1 {
        font-size: 2.8rem !important;
    }
}

/* Mobile - Large */
@media (max-width: 768px) {
    .hero-content h1 {
        font-size: 0.95rem !important; /* Mobile: Very small for better fit */
    }
}

/* Mobile - Medium */
@media (max-width: 480px) {
    .hero-content h1 {
        font-size: 0.8rem !important; /* Small mobile: Ultra compact */
    }
}

/* Mobile - Small */
@media (max-width: 400px) {
    .hero-content h1 {
        font-size: 0.75rem !important; /* Tiny mobile: Minimal size */
    }
}

/* 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 {
    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;
}