/* Firebase Comments Moderator - Frontend Styles
   Designed to match the screenshot on michaelstake.com
   Uses unique IDs/classes so theme rules that hide #comments / .comments-area do not affect us */

/* Force visibility - highest priority against theme hide rules */
#fcm-comments-section,
#fcm-comments-section.fcm-wrapper,
.fcm-wrapper,
#fcm-comments,
.fcm-comments-area {
	display: block !important;
	visibility: visible !important;
	opacity: 1 !important;
	height: auto !important;
	max-height: none !important;
	min-height: 50px !important;
	overflow: visible !important;
	max-width: 100%;
	margin: 2.5rem 0 3rem !important;
	padding: 0 0 2rem !important;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
	color: #1a1a1a !important;
	clear: both;
	position: relative;
	z-index: 10;
}

/* Header */
.fcm-comments-header {
	margin-bottom: 1.5rem;
	display: block !important;
}

.fcm-comments-title {
	font-size: 1.5rem !important;
	font-weight: 600 !important;
	margin: 0 0 0.35rem 0 !important;
	color: #1a1a1a !important;
	letter-spacing: -0.01em;
	display: block !important;
}

.fcm-title-underline {
	height: 3px !important;
	width: 100% !important;
	background: linear-gradient(to right, #22c55e 0%, #22c55e 40%, transparent 40%) !important;
	border-radius: 2px;
	margin-bottom: 1.25rem;
	display: block !important;
}

/* Comments list */
.fcm-comments-list {
	margin-bottom: 2rem;
	display: block !important;
}

.fcm-loading,
.fcm-no-comments {
	color: #6b7280 !important;
	font-size: 1rem;
	margin: 1rem 0 1.5rem;
	display: block !important;
}

.fcm-comment-item {
	padding: 1.1rem 0;
	border-bottom: 1px solid #e5e7eb;
	display: block !important;
}

.fcm-comment-item:last-child {
	border-bottom: none;
}

.fcm-comment-author {
	font-weight: 600;
	font-size: 0.95rem;
	color: #111 !important;
	margin-bottom: 0.25rem;
}

.fcm-comment-date {
	font-size: 0.8rem;
	color: #9ca3af !important;
	margin-bottom: 0.5rem;
}

.fcm-comment-content {
	font-size: 0.95rem;
	line-height: 1.55;
	color: #374151 !important;
	margin-bottom: 0.5rem;
}

.fcm-comment-actions {
	margin-top: 0.4rem;
}

.fcm-reply-btn {
	background: none;
	border: none;
	color: #22c55e !important;
	font-size: 0.85rem;
	cursor: pointer;
	padding: 0;
	font-weight: 500;
}

.fcm-reply-btn:hover {
	text-decoration: underline;
}

/* Nested replies */
.fcm-replies {
	margin-left: 1.5rem;
	margin-top: 0.75rem;
	padding-left: 1rem;
	border-left: 2px solid #e5e7eb;
}

.fcm-reply-item {
	padding: 0.75rem 0;
}

/* Form */
.fcm-comment-form-wrapper {
	background: #fff !important;
	border: 1px solid #e5e7eb !important;
	border-radius: 8px;
	padding: 1.5rem 1.75rem 1.25rem !important;
	box-shadow: 0 1px 3px rgba(0,0,0,0.04);
	display: block !important;
}

.fcm-comment-form {
	display: block !important;
}

.fcm-comment-form .fcm-form-row {
	margin-bottom: 0.9rem;
	display: block !important;
}

.fcm-input,
.fcm-textarea,
input.fcm-input,
textarea.fcm-textarea,
.fcm-textarea {
	width: 100% !important;
	padding: 0.7rem 0.9rem !important;
	border: 1px solid #d1d5db !important;
	border-radius: 6px !important;
	font-size: 15px !important;
	color: #111 !important;
	background: #fff !important;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
	box-sizing: border-box !important;
	display: block !important;
}

.fcm-input:focus,
.fcm-textarea:focus {
	outline: none !important;
	border-color: #22c55e !important;
	box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.15) !important;
}

.fcm-textarea {
	min-height: 110px !important;
	resize: vertical;
	line-height: 1.5;
}

.fcm-input::placeholder,
.fcm-textarea::placeholder {
	color: #9ca3af !important;
}

/* reCAPTCHA */
.fcm-recaptcha-row {
	margin-top: 0.5rem;
	margin-bottom: 1rem;
	display: block !important;
	min-height: 78px;
}

