/* =========================================================
   CREATICS Flow Menu — frontend.css
   ========================================================= */

/* --- Wrap: sticky base ----------------------------------- */
.cflow-menu-wrap {
    width: 100%;
    position: sticky;
    top: 0;
    z-index: 9990;
    background: var(--cflow-bg, #ffffff);
    border-top: 1px solid rgba(61, 76, 143, 0.18);
    border-bottom: 1px solid rgba(61, 76, 143, 0.18);
    box-sizing: border-box;
}

/* --- WP Admin Bar offset (32px desktop, 46px mobile) ----- */
.admin-bar .cflow-menu-wrap {
    top: 32px;
}

@media screen and (max-width: 782px) {
    .admin-bar .cflow-menu-wrap {
        top: 46px;
    }
}

/* --- Fixed-mode clone (JS fallback) ---------------------- */
.cflow-menu-wrap.cflow-fixed {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    box-shadow: 0 2px 12px rgba(61, 76, 143, 0.13);
    animation: cflowSlideDown 0.25s ease-out;
}

.admin-bar .cflow-menu-wrap.cflow-fixed {
    top: 32px !important;
}

@media screen and (max-width: 782px) {
    .admin-bar .cflow-menu-wrap.cflow-fixed {
        top: 46px !important;
    }
}

/* Placeholder that keeps layout height when clone is fixed */
.cflow-menu-placeholder {
    display: block;
    width: 100%;
    visibility: hidden;
    pointer-events: none;
}

@keyframes cflowSlideDown {
    from { transform: translateY(-100%); opacity: 0; }
    to   { transform: translateY(0);     opacity: 1; }
}

/* --- Elementor overflow fix ------------------------------ *
 * Elementor containers (.e-con) often use overflow:hidden,
 * which breaks position:sticky. We force overflow:visible
 * on all ancestors of the menu, scoped to Elementor.       */
.elementor-widget-cflow_menu,
.elementor-element:has(.cflow-menu-wrap),
.e-con:has(.cflow-menu-wrap),
.e-con-inner:has(.cflow-menu-wrap) {
    overflow: visible !important;
}

/* --- Inner ------------------------------------------------ */
.cflow-menu-inner {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 14px 24px;
    box-sizing: border-box;
}

/* --- Nav (flex layout) ----------------------------------- */
.cflow-menu {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 14px 16px;
    font-family: inherit;
    font-size: var(--cflow-font-size, 14px);
    line-height: 1.5;
    text-align: center;
    box-sizing: border-box;
}

/* --- Nodes ----------------------------------------------- */
.cflow-menu-node {
    display: inline-flex;
    align-items: center;
    gap: 16px;
}

.cflow-menu-node:last-child {
    gap: 0;
}

/* --- Links ----------------------------------------------- */
.cflow-menu-link {
    color: #3D4C8F;
    text-decoration: none;
    padding: 6px 0;
    font-size: inherit;
    line-height: inherit;
    font-weight: 500;
    border-bottom: 2px solid transparent;
    transition: color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
}

.cflow-menu-link:hover,
.cflow-menu-link:focus-visible {
    color: #D9006C;
    border-bottom-color: #00F5D4;
    outline: none;
}

/* --- State: upcoming ------------------------------------- */
.cflow-menu-link.is-upcoming {
    color: #3D4C8F;
    border-bottom-color: transparent;
}

/* --- State: complete ------------------------------------- */
.cflow-menu-link.is-complete {
    color: rgba(217, 0, 108, 0.72);
    border-bottom-color: rgba(0, 245, 212, 0.55);
}

/* --- State: current -------------------------------------- */
.cflow-menu-link.is-current,
.cflow-menu-link[aria-current="step"] {
    color: #D9006C;
    font-weight: 700;
    border-bottom-color: #00F5D4;
}

/* --- Separator ------------------------------------------- */
.cflow-menu-sep {
    color: #00F5D4;
    font-weight: 700;
    opacity: 0.95;
    user-select: none;
}

/* --- Empty state (editor) -------------------------------- */
.cflow-menu-empty {
    color: #3D4C8F;
    opacity: 0.8;
}

/* --- Anchor ---------------------------------------------- */
.cflow-anchor {
    display: block;
    width: 100%;
    height: 1px;
    margin: 0;
    padding: 0;
    position: relative;
    visibility: hidden;
    pointer-events: none;
}

/* --- Editor badge ---------------------------------------- */
.cflow-editor-anchor-badge {
    margin: 8px 0;
    padding: 8px 10px;
    background: #F0F4FF;
    border: 1px dashed rgba(61, 76, 143, 0.22);
    color: #3D4C8F;
    font-size: 12px;
    line-height: 1.4;
}

.cflow-editor-anchor-badge strong {
    color: #D9006C;
    font-weight: 700;
}

/* --- Mobile ---------------------------------------------- */
@media (max-width: 767px) {
    .cflow-menu-inner {
        padding: 10px 16px;
    }

    .cflow-menu {
        gap: 10px 12px;
    }

    .cflow-menu-node {
        gap: 12px;
    }
}