/* Timeline Events - Essential CSS Only */

/* IBM Plex Sans Font */
@font-face {
    font-family: 'IBM Plex Sans';
    src: url('fonts/IBMPlexSans-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'IBM Plex Sans';
    src: url('fonts/IBMPlexSans-Italic.woff2') format('woff2');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'IBM Plex Sans';
    src: url('fonts/IBMPlexSans-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'IBM Plex Sans';
    src: url('fonts/IBMPlexSans-BoldItalic.woff2') format('woff2');
    font-weight: 700;
    font-style: italic;
    font-display: swap;
}

/* Apply IBM Plex Sans to all timeline elements except icons */
.tl-timeline,
.tl-timeline *:not([class^="tl-icon-"]):not([class*=" tl-icon-"]):not(.tl-slidenav-icon),
.timeline-container,
.timeline-container *:not([class^="tl-icon-"]):not([class*=" tl-icon-"]):not(.tl-slidenav-icon) {
    font-family: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    font-optical-sizing: auto;
}

/* Ensure icon font is preserved for icon elements and navigation arrows */
[class^="tl-icon-"],
[class*=" tl-icon-"],
.tl-slidenav-icon,
.tl-slidenav-icon:before,
.tl-slidenav-icon:after {
    font-family: 'tl-icons' !important;
}

/* Basic timeline container - essential for layout */
/* Force timeline to be 100% of screen width regardless of parent container */
.timeline-container,
.tl-timeline {
    position: relative;
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(-50vw + 50%) !important;
    margin-right: calc(-50vw + 50%) !important;
    left: 0 !important;
    right: 0 !important;
}

/* Responsive adjustments - essential for mobile */
@media (max-width: 768px) {
    .tl-timeline {
        height: 400px !important;
    }
}

@media (max-width: 480px) {
    .tl-timeline {
        height: 300px !important;
    }
}

/* Error state styling - essential for user feedback */
.timeline-error {
    padding: 20px;
    background: #fcf0f1;
    border: 1px solid #d63638;
    color: #d63638;
    border-radius: 4px;
    text-align: center;
}

/* No events styling - essential for empty state */
.timeline-no-events {
    padding: 40px;
    text-align: center;
    border: 2px dashed #ccc;
    background: #f9f9f9;
    color: #666;
    border-radius: 4px;
    margin: 20px 0;
}

.timeline-no-events p {
    margin: 0;
    font-size: 16px;
}

/* Timeline media - essential for proper image display */
.tl-media img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Timeline text - essential for readability */
.tl-text {
    line-height: 1.6;
}

.tl-text p {
    margin-bottom: 15px;
}

/* Remove text shadows from all timeline elements */
/* General reset */
.tl-timeline,
.tl-timeline *,
.tl-slide,
.tl-slide *,
.tl-text,
.tl-text *,
.tl-headline,
.tl-headline *,
.tl-headline-title,
.tl-headline-title *,
.tl-headline-date,
.tl-headline-date *,
.tl-timenav,
.tl-timenav *,
.tl-timemarker,
.tl-timemarker *,
.tl-timemarker-content-container,
.tl-timemarker-content-container * {
    text-shadow: none !important;
}

/* Override specific TimelineJS3 selectors that use !important */
.tl-slide.tl-full-image-background,
.tl-slide.tl-full-color-background,
.tl-slide.tl-full-image-background *,
.tl-slide.tl-full-color-background *,
.tl-slide.tl-full-image-background h1,
.tl-slide.tl-full-image-background h2,
.tl-slide.tl-full-image-background h3,
.tl-slide.tl-full-image-background h4,
.tl-slide.tl-full-image-background h5,
.tl-slide.tl-full-image-background h6,
.tl-slide.tl-full-color-background h1,
.tl-slide.tl-full-color-background h2,
.tl-slide.tl-full-color-background h3,
.tl-slide.tl-full-color-background h4,
.tl-slide.tl-full-color-background h5,
.tl-slide.tl-full-color-background h6,
.tl-slide.tl-full-image-background p,
.tl-slide.tl-full-color-background p,
.tl-slide.tl-full-image-background a,
.tl-slide.tl-full-color-background a,
.tl-slide.tl-full-image-background blockquote,
.tl-slide.tl-full-color-background blockquote,
.tl-slide.tl-full-image-background blockquote p,
.tl-slide.tl-full-color-background blockquote p,
.tl-slide.tl-full-image-background .tl-credit,
.tl-slide.tl-full-color-background .tl-credit,
.tl-slide.tl-full-image-background .tl-caption,
.tl-slide.tl-full-color-background .tl-caption,
.tl-slide.tl-full-image-background .tl-headline,
.tl-slide.tl-full-color-background .tl-headline,
.tl-slide.tl-full-image-background .tl-headline-title,
.tl-slide.tl-full-color-background .tl-headline-title,
.tl-slide.tl-full-image-background .tl-headline-date,
.tl-slide.tl-full-color-background .tl-headline-date,
.tl-slide.tl-full-image-background .tl-text,
.tl-slide.tl-full-color-background .tl-text,
.tl-slide.tl-full-image-background .tl-text p,
.tl-slide.tl-full-color-background .tl-text p,
.tl-slide.tl-full-image-background .vcard,
.tl-slide.tl-full-color-background .vcard,
.tl-slide.tl-full-image-background .vcard a,
.tl-slide.tl-full-color-background .vcard a,
.tl-slide.tl-full-image-background .vcard .nickname,
.tl-slide.tl-full-color-background .vcard .nickname,
.tl-slide.tl-full-image-background .tl-media-blockquote blockquote,
.tl-slide.tl-full-color-background .tl-media-blockquote blockquote,
.tl-slide.tl-full-image-background .tl-media-blockquote blockquote p,
.tl-slide.tl-full-color-background .tl-media-blockquote blockquote p,
.tl-slide.tl-full-image-background .tl-media .tl-media-wikipedia h4 a,
.tl-slide.tl-full-color-background .tl-media .tl-media-wikipedia h4 a,
.tl-slide.tl-full-image-background .tl-media .tl-media-website h4 a,
.tl-slide.tl-full-color-background .tl-media .tl-media-website h4 a,
.tl-slidenav-next .tl-slidenav-content-container .tl-slidenav-title,
.tl-slidenav-previous .tl-slidenav-content-container .tl-slidenav-title,
.tl-slidenav-next .tl-slidenav-content-container .tl-slidenav-description,
.tl-slidenav-previous .tl-slidenav-content-container .tl-slidenav-description,
.tl-slidenav-previous .tl-slidenav-content-container.tl-slidenav-inverted .tl-slidenav-title,
.tl-slidenav-next .tl-slidenav-content-container.tl-slidenav-inverted .tl-slidenav-title,
.tl-slidenav-previous .tl-slidenav-content-container.tl-slidenav-inverted .tl-slidenav-description,
.tl-slidenav-next .tl-slidenav-content-container.tl-slidenav-inverted .tl-slidenav-description {
    text-shadow: none !important;
}

/* Title link hover - underline only, no color change */
.tl-headline-title a,
.tl-headline a,
h2.tl-headline-title a,
h2.tl-headline a {
    text-decoration: none;
    transition: text-decoration 0.2s ease;
}

.tl-headline-title a:hover,
.tl-headline-title a:focus,
.tl-headline a:hover,
.tl-headline a:focus,
h2.tl-headline-title a:hover,
h2.tl-headline-title a:focus,
h2.tl-headline a:hover,
h2.tl-headline a:focus {
    text-decoration: underline !important;
    filter: none !important;
}

/* Print styles - essential for printing */
@media print {
    .timeline-container {
        border: 1px solid #ddd;
    }
    
    .tl-slidenav-next,
    .tl-slidenav-previous,
    .tl-timenav {
        display: none !important;
    }
}