/* ───────────────────────────────────────────────────────────────
   comments.css — Comment thread and form on single posts
   ───────────────────────────────────────────────────────────────
   Typography hierarchy (kept deliberately small):
     • Meta / labels  → Encode Sans Expanded, xs, uppercase, 1px tracking
     • Body / prompts → Source Serif 4, small

   Core's markup for one comment is a flat stack of divs inside an <li>:

       li.comment
         .wp-block-comment-author-name
         .wp-block-comment-date
         .wp-block-comment-content
         .wp-block-comment-reply-link
         ol            ← nested replies, if any

   Stacked as-is, the author and the date each take a full line, which makes
   every comment twice as tall as it needs to be and leaves the name floating
   away from its own text. The grid below pulls the two meta items onto one
   line and keeps everything else full width.
   ─────────────────────────────────────────────────────────────── */

/* Pulled up under the article's bottom padding. `.blik-single-content` ends in
   a 64px reading pad and this used to add another 32px on top — 96px of dead
   space between the last block (the Lees ook card) and the comments heading.
   The negative margin eats most of the article pad so the two sit closer,
   while the article's own bottom padding is preserved for pages without
   comments. */
/* Defensively strip any top border or block-start margin WordPress core or
   global styles try to add above the comments block's INNER elements. The
   section itself is handled just below — it must keep its negative margin, so
   it is deliberately not in this reset. */
.blik-comments-section .wp-block-comments,
.blik-comments-section .wp-block-comments > * {
	border-top: none;
	margin-block-start: 0;
}

/* Pulled up under the article's bottom padding. `.blik-single-content` ends in
   a 64px reading pad and this used to add another 32px on top — 96px of dead
   space between the last block (the Lees ook card) and the comments heading.
   The negative margin eats most of the article pad so the two sit closer,
   while the article's own bottom padding is preserved for pages without
   comments.

   WordPress 6.6+ emits its block-gap as `.wp-container-x.wp-container-x > *`
   — a DOUBLED class, (0,2,0) — which zeroed a plain `.blik-comments-section`
   rule. The comments section is always the sibling immediately after the
   content group, so the adjacent-sibling selector matches (0,2,0) and, loaded
   after core, wins the tie. */
.blik-single-content + .blik-comments-section {
	border-top: none;
	margin-block-start: calc(-1 * var(--blik-spacing-2xl));
	padding-top: var(--blik-spacing-lg);
}

/* ── Section heading ── */
.blik-comments-section .wp-block-comments-title {
	font-family: var(--wp--preset--font-family--encode-sans-expanded);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--blik-color-muted);
	margin: 0 0 var(--blik-spacing-xl);
}

/* ── One comment ───────────────────────────────────────────────
   Two columns: the meta row sits on line 1 (name, then date), everything
   else spans both. `align-items: baseline` keeps name and date on the same
   typographic baseline despite their different weights. */
.blik-comments-section .wp-block-comment-template {
	list-style: none;
	margin: 0;
	padding: 0;
}

.blik-comments-section .wp-block-comment-template li {
	display: grid;
	/* NAME · DATE 💯 BEANTWOORDEN on one line, everything else full width. */
	grid-template-columns: auto auto auto 1fr;
	align-items: baseline;
	list-style: none;
	/* Space BETWEEN comments. Everything inside one is tighter than this, so
	   each comment reads as a single block rather than four loose lines. */
	margin: 0 0 var(--blik-spacing-2xl);
}

.blik-comments-section .wp-block-comment-template li:last-child {
	margin-bottom: 0;
}

.blik-comments-section .wp-block-comment-author-name {
	grid-column: 1;
	grid-row: 1;
}

.blik-comments-section .wp-block-comment-date {
	grid-column: 2;
	grid-row: 1;
	margin-top: 0;
}

.blik-comments-section .wp-block-comment-content {
	grid-column: 1 / -1;
	grid-row: 2;
	margin-top: 8px;
}

/* ── Action chips: 💯 and Beantwoorden share the meta line ──
   Reddit-style: one compact row of chrome per comment rather than a
   full-width "Beantwoorden" line of its own. That line was both wasted
   vertical space on a phone and a large, easy target to land a thumb on
   when starting a scroll. */
.blik-comments-section .wp-block-comment-reply-link {
	grid-column: 4;
	grid-row: 1;
	justify-self: start;
	margin-left: 8px;
}

