/* RTL Overrides for KDE Timeline css */

/* Page Header */
html.rtl .page-header {
  direction: rtl !important;
}

/* Timeline line and markers */
html.rtl .timeline::before {
  left: auto !important;
  right: 50% !important;
  transform: translate(50%) !important;
}

html.rtl .timeline-mark {
  left: auto !important;
  right: 50% !important;
  transform: translate(50%, -50%) !important;
  position: absolute !important;
  z-index: 10 !important;
}

html.rtl .timeline {
  position: relative !important;
}

/* Entry positioning */
html.rtl .timeline-entry {
  position: relative !important;
  z-index: 1 !important;
  direction: rtl !important;
}

html.rtl .timeline-entry.even {
  margin-left: 55% !important;
  margin-right: 0 !important;
}

html.rtl .timeline-entry.odd {
  margin-left: 0 !important;
  margin-right: 55% !important;
}

/* RTL text alignment */
html.rtl .timeline-entry,
html.rtl .timeline-entry h2,
html.rtl .timeline-entry p,
html.rtl .timeline-entry .below p {
  text-align: right !important;
  direction: rtl !important;
}

/* Ensure the image appears on the left in RTL mode */
html.rtl .timeline-entry .below {
  display: flex !important;
  flex-direction: row !important;
  justify-content: space-between !important;
}

html.rtl .timeline-entry .below p {
  flex: 0 1 auto !important;
  order: 1 !important; /* Anchors text to the right */
  margin-right: 0 !important;
  margin-left: 5px !important;
  max-width: 70% !important;
}

html.rtl .timeline-entry .below .captioned-image {
  flex: 0 0 auto !important;
  order: 2 !important; /* Pushes image to the left */
  margin-right: 5px !important;
  margin-left: 0 !important;
  max-width: 25% !important;
}

/* Keep captions centered */
html.rtl .timeline-entry .captioned-image .caption {
  text-align: center !important;
}

/* Filter buttons */
html.rtl .timeline-filter ul li {
  padding-right: 0 !important;
  padding-left: 20px !important;
  display: inline-block !important;
}

/* Footer */
html.rtl .page-footer {
  direction: rtl !important;
}

html.rtl .page-footer .bar {
  direction: rtl !important;
}

html.rtl .page-footer .bar > .left {
  text-align: right !important;
}

/* Mobile responsive */
@media only screen and (max-width: 420px) {
  html.rtl .timeline::before {
    right: 0 !important;
    transform: translate(0%) !important;
  }
  
  html.rtl .timeline-mark {
    right: 0 !important;
    transform: translate(0%) !important;
  }
  
  html.rtl .timeline-entry {
    width: auto !important;
    margin-bottom: 15px !important;
  }
  
  html.rtl .timeline-entry.even,
  html.rtl .timeline-entry.odd {
    margin-right: 27.5px !important;
    margin-left: 0 !important;
  }
}