body { font-family: 'Inter', sans-serif; }

/* Smooth fade for view transitions */
.view-section {
    animation: fadeIn 0.4s ease-out;
}
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Accordion transition */
.accordion-content {
    transition: max-height 0.4s ease-in-out, opacity 0.4s ease-in-out;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
}
.accordion-content.open {
    max-height: 800px;
    opacity: 1;
}

.accordion-icon {
    transition: transform 0.3s ease;
}
.accordion-icon.rotate-180 {
    transform: rotate(180deg);
}

/* Project Detail Typography - Tailwind Prose Overrides */
.project-content h3 {
    font-size: 1.5rem; 
    font-weight: 700;
    color: #111827;
    margin-top: 3rem;
    margin-bottom: 1rem;
}
.project-content h4 {
    font-size: 1.25rem; 
    font-weight: 600;
    color: #374151; 
    margin-top: 2rem;
    margin-bottom: 0.75rem;
}
.project-content p {
    margin-bottom: 1.5rem;
    line-height: 1.75;
}
.project-content ul {
    list-style-type: none;
    padding-left: 0;
    margin-bottom: 2rem;
}
.project-content li {
    margin-bottom: 1rem;
    padding-left: 1rem;
    border-left: 2px solid #e5e7eb;
}
.project-content strong {
    font-weight: 600;
    color: #111827;
}

/* ALIGNMENT FIX: Remove top margin from the first element to align with float card */
.project-content > :first-child {
    margin-top: 0 !important;
}

/* Float behavior for Project Details card on desktop */
@media (min-width: 768px) {
    .float-card {
        float: right;
        width: 20rem;
        margin-left: 3rem;
        margin-bottom: 2rem;
        clear: right;
        /* Ensure it starts at the top edge */
        margin-top: 0; 
    }
}