/* ===========================================================
   RewardRace — Blog Details (rrBlogDx)
   Renders a single WordPress post (created from the standard
   wp-admin editor) inside an editorial article layout. The
   __content block carries a full prose stylesheet so classic
   and Gutenberg post content drops in seamlessly — headings,
   lists, images, quotes, code, tables, embeds and block
   alignments are all themed with the shared design tokens.
   =========================================================== */

.rrBlogDx {
	--rrbdx-section-bg:  #FFFFFF;
	--rrbdx-heading:     var(--rr-heading);
	--rrbdx-text:        var(--rr-text);
	--rrbdx-body:        var(--rr-text);
	--rrbdx-muted:       var(--rr-muted);
	--rrbdx-subtle:      var(--rr-subtle);
	--rrbdx-accent:      var(--rr-brand);
	--rrbdx-accent-soft: var(--rr-brand-soft);
	--rrbdx-accent-tint: var(--rr-brand-tint);
	--rrbdx-border:      var(--rr-border);
	--rrbdx-surface:     var(--rr-surface);
	--rrbdx-card-bg:     #FFFFFF;
	--rrbdx-code-bg:     var(--rr-ink);
	--rrbdx-maxw:        820px;
	/* Panel wash for the TOC + comment form — the Hero widget's
	   soft purple-tinted gradient. */
	--rrbdx-panel-bg:    linear-gradient(180deg, #F6F4FE 0%, #FAF8FF 50%, #FFFFFF 100%);
	/* Author card surface — matches the Trusted Brands widget. */
	--rrbdx-author-bg:   #FAF8FF;

	position: relative;
	font-family: var(--rr-font-sans);
	color: var(--rrbdx-body);
	background: var(--rrbdx-section-bg);
	box-sizing: border-box;
	border-top: 0 !important;
	overflow: hidden;
}
.rrBlogDx *, .rrBlogDx *::before, .rrBlogDx *::after { box-sizing: border-box; }

/* Dark-mode theming — mirrors the shared dark tokens. */
.rrBlogDx--dark,
html[data-theme="dark"] .rrBlogDx--auto {
	--rrbdx-section-bg: #0A0912;
	--rrbdx-card-bg:    #14122A;
	--rrbdx-surface:    #14122A;
	--rrbdx-border:     rgba(255, 255, 255, .10);
	--rrbdx-accent:     #8B73FF;
	/* Hero / Trusted Brands dark gradient. */
	--rrbdx-panel-bg:   linear-gradient(180deg, #14102B 0%, #0E0B22 50%, #0A0912 100%);
	--rrbdx-author-bg:  linear-gradient(180deg, #14102B 0%, #0E0B22 50%, #0A0912 100%);
}

/* ===========================================================
   Layout
   =========================================================== */
.rrBlogDx__wrap {
	max-width: var(--rrbdx-maxw);
	margin: 0 auto;
	padding: clamp(2.5rem, 5vw, 4.5rem) clamp(1.25rem, 3vw, 2rem) clamp(3rem, 6vw, 5rem);
	position: relative;
	z-index: 1;
}

/* ===========================================================
   Back link
   =========================================================== */
.rrBlogDx__back {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin-bottom: clamp(1.25rem, 2.5vw, 2rem);
	padding: 7px 14px 7px 11px;
	border: 1px solid var(--rrbdx-border);
	border-radius: var(--rr-radius-pill);
	background: var(--rrbdx-card-bg);
	color: var(--rrbdx-muted);
	font-size: var(--rr-fs-sm);
	font-weight: 600;
	text-decoration: none;
	transition:
		color var(--rr-dur-fast) var(--rr-ease-out),
		border-color var(--rr-dur-fast) var(--rr-ease-out),
		background-color var(--rr-dur-fast) var(--rr-ease-out);
}
.rrBlogDx__back svg {
	width: 16px;
	height: 16px;
	transition: transform var(--rr-dur-fast) var(--rr-ease-out);
}
.rrBlogDx__back:hover {
	color: var(--rrbdx-accent);
	border-color: color-mix(in srgb, var(--rrbdx-accent) 40%, var(--rrbdx-border));
}
.rrBlogDx__back:hover svg { transform: translateX(-2px); }

/* ===========================================================
   Header — categories, title, meta
   =========================================================== */
.rrBlogDx__head {
	margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}

.rrBlogDx__cats {
	display: flex;
	flex-wrap: wrap;
	gap: var(--rr-space-2);
	margin: 0 0 var(--rr-space-4);
}
.rrBlogDx .rrBlogDx__cat,
.rrBlogDx a.rrBlogDx__cat {
	display: inline-flex;
	align-items: center;
	padding: 5px 12px;
	font-size: var(--rr-fs-2xs);
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--rrbdx-accent);
	background: var(--rrbdx-accent-tint);
	border-radius: var(--rr-radius-pill);
	line-height: 1.3;
	text-decoration: none;
	transition: background-color var(--rr-dur-fast) var(--rr-ease-out);
}
.rrBlogDx a.rrBlogDx__cat:hover {
	background: color-mix(in srgb, var(--rrbdx-accent) 24%, transparent);
}

.rrBlogDx .rrBlogDx__title {
	font-size: var(--rr-fs-h2);
	font-weight: 800;
	letter-spacing: var(--rr-tracking-tight);
	line-height: var(--rr-lh-tight);
	margin: 0;
	color: var(--rrbdx-heading);
	text-wrap: balance;
}

.rrBlogDx__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--rr-space-2) var(--rr-space-3);
	margin-top: var(--rr-space-5);
	font-size: var(--rr-fs-sm);
	color: var(--rrbdx-muted);
	font-weight: 500;
}
.rrBlogDx__metaItem {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}
.rrBlogDx__metaItem svg {
	width: 15px;
	height: 15px;
	flex-shrink: 0;
	opacity: .85;
}
.rrBlogDx__metaSep {
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background: currentColor;
	opacity: .5;
}
.rrBlogDx__metaAvatar {
	width: 26px;
	height: 26px;
	border-radius: 50%;
	object-fit: cover;
	flex-shrink: 0;
}
.rrBlogDx__metaItem--author {
	font-weight: 700;
	color: var(--rrbdx-text);
}

