/* Blog posts: sidebar tag fix, author box, comments. Loaded only on blog posts. */

/* ---- Tags in the sidebar: one row of equal chips ---- */
.post-sidebar .tags { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.post-sidebar .tags li,
.post-sidebar .tags li + li { margin: 0; }

/* ---- Author box ---- */
.author-box { margin-top: 3rem; padding: 1.5rem; border: 1px solid rgb(255 255 255 / 0.1); border-radius: 12px;
  background: rgb(255 255 255 / 0.03); }
.author-box--compact { margin: 0; padding: 0; border: 0; background: none; }
.author-box__inner { display: flex; align-items: center; gap: 1rem; }
.author-box__photo { flex: none; width: 80px; height: 80px; border-radius: 50%; object-fit: cover; }
.author-box--compact .author-box__photo { width: 56px; height: 56px; }
.author-box__initials { display: grid; place-items: center; font-size: 1.75rem; font-weight: 800; color: #fff;
  background: linear-gradient(135deg, rgb(56 189 248 / 0.55), rgb(34 197 94 / 0.45)); }
.author-box__label { margin: 0; font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: rgb(255 255 255 / 0.5); }
.author-box__name { margin: 0; font-size: 1.15rem; font-weight: 700; color: inherit; }
.author-box__title { margin: .1rem 0 0; font-size: .9rem; color: rgb(255 255 255 / 0.6); }
.author-box__bio { margin: 1rem 0 0; line-height: 1.65; color: rgb(255 255 255 / 0.78); }
.author-box--compact .author-box__bio { font-size: .9rem; }
.author-box__links { display: flex; flex-wrap: wrap; gap: .5rem 1rem; margin: .9rem 0 0; padding: 0; list-style: none; }
.author-box__links li + li { margin: 0; }
.author-box__links a { font-size: .875rem; font-weight: 600; color: var(--be-c-accent, #3db4e6); text-decoration: none; }
.author-box__links a:hover { text-decoration: underline; }

/* ---- Comments ---- */
.comments { margin-top: 3.5rem; padding-top: 2.5rem; border-top: 1px solid rgb(255 255 255 / 0.1); }
.comments__title { margin: 0 0 1.5rem; font-size: 1.5rem; }
.comments__notice { margin: 0 0 1.25rem; padding: .8rem 1rem; border-radius: 8px; border-left: 3px solid #22c55e;
  background: rgb(34 197 94 / 0.1); }
.comments__notice.is-error { border-left-color: #f87171; background: rgb(248 113 113 / 0.1); }
.comments__notice p { margin: 0; }
.comments__empty, .comments__closed { color: rgb(255 255 255 / 0.6); }
.comments__list, .comments__replies { list-style: none; margin: 0; padding: 0; }
.comments__list > .comment + .comment { margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid rgb(255 255 255 / 0.06); }
.comments__replies { margin: 1rem 0 0 3.25rem; padding-left: 1.25rem; border-left: 2px solid rgb(255 255 255 / 0.08); }
.comments__replies .comment + .comment { margin-top: 1rem; }
.comment__card { display: flex; gap: .9rem; }
.comment__avatar { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  font-size: .85rem; font-weight: 800; color: #fff; background: hsl(var(--hue, 200) 45% 38%); }
.comment__main { min-width: 0; flex: 1; }
.comment__meta { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .6rem; margin: 0 0 .35rem; font-size: .875rem; }
.comment__meta time { color: rgb(255 255 255 / 0.5); }
.comment__badge { padding: .05rem .5rem; border-radius: 999px; font-size: .7rem; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--be-c-accent, #3db4e6); background: rgb(61 180 230 / 0.14); }
.comment__card.is-author .comment__avatar { box-shadow: 0 0 0 2px var(--be-c-accent, #3db4e6); }
.comment__body { line-height: 1.65; color: rgb(255 255 255 / 0.85); overflow-wrap: anywhere; }
.comment__body p { margin: 0 0 .6rem; }
.comment__body p:last-child { margin-bottom: 0; }
.comment__reply { display: inline-block; margin-top: .4rem; font-size: .8rem; font-weight: 600;
  color: var(--be-c-accent, #3db4e6); text-decoration: none; }
.comment__reply:hover { text-decoration: underline; }

.comment-form { margin-top: 2rem; padding: 1.5rem; border: 1px solid rgb(255 255 255 / 0.1); border-radius: 12px;
  background: rgb(255 255 255 / 0.03); }
.comment .comment-form { margin: 1rem 0 0 3.25rem; }
.comment-form__title { margin: 0 0 .35rem; font-size: 1.15rem; }
.comment-form__replying { font-size: .875rem; font-weight: 400; color: rgb(255 255 255 / 0.6); }
.comment-form__cancel { padding: 0; font: inherit; color: var(--be-c-accent, #3db4e6); background: none; border: 0; cursor: pointer; text-decoration: underline; }
.comment-form__intro { margin: 0 0 1.1rem; font-size: .875rem; color: rgb(255 255 255 / 0.6); }
.comment-form__intro a { color: var(--be-c-accent, #3db4e6); }
.comment-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.comment-form__field { display: flex; flex-direction: column; gap: .35rem; margin-bottom: 1rem; }
.comment-form__field label { font-size: .85rem; font-weight: 600; }
.comment-form__field .opt { font-weight: 400; color: rgb(255 255 255 / 0.5); }
.comment-form input[type=text], .comment-form input[type=email], .comment-form textarea {
  width: 100%; box-sizing: border-box; padding: .7rem .85rem; font: inherit; color: inherit;
  background: rgb(0 0 0 / 0.25); border: 1px solid rgb(255 255 255 / 0.14); border-radius: 8px; }
.comment-form textarea { min-height: 7.5rem; resize: vertical; line-height: 1.6; }
.comment-form input:focus, .comment-form textarea:focus { outline: 2px solid var(--be-c-accent, #3db4e6); outline-offset: 1px; border-color: transparent; }
.comment-form .field-error { font-size: .8rem; color: #f87171; }
/* Honeypot: invisible to people, tempting to bots */
.comment-form__hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

@media (max-width: 640px) {
  .comment-form__row { grid-template-columns: 1fr; }
  .comments__replies, .comment .comment-form { margin-left: 1rem; }
}

/* Widget titles: same colour as "On this page" (overrides the muted paragraph colour) */
.post-sidebar p.side-widget__title { color: inherit; }

/* Solid panels so the background animation doesn't show through */
.author-box:not(.author-box--compact), .comment-form { background: #0e1d2e; }
.comment-form input[type=text], .comment-form input[type=email], .comment-form textarea { background: #0a1522; }
.comment__avatar--photo { object-fit: cover; }