/* ============================================================
   Horizontal Timeline Elementor Widget
   Author: Senior WP Developer
   Version: 1.0.0
   ============================================================ */

/* Base import — Montserrat is enqueued via PHP, but also
   referenced here as a fallback for classic themes         */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&display=swap');

/* ── CSS Custom Properties (defaults — overridden by Elementor) ── */
.hte-timeline-wrapper {
  --hte-circle-size:      44px;
  --hte-circle-bg:        #2b2b2b;
  --hte-line-color:       #ffffff;
  --hte-line-thickness:   1px;
  --hte-number-color:     #ffffff;
  --hte-title-color:      #ffffff;
  --hte-desc-color:       #ffffff;
  --hte-col-gap:          30px;
  --hte-content-mt:       24px;

  box-sizing: border-box;
}

/* ── Wrapper ── */
.hte-timeline-wrapper *,
.hte-timeline-wrapper *::before,
.hte-timeline-wrapper *::after {
  box-sizing: border-box;
}

/* ── Steps Grid ── */
.hte-timeline-steps {
  display: grid;
  grid-template-columns: repeat(var(--hte-columns, 3), 1fr);
  gap: var(--hte-col-gap, 30px);
  align-items: start;
  width: 100%;
}

/* ── Individual Step ── */
.hte-step {
  display: flex;
  flex-direction: column;
  position: relative;
}

/* ── Connector row (circle + line) ── */
.hte-connector {
  display: flex;
  align-items: center;
  position: relative;
  width: 100%;
}

/* Horizontal line extending from circle to the right edge —
   visible on all steps EXCEPT the last one.                */
.hte-step:not(.hte-step--last) .hte-connector::after {
  content: '';
  position: absolute;
  left: var(--hte-circle-size, 44px);
  right: calc( var(--hte-col-gap, 30px) * -1 );
  top: 50%;
  transform: translateY(-50%);
  height: var(--hte-line-thickness, 1px);
  background-color: var(--hte-line-color, #ffffff);
  z-index: 0;
}

/* ── Circle ── */
.hte-circle {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  width:  var(--hte-circle-size, 44px);
  height: var(--hte-circle-size, 44px);
  border-radius: 50%;
  background-color: var(--hte-circle-bg, #2b2b2b);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.25s ease, background-color 0.25s ease;
}

.hte-circle:hover {
  transform: scale(1.05);
}

/* ── Circle Number ── */
.hte-circle-number {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 16px;
  color: var(--hte-number-color, #ffffff);
  line-height: 1;
  user-select: none;
}

/* ── Text Content ── */
.hte-step-content {
  margin-top: var(--hte-content-mt, 24px);
}

/* ── Title ── */
.hte-step-title {
  font-family: 'Montserrat', sans-serif;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0;
  color: var(--hte-title-color, #ffffff);
  margin: 0 0 12px 0;
  padding: 0;
}

/* ── Description ── */
.hte-step-description {
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.7;
  color: var(--hte-desc-color, #ffffff);
  margin: 0;
  padding: 0;
}

/* ============================================================
   RESPONSIVE — Tablet  (≤ 1024px)
   ============================================================ */
@media (max-width: 1024px) {
  .hte-timeline-steps {
    grid-template-columns: repeat(2, 1fr);
    gap: 40px 30px;
  }

  /* Hide connector lines in 2-column wrapped layout for
     even-numbered items (they'd point into whitespace)    */
  .hte-step:nth-child(2n) .hte-connector::after {
    display: none;
  }
}

/* ============================================================
   RESPONSIVE — Mobile  (≤ 767px)
   ============================================================ */
@media (max-width: 767px) {
  .hte-timeline-steps {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  /* Vertical connector — line goes downward instead of right */
  .hte-step:not(.hte-step--last) .hte-connector::after {
    /* Reset horizontal line */
    left:   calc( var(--hte-circle-size, 44px) / 2 - 0.5px );
    right:  auto;
    top:    var(--hte-circle-size, 44px);
    bottom: calc( var(--hte-content-mt, 24px) * -1 - 40px );
    width:  var(--hte-line-thickness, 1px);
    height: auto;
    transform: none;
  }

  /* In single-column all steps show the downward line
     except the absolute last one                          */
  .hte-step:nth-child(2n) .hte-connector::after {
    display: block;
  }
}

/* ============================================================
   EDITOR PREVIEW — make sure grid shows correctly
   in Elementor's responsive preview modes
   ============================================================ */
.elementor-editor-active .hte-timeline-steps {
  pointer-events: none; /* allow clicking through to panels */
}