.page-template-simple-flex .sf-timeline-title {
    color: #a7d04e;
}

.page-template-simple-flex .module-timeline .sf-content,
.page-template-simple-flex .module-timeline .sf-content p,
.page-template-simple-flex .module-timeline .sf-content h2,
.page-template-simple-flex .module-timeline .sf-content h3 {
    color: #ffffff;
}

.page-template-simple-flex .sf-timeline {
    position: relative;
    padding: 20px 0;
}

.page-template-simple-flex .sf-timeline:not(.is-horizontal):before {
    content: '';
    position: absolute;
    top: 65px;
    bottom: var(--sf-timeline-line-bottom, 45px);
    left: 50%;
    transform: translateX(-50%);
    width: 3px;
    background: #a7d04e;
}

.page-template-simple-flex .sf-timeline-item {
    width: 50%;
    position: relative;
    margin-bottom: -20px;
    box-sizing: border-box;
}

.page-template-simple-flex .sf-timeline-item.is-left {
    left: 0;
    padding-right: 35px;
}

.page-template-simple-flex .sf-timeline-item.is-right {
    left: 50%;
    padding-left: 35px;
}

.page-template-simple-flex .sf-timeline-dot {
    position: absolute;
    top: 30px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #ffffff;
    border: 6px solid #a7d04e;
    box-sizing: border-box;
    z-index: 2;
}

.page-template-simple-flex .sf-timeline-item.is-left .sf-timeline-dot {
    right: -15px;
}

.page-template-simple-flex .sf-timeline-item.is-right .sf-timeline-dot {
    left: -15px;
}

.page-template-simple-flex .sf-timeline-card {
    background: rgba(33, 167, 173, 0.3);
    border-radius: 14px;
    padding: 24px;
    position: relative;
}

.page-template-simple-flex .sf-timeline-card h4 {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 5px;
    padding-top: 0;
}

.page-template-simple-flex .sf-timeline-card:before {
    content: '';
    position: absolute;
    top: 43px;
    width: 35px;
    height: 3px;
    background: #a7d04e;
    z-index: 0;
}

.page-template-simple-flex .sf-timeline-item.is-left .sf-timeline-card:before {
    right: -35px;
}

.page-template-simple-flex .sf-timeline-item.is-right .sf-timeline-card:before {
    left: -35px;
}

.page-template-simple-flex .sf-progress-meta {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    margin: 16px 0 8px;
}

.page-template-simple-flex .sf-progress-bar {
    background: rgba(33, 167, 173, 0.8);
    height: 12px;
    border-radius: 999px;
    overflow: hidden;
}

.page-template-simple-flex .sf-progress-bar span {
    display: block;
    height: 100%;
    background: rgba(167, 208, 78, 0.8);
}

/* ------------------------------------------------------------------
   Horizontal (side scrolling) orientation
   Line and dots run along the top, cards hang below.
   ------------------------------------------------------------------ */

.page-template-simple-flex .sf-timeline.is-horizontal {
    --sf-tl-card-w: 320px;
    --sf-tl-gap: 30px;
    --sf-tl-dot-size: 30px;
    --sf-tl-dot-left: 24px;
    --sf-tl-card-top: 45px;
    --sf-tl-arrow-size: 44px;
    --sf-tl-arrow-gap: 10px;
    --sf-tl-scrollbar-space: 18px;
    display: flex;
    align-items: center;
}

.page-template-simple-flex .sf-timeline.is-horizontal .sf-timeline-scroller {
    flex: 1 1 auto;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    padding-bottom: var(--sf-tl-scrollbar-space);
    cursor: grab;
    scrollbar-width: thin;
    scrollbar-color: #a7d04e rgba(33, 167, 173, 0.35);
}

.page-template-simple-flex .sf-timeline.is-horizontal .sf-timeline-scroller::-webkit-scrollbar {
    height: 8px;
}

