/*
Theme Name: Welcome Parenthood
Description: AdSense-ready parenting tools and resources theme for new parents and expecting families. Features 12 essential parenting tools with comprehensive educational content designed for Google AdSense approval.
Author: WelcomeParenthood Team
Version: 1.0.0
Template: oceanwp
Text Domain: welcomeparenthood
License: GPL v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html

Welcome Parenthood is a professional WordPress child theme built specifically for AdSense approval.
It provides valuable parenting tools and resources for new parents and expecting families.
Features 12 functional parenting calculators and educational content with 1000+ words per tool page.
*/

/* Professional Color Scheme for Parenting Niche */
:root {
    /* Primary colors - Soft and nurturing parenting theme */
    --primary-color: #FF6B9D;         /* Gentle pink - motherhood, nurturing */
    --secondary-color: #4ECDC4;       /* Calming teal - peace & growth */
    --accent-color: #45B7D1;          /* Trust blue - reliability & safety */
    --success-color: #96CEB4;         /* Soft green - growth & health */
    --warning-color: #FFEAA7;         /* Warm yellow - gentle attention */
    --danger-color: #FD79A8;          /* Soft coral - gentle alerts */
    
    /* Content colors */
    --text-primary: #2D3436;          /* Dark readable text */
    --text-secondary: #636E72;        /* Secondary text */
    --text-muted: #B2BEC3;            /* Muted text */
    --text-light: #FFFFFF;            /* Light text */
    
    /* Backgrounds */
    --bg-white: #FFFFFF;
    --bg-light: #F8F9FA;
    --bg-gradient: linear-gradient(135deg, #FF6B9D 0%, #4ECDC4 100%);
    --bg-hero: linear-gradient(135deg, rgba(255,107,157,0.1) 0%, rgba(78,205,196,0.1) 100%);
    --bg-card: #FFFFFF;
    
    /* Borders and shadows */
    --border-color: #E0E6ED;
    --shadow-sm: 0 2px 4px rgba(255,107,157,0.08);
    --shadow-md: 0 4px 12px rgba(255,107,157,0.15);
    --shadow-lg: 0 8px 25px rgba(255,107,157,0.2);
    --shadow-card: 0 4px 6px rgba(0,0,0,0.1);
    
    /* Professional spacing */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;
    --spacing-xxl: 48px;
    --border-radius: 8px;
    --border-radius-sm: 4px;
    --border-radius-lg: 16px;
    --transition-fast: all 0.3s ease;
    
    /* Typography */
    --font-size-xs: 12px;
    --font-size-sm: 14px;
    --font-size-base: 16px;
    --font-size-lg: 18px;
    --font-size-xl: 20px;
    --font-size-2xl: 24px;
    --font-size-3xl: 32px;
    --font-size-4xl: 40px;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    
    /* Layout */
    --container-max-width: 1200px;
    --content-max-width: 800px;
    
    /* Z-index */
    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-modal: 1030;
}

/* Base Styles */
body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-size: var(--font-size-base);
    line-height: 1.6;
    color: var(--text-primary);
    background-color: var(--bg-white);
}

/* Container and Layout */
.container {
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding: 0 var(--spacing-md);
}

@media (max-width: 768px) {
    .container {
        padding: 0 var(--spacing-sm);
    }
}

/* Typography Enhancements */
h1, h2, h3, h4, h5, h6 {
    font-weight: var(--font-weight-bold);
    line-height: 1.3;
    margin-bottom: var(--spacing-md);
    color: var(--text-primary);
}

h1 { font-size: var(--font-size-4xl); }
h2 { font-size: var(--font-size-3xl); }
h3 { font-size: var(--font-size-2xl); }
h4 { font-size: var(--font-size-xl); }
h5 { font-size: var(--font-size-lg); }
h6 { font-size: var(--font-size-base); }

