.-single-post-content.yc-pfl {
    --pfl-line:var(--uicolor2);
    --pfl-dot:var(--danger-color);
    --pfl-surface: #ffffff;
    --pfl-radius:28px;
    --pfl-border-size:4px;
}

.yc-pfl-it {
    position:relative;
    min-width:0;
    margin:0;
    padding:26px 32px 30px;
    border-block-end:var(--pfl-border-size) dashed var(--pfl-line);
}

.yc-pfl-it + .yc-pfl-it {
    margin-top:calc(var(--pfl-border-size) * -1);
}

.yc-pfl-it.is-r {
    margin-inline:28px;
    border-inline-start:var(--pfl-border-size) dashed var(--pfl-line);
    border-end-start-radius:var(--pfl-radius);
}

.yc-pfl-it.is-l {
    margin-inline:28px;
    border-inline-end:var(--pfl-border-size) dashed var(--pfl-line);
    border-end-end-radius:var(--pfl-radius);
}

.yc-pfl-it.is-r.is-join {
    border-start-start-radius:var(--pfl-radius);
}

.yc-pfl-it.is-l.is-join {
    border-start-end-radius:var(--pfl-radius);
}

.yc-pfl-it.is-join {
    z-index:1;
}


/* =========================
   Timeline Line Connections
========================= */

.yc-pfl-it.to-r::after,
.yc-pfl-it.to-l::after {
    content:"";
    position:absolute;
    bottom:calc(var(--pfl-border-size) * -1);
    width:32px;
    height:calc(var(--pfl-border-size) * 2);
    pointer-events:none;
}

.yc-pfl-it.to-r::after {
    inset-inline-start:-1px;
    background:linear-gradient(
        to inline-start,
        var(--pfl-surface) 15px,
        transparent 15px
    );
}

.yc-pfl-it.to-l::after {
    inset-inline-end:-1px;
    background:linear-gradient(
        to inline-end,
        var(--pfl-surface) 15px,
        transparent 15px
    );
}


