/* SEO Optimization CSS - EmojiFace.US */
/* Optimized for Google SEO with focus on Mask Face, Emoji Face, Face AI keywords */

/* Performance Optimizations */
* {
    box-sizing: border-box;
}

/* Critical CSS for above-the-fold content */
.hero {
    contain: layout style paint;
    will-change: transform;
}

/* Optimize font loading for better Core Web Vitals */
@font-face {
    font-family: 'System';
    src: local('-apple-system'), local('BlinkMacSystemFont'), local('Segoe UI'), local('Roboto');
    font-display: swap;
}

body {
    font-family: 'System', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-display: swap;
}

/* Improve text readability for SEO */
h1, h2, h3 {
    font-weight: 700;
    line-height: 1.2;
    color: #111;
    text-rendering: optimizeLegibility;
}

/* Optimize images for SEO and performance */
img {
    max-width: 100%;
    height: auto;
    loading: lazy;
    decoding: async;
}

/* First image should load eagerly for LCP */
.hero img:first-of-type,
.transformations img:first-of-type {
    loading: eager;
}

/* Structured data visual enhancements */
[itemscope] {
    position: relative;
}

/* SEO-friendly button styles */
button, .cta-button {
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: inherit;
    line-height: inherit;
}

/* Accessibility improvements for SEO */
a:focus,
button:focus,
[tabindex]:focus {
    outline: 2px solid #6c47ff;
    outline-offset: 2px;
}

/* Skip link for accessibility */
.skip-link {
    position: absolute;
    top: -40px;
    left: 6px;
    /**background: #000;**/
    color: #fff;
    padding: 8px;
    text-decoration: none;
    z-index: 9999;
}

.skip-link:focus {
    top: 6px;
}

/* Optimize for mobile-first indexing */
@media (max-width: 768px) {
    .hero h1 {
        font-size: 2.5rem;
        line-height: 1.1;
    }
    
    .hero p {
        font-size: 1rem;
        margin-bottom: 25px;
    }
    
    .feature-badges {
        flex-direction: column;
        align-items: center;
    }
    
    .badge {
        font-size: 0.8rem;
        padding: 10px 18px;
    }
}

/* Optimize for Core Web Vitals */
.upload-area {
    contain: layout style;
}

.transformations {
    contain: layout;
}

/* Reduce layout shift */
.upload-icon svg {
    width: 48px;
    height: 48px;
    /* display: block;*/
}

/* Optimize FAQ section for featured snippets */
.faq-item {
    margin-bottom: 1.5rem;
    border-bottom: 1px solid #eee;
    padding-bottom: 1rem;
}

.faq-item h3 {
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
    color: #333;
}

.faq-item p {
    font-size: 1rem;
    line-height: 1.6;
    color: #555;
}

/* Enhance keyword visibility */
.highlight {
    font-weight: 700;
    background: linear-gradient(90deg, #6c47ff 0%, #ff4dca 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Optimize for search engine crawling */
nav[role="navigation"] a {
    display: inline-block;
    padding: 0.5rem;
    margin: 0 0.25rem;
}

/* Improve semantic structure visibility */
main[role="main"] {
    min-height: 60vh;
}

header[role="banner"] {
    position: sticky;
    top: 0;
    z-index: 1000;
}

footer[role="contentinfo"] {
    margin-top: 3rem;
}

/* Optimize for local SEO if applicable */
.contact-info {
    font-size: 0.9rem;
    line-height: 1.4;
}

/* Print styles for SEO */
@media print {
    .header,
    .footer,
    .upload-section {
        display: none;
    }
    
    .hero h1,
    .transformations h2,
    .why-choose h2 {
        color: #000 !important;
        background: none !important;
        -webkit-text-fill-color: initial !important;
    }
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Dark mode support for better user experience */
@media (prefers-color-scheme: dark) {
    body {
        background-color: #1a1a1a;
        color: #e0e0e0;
    }
    
    .header {
        background-color: #2a2a2a;
        border-bottom: 1px solid #333;
    }
    
    .upload-area {
        background-color: #2a2a2a;
        border-color: #444;
    }
}

/* Optimize for better text contrast */
.hero p,
.transformations p,
.why-choose p {
    color: #444;
    font-weight: 400;
}

/* Ensure proper heading hierarchy for SEO */
h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.5rem; }
h4 { font-size: 1.25rem; }
h5 { font-size: 1.1rem; }
h6 { font-size: 1rem; }

/* Optimize button text for conversion */
.cta-button,
.upload-button {
    font-weight: 600;
    letter-spacing: 0.025em;
}

/* Improve link accessibility */
a {
    color: #6c47ff;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

a:hover {
    text-decoration-thickness: 2px;
}

/* Optimize for voice search */
.faq-item[itemscope] {
    margin: 1.5rem 0;
}

/* Enhance social sharing appearance */
.social-share {
    display: flex;
    gap: 1rem;
    justify-content: center;
    margin: 2rem 0;
}

.social-share a {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    background: #f5f5f5;
    text-decoration: none;
    transition: background-color 0.2s ease;
}

.social-share a:hover {
    background: #e0e0e0;
}