/* Button Styles */
.btn {
    display: inline-block;
    padding: 12px 24px;
    border-radius: var(--border-radius);
    font-weight: var(--font-weight-semibold);
    text-decoration: none;
    text-align: center;
    transition: var(--transition-fast);
    cursor: pointer;
    border: none;
    font-size: var(--font-size-base);
    line-height: 1.4;
}

.btn-primary {
    background: var(--bg-gradient);
    color: var(--text-light);
    box-shadow: var(--shadow-md);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
    color: var(--text-light);
    text-decoration: none;
}

.btn-secondary {
    background: var(--bg-white);
    color: var(--primary-color);
    border: 2px solid var(--primary-color);
}

.btn-secondary:hover {
    background: var(--primary-color);
    color: var(--text-light);
    text-decoration: none;
}

/* Card Styles */
.card {
    background: var(--bg-card);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-card);
    padding: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
    transition: var(--transition-fast);
}

.card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.card-header {
    margin-bottom: var(--spacing-md);
    padding-bottom: var(--spacing-md);
    border-bottom: 1px solid var(--border-color);
}

.card-title {
    margin: 0;
    color: var(--text-primary);
    font-size: var(--font-size-xl);
}

.card-body {
    color: var(--text-secondary);
}

/* Form Styles */
.form-group {
    margin-bottom: var(--spacing-lg);
}

.form-section {
    background: var(--bg-light);
    padding: var(--spacing-lg);
    border-radius: var(--border-radius);
    margin-bottom: var(--spacing-lg);
}

.form-section h3 {
    color: var(--primary-color);
    margin-bottom: var(--spacing-md);
}

.form-label,
label {
    display: block;
    margin-bottom: var(--spacing-sm);
    font-weight: var(--font-weight-medium);
    color: var(--text-primary);
    font-size: var(--font-size-base);
}

.form-input,
.form-select,
input[type="text"],
input[type="email"],
input[type="number"],
input[type="date"],
input[type="time"],
select,
textarea {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid var(--border-color);
    border-radius: var(--border-radius);
    font-size: var(--font-size-base);
    transition: var(--transition-fast);
    background: var(--bg-white);
    font-family: inherit;
    box-sizing: border-box;
}

.form-input:focus,
.form-select:focus,
input:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(255,107,157,0.1);
}

.help-text {
    display: block;
    margin-top: var(--spacing-xs);
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    font-style: italic;
}

.form-actions {
    text-align: center;
    padding: var(--spacing-lg) 0;
}

input[type="checkbox"],
input[type="radio"] {
    width: auto;
    margin-right: var(--spacing-sm);
    accent-color: var(--primary-color);
}

/* Hero Section */
.hero-section {
    background: var(--bg-hero);
    padding: var(--spacing-xxl) 0;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.hero-section::before {
    content: '';
    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='%23FF6B9D' fill-opacity='0.03'%3E%3Ccircle cx='30' cy='30' r='4'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") repeat;
    z-index: 1;
}

.hero-content {
    position: relative;
    z-index: 2;
}

.hero-title {
    font-size: var(--font-size-4xl);
    font-weight: var(--font-weight-bold);
    margin-bottom: var(--spacing-md);
    background: var(--bg-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero-description {
    font-size: var(--font-size-xl);
    color: var(--text-secondary);
    margin-bottom: var(--spacing-xl);
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

/* Grid Layouts */
.grid {
    display: grid;
    gap: var(--spacing-lg);
}

.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

/* Tool Cards */
.tool-card {
    background: var(--bg-card);
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-lg);
    text-align: center;
    transition: var(--transition-fast);
    box-shadow: var(--shadow-card);
    border: 1px solid var(--border-color);
    text-decoration: none;
    color: inherit;
}

.tool-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-lg);
    border-color: var(--primary-color);
    text-decoration: none;
    color: inherit;
}

.tool-icon {
    font-size: 48px;
    margin-bottom: var(--spacing-md);
    display: block;
}

.tool-name {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    margin-bottom: var(--spacing-sm);
    color: var(--text-primary);
}

.tool-description {
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    line-height: 1.5;
}

/* Trust Signals */
.trust-signals {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--spacing-lg);
    margin: var(--spacing-xl) 0;
    flex-wrap: wrap;
}

