/*
Theme Name: ValidatorPro
Theme URI: https://example.com/validatorpro
Author: Grok (Inspired by LexzyTechinc)
Author URI: https://x.ai
Description: A modern, SEO-friendly, fast WordPress theme for AdSense Validator sites. Features color customization, light/dark mode, plugin traces, AOS animations.
Version: 1.0.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: validatorpro
Tags: seo, fast, modern, adsense, validator, dark-mode, custom-colors
*/

/* Base Reset */
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; line-height: 1.6; color: var(--text-dark); background: var(--bg-light); }

/* CSS Variables (for Color Changing and Modes) */
:root {
    --primary-black: #000000;
    --primary-yellow: #FFD700; /* Customizable */
    --primary-white: #FFFFFF;
    --secondary-gray: #f8f9fa;
    --text-dark: #333333;
    --bg-light: #FFFFFF;
    --text-light: #333333;
}

/* Dark Mode */
@media (prefers-color-scheme: dark) {
    :root {
        --primary-black: #FFFFFF;
        --primary-yellow: #FFD700;
        --primary-white: #000000;
        --secondary-gray: #1a1a1a;
        --text-dark: #e0e0e0;
        --bg-light: #000000;
        --text-light: #e0e0e0;
    }
}

/* Hero Section */
.hero-section { background: linear-gradient(135deg, var(--primary-black) 0%, #1a1a1a 100%); color: var(--primary-white); padding: 100px 0; text-align: center; }
.hero-title { font-size: 3rem; background: linear-gradient(45deg, var(--primary-white), var(--primary-yellow)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.hero-subtitle { font-size: 1.5rem; }

/* Validator Form (Plugin Trace) */
.validator-form { max-width: 800px; margin: 0 auto; background: var(--secondary-gray); padding: 20px; border-radius: 15px; }

/* General Sections */
.section-title { font-size: 2.5rem; color: var(--primary-black); text-align: center; }
.services-grid, .values-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 2rem; }
.service-card, .value-item { background: var(--primary-white); padding: 2rem; border-radius: 15px; box-shadow: 0 5px 20px rgba(0,0,0,0.1); transition: transform 0.3s; }
.service-card:hover, .value-item:hover { transform: translateY(-10px); border-color: var(--primary-yellow); }
.service-icon, .value-icon { font-size: 3rem; color: var(--primary-yellow); }

/* Timeline */
.timeline { position: relative; max-width: 800px; margin: 0 auto; }
.timeline::after { content: ''; position: absolute; width: 3px; background: var(--primary-yellow); top: 0; bottom: 0; left: 50%; }
.timeline-item { padding: 10px 40px; width: 50%; position: relative; }

/* FAQ */
.faq-item { margin-bottom: 1rem; border-radius: 10px; box-shadow: 0 3px 10px rgba(0,0,0,0.1); }
.faq-question { background: var(--primary-black); color: var(--primary-white); padding: 1rem; cursor: pointer; }

/* CTA */
.cta-section { background: var(--primary-yellow); padding: 80px 0; text-align: center; }
.btn-custom { background: var(--primary-black); color: var(--primary-white); padding: 12px 30px; border-radius: 50px; transition: all 0.3s; }
.btn-custom:hover { background: var(--primary-white); color: var(--primary-black); }

/* Footer */
.site-footer { background: var(--primary-black); color: var(--primary-white); padding: 60px 0; }
.footer-newsletter { background: linear-gradient(135deg, var(--primary-black) 0%, #1a1a1a 100%); }

/* Responsive Media Queries */
@media (max-width: 768px) {
    .timeline::after { left: 31px; }
    .timeline-item { width: 100%; padding-left: 70px; }
    .services-grid, .values-grid { grid-template-columns: 1fr; }
}

/* Performance: Lazy Load Images */
img { loading: lazy; }

/* Minification Hint: Use tools like Autoptimize plugin for production */