/*
Theme Name: Interactive Tutors
Description: Custom WordPress theme for Interactive Tutors educational services
Author: Interactive Learning Group
Version: 1.1
*/

:root {
    --primary-green: #2E8B57;
    --secondary-blue: #4A90E2;
    --accent-orange: #FF8C00;
    --light-gray: #F8F9FA;
    --dark-gray: #2C3E50;
}

body {
    font-family: 'Inter', sans-serif;
    line-height: 1.6;
    color: var(--dark-gray);
    background-color: #F8F9FA; /* Equivalent to bg-gray-50 */
}

.primary-green { background-color: var(--primary-green); }
.text-primary-green { color: var(--primary-green); }
.border-primary-green { border-color: var(--primary-green); }

.secondary-blue { background-color: var(--secondary-blue); }
.text-secondary-blue { color: var(--secondary-blue); }

.accent-orange { background-color: var(--accent-orange); }
.text-accent-orange { color: var(--accent-orange); }

.nav-link {
    transition: all 0.3s ease;
}

.nav-link:hover,
.nav-link.active,
.current-menu-item > a {
    background-color: var(--primary-green);
    color: white !important;
}

.hero-section {
    background: linear-gradient(135deg, var(--primary-green) 0%, var(--secondary-blue) 100%);
}

.card-hover {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card-hover:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}

.stats-counter {
    font-size: 3rem;
    font-weight: 700;
    color: var(--primary-green);
}

.testimonial-card {
    background: white;
    border-left: 4px solid var(--primary-green);
    box-shadow: 0 4px 6px rgba(0,0,0,0.07);
}

.course-badge {
    background: var(--primary-green);
    color: white;
    padding: 0.25rem 0.75rem;
    border-radius: 1rem;
    font-size: 0.875rem;
    font-weight: 500;
}

.teacher-profile-card {
    background: white;
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
    transition: transform 0.3s ease;
}

.teacher-profile-card:hover {
    transform: translateY(-10px);
}

@media (max-width: 768px) {
    .stats-counter {
        font-size: 2rem;
    }
    #mobile-menu {
        display: none;
    }
}

/*
 * ----------------------------------------------------------------------------
 * Custom Typography Styles for Editor Content (Prose Overrides)
 * ----------------------------------------------------------------------------
 * This block corrects the styling for content generated by the WordPress
 * editor, ensuring it matches the theme's design. It overrides the default
 * Tailwind CSS 'prose' styles for headings, lists, and spacing.
 */

/* General container for editor content */
.prose {
    color: #4A5568; /* Sets a default dark gray for paragraphs */
}

/* --- HEADING STYLES --- */
.prose h2,
.prose h3,
.prose h4 {
    color: #1E8449; /* Your Primary Green */
    font-weight: 600; /* Bolder headings */
}

.prose h2 {
    font-size: 1.5rem; /* 24px */
    margin-top: 2em;
    margin-bottom: 1em;
}

.prose h3 {
    font-size: 1.25rem; /* 20px */
    margin-top: 1.75em;
    margin-bottom: 0.75em;
}

/* --- LIST STYLES --- */
/* This brings back the bullet points and proper spacing */
.prose ul {
    list-style-type: disc; /* Use standard bullet points */
    margin-top: 1.25em;
    margin-bottom: 1.25em;
    padding-left: 1.5em; /* Indent the entire list */
}

.prose li {
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}

/* --- BOLD TEXT STYLE --- */
.prose strong {
    color: #2D3748; /* Make bold text slightly darker for emphasis */
    font-weight: 600;
}

/* --- PARAGRAPH SPACING --- */
.prose p {
    margin-top: 1.25em;
    margin-bottom: 1.25em;
}

/* Remove top margin for elements that directly follow a heading */
.prose h2 + *,
.prose h3 + *,
.prose h4 + * {
    margin-top: 0;
}