/**
 * Kuchenfee Recipes — comments redesign.
 *
 * Stylesheet hooks onto the Bricks `[Post Comments]` block markup
 * (`.bricks-comments-inner` and the standard WordPress comment classes).
 * No PHP/markup changes; the upstream block keeps producing the same HTML.
 *
 * Design tokens are scoped to `.bricks-comments-inner` so the rest of the
 * site stays untouched.
 */

.bricks-comments-inner {
	--kr-c-bg: #FBF6EF;
	--kr-c-surface: #FFFFFF;
	--kr-c-surface-alt: #F6EEE0;
	--kr-c-border: #E7D9C1;
	--kr-c-border-strong: #D6BF9C;
	--kr-c-text: #2B1D16;
	--kr-c-text-muted: #7A6657;
	--kr-c-text-subtle: #A0907F;
	--kr-c-primary: #C77A3E;
	--kr-c-primary-hover: #B46B33;
	--kr-c-accent: #E8A8A0;
	--kr-c-radius: 14px;
	--kr-c-radius-sm: 10px;
	--kr-c-shadow: 0 1px 2px rgba(43, 29, 22, 0.05);
	--kr-c-gap: 18px;
	--kr-c-pad: 18px;
	--kr-c-avatar: 44px;

	max-width: 760px;
	margin: 0 auto;
	color: var(--kr-c-text);
	line-height: 1.55;
}

/* ── Header ─────────────────────────────────────────────────────────── */

.bricks-comments-inner .comments-title {
	font-size: var(--text-l);
	font-weight: 600;
	margin: 0 0 var(--kr-c-gap);
	padding-bottom: 12px;
	border-bottom: 1px solid var(--kr-c-border);
	color: var(--kr-c-text);
}

/* ── Comment list ──────────────────────────────────────────────────── */

.bricks-comments-inner .comment-list,
.bricks-comments-inner .comment-list .children {
	list-style: none;
	margin: 0;
	padding: 0;
	/* Bricks default puts `border-bottom: 1px solid` + `padding-bottom: 30px`
	   on .comment-list, drawing a line under the very last comment that
	   then collides with the reply form. Card borders already separate
	   the comments visually, so reset these. */
	border-bottom: 0;
	padding-bottom: 0;
}

.bricks-comments-inner .comment-list .children {
	margin-top: 14px;
	border-left: 2px solid var(--kr-c-border);
}

/* Thread indent — explicit per-depth so the cascading default (~60 px from
   ACSS / Bricks) is fully overridden. Keep modest at 20 px so the cards
   stay readable on mobile. */
.brxe-post-comments .depth-2,
.brxe-post-comments .depth-3 {
	margin-left: 20px;
}

.bricks-comments-inner .comment-list > li.comment,
.bricks-comments-inner .comment-list .children > li.comment {
	margin-bottom: 14px;
	/* Bricks default puts `border-top: 1px solid` + `padding-top: 30px` on
	   each .comment, drawing a thin line above every card that looks
	   off-centered next to the rounded card. Card border already
	   delimits the comment, so kill the upstream separator + spacing. */
	border-top: 0;
	padding-top: 0;
}

.bricks-comments-inner .comment-list > li.comment:last-child {
	margin-bottom: 0;
}

.bricks-comments-inner .comment-body {
	display: grid;
	grid-template-columns: var(--kr-c-avatar) 1fr;
	grid-template-areas:
		"avatar header"
		"avatar content";
	column-gap: 14px;
	row-gap: 8px;
	background: var(--kr-c-surface);
	border: 1px solid var(--kr-c-border);
	border-radius: var(--kr-c-radius);
	padding: var(--kr-c-pad);
	box-shadow: var(--kr-c-shadow);
}

/* ── Avatar (Gravatar OR fallback bubble) ──────────────────────────── */

/* Fallback person glyph rendered as a background-image so it stays visible
   even when WordPress injects a transparent/blank Gravatar <img> for
   logged-in users (Bricks behaves differently in that state — the avatar
   div is no longer :empty, so a ::before fallback would never match). The
   real Gravatar <img>, if it loads with content, sits on top and covers
   the glyph. */
.bricks-comments-inner .comment-avatar {
	grid-area: avatar;
	width: var(--kr-c-avatar);
	height: var(--kr-c-avatar);
	border-radius: 50%;
	overflow: hidden;
	flex-shrink: 0;
	background-color: var(--kr-c-surface-alt);
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23C77A3E'><path d='M12 12.75c2.49 0 4.5-2.01 4.5-4.5S14.49 3.75 12 3.75 7.5 5.76 7.5 8.25s2.01 4.5 4.5 4.5zm0 2.25c-3 0-9 1.51-9 4.5v2.25h18v-2.25c0-2.99-6-4.5-9-4.5z'/></svg>");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 50% 50%;
}

