/*
Theme Name: Isaiah Pratt - Young Creator Theme
Description: A vibrant, kid-friendly WordPress theme designed for young creators, artists, and future leaders. Features colorful design, portfolio showcase, ecommerce integration, and blog functionality. Perfect for showcasing creative journeys and growing with young talents.
Author: Isaiah Pratt Theme Team
Version: 1.0.0
License: GPL v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: isaiah-pratt-theme
Tags: portfolio, ecommerce, blog, colorful, kids, creative, artist, elementor, woocommerce
Requires at least: 5.0
Tested up to: 6.4
Requires PHP: 7.4

This theme is designed to grow with young creators like Isaiah Pratt!
*/

/* Theme Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Poppins', sans-serif;
    line-height: 1.6;
    color: #333;
    background: #fff;
}

/* WordPress Core Styles */
.alignleft {
    float: left;
    margin-right: 1.5rem;
    margin-bottom: 1rem;
}

.alignright {
    float: right;
    margin-left: 1.5rem;
    margin-bottom: 1rem;
}

.aligncenter {
    display: block;
    margin: 0 auto 1.5rem;
}

.wp-caption {
    max-width: 100%;
    margin-bottom: 1.5rem;
}

.wp-caption-text {
    text-align: center;
    font-style: italic;
    margin-top: 0.5rem;
}

.gallery {
    margin-bottom: 1.5rem;
}

.screen-reader-text {
    position: absolute !important;
    clip: rect(1px, 1px, 1px, 1px);
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Theme Color Palette */
:root {
    --primary-color: #ff6b6b;
    --secondary-color: #4ecdc4;
    --accent-color: #45b7d1;
    --success-color: #96ceb4;
    --warning-color: #feca57;
    --info-color: #74b9ff;
    --light-color: #f8fafc;
    --dark-color: #2d3436;
    --gradient-primary: linear-gradient(45deg, #ff6b6b, #4ecdc4);
    --gradient-secondary: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --gradient-rainbow: linear-gradient(45deg, #ff6b6b, #4ecdc4, #45b7d1, #96ceb4, #feca57, #fd79a8);
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 1rem;
}

h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.75rem; }
h4 { font-size: 1.5rem; }
h5 { font-size: 1.25rem; }
h6 { font-size: 1rem; }

p {
    margin-bottom: 1rem;
    line-height: 1.6;
}

a {
    color: var(--primary-color);
    text-decoration: none;
    transition: color 0.3s ease;
}

a:hover {
    color: var(--secondary-color);
}

/* Container and Layout */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
}

.row {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -15px;
}

.col {
    flex: 1;
    padding: 0 15px;
}

/* Buttons */
.btn {
    display: inline-block;
    padding: 12px 24px;
    border: none;
    border-radius: 50px;
    font-weight: 700;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    font-size: 1rem;
}

.btn-primary {
    background: var(--gradient-primary);
    color: white;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
    color: white;
}

.btn-secondary {
    background: var(--light-color);
    color: var(--dark-color);
    border: 2px solid var(--secondary-color);
}

.btn-secondary:hover {
    background: var(--secondary-color);
    color: white;
}

/* Cards */
.card {
    background: white;
    border-radius: 20px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    transition: all 0.3s ease;
}

.card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
}

.card-header {
    padding: 1.5rem;
    background: var(--gradient-primary);
    color: white;
}

.card-body {
    padding: 1.5rem;
}

.card-footer {
    padding: 1rem 1.5rem;
    background: var(--light-color);
    border-top: 1px solid #e2e8f0;
}

/* ==========================================================================
   Hero Section - Matching Original Design
   ========================================================================== */

.hero {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 8rem 0 4rem;
    min-height: 100vh;
    display: flex;
    align-items: center;
}

.hero-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
}

.hero-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

.hero-text h1 {
    font-size: 3.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
    line-height: 1.2;
}

.hero-text h1 .highlight {
    background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero-text h2 {
    font-size: 1.8rem;
    font-weight: 600;
    margin-bottom: 2rem;
    color: #f8fafc;
}

.hero-description {
    font-size: 1.2rem;
    line-height: 1.6;
    margin-bottom: 2rem;
    color: #e2e8f0;
}

.hero-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 3rem;
}

