/* Comments */

/* WP built-in comments display */
.comments-section { 
    font-size: 0.875em;
    border-top: 1px solid #ddd;
    margin: 2rem 1rem; }

.comments-section #comments { margin-bottom: 1em; }

.comments-section .comment {
    padding: 0 1rem 0.5rem;
    margin: 0.5rem 0 0;
    border: 1px solid #ddd; }

    .comments-section .comment.depth-1,
    .comments-section .comment.depth-3,
    .comments-section .comment.depth-5,
    .comments-section .comment.depth-7,
    .comments-section .comment.depth-9 { background-color: white; }
    .comments-section .comment.depth-2,
    .comments-section .comment.depth-4,
    .comments-section .comment.depth-6,
    .comments-section .comment.depth-8,
    .comments-section .comment.depth-10 { background-color: #f8f8f8; }

    .comments-section .comment .comment-meta,
    .comments-section .comment .comment-meta .comment-author {
        display: flex;
        align-items: center; }
        .comments-section .comment .comment-meta .comment-author .fn {
            font-weight: bold;
            padding: 0 0.5em; }
    .comments-section .comment .comment-meta {
        margin: 0 -1rem;
        padding: 0.5rem;
        background-color: #ddd;
        justify-content: space-between; }
        .comments-section .comment.bypostauthor > .comment-body > .comment-meta { background-color: pink; }
        .comments-section .comment.byuser > .comment-body > .comment-meta { background-color: lightblue; }
        .comments-section .comment .comment-meta .comment-author .says {
            display: none; }
        .comments-section .comment .comment-meta .comment-metadata a {
            color: #666;
            text-decoration: none;
            font-size: 0.7em;
            font-style: italic; }
    .comments-section .comment .reply {
        width: 8em;
        text-align: center;
        margin: 0 auto 0 0;
        padding: 0.5em 0;
        font-size: 0.875em;
        background-color: pink; }
        .comments-section .comment .reply a {
            font-family: "Oswald", sans-serif;
            text-decoration: none; }

@media screen and ( max-width: 50rem ) {

    .comments-section .comment {
        padding: 0 0.25rem 0.25rem;
        margin-top: 0.25rem; }
        .comments-section .comment .comment-meta {
            margin: 0 -0.25rem; }

}

/* Comment forms */
#respond { 
    font-size: 1rem;
    min-height: 20em; }
    #respond dl {}
        #respond dl dt {
            display: block;
            float: left;
            clear: left;
            width: 40%;
            padding: 0.5em 0;
            border: 2px solid transparent;
            border-left-width: 0;
            line-height: 1.375; }
        #respond dl dd {
            display: block;
            margin: 1em 0;
            margin-left: 40%;
            width: 60%; }
            #respond dl dd input[type=text] {
                width: 100%;
                font-family: inherit;
                font-size: inherit;
                padding: 0.5em; }
    #respond textarea {
        width: 100%;
        resize: vertical;
        font-family: inherit;
        font-size: inherit;
        padding: 0.5em; }
    #respond #respond-controls {
        text-align: right; }
        #respond #respond-controls #cancel-comment-reply-link {
            color: #666;
            text-decoration: none;
            margin-right: 1em; }
        #respond #respond-controls #submit {
            background: pink;
            border: 1px solid hotpink;
            padding: 0.5em 1.5em;
            font: inherit;
            cursor: pointer; }

/* Decent Comments plugin - recent comments widget */
.decent-comments {
    font-size: 0.75rem;
    margin: -0.5rem; }
    .decent-comments > ul > li {
        position: relative;
        overflow: hidden; }
    .decent-comments > ul > li:nth-child( 2n ) {
        background-color: #eee; }
    .decent-comments a {
        text-decoration: none; }
    .decent-comments .comment {
        margin: 0.5rem;
        margin-left: 4rem;
        padding: 0;
        min-height: 3rem; }
        .decent-comments .comment-avatar {
            position: absolute;
            padding: 0;
            left: 0.5rem; }
        .decent-comments .comment-author {
            padding-right: 0.25rem; }
        .decent-comments .comment-date {
            color: #999; }
        .decent-comments .comment-link {
            display: block; }
        .decent-comments .comment-excerpt {
            padding-top: 0.5rem; }