/* ===========================================================
   Featured / cover image
   =========================================================== */
.rrBlogDx__cover {
	/* Generous bottom margin so the Table of Contents (or content)
	   sits with a clearly visible gap below the featured image.
	   `!important` overrides any block-theme image-figure margin reset. */
	margin: 0 0 clamp(1.75rem, 3.5vw, 2.5rem) !important;
	border-radius: var(--rr-radius-lg);
	overflow: hidden;
	border: 1px solid var(--rrbdx-border);
	background: var(--rrbdx-surface);
	box-shadow: var(--rr-shadow-md);
}
.rrBlogDx__cover img {
	display: block;
	width: 100%;
	height: auto;
}

/* ===========================================================
   Post content — prose
   The selectors below intentionally target raw element tags so
   any markup WordPress emits (classic editor or Gutenberg) is
   styled without needing per-block classes.
   =========================================================== */
.rrBlogDx__content {
	color: var(--rrbdx-body);
	font-size: var(--rr-fs-lg);
	line-height: var(--rr-lh-relaxed);
	min-width: 0;
	overflow-wrap: break-word;
	word-break: break-word;
}
.rrBlogDx__content > *:first-child { margin-top: 0; }
.rrBlogDx__content > *:last-child { margin-bottom: 0; }

.rrBlogDx__content p {
	margin: 0 0 var(--rr-space-5);
}

/* Headings */
.rrBlogDx__content h1,
.rrBlogDx__content h2,
.rrBlogDx__content h3,
.rrBlogDx__content h4,
.rrBlogDx__content h5,
.rrBlogDx__content h6 {
	color: var(--rrbdx-heading);
	font-weight: 800;
	line-height: var(--rr-lh-snug);
	letter-spacing: var(--rr-tracking-snug);
	margin: var(--rr-space-10) 0 var(--rr-space-4);
	scroll-margin-top: 100px;
}
.rrBlogDx__content h1 { font-size: var(--rr-fs-h2); }
.rrBlogDx__content h2 { font-size: var(--rr-fs-h3); }
.rrBlogDx__content h3 { font-size: var(--rr-fs-h4); }
.rrBlogDx__content h4 { font-size: var(--rr-fs-lg); }
.rrBlogDx__content h5,
.rrBlogDx__content h6 {
	font-size: var(--rr-fs-md);
	text-transform: uppercase;
	letter-spacing: var(--rr-tracking-wide);
	color: var(--rrbdx-muted);
}

/* Lists */
.rrBlogDx__content ul,
.rrBlogDx__content ol {
	margin: 0 0 var(--rr-space-5);
	padding-left: var(--rr-space-6);
}
.rrBlogDx__content li {
	margin: var(--rr-space-2) 0;
}
.rrBlogDx__content li::marker { color: var(--rrbdx-accent); }
.rrBlogDx__content ul ul,
.rrBlogDx__content ul ol,
.rrBlogDx__content ol ul,
.rrBlogDx__content ol ol { margin-bottom: 0; }

.rrBlogDx__content strong,
.rrBlogDx__content b { color: var(--rrbdx-heading); font-weight: 700; }

/* Links — animated underline */
.rrBlogDx__content a {
	color: var(--rrbdx-accent);
	text-decoration: none;
	background-image: linear-gradient(to right, currentColor, currentColor);
	background-size: 100% 1px;
	background-position: 0 100%;
	background-repeat: no-repeat;
	transition: background-size var(--rr-dur-fast) var(--rr-ease-out);
	font-weight: 600;
	overflow-wrap: break-word;
}
.rrBlogDx__content a:hover { background-size: 100% 2px; }

