/*
 * The comment section in the new design, shared by the recipe page and the article page
 * (comment-section.html, comment-form.html, reply-form.html; comment_script.js needs only their
 * IDs and button[type=submit]). Scoped .cm, the class on each page's wrapper around the section,
 * and loaded after comment_styles.css, the old shared styles it changes. Moved here from
 * recipe_page.css as it was, with its own tokens (the recipe page's values).
 */

.cm {
	--cm-ink: #1A2518;
	--cm-muted: #5F6B5B;
	--cm-star: #ff912c;
	--cm-display: 'Cotoris Bold', 'Hind Vadodara', sans-serif;
	--cm-sans: 'Hind Vadodara', sans-serif;
}

/* The comment and reply forms, as on the tablet (AddComment): a large rounded box for the text,
   pill fields with an icon, then the stars and a green "Post comment" pill on one row. White
   fields with the apps' 2px green border, a lighter green while typing. comment_script.js only
   needs the IDs and button[type=submit] */
/* The comment column: a reading width, the same as the questions above (52rem), with the form
   as wide as the comments. text-align: the old container's align="center" passes down
   -webkit-center, which centres blocks */
.cm #comment-section {
	max-width: 52rem;
	text-align: left;
}

.cm #comment-section > h2 {
	margin: 0 0 .25rem;
	color: var(--cm-ink);
	font-family: var(--cm-display);
	font-size: clamp(1.6rem, 5vw, 2rem);
	font-weight: normal;
	letter-spacing: -.015em;
	text-align: left;
}

.cm #comment-form {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: .55rem 1rem;
	margin: 0;   /* the old container's align="center" would centre it */
	padding-top: 1rem !important;
	text-align: left;
}

.cm #comment-form > * {
	grid-column: 1 / -1;
	margin: 0;
}

.cm #comment-form > .cf-turnstile { order: 2; }
.cm #comment-form > .form-group:has(#stars) { order: 3; grid-column: 1; }
.cm #comment-form > button[type="submit"] { order: 4; grid-column: 2; }

.cm #comment-form .form-group,
.cm #reply-form .form-group {
	margin: 0;
}

.cm #comment-form p:empty,
.cm #reply-form p:empty {
	display: none;
}

/* The wrapper of the hidden fields (content type, object id): no room (they still submit) */
.cm #comment-form > div:not(.form-group):has(> p > input[type="hidden"]) {
	display: none;
}

.cm #comment-form .form-group p {
	margin: 0;
}

.cm #comment-form textarea.form-control,
.cm #reply-form textarea.form-control {
	height: 8.5rem;
	min-height: 6rem;
	padding: .75rem 1rem;
	border: 2px solid #507137;
	border-radius: 20px;
	background: #fff;
	color: var(--cm-ink);
	font-family: var(--cm-sans);
	font-size: 1.0625rem;
	line-height: 1.5;
	resize: vertical;
	box-shadow: none;
}

.cm #comment-form input.form-control,
.cm #reply-form input.form-control {
	height: 3rem;
	padding: .2rem 1rem 0 2.6rem;
	border: 2px solid #507137;
	border-radius: 999px;
	background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%235F6B5B' d='M8 8a3.25 3.25 0 1 0 0-6.5A3.25 3.25 0 0 0 8 8zm0 1.4c-3.2 0-5.75 1.6-5.75 3.6v.85c0 .4.33.65.7.65h10.1c.37 0 .7-.25.7-.65V13c0-2-2.55-3.6-5.75-3.6z'/%3E%3C/svg%3E") 1rem 50% / 1rem no-repeat;
	color: var(--cm-ink);
	font-family: var(--cm-sans);
	font-size: 1rem;
	box-shadow: none;
}

.cm #comment-form input[type="email"].form-control,
.cm #reply-form input[type="email"].form-control {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%235F6B5B' d='M1.5 3.5h13A1 1 0 0 1 15.5 4.5v7a1 1 0 0 1-1 1h-13a1 1 0 0 1-1-1v-7a1 1 0 0 1 1-1zm.6 1.3 5.9 4.1 5.9-4.1H2.1zm11.9 1.2-5.6 3.9a.7.7 0 0 1-.8 0L2 6v5.2h12V6z'/%3E%3C/svg%3E");
}

