/* Base font and scroll behavior */
body {
    font-family: 'Inter', sans-serif;
    scroll-behavior: smooth;
}

/* Simple fade-in animation for content sections */
/* (Note: This class is not currently used as sections are on different pages) */
.content-section {
    /* display: none; */ /* No longer needed for SPA navigation */
    animation: fadeIn 0.5s ease-in-out;
}

/* .content-section.active { */
    /* display: block; */ /* No longer needed for SPA navigation */
/* } */

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Style for interactive playground canvas */
.interactive-canvas {
    border: 1px solid #e2e8f0; /* cool-gray-200 */
    background-color: #f8fafc; /* cool-gray-50 */
    border-radius: 0.5rem; /* rounded-lg */
    display: block; /* Make canvas block level */
    margin-left: auto;
    margin-right: auto;
    max-width: 100%; /* Ensure canvas is responsive */
    height: auto; /* Maintain aspect ratio */
}

/* Styling for the hero image */
.hero-image {
    max-width: 100%; /* Ensure image doesn't overflow container */
    height: auto; /* Maintain aspect ratio */
    border-radius: 0.75rem; /* rounded-xl */
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); /* shadow-md */
    object-fit: cover; /* Cover the area nicely */
    max-height: 300px; /* Optional: Limit height */
}

/* Styling for Topic Cards on Home Page */
.topic-card {
    padding: 1.5rem; /* p-6 */
    border-radius: 0.5rem; /* rounded-lg */
    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); /* shadow-sm */
    transition: box-shadow 0.3s ease, transform 0.3s ease;
    text-align: center;
    cursor: pointer;
}

.topic-card:not(.cursor-not-allowed):hover { /* Apply hover only if not disabled */
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); /* shadow-lg */
    transform: translateY(-4px);
}

.topic-card-title {
    font-size: 1rem; /* text-base */
    font-weight: 600; /* font-semibold */
    color: #1f2937; /* gray-800 */
    margin-bottom: 0.5rem; /* mb-2 */
}

.topic-card-description {
    font-size: 0.875rem; /* text-sm */
    color: #4b5563; /* gray-600 */
}

/* Styling for Topic Content Sections on topics.html */
/* Add padding-top and negative margin-top to offset anchor scrolling behind fixed header */
.topic-content-section {
    padding-top: 4rem; /* Adjust based on header height */
    margin-top: -4rem; /* Adjust based on header height */
}


/* Quiz option styling */
.quiz-option {
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease;
    /* Base styles are applied via Tailwind in HTML (border, p-3, rounded-md) */
}

.quiz-option:hover {
    background-color: #e0f2fe; /* sky-100 */
    border-color: #7dd3fc; /* sky-300 */
}

.quiz-option.selected {
    background-color: #bae6fd; /* sky-200 */
    border-color: #38bdf8; /* sky-400 */
    font-weight: 600; /* font-semibold */
}

/* Quiz feedback styling */
.quiz-feedback {
    margin-top: 1rem; /* mt-4 */
    padding: 0.75rem; /* p-3 */
    border-radius: 0.375rem; /* rounded-md */
    font-weight: 500; /* font-medium */
    display: none; /* Hidden by default, shown via JS */
}

.feedback-correct {
    background-color: #dcfce7; /* green-100 */
    color: #166534; /* green-800 */
    border: 1px solid #86efac; /* green-300 */
}

.feedback-incorrect {
    background-color: #fee2e2; /* red-100 */
    color: #991b1b; /* red-800 */
    border: 1px solid #fca5a5; /* red-300 */
}

/* Note: Tailwind classes handle most of the styling.
   This CSS file primarily contains custom animations,
   canvas styling, hero image styling, topic card styling,
   anchor offset styling, and state-specific styles (like .selected). */