/* Images & figures */
.rrBlogDx__content img {
	max-width: 100%;
	height: auto;
	display: block;
	border-radius: var(--rr-radius-md);
}
.rrBlogDx__content figure {
	margin: var(--rr-space-7) 0;
}
.rrBlogDx__content figure img,
.rrBlogDx__content p > img {
	border: 1px solid var(--rrbdx-border);
}
.rrBlogDx__content figcaption,
.rrBlogDx__content .wp-caption-text {
	margin-top: var(--rr-space-2);
	font-size: var(--rr-fs-sm);
	color: var(--rrbdx-subtle);
	text-align: center;
	font-weight: 500;
}

/* Blockquote */
.rrBlogDx__content blockquote {
	position: relative;
	margin: var(--rr-space-7) 0;
	padding: var(--rr-space-5) var(--rr-space-6) var(--rr-space-5) var(--rr-space-10);
	border-left: 3px solid var(--rrbdx-accent);
	border-radius: 0 var(--rr-radius-md) var(--rr-radius-md) 0;
	background: var(--rr-brand-ghost);
	color: var(--rrbdx-heading);
	font-size: var(--rr-fs-lg);
	font-weight: 500;
}
.rrBlogDx__content blockquote::before {
	content: "\201C";
	position: absolute;
	top: -2px;
	left: 14px;
	font-size: 46px;
	line-height: 1;
	color: var(--rrbdx-accent);
	opacity: .35;
	font-weight: 800;
	font-family: Georgia, serif;
}
.rrBlogDx__content blockquote p:last-child { margin-bottom: 0; }
.rrBlogDx__content blockquote cite {
	display: block;
	margin-top: var(--rr-space-3);
	font-size: var(--rr-fs-sm);
	font-style: normal;
	font-weight: 600;
	color: var(--rrbdx-muted);
}

/* Pull quote (Gutenberg) */
.rrBlogDx__content .wp-block-pullquote {
	border: 0;
	border-top: 2px solid var(--rrbdx-accent);
	border-bottom: 2px solid var(--rrbdx-accent);
	padding: var(--rr-space-7) var(--rr-space-4);
	margin: var(--rr-space-8) 0;
	text-align: center;
	background: transparent;
}
.rrBlogDx__content .wp-block-pullquote p {
	font-size: var(--rr-fs-h4);
	font-weight: 700;
	color: var(--rrbdx-heading);
}

/* Inline code */
.rrBlogDx__content code,
.rrBlogDx__content kbd {
	font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, monospace;
	font-size: .88em;
	padding: 2px 7px;
	background: color-mix(in srgb, var(--rrbdx-accent) 8%, transparent);
	color: var(--rr-brand-hover);
	border: 1px solid color-mix(in srgb, var(--rrbdx-accent) 16%, transparent);
	border-radius: var(--rr-radius-xs);
	font-weight: 600;
}

/* Code block */
.rrBlogDx__content pre {
	background: var(--rrbdx-code-bg);
	color: #E9E6F7;
	padding: var(--rr-space-5);
	border-radius: var(--rr-radius-md);
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	margin: var(--rr-space-6) 0;
	font-size: var(--rr-fs-sm);
	font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, monospace;
	line-height: var(--rr-lh-normal);
	border: 1px solid color-mix(in srgb, #FFFFFF 8%, transparent);
	box-shadow: var(--rr-shadow-md);
}
.rrBlogDx__content pre code {
	background: transparent;
	border: 0;
	padding: 0;
	color: inherit;
	font-weight: 400;
	font-size: inherit;
}

/* Horizontal rule */
.rrBlogDx__content hr,
.rrBlogDx__content .wp-block-separator {
	border: 0;
	height: 1px;
	background: linear-gradient(to right, transparent, var(--rrbdx-border), transparent);
	margin: var(--rr-space-10) 0;
}

/* Tables */
.rrBlogDx__content table {
	width: 100%;
	border-collapse: collapse;
	margin: var(--rr-space-6) 0;
	font-size: var(--rr-fs-sm);
	border: 1px solid var(--rrbdx-border);
	border-radius: var(--rr-radius-md);
	overflow: hidden;
}
.rrBlogDx__content th,
.rrBlogDx__content td {
	padding: 11px 15px;
	text-align: left;
	border-bottom: 1px solid var(--rrbdx-border);
}
.rrBlogDx__content th {
	/* Same Hero-gradient wash used by the Table of Contents panel. */
	background: var(--rrbdx-panel-bg);
	color: var(--rrbdx-heading);
	font-weight: 700;
	font-size: var(--rr-fs-xs);
	text-transform: uppercase;
	letter-spacing: var(--rr-tracking-wide);
}
.rrBlogDx__content tr:last-child td { border-bottom: 0; }
/* Let wide tables scroll instead of overflowing the column. */
.rrBlogDx__content .wp-block-table { overflow-x: auto; }

/* Buttons (Gutenberg) */
.rrBlogDx__content .wp-block-button__link,
.rrBlogDx__content .wp-element-button {
	display: inline-block;
	background: var(--rr-brand-gradient);
	color: #FFFFFF;
	padding: 12px 26px;
	border-radius: var(--rr-radius-pill);
	font-weight: 700;
	text-decoration: none;
	background-size: auto;
}

/* Embeds — keep videos/iframes responsive */
.rrBlogDx__content iframe,
.rrBlogDx__content video,
.rrBlogDx__content embed,
.rrBlogDx__content object {
	max-width: 100%;
	border: 0;
	border-radius: var(--rr-radius-md);
}
.rrBlogDx__content .wp-block-embed__wrapper {
	position: relative;
}
/* Responsive 16:9 wrapper for known video providers. */
.rrBlogDx__content .wp-embed-aspect-16-9 .wp-block-embed__wrapper {
	aspect-ratio: 16 / 9;
}
.rrBlogDx__content .wp-embed-aspect-16-9 .wp-block-embed__wrapper iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}
.rrBlogDx__content figure.wp-block-embed { margin: var(--rr-space-7) 0; }