/* The 💯 button sits on the meta line beside the date. It is rendered after
   the comment body (the only block that carries commentId context), but grid
   placement is independent of DOM order, so it lands where it belongs. */
.blik-hundred-wrap {
	grid-column: 3;
	grid-row: 1;
	justify-self: start;
	margin-left: 12px;
}

/* Nested replies get their own row so they clear everything above.
   Row order inside one comment: 1 meta · 2 content · 3 💯 · 4 reply · 5 replies.
   This has to stay the last row — when the 💯 button was inserted at row 3 the
   reply link moved to 4 and collided with this list, which was still pinned to
   4, so "Beantwoorden" rendered on top of the first reply's author name. */
.blik-comments-section .wp-block-comment-template li > ol {
	grid-column: 1 / -1;
	grid-row: 3;
}

/* ── Meta line: NAME · DATE ── */
.blik-comments-section .wp-block-comment-author-name,
.blik-comments-section .wp-block-comment-author-name a {
	font-family: var(--wp--preset--font-family--encode-sans-expanded);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 700;
	letter-spacing: 1px;
	line-height: 1;
	text-transform: uppercase;
	color: var(--blik-color-ink);
	text-decoration: none;
}

.blik-comments-section .wp-block-comment-date,
.blik-comments-section .wp-block-comment-date a {
	font-family: var(--wp--preset--font-family--encode-sans-expanded);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 400;
	letter-spacing: 1px;
	line-height: 1;
	text-transform: uppercase;
	color: var(--blik-color-muted);
	text-decoration: none;
}

/* The same dot separator the article byline uses (date · author, single.css),
   so comment meta and article meta read as one family. */
.blik-comments-section .wp-block-comment-date::before {
	content: "·";
	margin: 0 0.45em;
	color: var(--blik-color-muted);
}

/* ── Comment body ── */
.blik-comments-section .wp-block-comment-content,
.blik-comments-section .wp-block-comment-content p {
	font-family: var(--wp--preset--font-family--source-serif-4);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.5;
	color: var(--blik-color-ink);
}

.blik-comments-section .wp-block-comment-content p {
	margin: 0;
}

.blik-comments-section .wp-block-comment-content p + p {
	margin-top: 0.7em;
}

/* ── Reply link ──
   Muted by default, red on hover — the same behaviour as the article byline
   links. A column of bold red "BEANTWOORDEN" labels shouted over the comments
   themselves; the action stays available without competing with the text. */
.blik-comments-section .wp-block-comment-reply-link a {
	display: inline-flex;
	align-items: center;
	/* 8px vertical padding lifts the tap target from 16px to ~32px tall. The
	   visible chip stays small; the touchable area is what grows. */
	padding: 8px 10px;
	margin: -8px -10px;
	font-family: var(--wp--preset--font-family--encode-sans-expanded);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 400;
	letter-spacing: 0.5px;
	line-height: 1;
	text-transform: uppercase;
	color: var(--blik-color-muted);
	text-decoration: none;
	transition: color var(--blik-transition-fast);
	-webkit-tap-highlight-color: transparent;
}

.blik-comments-section .wp-block-comment-reply-link a:hover {
	color: var(--blik-color-red);
}

/* ── Threading ──
   Core indents nested lists with a bare `padding-left: 2rem` and NO top
   margin, so a reply collided with the reply link of the comment it answers.
   A hairline rule replaces the guesswork: it shows thread depth explicitly
   and gives the indent a reason to exist. */
.blik-comments-section .wp-block-comment-template ol {
	list-style: none;
	margin: var(--blik-spacing-xl) 0 0;
	padding-left: clamp(16px, 3vw, 28px);
	border-left: 1px solid var(--blik-color-line);
}

.blik-comments-section .wp-block-comment-template ol li:last-child {
	margin-bottom: 0;
}

.blik-comments-section .wp-block-avatar img {
	width: 40px;
	height: 40px;
	border-radius: 0;
	object-fit: cover;
}

/* ── Comment form ──────────────────────────────────────────────
   Separated from the thread by whitespace, not a rule — the only line in this
   section is the vertical thread indicator above, which is structural.

   The bottom margin matters more than it looks: `comment-reply.js` MOVES this
   whole form up into the thread when you hit Beantwoorden, so in that state it
   sits between two comments. Without it, the next comment collided with the
   Plaatsen button. In its default position at the end it doubles as breathing
   room before the footer, which was flush against the button. */
