/*---------------- SKELETON BLOG POST ----------------*/
.video-container {
    display: flex;
    justify-content: center;
}

iframe {
    aspect-ratio: 16 / 9;
    width: 100% !important;
    border-radius: 5px;
}
#post-content {
    font-size: 17px;
    transition: font-size 0.3s ease;
}

#post-title {
    font-size: 26px;
    transition: font-size 0.3s ease;
}

#post-subtitle {
    font-size: 17px;
    transition: font-size 0.3s ease;
}

/* Font / Width Tab Navigation Styles */
.font-size-tabs .nav-link,
.width-tabs .nav-link {
    cursor: pointer;
}

.font-size-tabs .nav-link:hover,
.width-tabs .nav-link:hover {
    background-color: #f5f5f5;
}

/* Make content container wider in wide mode */
#lstContentContainerTemplate.wide-mode {
    max-width: 100%;
}

#lstContentContainerTemplate.wide-mode .row {
    margin-left: 0;
    margin-right: 0;
}

/* Sticky sidebar (floating controls) */
#sidebar-sticky {
    position: sticky;
    top: 80px;
    background-color: #ffffff;
    border-radius: 5px;
    border: 1px solid rgba(128, 137, 150, 0.1);
    padding: 30px;
    margin-top: 0;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transform: translateY(20px);
    pointer-events: none;
    transition: max-height 0.3s ease, opacity 0.3s ease, transform 0.3s ease;
    z-index: 3;
}

#sidebar-sticky.is-visible {
    margin-top: 30px;
    max-height: 1000px;
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

@media (max-width: 992px) {
    #sidebar-sticky.is-visible{
        display: none;
    }
    .width-control {
        display: none;
    }
}

@media (min-width: 992px) {
    #post-layout-row .content-column,
    #post-layout-row .sidebar-column {
        flex: 0 0 100%;
        max-width: 100%;
    }

    /* Layout width control */
    #post-layout-row .content-column,
    #post-layout-row .sidebar-column {
        transition: flex-basis 0.3s ease, max-width 0.3s ease;
    }

    #post-layout-row.standard-layout .content-column {
        flex: 0 0 66.6667%;
        max-width: 66.6667%;
    }

    #post-layout-row.standard-layout .sidebar-column {
        flex: 0 0 33.3333%;
        max-width: 33.3333%;
    }

    #post-layout-row.wide-layout .content-column {
        flex: 0 0 75%;
        max-width: 75%;
    }

    #post-layout-row.wide-layout .sidebar-column {
        flex: 0 0 25%;
        max-width: 25%;
    }
}
#post-content ul {
    list-style-type: disc;
    padding-left: 20px;
    margin-top: 8px;
}

#post-content ul li,
#post-content li {
    margin-bottom: 6px;
}
#post-subtitle {
    color: #8a9099 !important;
}

:root {
    --loading-grey: #e5e7eb;
}

.skeleton {
    animation: loading 0.5s infinite ease-in-out;
    background: linear-gradient(
            100deg,
            rgba(255, 255, 255, 0) 40%,
            rgba(255, 255, 255, 0.5) 50%,
            rgba(255, 255, 255, 0) 60%
        )
        var(--loading-grey);
    background-size: 200% 100%;
    background-position-x: 180%;
    color: transparent !important;
    user-select: none;
    border-radius: 4px;
    border-color: transparent !important;
}

@keyframes loading {
    to {
        background-position-x: -20%;
    }
}

.skeleton-block-header {
    height: 250px;
}

.skeleton-block {
    display: block;
    width: 100%;
    border-radius: 6px;
}

.skeleton-text {
    height: 1em;
    margin-bottom: 0.5em;
}

.skeleton-text:last-child {
    margin-bottom: 0;
}

.skeleton-title {
    height: 1.5em;
    margin-bottom: 0.75em;
}

.skeleton-subtitle {
    height: 1.2em;
    margin-bottom: 0.75em;
}

.skeleton-avatar {
    border-radius: 50%;
}

.skeleton-badge {
    display: inline-block;
    height: 24px;
    width: 65px;
    border-radius: 12px;
    margin-right: 8px;
}

.skeleton-checkbox {
    width: 18px;
    height: 18px;
    border-radius: 3px;
    flex-shrink: 0;
}

.skeleton-paragraph .skeleton-text {
    background-color: var(--loading-grey);
    margin-bottom: 0.6em;
}

.skeleton-paragraph .skeleton-text:last-child {
    width: 85%;
}

.skeleton.w-100 {
    width: 100%;
}

.skeleton.w-90 {
    width: 90%;
}

.skeleton.w-75 {
    width: 75%;
}

.skeleton.w-50 {
    width: 50%;
}

.skeleton.w-25 {
    width: 25%;
}

.post-categories .skeleton-badge {
    margin-bottom: 0;
}

.tag-list li {
    display: inline-block;
    margin: 2px;
}

.social-profile li {
    display: inline-block;
    margin-right: 5px;
}

.recent-post-card {
    display: flex;
    align-items: center;
}

.sidebar-category .skeleton-item {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.sidebar-category .skeleton-item .skeleton-text {
    margin-bottom: 0;
}

.comment {
    display: flex;
    gap: 15px;
}

.comment-avatar {
    flex-shrink: 0;
}

.comment-body {
    flex-grow: 1;
}

.blog-card .card-img img {
    object-fit: cover;
    min-height: 300px;
}

.post__date,
.post__time {
    color: #5d646d;
}

.card-item-list .card-img {
    width: 90px;
    -webkit-flex: 0;
}

#lstNoDataContentTemplate {
    height: 80vh;
    padding: 80px 0px;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Media Query for Mobile/Tablet */
@media (max-width: 991.98px) {
    #lstDetailBlogArticleTemplate,
    #lstNoDataContentTemplate,
    #lstContentContainerTemplate {
        margin-top: 80px;
    }
    .skeleton-block-header {
        height: 150px;
    }
}                                 

.blog-card .card-title {
    margin-bottom: 15px;
}