/* Galleries */
.rrBlogDx__content .wp-block-gallery {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: var(--rr-space-3);
	margin: var(--rr-space-7) 0;
}
.rrBlogDx__content .wp-block-gallery figure { margin: 0; }

/* Block alignments — gentle break-out within the article column. */
.rrBlogDx__content .aligncenter { margin-left: auto; margin-right: auto; }
.rrBlogDx__content .alignleft {
	float: left;
	margin: var(--rr-space-2) var(--rr-space-6) var(--rr-space-4) 0;
	max-width: 50%;
}
.rrBlogDx__content .alignright {
	float: right;
	margin: var(--rr-space-2) 0 var(--rr-space-4) var(--rr-space-6);
	max-width: 50%;
}
.rrBlogDx__content .alignwide {
	width: calc(100% + clamp(2rem, 8vw, 7rem));
	max-width: 100vw;
	margin-left: calc(clamp(1rem, 4vw, 3.5rem) * -1);
	margin-right: calc(clamp(1rem, 4vw, 3.5rem) * -1);
}
.rrBlogDx__content .alignfull {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

/* ===========================================================
   Tags
   =========================================================== */
.rrBlogDx__tags {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--rr-space-2);
	margin-top: clamp(2rem, 4vw, 3rem);
	padding-top: var(--rr-space-6);
	border-top: 1px solid var(--rrbdx-border);
}
.rrBlogDx__tagsLabel {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: var(--rr-fs-sm);
	font-weight: 700;
	color: var(--rrbdx-muted);
	margin-right: var(--rr-space-1);
}
.rrBlogDx__tagsLabel svg { width: 15px; height: 15px; }
.rrBlogDx .rrBlogDx__tag,
.rrBlogDx a.rrBlogDx__tag {
	display: inline-flex;
	align-items: center;
	padding: 5px 12px;
	font-size: var(--rr-fs-xs);
	font-weight: 600;
	color: var(--rrbdx-muted);
	background: var(--rrbdx-surface);
	border: 1px solid var(--rrbdx-border);
	border-radius: var(--rr-radius-pill);
	text-decoration: none;
	transition:
		color var(--rr-dur-fast) var(--rr-ease-out),
		border-color var(--rr-dur-fast) var(--rr-ease-out);
}
.rrBlogDx a.rrBlogDx__tag:hover {
	color: var(--rrbdx-accent);
	border-color: color-mix(in srgb, var(--rrbdx-accent) 40%, var(--rrbdx-border));
}

/* ===========================================================
   Author box
   =========================================================== */
.rrBlogDx__author {
	display: flex;
	gap: var(--rr-space-5);
	align-items: flex-start;
	margin-top: clamp(2rem, 4vw, 3rem);
	padding: clamp(1.25rem, 2.5vw, 1.75rem);
	background: var(--rrbdx-author-bg);
	border: 1px solid var(--rrbdx-border);
	border-radius: var(--rr-radius-lg);
}
.rrBlogDx__authorAvatar {
	width: 64px;
	height: 64px;
	border-radius: 50%;
	object-fit: cover;
	flex-shrink: 0;
	border: 2px solid var(--rrbdx-card-bg);
	box-shadow: var(--rr-shadow-sm);
}
.rrBlogDx__authorBody { min-width: 0; }
.rrBlogDx__authorKicker {
	font-size: var(--rr-fs-2xs);
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--rrbdx-accent);
	margin: 0 0 2px;
}
.rrBlogDx .rrBlogDx__authorName {
	font-size: var(--rr-fs-h4);
	font-weight: 800;
	color: var(--rrbdx-heading);
	margin: 0;
	line-height: var(--rr-lh-snug);
}
.rrBlogDx .rrBlogDx__authorBio {
	margin: var(--rr-space-2) 0 0;
	font-size: var(--rr-fs-sm);
	line-height: var(--rr-lh-relaxed);
	color: var(--rrbdx-muted);
}