.bricks-comments-inner .comment-avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 50%;
	display: block;
	background: var(--kr-c-surface-alt);
}

/* ── Comment header (data) ─────────────────────────────────────────── */

.bricks-comments-inner .comment-data {
	grid-area: header;
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.bricks-comments-inner .comment-author {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.bricks-comments-inner .comment-author .fn {
	font-size: var(--text-m);
	font-weight: 600;
	color: var(--kr-c-text);
	margin: 0;
	font-style: normal;
	line-height: 1.3;
}

.bricks-comments-inner .comment-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	font-size: var(--text-s);
	color: var(--kr-c-text-subtle);
	line-height: 1.3;
}

.bricks-comments-inner .comment-meta a {
	color: var(--kr-c-text-muted);
	text-decoration: none;
}

.bricks-comments-inner .comment-meta a:hover {
	color: var(--kr-c-primary);
	text-decoration: underline;
}

.bricks-comments-inner .comment-meta .reply {
	margin-left: auto;
}

/* Style both reply-link variants the same way: comment-reply-login (logged
   out — "Zum Antworten anmelden") and comment-reply-link (logged in —
   "Antworten"). Bricks default rule sets `.comment-reply-link` to
   `position: absolute; top: 0; right: 0; text-transform: uppercase` —
   reset all three so the pill flows inline with the meta row. Color
   tokens come from AutomaticCSS so the pill stays in sync with the
   site-wide brand. */
.bricks-comments-inner .comment-reply-login,
.bricks-comments-inner .comment-reply-link,
.bricks-comments-inner .comment-meta .reply a {
	position: static;
	top: auto;
	right: auto;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 4px 10px;
	font-size: var(--text-xs);
	font-weight: 500;
	color: var(--primary-dark);
	background: var(--kr-c-surface-alt);
	border-radius: 999px;
	border: 1px solid transparent;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
	text-decoration: none;
	text-transform: none;
	letter-spacing: normal;
	min-height: 28px;
}

.bricks-comments-inner .comment-reply-login:hover,
.bricks-comments-inner .comment-reply-link:hover,
.bricks-comments-inner .comment-meta .reply a:hover {
	background: var(--kr-c-surface);
	border-color: var(--kr-c-border-strong);
	color: var(--primary-ultra-dark);
	text-decoration: none;
}

/* ── Comment content ───────────────────────────────────────────────── */

.bricks-comments-inner .comment-content {
	grid-area: content;
	color: var(--kr-c-text);
	font-size: var(--text-m);
	line-height: 1.6;
}

.bricks-comments-inner .comment-content p {
	margin: 0 0 8px;
}

.bricks-comments-inner .comment-content p:last-child {
	margin-bottom: 0;
}

.bricks-comments-inner .comment-content a {
	color: var(--kr-c-primary);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.bricks-comments-inner .comment-content a:hover {
	color: var(--kr-c-primary-hover);
}

/* ── Reply / submit form (.comment-respond) ────────────────────────── */

.bricks-comments-inner .comment-respond {
	margin-top: 28px;
	padding: 24px;
	background: var(--kr-c-surface-alt);
	border: 1px solid var(--kr-c-border);
	border-radius: var(--kr-c-radius);
}

.bricks-comments-inner .comment-reply-title {
	font-size: var(--text-l);
	font-weight: 600;
	margin: 0 0 16px;
	color: var(--kr-c-text);
}

.bricks-comments-inner .comment-reply-title small {
	font-weight: 400;
	font-size: var(--text-s);
	margin-left: 8px;
}

.bricks-comments-inner .comment-reply-title small a {
	color: var(--kr-c-primary);
	text-decoration: none;
}

.bricks-comments-inner .comment-reply-title small a:hover {
	color: var(--kr-c-primary-hover);
	text-decoration: underline;
}

.bricks-comments-inner .comment-form-comment,
.bricks-comments-inner .comment-form-author,
.bricks-comments-inner .comment-form-email,
.bricks-comments-inner .comment-form-url,
.bricks-comments-inner .comment-form-cookies-consent {
	margin-bottom: 14px;
}

.bricks-comments-inner .comment-form label {
	display: block;
	font-size: var(--text-s);
	font-weight: 500;
	color: var(--kr-c-text-muted);
	margin-bottom: 6px;
}

.bricks-comments-inner .comment-form input[type="text"],
.bricks-comments-inner .comment-form input[type="email"],
.bricks-comments-inner .comment-form input[type="url"],
.bricks-comments-inner .comment-form textarea {
	width: 100%;
	padding: 10px 12px;
	font-size: var(--text-m);
	color: var(--kr-c-text);
	background: var(--kr-c-surface);
	border: 1px solid var(--kr-c-border);
	border-radius: var(--kr-c-radius-sm);
	font-family: inherit;
	line-height: 1.4;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
	box-sizing: border-box;
	min-height: 44px;
}

.bricks-comments-inner .comment-form textarea {
	min-height: 120px;
	resize: vertical;
}

.bricks-comments-inner .comment-form input:focus,
.bricks-comments-inner .comment-form textarea:focus {
	outline: none;
	border-color: var(--kr-c-primary);
	box-shadow: 0 0 0 3px rgba(199, 122, 62, 0.18);
}

.bricks-comments-inner .comment-form-cookies-consent {
	display: flex;
	align-items: flex-start;
	gap: 8px;
}

.bricks-comments-inner .comment-form-cookies-consent input[type="checkbox"] {
	margin-top: 3px;
	flex-shrink: 0;
}

.bricks-comments-inner .comment-form-cookies-consent label {
	margin-bottom: 0;
	color: var(--kr-c-text-muted);
	font-weight: 400;
}

.bricks-comments-inner .form-submit {
	margin-top: 4px;
	margin-bottom: 0;
}

/* Use AutomaticCSS primary tokens for the submit button. ACSS' default
   .btn--primary maps to --primary-medium, which on this site is
   #ccb18f (sandy beige) — too light for readable white text. Switch to
   --primary-dark (#7a5e38 / medium brown) so white text passes WCAG AA
   contrast. Hover lightens to --primary-semi-dark (#af8650 warm tan).

   The Bricks template "Single - Rezepte (noads)" (post 44763) carries
   a per-element CSS override `.form-submit input#submit { background:
   var(--primary) !important; }` on the comments element brxe-fcc552
   that forces the cream `--primary` (#F9F6F2) — defeated here by
   matching the `input#submit` ID and using `!important`. Once that
   Bricks override is removed in the builder UI, the !important here
   can be dropped. */
.bricks-comments-inner .form-submit input[type="submit"],
.bricks-comments-inner .form-submit input#submit,
.bricks-comments-inner .submit {
	--btn-background: var(--primary-dark);
	--btn-background-hover: var(--primary-semi-dark);
	--btn-text-color: var(--white);
	--btn-text-color-hover: var(--white);
	--btn-border-color: var(--primary-dark);
	--btn-border-color-hover: var(--primary-semi-dark);

	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 12px 24px;
	font-size: var(--text-m);
	font-weight: 700;
	color: var(--btn-text-color) !important;
	background: var(--btn-background) !important;
	border: 2px solid var(--btn-border-color) !important;
	border-radius: var(--kr-c-radius-sm);
	cursor: pointer;
	font-family: inherit;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
	min-height: 44px;
	min-width: 120px;
	text-transform: none;
	letter-spacing: normal;
}

.bricks-comments-inner .form-submit input[type="submit"]:hover,
.bricks-comments-inner .form-submit input#submit:hover,
.bricks-comments-inner .submit:hover {
	background: var(--btn-background-hover) !important;
	border-color: var(--btn-border-color-hover) !important;
	color: var(--btn-text-color-hover) !important;
}

.bricks-comments-inner .logged-in-as {
	font-size: var(--text-s);
	color: var(--kr-c-text-muted);
	margin-bottom: 14px;
}

.bricks-comments-inner .logged-in-as a {
	color: var(--kr-c-primary);
	text-decoration: none;
}

.bricks-comments-inner .logged-in-as a:hover {
	text-decoration: underline;
}

.bricks-comments-inner .comment-notes {
	font-size: var(--text-s);
	color: var(--kr-c-text-muted);
	margin-bottom: 14px;
}

/* ── Mobile — collapse meta below name, hide reply at edge ─────────── */

@media (max-width: 640px) {
	.bricks-comments-inner {
		--kr-c-pad: 14px;
		--kr-c-avatar: 38px;
	}

	.bricks-comments-inner .comment-body {
		column-gap: 12px;
	}

	.bricks-comments-inner .comment-meta {
		font-size: var(--text-xs);
	}

	.bricks-comments-inner .comment-meta .reply {
		margin-left: 0;
	}

	/* Tighter thread indent on mobile so the card content keeps breathing room. */
	.brxe-post-comments .depth-2,
	.brxe-post-comments .depth-3 {
		margin-left: 12px;
	}

	.bricks-comments-inner .comment-respond {
		padding: 18px;
	}
}