/* Site-wide CSS tweaks, versioned via the listo-blocks plugin. */

/* Hide the "Blog" page title on the blog homepage (posts index, body.blog).
   It's the page's only .wp-block-heading; the listing's post titles use
   .wp-block-post-title, so they stay visible. Single posts are body.single-post,
   so their own content headings are unaffected. */
body.blog .wp-block-heading {
	display: none;
}

/* Issue #5 + #7: FAQ (arrow-icon-details) — one brand-green chevron on the RIGHT
   that points right (>) when collapsed and rotates down (v) when expanded,
   replacing the theme's default down/right arrows. Higher specificity +
   !important to override the theme's registered block-style marker. */
details.is-style-arrow-icon-details summary {
	list-style: none !important;
	display: flex;
	align-items: center;
	justify-content: space-between; /* question left, chevron right */
	gap: 0.6em;
	cursor: pointer;
}

details.is-style-arrow-icon-details summary::-webkit-details-marker {
	display: none;
}

details.is-style-arrow-icon-details summary::after {
	content: "";
	flex: 0 0 auto;
	width: 0.42em;
	height: 0.42em;
	border-top: 2px solid var(--wp--preset--color--primary);
	border-right: 2px solid var(--wp--preset--color--primary);
	transform: rotate(45deg); /* points right: > (collapsed) */
	transition: transform 0.2s ease;
}

details.is-style-arrow-icon-details[open] > summary::after {
	transform: rotate(135deg); /* points down: v (expanded) */
}

/* Pricing table: de-emphasize the "$" currency symbol relative to the amount,
   matching the muted colour of the "per year" / "pay once" labels
   (has-contrast-slight-color). The symbol is wrapped in
   <span class="price-symbol"> by pricing-table.js. */
.price-symbol {
	color: var(--wp--preset--color--contrast-slight);
	margin-right: 3px;
}

/* "30-day money-back guarantee" badge (listo/guarantee). Droppable anywhere:
   a fixed shield column (left) + a flexible text column (right), vertically
   centered. Keeps a sensible max width and centers itself. The text column
   fills the remaining width and wraps internally instead of dropping below the
   shield. On narrow screens it stacks: shield above centered text. */
.listo-guarantee {
	max-width: 600px;
	margin-inline: auto;
	flex-wrap: nowrap;
	align-items: center;
}

.listo-guarantee__icon {
	flex: 0 0 auto;
	width: 4.75rem;
	height: 4.75rem;
}

.listo-guarantee__text {
	flex: 1 1 auto;
	min-width: 0;
}

@media (max-width: 480px) {
	.listo-guarantee {
		flex-direction: column;
		text-align: center;
	}

	.listo-guarantee__text {
		align-items: center;
	}
}

/* Mobile: the phone image (2.png) sits within the section's equal padding.
   Drop the figure's default bottom margin and the img's inline baseline gap so
   the space below it equals the section padding (no extra gap). */
.listo-mobile figure.wp-block-image {
	margin-bottom: 0;
	/* aligncenter + is-resized makes this figure display:table (shrink-to-fit),
	   so it grows to the image's 600px and overflows a phone column. Cap it to
	   the column width; the img rule below then scales down within it. */
	max-width: 100%;
}

.listo-mobile figure.wp-block-image img {
	display: block;
	/* Up to 600px wide, but never wider than its column (so it can't overflow the
	   viewport on phones) and never taller than 75% of the viewport; width:auto
	   lets it scale down proportionally (no distortion) when a cap kicks in. */
	width: auto !important;
	max-width: min(100%, 600px);
	height: auto;
	max-height: 75vh;
}

/* Hero (listo/hero): the product screenshot (1.png) is very tall, so on short
   viewports it overflows the fold and gets cut off. Cap its height to the
   viewport minus header/spacing (~200px), keeping aspect ratio and never
   exceeding the wide container (max-width:100%). Centered.
   width:auto needs !important to beat core's `.wp-block-image.alignwide img
   { width:100% }` (specificity 0,0,2,1) — without it, width is forced to 100%
   while max-height clamps height, distorting the image. */
.listo-hero-shot img {
	max-height: calc(100vh - 100px);
	width: auto !important;
	max-width: 100%;
	margin-inline: auto;
	display: block;
}

