/* Minimal custom styles for Tailwind */

/* Hamburger menu animation */
#mobileMenuToggle.active span:nth-child(1) {
    position: absolute;
    transform: rotate(45deg);
}

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

#mobileMenuToggle.active span:nth-child(3) {
    position: absolute;
    transform: rotate(-45deg);
}

/* Mobile navigation - below lg breakpoint (1024px) */
@media (max-width: 1023px) {
    #mainNav {
        display: flex;
        position: fixed;
        top: 72px;
        left: 0;
        right: 0;
        max-height: calc(100vh - 72px);
        background-color: #333333;
        flex-direction: column;
        gap: 11.5px;
        padding: 24px;
        transform: translateY(-100%);
        opacity: 0;
        transition: all 0.3s ease;
        pointer-events: none;
        overflow-y: auto;
    }

    #mainNav.active {
        transform: translateY(0);
        opacity: 1;
        pointer-events: all;
    }

    #mainNav a {
        width: 100%;
        text-align: center;
        text-decoration: none;
        padding: 10px 0;
        font-size: 20px;
        line-height: 100%;
        font-weight: 600;
    }

    #mainNav a:hover {
        text-decoration: underline;
    }

    /* Style for Enroll Now button/link in mobile */
    #mainNav button,
    #mainNav a:last-child {
        width: 100%;
        margin-top: 48px;
    }

    /* Remove underline on hover for the CTA button */
    #mainNav a:last-child:hover {
        text-decoration: none;
    }
}

/* Accordion chevron rotation when active */
.accordion-toggle.active svg,
.module-toggle.active svg,
.schedule-module-toggle.active svg,
.faq-toggle.active svg {
    transform: rotate(180deg);
}

/* Placeholder color for form inputs */
input::placeholder,
textarea::placeholder {
    color: #BEBEBE;
    opacity: 1;
}

/* Remove focus outline from accordion/module toggle buttons and session tabs */
.schedule-module-toggle:focus,
.faq-toggle:focus,
.accordion-toggle:focus,
.module-toggle:focus,
.session-tab-btn:focus,
.schedule-format-btn:focus {
    outline: none;
}

/* Keep focus visible for keyboard navigation with a subtle style */
.schedule-module-toggle:focus-visible,
.faq-toggle:focus-visible,
.accordion-toggle:focus-visible,
.module-toggle:focus-visible,
.session-tab-btn:focus-visible,
.schedule-format-btn:focus-visible {
    outline: 2px solid rgba(240, 167, 99, 0.3);
    outline-offset: -2px;
}