/* Cemacon Comments */

/* :root, not a wrapper class: comments.php renders .cemacon-comment-holder,
   .cemacon-comment-pager, .cemacon-comment-form-message and .cemacon-comment-form
   as siblings, not nested under one another, and the section is a per-page
   singleton (WP only ever renders one comments area), so there's no
   multi-instance leak risk to guard against here. */
:root {
	--cemacon-comment-color-accent: #FAA21B;
	--cemacon-comment-color-date: #828282;
	--cemacon-comment-color-text: #5A5A5A;
	--cemacon-comment-color-dark: #121212;
	--cemacon-comment-color-border: #e0e0e0;
	--cemacon-comment-color-input-border: #f0f0f0;
	--cemacon-comment-color-input-border-focus: #dbdbdb;
	--cemacon-comment-color-placeholder: #afafaf;
	--cemacon-comment-color-bg: #fff;
	--cemacon-comment-color-error-bg: #fdecea;
	--cemacon-comment-color-error-text: #a12622;
	--cemacon-comment-color-error-border: #f5c6c3;
	--cemacon-comment-color-success-bg: #eaf6ea;
	--cemacon-comment-color-success-text: #2a662a;
	--cemacon-comment-color-success-border: #c3e6c3;

	--cemacon-comment-font-heading: var(--cemacon-font-heading);
	--cemacon-comment-font-body: var(--cemacon-font-body);
}

.cemacon-comment-holder.clearfix::after,
.cemacon-comment.clearfix::after,
.cemacon-three-columns.clearfix::after {
	content: "";
	display: table;
	clear: both;
}

.cemacon-comment-holder { padding: 45px 0 41px; margin: 0; }
.cemacon-comment-holder .cemacon-comment-title { text-align: center; }
.cemacon-comment-holder .cemacon-comment-title > * { color: var(--cemacon-comment-color-date); font-family: var(--cemacon-comment-font-heading); }
.cemacon-comment-holder .cemacon-comment-number { text-align: center; font-family: var(--cemacon-comment-font-body); }
.cemacon-comment-holder .cemacon-comment-image { display: block; width: 70px; height: 70px; float: left; }
.cemacon-comment-holder .cemacon-comment-image img { border-radius: 50%; }
.cemacon-comment-holder .cemacon-comment-text { padding: 0 0 0 95px; min-height: 75px; }
.cemacon-comment-holder .cemacon-comment-text .cemacon-comment-info { display: inline-block; width: 100%; vertical-align: middle; position: relative; margin-bottom: 10px; }
.cemacon-comment-holder .cemacon-comment-text .cemacon-comment-name { color: var(--cemacon-comment-color-dark); font-family: var(--cemacon-comment-font-heading); }
.cemacon-comment-holder .cemacon-comment-text .cemacon-comment-date { font-size: 14px; font-family: var(--cemacon-comment-font-heading); font-weight: 400; color: var(--cemacon-comment-color-date); margin-top: -7px; display: block; }
.cemacon-comment-holder .cemacon-comment-text .cemacon-comment-link-holder { display: inline-block; position: absolute; right: 32px; top: 0; }
.cemacon-comment-holder .cemacon-comment-text .replay,
.cemacon-comment-holder .cemacon-comment-text .comment-reply-link,
.cemacon-comment-holder .cemacon-comment-text .comment-edit-link { margin-left: 10px; font-family: var(--cemacon-comment-font-heading); font-size: 14px; font-weight: 700; color: var(--cemacon-comment-color-accent); }
.cemacon-comment-holder .cemacon-comment-text .cemacon-text-holder p { font-family: var(--cemacon-comment-font-body); font-weight: 400; font-size: 14px; color: var(--cemacon-comment-color-text); }
.cemacon-comment-text .comment-respond { margin: 20px 0; }
.cemacon-comment-list { list-style: none; position: relative; z-index: 150; padding: 0; margin: 38px 0 0; }
.cemacon-comment-list li { display: inline-block; position: relative; width: 100%; }
.cemacon-comment-list > li { box-sizing: border-box; border-bottom: 1px solid var(--cemacon-comment-color-border); padding: 42px 0; }
.cemacon-comment-list > li:first-child { border-top: 1px solid var(--cemacon-comment-color-border); padding-top: 36px; }
.cemacon-comment-list .children { margin: 50px 0 0 0; padding: 0 0 0 70px; }
.cemacon-comment-list .children .children .children .children li { margin: 0 0 50px 0; }
.cemacon-comment-list .children .children .children .children li:last-child { margin: 0; }
.cemacon-comment-form { margin-bottom: 40px; font-family: var(--cemacon-comment-font-body); }
.cemacon-comment-form a { color: var(--cemacon-comment-color-accent); }
.comment-respond { font-family: var(--cemacon-comment-font-body); }
.cemacon-three-columns { width: 100%; }
.cemacon-three-columns > .cemacon-three-columns-inner { margin: 0 -15px; }
.cemacon-three-columns .cemacon-column { width: 33.33%; float: left; }
.cemacon-three-columns .cemacon-column .cemacon-column-inner { padding: 0 15px; }
@media only screen and (max-width: 768px) {
	.cemacon-three-columns .cemacon-column { width: 100%; }
}
#respond textarea, #respond input[type=text] { width: 100%; margin-bottom: 23px; padding: 10px 15px; border: 2px solid var(--cemacon-comment-color-input-border); outline: 0; font-family: var(--cemacon-comment-font-body); font-size: 14px; line-height: 24px; font-weight: 400; background-color: var(--cemacon-comment-color-bg); color: var(--cemacon-comment-color-text); box-sizing: border-box; border-radius: 3px; }
#respond textarea:focus, #respond input[type=text]:focus { border: 2px solid var(--cemacon-comment-color-input-border-focus); }
#respond textarea::placeholder, #respond input[type=text]::placeholder { color: var(--cemacon-comment-color-placeholder); }
.comment-respond .comment-reply-title { font-family: var(--cemacon-comment-font-heading); font-size: 15px; line-height: 1.5em; font-weight: 600; margin-bottom: 41px; text-align: center; }
.comment-respond .comment-reply-title a { font-size: 16px; color: var(--cemacon-comment-color-accent); }
.cemacon-comment-pager a { color: var(--cemacon-comment-color-accent); font-family: var(--cemacon-comment-font-body); }
.comment-respond .form-submit { text-align: center; }
.comment-respond .logged-in-as,
.comment-respond .comment-notes,
.comment-respond .must-log-in {
	margin-bottom: 10px;
	font-family: var(--cemacon-comment-font-body);
	font-size: 14px;
	line-height: 1.5;
	color: var(--cemacon-comment-color-text);
}
.comment-respond .logged-in-as a,
.comment-respond .comment-notes a,
.comment-respond .must-log-in a {
	font-family: inherit;
	color: var(--cemacon-comment-color-accent);
}
.comment-form-cookies-consent {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 23px;
	font-family: var(--cemacon-comment-font-body);
	font-size: 14px;
	line-height: 1.5;
	color: var(--cemacon-comment-color-text);
}
.comment-form-cookies-consent input[type="checkbox"] {
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	margin: 0;
	padding: 0;
	cursor: pointer;
}
.comment-form-cookies-consent label {
	margin: 0;
	cursor: pointer;
}
#submit_comment,
.elementor-kit-6 #submit_comment {
	display: inline-block;
	width: auto;
	height: 47px;
	line-height: 43px;
	padding: 0 37px;
	border: 2px solid var(--cemacon-comment-color-accent);
	font-size: 12px;
	letter-spacing: 0.6px;
	font-weight: 700;
	font-family: var(--cemacon-comment-font-heading);
	color: var(--cemacon-comment-color-accent);
	background-color: var(--cemacon-comment-color-bg);
	cursor: pointer;
	text-transform: uppercase;
	transition: all 0.15s ease-out;
	border-radius: 37px;
}
#submit_comment:hover { color: var(--cemacon-comment-color-bg); background-color: var(--cemacon-comment-color-accent); }
#submit_comment:focus { outline: 0; }