/* Tech section: icon badges are exact circles with the glyph dead-centered,
   like the pricing crown badge (equal dimensions + border-radius 50% + flex). */
.listo-icon-badge {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 3.5rem;
	height: 3.5rem;
	padding: 0 !important;
	border-radius: 50% !important;
}

.listo-icon-badge svg {
	display: block;
	/* Sit comfortably inside the 3.5rem badge with even padding. The inline
	   width/height="30" made portrait icons (e.g. the lock, 384x512) fill the
	   full height and look cramped; cap them smaller and uniform. */
	width: 1.5rem;
	height: 1.5rem;
}

/* tech + competition (listo/tech, listo/competition): make the 3 feature
   "sub-rectangle" cards equal height — all match the tallest. Core already
   stretches the columns to equal height; making each column a flex container
   lets its single card fill that height instead of hugging its own content. */
.listo-equal-cards .wp-block-column {
	display: flex;
}

.listo-equal-cards .wp-block-column > .wp-block-group {
	width: 100%;
}

/* Section bylines (tech, pricing) and feature-card body copy: lift the bold
   phrases above the muted body text with a soft off-white. */
.listo-byline strong,
.listo-rich-copy strong {
	color: #e4e4e7;
}

/* Checklist (listo/checklist) responsive columns: 4 across on wide screens,
   2 at <=1400px, 1 at <=1000px. Core columns only do side-by-side or fully
   stacked, so drive it with CSS grid. Two-class selector out-specifies core's
   .wp-block-columns display:flex regardless of stylesheet order. */
.wp-block-columns.listo-checklist-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--wp--preset--spacing--40);
}

@media (max-width: 1400px) {
	.wp-block-columns.listo-checklist-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 1000px) {
	.wp-block-columns.listo-checklist-grid {
		grid-template-columns: 1fr;
	}
}

/* features-a (listo/features-a) card grid: collapse the 6-column masonry to a
   single stacked column at the same 1400px breakpoint checklist drops to 2
   columns. WP renders the per-card grid-column/grid-row spans as scoped
   .wp-container-* rules, so override them with !important. */
@media (max-width: 1400px) {
	.listo-features-grid {
		grid-template-columns: 1fr !important;
	}
	.listo-features-grid > * {
		grid-column: auto !important;
		grid-row: auto !important;
	}
}

/* Heading word-swap (listo/competition "Why not just use X"): assets/heading-swap.js
   cycles the <mark> word. The chip is a STATIC wrapper (fixed slot, semi-transparent
   green, word centered) so it doesn't move; only the <mark> inside animates. */
