/*******************************************************************************
  File Name: root/assets/css/post-meta.css
  Purpose:   Author / Date / Reading Time / Category Meta Bar
*******************************************************************************/

/* =====================================================
   POST META BAR
===================================================== */

.post-meta-bar {

    display: flex;

    flex-wrap: wrap;

    align-items: center;

    gap: 12px;

    padding: 16px 0;

    margin-bottom: 30px;

    border-bottom: 1px solid #ececec;

    font-size: 15px;

    color: #6c757d;

}

/* =====================================================
   META ITEM
===================================================== */

.post-meta-item {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    color: #6c757d;

    font-weight: 500;

}

/* =====================================================
   META ICON
===================================================== */

.post-meta-item i {

    font-size: 15px;

    color: #0d6efd;

}

/* =====================================================
   META LINKS
===================================================== */

.post-meta-item a {

    color: inherit;

    text-decoration: none;

    transition: color .25s ease;

}

.post-meta-item a:hover {

    color: #0d6efd;

}

/* =====================================================
   DIVIDER
===================================================== */

.post-meta-divider {

    color: #ced4da;

    font-weight: 300;

}

/* =====================================================
   CATEGORY BADGE
===================================================== */

.post-category {

    display: inline-flex;

    align-items: center;

    padding: 5px 12px;

    background: #f8f9fa;

    border: 1px solid #e9ecef;

    color: #495057;

    font-size: 13px;

    font-weight: 600;

    text-transform: uppercase;

    letter-spacing: .5px;

}

/* =====================================================
   TAGS
===================================================== */

.post-tags {

    display: flex;

    flex-wrap: wrap;

    gap: 8px;

    margin-top: 20px;

}

.post-tag {

    display: inline-block;

    padding: 6px 12px;

    background: #f8f9fa;

    border: 1px solid #ececec;

    color: #495057;

    font-size: 13px;

    text-decoration: none;

    transition: all .25s ease;

}

.post-tag:hover {

    background: #0d6efd;

    border-color: #0d6efd;

    color: #ffffff;

}

/* =====================================================
   SHARE BAR
===================================================== */

.post-share {

    display: flex;

    align-items: center;

    gap: 10px;

    margin-top: 25px;

}

.post-share-label {

    font-weight: 600;

    color: #495057;

}

.post-share a {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 38px;

    height: 38px;

    border: 1px solid #ececec;

    background: #ffffff;

    color: #495057;

    transition: all .25s ease;

}

.post-share a:hover {

    background: #0d6efd;

    border-color: #0d6efd;

    color: #ffffff;

}

/* =====================================================
   MOBILE
===================================================== */

@media (max-width:768px) {

    .post-meta-bar {

        gap: 10px;

        font-size: 14px;

    }

    .post-meta-divider {

        display: none;

    }

    .post-meta-item {

        width: 100%;

    }

    .post-share {

        flex-wrap: wrap;

    }

}