/* Legacy CSS Overrides - Keep only essential custom styles that can't be replaced with Tailwind */

/* Complex animations and transforms that require custom CSS */
.hamburger.active span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}

.hamburger.active span:nth-child(2) {
    opacity: 0;
}

.hamburger.active span:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px);
}

/* Custom width for navigation menu (specific value needed for JS positioning) */
.nav-menu {
    width: 280px;
}

/* Period button active state with exact styling needed for functionality */
.period-btn.active {
    background: var(--primary, #6366f1) !important;
    color: white !important;
    font-weight: 600;
}

/* Responsive breakpoint overrides for mobile navigation */
@media (max-width: 768px) {
    .nav-menu {
        width: 100%;
        left: -100%;
    }
    
    .header-right span {
        display: none;
    }
}

@media (max-width: 480px) {
    .hamburger span {
        width: 18px;
    }
}