/* Default styles for webmention-render.js. Everything is namespaced under
   .webmentions so it can be overridden or replaced entirely. */

.webmentions { margin: 2rem 0; font-size: .95rem; line-height: 1.5; }
.webmentions .wm-title { font-size: 1.25rem; margin: 0 0 1rem; }
.webmentions .wm-heading { font-size: .875rem; font-weight: 600; margin: 1rem 0 .4rem; opacity: .75; }

.webmentions .wm-faces { list-style: none; display: flex; flex-wrap: wrap; gap: .3rem; margin: 0; padding: 0; }
.webmentions .wm-face { display: block; }
.webmentions .wm-avatar { width: 2.25rem; height: 2.25rem; border-radius: 50%; object-fit: cover; background: rgba(127, 127, 127, .15); display: block; }
.webmentions .wm-avatar-empty { background: rgba(127, 127, 127, .3); }

.webmentions .wm-replies { list-style: none; margin: 1rem 0 0; padding: 0; }
.webmentions .wm-reply { display: grid; gap: .35rem; padding: .9rem 0; border-top: 1px solid rgba(127, 127, 127, .25); }
.webmentions .wm-reply-head { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.webmentions .wm-author { display: inline-flex; align-items: center; gap: .5rem; text-decoration: none; color: inherit; font-weight: 600; }
.webmentions .wm-author .wm-avatar { width: 1.75rem; height: 1.75rem; }
.webmentions .wm-verb { opacity: .7; }
.webmentions .wm-permalink { margin-left: auto; opacity: .7; font-size: .85em; text-decoration: none; color: inherit; }
.webmentions .wm-permalink:hover { text-decoration: underline; }
.webmentions .wm-name { margin: 0; font-weight: 600; }
.webmentions .wm-content { margin: 0; overflow-wrap: anywhere; }
.webmentions .wm-content img { max-width: 100%; height: auto; }