/* Accessible Timeline CSS for Timeline.js */
  
  /* Base Timeline Styling ----------------------------------------------------- */
  .tl-timeline {
    font-family: Roboto, sans-serif;
    font-weight: 300;
    font-size: 18px; /* Increased font size for readability */
    line-height: 1.6em; /* Increased line height for better spacing */
    color: #333; /* Darker text color for better contrast */
    background-color: #fff;
  }
  
  /* Headings ----------------------------------------------------- */
  .tl-timeline h1,
  .tl-timeline h2,
  .tl-timeline h3,
  .tl-timeline h4,
  .tl-timeline h5,
  .tl-timeline h6 {
    font-family: Roboto, sans-serif;
    font-weight: 500;
    font-size: 36px;
    line-height: 44px;
    color: #222; /* Enhanced contrast for headings */
  }
  .tl-timeline h2.tl-headline-title {
    font-size: 48px;
    line-height: 56px;
  }
  
  /* Paragraphs and Lists ----------------------------------------------------- */
  .tl-timeline p {
    font-size: 18px;
    line-height: 1.6em;
    color: #333;
  }
  .tl-timeline ul {
    font-size: 18px;
    line-height: 1.6em;
    color: #333;
  }
  
  /* Media and Captions ----------------------------------------------------- */
  .tl-timeline .tl-media .tl-media-wikipedia h4 a,
  .tl-timeline .tl-media h4,
  .tl-timeline .tl-media h4 a {
    font-weight: 500;
    font-size: 24px;
    line-height: 32px;
    color: #0056b3; /* Accessible link color */
  }
  .tl-timeline .tl-caption,
  .tl-timeline .tl-credit {
    font-size: 16px;
    line-height: 1.5em;
    color: #555; /* Improved contrast for captions */
  }
  
  /* Navigation Buttons ----------------------------------------------------- */
  .tl-timeline .tl-slidenav-next,
  .tl-timeline .tl-slidenav-previous,
  .tl-timeline .tl-message,
  .tl-timeline .tl-timegroup-message {
    font-weight: 500;
    text-transform: none;
    color: #fff; /* Ensure text is readable on button background */
    border-radius: 4px;
  }
  
  /* Headline Date ----------------------------------------------------- */
  .tl-timeline .tl-headline-date,
  .tl-timeline h3.tl-headline-date {
    font-weight: normal;
    color: #222; /* Darker text color for better readability */
    margin-bottom: 5px;
  }
  .tl-timeline .tl-headline-date small,
  .tl-timeline h3.tl-headline-date small {
    font-weight: normal;
    color: #000000;
  }
  
  /* Time Navigation Slider ----------------------------------------------------- */
  .tl-timeline .tl-timenav-slider {
    font-weight: 500;
    background-color: #f8f9fa; /* Light background for contrast with text */
    color: #333;
  }
  .tl-timeline .tl-timenav-slider h2.tl-headline {
    font-weight: 500;
  }
  .tl-timeline .tl-timenav-slider .tl-timeaxis {
    font-weight: 500;
  }
  
  /* Blockquotes ----------------------------------------------------- */
  .tl-timeline blockquote,
  .tl-timeline blockquote p {
    font-style: italic;
    font-weight: 300;
    line-height: 1.6;
    color: #444;
    border-left: 4px solid #007bff; /* Visual indicator for blockquotes */
  }
  
  /* Input Fields ----------------------------------------------------- */
  input[type="text"].editor-headline {
    font-weight: 500;
    font-size: 36px;
    line-height: 44px;
    color: #333;
  }
  
  a {
    color: #0056b3;
    text-decoration: underline; /* Ensures links are clearly distinguishable */
  }
  a:hover {
    color: #003366;
    text-decoration: none;
  }
  
  /* Ensure all UI elements are distinguishable with color and other visual cues */
  .tl-timeline button, .tl-timeline a {
    cursor: pointer;
  }
  
  /* Animation ----------------------------------------------------- */
  /* Keeping animations minimal to avoid motion sickness */
  .tl-timeline .fade-in {
    animation: fadeIn 1s ease-in-out;
  }

  .tl-knightlab-logo {
    color: #000000;
  }
  
  @keyframes fadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
  }

  .tl-timeline .tl-attribution {
    color: #333333 !important; /* Ensure the new text color is applied */
    background-color: #ffffff !important; /* Keep a solid white background */
    z-index: 100 !important; /* Ensure visibility over other elements */
  }  
  
  .tl-timeline .parent-element {
    background-color: #ffffff !important; /* Ensure parent elements are not causing grey */
    opacity: 1 !important; /* Remove any transparency */
  }
  
  .parent-container {
    background-color: #ffffff !important; /* Ensure no blending from parent */
    opacity: 1 !important;
  }

.tl-timeline .tl-attribution,
h2.tl-headline,
h2.tl-headline:hover,
h2.tl-headline:focus,
.tl-timeline .tl-attribution::before,
.tl-timeline .tl-attribution::after,
h2.tl-headline::before,
h2.tl-headline::after {
  color: #000000 !important;
  background-color: transparent !important;
}

.tl-timeline .tl-attribution {
    display: none !important;
}

.tl-slidenav-title,
.tl-slidenav-title:hover,
.tl-slidenav-title:focus,
.tl-slidenav-title-prev,
.tl-slidenav-title-next {
  color: #333333 !important; /* Improve visibility */
  opacity: 1 !important; /* Ensure no fading */
  mix-blend-mode: normal !important; /* Avoid blending */
}

#timeline-embed {
  width: 100%;
  height: 100%;
  overflow: visible;
}