/* ===========================================================
   Prev / next post navigation
   =========================================================== */
.rrBlogDx__nav {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--rr-space-4);
	margin-top: clamp(2rem, 4vw, 3rem);
}
.rrBlogDx .rrBlogDx__navLink,
.rrBlogDx a.rrBlogDx__navLink {
	display: flex;
	flex-direction: column;
	gap: 5px;
	padding: var(--rr-space-5);
	border: 1px solid var(--rrbdx-border);
	border-radius: var(--rr-radius-lg);
	background: var(--rrbdx-card-bg);
	text-decoration: none;
	box-shadow: var(--rr-shadow-sm);
	transition:
		transform var(--rr-dur-base) var(--rr-ease-out),
		box-shadow var(--rr-dur-base) var(--rr-ease-out),
		border-color var(--rr-dur-base) var(--rr-ease-out);
}
.rrBlogDx a.rrBlogDx__navLink:hover {
	transform: translateY(-3px);
	box-shadow: var(--rr-shadow-md);
	border-color: color-mix(in srgb, var(--rrbdx-accent) 28%, var(--rrbdx-border));
}
.rrBlogDx__navLink--next { text-align: right; align-items: flex-end; }
.rrBlogDx__navDir {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: var(--rr-fs-2xs);
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--rrbdx-accent);
}
.rrBlogDx__navDir svg { width: 14px; height: 14px; }
.rrBlogDx__navTitle {
	font-size: var(--rr-fs-md);
	font-weight: 700;
	color: var(--rrbdx-heading);
	line-height: var(--rr-lh-snug);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* ===========================================================
   Table of Contents — auto-built from the post's headings
   =========================================================== */
.rrBlogDx__toc {
	position: relative;
	margin: 0 0 clamp(1.75rem, 3.5vw, 2.5rem);
	padding: clamp(1.1rem, 2.2vw, 1.5rem) clamp(1.25rem, 2.5vw, 1.75rem);
	background: var(--rrbdx-panel-bg);
	border: 1px solid var(--rrbdx-border);
	border-radius: var(--rr-radius-lg);
	overflow: hidden;
}
/* Brand notch on the left edge. */
.rrBlogDx__toc::before {
	content: "";
	position: absolute;
	top: clamp(1.1rem, 2.2vw, 1.5rem);
	left: 0;
	width: 3px;
	height: 26px;
	background: var(--rr-brand-gradient);
	border-radius: 0 2px 2px 0;
}

.rrBlogDx__tocTitle {
	display: flex;
	align-items: center;
	gap: var(--rr-space-2);
	margin: 0 0 var(--rr-space-3);
	font-size: var(--rr-fs-xs);
	font-weight: 800;
	letter-spacing: var(--rr-tracking-wide);
	text-transform: uppercase;
	color: var(--rrbdx-heading);
}
.rrBlogDx__tocTitle svg {
	width: 17px;
	height: 17px;
	color: var(--rrbdx-accent);
	flex-shrink: 0;
}

.rrBlogDx__tocList {
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: rrbdx-toc;
}
.rrBlogDx__tocItem {
	margin: 0;
	line-height: var(--rr-lh-snug);
}
.rrBlogDx__tocItem + .rrBlogDx__tocItem { margin-top: 7px; }
.rrBlogDx__tocItem--lvl3 { padding-left: var(--rr-space-5); }
.rrBlogDx__tocItem--lvl4 { padding-left: var(--rr-space-10); }

.rrBlogDx .rrBlogDx__tocLink,
.rrBlogDx a.rrBlogDx__tocLink {
	display: inline-flex;
	align-items: baseline;
	gap: 7px;
	color: var(--rrbdx-muted);
	text-decoration: none;
	font-size: var(--rr-fs-sm);
	font-weight: 600;
	transition: color var(--rr-dur-fast) var(--rr-ease-out);
}
.rrBlogDx .rrBlogDx__tocLink:hover { color: var(--rrbdx-accent); }

/* Numbered variant — brand-coloured counters. */
.rrBlogDx__toc--numbered .rrBlogDx__tocList { counter-reset: rrbdx-toc; }
.rrBlogDx__toc--numbered .rrBlogDx__tocItem { counter-increment: rrbdx-toc; }
.rrBlogDx__toc--numbered .rrBlogDx__tocLink::before {
	content: counter(rrbdx-toc) ".";
	color: var(--rrbdx-accent);
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	flex-shrink: 0;
}
/* Sub-level counters should not inherit the top-level number. */
.rrBlogDx__toc--numbered .rrBlogDx__tocItem--lvl3,
.rrBlogDx__toc--numbered .rrBlogDx__tocItem--lvl4 { counter-increment: none; }
.rrBlogDx__toc--numbered .rrBlogDx__tocItem--lvl3 .rrBlogDx__tocLink::before,
.rrBlogDx__toc--numbered .rrBlogDx__tocItem--lvl4 .rrBlogDx__tocLink::before {
	content: "–";
}

/* ===========================================================
   Comments
   =========================================================== */
.rrBlogDx__comments {
	margin-top: clamp(2.5rem, 5vw, 3.75rem);
	padding-top: clamp(2rem, 4vw, 3rem);
	border-top: 1px solid var(--rrbdx-border);
}

.rrBlogDx .rrBlogDx__commentsTitle {
	display: flex;
	align-items: center;
	gap: var(--rr-space-3);
	margin: 0 0 clamp(1.5rem, 3vw, 2rem);
	font-size: var(--rr-fs-h3);
	font-weight: 800;
	letter-spacing: var(--rr-tracking-tight);
	color: var(--rrbdx-heading);
}
.rrBlogDx__commentsTitle svg {
	width: 26px;
	height: 26px;
	color: var(--rrbdx-accent);
	flex-shrink: 0;
}
.rrBlogDx__commentsCount {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 28px;
	height: 24px;
	padding: 0 9px;
	background: var(--rrbdx-accent-tint);
	color: var(--rrbdx-accent);
	border-radius: var(--rr-radius-pill);
	font-size: var(--rr-fs-xs);
	font-weight: 800;
	font-variant-numeric: tabular-nums;
}

/* ----- Comment list ----- */
.rrBlogDx__commentList,
.rrBlogDx__commentList .children {
	list-style: none;
	margin: 0;
	padding: 0;
}
.rrBlogDx__commentList .children {
	margin-top: var(--rr-space-5);
	padding-left: clamp(1.25rem, 4vw, 2.75rem);
	border-left: 2px solid var(--rrbdx-border);
}
.rrBlogDx__comment { margin: 0; }
.rrBlogDx__commentList > .rrBlogDx__comment + .rrBlogDx__comment {
	margin-top: var(--rr-space-5);
	padding-top: var(--rr-space-5);
	border-top: 1px solid var(--rrbdx-border);
}
.rrBlogDx__commentList .children .rrBlogDx__comment + .rrBlogDx__comment {
	margin-top: var(--rr-space-4);
}

.rrBlogDx__commentBody {
	display: flex;
	gap: var(--rr-space-3);
	align-items: flex-start;
}
.rrBlogDx__commentAvatar {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	object-fit: cover;
	flex-shrink: 0;
	border: 1px solid var(--rrbdx-border);
}
.rrBlogDx__commentMain { min-width: 0; flex: 1; }

.rrBlogDx__commentHead {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--rr-space-1) var(--rr-space-3);
	margin-bottom: var(--rr-space-1);
}
.rrBlogDx .rrBlogDx__commentAuthor,
.rrBlogDx__commentAuthor a {
	font-size: var(--rr-fs-md);
	font-weight: 700;
	color: var(--rrbdx-heading);
	text-decoration: none;
}
.rrBlogDx__commentAuthor a:hover { color: var(--rrbdx-accent); }
.rrBlogDx .rrBlogDx__commentDate,
.rrBlogDx a.rrBlogDx__commentDate {
	font-size: var(--rr-fs-xs);
	color: var(--rrbdx-subtle);
	text-decoration: none;
	font-weight: 500;
}
.rrBlogDx a.rrBlogDx__commentDate:hover { color: var(--rrbdx-accent); }

