/* =========================================================================
   PsyPost Members-Only Comments — comment redesign
   Scoped to the comments area so it won't leak into the rest of the theme.
   Recolor the whole thing by editing the variables in the first block.
   Tuned for JNews markup: .commentlist > li.comment > .comment-body, with the
   avatar + .fn living inside .comment-author. Layout is structure-tolerant
   (no rigid grid) since JNews injects comments over AJAX.
   ========================================================================= */

:root {
	--ppmc-accent:        #044389;   /* PsyPost brand blue                  */
	--ppmc-accent-deep:   #032E5E;   /* darker hover                        */
	--ppmc-accent-ink:    #ffffff;   /* text on the accent button           */
	--ppmc-text:          #1A1A1A;   /* primary comment text                */
	--ppmc-muted:         #6B7280;   /* dates, meta                         */
	--ppmc-muted-soft:    #9CA3AF;
	--ppmc-line:          #E5E7EB;   /* hairlines / borders                 */
	--ppmc-surface:       #ffffff;   /* comment card background             */
	--ppmc-surface-alt:   #F6F8FB;   /* nested / form background            */
	--ppmc-radius:        10px;
	--ppmc-radius-sm:     8px;
	--ppmc-gap:           18px;
	--ppmc-shadow:        0 1px 2px rgba(16,24,40,.04);
	--ppmc-sans:          Archivo, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--ppmc-serif:         "Source Serif 4", "Source Serif Pro", Georgia, serif;
}

/* --- Container ---------------------------------------------------------- */
.jnews_comment_container,
.comments-area,
#comments,
.jeg_comment {
	color: var(--ppmc-text);
	line-height: 1.6;
}

.jnews_comment_container .comments-title,
.jnews_comment_container .comment-title,
#comments .comments-title,
#comments > h2,
#comments > h3,
.jeg_comment .jeg_post_title {
	font-family: var(--ppmc-sans);
	font-size: 1.3rem;
	font-weight: 700;
	letter-spacing: -0.01em;
	margin: 0 0 var(--ppmc-gap);
	padding-bottom: 12px;
	border-bottom: 2px solid var(--ppmc-line);
}

/* --- Comment list ------------------------------------------------------- */
.commentlist,
.comment-list,
ol.commentlist,
ol.comment-list {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

.commentlist li.comment,
.comment-list li.comment {
	list-style: none !important;
	margin: 0 0 var(--ppmc-gap) !important;
	padding: 0 !important;
}

/* The comment card */
.commentlist li.comment > .comment-body,
.comment-list li.comment > .comment-body,
.commentlist .comment-body {
	position: relative;
	padding: 16px 18px 14px;
	background: var(--ppmc-surface);
	border: 1px solid var(--ppmc-line);
	border-radius: var(--ppmc-radius);
	box-shadow: var(--ppmc-shadow);
	overflow: hidden;
}

/* Author row — avatar + name sit together regardless of exact nesting */
.commentlist .comment-author,
.comment-list .comment-author {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 8px;
	line-height: 1.3;
}
.commentlist .comment-author img.avatar,
.comment-list .comment-author img.avatar,
.commentlist .comment-body img.avatar {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	object-fit: cover;
	margin: 0 !important;
	float: none !important;
	border: 2px solid var(--ppmc-surface);
	box-shadow: 0 0 0 1px var(--ppmc-line);
	flex: 0 0 auto;
}
.commentlist .comment-author .fn,
.comment-list .comment-author .fn,
.commentlist cite.fn {
	font-family: var(--ppmc-sans);
	font-style: normal;
	font-weight: 700;
	font-size: 0.98rem;
	color: var(--ppmc-text);
}
.commentlist .comment-author .says { display: none; }

/* Post-author highlight */
.commentlist .bypostauthor > .comment-body::after,
.comment-list .bypostauthor > .comment-body::after {
	content: "PsyPost";
	position: absolute;
	top: 14px;
	right: 16px;
	font-family: var(--ppmc-sans);
	font-size: 0.62rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--ppmc-accent);
	background: rgba(4,67,137,0.10);
	padding: 3px 8px;
	border-radius: 999px;
}

/* Meta (date / time) */
.commentlist .comment-meta,
.comment-list .comment-meta,
.commentlist .commentmetadata {
	font-family: var(--ppmc-sans);
	font-size: 0.78rem;
	color: var(--ppmc-muted);
	margin-bottom: 8px;
}
.commentlist .comment-meta a,
.comment-list .comment-meta a {
	color: var(--ppmc-muted);
	text-decoration: none;
}
.commentlist .comment-meta a:hover { color: var(--ppmc-accent); }

/* Comment text */
.commentlist .comment-content,
.comment-list .comment-content,
.commentlist .comment-body > p {
	font-family: var(--ppmc-serif);
	font-size: 0.96rem;
	color: var(--ppmc-text);
}
.commentlist .comment-content p:last-child { margin-bottom: 0; }