.trust-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
}

.trust-icon {
    font-size: var(--font-size-lg);
}

/* Stats Section */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--spacing-lg);
    margin: var(--spacing-xl) 0;
}

.stat-item {
    text-align: center;
    padding: var(--spacing-lg);
}

.stat-number {
    display: block;
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-bold);
    color: var(--primary-color);
    margin-bottom: var(--spacing-sm);
}

.stat-label {
    font-size: var(--font-size-base);
    color: var(--text-secondary);
    font-weight: var(--font-weight-medium);
}

/* Tool Interface Styles */
.tool-interface {
    background: var(--bg-card);
    padding: var(--spacing-xl);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-card);
    margin: var(--spacing-xl) 0;
}

.tool-results {
    background: var(--bg-light);
    padding: var(--spacing-lg);
    border-radius: var(--border-radius);
    margin-top: var(--spacing-lg);
    border-left: 4px solid var(--success-color);
}

.result-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-sm) 0;
    border-bottom: 1px solid var(--border-color);
}

.result-item:last-child {
    border-bottom: none;
}

.result-label {
    font-weight: var(--font-weight-medium);
    color: var(--text-primary);
}

.result-value {
    color: var(--primary-color);
    font-weight: var(--font-weight-semibold);
}

/* Breadcrumb Styles */
.breadcrumbs {
    padding: var(--spacing-md) 0;
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
}

.breadcrumbs a {
    color: var(--primary-color);
    text-decoration: none;
}

.breadcrumbs a:hover {
    text-decoration: underline;
}

/* Newsletter Styles */
.newsletter-section {
    background: var(--bg-gradient);
    color: var(--text-light);
    padding: var(--spacing-xxl) 0;
    text-align: center;
}

.newsletter-form {
    max-width: 400px;
    margin: 0 auto;
    display: flex;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-lg);
}

.newsletter-form input {
    flex: 1;
    padding: 12px 16px;
    border: none;
    border-radius: var(--border-radius);
    font-size: var(--font-size-base);
}

.newsletter-form button {
    background: var(--bg-white);
    color: var(--primary-color);
    border: none;
    padding: 12px 24px;
    border-radius: var(--border-radius);
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    transition: var(--transition-fast);
    font-size: var(--font-size-base);
}

.newsletter-form button:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

/* Section Styles */
.section {
    padding: var(--spacing-xxl) 0;
}

.section-title {
    text-align: center;
    margin-bottom: var(--spacing-xl);
    color: var(--text-primary);
}