/* Fallback for browsers without logical gradient directions */
@supports not (background:linear-gradient(to inline-start,#fff,transparent)) {
    html[dir="rtl"] .yc-pfl-it.to-r::after,
    html:not([dir="ltr"]) .yc-pfl-it.to-r::after {
        background: linear-gradient(270deg, #ffffff 15px, transparent 15px);
    }

    html[dir="ltr"] .yc-pfl-it.to-r::after {
        background:linear-gradient(
            90deg,
            var(--pfl-surface) 15px,
            transparent 15px
        );
    }

    html[dir="rtl"] .yc-pfl-it.to-l::after,
    html:not([dir="ltr"]) .yc-pfl-it.to-l::after {
        background:linear-gradient(
            90deg,
            var(--pfl-surface) 15px,
            transparent 15px
        );
    }

    html[dir="ltr"] .yc-pfl-it.to-l::after {
        background:linear-gradient(
            270deg,
            var(--pfl-surface) 15px,
            transparent 15px
        );
    }
}


/* =========================
   Timeline Point
========================= */

.yc-pfl-it::before {
    content:"";
    position:absolute;
    top:31px;
    width:18px;
    height:18px;
    border-radius:50%;
    background:var(--pfl-dot);
    box-shadow:0 0 0 5px var(--pfl-surface);
    pointer-events:none;
    z-index:2;
}

.yc-pfl-it.is-r::before {
    inset-inline-start:13px;
}

.yc-pfl-it.is-l::before {
    inset-inline-end:13px;
}


/* =========================
   Timeline Content
========================= */

.yc-pfl-it > h2:first-child,
.yc-pfl-it > h3:first-child,
.yc-pfl-it > h4:first-child {
    margin:0 0 12px;
    color:var(--primary-text);
    font-weight:800;
    line-height:1.5;
    overflow-wrap:anywhere;
}

.yc-pfl-it.is-r > h2:first-child,
.yc-pfl-it.is-r > h3:first-child,
.yc-pfl-it.is-r > h4:first-child {
    padding-inline-start:34px;
}

.yc-pfl-it.is-l > h2:first-child,
.yc-pfl-it.is-l > h3:first-child,
.yc-pfl-it.is-l > h4:first-child {
    padding-inline-end:34px;
}

.yc-pfl-it > p,
.yc-pfl-it > ul,
.yc-pfl-it > ol,
.yc-pfl-it > blockquote,
.yc-pfl-it > figure,
.yc-pfl-it > table {
    margin:0 0 14px;
}

.yc-pfl-it > p,
.yc-pfl-it > li,
.yc-pfl-it blockquote {
    overflow-wrap:anywhere;
}

.yc-pfl-it > ul,
.yc-pfl-it > ol {
    padding-inline-start:22px;
}

.yc-pfl-it img,
.yc-pfl-it video,
.yc-pfl-it iframe {
    display:block;
    max-width:100%;
    height:auto;
}

.yc-pfl-it iframe {
    width:100%;
}

.yc-pfl-it figure {
    max-width:100%;
}

.yc-pfl-it table {
    width:100%;
    min-width:600px;
    border-collapse:collapse;
}

.yc-pfl-it > .table-responsive,
.yc-pfl-it > .wp-block-table {
    max-width:100%;
    overflow-x:auto;
    overscroll-behavior-inline:contain;
    -webkit-overflow-scrolling:touch;
}

.yc-pfl-it > :last-child {
    margin-bottom:0;
}

.-single-post-content > .yc-shortcode--box,
.-single-post-content > .yc-shode-box {
    width:100%;
    min-width:0;
    margin:30px 0;
}

.-single-post-content > .yc-shortcode--box:first-child,
.-single-post-content > .yc-shode-box:first-child {
    margin-top:0;
}

.-single-post-content > .yc-shortcode--box:last-child,
.-single-post-content > .yc-shode-box:last-child {
    margin-bottom:0;
}


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

@media only screen and (max-width:991px) {
    .-single-post-content.yc-pfl {
        --pfl-radius:24px;
    }

    .yc-pfl-it {
        padding:24px 27px 27px;
    }

    .yc-pfl-it.is-r,
    .yc-pfl-it.is-l {
        margin-inline:20px;
    }

    .yc-pfl-it::before {
        top:29px;
        width:16px;
        height:16px;
        box-shadow:0 0 0 4px var(--pfl-surface);
    }

    .yc-pfl-it.is-r::before {
        inset-inline-start:11px;
    }

    .yc-pfl-it.is-l::before {
        inset-inline-end:11px;
    }

    .yc-pfl-it.is-r > h2:first-child,
    .yc-pfl-it.is-r > h3:first-child,
    .yc-pfl-it.is-r > h4:first-child {
        padding-inline-start:29px;
    }

    .yc-pfl-it.is-l > h2:first-child,
    .yc-pfl-it.is-l > h3:first-child,
    .yc-pfl-it.is-l > h4:first-child {
        padding-inline-end:29px;
    }
}


/* =========================
   Mobile Timeline Experience
========================= */

@media only screen and (max-width:720px) {
    .-single-post-content.yc-pfl {
        --pfl-border-size:3px;
    }

    .yc-pfl-it,
    .yc-pfl-it.is-r,
    .yc-pfl-it.is-l {
        margin:0;
        padding:20px 18px 22px;
        border:0;
        border-inline-start:
            var(--pfl-border-size) dashed
            var(--pfl-line);
        border-radius:0;
    }

    .yc-pfl-it + .yc-pfl-it {
        margin-top:0;
    }

    .yc-pfl-it.is-r.is-join,
    .yc-pfl-it.is-l.is-join {
        border-radius:0;
    }

    .yc-pfl-it.to-r::after,
    .yc-pfl-it.to-l::after {
        display:none;
    }

    .yc-pfl-it::before,
    .yc-pfl-it.is-r::before,
    .yc-pfl-it.is-l::before {
        top:25px;
        inset-inline-start:-8px;
        inset-inline-end:auto;
        width:14px;
        height:14px;
        box-shadow:0 0 0 4px var(--pfl-surface);
    }

    .yc-pfl-it > h2:first-child,
    .yc-pfl-it > h3:first-child,
    .yc-pfl-it > h4:first-child,
    .yc-pfl-it.is-r > h2:first-child,
    .yc-pfl-it.is-r > h3:first-child,
    .yc-pfl-it.is-r > h4:first-child,
    .yc-pfl-it.is-l > h2:first-child,
    .yc-pfl-it.is-l > h3:first-child,
    .yc-pfl-it.is-l > h4:first-child {
        padding-inline-start:16px;
        padding-inline-end:0;
    }

    .yc-pfl-it > h2:first-child {
        font-size:20px;
    }

    .yc-pfl-it > h3:first-child {
        font-size:18px;
    }

    .yc-pfl-it > h4:first-child {
        font-size:16px;
    }

    .yc-pfl-it > p,
    .yc-pfl-it > ul,
    .yc-pfl-it > ol,
    .yc-pfl-it > blockquote,
    .yc-pfl-it > figure,
    .yc-pfl-it > table {
        margin-bottom:12px;
    }

    .-single-post-content > .yc-shortcode--box,
    .-single-post-content > .yc-shode-box {
        margin-block:22px;
    }
}


/* =========================
   Small Mobile Adjustments
========================= */

@media only screen and (max-width:390px) {
    .yc-pfl-it,
    .yc-pfl-it.is-r,
    .yc-pfl-it.is-l {
        padding:18px 14px 20px;
    }

    .yc-pfl-it::before,
    .yc-pfl-it.is-r::before,
    .yc-pfl-it.is-l::before {
        top:23px;
        inset-inline-start:-7px;
        width:12px;
        height:12px;
        box-shadow:0 0 0 3px var(--pfl-surface);
    }

    .yc-pfl-it > h2:first-child,
    .yc-pfl-it > h3:first-child,
    .yc-pfl-it > h4:first-child,
    .yc-pfl-it.is-r > h2:first-child,
    .yc-pfl-it.is-r > h3:first-child,
    .yc-pfl-it.is-r > h4:first-child,
    .yc-pfl-it.is-l > h2:first-child,
    .yc-pfl-it.is-l > h3:first-child,
    .yc-pfl-it.is-l > h4:first-child {
        padding-inline-start:13px;
    }

    .yc-pfl-it > h2:first-child {
        font-size:18px;
    }

    .yc-pfl-it > h3:first-child {
        font-size:17px;
    }

    .yc-pfl-it > h4:first-child {
        font-size:15px;
    }
}

@media only screen and (max-width:340px) {
    .yc-pfl-it,
    .yc-pfl-it.is-r,
    .yc-pfl-it.is-l {
        padding-inline:12px;
    }

    .yc-pfl-it > h2:first-child,
    .yc-pfl-it > h3:first-child,
    .yc-pfl-it > h4:first-child,
    .yc-pfl-it.is-r > h2:first-child,
    .yc-pfl-it.is-r > h3:first-child,
    .yc-pfl-it.is-r > h4:first-child,
    .yc-pfl-it.is-l > h2:first-child,
    .yc-pfl-it.is-l > h3:first-child,
    .yc-pfl-it.is-l > h4:first-child {
        padding-inline-start:11px;
    }
}