.p-s-heading-swap .p-s-swap-chip {
	display: inline-block;
	min-width: 8ch;
	text-align: center;
	background: color-mix(in srgb, var(--wp--preset--color--primary) 6%, transparent);
	border-radius: 0.15em;
	padding: 0.05em 0.25em;
}
.p-s-heading-swap .p-s-swap-chip mark {
	background: transparent;
	display: inline-block;
}
.p-s-heading-swap .p-s-swap-chip mark.ps-word-out { animation: psWordOut .28s ease forwards; }
.p-s-heading-swap .p-s-swap-chip mark.ps-word-in { animation: psWordIn .32s ease; }
@keyframes psWordOut { to { opacity: 0; transform: translateY(-.5em); } }
@keyframes psWordIn { from { opacity: 0; transform: translateY(.5em); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
	.p-s-heading-swap .p-s-swap-chip mark.ps-word-out,
	.p-s-heading-swap .p-s-swap-chip mark.ps-word-in { animation: none; }
}

/* Kill scroll anchoring on the homepage. When the pinned CTA changes height
   (padding cut on desktop, copy fold on phones) the content below shifts, and
   Chrome/Firefox scroll anchoring nudges the scroll position to compensate.
   That nudge pushes the pin threshold back across itself, so the .is-stuck
   class flips on/off repeatedly and the bar flickers violently between states.
   Safari never implemented scroll anchoring - which is exactly why phones can't
   reproduce it. Disabling it here lets the height change happen without the
   scroll position fighting back. Scoped to the homepage so the PeepSo community
   app (which relies on anchoring during dynamic loads) is untouched. */
body.home {
	overflow-anchor: none;
}

/* Sticky mini-CTA (listo/mini-cta): sits under the hero, then pins to the top
   of the viewport as you scroll. The site header scrolls away, so top:0 is
   clean. sticky-cta.js adds .is-stuck once it pins. No extra background is
   introduced - the card keeps its own look. On phones the pinned state folds
   the copy away so only the buttons remain, to reclaim vertical space. */
.listo-cta-sticky {
	position: sticky;
	top: 0;
	z-index: 100;
}
/* The copy block folds up smoothly when the CTA pins (phones only, below). */
.listo-mini-cta-text {
	overflow: hidden;
	max-height: 20rem;
	transition: max-height .35s ease, opacity .25s ease, margin .35s ease;
}
.listo-cta-sticky .listo-mini-cta {
	transition: padding .35s ease, gap .35s ease, background-color .25s ease, border-radius .3s ease;
}
/* Pinned state (all sizes): a full-bleed banner. Opaque (so scrolled content
   never shows through the card's translucent overlay-2 fill), edge to edge,
   square, with only a bottom hairline. The full-width wrapper's global side
   padding and the card's content-width constraint are both neutralized so it
   spans the viewport. On wide screens the horizontal padding grows to keep the
   heading + buttons aligned to the site content width (1340px) while the bar
   and its border still run the full width. */
.listo-cta-sticky.is-stuck {
	padding-left: 0 !important;
	padding-right: 0 !important;
}
.listo-cta-sticky.is-stuck .listo-mini-cta {
	background-color: var(--wp--preset--color--base-light) !important;
	max-width: none !important;
	border-width: 0 0 1px !important;
	border-radius: 0 !important;
	padding-top: var(--wp--preset--spacing--30) !important;
	padding-bottom: var(--wp--preset--spacing--30) !important;
	padding-left: max(var(--wp--preset--spacing--50), calc((100% - var(--wp--style--global--content-size)) / 2)) !important;
	padding-right: max(var(--wp--preset--spacing--50), calc((100% - var(--wp--style--global--content-size)) / 2)) !important;
}

@media (max-width: 600px) {
	.listo-cta-sticky.is-stuck .listo-mini-cta-text {
		max-height: 0;
		opacity: 0;
		margin: 0;
		pointer-events: none;
	}
	/* Copy is gone on phones - tighten to a slim edge-to-edge bar and spread the
	   two buttons evenly across it. */
	.listo-cta-sticky.is-stuck .listo-mini-cta {
		row-gap: 0;
		padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30) !important;
	}
	.listo-cta-sticky.is-stuck .wp-block-buttons {
		flex-basis: 100%;
		width: 100%;
		justify-content: space-evenly;
	}
}

/* Keep the mini-CTA's two buttons (Contact us / Get ListoWP) on one row, even
   on narrow phones, to save vertical space. */
.listo-mini-cta .wp-block-buttons {
	flex-wrap: nowrap;
}
@media (max-width: 600px) {
	.listo-mini-cta .wp-block-buttons .wp-block-button__link {
		padding-left: 1em;
		padding-right: 1em;
		white-space: nowrap;
	}
}

/* AweDesk (almighty-support-pro) login / guest form: the plugin ships white-on-light
   inputs that clash with our dark pages. Force dark bg + white text, and >= 16px so
   mobile Safari doesn't zoom in on focus. */
.alsp-input {
	background: #26262c !important;
	color: #ffffff !important;
	font-size: 16px !important;
	border: 1px solid rgba(255, 255, 255, 0.24) !important;
}
.alsp-input::placeholder {
	color: #656c6e !important;
}
/* Focus: pin the accent border + soft glow. AweDesk's own :focus rule sets the
   accent border, but our base .alsp-input border above is !important and beats it,
   so the border never showed — restore it here. The glow colour #224933 is the
   accent palette's darkenColor(#60d093, .65), frozen so it doesn't depend on the
   plugin's runtime-generated CSS var. */
.alsp-input:focus {
	border-color: #60d093 !important;
	box-shadow: 0 0 0 3px #224933 !important;
}
/* Buttons: AweDesk sets no font-family on .alsp-btn, so the browser default (Arial)
   leaks in. Pin the site font + the .alsp root line-height (1.2) on every AweDesk
   button so the tabs and the submit match the demo + EDD forms by declaration. The
   icon font is applied on .alsp-i-* selectors directly, so this can't affect icons. */