.blik-comments-section .comment-respond {
	margin-top: calc(var(--blik-spacing-2xl) * 1.75);
	margin-bottom: calc(var(--blik-spacing-2xl) * 1.75);
}

/* The reply title and the cancel button share one row. */
.blik-comments-section .comment-reply-title {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px;
	font-family: var(--wp--preset--font-family--encode-sans-expanded);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--blik-color-muted);
	margin: 0 0 var(--blik-spacing-lg);
}

/* ── "Reactie annuleren" ──
   Core pins this link to the MEDIUM preset:

       .wp-block-post-comments-form .comment-reply-title :where(small) {
           font-size: var(--wp--preset--font-size--medium, smaller);
       }

   which rendered it half again as large as the heading it sits inside.
   :where() carries zero specificity, so core scores (0,2,0) and a plain
   element selector beats it — no !important needed.

   Styled as the theme's standard button (theme.json core/button: red, xs,
   700, 1.5px tracking, square corners) at the same text size as the heading
   beside it, with tighter padding so it sits on the line rather than
   dominating it. */
.blik-comments-section .comment-reply-title small {
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 400;
	margin: 0;
}

.blik-comments-section #cancel-comment-reply-link {
	display: inline-block;
	background-color: var(--blik-color-red);
	color: var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--encode-sans-expanded);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 700;
	letter-spacing: 1.5px;
	line-height: 1;
	text-transform: uppercase;
	text-decoration: none;
	padding: 7px 14px;
	border: 0;
	border-radius: 0;
	transition: background-color var(--blik-transition-fast);
}

.blik-comments-section #cancel-comment-reply-link:hover {
	background-color: var(--blik-color-purple);
	color: var(--wp--preset--color--base);
}

.blik-comments-section .comment-form-comment {
	margin-bottom: var(--blik-spacing-lg);
}

.blik-comments-section .comment-form-comment textarea {
	width: 100%;
	max-width: 100%;
	border: 1px solid var(--blik-color-line);
	border-radius: 0;
	box-shadow: none;
	padding: 12px 14px;
	font-family: var(--wp--preset--font-family--source-serif-4);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.5;
	color: var(--blik-color-ink);
	background: var(--wp--preset--color--base);
	box-sizing: border-box;
	resize: vertical;
	transition: border-color var(--blik-transition-fast);
	-webkit-appearance: none;
}

.blik-comments-section .comment-form-comment textarea:focus {
	border-color: var(--blik-color-red);
	box-shadow: none;
	outline: none;
}

.blik-comments-section .form-submit {
	margin-top: 0;
	margin-bottom: 0;
}

.blik-comments-section .form-submit input[type="submit"] {
	display: inline-flex;
	align-items: center;
	background-color: var(--blik-color-red);
	color: var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--encode-sans-expanded);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 700;
	letter-spacing: 1.5px;
	line-height: 1;
	text-transform: uppercase;
	padding: 13px 24px;
	border: none;
	border-radius: 0;
	box-shadow: none;
	cursor: pointer;
	transition: background-color var(--blik-transition-fast);
	-webkit-appearance: none;
}

.blik-comments-section .form-submit input[type="submit"]:hover {
	background-color: var(--blik-color-purple);
}

/* ── Login prompt (logged-out visitors) ── */
.blik-comments-section .blik-must-log-in {
	font-family: var(--wp--preset--font-family--source-serif-4);
	font-size: var(--wp--preset--font-size--small);
	color: var(--blik-color-muted);
	margin: 0;
}

.blik-comments-section .blik-must-log-in a {
	color: var(--blik-color-red);
	text-decoration: none;
	transition: color var(--blik-transition-fast);
}

.blik-comments-section .blik-must-log-in a:hover {
	color: var(--blik-color-purple);
}

/* ── 💯 upvote ──
   Grey until you press it, red once you have. The emoji itself is greyscaled
   with a filter rather than swapped for a second image, so there is only one
   glyph to maintain and it inherits whatever the system renders 💯 as. */
.blik-hundred {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 6px 10px 6px 8px;
	border: 1px solid var(--blik-color-line);
	border-radius: 999px;
	background: transparent;
	cursor: pointer;
	font-family: var(--wp--preset--font-family--encode-sans-expanded);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.5px;
	color: var(--blik-color-muted);
	text-decoration: none;
	transition: color var(--blik-transition-fast), border-color var(--blik-transition-fast);
	-webkit-tap-highlight-color: transparent;
}

