/*
 * Noonsite Comments V2 – Stylesheet
 * Loaded only on singular views of supported post types.
 *
 * BEM-ish class structure under the .ns-comments-wrap root so nothing leaks
 * outside the comments section.
 */

/* ============================================================
   Base
   ============================================================ */

.ns-comments-wrap {
	font-size: 15px;
	line-height: 1.55;
}

/* ============================================================
   Form controls
   ============================================================ */

.ns-comments-wrap .comment-reply-title {
	font-size: 18px;
	font-weight: 700;
}

.ns-comments-wrap .ns-form-control {
	width: 100%;
	border: 1px solid rgb(0 0 0 / 10%);
	border-radius: 10px;
	padding: 10px 12px;
	font: inherit;
	background: #fff;
}

.ns-comments-wrap .ns-form-control:focus {
	outline: none;
	border-color: rgba(32, 66, 140, .6);
	box-shadow: 0 0 0 3px rgba(32, 66, 140, .12);
}

/* ============================================================
   Buttons
   ============================================================ */

.ns-comments-wrap .ns-btn {
	display: inline-block;
	border-radius: 6px;
	padding: 7px 14px;
	font-weight: 500;
	text-decoration: none;
	border: 0;
	cursor: pointer;
}

.ns-comments-wrap .ns-btn-primary {
	background: #20428C;
	color: #fff;
}

.ns-comments-wrap .ns-btn-primary:hover {
	filter: brightness(.95);
}

/* ============================================================
   Comment list reset – kill WP's default numbering/bullets
   ============================================================ */

.ns-comments-wrap ol,
.ns-comments-wrap ul,
.ns-comments-wrap ol.comment-list,
.ns-comments-wrap ol.children,
.ns-comments-wrap ul.children {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

.ns-comments-wrap li,
.ns-comments-wrap li.comment {
	list-style: none !important;
}

/* Force-hide the ::marker pseudo-element (Chromium renders it even with list-style:none on some resets) */
.ns-comments-wrap li::marker {
	font-size: 0 !important;
}

.ns-comments-wrap .comment-list {
	margin: 16px 0 0;
}

/* Indent threaded replies */
.ns-comments-wrap ol.children,
.ns-comments-wrap ul.children {
	margin-left: 25px !important;
	margin-top: 12px !important;
}

/* ============================================================
   Comment card
   ============================================================ */

.ns-comments-wrap .ns-card {
	border: 1px solid rgba(0, 0, 0, .10);
	border-radius: 12px;
	background: #fff;
	box-shadow: 0 4px 14px rgba(0, 0, 0, .06);
	margin: 14px 0;
	overflow: hidden;
}

/* Header row (avatar + author/date) */
.ns-comments-wrap .ns-comment-meta {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 14px;
	border-bottom: 1px solid rgba(0, 0, 0, .06);
	background: rgba(32, 66, 140, .06);
}

/* Avatar circle */
.ns-comments-wrap .ns-avatar {
	flex: 0 0 55px;
	width: 55px;
	height: 55px;
	border-radius: 999px;
	overflow: hidden;
	border: 1px solid rgba(0, 0, 0, .10);
	background: #fff;
	/* Centre the SVG placeholder */
	display: flex;
	align-items: center;
	justify-content: center;
}

.ns-comments-wrap .ns-avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* SVG placeholder inherits the circle size via the flex container */
.ns-comments-wrap .ns-avatar svg {
	width: 32px;
	height: 32px;
}

.ns-comments-wrap .ns-author-line {
	font-weight: 700;
}

.ns-comments-wrap .ns-date-line {
	font-size: 13px;
	opacity: .75;
}

/* Comment body */
.ns-comments-wrap .comment-content {
	padding: 12px 14px;
}

.ns-comments-wrap .comment-content p {
	margin: 0 0 10px;
}

.ns-comments-wrap .comment-content p:last-child {
	margin-bottom: 0;
}

/* Wrap long URLs so they don't break the layout */
.ns-comments-wrap .comment-content,
.ns-comments-wrap .comment-content p,
.ns-comments-wrap .comment-content a {
	overflow-wrap: anywhere;
	word-break: break-word;
}

.ns-comments-wrap .comment-content pre,
.ns-comments-wrap .comment-content code {
	white-space: pre-wrap;
	overflow-wrap: anywhere;
}

/* Card footer (reply link) */
.ns-comments-wrap .ns-card-footer {
	padding: 12px 14px;
	border-top: 1px solid rgba(0, 0, 0, .06);
	background: rgba(0, 0, 0, .02);
}

/* ============================================================
   Comment form card
   ============================================================ */

.ns-comments-wrap .ns-commentform-card {
	border: 1px solid rgba(0, 0, 0, .10);
	border-radius: 12px;
	background: #fff;
	box-shadow: 0 4px 14px rgba(0, 0, 0, .06);
	overflow: hidden;
	margin-bottom: 16px;
}

.ns-comments-wrap .ns-commentform-head {
	background: #20428C;
	color: #fff;
	padding: 12px 14px;
}

.ns-comments-wrap .ns-commentform-head .comment-reply-title {
	margin: 0;
	font-size: 18px;
	font-weight: 500;
	color: inherit;
}

.ns-comments-wrap .ns-commentform-head #cancel-comment-reply-link {
	color: rgba(255, 255, 255, .52);
}

.ns-comments-wrap .ns-commentform-body {
	padding: 12px 14px;
}

.ns-commentform-body #commentform {
	margin-bottom: 0;
}

/* ============================================================
   Login note (shown to logged-out users instead of Reply)
   ============================================================ */

.ns-comments-wrap .ns-login-note a {
	font-weight: 700;
	text-decoration: underline;
}