/* Submit button - exact black style from screenshot */
.fcm-submit-btn {
	display: inline-block !important;
	background-color: #111827 !important;
	color: #fff !important;
	border: none !important;
	border-radius: 6px !important;
	padding: 0.7rem 1.4rem !important;
	font-size: 15px !important;
	font-weight: 600 !important;
	cursor: pointer !important;
	transition: background-color 0.15s ease, transform 0.1s ease;
	line-height: 1.3 !important;
	text-decoration: none !important;
}

.fcm-submit-btn:hover {
	background-color: #000 !important;
	color: #fff !important;
}

.fcm-submit-btn:active {
	transform: scale(0.98);
}

.fcm-submit-btn:disabled {
	opacity: 0.65;
	cursor: not-allowed;
}

.fcm-cancel-reply {
	margin-left: 0.75rem;
	background: transparent !important;
	border: 1px solid #d1d5db !important;
	color: #6b7280 !important;
	padding: 0.65rem 1.1rem !important;
	border-radius: 6px !important;
	font-size: 0.9rem !important;
	cursor: pointer;
}

.fcm-cancel-reply:hover {
	background: #f9fafb !important;
}

/* Moderation note */
.fcm-moderation-note {
	margin-top: 0.9rem !important;
	margin-bottom: 0 !important;
	font-size: 0.85rem !important;
	color: #6b7280 !important;
	display: block !important;
}

/* Messages */
.fcm-form-message {
	margin-top: 1rem;
	padding: 0.75rem 1rem;
	border-radius: 6px;
	font-size: 0.9rem;
	display: none;
}

.fcm-form-message.success {
	display: block !important;
	background: #ecfdf5 !important;
	color: #065f46 !important;
	border: 1px solid #a7f3d0 !important;
}

.fcm-form-message.error {
	display: block !important;
	background: #fef2f2 !important;
	color: #991b1b !important;
	border: 1px solid #fecaca !important;
}

/* Responsive */
@media (max-width: 600px) {
	.fcm-comment-form-wrapper {
		padding: 1.1rem !important;
	}

	.fcm-replies {
		margin-left: 0.75rem;
		padding-left: 0.75rem;
	}
}


/* === Match post content typography (theme body text) === */
#fcm-comments-section,
#fcm-comments,
.fcm-comments-area,
.fcm-comment-content,
.fcm-comment-author,
.fcm-no-comments,
.fcm-loading,
.fcm-moderation-note {
	font-size: 16px !important;
	line-height: 1.6 !important;
	font-family: inherit !important;
}

#fcm-author-name,
#fcm-author-email,
#fcm-content,
.fcm-input,
.fcm-textarea,
input.fcm-input,
textarea.fcm-textarea {
	font-size: 16px !important;
	line-height: 1.6 !important;
	font-family: inherit !important;
	padding: 0.85rem 1rem !important;
}

.fcm-comments-title {
	font-size: 1.35rem !important;
}

.fcm-submit-btn {
	font-size: 16px !important;
	padding: 0.75rem 1.5rem !important;
}

.fcm-comment-date,
.fcm-reply-btn {
	font-size: 14px !important;
}