.rrBlogDx__commentPending {
	margin: var(--rr-space-1) 0;
	font-size: var(--rr-fs-xs);
	font-weight: 600;
	color: var(--rr-warning);
}

.rrBlogDx__commentText {
	font-size: var(--rr-fs-sm);
	line-height: var(--rr-lh-relaxed);
	color: var(--rrbdx-body);
}
.rrBlogDx__commentText p { margin: 0 0 var(--rr-space-3); }
.rrBlogDx__commentText p:last-child { margin-bottom: 0; }
.rrBlogDx__commentText a {
	color: var(--rrbdx-accent);
	text-decoration: underline;
	overflow-wrap: break-word;
}

.rrBlogDx__commentActions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--rr-space-3);
	margin-top: var(--rr-space-2);
}
.rrBlogDx__commentActions .comment-reply-link,
.rrBlogDx__commentEdit a {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: var(--rr-fs-xs);
	font-weight: 700;
	color: var(--rrbdx-accent);
	text-decoration: none;
	letter-spacing: .01em;
}
.rrBlogDx__commentActions .comment-reply-link:hover,
.rrBlogDx__commentEdit a:hover { text-decoration: underline; }
.rrBlogDx__commentEdit { color: var(--rrbdx-subtle); }

/* ----- Comment form ----- */
.rrBlogDx__commentForm,
.rrBlogDx #respond {
	margin-top: clamp(1.75rem, 4vw, 2.75rem);
	padding: clamp(1.25rem, 3vw, 2rem);
	background: var(--rrbdx-panel-bg);
	border: 1px solid var(--rrbdx-border);
	border-radius: var(--rr-radius-lg);
}
/* When the reply form is moved beneath a comment it should read as a
   nested panel, not a full-width block. */
