@tailwind base;
@tailwind components;
@tailwind utilities;

/* Brand colors */
:root {
    --color-white: #ffffff;
    --color-black: #000000;
    --color-light-green: #b8dc8c;
    --color-teal: #009688;
    --color-orange: #f48b1e;
    --color-primary-blue: #298cb3;
    --color-secondary-blue: #1a9ac3;
    --color-text: #000000;
    --color-background: #ffffff;
}

/* Custom styles */
html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Inter', sans-serif;
    color: var(--color-text);
    background-color: var(--color-background);
}

.accent-color {
    color: var(--color-primary-blue);
}

.bg-accent {
    background-color: var(--color-primary-blue);
}

.btn-primary {
    @apply bg-[#298cb3] text-white font-semibold py-3 px-6 rounded-md shadow-md hover:bg-[#1a9ac3] transition-all duration-300;
}

.btn-secondary {
    @apply bg-white text-[#298cb3] border border-[#298cb3] font-semibold py-3 px-6 rounded-md hover:bg-blue-50 transition-all duration-300;
}

.section-padding {
    @apply py-16 px-4 md:px-8;
}

.section-title {
    @apply text-3xl md:text-4xl font-bold mb-8 text-center;
}

.section-subtitle {
    @apply text-xl md:text-2xl font-medium mb-6 text-center;
}

/* Hamburger menu animation */
.hamburger-line {
    @apply w-6 h-0.5 bg-black transition-all duration-300;
}

.hamburger.active .hamburger-line:nth-child(1) {
    @apply transform rotate-45 translate-y-1.5;
}

.hamburger.active .hamburger-line:nth-child(2) {
    @apply opacity-0;
}

.hamburger.active .hamburger-line:nth-child(3) {
    @apply transform -rotate-45 -translate-y-1.5;
}

/* Timeline styling */
.timeline-connector {
    @apply h-0.5 bg-[#298cb3] flex-grow my-auto mx-2 hidden md:block;
}

/* Testimonial carousel */
.testimonial-slide {
    @apply hidden opacity-0 transition-opacity duration-500;
}

.testimonial-slide.active {
    @apply block opacity-100;
}

/* FAQ accordion */
.faq-answer {
    @apply max-h-0 overflow-hidden transition-all duration-300;
}

.faq-item.active .faq-answer {
    @apply max-h-96;
}

.faq-item.active .faq-plus {
    @apply hidden;
}

.faq-item.active .faq-minus {
    @apply block;
}

.faq-minus {
    @apply hidden;
}

/* Stats colors */
.stat-primary {
    color: var(--color-primary-blue);
}

.stat-secondary {
    color: var(--color-teal);
}

.stat-tertiary {
    color: var(--color-orange);
}

/* Subject card icons */
.subject-icon-math {
    @apply bg-[#298cb3] bg-opacity-10 text-[#298cb3];
}

.subject-icon-science {
    @apply bg-[#009688] bg-opacity-10 text-[#009688];
}

.subject-icon-english {
    @apply bg-[#f48b1e] bg-opacity-10 text-[#f48b1e];
}

.subject-icon-selective {
    @apply bg-[#b8dc8c] bg-opacity-10 text-[#b8dc8c];
}

/* Sticky image column - desktop only */
@media (min-width: 1024px) {
    .benefits-image-container {
        position: sticky !important;
        top: 20vh !important;
        z-index: 50 !important;
    }
    
    /* Align first benefit with image */
    .benefit:first-child {
        padding-top: 0 !important;
        margin-top: 0 !important;
    }
    
    /* Ensure no parent containers block sticky */
    .benefits-grid {
        overflow: visible !important;
    }
    
    .container {
        overflow: visible !important;
    }
}

/* Image styling */
.benefits-image img {
    width: 100%;
    border-radius: 1rem;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
    transition: opacity .4s ease;
}