.section-subtitle {
    text-align: center;
    color: var(--text-secondary);
    font-size: var(--font-size-lg);
    margin-bottom: var(--spacing-xxl);
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.highlight {
    background: linear-gradient(120deg, rgba(255,107,157,0.2) 0%, rgba(78,205,196,0.2) 100%);
    padding: 2px 8px;
    border-radius: var(--border-radius-sm);
}

/* Content Sections */
.content-section {
    margin: var(--spacing-xl) 0;
}

.content-section h2 {
    color: var(--text-primary);
    margin-bottom: var(--spacing-lg);
}

.content-text {
    color: var(--text-secondary);
    line-height: 1.7;
}

.content-text p {
    margin-bottom: var(--spacing-md);
}

.content-text ul,
.content-text ol {
    margin-bottom: var(--spacing-md);
    padding-left: var(--spacing-lg);
}

.content-text li {
    margin-bottom: var(--spacing-sm);
}

/* FAQ Styles */
.faq-section {
    margin: var(--spacing-xl) 0;
}

.faq-item {
    background: var(--bg-light);
    border-radius: var(--border-radius);
    padding: var(--spacing-lg);
    margin-bottom: var(--spacing-md);
}

.faq-item h3 {
    color: var(--primary-color);
    margin-bottom: var(--spacing-md);
    font-size: var(--font-size-lg);
}

.faq-item p {
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.6;
}

/* Responsive Design */
@media (max-width: 768px) {
    :root {
        --font-size-4xl: 28px;
        --font-size-3xl: 24px;
        --font-size-2xl: 20px;
        --spacing-xxl: 32px;
    }
    
    .hero-section {
        padding: var(--spacing-xl) 0;
    }
    
    .grid-2,
    .grid-3,
    .grid-4 {
        grid-template-columns: 1fr;
    }
    
    .trust-signals {
        flex-direction: column;
        gap: var(--spacing-md);
    }
    
    .btn {
        padding: 10px 20px;
        font-size: var(--font-size-sm);
    }
    
    .newsletter-form {
        flex-direction: column;
        max-width: 300px;
    }
    
    .tool-interface {
        padding: var(--spacing-lg);
    }
}

@media (max-width: 480px) {
    :root {
        --font-size-4xl: 24px;
        --font-size-3xl: 20px;
        --spacing-xl: 24px;
        --spacing-xxl: 32px;
    }
    
    .card {
        padding: var(--spacing-md);
    }
    
    .tool-card {
        padding: var(--spacing-md);
    }
    
    .tool-icon {
        font-size: 36px;
    }
    
    .tool-interface {
        padding: var(--spacing-md);
    }
}

/* Logo Responsive Styles */
.site-logo img {
    transition: var(--transition-fast);
    max-height: 60px;
    width: auto;
}

.site-logo:hover img {
    transform: scale(1.05);
}

@media (max-width: 768px) {
    .site-logo img {
        max-height: 50px;
    }
}

@media (max-width: 480px) {
    .site-logo img {
        max-height: 40px;
    }
}

/* Footer Enhancements */
.site-footer {
    background: var(--bg-light);
    border-top: 1px solid var(--border-color);
    padding: var(--spacing-xl) 0;
}

/* Additional Professional Touches */
.tool-page-container {
    padding: var(--spacing-lg) 0;
}

.tool-header {
    text-align: center;
    margin-bottom: var(--spacing-xl);
}

.tool-icon-header {
    font-size: 64px;
    margin-bottom: var(--spacing-md);
}

.tool-title {
    margin-bottom: var(--spacing-md);
}

.tool-description-header {
    font-size: var(--font-size-lg);
    color: var(--text-secondary);
    max-width: 600px;
    margin: 0 auto var(--spacing-lg);
    line-height: 1.6;
}

/* Form Row Styles */
.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-md);
}

@media (max-width: 768px) {
    .form-row {
        grid-template-columns: 1fr;
    }
}

/* Ad Placeholder Styles */
.ad-content {
    background: var(--bg-light);
    border: 2px dashed var(--border-color);
    padding: var(--spacing-lg);
    text-align: center;
    margin: var(--spacing-xl) 0;
    border-radius: var(--border-radius);
}

.ad-content small {
    color: var(--text-muted);
    font-size: var(--font-size-xs);
}

/* Loading and Animation States */
.loading {
    opacity: 0.6;
    pointer-events: none;
}

/* Error and Success Messages */
.message {
    padding: var(--spacing-md);
    border-radius: var(--border-radius);
    margin: var(--spacing-md) 0;
}

.message-success {
    background: rgba(150, 206, 180, 0.1);
    border: 1px solid var(--success-color);
    color: #2d5a41;
}

.message-error {
    background: rgba(253, 121, 168, 0.1);
    border: 1px solid var(--danger-color);
    color: #8b2635;
}

.message-warning {
    background: rgba(255, 234, 167, 0.1);
    border: 1px solid var(--warning-color);
    color: #8b7355;
}