/*
 * Theme-agnostic comment primitives.
 *
 * WordPress themes use several valid wrappers (#comments, .comments-area,
 * .comment-respond). These selectors intentionally cover the core classes
 * without styling unrelated forms elsewhere on the page.
 */
#comments .comment-list,
#comments ol.comment-list,
#comments ul.comment-list,
.comments-area .comment-list,
.comments-area ol.comment-list,
.comments-area ul.comment-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

#comments .comment,
.comments-area .comment {
    position: relative;
    margin: 0 0 1.5rem;
    padding: 1.25rem;
}

#comments .comment-content,
.comments-area .comment-content {
    overflow-wrap: anywhere;
}

#comments .avatar,
.comments-area .avatar,
.comment-form .avatar,
.comment-respond .avatar {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    border-radius: 50%;
}

#comments .comment-author img.avatar,
.comments-area .comment-author img.avatar {
    float: left;
    margin: 0 .75rem .5rem 0;
}

#respond input[type="text"],
#respond input[type="email"],
#respond input[type="url"],
#respond textarea,
.comment-respond input[type="text"],
.comment-respond input[type="email"],
.comment-respond input[type="url"],
.comment-respond textarea,
form.comment-form input[type="text"],
form.comment-form input[type="email"],
form.comment-form input[type="url"],
form.comment-form textarea {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
}

#respond .comment-form-author,
#respond .comment-form-email,
#respond .comment-form-url,
.comment-respond .comment-form-author,
.comment-respond .comment-form-email,
.comment-respond .comment-form-url,
form.comment-form .comment-form-author,
form.comment-form .comment-form-email,
form.comment-form .comment-form-url {
    max-width: 100%;
}

#respond #submit,
.comment-respond #submit,
form.comment-form input[type="submit"],
form.comment-form button[type="submit"] {
    max-width: 100%;
    cursor: pointer;
}

@media (max-width: 600px) {
    #comments .comment,
    .comments-area .comment {
        padding: 1rem;
    }
}