.page-template-simple-flex .sf-timeline.is-horizontal .sf-timeline-scroller::-webkit-scrollbar-track {
    background: rgba(33, 167, 173, 0.35);
    border-radius: 999px;
}

.page-template-simple-flex .sf-timeline.is-horizontal .sf-timeline-scroller::-webkit-scrollbar-thumb {
    background: #a7d04e;
    border-radius: 999px;
}

.page-template-simple-flex .sf-timeline.is-horizontal .sf-timeline-scroller:focus-visible {
    outline: 2px solid #a7d04e;
    outline-offset: 4px;
}

.page-template-simple-flex .sf-timeline.is-horizontal .sf-timeline-scroller.is-dragging {
    cursor: grabbing;
    scroll-snap-type: none;
    scroll-behavior: auto;
    user-select: none;
}

.page-template-simple-flex .sf-timeline.is-horizontal .sf-timeline-scroller.is-dragging * {
    pointer-events: none;
}

.page-template-simple-flex .sf-timeline.is-horizontal .sf-timeline-track {
    display: flex;
    align-items: stretch;
    gap: var(--sf-tl-gap);
    position: relative;
    width: max-content;
    min-width: 100%;
}

.page-template-simple-flex .sf-timeline.is-horizontal .sf-timeline-track:before {
    content: '';
    position: absolute;
    top: calc((var(--sf-tl-dot-size) / 2) - 1.5px);
    left: var(--sf-timeline-line-left, calc(var(--sf-tl-dot-left) + (var(--sf-tl-dot-size) / 2)));
    right: var(--sf-timeline-line-right, 0px);
    height: 3px;
    background: #a7d04e;
    z-index: 0;
}

.page-template-simple-flex .sf-timeline.is-horizontal .sf-timeline-item {
    flex: 0 0 var(--sf-tl-card-w);
    width: auto;
    left: auto;
    margin-bottom: 0;
    padding: var(--sf-tl-card-top) 0 0;
    position: relative;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    scroll-snap-align: start;
}

.page-template-simple-flex .sf-timeline.is-horizontal .sf-timeline-dot {
    top: 0;
    left: var(--sf-tl-dot-left);
    right: auto;
}

.page-template-simple-flex .sf-timeline.is-horizontal .sf-timeline-card {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    overflow-wrap: break-word;
}

.page-template-simple-flex .sf-timeline.is-horizontal .sf-timeline-card:before {
    content: '';
    position: absolute;
    /* top must be reset or the vertical rule's top:43px over-constrains bottom */
    top: auto;
    left: calc(var(--sf-tl-dot-left) + (var(--sf-tl-dot-size) / 2) - 1.5px);
    right: auto;
    bottom: 100%;
    width: 3px;
    height: calc(var(--sf-tl-card-top) - var(--sf-tl-dot-size));
    background: #a7d04e;
    z-index: 0;
}

.page-template-simple-flex .sf-timeline.is-horizontal .sf-progress-meta {
    margin-top: auto;
}

/* Arrows are flex siblings of the scroller, never overlaying it. On wide
   screens negative margins pull them into the gutter outside .inner so the
   scroller keeps the full content width; below that they collapse back into
   the row and the scroller gives up the space instead. */
.page-template-simple-flex .sf-timeline.is-horizontal .sf-timeline-arrow {
    display: none;
    flex: 0 0 var(--sf-tl-arrow-size);
    width: var(--sf-tl-arrow-size);
    height: var(--sf-tl-arrow-size);
    /* Sit on the cards' centre line. The scrollbar's real height varies by
       platform, so the exact offset is measured in timeline.js and published as
       --sf-tl-arrow-offset; the fallback covers the pre-script frame. */
    align-self: flex-start;
    margin-top: var(--sf-tl-arrow-offset, calc(var(--sf-tl-card-top) + 55px));
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #a7d04e;
    color: #0e4252;
    cursor: pointer;
    z-index: 4;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 10px rgba(14, 66, 82, 0.35);
}