/* AJAX comment-form feedback message, populated by cemacon-comments.js */
.cemacon-comment-form-message {
	display: none;
	margin-bottom: 20px;
	padding: 12px 15px;
	border-radius: 3px;
	font-family: var(--cemacon-comment-font-body);
	font-size: 14px;
}
.cemacon-comment-form-message:not(:empty) {
	display: block;
}
.cemacon-comment-form-message--error {
	background-color: var(--cemacon-comment-color-error-bg);
	color: var(--cemacon-comment-color-error-text);
	border: 1px solid var(--cemacon-comment-color-error-border);
}
.cemacon-comment-form-message--success {
	background-color: var(--cemacon-comment-color-success-bg);
	color: var(--cemacon-comment-color-success-text);
	border: 1px solid var(--cemacon-comment-color-success-border);
}
#submit_comment:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

@media (min-width: 2200px) {
	.cemacon-comment-holder .cemacon-comment-text .cemacon-comment-date,
	.cemacon-comment-holder .cemacon-comment-text .replay,
	.cemacon-comment-holder .cemacon-comment-text .comment-reply-link,
	.cemacon-comment-holder .cemacon-comment-text .comment-edit-link,
	.cemacon-comment-holder .cemacon-comment-text .cemacon-text-holder p,
	#respond textarea,
	#respond input[type=text],
	.comment-respond .logged-in-as,
	.comment-respond .comment-notes,
	.comment-respond .must-log-in,
	.comment-form-cookies-consent,
	.cemacon-comment-form-message {
		font-size: 20px;
	}

	.comment-respond .comment-reply-title {
		font-size: 21px;
	}

	.comment-respond .comment-reply-title a {
		font-size: 22px;
	}

	#submit_comment,
	.elementor-kit-6 #submit_comment {
		font-size: 17px;
	}
}