/**
 * CSS for Blog plugin
 *
 * This file is in version control:
 * https://github.com/uofa/blog
 *
 * Created 14 Jun 2013
 * Updated 03 Aug 2022
 *
 * Last update: update Font Awesome comments icon, again, AB.
 *
 * @author Allan A Beattie
 * @author Colin Denholm
 * @author Matt J Colbourne
 */


#blog_list article {
    margin-bottom: 3em;
    padding-bottom: 3em;
    border-bottom: 1px solid #e4e4e4;
}

#blog_list article:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

#blog_list article:last-of-type {
    margin-bottom: 0;
}

#blog_list article h2 {
    margin: 0;
}

#blog_list article h2 a {
    color: #444;
}

#blog_list article img {
    float: left;
    margin-top: 0.5em;
}

#blog_list img + h2 {
    margin-left: 66px;
}

#blog_list img ~ .author {
    clear: left;
}

#blog_list article::before,
#blog_list article::after {
    display: table;
    content: ' ';
}

#blog_list article::after {
    clear: both;
}

#blog_list header,
#blog_article header {
    margin: 0 0 1.6em;
}

.blog_post #form_container {
    margin: 0 0 3em;
}

#blog_list header h2,
.blog_post header h2 {
    margin-top: 0;
}

#blog_list header time,
.blog_post header time {
    float: right;
    width: 3.5em;
    border: 1px solid #e5e5e5;
    text-align: center;
    margin: 0 0 1em 1em;
}

#blog_list header time * ,
.blog_post header time * {
    display: block;
}

#blog_list header time span:first-child,
.blog_post header time span:first-child {
    font-size: 1.75em;
}

#blog_list header time span:nth-child(2),
.blog_post header time span:nth-child(2) {
    padding: 0 0 0.5em;
    font-size: 0.85em;
    font-weight: bold;
    text-transform: uppercase;
}

#blog_list header time span:last-child,
.blog_post header time span:last-child {
    padding: 0.35em 0;
    background: var(--abdn-primary, #354b8c);
    font-size: 0.75em;
    color: #fff;
}

#blog_list .author {
    padding: 1em 0;
}

.comment_count {
    margin: 0.3em 0 1em;
    font-size: 0.8em;
    color: #777;
}

.comment_count::after {
    font-family: 'Font Awesome 5 Pro';
    padding-left: 0.2em;
    content: '\f086';
}

#blog_list h2 a,
#blog_list .author a,
.comment_count a {
    text-decoration: none;
}

#blog_list h2 a {
    border-bottom: 0;
}

#blog_list h2 a:hover,
#blog_list h2 a:focus {
    border-bottom: 0;
    text-decoration: underline;
    color: #444;
}

#blog_list section img {
    float: right;
    margin: 0 0 1em 1em;
    max-width: 8em;
}

#blog_list section a {
    clear: right;
    float: right;
}

.blog_post .heading {
    margin: 0 0 0.3em;
    font-size: 2em;
    font-weight: 700;
    line-height: 1em;
}


/* images
------------------------------------------------------------ */

.blog_post .image_wrapper {
    margin: 0 0 1.5em;
}

.blog_post .image_wrapper figure {
    margin: 0;
}

.blog_post .image_wrapper img {
    width: 100%;
    height: auto;
}

.blog_post .zoomable a {
    display: block;
    font-size: 0;
    cursor: zoom-in;
}

.blog_post figcaption {
    padding: 1em;
    background: #354B8C;
    font-size: 0.9em;
    line-height: 1.5em;
    color: #fff;
}


/* comments
------------------------------------------------------------ */

.comments,
.admin_reply {
    margin: 0;
    padding: 0;
    list-style: none;
}

.admin_reply {
    margin-left: 2em;
    padding: 0 1em;
    border-radius: 1em;
    background: #fafafa;
}

.comments li {
    padding: 2em 0;
    border-top: 1px solid #e5e5e5;
}

#comments li::before,
#comments .admin_reply span:first-child::before {
    color: var(--abdn-secondary, #ffca00);
}

.comments li:first-child,
.comments .admin_reply li {
    padding-top: 1em;
    border-top: 0;
}

.comments .admin_reply li {
    padding: 1em 0;
}

.comments li::before {
    display: inline-block;
    margin-right: 0.3em;
    font-family: 'Font Awesome 5 Pro';
    font-size: 1.3em;
    content: '\f075';
    color: #f4c900;
}

.admin_reply li::before {
    content: '\f086';
}

.comments p:last-child {
    margin-bottom: 0;
}

.comment_number {
    float: right;
    margin: 0 0 0.6em 0.6em;
    font-size: 1.3em;
}

.comment_author {
    display: inline-block;
    font-weight: 700;
}

.comments time {
    display: inline-block;
    font-size: 0.9em;
}

.comment_moderated {
    text-align: right;
    font-weight: 700;
}

#blog_search_results .calendar_container {
    padding: 0;
    margin: 0;
}

.comments + ol {
    list-style: none;
}

/* sharing
------------------------------------------------------------ */

.sharing h2 {
    margin: 1em 0 0.45em;
    padding: 0 0 0.3em;
    border-bottom: 1px solid #ccc;
    font-weight: 400;
}

.blog_post .sharing ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.blog_post .sharing li {
    display: inline;
    line-height: 0;
}

.blog_post .sharing a:hover,
.blog_post .sharing a:focus {
    text-decoration: none;
}

.blog_post a.fa-rss-square {
    color: #f26522;
}

.blog_post a.fa-twitter-square{
    color: #1DA1F2;
}

.blog_post a.fa-facebook-square {
    color: #3b5998;
}

.blog_post a.fa:hover::before,
.blog_post a.fa:focus::before {
    opacity: 0.5;
}

.blog_post a:focus {
    text-decoration: none;
    outline: 4px solid #f4c900;
}


/* previous next
------------------------------------------------------------ */

.post_navigation {
    margin-top: 3em;
}

.post_navigation ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.post_navigation li {
    line-height: 1.3em;
}

.post_navigation i {
    line-height: 1.5em;
    color: #000;
}

.post_navigation a {
    display: block;
    padding: 0 0 0.6em;
}

.post_navigation_previous {
    margin: 0 0 2em;
}

.post_navigation_previous i {
    float: left;
    width: 1.3em;
}

.post_navigation_previous a {
    margin-left: 1.3em;
}

.post_navigation_next {
    text-align: right;
}

.post_navigation_next i {
    float: right;
    width: 1.3em;
}

.post_navigation_next a {
    margin-right: 1.3em;
}


@media screen and (min-width: 600px) {
    .post_navigation li {
        width: 47.25%;
    }

    .post_navigation_previous {
        float: left;
        margin-right: 5.5%;
    }

    .post_navigation_next {
        float: right;
    }
}


@media screen and (min-width: 800px) {
    .blog_post .image_wrapper {
        float: right;
        clear: right;
        width: 19em;
        margin: 0.5em 0 2em 2em;
    }
}


@media screen and (min-width: 940px) {
    .blog_post .image_wrapper {
        float: none;
        width: 100%;
        max-width: 100%;
        margin: 0 0 2em;
    }

    .post_navigation li {
        width: 45.75%;
    }

    .post_navigation_previous {
        float: left;
        margin-right: 8.48%;
    }
}


@media screen and (min-width: 1200px) {
    .blog_post .image_wrapper {
        float: right;
        width: 19em;
        margin: 0.5em 0 2em 2em;
    }
}