.blik-hundred__icon {
	font-size: 13px;
	line-height: 1;
	/* Desaturated + dimmed while inactive. */
	filter: grayscale(1);
	opacity: 0.55;
	transition: filter var(--blik-transition-fast), opacity var(--blik-transition-fast);
}

.blik-hundred:hover {
	color: var(--blik-color-ink);
	border-color: var(--blik-color-muted);
}

.blik-hundred:hover .blik-hundred__icon {
	filter: grayscale(0.4);
	opacity: 0.85;
}

/* Voted: full-colour emoji, red count and border. */
.blik-hundred.is-voted {
	color: var(--blik-color-red);
	border-color: var(--blik-color-red);
}

.blik-hundred.is-voted .blik-hundred__icon {
	filter: none;
	opacity: 1;
}

.blik-hundred:focus:not(:focus-visible) {
	outline: none;
}

.blik-hundred:focus-visible {
	outline: 2px solid var(--blik-color-red);
	outline-offset: 2px;
}


/* ── Phones: let the meta line wrap ──
   NAME · DATE 💯 BEANTWOORDEN does not fit on a 390px screen. Rather than
   squashing, the chips drop to their own line while staying compact — still
   one action row, just underneath. */
@media (max-width: 620px) {
	/* Both chips share one cell so they sit next to each other regardless of
	   how wide the name above them is. Column 1 would otherwise be stretched
	   by the author name, leaving a gap between the two chips. */
	.blik-comments-section .wp-block-comment-template li {
		grid-template-columns: auto 1fr;
	}

	.blik-hundred-wrap,
	.blik-comments-section .wp-block-comment-reply-link {
		grid-column: 1 / -1;
		grid-row: 3;
		margin-top: 10px;
		margin-left: 0;
	}

	.blik-hundred-wrap {
		justify-self: start;
	}

	/* Offset by the chip's own width plus a gap, so the two read as one row. */
	.blik-comments-section .wp-block-comment-reply-link {
		justify-self: start;
		padding-left: calc(var(--blik-hundred-width, 58px) + 14px);
		pointer-events: none;
	}

	.blik-comments-section .wp-block-comment-reply-link a {
		pointer-events: auto;
	}

	.blik-comments-section .wp-block-comment-template li > ol {
		grid-row: 4;
	}
}

/* ── Delete action ──
   Deliberately the quietest control in the row: it is destructive, rarely
   wanted, and should never compete with 💯 or Beantwoorden. Only rendered for
   users who may actually delete the comment. */
/* Shares the action row with Beantwoorden, pushed to the far edge. Column 4
   is the flexible one, so the reply link sits at its start and this at its
   end — one row of chrome, no extra line. */
.blik-comment-delete-wrap {
	grid-column: 4;
	grid-row: 1;
	justify-self: end;
}

.blik-comment-delete {
	padding: 8px 10px;
	margin: -8px -10px;
	border: 0;
	background: transparent;
	cursor: pointer;
	font-family: var(--wp--preset--font-family--encode-sans-expanded);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 400;
	letter-spacing: 1px;
	line-height: 1;
	text-transform: uppercase;
	color: var(--blik-color-muted);
	opacity: 0.7;
	transition: color var(--blik-transition-fast), opacity var(--blik-transition-fast);
	-webkit-tap-highlight-color: transparent;
}

.blik-comment-delete:hover {
	color: var(--blik-color-red);
	opacity: 1;
}

/* Armed: one more press removes it. */
.blik-comment-delete.is-armed {
	color: var(--blik-color-red);
	font-weight: 700;
	opacity: 1;
}

.blik-comment-delete[disabled] {
	opacity: 0.4;
	cursor: default;
}

/* A removed comment kept in place because replies hang off it. */
.blik-comments-section .blik-comment-removed .wp-block-comment-content,
.blik-comments-section .blik-comment-removed .wp-block-comment-content p {
	font-style: italic;
	color: var(--blik-color-muted);
}

.blik-comments-section .blik-comment-removed .wp-block-comment-author-name {
	opacity: 0.6;
}


/* Phones: the delete action joins the wrapped chip row, still pushed to the
   far edge. Declared here, after the desktop rule above, because both
   selectors score (0,1,0) and source order is what decides. */
@media (max-width: 620px) {
	.blik-comment-delete-wrap {
		grid-column: 1 / -1;
		grid-row: 3;
		justify-self: end;
		margin-top: 10px;
	}
}