.hero-stats .stat {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.hero-stats .stat i {
    font-size: 1.5rem;
    color: #4ecdc4;
}

.hero-stats .stat span {
    font-size: 0.9rem;
    font-weight: 600;
}

.hero-buttons {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.hero-image {
    display: flex;
    justify-content: center;
    align-items: center;
}

.image-placeholder.fun-photo {
    width: 300px;
    height: 300px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 3px solid rgba(255, 255, 255, 0.3);
    position: relative;
    overflow: hidden;
}

.image-placeholder.fun-photo i {
    font-size: 4rem;
    color: #4ecdc4;
    margin-bottom: 1rem;
}

.image-placeholder.fun-photo p {
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0;
}

.photo-decorations {
    position: absolute;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.decoration {
    position: absolute;
    font-size: 2rem;
    animation: float 3s ease-in-out infinite;
}

.decoration.star {
    top: 10%;
    right: 15%;
    animation-delay: 0s;
}

.decoration.heart {
    top: 20%;
    left: 10%;
    animation-delay: 0.5s;
}

.decoration.rainbow {
    bottom: 20%;
    right: 10%;
    animation-delay: 1s;
}

.decoration.rocket {
    bottom: 15%;
    left: 15%;
    animation-delay: 1.5s;
}

@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
}

/* Sections */
.section {
    padding: 5rem 0;
    position: relative;
}

.section-title {
    text-align: center;
    font-size: 2.5rem;
    margin-bottom: 3rem;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.section-subtitle {
    text-align: center;
    font-size: 1.2rem;
    color: #666;
    margin-bottom: 3rem;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

/* Animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

@keyframes rainbow {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.animate-fadeInUp {
    animation: fadeInUp 0.6s ease-out;
}

.animate-pulse {
    animation: pulse 2s ease-in-out infinite;
}

.animate-rainbow {
    background: var(--gradient-rainbow);
    background-size: 400% 400%;
    animation: rainbow 3s ease infinite;
}

/* Responsive Design */
@media (max-width: 768px) {
    .container {
        padding: 0 1rem;
    }
    
    .row {
        flex-direction: column;
    }
    
    h1 { font-size: 2rem; }
    h2 { font-size: 1.75rem; }
    h3 { font-size: 1.5rem; }
    
    .section {
        padding: 3rem 0;
    }
    
    .section-title {
        font-size: 2rem;
    }
}

/* WordPress Specific */
.wp-block-group {
    margin-bottom: 2rem;
}

.wp-block-columns {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
}

.wp-block-column {
    flex: 1;
    min-width: 250px;
}

/* Elementor Compatibility */
.elementor-widget-container {
    word-wrap: break-word;
}

.elementor-section {
    position: relative;
}

.elementor-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}

/* Theme Specific Utilities */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.mb-1 { margin-bottom: 0.5rem; }
.mb-2 { margin-bottom: 1rem; }
.mb-3 { margin-bottom: 1.5rem; }
.mb-4 { margin-bottom: 2rem; }
.mb-5 { margin-bottom: 3rem; }

.mt-1 { margin-top: 0.5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }
.mt-4 { margin-top: 2rem; }
.mt-5 { margin-top: 3rem; }

.p-1 { padding: 0.5rem; }
.p-2 { padding: 1rem; }
.p-3 { padding: 1.5rem; }
.p-4 { padding: 2rem; }
.p-5 { padding: 3rem; }

.rounded { border-radius: 10px; }
.rounded-lg { border-radius: 20px; }
.rounded-full { border-radius: 50px; }

.shadow-sm { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); }
.shadow { box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1); }
.shadow-lg { box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2); }

/* Fun Kid-Friendly Elements */
.emoji-large {
    font-size: 3rem;
    line-height: 1;
}

.colorful-text {
    background: var(--gradient-rainbow);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    background-size: 400% 400%;
    animation: rainbow 3s ease infinite;
}

.fun-border {
    border: 3px solid transparent;
    background: linear-gradient(white, white) padding-box, 
                var(--gradient-rainbow) border-box;
    border-radius: 20px;
}

