/**
 * Timeline Module For Divi (Pro) - Theme Overrides
 * Override styles from wp-content/plugins/timeline-module-pro-for-divi
 * Replicates design: thin light gray line, light blue-gray cards, subtle shadow
 */

/* Override plugin CSS variables to match design */
.tmdivi-wrapper {
  --tw-cbx-bg: var(--lightBlue);
  --tw-cbx-bgc: var(--lightBlue);
  --tw-arw-bg: var(--lightBlue);
  --tw-arw-bg2: var(--lightBlue);
  --tw-arw-bg3: var(--lightBlue);
  --tw-arw-bg4: var(--lightBlue);
  --tw-line-width: 2px !important;
  --tw-line-bg: var(--lightGrey);
  --tw-ibx-size: 33px;
  --tw-ibx-bd-width: 2px;
  --tw-ibx-bg: var(--lightGrey);
  --tw-ibx-color: var(--charcoal);
  --tw-ibx-bd-color: var(--brownGrey);
  --tw-cbx-title-color: var(--charcoal);
  --tw-cbx-des-color: var(--charcoal);
  --tw-lbl-big-color: var(--charcoal);
  --tw-lbl-small-color: var(--charcoal);
  --tw-cbx-shadow: 0 2px 8px -2px rgba(0, 0, 0, 0.12);
  --tw-cbx-shadow-left: 0 2px 8px -2px rgba(0, 0, 0, 0.12);
  --tw-cbx-radius: 6px;
  --tw-cbx-radius-left: 6px;
}

/* All text - use theme default font family */
.tmdivi-wrapper .tmdivi-title,
.tmdivi-wrapper .tmdivi-description,
.tmdivi-wrapper .tmdivi-label-big,
.tmdivi-wrapper .tmdivi-label-small,
.tmdivi-wrapper .tmdivi-year-text,
.tmdivi-wrapper .tmdivi-button {
  font-family: var(--groteskDisplay);
}

.tmdivi-wrapper .tmdivi-title {
  font-weight: 600;
}

/* Date label (e.g. "June 2015") */
.tmdivi-wrapper .tmdivi-label-big {
  /* Add your overrides here */
  font-weight: 500;
}

/* Icon - 38px, 2px border, 2px padding around image */
.tmdivi-wrapper .tmdivi-icon {
  padding: 2px;
}

.tmdivi-wrapper .tmdivi-icon img {
  object-fit: contain;
}

.tmdivi-vertical.tmdivi-wrapper .tmdivi-timeline:before {
  width: var(--tw-line-width);
}

/* Timeline start/end dots - 10px, light gray */
.tmdivi-wrapper .tmdivi-start,
.tmdivi-wrapper .tmdivi-end {
  width: 10px !important;
  height: 10px !important;
  left: calc(50% - 5px) !important;
  background-color: var(--lightGrey) !important;
}

/* Image - full width, no border radius */
.tmdivi-wrapper .tmdivi-media img {
  border-radius: 0;
}