/* Theme-specific styles for dark mode compatibility */

/* Fix the timeline spine for dark mode */
.timeline::after {
    transition: background-color 0.3s ease;
}

/* Fix the timeline dots for dark mode */
.timeline-dot {
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

/* Make sure the hero text has proper transitions */
.hero h1, .tagline {
    transition: color 0.3s ease;
}

/* Fix contact links and icons */
.contact-item i {
    transition: color 0.3s ease, background-color 0.3s ease;
}

.contact-item a, 
.contact-item span,
.contact-item h4 {
    transition: color 0.3s ease;
}

/* Fix for social links */
.social-link {
    transition: background-color 0.3s ease, color 0.3s ease;
}

.social-links h3 {
    transition: color 0.3s ease;
}

/* Footer transitions */
.footer {
    transition: background-color 0.3s ease;
}

/* Fix for card backgrounds */
.project-card, 
.education-card, 
.contact-card,
.timeline-content,
.contact-item {
    /* Background handled by frosted-glass.css */
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

/* Fix for dark mode mobile menu */
@media screen and (max-width: 768px) {
    .nav-menu {
        /* Background handled by frosted-glass.css */
        transition: left 0.3s ease, background-color 0.3s ease;
    }
}

/* Fix for specific elements in dark mode - COLORS ONLY */
:root.dark-theme .project-card h3,
:root.dark-theme .skill-category h3,
:root.dark-theme .education-card h3,
:root.dark-theme .timeline-content h3,
:root.dark-theme .timeline-content h4,
:root.dark-theme .social-links h3,
:root.dark-theme .contact-item i,
:root.dark-theme .social-link {
    color: var(--primary-color);
}

:root.dark-theme .education-card h4 {
    color: var(--primary-color);
}

:root.dark-theme .logo {
    color: var(--logo-color);
}

:root.dark-theme .hero::before {
    background-color: var(--hero-overlay);
}

:root.dark-theme .timeline-dot {
    background-color: var(--primary-color);
    box-shadow: 0 0 0 4px rgba(107, 183, 105, 0.3);
}

:root.dark-theme .secondary-btn {
    color: var(--secondary-btn-text);
    border-color: var(--primary-color);
}

:root.dark-theme .tech-item {
    color: #FFFFFF;
    /* Background handled by frosted-glass.css */
}

/* Contact item icon color */
:root.dark-theme .contact-item i {
    color: var(--primary-color);
}

:root.dark-theme .contact-item h4 {
    color: var(--primary-color);
}

/* Fix for hamburger menu in dark mode */
:root.dark-theme .bar {
    background-color: var(--text-color);
}

/* Timeline content list items */
:root.dark-theme .timeline-content ul li::before {
    color: var(--primary-color);
}

:root.dark-theme .timeline-content ul li {
    color: var(--text-color);
}

/* Fix for timeline content in dark mode */
:root.dark-theme .timeline-content h4 {
    color: var(--primary-color);
}

/* Fix for project links */
:root.dark-theme .project-link {
    color: var(--primary-color);
}

/* Make sure title underline is visible */
:root.dark-theme .section-title::after {
    background: var(--primary-color);
}

/* Improve education heading visibility */
:root.dark-theme .education-card h3 {
    color: var(--primary-color);
}

/* Improve social links section visibility */
:root.dark-theme .social-links h3 {
    color: var(--primary-color);
}

/* Improve project card visibility */
:root.dark-theme .project-card {
    /* Background handled by frosted-glass.css */
    border: 1px solid var(--card-border);
}

/* Ensure card content readability */
:root.dark-theme .project-card p,
:root.dark-theme .timeline-content p,
:root.dark-theme .education-card p {
    color: var(--text-color);
}