/*
Theme Name: Kidbeast - Parenting Tools
Description: Professional parenting tools and calculators for kidbeast.com - Professional WordPress child theme optimized for Google AdSense approval with comprehensive tools, educational content, and family-safe design. Features responsive layout, professional typography, and substantial original content for {{NICHE}} enthusiasts.
Author: Kidbeast Team
Template: oceanwp
Version: 1.0.0
License: GPL v2 or later
Text Domain: kidbeast-child
Tags: parenting, tools, calculators, kidbeast, tools, calculator, responsive, adsense-ready, educational, family-friendly
*/

/* =========================
   PROFESSIONAL DESIGN SYSTEM
   ========================= */


/* ===============================
   GENERATED THEME - COMPLETE CSS
   Matches front-page.php classes
   =============================== */

/* --- HERO SECTION --- */
.hero-section {
    position: relative;
    background: linear-gradient(135deg, var(--primary-color, #1565C0), var(--secondary-color, #42A5F5));
    color: #fff;
    padding: 80px 0 60px;
    text-align: center;
    overflow: hidden;
}
.hero-background { position: relative; z-index: 1; }
.hero-pattern {
    position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    z-index: 0;
}
.hero-content { position: relative; z-index: 2; max-width: 800px; margin: 0 auto; padding: 0 20px; }
.hero-icon { font-size: 48px; display: block; margin-bottom: 15px; }
.hero-title { font-size: 2.5em; font-weight: 800; margin-bottom: 15px; color: #fff; line-height: 1.2; }
.hero-subtitle { font-size: 1.15em; opacity: 0.9; margin-bottom: 30px; line-height: 1.6; max-width: 600px; margin-left: auto; margin-right: auto; }
.hero-cta { display: flex !important; gap: 15px; justify-content: center; flex-wrap: wrap; margin-bottom: 30px; }
.hero-stats { display: flex !important; justify-content: center; gap: 40px; flex-wrap: wrap; margin-top: 20px; }
.stat-item { text-align: center; }
.stat-number { display: block; font-size: 1.8em; font-weight: 800; }
.stat-label { font-size: 0.85em; opacity: 0.8; }

/* --- BUTTONS --- */
.btn { display: inline-block; padding: 12px 28px; border-radius: 8px; font-weight: 600; text-decoration: none; transition: all 0.3s ease; cursor: pointer; border: 2px solid transparent; }
.btn-primary { background: #fff; color: var(--primary-color, #1565C0); }
.btn-primary:hover { background: #f0f0f0; transform: translateY(-2px); box-shadow: 0 4px 15px rgba(0,0,0,0.15); }
.btn-secondary, .btn-outline { background: transparent; border-color: #fff; color: #fff; }
.btn-secondary:hover, .btn-outline:hover { background: rgba(255,255,255,0.15); }
.btn-large, .btn-lg { padding: 14px 32px; font-size: 1.05em; }

/* --- CONTAINER --- */
.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }

/* --- SECTION HEADERS --- */
.section-header { text-align: center; margin-bottom: 40px; }
.section-header h2 { font-size: 2em; font-weight: 700; color: #1a1a2e; margin-bottom: 10px; }
.section-description { color: #666; font-size: 1.05em; max-width: 600px; margin: 0 auto; }

/* --- FEATURED TOOLS / TOOLS SHOWCASE --- */
.featured-tools-section, .tools-showcase { padding: 60px 0; background: #f8f9fa; }
.tools-showcase { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 25px; padding: 20px; max-width: 1200px; margin: 0 auto; }
.tool-showcase-card { background: #fff; border-radius: 12px; padding: 25px; box-shadow: 0 2px 15px rgba(0,0,0,0.06); transition: all 0.3s ease; border: 1px solid #eee; }
.tool-showcase-card:hover { transform: translateY(-5px); box-shadow: 0 8px 30px rgba(0,0,0,0.1); }
.tool-showcase-header { display: flex !important; align-items: center; gap: 12px; margin-bottom: 12px; }
.tool-showcase-icon { font-size: 2em; }
.tool-showcase-title { font-size: 1.15em; font-weight: 700; color: #1a1a2e; margin: 0; }
.tool-showcase-title a { color: inherit; text-decoration: none; }
.tool-showcase-title a:hover { color: var(--primary-color, #1565C0); }
.tool-showcase-content { margin-bottom: 15px; }
.tool-showcase-description { color: #555; font-size: 0.95em; line-height: 1.5; margin-bottom: 10px; }
.tool-category-badge { display: inline-block; background: #e8f4fd; color: var(--primary-color, #1565C0); padding: 3px 10px; border-radius: 20px; font-size: 0.8em; font-weight: 600; }
.tool-keywords { display: flex !important; flex-wrap: wrap; gap: 5px; margin-top: 10px; }
.keyword-tag { background: #f0f0f0; color: #666; padding: 2px 8px; border-radius: 4px; font-size: 0.75em; }
.tool-showcase-footer { display: flex !important; justify-content: space-between; align-items: center; margin-top: 15px; padding-top: 15px; border-top: 1px solid #eee; }
.tool-showcase-link { color: var(--primary-color, #1565C0); font-weight: 600; text-decoration: none; }
.tool-showcase-link:hover { text-decoration: underline; }
.use-count { color: #999; font-size: 0.85em; }
.more-tools { text-align: center; margin-top: 30px; }
.tools-cta { text-align: center; margin-top: 30px; }

/* --- CATEGORIES SECTION --- */
.categories-section { padding: 60px 0; }
.categories-grid { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 20px; max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.category-card { background: #fff; border-radius: 10px; padding: 25px; text-align: center; box-shadow: 0 2px 10px rgba(0,0,0,0.05); transition: all 0.3s ease; border: 1px solid #eee; text-decoration: none; color: inherit; display: block; }
.category-card:hover { transform: translateY(-3px); box-shadow: 0 5px 20px rgba(0,0,0,0.08); border-color: var(--primary-color, #1565C0); }
.category-icon { font-size: 2.5em; margin-bottom: 10px; display: block; }
.category-card h3 { font-size: 1.1em; font-weight: 700; margin-bottom: 8px; color: #1a1a2e; }
.category-description { color: #666; font-size: 0.9em; margin-bottom: 10px; }
.category-count { color: var(--primary-color, #1565C0); font-weight: 600; font-size: 0.85em; }
.category-tools { margin-top: 10px; }
.category-tool-link { display: inline-block; color: var(--primary-color, #1565C0); font-size: 0.85em; margin: 2px 5px; text-decoration: none; }

/* --- FEATURES SECTION --- */
.features-section { padding: 60px 0; background: #fff; }
.features-grid { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 25px; max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.feature-card { text-align: center; padding: 30px 20px; background: #f8f9fa; border-radius: 10px; }
.feature-icon { font-size: 2.5em; margin-bottom: 15px; display: block; }
.feature-card h3 { font-size: 1.15em; font-weight: 700; margin-bottom: 10px; color: #1a1a2e; }
.feature-card p { color: #666; font-size: 0.95em; line-height: 1.5; }

/* --- TESTIMONIALS SECTION --- */
.testimonials-section { padding: 60px 0; background: #f8f9fa; }
.testimonials-grid { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 25px; max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.testimonial-card { background: #fff; border-radius: 10px; padding: 25px; box-shadow: 0 2px 10px rgba(0,0,0,0.05); }
.testimonial-content { font-style: italic; color: #555; margin-bottom: 15px; line-height: 1.6; }
.testimonial-rating { color: #f5c518; margin-bottom: 10px; font-size: 1.1em; }
.testimonial-author { font-weight: 700; color: #1a1a2e; }

/* --- BLOG SECTION --- */
.blog-section { padding: 60px 0; }
.blog-grid { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 25px; max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.blog-card { background: #fff; border-radius: 10px; overflow: hidden; box-shadow: 0 2px 10px rgba(0,0,0,0.05); transition: all 0.3s ease; }
.blog-card:hover { transform: translateY(-3px); box-shadow: 0 5px 20px rgba(0,0,0,0.08); }
.blog-card-image { width: 100%; height: 200px; object-fit: cover; }
.blog-card-image img { width: 100%; height: 100%; object-fit: cover; }
.blog-card-content { padding: 20px; }
.blog-title { font-size: 1.1em; font-weight: 700; margin-bottom: 8px; }
.blog-title a { color: #1a1a2e; text-decoration: none; }
.blog-title a:hover { color: var(--primary-color, #1565C0); }
.blog-meta { display: flex !important; gap: 15px; margin-bottom: 8px; font-size: 0.85em; color: #999; }
.blog-date, .blog-category { color: #999; }
.blog-excerpt { color: #666; font-size: 0.9em; line-height: 1.5; margin-bottom: 10px; }
.read-more { color: var(--primary-color, #1565C0); font-weight: 600; text-decoration: none; font-size: 0.9em; }
.blog-card-link { text-decoration: none; color: inherit; display: block; }
.blog-cta { text-align: center; margin-top: 30px; }

/* --- FINAL CTA SECTION --- */
.final-cta-section { padding: 60px 0; background: linear-gradient(135deg, var(--primary-color, #1565C0), var(--accent-color, #0D47A1)); color: #fff; text-align: center; }
.cta-content { max-width: 600px; margin: 0 auto; }
.cta-text { font-size: 1.1em; opacity: 0.9; margin-bottom: 25px; }
.cta-buttons { display: flex !important; gap: 15px; justify-content: center; flex-wrap: wrap; }

/* --- TRUST INDICATORS --- */
.trust-indicators { display: flex !important; justify-content: center; gap: 30px; flex-wrap: wrap; margin-top: 20px; padding: 15px 0; }
.trust-item { display: flex !important; align-items: center; gap: 8px; color: #666; font-size: 0.9em; }

/* --- RESPONSIVE --- */
@media (max-width: 768px) {
    .hero-title { font-size: 1.8em; }
    .hero-stats { gap: 20px; }
    .tools-showcase, .categories-grid, .features-grid, .testimonials-grid, .blog-grid { grid-template-columns: 1fr; }
    .hero-cta { flex-direction: column; align-items: center; }
}

/* --- SINGLE POST --- */
.post-navigation { display: flex !important; justify-content: space-between; margin-top: 30px; padding-top: 20px; border-top: 1px solid #eee; }
.author-bio { border-top: 2px solid #eee; margin-top: 30px; padding-top: 20px; display: flex !important; gap: 15px; }

/* --- TOOLS PAGE --- */
.tools-page { padding: 40px 0; }
.tools-page .tools-grid { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; }

/* --- PAGE TEMPLATES --- */
.page-header { text-align: center; padding: 40px 0 30px; background: #f8f9fa; margin-bottom: 30px; }
.page-header h1 { font-size: 2.2em; font-weight: 800; color: #1a1a2e; }
.page-content { max-width: 900px; margin: 0 auto; padding: 0 20px 60px; }
.breadcrumbs { font-size: 0.85em; color: #999; margin-top: 10px; }
.breadcrumbs a { color: var(--primary-color, #1565C0); text-decoration: none; }
.separator { margin: 0 5px; }