/*
 * style.css
 * Global CSS styles for the AI Writing Assistant application.
 * This file uses Tailwind CSS utility classes, but also includes some
 * custom global styles and animations where needed.
 */

/* Import Google Font: Inter */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

/* Base styles for the entire application */
html, body {
    height: 100%; /* Ensure html and body take full viewport height */
    margin: 0;
    padding: 0;
    font-family: 'Inter', sans-serif; /* Apply Inter font globally */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background-color: #f3f4f6; /* Light gray background for the entire app */
    color: #374151; /* Default text color */
}

/* Ensure main content area takes available space for sticky footer effect */
body {
    display: flex;
    flex-direction: column;
}

/* Custom animations for the hero section in index.php */
/* Fade In Down */
@keyframes fade-in-down {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-in-down {
    animation: fade-in-down 0.8s ease-out forwards;
}

/* Fade In Up */
@keyframes fade-in-up {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-in-up {
    animation: fade-in-up 0.8s ease-out forwards;
}

/* Add delays for staggered animations */
.delay-100 { animation-delay: 0.1s; }
.delay-200 { animation-delay: 0.2s; }
.delay-300 { animation-delay: 0.3s; }
/* Add more delays as needed for other elements */


/* Utility for prose-like content within output areas (e.g., AI feedback) */
/* This helps format raw text with line breaks and basic paragraph spacing */
.prose {
    line-height: 1.6;
}
.prose p {
    margin-bottom: 1em;
}
.prose ul {
    list-style-type: disc;
    margin-left: 1.5em;
    margin-bottom: 1em;
}
.prose ol {
    list-style-type: decimal;
    margin-left: 1.5em;
    margin-bottom: 1em;
}
.prose strong {
    font-weight: 600;
}