/**
 * Comments Template Styles
 *
 * Handles the two-column grid layout and styling for the comment form.
 *
 * @package TCS_Child
 */

/* Card around the comment form */
.comment-respond {
	background: #fff !important;
	border-radius: 1rem !important;
	padding: 1.5rem !important;
	box-shadow: 0 4px 20px rgba(0,0,0,0.08) !important;
}

/* Title inside the card */
.comment-respond .comment-reply-title {
	font-size: var(--font-size-h3, 1.125rem) !important;
	font-weight: 700 !important;
	margin-bottom: 1rem !important;
}

p {
	margin-bottom: 0.2rem;
}

/* Two‑column grid */
.c-comment-form-grid {
	display: grid !important;
	grid-template-columns: 1fr 1fr !important;
	grid-template-rows: auto auto auto auto auto !important;
	column-gap: 2rem !important;
	row-gap: 0.1rem !important;
	align-items: start !important;
}

/* Full‑width rows */
.c-comment-form-grid .comment-notes {
	grid-row: 1 !important; 
	grid-column: 1 / -1 !important;
}

.c-comment-form-grid .comment-form-cookies-consent {
	grid-row: 5 !important; 
	grid-column: 1 / -1 !important;
	margin-top: 0.1rem;
}

.c-comment-form-grid .form-submit {
	grid-row: 6 !important; 
	grid-column: 1 / -1 !important;
	justify-self: end !important;
}

/* Left column: Name, Email, Website */
.c-comment-form-grid .comment-form-author { 
	grid-row: 2 !important; 
	grid-column: 1 !important; 
}

.c-comment-form-grid .comment-form-email { 
	grid-row: 3 !important; 
	grid-column: 1 !important; 
}

.c-comment-form-grid .comment-form-url { 
	grid-row: 4 !important; 
	grid-column: 1 !important; 
}

/* Right column: Comment */
.c-comment-form-grid .comment-form-comment {
	grid-row: 2 / 5 !important; 
	grid-column: 2 !important;
	align-self: start !important;
}

.c-comment-form-grid .comment-form-comment textarea {
	min-height: 100px;
	max-height: 200px;
	height: auto !important;
}

/* Tighten left‑column fields */
.c-comment-form-grid .comment-form-author,
.c-comment-form-grid .comment-form-email,
.c-comment-form-grid .comment-form-url {
	margin-bottom: 0.1rem !important;
	margin-top: 0.1rem;
}

.c-comment-form-grid .comment-form-author input,
.c-comment-form-grid .comment-form-email input,
.c-comment-form-grid .comment-form-url input {
	margin-bottom: 0 !important;
}

/* Label styling */
.c-comment-form-grid label {
	font-weight: 600 !important;
	font-size: var(--font-size-sm, 0.9rem) !important;
	display: block !important;
	margin-bottom: 0.25rem !important;
}

/* Input and textarea styling */
.c-comment-form-grid input[type="text"],
.c-comment-form-grid input[type="email"],
.c-comment-form-grid input[type="url"],
.c-comment-form-grid textarea {
	width: 100% !important;
	padding: 0.5rem 0.5rem !important;
	border: 1.5px solid rgba(0,0,0,0.15) !important;
	border-radius: 0.5rem !important;
	background: #faf8f5 !important;
	font-family: var(--font-body, 'Plus Jakarta Sans', sans-serif) !important;
	font-size: var(--font-size-sm, 0.9rem) !important;
	transition: border-color 0.2s, box-shadow 0.2s !important;
	margin-bottom: 0rem !important;
}

.c-comment-form-grid input:focus,
.c-comment-form-grid textarea:focus {
	border-color: var(--color-primary, #5900a8) !important;
	box-shadow: 0 0 0 3px rgba(89,0,168,0.15) !important;
	outline: none !important;
	background: #fff !important;
}

/* Unified purple pill button */
.c-comment-form-grid .submit {
	background: var(--color-primary, #5900a8) !important;
	color: #fff !important;
	border: none !important;
	padding: 1rem 1.5rem !important;
	font-size: var(--font-size-sm, 0.9rem) !important;
	font-weight: 700 !important;
	border-radius: 999px !important;
	cursor: pointer !important;
	font-family: var(--font-body, 'Plus Jakarta Sans', sans-serif) !important;
	transition: background 0.2s !important;
	margin-top: 0.5rem !important;
}

.c-comment-form-grid .submit:hover {
	background: var(--color-primary-hover, #6778a9) !important;
}

/* Align top edges of left‑column fields and right‑column textarea */
.c-comment-form-grid .comment-form-author,
.c-comment-form-grid .comment-form-comment {
	margin-top: 0 !important;
}

.c-comment-form-grid .comment-form-author label,
.c-comment-form-grid .comment-form-comment label {
	margin-top: 0 !important;
	line-height: 1.3;
}

.c-comment-form-grid .comment-form-author input,
.c-comment-form-grid .comment-form-comment textarea {
	margin-top: 0 !important;
	padding-top: 0.5rem !important;
}

/* Mobile – single column */
@media (max-width: 600px) {
	.c-comment-form-grid {
		grid-template-columns: 1fr !important;
	}
	
	.c-comment-form-grid .comment-form-comment,
	.c-comment-form-grid .comment-form-author,
	.c-comment-form-grid .comment-form-email,
	.c-comment-form-grid .comment-form-url,
	.c-comment-form-grid .form-submit {
		grid-column: 1 !important;
		grid-row: auto !important;
	}
	
	.c-comment-form-grid .comment-form-comment { 
		grid-row: auto !important; 
	}
	
	.c-comment-form-grid .comment-form-comment textarea { 
		height: auto !important; 
	}
	
	.c-comment-form-grid .form-submit { 
		justify-self: center !important; 
	}
}