/* Reply link */
.commentlist .reply,
.comment-list .reply { margin-top: 8px; }
.comment-reply-link {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-family: var(--ppmc-sans);
	font-size: 0.78rem;
	font-weight: 600;
	color: var(--ppmc-accent) !important;
	text-decoration: none !important;
	padding: 5px 12px;
	border: 1px solid var(--ppmc-line);
	border-radius: 999px;
	transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.comment-reply-link:hover {
	background: var(--ppmc-accent);
	border-color: var(--ppmc-accent);
	color: var(--ppmc-accent-ink) !important;
}

/* Threaded replies */
.commentlist .children,
.comment-list .children {
	list-style: none !important;
	margin: var(--ppmc-gap) 0 0 !important;
	padding-left: 24px !important;
	border-left: 2px solid var(--ppmc-line);
}
.commentlist .children li.comment > .comment-body {
	background: var(--ppmc-surface-alt);
}

/* --- Comment form (members) -------------------------------------------- */
.comment-respond,
#respond {
	margin-top: calc(var(--ppmc-gap) * 1.4);
	padding: 20px;
	background: var(--ppmc-surface-alt);
	border: 1px solid var(--ppmc-line);
	border-radius: var(--ppmc-radius);
}
#respond #reply-title,
.comment-respond .comment-reply-title {
	font-family: var(--ppmc-sans);
	margin: 0 0 12px;
	font-size: 1.05rem;
	font-weight: 700;
}
#commentform label,
.comment-form label {
	display: block;
	font-family: var(--ppmc-sans);
	font-size: 0.8rem;
	font-weight: 600;
	color: var(--ppmc-muted);
	margin-bottom: 5px;
}
#commentform textarea,
#commentform input[type="text"],
#commentform input[type="email"],
#commentform input[type="url"],
.comment-form textarea,
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"] {
	width: 100%;
	padding: 11px 13px;
	font-family: var(--ppmc-serif);
	font-size: 0.95rem;
	color: var(--ppmc-text);
	background: var(--ppmc-surface);
	border: 1px solid var(--ppmc-line);
	border-radius: var(--ppmc-radius-sm);
	box-sizing: border-box;
	transition: border-color .15s ease, box-shadow .15s ease;
}
#commentform textarea:focus,
#commentform input:focus,
.comment-form textarea:focus,
.comment-form input:focus {
	outline: none;
	border-color: var(--ppmc-accent);
	box-shadow: 0 0 0 3px rgba(4,67,137,0.15);
}
#commentform #submit,
#commentform input[type="submit"],
.comment-form input[type="submit"],
.comment-form #submit {
	font-family: var(--ppmc-sans);
	padding: 11px 24px;
	font-size: 0.9rem;
	font-weight: 700;
	color: var(--ppmc-accent-ink);
	background: var(--ppmc-accent);
	border: none;
	border-radius: 999px;
	cursor: pointer;
	transition: background .15s ease, transform .05s ease;
}
#commentform input[type="submit"]:hover,
.comment-form input[type="submit"]:hover { background: var(--ppmc-accent-deep); }

/* =========================================================================
   The "members only" notice (what non-members see)
   ========================================================================= */
.psypost-mc-notice {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	margin-top: calc(var(--ppmc-gap) * 1.4);
	margin-bottom: calc(var(--ppmc-gap) * 1.4);
	padding: 18px 20px;
	background: var(--ppmc-surface);
	border: 1px solid var(--ppmc-line);
	border-radius: var(--ppmc-radius);
	box-shadow: var(--ppmc-shadow);
}
.psypost-mc-notice__icon {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	color: var(--ppmc-accent);
	background: rgba(4,67,137,0.10);
}
.psypost-mc-notice__body { flex: 1 1 auto; min-width: 0; }
.psypost-mc-notice__heading {
	font-family: var(--ppmc-sans);
	margin: 2px 0 4px;
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--ppmc-accent);
	letter-spacing: -0.01em;
}
.psypost-mc-notice__text {
	font-family: var(--ppmc-serif);
	margin: 0 0 14px;
	font-size: 0.92rem;
	color: var(--ppmc-muted);
	max-width: 60ch;
}
.psypost-mc-notice__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}
.psypost-mc-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var(--ppmc-sans);
	padding: 9px 18px;
	font-size: 0.85rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	line-height: 1;
	border-radius: 999px;
	text-decoration: none !important;
	transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.psypost-mc-btn--solid {
	color: var(--ppmc-accent-ink) !important;
	background: var(--ppmc-accent);
	border: 1px solid var(--ppmc-accent);
}
.psypost-mc-btn--solid:hover { background: var(--ppmc-accent-deep); border-color: var(--ppmc-accent-deep); }
.psypost-mc-btn--ghost {
	color: var(--ppmc-accent) !important;
	background: transparent;
	border: 1px solid var(--ppmc-line);
}
.psypost-mc-btn--ghost:hover { border-color: var(--ppmc-accent); background: rgba(4,67,137,0.06); }

/* Belt-and-suspenders: hide any comment form for locked (non-member) visitors
   — including the JNews AJAX container — before/while the JS settles. */
.psypost-mc-locked .jnews_comment_container form,
.psypost-mc-locked form#commentform,
.psypost-mc-locked .comment-form,
.psypost-mc-locked #respond form,
.psypost-mc-locked .jeg_respond form {
	display: none !important;
}

/* --- Small screens ----------------------------------------------------- */
@media (max-width: 600px) {
	.commentlist li.comment > .comment-body,
	.comment-list li.comment > .comment-body { padding: 14px 14px 12px; }
	.commentlist .comment-author img.avatar,
	.comment-list .comment-author img.avatar { width: 38px; height: 38px; }
	.commentlist .children,
	.comment-list .children { padding-left: 14px !important; }
	.psypost-mc-notice { flex-direction: column; }
}