/**
 * Zamseed Process Steps Widget
 *
 * @package Zamseed
 * @since 1.0.0
 */

/* ==========================================================================
   Wrapper
   ========================================================================== */

/* Own measure rather than a percentage width on the widget, so the section
   lands on the frame's 1200px container (Figma 11096:35668) at any parent
   width and keeps a gutter below 1240. */
.zs-process-steps {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 52px;
    width: min(var(--zs-container-max, 1200px), calc(100% - var(--zs-container-padding, 20px) * 2));
    margin-inline: auto;
}

/* ==========================================================================
   Header
   ========================================================================== */

.zs-process-steps__header {
    display: flex;
    flex-direction: column;
    align-items: var(--zs-header-items, center);
    gap: 16px;
    max-width: 740px;
    margin-left: var(--zs-header-margin-left, auto);
    margin-right: var(--zs-header-margin-right, auto);
    text-align: var(--zs-header-text-align, center);
    width: 100%;
}

.zs-process-steps__eyebrow {
    display: block;
    font-family: var(--zs-font-sans, 'Inter', sans-serif);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--zs-accent, #c48c33);
}

.zs-process-steps__title {
    margin: 0;
    /* 630 inside the 740 header, per Figma 11096:35673. The break after
       "stage" is a consequence of this measure, not a hard-coded <br>. */
    max-width: 630px;
    margin-inline: auto;
    font-family: var(--zs-font-serif, 'Cormorant Garamond', serif);
    /* Section heading role (--zs-heading / --zs-heading-lh) — already exact
       against Figma 11096:35673, and the breakpoint steps below are hand-tuned,
       so the literals stay rather than gain the role's fluid curve. */
    font-size: 48px;
    font-weight: 700;
    line-height: 1.083;
    color: var(--zs-primary, #2d5a27);
}

.zs-process-steps__description {
    margin: 0;
    font-family: var(--zs-font-sans, 'Inter', sans-serif);
    font-size: 18px;
    font-weight: 400;
    line-height: 1.6;
    color: var(--zs-muted, #555555);
}

/* ==========================================================================
   Steps Row
   ========================================================================== */

.zs-process-steps__row {
    display: flex;
    align-items: flex-start;
    gap: 0;
    width: 100%;
}

/* ==========================================================================
   Individual Step
   ========================================================================== */

.zs-process-steps__step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    flex: 1 0 0;
    min-width: 0;
    text-align: center;
}

.zs-process-steps__step-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    width: 100%;
    text-align: center;
}

