/* ============================================
   TIMETABLE PLUS - CONTACT PAGE STYLES
   Custom styles for the contact page
   ============================================ */

/* CSS Variables - Orange Theme for Contact Page */
:root {
    --primary: #de5e09;
    --secondary: #E67E22;
    --accent: #8B4513;
    --primary-hover-bg: rgba(222, 94, 9, 0.08);
}

/* Form Focus States */
input:focus,
textarea:focus,
select:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(222, 94, 9, 0.1);
}

/* Contact Info Card Animations */
@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsive Adjustments */
@media (max-width: 1024px) {
    .lg\:grid-cols-2 {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .md\:grid-cols-3 {
        grid-template-columns: 1fr;
    }

    .md\:text-6xl {
        font-size: 2.5rem;
    }

}

/* Print Styles */
@media print {
    nav,
    footer,
    .side-nav {
        display: none;
    }

    #contact-form {
        page-break-before: always;
    }
}

/* ============================================
   SIDE NAVIGATION - Orange Theme Override
   Overrides hardcoded purple colors in global.css
   ============================================ */

/* Inactive dot border - change purple to orange */
.side-nav-dot {
    border-color: rgba(222, 94, 9, 0.5);
}

.side-nav-item.active .side-nav-dot {
    background: linear-gradient(135deg, #de5e09, #de5e09);
    border-color: #de5e09;
    box-shadow: 0 4px 12px rgba(222, 94, 9, 0.4);
}

.side-nav-item.active .side-nav-label {
    background: linear-gradient(135deg, #de5e09, #de5e09);
    border-color: #de5e09;
}

.side-nav-item:hover .side-nav-dot {
    border-color: #de5e09;
    box-shadow: 0 4px 12px rgba(222, 94, 9, 0.3);
}

@keyframes activePulseOrange {
    0%, 100% {
        box-shadow: 0 4px 12px rgba(222, 94, 9, 0.4);
    }
    50% {
        box-shadow: 0 4px 20px rgba(222, 94, 9, 0.6);
    }
}

.side-nav-item.active .side-nav-dot {
    animation: activePulseOrange 2s ease-in-out infinite;
}

/* ============================================
   NAVBAR - Orange Theme Override
   Ensures navbar underline uses orange gradient
   ============================================ */

.nav-link::after {
    background: linear-gradient(135deg, #de5e09, #E67E22);
}

.nav-link:hover,
.nav-link.active {
    color: #de5e09;
}