.alsp-btn {
	font-family: "Sora", sans-serif !important;
	line-height: 1.2 !important;
}
/* Remember-me removed; persistence forced site-wide (see listo-blocks.php). */
.alsp-form__row:has( [data-alsp="login-rememberme"] ),
.alsp-form__row:has( [data-alsp="guest-rememberme"] ) {
	display: none !important;
}
/* Login/guest views: 500px wide (centered) when there's room, matching the demo
   + EDD account forms. */
.alsp-view--login {
	max-width: 500px !important;
	margin-left: auto !important;
	margin-right: auto !important;
}
/* Login/guest views: full-width submit button with the (Forgot password) link
   stacked below it, centered. Scoped to .alsp-view--login so ticket/other forms
   keep their default inline actions row. */
.alsp-view--login .alsp-form__actions {
	flex-direction: column !important;
	align-items: stretch !important;
}
.alsp-view--login .alsp-form__actions .alsp-btn--action {
	width: 100% !important;
	margin-left: 0 !important;
}
.alsp-view--login .alsp-form__actions a {
	align-self: center !important;
	color: #a2a9ab !important;
	font-weight: 300 !important;
	text-decoration: none !important;
	transition: color .15s ease-in-out !important;
}
.alsp-view--login .alsp-form__actions a:hover {
	color: #ffffff !important;
}
/* Action button -> green #54b684, dark #111 text, not bold (matches demo + EDD).
   AweDesk styles this button through CSS vars, so override the vars and the
   resolved properties (incl. hover). */
.alsp-view--login .alsp-btn--action {
	--bg: #54b684 !important;
	--c: #111111 !important;
	--ic: #111111 !important;
	--h-bg: #4aa074 !important;
	--h-c: #111111 !important;
	--h-ic: #111111 !important;
	background-color: #54b684 !important;
	color: #111111 !important;
	font-weight: 400 !important;
}
.alsp-view--login .alsp-btn--action:hover {
	background-color: #4aa074 !important;
	color: #111111 !important;
}
/* Stop the browser's autofill from repainting the field light-blue with dark text. */
.alsp-input:-webkit-autofill,
.alsp-input:-webkit-autofill:hover,
.alsp-input:-webkit-autofill:focus,
.alsp-input:-webkit-autofill:active {
	-webkit-text-fill-color: #ffffff !important;
	-webkit-box-shadow: 0 0 0 1000px #26262c inset !important;
	box-shadow: 0 0 0 1000px #26262c inset !important;
	caret-color: #ffffff !important;
	transition: background-color 99999s ease-in-out 0s !important;
}

/* EDD (Easy Digital Downloads) account forms on /account/ — ONLY the login,
   lost-password and reset-password forms, and ONLY for logged-out visitors
   (body.page-id-52:not(.logged-in)). That scope deliberately excludes checkout's
   inline login and the logged-in My Account dashboard, which share EDD classes
   but should keep their own styling. Third-party blocks; skinned via CSS to match
   the demo + AweDesk forms (dark inputs, AweDesk-green buttons) instead of the
   default light inputs / blue buttons. */

/* No frame / no background: EDD's base .edd-blocks-form ships a 1px border + 2rem
   padding (its own border:none override loses to load order), and the block sits in
   a themed #0f1210 card. Null both so the form sits bare on the page like the demo. */
body.page-id-52:not(.logged-in) .edd-blocks-form__login,
body.page-id-52:not(.logged-in) .edd-blocks-form__lost-password,
body.page-id-52:not(.logged-in) .edd-blocks-form__reset-password {
	border: none !important;
	background: transparent !important;
	padding: 0 !important;
	/* 500px form width (centered) when there's room, like the demo + AweDesk forms. */
	max-width: 500px !important;
	margin-left: auto !important;
	margin-right: auto !important;
}
body.page-id-52:not(.logged-in) .wp-block-group:has( > .wp-block-edd-login ) {
	background: transparent !important;
	background-color: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
}

