nested inside it. */
.comment > .comment-form-wrap {
margin-top: 1.25rem;
}
/* 2.5.4.2: the form in a white box, like "Enjoyed this post?". */
.comment-form__panel {
padding: 24px 26px 26px;
background: #fff;
border: 1px solid var(--comment-border);
border-radius: 12px;
}
@media only screen and (max-width: 600px) {
.comment-form__panel { padding: 20px 18px 22px; }
}
/* 2.5.4.2: BEHIND A BUTTON. With comments, the section is .is-collapsed: the "Leave a comment"
button shows and the panel hides — ONLY under .js (set in the layout's ), so without
JavaScript the form is simply there, and nothing flashes on load. comments.js removes
.is-collapsed. No [hidden] attribute is involved, so the display rules below are safe. */
.comment-form__open { display: none; margin: 0; }
.js .comment-form-wrap.is-collapsed > .comment-form__open { display: block; }
.js .comment-form-wrap.is-collapsed > .comment-form__panel { display: none; }
.comments .comment-form-wrap.is-collapsed { margin-top: 1.75rem; }
@media only screen and (max-width: 600px) {
.comment-form__open .btn { display: flex; justify-content: center; width: 100%; }
}
.comment-form__heading { margin: 0 0 4px; color: #20242b; font-size: 21px; line-height: 1.3; }
.comment-form__intro { color: var(--comment-muted); margin: 0 0 18px; font-size: 15px; }
@media only screen and (max-width: 600px) {
.comment-form__heading { font-size: 20px; }
.comment-form__intro { margin-bottom: 16px; font-size: 14.5px; }
}
/* With no comments the form follows "Be the first to comment" straight away (no gap above). */
.comments__heading + .comment-form-wrap { margin-top: 0; }
/* ⚠ `:not([hidden])` IS NOT DECORATION — READ BEFORE EDITING.
The HTML `hidden` attribute works by setting `display:none` in the UA stylesheet, and
ANY author `display` declaration beats it. Writing a bare `.comment-form__replying
{ display:flex }` therefore un-hides the element permanently — which is exactly what
shipped on 21 September 2026: "Cancel reply" showed on every post page, whether or not
anyone was replying. Scoping the display to `:not([hidden])` leaves the UA rule to win
while the attribute is present. Same trap applies to __cover below. */
.comment-form__replying:not([hidden]) {
display: flex;
align-items: center;
gap: 0.75rem;
margin: 0 0 1rem;
font-size: 0.9rem;
color: var(--comment-muted);
}
.comment-form__row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.25rem;
}
@media only screen and (max-width: 600px) {
.comment-form__row { grid-template-columns: 1fr; gap: 1rem; }
}
.comment-form__field {
display: block;
margin-bottom: 1.1rem;
}
.comment-form__label {
display: block;
color: #20242b;
font-size: 14px;
font-weight: 600;
margin-bottom: 5px;
}
/* 2.5.4.2: 16px text (also stops a phone zooming in on focus), 44px fields, a firmer border. */
.comment-form__field input,
.comment-form__field textarea {
width: 100%;
padding: 10px 12px;
border: 1px solid #d5dae3;
border-radius: var(--comment-radius);
font: inherit;
font-size: 16px;
color: inherit;
background: #fff;
}
.comment-form__field input { min-height: 44px; }
/* 2.5.4.4 (Ben, 21 October 2026): the focus ring is the posts blue, like the page's other focus
rings (Keep reading, the gallery's "Show fewer") — it was the gold. Previous:
"comments - v5 (pre-2.5.4.4).css". */
.comment-form__field input:focus,
.comment-form__field textarea:focus {
outline: 2px solid var(--comment-link);
outline-offset: 1px;
}
.comment-form__field textarea { resize: vertical; min-height: 8rem; }
.comment-form__note {
display: block;
margin-top: 6px;
font-size: 13px;
font-weight: 400;
color: var(--comment-muted);
}
/* The "Email me new posts" tick — 2.4.8.4 (DEV_PLAN_Stage3 §4.1 decision 8). Its own class,
NOT .comment-form__field, whose input rule above would stretch the box to 100% wide.
The whole label is the target, so the sentence toggles it too.
Previous file: "comments - v1 (pre-2.4.8.4).css". */
.comment-form__check {
display: flex;
align-items: flex-start;
gap: 0.6rem;
margin: 0 0 1.1rem;
font-size: 0.9rem;
line-height: 1.5;
cursor: pointer;
}
.comment-form__check input {
flex: 0 0 auto;
width: 1.1rem;
height: 1.1rem;
margin: 0.15rem 0 0;
accent-color: var(--mhl-blue, #1657aa);
cursor: pointer;
}
.comment-form__check input:focus-visible {
outline: 2px solid var(--comment-link); /* 2.5.4.4: blue, as the fields above */
outline-offset: 2px;
}
/* ⚠ HONEYPOT. Hidden in CSS and never with the HTML hidden attribute — a bot reads the
markup, not the stylesheet, so it fills this in and gives itself away. Kept out of
the tab order and off-screen rather than display:none, which some bots check for. */
.comment-form__hp {
position: absolute;
left: -9999px;
width: 1px;
height: 1px;
overflow: hidden;
}
.comment-form__actions { margin: 0.5rem 0 0; }
/* ------------------------------------------------------------
Loading cover — shown while the comment is in flight
The SPINNER is core's `.lds-roller` (base.css, which the layout
already loads), so this is the same one the framework's own
forms use. The COVER is local: core's equivalent `.form-cover`
lives in form.css, which the post page does not load and which
would drag a whole form system's styles in for one overlay —
lightbox.css draws its own overlay for the same reason.
⚠ base.css paints the roller's dots #fff, which is invisible on
this near-white cover — form.css overrides the colour too.
------------------------------------------------------------ */
.comment-form { position: relative; }
/* ⚠ :not([hidden]) — see the note on __replying above. */
.comment-form__cover:not([hidden]) {
display: flex;
align-items: center;
justify-content: center;
}
.comment-form__cover {
position: absolute;
inset: 0;
z-index: 10;
background: rgba(255, 255, 255, 0.72);
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(3px);
border-radius: var(--comment-radius);
}
.comment-form__cover .lds-roller div:after { background: var(--comment-accent); }
/* The roller is 80px square; the form is short when replying, so scale it down
rather than letting it overflow. */
@media only screen and (max-width: 600px) {
.comment-form__cover .lds-roller { transform: scale(0.7); }
}
/* Someone who has asked for less motion gets the dimmed cover and the button's
"Sending…" text, but no spinning. */
@media (prefers-reduced-motion: reduce) {
.comment-form__cover .lds-roller div { animation: none; }
}
/* Sits ABOVE the form (see comment_form.php), so it needs space beneath it rather
than above — it is the first thing in the section once a comment is accepted. */
.comment-form__message {
margin: 0 0 1.25rem;
padding: 0.75rem 1rem;
border-radius: var(--comment-radius);
font-size: 0.92rem;
}
.comment-form__message.is-ok {
background: #eef6ee;
border: 1px solid #c6e0c6;
color: #2f5d33;
}
.comment-form__message.is-error {
background: #fdf0ee;
border: 1px solid #f0cdc6;
color: #8a3122;
}
/* "Leave another comment" — shown in place of the form once one has been accepted,
directly under the message and above the form.
⚠ No `display` declaration on purpose: a is block by default, so the `hidden`
attribute keeps working without a :not([hidden]) guard. See the note on __replying. */
.comment-form__again { margin: 0 0 1.25rem; }
.comment-form__again-btn {
background: none;
border: 0;
padding: 0;
margin: 0;
box-shadow: none;
font: inherit;
font-weight: 600;
color: var(--comment-accent);
cursor: pointer;
text-decoration: underline;
}
.comment-form__again-btn:hover { text-decoration: none; }
.comment-form__noscript {
margin: 1rem 0 0;
color: var(--comment-muted);
font-style: italic;
}