.rrBlogDx__commentList #respond {
	margin-top: var(--rr-space-5);
}
.rrBlogDx .comment-reply-title {
	margin: 0 0 var(--rr-space-4);
	font-size: var(--rr-fs-h4);
	font-weight: 800;
	color: var(--rrbdx-heading);
	letter-spacing: var(--rr-tracking-snug);
}
.rrBlogDx .comment-reply-title small {
	margin-left: var(--rr-space-2);
	font-size: var(--rr-fs-sm);
	font-weight: 600;
}
.rrBlogDx .comment-reply-title small a {
	color: var(--rrbdx-accent);
	text-decoration: none;
}

/* ---------- Modern comment form ----------
   Each WP comment-form `<p>` row is forced into a flex column so the
   label always sits above its input regardless of whatever inline /
   inline-block defaults the active theme tries to apply to <label>.
   Author + Email + Website + Comment span a responsive grid; notes
   and submit span the full width. */
.rrBlogDx .comment-form {
	margin: 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--rr-space-5) var(--rr-space-4);
}
.rrBlogDx .comment-form > * {
	grid-column: 1 / -1;
	margin: 0;
	min-width: 0;
}
.rrBlogDx .comment-form-author { grid-column: 1; }
.rrBlogDx .comment-form-email  { grid-column: 2; }

@media (max-width: 640px) {
	.rrBlogDx .comment-form { grid-template-columns: 1fr; }
	.rrBlogDx .comment-form-author,
	.rrBlogDx .comment-form-email { grid-column: 1; }
}

/* Notes (above the textarea + "logged in as ..." message) */
.rrBlogDx .comment-notes,
.rrBlogDx .logged-in-as {
	font-size: var(--rr-fs-sm);
	color: var(--rrbdx-muted);
	line-height: var(--rr-lh-relaxed);
}
.rrBlogDx .logged-in-as a { color: var(--rrbdx-accent); text-decoration: none; }
.rrBlogDx .logged-in-as a:hover { text-decoration: underline; }

/* Every field row stacks label-above-input via flex column. */
.rrBlogDx .comment-form-comment,
.rrBlogDx .comment-form-author,
.rrBlogDx .comment-form-email,
.rrBlogDx .comment-form-url {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.rrBlogDx .comment-form-comment > label,
.rrBlogDx .comment-form-author > label,
.rrBlogDx .comment-form-email > label,
.rrBlogDx .comment-form-url > label {
	font-size: var(--rr-fs-sm);
	font-weight: 700;
	color: var(--rrbdx-heading);
	line-height: 1.4;
	letter-spacing: var(--rr-tracking-snug);
}
.rrBlogDx .comment-form .required {
	color: var(--rrbdx-accent);
	margin-left: 2px;
	font-weight: 700;
}

/* Inputs + textarea — tall, comfortable, brand focus ring.
   We target the WP comment-form fields by their stable element IDs
   (#author, #email, #url, #comment) so the selector has ID-level
   specificity (1,1,0) and beats whatever element-level rules the
   active block theme tries to apply to <input> / <textarea>. */
.rrBlogDx #author,
.rrBlogDx #email,
.rrBlogDx #url,
.rrBlogDx #comment,
.rrBlogDx .comment-form :is(input[type="text"], input[type="email"], input[type="url"], textarea) {
	box-sizing: border-box !important;
	width: 100% !important;
	padding: 11px 16px !important;
	font-family: var(--rr-font-sans) !important;
	font-size: var(--rr-fs-sm) !important;
	line-height: 1.4 !important;
	color: var(--rrbdx-text);
	background: var(--rrbdx-card-bg);
	border: 1px solid var(--rrbdx-border);
	border-radius: var(--rr-radius-md);
	box-shadow: 0 1px 0 rgba(11, 10, 20, .02) inset;
	transition:
		border-color var(--rr-dur-fast) var(--rr-ease-out),
		box-shadow var(--rr-dur-fast) var(--rr-ease-out),
		background-color var(--rr-dur-fast) var(--rr-ease-out);
}
/* Fixed, compact height on the single-line text fields. */
.rrBlogDx #author,
.rrBlogDx #email,
.rrBlogDx #url {
	height: 46px !important;
	min-height: 46px !important;
}
.rrBlogDx .comment-form :is(input, textarea)::placeholder {
	color: var(--rrbdx-subtle);
	opacity: 1;
}
.rrBlogDx .comment-form :is(input, textarea):hover {
	border-color: color-mix(in srgb, var(--rrbdx-accent) 32%, var(--rrbdx-border));
}
.rrBlogDx .comment-form :is(input, textarea):focus,
.rrBlogDx .comment-form :is(input, textarea):focus-visible {
	outline: none;
	border-color: var(--rrbdx-accent);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--rrbdx-accent) 18%, transparent);
}
.rrBlogDx .comment-form textarea,
.rrBlogDx #comment {
	min-height: 180px !important;
	resize: vertical;
}