.page-template-simple-flex .sf-timeline.is-horizontal .sf-timeline-arrow svg {
    width: 50%;
    height: 50%;
    display: block;
}

.page-template-simple-flex .sf-timeline.is-horizontal .sf-timeline-arrow.is-prev {
    margin-right: var(--sf-tl-arrow-gap);
}

.page-template-simple-flex .sf-timeline.is-horizontal .sf-timeline-arrow.is-next {
    margin-left: var(--sf-tl-arrow-gap);
}

.page-template-simple-flex .sf-timeline.is-horizontal .sf-timeline-arrow[disabled] {
    opacity: 0.3;
    cursor: default;
    pointer-events: none;
}

.page-template-simple-flex .sf-timeline.is-horizontal.is-enhanced .sf-timeline-arrow {
    display: flex;
}

/* .inner is 1150px + 40px padding = 1190px, so the gutter either side is
   (100vw - 1190px) / 2 + 20px. At 1280px that is 65px, enough for a 44px
   arrow plus its 10px gap. */
@media screen and (min-width: 1280px) {
    .page-template-simple-flex .sf-timeline.is-horizontal .sf-timeline-arrow.is-prev {
        margin-left: calc(-1 * (var(--sf-tl-arrow-size) + var(--sf-tl-arrow-gap)));
    }

    .page-template-simple-flex .sf-timeline.is-horizontal .sf-timeline-arrow.is-next {
        margin-right: calc(-1 * (var(--sf-tl-arrow-size) + var(--sf-tl-arrow-gap)));
    }
}

@media (prefers-reduced-motion: reduce) {
    .page-template-simple-flex .sf-timeline.is-horizontal .sf-timeline-scroller {
        scroll-behavior: auto;
    }
}

@media screen and (max-width: 900px) {
    .page-template-simple-flex .sf-timeline:not(.is-horizontal):before {
        left: 20px;
        transform: none;
    }

    /* Left unscoped on purpose: adding :not(.is-horizontal) here would raise
       specificity above .is-left and steal its padding-right. The horizontal
       rules above already outrank these selectors. */
    .page-template-simple-flex .sf-timeline-item,
    .page-template-simple-flex .sf-timeline-item.is-right {
        width: 100%;
        left: 0;
        padding-left: 60px;
        padding-right: 0;
        margin-bottom: 20px;
        box-sizing: border-box;
    }

    .page-template-simple-flex .sf-timeline-dot,
    .page-template-simple-flex .sf-timeline-item.is-left .sf-timeline-dot,
    .page-template-simple-flex .sf-timeline-item.is-right .sf-timeline-dot {
        left: 5px;
        right: auto;
    }

    .page-template-simple-flex .sf-timeline-card:before,
    .page-template-simple-flex .sf-timeline-item.is-left .sf-timeline-card:before,
    .page-template-simple-flex .sf-timeline-item.is-right .sf-timeline-card:before {
        left: -40px;
        right: auto;
    }

    /* Below 900px the arrows drop onto their own row underneath, so the
       scroller gets the full width of .inner and shows exactly one card at a
       time. --sf-tl-card-measured is published by timeline.js from the
       scroller's real width; the calc() is the pre-script fallback. */
    .page-template-simple-flex .sf-timeline.is-horizontal {
        --sf-tl-arrow-size: 40px;
        --sf-tl-arrow-gap: 8px;
        --sf-tl-gap: 20px;
        --sf-tl-card-w: var(--sf-tl-card-measured, calc(100vw - 40px));
        flex-wrap: wrap;
        justify-content: center;
    }

    .page-template-simple-flex .sf-timeline.is-horizontal .sf-timeline-scroller {
        flex: 0 0 100%;
        order: 1;
        scroll-snap-type: x mandatory;
    }

    .page-template-simple-flex .sf-timeline.is-horizontal .sf-timeline-arrow {
        order: 2;
        align-self: auto;
        margin-top: 6px;
    }
}