.cm #comment-form .form-control:focus,
.cm #reply-form .form-control:focus {
	border-color: #75A153;
	outline: none;
	box-shadow: 0 0 0 4px rgba(117, 161, 83, .18);
}

.cm #comment-form .form-control::placeholder,
.cm #reply-form .form-control::placeholder {
	color: var(--cm-muted);
	font-family: var(--cm-sans);   /* the site sets placeholders in its display font */
	opacity: 1;
}

/* Name and email side by side from 576px */
.cm #comment-form > .row,
.cm #reply-form .row {
	display: grid;
	gap: .55rem;
	margin: 0;
}

.cm #comment-form > .row > .hide-vw-sm,
.cm #reply-form .row > .hide-vw-sm {
	display: none;
}

.cm #comment-form > .row > .col-sm,
.cm #reply-form .row > .col-sm {
	padding: 0;
}

@media (min-width: 576px) {
	.cm #comment-form > .row,
	.cm #reply-form .row {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* The warnings comment_script.js writes under a field */
.cm #comment-form [class$="_warn"]:not(:empty),
.cm #reply-form [class$="_warn"]:not(:empty) {
	margin: .3rem 0 0 1rem;
	color: #B4553D;
	font-size: .875rem;
}

/* The stars, without a label (as on the tablet; screen readers still get it) */
.cm #comment-form > .form-group:has(#stars) {
	display: flex;
	align-items: center;
}

.cm #comment-form > .form-group:has(#stars) h5 {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.cm #comment-form .rating-stars {
	display: block;
	padding: 0 !important;
}

.cm #comment-form #stars {
	display: flex;
	gap: .15rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.cm #comment-form #stars li.star-sub {
	cursor: pointer;
}

.cm #comment-form #stars li.star-sub > i.fa {
	font-size: 1.5rem;
	color: rgba(26, 37, 24, .22);
	transition: color .15s;
}

.cm #comment-form #stars li.star-sub.hover > i.fa { color: #ffb347; }
.cm #comment-form #stars li.star-sub.selected > i.fa { color: var(--cm-star); }

/* Post comment / Post reply: the apps' green pill with the paper plane */
.cm #comment-form button[type="submit"],
.cm #reply-form button[type="submit"] {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	min-height: 2.75rem;
	padding: .55rem 1.2rem .45rem 1.3rem;
	border: 0;
	border-radius: 999px;
	background: #507137;
	color: #fff;
	font-family: var(--cm-sans);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.2;
	white-space: nowrap;
	box-shadow: none;
	transition: background-color .2s, opacity .2s;
}

.cm #comment-form button[type="submit"]:hover,
.cm #reply-form button[type="submit"]:hover {
	background: #3E5530;
	color: #fff;
}

.cm #comment-form button[type="submit"]:disabled,
.cm #reply-form button[type="submit"]:disabled {
	opacity: .6;
}

.cm .rp-plane {
	width: 1rem;
	height: 1rem;
	margin-top: -.1rem;
}

.cm #reply-form {
	display: grid;
	gap: .55rem;
	margin-top: .75rem;
	text-align: left;
}

.cm #reply-form.hidden {
	display: none;
}

.cm #reply-form > div:has(> p > input[type="hidden"]) {
	display: none;
}

.cm #reply-form button[type="submit"] {
	justify-self: end;
}

/* The reply button, as in the apps (ReplyButton): a green pill with "Reply" and the arrow */
.cm .reply-button.badge {
	display: inline-flex;
	align-items: center;
	min-height: 1.75rem;
	margin-top: .5rem;
	padding: .3rem .8rem .22rem .9rem;
	border-radius: 999px;
	background: #507137;   /* the apps' green.primary */
	color: #fff;
	cursor: pointer;
	transition: background-color .2s;
}

.cm .reply-button.badge:hover {
	background: #3E5530;
}

.cm .reply-button.inactive {
	display: none;
}

.cm .reply-button .reply-link {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	padding: 0;
	color: #fff;
	font-size: .875rem;
	font-weight: 500;
	line-height: 1.2;
}

.cm .reply-button .reply-link svg {
	width: .8rem;
	height: .8rem;
	margin-top: -.1rem;
}