/* Inputs — login + lost-password use .edd-input; reset-password uses .input. */
body.page-id-52:not(.logged-in) .edd-blocks-form__login .edd-input,
body.page-id-52:not(.logged-in) .edd-blocks-form__lost-password .edd-input,
body.page-id-52:not(.logged-in) .edd-blocks-form__reset-password .input {
	background: #26262c !important;
	color: #ffffff !important;
	font-family: "Sora", sans-serif !important;
	font-size: 16px !important;
	font-weight: 400 !important;
	height: 40px !important;
	padding: 0 15px !important;
	border-radius: 8px !important;
	border: 1px solid rgba(255, 255, 255, 0.24) !important;
	transition: all .15s ease-in-out !important;
}
body.page-id-52:not(.logged-in) .edd-blocks-form__login .edd-input::placeholder,
body.page-id-52:not(.logged-in) .edd-blocks-form__lost-password .edd-input::placeholder,
body.page-id-52:not(.logged-in) .edd-blocks-form__reset-password .input::placeholder {
	color: #656c6e !important;
}
body.page-id-52:not(.logged-in) .edd-blocks-form__login .edd-input:focus,
body.page-id-52:not(.logged-in) .edd-blocks-form__lost-password .edd-input:focus,
body.page-id-52:not(.logged-in) .edd-blocks-form__reset-password .input:focus {
	outline: none !important;
	border-color: #60d093 !important;
	box-shadow: 0 0 0 3px #224933 !important;
}
/* Keep autofilled fields on the dark palette instead of the browser's blue. */
body.page-id-52:not(.logged-in) .edd-blocks-form__login .edd-input:-webkit-autofill,
body.page-id-52:not(.logged-in) .edd-blocks-form__login .edd-input:-webkit-autofill:hover,
body.page-id-52:not(.logged-in) .edd-blocks-form__login .edd-input:-webkit-autofill:focus,
body.page-id-52:not(.logged-in) .edd-blocks-form__lost-password .edd-input:-webkit-autofill,
body.page-id-52:not(.logged-in) .edd-blocks-form__reset-password .input:-webkit-autofill {
	-webkit-text-fill-color: #ffffff !important;
	-webkit-box-shadow: 0 0 0 1000px #26262c inset !important;
	box-shadow: 0 0 0 1000px #26262c inset !important;
	caret-color: #ffffff !important;
	transition: background-color 99999s ease-in-out 0s !important;
}

/* Labels — login uses .edd-label; lost-password + reset use bare <label>. */
body.page-id-52:not(.logged-in) .edd-blocks-form__login .edd-label,
body.page-id-52:not(.logged-in) .edd-blocks-form__lost-password label,
body.page-id-52:not(.logged-in) .edd-blocks-form__reset-password label {
	color: #a2a9ab !important;
}
/* Field-label type matched to the AweDesk model (Sora 16 / 500), primary fields only. */
body.page-id-52:not(.logged-in) .edd-blocks-form__login .edd-blocks-form__group-username > .edd-label,
body.page-id-52:not(.logged-in) .edd-blocks-form__login .edd-blocks-form__group-password > .edd-label,
body.page-id-52:not(.logged-in) .edd-blocks-form__lost-password .edd-blocks-form__group-username > label,
body.page-id-52:not(.logged-in) .edd-blocks-form__reset-password .edd-blocks-form__group-pass1 > label,
body.page-id-52:not(.logged-in) .edd-blocks-form__reset-password .edd-blocks-form__group-pass2 > label {
	font-family: "Sora", sans-serif !important;
	font-size: 16px !important;
	font-weight: 500 !important;
	letter-spacing: -0.1px !important;
	line-height: 1.2 !important;
}
/* Drop required-field asterisks (keep the screen-reader "Required" text). */
body.page-id-52:not(.logged-in) .edd-blocks-form__login .edd-required-indicator,
body.page-id-52:not(.logged-in) .edd-blocks-form__lost-password .edd-required-indicator {
	display: none !important;
}

/* Primary action buttons (Log In / Get New Password / Save Password, all .edd-submit)
   -> green #54b684, dark #111 font, not bold (matches the demo + AweDesk buttons). */
