/*
Theme Name: A Teacher Mom
Theme URI: https://ateachermom.com
Description: Custom pastel rainbow child theme for Hello Elementor — built exactly for Nicole's homeschool site
Author: Adam + Grok
Author URI: 
Template: hello-elementor
Version: 1.0
Text Domain: ateachermom
Tags: elementor, homeschool, education, pastel
*/

@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;500;600;700&family=Inter:wght@400;500&display=swap');

:root {
    --yellow: #FAEDCB;
    --mint: #C9E4DE;
    --blue: #C6DEF1;
    --lavender: #DBCDF0;
    --pink: #F2C6DE;
    --peach: #F7D9C4;
    --text-dark: #2C2535;
}

/* Global styles — matches our demo perfectly */
body {
    font-family: 'Inter', system-ui, sans-serif;
    background-color: var(--yellow);
    color: var(--text-dark);
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Nunito', sans-serif;
    font-weight: 600;
    line-height: 1.1;
}

/* Pink navbar (exactly as you requested) */
.ateachermom-navbar {
    background-color: #F2C6DE !important;
    backdrop-filter: blur(12px);
}

/* Hero gradient background */
.ateachermom-hero {
    background: linear-gradient(135deg, #FAEDCB 0%, #C9E4DE 30%, #C6DEF1 60%, #F2C6DE 100%) !important;
}

/* Resource cards (the part Nicole loves) */
.ateachermom-card {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.ateachermom-card:hover {
    transform: translateY(-8px) scale(1.04);
    box-shadow: 0 30px 60px -15px rgb(201 228 222 / 0.4) !important;
}

/* Buttons */
.ateachermom-btn-mint {
    background: linear-gradient(to right, #C9E4DE, #C6DEF1) !important;
    color: #2C2535 !important;
}
.ateachermom-btn-pink {
    background: linear-gradient(to right, #F2C6DE, #F7D9C4) !important;
    color: #2C2535 !important;
}

/* TM logo styling */
.ateachermom-tm-logo {
    background-color: #C9E4DE;
    color: #2C2535;
    font-family: 'Nunito', sans-serif;
    font-weight: 700;
    letter-spacing: -2px;
}

/* Fade-in animations (the snazzy fluid feel) */
.fade-in {
    opacity: 0;
    transform: translateY(30px);
    transition: all 700ms cubic-bezier(0.4, 0, 0.2, 1);
}
.fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Add any extra custom styles you want here — this is your base now */