/* === Responsive form === */
@media (max-width: 782px) {
	#fcm-comments-section,
	.fcm-wrapper,
	.fcm-comments-area {
		margin: 1.5rem 0 2rem !important;
		padding: 0 0 1.5rem !important;
	}

	.fcm-comment-form-wrapper {
		padding: 1rem !important;
		border-radius: 6px;
	}

	#fcm-author-name,
	#fcm-author-email,
	#fcm-content,
	.fcm-input,
	.fcm-textarea {
		font-size: 16px !important; /* prevents iOS zoom */
		padding: 0.8rem 0.9rem !important;
	}

	.fcm-submit-btn {
		width: 100% !important;
		text-align: center !important;
		padding: 0.85rem 1rem !important;
		font-size: 16px !important;
	}

	.fcm-cancel-reply {
		display: block !important;
		width: 100% !important;
		margin: 0.5rem 0 0 !important;
		text-align: center;
	}

	.fcm-recaptcha-row {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	.fcm-replies {
		margin-left: 0.75rem !important;
		padding-left: 0.75rem !important;
	}

	.fcm-comments-title {
		font-size: 1.2rem !important;
	}
}

@media (max-width: 480px) {
	.fcm-comment-form-wrapper {
		padding: 0.85rem !important;
	}

	.fcm-form-row {
		margin-bottom: 0.75rem !important;
	}
}

/* === Match theme body typography exactly (Lora / 15px) === */
#fcm-comments-section,
#fcm-comments,
.fcm-comments-area,
.fcm-comment-item,
.fcm-comment-content,
.fcm-comment-author,
.fcm-no-comments,
.fcm-loading,
.fcm-moderation-note,
.fcm-comments-list {
	font-family: Lora, Georgia, serif !important;
	font-size: 15px !important;
	line-height: 1.55 !important;
	letter-spacing: 0.2px !important;
	color: #000000 !important;
}

.fcm-comments-title {
	font-family: Lora, Georgia, serif !important;
	font-size: 22px !important;
	font-weight: 600 !important;
	color: #000000 !important;
}

/* Form: same type, constrained width so text reads larger */
.fcm-comment-form-wrapper {
	max-width: 100% !important;
	width: 100% !important;
}

#fcm-author-name,
#fcm-author-email,
#fcm-content,
.fcm-input,
.fcm-textarea,
input.fcm-input,
textarea.fcm-textarea {
	font-family: Lora, Georgia, serif !important;
	font-size: 15px !important;
	line-height: 1.55 !important;
	letter-spacing: 0.2px !important;
	color: #000000 !important;
	padding: 12px 14px !important;
}

.fcm-input::placeholder,
.fcm-textarea::placeholder {
	font-family: Lora, Georgia, serif !important;
	font-size: 15px !important;
	color: #6b7280 !important;
}

.fcm-submit-btn {
	font-family: Lora, Georgia, serif !important;
	font-size: 15px !important;
	letter-spacing: 0.2px !important;
}

.fcm-comment-date,
.fcm-reply-btn {
	font-family: Lora, Georgia, serif !important;
	font-size: 13px !important;
}

/* Hide public reply (admin-only replies) */
.fcm-reply-btn,
.fcm-comment-actions,
#fcm-cancel-reply {
	display: none !important;
}

/* Smaller moderation note (~3pt smaller than body 15px → ~12px) */
.fcm-moderation-note {
	font-size: 12px !important;
	line-height: 1.4 !important;
	color: #6b7280 !important;
}

/* === Like buttons (Facebook-style thumb) === */
.fcm-like-btn {
	display: inline-flex !important;
	align-items: center;
	gap: 6px;
	background: transparent !important;
	border: none !important;
	padding: 4px 6px !important;
	cursor: pointer;
	color: #65676b !important; /* neutral gray outline feel */
	font-family: Lora, Georgia, serif !important;
	font-size: 13px !important;
	line-height: 1 !important;
	vertical-align: middle;
	transition: color 0.15s ease, transform 0.1s ease;
}

.fcm-like-btn:hover {
	color: #22c55e !important;
}

.fcm-like-btn.is-liked {
	color: #22c55e !important;
}

.fcm-like-btn.is-liked .fcm-thumb-icon {
	color: #22c55e !important;
}

.fcm-thumb-icon {
	display: inline-block;
	width: 18px;
	height: 18px;
	flex-shrink: 0;
}

.fcm-like-count {
	font-size: 13px !important;
	font-weight: 500;
	min-width: 0.8em;
}

.fcm-comment-likes {
	margin-top: 0.35rem;
}

/* Post like next to date in hero meta */
.fcm-post-like {
	display: inline-flex !important;
	align-items: center;
	margin-left: 12px;
	vertical-align: middle;
}

.single-hero-meta .fcm-post-like-btn,
.fcm-post-like .fcm-like-btn {
	font-size: 14px !important;
}

.single-hero-meta .fcm-thumb-icon {
	width: 16px;
	height: 16px;
}

/* Archive / homepage like count (display only) */
.fcm-archive-like {
	display: inline-flex !important;
	align-items: center;
	gap: 4px;
	margin-left: 10px;
	color: #65676b !important;
	font-size: 13px !important;
	font-family: Lora, Georgia, serif !important;
	vertical-align: middle;
	pointer-events: none; /* not clickable */
	user-select: none;
}

.fcm-archive-like .fcm-thumb-icon {
	width: 14px;
	height: 14px;
	color: #65676b;
}

.fcm-archive-like .fcm-like-count {
	font-size: 13px !important;
	font-weight: 500;
}