/* Cookies-consent — checkbox inline with its label. */
.rrBlogDx .comment-form-cookies-consent {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	gap: 10px;
}
.rrBlogDx .comment-form-cookies-consent input[type="checkbox"] {
	width: 18px;
	height: 18px;
	margin: 2px 0 0;
	flex-shrink: 0;
	accent-color: var(--rrbdx-accent);
	cursor: pointer;
}
.rrBlogDx .comment-form-cookies-consent label {
	margin: 0;
	font-size: var(--rr-fs-sm);
	font-weight: 500;
	color: var(--rrbdx-muted);
	line-height: 1.45;
	cursor: pointer;
}

/* The grid's row gap already separates submit from the row above. */
.rrBlogDx .form-submit { margin: 0; }
/* "Post comment" button — pixel-matched to the Header Nav widget's
   "Install on Shopify" CTA (.rrew-nav__cta). */
.rrBlogDx .comment-form .submit,
.rrBlogDx__commentSubmit {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 12px 22px;
	background: var(--rr-brand-gradient);
	color: #FFFFFF;
	border: 0;
	border-radius: 999px;
	text-decoration: none;
	font-family: var(--rr-font-sans);
	font-size: .9375rem;
	font-weight: 700;
	letter-spacing: var(--rr-tracking-snug);
	white-space: nowrap;
	cursor: pointer;
	box-shadow: var(--rr-shadow-brand-sm);
	transition:
		transform var(--rr-dur-fast) var(--rr-ease-out),
		box-shadow var(--rr-dur-fast) var(--rr-ease-out),
		filter var(--rr-dur-fast) var(--rr-ease-out);
}
.rrBlogDx .comment-form .submit:hover,
.rrBlogDx__commentSubmit:hover {
	color: #FFFFFF;
	transform: translateY(-1px);
	box-shadow: var(--rr-shadow-brand-md);
	filter: saturate(1.05);
}
.rrBlogDx .comment-form .submit:focus-visible,
.rrBlogDx__commentSubmit:focus-visible {
	outline: none;
	box-shadow: var(--rr-shadow-brand-md), var(--rr-ring);
}

.rrBlogDx__commentsClosed {
	margin-top: var(--rr-space-6);
	padding: var(--rr-space-4) var(--rr-space-5);
	background: var(--rrbdx-surface);
	border: 1px solid var(--rrbdx-border);
	border-radius: var(--rr-radius-md);
	font-size: var(--rr-fs-sm);
	color: var(--rrbdx-muted);
	text-align: center;
}

/* ===========================================================
   Empty state (no post resolved)
   =========================================================== */
.rrBlogDx__empty {
	max-width: 460px;
	margin: 0 auto;
	text-align: center;
	padding: clamp(2.5rem, 6vw, 4rem) var(--rr-space-6);
	color: var(--rrbdx-muted);
	font-size: var(--rr-fs-md);
}

/* ===========================================================
   Responsive
   =========================================================== */
@media (max-width: 600px) {
	.rrBlogDx__content {
		font-size: var(--rr-fs-md);
	}
	.rrBlogDx .rrBlogDx__title {
		font-size: clamp(1.75rem, 7vw, 2.5rem);
	}
	.rrBlogDx__nav {
		grid-template-columns: 1fr;
	}
	.rrBlogDx__navLink--next { text-align: left; align-items: flex-start; }
	.rrBlogDx__author {
		flex-direction: column;
		gap: var(--rr-space-3);
	}
	.rrBlogDx__content .alignleft,
	.rrBlogDx__content .alignright {
		float: none;
		max-width: 100%;
		margin: var(--rr-space-5) 0;
	}
	.rrBlogDx__content .alignwide {
		width: 100%;
		margin-left: 0;
		margin-right: 0;
	}
}

/* Reduced-motion users get no hover lift. */
@media (prefers-reduced-motion: reduce) {
	.rrBlogDx a.rrBlogDx__navLink:hover { transform: none; }
}