.zs-process-steps__step-title {
    /* Now a real heading element (h3 under an h2 section title) rather than a
       <div>, so the browser's default heading margins have to be reset here to
       keep the 24px/14px step rhythm unchanged. */
    margin: 0 0 6px;
    font-family: var(--zs-font-serif, 'Cormorant Garamond', serif);
    font-size: 24px;
    font-weight: 700;
    line-height: 1;
    color: var(--zs-primary, #2d5a27);
}

.zs-process-steps__step-desc {
    margin: 0;
    font-family: var(--zs-font-sans, 'Inter', sans-serif);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.45;
    color: var(--zs-muted, #555555);
}

/* ==========================================================================
   Badge
   ========================================================================== */

.zs-process-steps__badge {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 26px;
    background-color: var(--zs-primary, #2d5a27);
}

.zs-process-steps__badge-ring {
    position: absolute;
    inset: -7px;
    border-radius: 33px;
    border: 1px solid rgba(45, 90, 39, 0.28);
    pointer-events: none;
}

.zs-process-steps__badge-number {
    font-family: var(--zs-font-sans, 'Inter', sans-serif);
    font-size: 16px;
    font-weight: 800;
    line-height: 1;
    color: #ffffff;
    text-align: center;
    white-space: nowrap;
}

/* ==========================================================================
   Connector
   ========================================================================== */

.zs-process-steps__connector {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding-top: 26px;
    flex: 0 0 70px;
    width: 70px;
}

.zs-process-steps__connector-line {
    position: relative;
    width: 100%;
    height: 2px;
    background-color: rgba(0, 0, 0, 0.08);
    transform-origin: left center;
}

.zs-process-steps__connector-arrow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: var(--zs-font-sans, 'Inter', sans-serif);
    font-size: 16px;
    font-weight: 800;
    line-height: 1;
    color: rgba(0, 0, 0, 0.28);
}

/* ==========================================================================
   Responsive
   ========================================================================== */

/* Breakpoints track Elementor's default tiers (tablet <= 1024, mobile <= 767)
   so these rules and the 12 responsive control values switch on the same
   pixel. The 768px block in particular flipped the connector axis one pixel
   before Elementor's mobile control values took effect. */
@media (max-width: 1024px) {
    .zs-process-steps__title {
        font-size: 36px;
    }
}

@media (max-width: 767px) {
    .zs-process-steps__title {
        font-size: 28px;
    }

    .zs-process-steps__row {
        flex-direction: column;
        align-items: center;
        gap: 40px;
    }

    .zs-process-steps__step {
        flex: unset;
        width: 100%;
        max-width: 320px;
    }

    .zs-process-steps__connector {
        flex: unset;
        width: 2px;
        height: 40px;
        padding-top: 0;
        align-items: center;
    }

    .zs-process-steps__connector-line {
        width: 2px;
        height: 100%;
        transform-origin: center top;
    }

    .zs-process-steps__connector-arrow {
        display: none;
    }
}

/* Empty state
   ------------------------------------------------------------------------
   Published only when the Empty State Message control is non-blank, so an
   empty step list reads as deliberate rather than collapsing to a gap.
   Matches the shared empty-state treatment used by the blog-grid, events,
   resources, faq and team widgets. */
.zs-process-steps__empty {
    margin: 0 auto;
    max-width: 640px;
    padding: 28px 24px;
    border: 1px dashed var(--zs-border, #e4e4e4);
    border-radius: 16px;
    background: var(--zs-surface-muted, #fdfcf9);
    text-align: center;
}

.zs-process-steps__empty p {
    margin: 0;
    font-family: var(--zs-font-sans, 'Inter', sans-serif);
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--zs-muted, #555555);
}

/* ==========================================================================
   Farming journey
   ------------------------------------------------------------------------
   One thin, gently waving path runs from each stage's circle to the next,
   ending in a notched arrowhead just short of the next ring. On first view an
   orange fill travels 01 -> 05; each circle swells with a soft glow and its
   title warms as the fill arrives. Afterwards only the orbit accent and a slow
   stage-by-stage emphasis remain. Everything is CSS on the step's own
   pseudo-elements, so no markup or script beyond the shared motion gate
   (widget-reveal.js: .zs-motion-started / .zs-motion-visible).
   ========================================================================== */
.zs-process-steps--journey {
    --zs-journey-step: 1100ms;
    --zs-journey-gap: 36px;        /* circle centre to path start: ring (27px) + clearance */
    --zs-journey-connector: 70px;  /* .zs-process-steps__connector flex-basis */
    --zs-journey-base: #d6e0d1;
    --zs-journey-accent: var(--zs-accent, #c48c33);
    --zs-journey-glint: rgba(255, 238, 205, 0.95);
}
.zs-process-steps--journey .zs-process-steps__step { position: relative; border-radius: 12px; }
.zs-process-steps--journey .zs-process-steps__step:focus-visible { outline: 2px solid var(--zs-primary); outline-offset: 10px; }
.zs-process-steps--journey .zs-process-steps__badge { transition: transform 180ms ease-out; }
.zs-process-steps--journey .zs-process-steps__step-title,
.zs-process-steps--journey .zs-process-steps__step-desc { transition: color 180ms ease-out; }
.zs-process-steps--journey .zs-process-steps__step:is(:hover, :focus-visible) .zs-process-steps__badge { transform: scale(1.07); }
.zs-process-steps.zs-process-steps--journey .zs-process-steps__step:is(:hover, :focus-visible) .zs-process-steps__step-title { color: #94651e; }
.zs-process-steps.zs-process-steps--journey .zs-process-steps__step:is(:hover, :focus-visible) .zs-process-steps__step-desc { color: var(--zs-primary); }
.zs-process-steps--journey .zs-process-steps__badge-ring::after {
    content: ''; position: absolute; top: -3px; left: calc(50% - 3px);
    width: 6px; height: 6px; border-radius: 50%; background: var(--zs-journey-accent); opacity: 0;
}

/* The path replaces the connector's line and text arrow; the connector box
   stays so the five columns keep their spacing. A browser without :has()
   cannot draw the path, so it keeps the original line instead. */
@supports selector(:has(+ *)) {
    .zs-process-steps--journey .zs-process-steps__connector-line { visibility: hidden; }
}

/* Only a step followed by a connector draws a path, so "Show connectors: No"
   still removes them all. ::before is the path, ::after the arrowhead. */
.zs-process-steps--journey .zs-process-steps__step:has(+ .zs-process-steps__connector)::before,
.zs-process-steps--journey .zs-process-steps__step:has(+ .zs-process-steps__connector)::after {
    content: '';
    position: absolute;
    pointer-events: none;
}
.zs-process-steps--journey .zs-process-steps__step:has(+ .zs-process-steps__connector)::after {
    background-color: var(--zs-journey-base);
}

@media (min-width: 768px) {
    .zs-process-steps--journey .zs-process-steps__step:has(+ .zs-process-steps__connector)::before {
        top: 13px;   /* 14px band centred on the 40px circle */
        left: calc(50% + var(--zs-journey-gap));
        width: calc(100% + var(--zs-journey-connector) - 2 * var(--zs-journey-gap) - 10px);
        height: 14px;
        background:
            linear-gradient(90deg, transparent, var(--zs-journey-glint), transparent) -28px 0 / 28px 100% no-repeat,
            linear-gradient(var(--zs-journey-accent), var(--zs-journey-accent)) 0 0 / 0% 100% no-repeat,
            var(--zs-journey-base);
        /* Three shallow waves, a cultivated furrow rather than a flourish,
           stretched to the gap as one shape so there are no tile seams. It
           starts and ends mid-line, where the arrowhead sits. */
        -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 168 14' preserveAspectRatio='none'%3E%3Cpath d='M0 7C9.3 2.6 18.7 2.6 28 7S46.7 11.4 56 7S74.7 2.6 84 7S102.7 11.4 112 7S130.7 2.6 140 7S158.7 11.4 168 7' fill='none' stroke='%23000' stroke-width='1.75'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 168 14' preserveAspectRatio='none'%3E%3Cpath d='M0 7C9.3 2.6 18.7 2.6 28 7S46.7 11.4 56 7S74.7 2.6 84 7S102.7 11.4 112 7S130.7 2.6 140 7S158.7 11.4 168 7' fill='none' stroke='%23000' stroke-width='1.75'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
    }
    .zs-process-steps--journey .zs-process-steps__step:has(+ .zs-process-steps__connector)::after {
        top: 15px;
        left: calc(150% + var(--zs-journey-connector) - var(--zs-journey-gap) - 11px);
        width: 9px;
        height: 10px;
        clip-path: polygon(0 0, 100% 50%, 0 100%, 30% 50%);
    }
}

@media (prefers-reduced-motion: no-preference) {
    .zs-process-steps--journey.zs-motion-started .zs-process-steps__step::before {
        animation: zs-journey-travel calc(var(--zs-journey-step) - 150ms) cubic-bezier(0.45, 0.05, 0.35, 1) calc(var(--zs-stage-index) * var(--zs-journey-step) + 150ms) both;
        animation-play-state: paused;
    }
    .zs-process-steps--journey.zs-motion-started .zs-process-steps__step::after {
        animation: zs-journey-tip 360ms ease-out calc((var(--zs-stage-index) + 1) * var(--zs-journey-step) - 160ms) both;
        animation-play-state: paused;
    }
    .zs-process-steps--journey.zs-motion-started .zs-process-steps__badge {
        animation: zs-journey-arrive 900ms ease-out calc(var(--zs-stage-index) * var(--zs-journey-step)) both,
                   zs-season-emphasis calc(var(--zs-stage-count, 5) * 5s) ease-in-out calc(var(--zs-stage-count, 5) * var(--zs-journey-step) + 2s + var(--zs-stage-index) * 5s) infinite;
        animation-play-state: paused;
    }
    /* backwards, not both: once it ends, hover and focus own the colour again. */
    .zs-process-steps--journey.zs-motion-started .zs-process-steps__step-title {
        animation: zs-journey-title 1400ms ease-out calc(var(--zs-stage-index) * var(--zs-journey-step)) backwards;
        animation-play-state: paused;
    }
    .zs-process-steps--journey.zs-motion-started .zs-process-steps__badge-ring {
        animation: zs-season-orbit 25s linear calc(4s + var(--zs-stage-index) * 5s) infinite;
        animation-play-state: paused;
    }
    .zs-process-steps--journey.zs-motion-started .zs-process-steps__badge-ring::after {
        animation: zs-season-accent 25s ease-in-out calc(4s + var(--zs-stage-index) * 5s) infinite;
        animation-play-state: paused;
    }
    .zs-process-steps--journey.zs-motion-visible .zs-process-steps__step::before,
    .zs-process-steps--journey.zs-motion-visible .zs-process-steps__step::after,
    .zs-process-steps--journey.zs-motion-visible .zs-process-steps__step-title,
    .zs-process-steps--journey.zs-motion-visible .zs-process-steps__badge,
    .zs-process-steps--journey.zs-motion-visible .zs-process-steps__badge-ring,
    .zs-process-steps--journey.zs-motion-visible .zs-process-steps__badge-ring::after { animation-play-state: running; }
    /* User focus takes precedence over the automatic emphasis. */
    /* Transform only, so the intro keeps its timing while the pointer rests on the row. */
    .zs-process-steps--journey .zs-process-steps__row:is(:hover, :focus-within) .zs-process-steps__badge { transform: none !important; }
    .zs-process-steps--journey .zs-process-steps__row .zs-process-steps__step:is(:hover, :focus-visible) .zs-process-steps__badge { transform: scale(1.07) !important; }
}
@keyframes zs-journey-travel {
    from {
        background-size: 28px 100%, 0% 100%, 100% 100%;
        background-position: -28px 0, 0 0, 0 0;
    }
    to {
        background-size: 28px 100%, 100% 100%, 100% 100%;
        background-position: calc(100% + 28px) 0, 0 0, 0 0;
    }
}
@keyframes zs-journey-tip {
    from { background-color: var(--zs-journey-base); transform: translateX(-2px); }
    to { background-color: var(--zs-journey-accent); transform: none; }
}
@keyframes zs-journey-arrive {
    0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(196, 140, 51, 0); }
    35% { transform: scale(1.12); box-shadow: 0 0 0 0 rgba(196, 140, 51, 0.45); }
    100% { transform: scale(1); box-shadow: 0 0 0 12px rgba(196, 140, 51, 0); }
}
/* Only the peak is stated, so the start and end are the title's own (Elementor) colour. */
@keyframes zs-journey-title { 30% { color: #94651e; } }
@keyframes zs-season-emphasis {
    0%, 20%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(196, 140, 51, 0); }
    5%, 15% { transform: scale(1.06); box-shadow: 0 0 0 5px rgba(196, 140, 51, 0.14); }
}
@keyframes zs-season-orbit { to { transform: rotate(360deg); } }
@keyframes zs-season-accent { 0%, 20%, 100% { opacity: 0; } 5%, 15% { opacity: 0.9; } }

/* Mobile: a vertical timeline. Circles in a 48px rail, text beside them, and
   a straight path down the rail to the next circle. */
@media (max-width: 767px) {
    .elementor .e-con.e-parent:has(> .e-con-inner > .elementor-widget-zamseed-process-steps) { padding: 56px 20px; }
    .elementor .e-con.e-parent > .e-con-inner:has(> .elementor-widget-zamseed-process-steps) { padding-block: 0; }
    .elementor .elementor-element.elementor-widget .zs-process-steps.zs-process-steps--journey { width: 100%; gap: 32px; }
    .elementor .elementor-element.elementor-widget .zs-process-steps.zs-process-steps--journey .zs-process-steps__title { font-size: 30px; }
    .zs-process-steps--journey .zs-process-steps__row { align-items: stretch; gap: 24px; }
    .elementor .elementor-element.elementor-widget .zs-process-steps--journey .zs-process-steps__step {
        display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 16px;
        align-items: start; max-width: none; min-height: 72px; text-align: left;
    }
    .elementor .elementor-element.elementor-widget .zs-process-steps--journey .zs-process-steps__badge { justify-self: center; margin-top: 7px; z-index: 1; }
    .elementor .elementor-element.elementor-widget .zs-process-steps--journey .zs-process-steps__step-text { align-items: flex-start; text-align: left; gap: 6px; }
    .zs-process-steps--journey .zs-process-steps__step-title { margin: 0; font-size: 23px; }
    .zs-process-steps--journey .zs-process-steps__connector { display: none; }

    /* Circle centre is (24px, 27px); its ring reaches 54px down. The next ring
       starts 24px (the row gap) below this step, so the path stops 14px past
       the step and the arrowhead fills 14-22px, clear of that ring. */
    .zs-process-steps--journey .zs-process-steps__step:has(+ .zs-process-steps__connector)::before {
        left: 23px;
        top: 62px;
        bottom: -14px;
        width: 2px;
        border-radius: 1px;
        background:
            linear-gradient(180deg, transparent, var(--zs-journey-glint), transparent) 0 -28px / 100% 28px no-repeat,
            linear-gradient(var(--zs-journey-accent), var(--zs-journey-accent)) 0 0 / 100% 0% no-repeat,
            var(--zs-journey-base);
    }
    .zs-process-steps--journey .zs-process-steps__step:has(+ .zs-process-steps__connector)::after {
        left: 19px;
        bottom: -22px;
        width: 10px;
        height: 8px;
        clip-path: polygon(0 0, 50% 30%, 100% 0, 50% 100%);
    }
    @media (prefers-reduced-motion: no-preference) {
        .zs-process-steps--journey.zs-motion-started .zs-process-steps__step::before { animation-name: zs-journey-travel-down; }
        .zs-process-steps--journey.zs-motion-started .zs-process-steps__step::after { animation-name: zs-journey-tip-down; }
    }
}
@keyframes zs-journey-travel-down {
    from {
        background-size: 100% 28px, 100% 0%, 100% 100%;
        background-position: 0 -28px, 0 0, 0 0;
    }
    to {
        background-size: 100% 28px, 100% 100%, 100% 100%;
        background-position: 0 calc(100% + 28px), 0 0, 0 0;
    }
}
@keyframes zs-journey-tip-down {
    from { background-color: var(--zs-journey-base); transform: translateY(-2px); }
    to { background-color: var(--zs-journey-accent); transform: none; }
}

/* Reduced motion: the finished journey, still. */
@media (prefers-reduced-motion: reduce) {
    .zs-process-steps--journey .zs-process-steps__badge { transform: none !important; }
    .zs-process-steps--journey .zs-process-steps__step:has(+ .zs-process-steps__connector)::before { background-size: 0 0, 100% 100%, 100% 100%; }
    .zs-process-steps--journey .zs-process-steps__step:has(+ .zs-process-steps__connector)::after { background-color: var(--zs-journey-accent); }
}