body.page-id-52:not(.logged-in) .edd-blocks-form__login .edd-submit,
body.page-id-52:not(.logged-in) .edd-blocks-form__lost-password .edd-submit,
body.page-id-52:not(.logged-in) .edd-blocks-form__reset-password .edd-submit {
	background: #54b684 !important;
	border: 0 !important;
	color: #111111 !important;
	font-family: "Sora", sans-serif !important;
	font-size: 16px !important;
	font-weight: 400 !important;
	letter-spacing: 0.24px !important;
	line-height: 1.2 !important;
	height: 45px !important;
	padding: 0 15px !important;
	border-radius: 8px !important;
	box-shadow: none !important;
	text-shadow: none !important;
	cursor: pointer !important;
	transition: all .15s ease-in-out !important;
}
body.page-id-52:not(.logged-in) .edd-blocks-form__login .edd-submit:hover,
body.page-id-52:not(.logged-in) .edd-blocks-form__lost-password .edd-submit:hover,
body.page-id-52:not(.logged-in) .edd-blocks-form__reset-password .edd-submit:hover {
	background: #4aa074 !important;
}
/* Single-button forms get a full-width button like the demo. */
body.page-id-52:not(.logged-in) .edd-blocks-form__login .edd-submit,
body.page-id-52:not(.logged-in) .edd-blocks-form__lost-password .edd-submit {
	width: 100% !important;
}
/* Reset form's Generate Password: keeps white text (not the dark button text), no
   border, and the same height as the green Save Password button beside it. */
body.page-id-52:not(.logged-in) .edd-blocks-form__reset-password .wp-generate-pw {
	background: #26262c !important;
	border: 0 !important;
	color: #ffffff !important;
	font-family: "Sora", sans-serif !important;
	font-size: 16px !important;
	font-weight: 400 !important;
	letter-spacing: 0.24px !important;
	height: 45px !important;
	padding: 0 15px !important;
	border-radius: 8px !important;
	box-shadow: none !important;
	text-shadow: none !important;
}
/* Show/hide password toggle — quiet dark. */
body.page-id-52:not(.logged-in) .edd-blocks-form__reset-password .wp-hide-pw {
	background: #26262c !important;
	border: 1px solid rgba(255, 255, 255, 0.24) !important;
	color: #e7e7ea !important;
	font-weight: 400 !important;
	box-shadow: none !important;
	text-shadow: none !important;
	border-radius: 8px !important;
}

/* Forgot-password link: centered, matched to the AweDesk model — grey #a2a9ab,
   Sora, weight 300 (its link inherits the muted actions text colour, not green). */
body.page-id-52:not(.logged-in) .edd-blocks-form__login .edd-blocks-form__group-lost-password {
	text-align: center !important;
	/* The form is a 20px-gap grid; pull back to the model's 10px button-to-link gap. */
	margin-top: -10px !important;
}
body.page-id-52:not(.logged-in) .edd-blocks-form__login .edd-blocks-form__group-lost-password a {
	color: #a2a9ab !important;
	text-decoration: none !important;
	font-family: "Sora", sans-serif !important;
	font-size: 16px !important;
	font-weight: 300 !important;
	transition: color .15s ease-in-out !important;
}
body.page-id-52:not(.logged-in) .edd-blocks-form__login .edd-blocks-form__group-lost-password a:hover {
	color: #ffffff !important;
}
/* Remember-me removed from the UI; a persistent 1-year cookie is forced for
   everyone in listo-blocks.php (auth_cookie_expiration + wp_login re-issue). */
body.page-id-52:not(.logged-in) .edd-blocks-form__login .edd-blocks-form__group-remember,
body.page-id-52:not(.logged-in) .edd-login-remember {
	display: none !important;
}
/* Belt-and-braces: the [edd_license_keys] shortcode still runs server-side inside
   the PeepSo hide-for-guest dashboard group, so a logged-out visitor gets a second,
   legacy login form (#edd_login_form) and its "must be logged in" alert emitted into
   the DOM. PeepSo hides the group visually, but if that ever fails the raw unstyled
   form would show. Keep it hidden here too. */
body.page-id-52:not(.logged-in) #edd_login_form,
body.page-id-52:not(.logged-in) .edd-alert.edd-alert-warn {
	display: none !important;
}

/* Blog-post content links. The saved global styles set link color to
   currentColor (so links render in the body-text gray, not the brand green)
   with no underline - making an in-copy link like the "changelog" one
   indistinguishable from surrounding text. Restore the brand green for links
   inside single-post content, excluding buttons, with a hover underline for
   affordance. Applies to all blog posts. */
.single-post .wp-block-post-content a:not(.wp-block-button__link) {
	color: var(--wp--preset--color--primary);
}
.single-post .wp-block-post-content a:not(.wp-block-button__link):hover {
	text-decoration: underline;
}