/**
 * Vyda Project Timeline Widget Styles
 * 
 * Additional CSS for the project timeline widget
 * Most styles are handled inline by the widget for Elementor compatibility
 * 
 * @package HelloElementorChild
 * @since 1.0.0
 */

/* Font imports for timeline */
@import url('https://fonts.googleapis.com/css2?family=Newsreader:wght@300;400;500;600;700&display=swap');

/* Ensure proper font fallbacks */
.vyda-timeline-modal .modal-title {
    font-family: "Newsreader", serif !important;
}

/* Additional accessibility improvements */
.vyda-timeline-modal {
    outline: none;
}

.vyda-timeline-modal .modal-content:focus {
    outline: 2px solid rgba(255, 253, 246, 0.5);
    outline-offset: 2px;
}

/* Loading state styles */
.timeline-loading {
    text-align: center;
    padding: 40px;
    color: #999;
    font-style: italic;
}

/* No projects state */
.timeline-empty {
    text-align: center;
    padding: 40px;
    color: #666;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    margin: 20px 0;
}

.timeline-empty h3 {
    color: #999;
    margin-bottom: 10px;
}

/* Print styles */
@media print {
    .vyda-timeline-modal {
        display: none !important;
    }
    
    .view-more-btn {
        display: none !important;
    }
    
    .timeline-content::before {
        display: none !important;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .timeline-content {
        border: 1px solid rgba(255, 255, 255, 0.3);
    }
    
    .timeline-dot {
        border: 2px solid #fff;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .timeline-item {
        animation: none !important;
    }
    
    .timeline-content,
    .view-more-btn,
    .modal {
        transition: none !important;
    }
}

/* Dark mode adjustments (if theme supports it) */
@media (prefers-color-scheme: dark) {
    /* Styles are already dark by default */
}

/* Additional responsive breakpoints */
@media (max-width: 480px) {
    .vyda-timeline-modal .modal-content {
        padding: 24px 16px 24px 16px !important;
        margin: 10px;
        width: calc(100vw - 20px);
    }
    
    .vyda-timeline-modal .modal-title {
        font-size: 24px !important;
        line-height: 120%;
    }
    
    .timeline-content {
        font-size: 14px;
    }
    
    .timeline-year {
        font-size: 16px;
    }
}