/* Print Styles */
@media print {
    .no-print {
        display: none !important;
    }
    
    body {
        font-size: 12pt;
        line-height: 1.4;
    }
    
    h1, h2, h3, h4, h5, h6 {
        page-break-after: avoid;
    }
    
    .card {
        box-shadow: none;
        border: 1px solid #ddd;
    }
}

/* ==========================================================================
   Elementor Notice Styles
   ========================================================================== */

.elementor-notice-section {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 3rem 0;
}

.notice-card {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 2rem;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.2);
    max-width: 600px;
    margin: 0 auto;
}

.notice-card h3 {
    font-size: 1.8rem;
    margin-bottom: 1rem;
    color: white;
}

.notice-card p {
    font-size: 1.1rem;
    margin-bottom: 2rem;
    opacity: 0.9;
    line-height: 1.6;
}

@media (max-width: 768px) {
    .notice-card {
        padding: 1.5rem;
        margin: 0 1rem;
    }

    .notice-card h3 {
        font-size: 1.5rem;
    }
}

/* ==========================================================================
   Icon Fallbacks and Fixes
   ========================================================================== */

/* Ensure icons have proper spacing and display */
.fas, .fab, .far, .fal, .fad {
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    line-height: 1;
    vertical-align: middle;
}

/* Icon spacing fixes */
.fas + span, .fab + span, .far + span,
span + .fas, span + .fab, span + .far {
    margin-left: 0.5rem;
}

/* Navigation icons */
.nav-actions .fas {
    font-size: 1.2rem;
    color: #333;
    transition: color 0.3s ease;
}

.nav-actions .fas:hover {
    color: #4ecdc4;
}

/* Footer social icons */
.footer-social .fab {
    font-size: 1.1rem;
}

/* Button icons */
.btn .fas, .btn .fab {
    margin-right: 0.5rem;
}

/* Back to top icon */
.back-to-top .fas {
    font-size: 1.2rem;
}

/* Cart icon styling */
.cart-icon {
    position: relative;
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 50%;
    transition: all 0.3s ease;
}

.cart-icon:hover {
    background: rgba(78, 205, 196, 0.1);
}

.cart-count {
    position: absolute;
    top: -5px;
    right: -5px;
    background: #ff6b6b;
    color: white;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
}

/* Fallback icon styles */
.icon-fallback {
    font-family: inherit;
    font-size: 1.2em;
    line-height: 1;
    vertical-align: middle;
}

/* Ensure emoji fallbacks look good */
.fas[data-fallback="emoji"]:before,
.fab[data-fallback="emoji"]:before,
.far[data-fallback="emoji"]:before {
    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
    font-size: 1em;
    font-weight: normal;
    font-style: normal;
}

/* ==========================================================================
   Go to Top Button - Matching Original
   ========================================================================== */

.go-to-top {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    width: 60px;
    height: 60px;
    background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
    color: white;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    transition: all 0.3s ease;
    z-index: 1000;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    position: relative;
}

.go-to-top:hover {
    transform: translateY(-5px) rotate(10deg);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}

.go-to-top.show {
    display: flex;
}

.go-to-top .tooltip {
    position: absolute;
    bottom: 70px;
    right: 0;
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 5px;
    font-size: 0.9rem;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.go-to-top:hover .tooltip {
    opacity: 1;
    visibility: visible;
}

.go-to-top .tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    right: 20px;
    border: 5px solid transparent;
    border-top-color: rgba(0, 0, 0, 0.8);
}

/* Responsive adjustments for hero section */
@media (max-width: 768px) {
    .hero-content {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 2rem;
    }

    .hero-text h1 {
        font-size: 2.5rem;
    }

    .hero-text h2 {
        font-size: 1.4rem;
    }

    .hero-stats {
        grid-template-columns: 1fr;
    }

    .hero-buttons {
        justify-content: center;
    }

    .image-placeholder.fun-photo {
        width: 250px;
        height: 250px;
    }

    .go-to-top {
        width: 50px;
        height: 50px;
        font-size: 1.2rem;
    }
}