/*!
 * BuddyBoss ReadyLaunch Companion theme — visual layer.
 *
 * Strategy: every visual decision consumes a `--bb-rl-*` CSS variable.
 * On a site with the BuddyBoss Platform + ReadyLaunch active, the platform's
 * main.css publishes those variables (light + dark via .bb-rl-dark-mode).
 * This means dark mode "just works" for our content — no separate dark
 * stylesheet, just the same body class RL already adds.
 *
 * Scoping: every selector is namespaced with .bb-rl-companion-* so we never
 * collide with RL's own .bb-rl-* selectors. The two coexist on the page.
 */

/* ─── Fallback variables when RL is not active ──────────────────────────────
 * Light defaults. .bb-rl-dark-mode below redefines them for dark.
 * When RL is loaded, RL's main.css :root wins (later in the cascade).
 * ────────────────────────────────────────────────────────────────────────── */
.bb-rl-companion-degraded {
	--bb-rl-primary-color:                       #4946fe;
	--bb-rl-background-color:                    #ffffff;
	--bb-rl-background-secondary-color:          #f6f6f6;
	--bb-rl-background-tertiary-color:           #dbdbdb;
	--bb-rl-background-hover-color:              #f8f8f8;
	--bb-rl-background-brand-primary-color:      var(--bb-rl-primary-color);
	--bb-rl-background-brand-primary-hover-color:#4937f4;
	--bb-rl-background-brand-secondary-color:    #dde4ff;
	--bb-rl-text-color:                          #242425;
	--bb-rl-text-secondary-color:                #555556;
	--bb-rl-text-tertiary-color:                 #858586;
	--bb-rl-text-disabled-color:                 #9e9e9e;
	--bb-rl-text-brand-primary-color:            var(--bb-rl-primary-color);
	--bb-rl-text-white-color:                    #ffffff;
	--bb-rl-border-color:                        #f3f3f3;
	--bb-rl-border-secondary-color:              #e7e7e7;
	--bb-rl-border-tertiary-color:               #cececf;
	--bb-rl-icon-color:                          #0c0c0d;
	--bb-rl-icon-secondary-color:                #6d6d6e;
	--bb-rl-radius-xs:                           2px;
	--bb-rl-radius-sm:                           4px;
	--bb-rl-radius-md:                           6px;
	--bb-rl-radius-base:                         8px;
	--bb-rl-radius-lg:                           12px;
	--bb-rl-radius-full:                         99px;
	--bb-rl-space-50:                            4px;
	--bb-rl-space-100:                           8px;
	--bb-rl-space-200:                           16px;
	--bb-rl-space-300:                           24px;
	--bb-rl-space-400:                           32px;
	--bb-rl-space-500:                           40px;
	--bb-rl-space-600:                           48px;
}

.bb-rl-companion-degraded.bb-rl-dark-mode {
	--bb-rl-background-color:                    #0c0c0d;
	--bb-rl-background-secondary-color:          #161618;
	--bb-rl-background-tertiary-color:           #242425;
	--bb-rl-background-hover-color:              #1a1a1c;
	--bb-rl-text-color:                          #f1f1f3;
	--bb-rl-text-secondary-color:                #a8a8ac;
	--bb-rl-text-tertiary-color:                 #6d6d6e;
	--bb-rl-border-color:                        #242425;
	--bb-rl-border-secondary-color:              #2e2e30;
	--bb-rl-border-tertiary-color:               #3d3d3f;
	--bb-rl-icon-color:                          #f1f1f3;
	--bb-rl-icon-secondary-color:                #a8a8ac;
}

/* ─── Companion-specific tokens ─────────────────────────────────────────────
 * These layer on top of RL's tokens for parts of the theme RL doesn't cover.
 * ────────────────────────────────────────────────────────────────────────── */
.bb-rl-companion-theme {
	--bb-rl-companion-card-radius:    16px;
	--bb-rl-companion-card-shadow:    0 1px 1px 0 rgba(0, 0, 0, 0.06);
	--bb-rl-companion-card-shadow-hover: 0 4px 16px 0 rgba(0, 0, 0, 0.08);
	--bb-rl-companion-content-max:    1200px;
	--bb-rl-companion-prose-max:      900px;
	--bb-rl-companion-gap:            var(--bb-rl-space-300, 24px);
	--bb-rl-companion-grid-min:       300px;
}

.bb-rl-companion-theme.bb-rl-dark-mode {
	--bb-rl-companion-card-shadow:       0 1px 1px 0 rgba(0, 0, 0, 0.4);
	--bb-rl-companion-card-shadow-hover: 0 4px 16px 0 rgba(0, 0, 0, 0.5);
}

/* Note: iframe overflow on RL activity feed (oEmbed wrapper not constraining
 * iframe width) is a known RL platform bug — fix tracked with the BB dev team
 * and intentionally NOT patched here so our theme doesn't conflict with their
 * upstream fix. */

/* ─── Accessibility helpers ──────────────────────────────────────────────── */

/* WordPress's `.screen-reader-text` utility — hides content visually but
 * keeps it available to screen readers. Restore here in case the theme
 * isn't running with WP's bundled stylesheet. */
.bb-rl-companion-theme .screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}

/* Skip-to-content link — invisible until keyboard focus, then appears as a
 * primary-colored pill at the top-left so keyboard / screen-reader users
 * can bypass the header and sidebar nav. WCAG 2.4.1, 2.4.7, 2.4.11.
 *
 * Specificity boost: prefixed with `.bb-rl-companion-theme` (the body class)
 * to raise to (0,3,0) so we beat WP block-library's `.screen-reader-text:focus`
 * (0,2,0) and Elementor's `.screen-reader-text` (0,1,0) base rule even if
 * those load after our stylesheet. `!important` on `top`/`left`/`clip` is the
 * belt-and-braces guard against any future plugin shipping its own focus rule.
 */
.bb-rl-companion-theme .bb-rl-companion-skip-link:focus,
.bb-rl-companion-theme .bb-rl-companion-skip-link:focus-visible {
	background-color: var(--bb-rl-background-brand-primary-color, var(--bb-rl-primary-color));
	color: var(--bb-rl-text-white-color);
	border-radius: var(--bb-rl-radius-md, 6px);
	clip: auto !important;
	clip-path: none !important;
	display: inline-flex;
	align-items: center;
	height: auto;
	width: auto;
	left: 16px !important;
	top: 16px !important;
	padding: var(--bb-rl-space-100, 8px) var(--bb-rl-space-300, 24px);
	font-size: 0.95rem;
	font-weight: 600;
	text-decoration: none;
	z-index: 100000;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
	outline: 2px solid var(--bb-rl-text-white-color);
	outline-offset: 2px;
}

/* Visible focus ring on the main landmark when the skip link sends focus
 * to it — the tabindex="-1" lets it receive focus programmatically. */
.bb-rl-companion-theme #primary:focus {
	outline: 2px solid var(--bb-rl-background-brand-primary-color, var(--bb-rl-primary-color));
	outline-offset: -2px;
}

.bb-rl-companion-theme #primary:focus-visible {
	outline: 2px solid var(--bb-rl-background-brand-primary-color, var(--bb-rl-primary-color));
	outline-offset: -2px;
}

/* ─── Page chrome ──────────────────────────────────────────────────────────── */

.bb-rl-companion-theme {
	background-color: var(--bb-rl-background-color);
	color: var(--bb-rl-text-color);
}

.bb-rl-companion-content {
	max-width: var(--bb-rl-companion-content-max);
	margin: 0 auto;
	padding: var(--bb-rl-space-500, 40px) var(--bb-rl-space-300, 24px) var(--bb-rl-space-700, 56px);
}

.bb-rl-companion-content--single,
.bb-rl-companion-content--page {
	/* Slightly wider than prose-max to give the card chrome breathing room while
	 * the prose inside still sits at a comfortable measure due to the article's
	 * own internal padding. */
	max-width: 960px;
}

.bb-rl-companion-page-header {
	margin-bottom: var(--bb-rl-space-500, 40px);
}

.bb-rl-companion-page-title {
	font-size: 32px;
	line-height: 1.2;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--bb-rl-text-color);
	margin: 0 0 var(--bb-rl-space-200, 16px);
}

.bb-rl-companion-page-description {
	font-size: 16px;
	line-height: 1.55;
	color: var(--bb-rl-text-secondary-color);
	margin: 0;
	max-width: 60ch;
}

/* ─── Archive / search hero header ───────────────────────────────────────── */

.bb-rl-companion-archive-hero {
	background: var(--bb-rl-background-color);
	border: 1px solid var(--bb-rl-border-color);
	border-radius: var(--bb-rl-companion-card-radius);
	box-shadow: var(--bb-rl-companion-card-shadow);
	padding: var(--bb-rl-space-500, 40px) var(--bb-rl-space-500, 40px);
	margin-bottom: var(--bb-rl-space-400, 32px);
	position: relative;
	overflow: hidden;
}

/* Subtle accent bar on the left edge — visual anchor for the hero. */
.bb-rl-companion-archive-hero::before {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 4px;
	background: var(--bb-rl-primary-color);
}

.bb-rl-companion-archive-eyebrow {
	display: inline-block;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--bb-rl-primary-color);
	margin-bottom: var(--bb-rl-space-100, 8px);
}

.bb-rl-companion-archive-title {
	font-size: 36px;
	line-height: 1.15;
	font-weight: 800;
	letter-spacing: -0.015em;
	color: var(--bb-rl-text-color);
	margin: 0;
}

.bb-rl-companion-archive-title .bb-rl-companion-search-query {
	color: var(--bb-rl-primary-color);
}

.bb-rl-companion-archive-description {
	margin-top: var(--bb-rl-space-200, 16px);
	color: var(--bb-rl-text-secondary-color);
	font-size: 16px;
	line-height: 1.55;
	max-width: 65ch;
}

.bb-rl-companion-archive-description p:last-child { margin-bottom: 0; }

.bb-rl-companion-archive-meta {
	display: inline-flex;
	align-items: center;
	gap: var(--bb-rl-space-100, 8px);
	margin-top: var(--bb-rl-space-200, 16px);
	font-size: 13px;
	color: var(--bb-rl-text-tertiary-color);
	background: var(--bb-rl-background-secondary-color);
	border-radius: var(--bb-rl-radius-full, 99px);
	padding: 4px 12px;
	font-weight: 500;
}

.bb-rl-companion-archive-search-form {
	max-width: 520px;
	margin-top: var(--bb-rl-space-300, 24px);
}

.bb-rl-companion-archive-hero--search {
	/* Slightly more space when there's a search input below the title. */
	padding-bottom: var(--bb-rl-space-400, 32px);
}

/* ─── Post list (archive / home / search) ────────────────────────────────── */

.bb-rl-companion-post-list {
	display: grid;
	gap: var(--bb-rl-companion-gap);
	grid-template-columns: repeat(auto-fill, minmax(var(--bb-rl-companion-grid-min), 1fr));
	align-items: stretch;
}

.bb-rl-companion-card {
	background: var(--bb-rl-background-color);
	border: 1px solid var(--bb-rl-border-color);
	border-radius: var(--bb-rl-companion-card-radius);
	overflow: hidden;
	transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
	box-shadow: var(--bb-rl-companion-card-shadow);
	display: flex;
	flex-direction: column;
}

.bb-rl-companion-card:hover {
	box-shadow: var(--bb-rl-companion-card-shadow-hover);
	border-color: var(--bb-rl-border-secondary-color);
}

.bb-rl-companion-card-thumb {
	display: block;
	aspect-ratio: 16 / 10;
	background-color: var(--bb-rl-background-secondary-color);
	overflow: hidden;
	flex-shrink: 0;
}

.bb-rl-companion-card-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.4s ease;
}

.bb-rl-companion-card:hover .bb-rl-companion-card-thumb img {
	transform: scale(1.02);
}

.bb-rl-companion-card-body {
	padding: var(--bb-rl-space-300, 24px);
	display: flex;
	flex-direction: column;
	flex: 1;
}

.bb-rl-companion-card-footer {
	margin-top: auto;
}

.bb-rl-companion-card-cat {
	display: inline-block;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--bb-rl-primary-color);
	text-decoration: none;
	margin-bottom: var(--bb-rl-space-100, 8px);
}

.bb-rl-companion-card-cat:hover {
	color: var(--bb-rl-background-brand-primary-hover-color);
}

.bb-rl-companion-card-title {
	font-size: 22px;
	line-height: 1.3;
	font-weight: 700;
	margin: 0 0 var(--bb-rl-space-100, 8px);
}

.bb-rl-companion-card-title a {
	color: var(--bb-rl-text-color);
	text-decoration: none;
	background-image: linear-gradient(var(--bb-rl-primary-color), var(--bb-rl-primary-color));
	background-size: 0 2px;
	background-position: 0 100%;
	background-repeat: no-repeat;
	transition: background-size 0.2s ease;
}

.bb-rl-companion-card-title a:hover {
	background-size: 100% 2px;
}

.bb-rl-companion-card-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--bb-rl-space-100, 8px);
	font-size: 13px;
	color: var(--bb-rl-text-tertiary-color);
	margin-bottom: var(--bb-rl-space-200, 16px);
}

.bb-rl-companion-card-meta-author {
	display: inline-flex;
	align-items: center;
	gap: var(--bb-rl-space-50, 4px);
	color: var(--bb-rl-text-secondary-color);
}

.bb-rl-companion-card-meta-author img {
	border-radius: 50%;
	flex-shrink: 0;
}

.bb-rl-companion-card-meta-sep {
	color: var(--bb-rl-text-tertiary-color);
	opacity: 0.5;
}

.bb-rl-companion-card-excerpt {
	color: var(--bb-rl-text-secondary-color);
	font-size: 15px;
	line-height: 1.55;
	margin-bottom: var(--bb-rl-space-200, 16px);
}

.bb-rl-companion-card-excerpt p {
	margin: 0 0 var(--bb-rl-space-100, 8px);
}

.bb-rl-companion-card-footer {
	display: flex;
	align-items: center;
	justify-content: flex-start;
}

/* ─── Single article ─────────────────────────────────────────────────────── */

.bb-rl-companion-article {
	background: var(--bb-rl-background-color);
	border: 1px solid var(--bb-rl-border-color);
	border-radius: var(--bb-rl-companion-card-radius);
	box-shadow: var(--bb-rl-companion-card-shadow);
	padding: var(--bb-rl-space-600, 48px) var(--bb-rl-space-500, 40px);
	margin-bottom: var(--bb-rl-space-400, 32px);
	overflow: hidden;
}

.bb-rl-companion-article-header {
	margin-bottom: var(--bb-rl-space-400, 32px);
}

.bb-rl-companion-article-cats {
	display: flex;
	flex-wrap: wrap;
	gap: var(--bb-rl-space-100, 8px);
	margin-bottom: var(--bb-rl-space-200, 16px);
}

/* WCAG 1.4.3 — Use the high-contrast `--bb-rl-text-color` token on the brand-
 * tinted `--bb-rl-background-brand-secondary-color` background so contrast
 * stays well above 4.5:1 regardless of which brand color the site admin
 * picks. (Brand-color text on brand-secondary background previously computed
 * 4.01:1 on RackNLoad's #c9a84c palette — that pattern is too palette-fragile
 * to keep.) */
.bb-rl-companion-article-cat {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--bb-rl-text-color);
	text-decoration: none;
	padding: 4px 12px;
	border-radius: var(--bb-rl-radius-full, 99px);
	background: var(--bb-rl-background-brand-secondary-color);
}

.bb-rl-companion-article-title {
	font-size: 40px;
	line-height: 1.15;
	font-weight: 800;
	letter-spacing: -0.015em;
	margin: 0 0 var(--bb-rl-space-300, 24px);
	color: var(--bb-rl-text-color);
}

.bb-rl-companion-article-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--bb-rl-space-100, 8px);
	color: var(--bb-rl-text-secondary-color);
	font-size: 14px;
}

.bb-rl-companion-article-meta-author {
	display: inline-flex;
	align-items: center;
	gap: var(--bb-rl-space-100, 8px);
	font-weight: 600;
	color: var(--bb-rl-text-color);
}

.bb-rl-companion-article-meta-author img {
	border-radius: 50%;
}

.bb-rl-companion-article-meta-sep { opacity: 0.5; }

/* Featured image breaks out of the article's horizontal padding to sit
 * edge-to-edge within the card. Fixed aspect ratio + object-fit: cover gives
 * a consistent hero look regardless of source image proportions. */
.bb-rl-companion-article-thumb {
	margin: 0 calc(-1 * var(--bb-rl-space-500, 40px)) var(--bb-rl-space-500, 40px);
	border-radius: 0;
	overflow: hidden;
	background: var(--bb-rl-background-tertiary-color);
	position: relative;
	aspect-ratio: 16 / 9;
}

.bb-rl-companion-article-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.bb-rl-companion-article-thumb figcaption {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	font-size: 12px;
	color: var(--bb-rl-text-white-color);
	padding: var(--bb-rl-space-200, 16px) var(--bb-rl-space-300, 24px);
	text-align: center;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0) 100%);
}

.bb-rl-companion-article-body {
	font-size: 17px;
	line-height: 1.7;
	color: var(--bb-rl-text-color);
}

.bb-rl-companion-article-body p {
	margin: 0 0 var(--bb-rl-space-300, 24px);
}

.bb-rl-companion-article-body h2,
.bb-rl-companion-article-body h3,
.bb-rl-companion-article-body h4 {
	color: var(--bb-rl-text-color);
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1.25;
	margin: var(--bb-rl-space-500, 40px) 0 var(--bb-rl-space-200, 16px);
}

.bb-rl-companion-article-body h2 { font-size: 28px; }
.bb-rl-companion-article-body h3 { font-size: 22px; }
.bb-rl-companion-article-body h4 { font-size: 18px; }

.bb-rl-companion-article-body a {
	color: var(--bb-rl-primary-color);
	text-decoration: underline;
	text-decoration-thickness: 1.5px;
	text-underline-offset: 3px;
}

.bb-rl-companion-article-body a:hover {
	color: var(--bb-rl-background-brand-primary-hover-color);
}

.bb-rl-companion-article-body ul,
.bb-rl-companion-article-body ol {
	margin: 0 0 var(--bb-rl-space-300, 24px);
	padding-left: var(--bb-rl-space-300, 24px);
}

.bb-rl-companion-article-body li { margin-bottom: var(--bb-rl-space-100, 8px); }

.bb-rl-companion-article-body blockquote {
	margin: var(--bb-rl-space-400, 32px) 0;
	padding: var(--bb-rl-space-200, 16px) var(--bb-rl-space-400, 32px);
	border-left: 4px solid var(--bb-rl-primary-color);
	background: var(--bb-rl-background-secondary-color);
	border-radius: 0 var(--bb-rl-radius-base, 8px) var(--bb-rl-radius-base, 8px) 0;
	font-size: 18px;
	line-height: 1.55;
	color: var(--bb-rl-text-color);
}

.bb-rl-companion-article-body blockquote p:last-child { margin-bottom: 0; }

.bb-rl-companion-article-body img {
	max-width: 100%;
	height: auto;
	border-radius: var(--bb-rl-radius-base, 8px);
}

.bb-rl-companion-article-body figure {
	margin: var(--bb-rl-space-400, 32px) 0;
}

.bb-rl-companion-article-body figcaption {
	font-size: 13px;
	color: var(--bb-rl-text-tertiary-color);
	margin-top: var(--bb-rl-space-100, 8px);
	text-align: center;
}

.bb-rl-companion-article-body code {
	font-family: "SF Mono", Monaco, "Cascadia Code", "Source Code Pro", monospace;
	font-size: 0.92em;
	background: var(--bb-rl-background-secondary-color);
	color: var(--bb-rl-text-color);
	padding: 2px 6px;
	border-radius: var(--bb-rl-radius-sm, 4px);
}

.bb-rl-companion-article-body pre {
	background: var(--bb-rl-background-tertiary-color);
	color: var(--bb-rl-text-color);
	padding: var(--bb-rl-space-300, 24px);
	border-radius: var(--bb-rl-radius-base, 8px);
	overflow-x: auto;
	font-size: 14px;
	line-height: 1.55;
	margin: 0 0 var(--bb-rl-space-300, 24px);
}

.bb-rl-companion-article-body pre code {
	background: transparent;
	padding: 0;
	font-size: inherit;
}

.bb-rl-companion-article-body table {
	width: 100%;
	border-collapse: collapse;
	margin: 0 0 var(--bb-rl-space-300, 24px);
	font-size: 15px;
}

.bb-rl-companion-article-body th,
.bb-rl-companion-article-body td {
	padding: var(--bb-rl-space-100, 8px) var(--bb-rl-space-200, 16px);
	text-align: left;
	border-bottom: 1px solid var(--bb-rl-border-secondary-color);
}

.bb-rl-companion-article-body th {
	font-weight: 600;
	color: var(--bb-rl-text-color);
	background: var(--bb-rl-background-secondary-color);
}

.bb-rl-companion-article-body hr {
	border: 0;
	border-top: 1px solid var(--bb-rl-border-secondary-color);
	margin: var(--bb-rl-space-500, 40px) 0;
}

.bb-rl-companion-article-pagelinks {
	margin: var(--bb-rl-space-400, 32px) 0;
	padding: var(--bb-rl-space-200, 16px);
	border-top: 1px solid var(--bb-rl-border-secondary-color);
	border-bottom: 1px solid var(--bb-rl-border-secondary-color);
	font-size: 14px;
}

.bb-rl-companion-article-pagelinks > span {
	font-weight: 600;
	margin-right: var(--bb-rl-space-100, 8px);
}

.bb-rl-companion-article-pagelinks a {
	display: inline-block;
	padding: 4px 10px;
	border-radius: var(--bb-rl-radius-sm, 4px);
	background: var(--bb-rl-background-secondary-color);
	color: var(--bb-rl-text-color);
	text-decoration: none;
	margin-right: var(--bb-rl-space-50, 4px);
}

.bb-rl-companion-article-footer {
	margin-top: var(--bb-rl-space-500, 40px);
	padding-top: var(--bb-rl-space-300, 24px);
	border-top: 1px solid var(--bb-rl-border-secondary-color);
}

.bb-rl-companion-article-tags {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--bb-rl-space-100, 8px);
	font-size: 14px;
	color: var(--bb-rl-text-secondary-color);
}

.bb-rl-companion-article-tags-label {
	font-weight: 600;
	color: var(--bb-rl-text-color);
}

.bb-rl-companion-article-tags a {
	display: inline-block;
	padding: 4px 12px;
	border-radius: var(--bb-rl-radius-full, 99px);
	background: var(--bb-rl-background-secondary-color);
	color: var(--bb-rl-text-secondary-color);
	text-decoration: none;
	font-size: 13px;
	transition: background 0.15s, color 0.15s;
}

.bb-rl-companion-article-tags a:hover {
	background: var(--bb-rl-background-brand-secondary-color);
	color: var(--bb-rl-primary-color);
}

/* ─── Related posts (below single article) ─────────────────────────────── */

.bb-rl-companion-related {
	margin: var(--bb-rl-space-400, 32px) 0;
}

.bb-rl-companion-related-header {
	margin-bottom: var(--bb-rl-space-300, 24px);
	display: flex;
	align-items: center;
	gap: var(--bb-rl-space-200, 16px);
}

.bb-rl-companion-related-header::after {
	content: '';
	flex: 1;
	height: 1px;
	background: var(--bb-rl-border-secondary-color);
}

.bb-rl-companion-related-title {
	font-size: 18px;
	font-weight: 700;
	color: var(--bb-rl-text-color);
	margin: 0;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.bb-rl-companion-related-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: var(--bb-rl-space-300, 24px);
}

.bb-rl-companion-related-card {
	background: var(--bb-rl-background-color);
	border: 1px solid var(--bb-rl-border-color);
	border-radius: var(--bb-rl-companion-card-radius);
	overflow: hidden;
	transition: box-shadow 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
	box-shadow: var(--bb-rl-companion-card-shadow);
}

.bb-rl-companion-related-card:hover {
	box-shadow: var(--bb-rl-companion-card-shadow-hover);
	border-color: var(--bb-rl-border-secondary-color);
	transform: translateY(-2px);
}

.bb-rl-companion-related-link {
	display: block;
	color: inherit;
	text-decoration: none;
}

.bb-rl-companion-related-thumb {
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: var(--bb-rl-background-secondary-color);
}

.bb-rl-companion-related-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.4s ease;
}

.bb-rl-companion-related-card:hover .bb-rl-companion-related-thumb img {
	transform: scale(1.04);
}

.bb-rl-companion-related-body {
	padding: var(--bb-rl-space-200, 16px) var(--bb-rl-space-300, 24px) var(--bb-rl-space-300, 24px);
}

.bb-rl-companion-related-cat {
	display: inline-block;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--bb-rl-primary-color);
	margin-bottom: var(--bb-rl-space-50, 4px);
}

.bb-rl-companion-related-card-title {
	font-size: 17px;
	line-height: 1.35;
	font-weight: 700;
	color: var(--bb-rl-text-color);
	margin: 0 0 var(--bb-rl-space-100, 8px);
}

.bb-rl-companion-related-meta {
	font-size: 12px;
	color: var(--bb-rl-text-tertiary-color);
}

/* ─── Post navigation (next/prev) ───────────────────────────────────────── */

.bb-rl-companion-postnav {
	margin: var(--bb-rl-space-400, 32px) 0;
	padding: 0;
	border-top: 0;
}

.bb-rl-companion-postnav .nav-links {
	display: grid;
	gap: var(--bb-rl-space-200, 16px);
	grid-template-columns: 1fr 1fr;
}

.bb-rl-companion-postnav .nav-previous,
.bb-rl-companion-postnav .nav-next {
	background: var(--bb-rl-background-color);
	border: 1px solid var(--bb-rl-border-color);
	border-radius: var(--bb-rl-companion-card-radius);
	padding: var(--bb-rl-space-300, 24px);
	transition: background 0.15s, border-color 0.15s, transform 0.15s;
	box-shadow: var(--bb-rl-companion-card-shadow);
}

.bb-rl-companion-postnav .nav-previous:hover,
.bb-rl-companion-postnav .nav-next:hover {
	background: var(--bb-rl-background-hover-color);
	border-color: var(--bb-rl-border-secondary-color);
	transform: translateY(-1px);
}

.bb-rl-companion-postnav .nav-next { text-align: right; }

.bb-rl-companion-postnav a {
	display: block;
	color: var(--bb-rl-text-color);
	text-decoration: none;
}

.bb-rl-companion-postnav-label {
	display: block;
	font-size: 12px;
	color: var(--bb-rl-text-tertiary-color);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	margin-bottom: 4px;
}

.bb-rl-companion-postnav-title {
	display: block;
	font-weight: 600;
	font-size: 15px;
	line-height: 1.4;
}

/* ─── Standard page (page.php) ──────────────────────────────────────────── */

.bb-rl-companion-page {
	background: var(--bb-rl-background-color);
	border: 1px solid var(--bb-rl-border-color);
	border-radius: var(--bb-rl-companion-card-radius);
	box-shadow: var(--bb-rl-companion-card-shadow);
	padding: var(--bb-rl-space-600, 48px) var(--bb-rl-space-500, 40px);
	margin-bottom: var(--bb-rl-space-400, 32px);
	overflow: hidden;
}

/* The .bb-rl-companion-page-header rule earlier in the file (top-level page
 * titles on lists) sets margin-bottom; we override it inside a page card so
 * the title sits closer to the body / featured image. */
.bb-rl-companion-page > .bb-rl-companion-page-header {
	margin-bottom: var(--bb-rl-space-300, 24px);
}

.bb-rl-companion-page > .bb-rl-companion-page-header .bb-rl-companion-page-title {
	margin-bottom: 0;
}

/* Featured image edge-to-edge inside the page card — same treatment as the
 * single-post article hero. */
.bb-rl-companion-page-thumb {
	margin: 0 calc(-1 * var(--bb-rl-space-500, 40px)) var(--bb-rl-space-500, 40px);
	border-radius: 0;
	overflow: hidden;
	background: var(--bb-rl-background-tertiary-color);
	aspect-ratio: 16 / 9;
}

.bb-rl-companion-page-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.bb-rl-companion-page-body {
	font-size: 17px;
	line-height: 1.7;
	color: var(--bb-rl-text-color);
}

.bb-rl-companion-page-body p { margin: 0 0 var(--bb-rl-space-300, 24px); }

.bb-rl-companion-page-body h2,
.bb-rl-companion-page-body h3 {
	color: var(--bb-rl-text-color);
	font-weight: 700;
	margin: var(--bb-rl-space-500, 40px) 0 var(--bb-rl-space-200, 16px);
}

.bb-rl-companion-page-body h2 { font-size: 28px; }
.bb-rl-companion-page-body h3 { font-size: 22px; }

.bb-rl-companion-page-body a {
	color: var(--bb-rl-primary-color);
	text-decoration: underline;
}

.bb-rl-companion-page-body ul,
.bb-rl-companion-page-body ol {
	margin: 0 0 var(--bb-rl-space-300, 24px);
	padding-left: var(--bb-rl-space-300, 24px);
}

.bb-rl-companion-page-body li { margin-bottom: var(--bb-rl-space-100, 8px); }

.bb-rl-companion-page-body blockquote {
	margin: var(--bb-rl-space-400, 32px) 0;
	padding: var(--bb-rl-space-200, 16px) var(--bb-rl-space-400, 32px);
	border-left: 4px solid var(--bb-rl-primary-color);
	background: var(--bb-rl-background-secondary-color);
	border-radius: 0 var(--bb-rl-radius-base, 8px) var(--bb-rl-radius-base, 8px) 0;
	font-size: 18px;
	line-height: 1.55;
	color: var(--bb-rl-text-color);
}

.bb-rl-companion-page-body blockquote p:last-child { margin-bottom: 0; }

.bb-rl-companion-page-body img {
	max-width: 100%;
	height: auto;
	border-radius: var(--bb-rl-radius-base, 8px);
}

.bb-rl-companion-page-body figure {
	margin: var(--bb-rl-space-400, 32px) 0;
}

/* ─── 404 ────────────────────────────────────────────────────────────────── */

.bb-rl-companion-content--error {
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 60vh;
}

.bb-rl-companion-error {
	max-width: 640px;
	width: 100%;
	text-align: center;
	padding: var(--bb-rl-space-500, 40px) var(--bb-rl-space-300, 24px);
}

/* Push the bb-rl-container to fill viewport so footer sticks to bottom on
 * short pages (404, empty search, page with little content). RL pages get
 * this from main.css; we mirror it here so our content templates inherit
 * the same behaviour. */
.bb-rl-companion-theme #primary.site-main {
	min-height: calc(100vh - 70px);
}

.bb-rl-companion-theme #primary.site-main > .bb-rl-container {
	min-height: inherit;
}

/* ─── Header menu alignment ──────────────────────────────────────────────────
 * The buddyboss/readylaunch-header block sets `.bb-rl-header-block
 * .bb-readylaunch-menu { flex: 1; margin: 0 }` so the menu fills the entire
 * space between logo and aside (~918px on desktop). On RL's own pages,
 * main.css overlays a body-class-scoped `margin-left: 320px` rule
 * (body.directory, body.activity, etc) that constrains the menu to ~598px
 * and centers items within that narrower band — the visually-centered look.
 *
 * Generic WP pages don't match those body classes, so we replicate the same
 * constraint scoped to our own body class. The block's `flex: 1` then grows
 * to fill the (now-shorter) space and `justify-content: center` from the
 * block CSS keeps items centered.
 * ────────────────────────────────────────────────────────────────────────── */

.bb-rl-companion-rl-active .bb-rl-header-block .bb-readylaunch-menu {
	margin-left: 320px;
}

.bb-rl-companion-rl-active .bb-rl-header-block .bb-readylaunch-menu.bb-rl-items-max {
	margin-right: var(--bb-rl-space-300);
	margin-left: 170px;
}

@media screen and (max-width: 1400px) {
	.bb-rl-companion-rl-active .bb-rl-header-block .bb-readylaunch-menu {
		margin-left: 170px;
	}
	.bb-rl-companion-rl-active .bb-rl-header-block .bb-readylaunch-menu.bb-rl-items-max {
		margin-right: var(--bb-rl-space-100);
		margin-left: 0;
	}
}

@media screen and (max-width: 1280px) {
	.bb-rl-companion-rl-active .bb-rl-header-block .bb-readylaunch-menu {
		margin-left: 0;
	}
}

.bb-rl-companion-error-code {
	font-size: 96px;
	line-height: 1;
	font-weight: 800;
	letter-spacing: -0.04em;
	background: linear-gradient(135deg, var(--bb-rl-primary-color) 0%, var(--bb-rl-background-brand-primary-hover-color) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	margin-bottom: var(--bb-rl-space-200, 16px);
}

.bb-rl-companion-error-title {
	font-size: 28px;
	font-weight: 700;
	color: var(--bb-rl-text-color);
	margin: 0 0 var(--bb-rl-space-200, 16px);
}

.bb-rl-companion-error-description {
	font-size: 16px;
	line-height: 1.55;
	color: var(--bb-rl-text-secondary-color);
	margin: 0 auto var(--bb-rl-space-400, 32px);
	max-width: 50ch;
}

.bb-rl-companion-error-search {
	max-width: 480px;
	margin: 0 auto var(--bb-rl-space-400, 32px);
}

.bb-rl-companion-error-actions {
	margin-bottom: var(--bb-rl-space-600, 48px);
}

.bb-rl-companion-error-recent {
	margin-top: var(--bb-rl-space-600, 48px);
	padding-top: var(--bb-rl-space-400, 32px);
	border-top: 1px solid var(--bb-rl-border-secondary-color);
	text-align: left;
}

.bb-rl-companion-error-recent-title {
	font-size: 14px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--bb-rl-text-tertiary-color);
	margin: 0 0 var(--bb-rl-space-200, 16px);
	text-align: center;
}

.bb-rl-companion-error-recent-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.bb-rl-companion-error-recent-list li {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: var(--bb-rl-space-200, 16px);
	padding: var(--bb-rl-space-100, 8px) 0;
	border-bottom: 1px solid var(--bb-rl-border-color);
	font-size: 15px;
}

.bb-rl-companion-error-recent-list li:last-child { border-bottom: 0; }

.bb-rl-companion-error-recent-list a {
	color: var(--bb-rl-text-color);
	text-decoration: none;
	font-weight: 500;
}

.bb-rl-companion-error-recent-list a:hover { color: var(--bb-rl-primary-color); }

.bb-rl-companion-error-recent-date {
	color: var(--bb-rl-text-tertiary-color);
	font-size: 13px;
	white-space: nowrap;
}

/* ─── Search form ────────────────────────────────────────────────────────── */

.bb-rl-companion-searchform {
	width: 100%;
}

.bb-rl-companion-searchform-row {
	display: flex;
	align-items: center;
	gap: var(--bb-rl-space-100, 8px);
	background: var(--bb-rl-background-color);
	border: 1px solid var(--bb-rl-border-secondary-color);
	border-radius: var(--bb-rl-radius-full, 99px);
	padding: 4px 4px 4px var(--bb-rl-space-200, 16px);
	transition: border-color 0.15s, box-shadow 0.15s;
}

.bb-rl-companion-searchform-row:focus-within {
	border-color: var(--bb-rl-primary-color);
	box-shadow: 0 0 0 3px rgba(73, 70, 254, 0.15);
}

.bb-rl-companion-searchform-icon {
	color: var(--bb-rl-text-tertiary-color);
	font-size: 18px;
	flex-shrink: 0;
}

.bb-rl-companion-searchform-input {
	flex: 1;
	border: 0;
	background: transparent;
	padding: 8px 0;
	font-size: 15px;
	color: var(--bb-rl-text-color);
	outline: none;
}

.bb-rl-companion-searchform-input::placeholder {
	color: var(--bb-rl-text-tertiary-color);
}

/* Search submit lives inside the rounded search shell so it gets a fully
 * rounded shape — but matches the rest of the button system on padding,
 * font size and weight. */
.bb-rl-companion-searchform-submit {
	border: 1px solid var(--bb-rl-background-brand-primary-color, var(--bb-rl-primary-color));
	background-color: var(--bb-rl-background-brand-primary-color, var(--bb-rl-primary-color));
	color: var(--bb-rl-text-white-color);
	padding: var(--bb-rl-space-100, 8px) var(--bb-rl-space-200, 16px);
	font-size: 1rem;
	font-weight: 500;
	line-height: 1.4;
	border-radius: var(--bb-rl-radius-full, 99px);
	cursor: pointer;
	transition: background-color 0.2s ease, border-color 0.2s ease;
}

.bb-rl-companion-searchform-submit:hover {
	background-color: var(--bb-rl-background-brand-primary-hover-color);
	border-color: var(--bb-rl-background-brand-primary-hover-color);
}

.bb-rl-companion-search-form-wrap {
	max-width: 480px;
	margin-top: var(--bb-rl-space-300, 24px);
}

.bb-rl-companion-search-query {
	color: var(--bb-rl-primary-color);
}

/* ─── Buttons ────────────────────────────────────────────────────────────── *
 * Mirrors RL's .bb-rl-button base + modifiers exactly so theme buttons (Read
 * more, Post comment, Back to home, search submit) sit at the same visual
 * weight as RL's native header buttons (Sign in, Sign up). Same padding,
 * font weight, radius, transition. Differs only where it should — primary
 * fills with the brand color rather than RL's neutral fill.
 */

.bb-rl-companion-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--bb-rl-space-50, 4px);
	padding: var(--bb-rl-space-100, 8px) var(--bb-rl-space-200, 16px);
	border-radius: var(--bb-rl-radius-md, 6px);
	font-size: 1rem;
	font-weight: 500;
	line-height: 1.4;
	text-decoration: none;
	text-align: center;
	border: 1px solid transparent;
	cursor: pointer;
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.05s;
}

.bb-rl-companion-btn:active { transform: translateY(1px); }

/* Small variant — matches RL's .bb-rl-button--small */
.bb-rl-companion-btn--small {
	padding: 6px var(--bb-rl-space-200, 16px);
	font-size: var(--bb-rl-font-size-sm, 0.85rem);
	font-weight: 400;
}

/* Primary — fills with the site's brand color (matches RL's --brandFill) */
.bb-rl-companion-btn--primary {
	background-color: var(--bb-rl-background-brand-primary-color, var(--bb-rl-primary-color));
	color: var(--bb-rl-text-white-color);
	border-color: var(--bb-rl-background-brand-primary-color, var(--bb-rl-primary-color));
}

.bb-rl-companion-btn--primary:hover {
	background-color: var(--bb-rl-background-brand-primary-hover-color);
	border-color: var(--bb-rl-background-brand-primary-hover-color);
	color: var(--bb-rl-text-white-color);
}

.bb-rl-companion-btn--primary:focus {
	outline: 2px solid var(--bb-rl-border-brand-primary-color);
}

/* Ghost / outline — matches RL's --secondaryOutline (neutral text, not brand) */
.bb-rl-companion-btn--ghost {
	background-color: transparent;
	color: var(--bb-rl-text-color);
	border-color: var(--bb-rl-border-tertiary-color);
}

.bb-rl-companion-btn--ghost:hover {
	background-color: var(--bb-rl-background-secondary-color);
	color: var(--bb-rl-text-color);
}

.bb-rl-companion-btn--ghost:focus {
	outline: 2px solid var(--bb-rl-border-quinery-color);
}

/* ─── Pagination (the_posts_pagination) ─────────────────────────────────── *
 * BuddyBoss platform filters WP's `.page-numbers` class and rewrites it to
 * `.bb-rl-page-numbers` (with the bb-rl prefix). We style both so the CSS
 * works whether or not the platform's filter is active. */

.bb-rl-companion-content .pagination,
.bb-rl-companion-content .navigation.pagination {
	margin-top: var(--bb-rl-space-500, 40px);
}

.bb-rl-companion-content .pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--bb-rl-space-50, 4px);
	justify-content: center;
}

/* WP outputs a <ul class="page-numbers"> as the wrapper; BB rewrites to
 * .bb-rl-page-numbers. Strip list styling on either form. */
.bb-rl-companion-content ul.page-numbers,
.bb-rl-companion-content ul.bb-rl-page-numbers {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--bb-rl-space-50, 4px);
}

.bb-rl-companion-content ul.page-numbers li,
.bb-rl-companion-content ul.bb-rl-page-numbers li {
	margin: 0;
	list-style: none;
}

/* The individual item — anchor or current-page span — gets button-style
 * chrome that matches the rest of the design system. */
.bb-rl-companion-content .page-numbers,
.bb-rl-companion-content .bb-rl-page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 36px;
	height: 36px;
	padding: 0 var(--bb-rl-space-100, 8px);
	border-radius: var(--bb-rl-radius-md, 6px);
	color: var(--bb-rl-text-secondary-color);
	background-color: transparent;
	border: 1px solid transparent;
	font-weight: 500;
	font-size: 0.9rem;
	line-height: 1.4;
	text-decoration: none;
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.bb-rl-companion-content a.page-numbers:hover,
.bb-rl-companion-content a.bb-rl-page-numbers:hover {
	background-color: var(--bb-rl-background-secondary-color);
	border-color: var(--bb-rl-border-color);
	color: var(--bb-rl-text-color);
}

.bb-rl-companion-content .page-numbers.current,
.bb-rl-companion-content .bb-rl-page-numbers.current {
	background-color: var(--bb-rl-background-brand-primary-color, var(--bb-rl-primary-color));
	border-color: var(--bb-rl-background-brand-primary-color, var(--bb-rl-primary-color));
	color: var(--bb-rl-text-white-color);
}

.bb-rl-companion-content .page-numbers.dots,
.bb-rl-companion-content .bb-rl-page-numbers.dots {
	background-color: transparent;
	border-color: transparent;
	cursor: default;
	color: var(--bb-rl-text-tertiary-color);
}

/* Prev / Next get a wider pill with the label visible. */
.bb-rl-companion-content .page-numbers.prev,
.bb-rl-companion-content .page-numbers.next,
.bb-rl-companion-content .bb-rl-page-numbers.prev,
.bb-rl-companion-content .bb-rl-page-numbers.next {
	padding: 0 var(--bb-rl-space-200, 16px);
	border-color: var(--bb-rl-border-tertiary-color);
	color: var(--bb-rl-text-color);
}

.bb-rl-companion-content .page-numbers.disabled,
.bb-rl-companion-content .bb-rl-page-numbers.disabled {
	opacity: 0.4;
	cursor: not-allowed;
	pointer-events: none;
}

/* ─── Comments ──────────────────────────────────────────────────────────── */

.bb-rl-companion-comments {
	margin-top: var(--bb-rl-space-400, 32px);
	padding: var(--bb-rl-space-500, 40px);
	background: var(--bb-rl-background-color);
	border: 1px solid var(--bb-rl-border-color);
	border-radius: var(--bb-rl-companion-card-radius);
	box-shadow: var(--bb-rl-companion-card-shadow);
}

.bb-rl-companion-comments-header {
	margin-bottom: var(--bb-rl-space-300, 24px);
	padding-bottom: var(--bb-rl-space-200, 16px);
	border-bottom: 1px solid var(--bb-rl-border-color);
}

.bb-rl-companion-comments-title {
	font-size: 20px;
	font-weight: 700;
	color: var(--bb-rl-text-color);
	margin: 0;
	display: flex;
	align-items: center;
	gap: var(--bb-rl-space-100, 8px);
}

.bb-rl-companion-comment-list,
.bb-rl-companion-comment-list .children {
	list-style: none;
	margin: 0;
	padding: 0;
}

.bb-rl-companion-comment-list .children {
	margin-left: var(--bb-rl-space-400, 32px);
	border-left: 2px solid var(--bb-rl-border-color);
	padding-left: var(--bb-rl-space-200, 16px);
}

.bb-rl-companion-comment-list .comment-body {
	background: var(--bb-rl-background-secondary-color);
	border-radius: var(--bb-rl-companion-card-radius);
	padding: var(--bb-rl-space-300, 24px);
	margin-bottom: var(--bb-rl-space-200, 16px);
}

.bb-rl-companion-comment-list .comment-author {
	display: flex;
	align-items: center;
	gap: var(--bb-rl-space-100, 8px);
	margin-bottom: var(--bb-rl-space-100, 8px);
}

.bb-rl-companion-comment-list .comment-author img {
	border-radius: 50%;
}

.bb-rl-companion-comment-list .comment-author .fn {
	font-weight: 600;
	color: var(--bb-rl-text-color);
	font-style: normal;
}

.bb-rl-companion-comment-list .comment-meta {
	font-size: 13px;
	color: var(--bb-rl-text-tertiary-color);
	margin-bottom: var(--bb-rl-space-200, 16px);
}

.bb-rl-companion-comment-list .comment-meta a {
	color: var(--bb-rl-text-tertiary-color);
	text-decoration: none;
}

.bb-rl-companion-comment-list .comment-content {
	color: var(--bb-rl-text-color);
	font-size: 15px;
	line-height: 1.55;
}

.bb-rl-companion-comment-list .comment-content p { margin: 0 0 var(--bb-rl-space-100, 8px); }

.bb-rl-companion-comment-list .reply {
	margin-top: var(--bb-rl-space-100, 8px);
}

/* Reply / Cancel reply links styled as small ghost buttons so they share
 * padding/font/transition with the rest of the button system. */
.bb-rl-companion-comment-list .comment-reply-link,
.bb-rl-companion-comments #cancel-comment-reply-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--bb-rl-space-50, 4px);
	padding: 6px var(--bb-rl-space-200, 16px);
	border-radius: var(--bb-rl-radius-md, 6px);
	background-color: transparent;
	color: var(--bb-rl-text-color);
	border: 1px solid var(--bb-rl-border-tertiary-color);
	font-size: var(--bb-rl-font-size-sm, 0.85rem);
	font-weight: 400;
	line-height: 1.4;
	text-decoration: none;
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.bb-rl-companion-comment-list .comment-reply-link:hover,
.bb-rl-companion-comments #cancel-comment-reply-link:hover {
	background-color: var(--bb-rl-background-secondary-color);
}

.bb-rl-companion-comments-closed {
	color: var(--bb-rl-text-tertiary-color);
	font-style: italic;
	margin-top: var(--bb-rl-space-300, 24px);
}

/* Older / Newer comment-page navigation. */
.bb-rl-companion-comments .comments-pagination,
.bb-rl-companion-comments .comment-navigation {
	margin: var(--bb-rl-space-300, 24px) 0 0;
}

.bb-rl-companion-comments .comments-pagination .nav-links,
.bb-rl-companion-comments .comment-navigation .nav-links {
	display: flex;
	gap: var(--bb-rl-space-100, 8px);
	flex-wrap: wrap;
}

.bb-rl-companion-comments .comments-pagination .nav-links a,
.bb-rl-companion-comments .comment-navigation .nav-links a {
	display: inline-flex;
	align-items: center;
	gap: var(--bb-rl-space-50, 4px);
	padding: 6px var(--bb-rl-space-200, 16px);
	border-radius: var(--bb-rl-radius-md, 6px);
	background-color: transparent;
	border: 1px solid var(--bb-rl-border-tertiary-color);
	color: var(--bb-rl-text-color);
	font-size: var(--bb-rl-font-size-sm, 0.85rem);
	font-weight: 400;
	text-decoration: none;
	transition: background-color 0.2s ease, border-color 0.2s ease;
}

.bb-rl-companion-comments .comments-pagination .nav-links a:hover,
.bb-rl-companion-comments .comment-navigation .nav-links a:hover {
	background-color: var(--bb-rl-background-secondary-color);
}

/* ─── Comment form ─────────────────────────────────────────────────────── */

.bb-rl-companion-comments .comment-respond {
	margin-top: var(--bb-rl-space-400, 32px);
	padding: var(--bb-rl-space-400, 32px);
	background: var(--bb-rl-background-secondary-color);
	border: 1px solid var(--bb-rl-border-color);
	border-radius: var(--bb-rl-companion-card-radius);
}

.bb-rl-companion-comments .comment-reply-title {
	font-size: 18px;
	font-weight: 700;
	color: var(--bb-rl-text-color);
	margin: 0 0 var(--bb-rl-space-200, 16px);
	padding: 0;
	display: block;
}

.bb-rl-companion-comments .comment-reply-title small {
	font-size: 13px;
	font-weight: 400;
	margin-left: var(--bb-rl-space-100, 8px);
}

.bb-rl-companion-comments .comment-reply-title small a {
	color: var(--bb-rl-text-tertiary-color);
	text-decoration: none;
}

.bb-rl-companion-comments .comment-reply-title small a:hover {
	color: var(--bb-rl-primary-color);
}

.bb-rl-companion-comments .logged-in-as,
.bb-rl-companion-comments .comment-notes {
	font-size: 13px;
	color: var(--bb-rl-text-tertiary-color);
	margin: 0 0 var(--bb-rl-space-200, 16px);
}

/* WCAG 1.4.1 — These links sit inside small grey paragraphs and rely on the
 * brand color to distinguish themselves. On sites with low-contrast brand
 * colors, that fails the 3:1 link-vs-surrounding-text rule. Adding an always-on
 * underline removes the color-only dependency and makes the rule moot. */
.bb-rl-companion-comments .logged-in-as a,
.bb-rl-companion-comments .comment-notes a {
	color: var(--bb-rl-primary-color);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.bb-rl-companion-comments .logged-in-as a:hover,
.bb-rl-companion-comments .comment-notes a:hover {
	text-decoration-thickness: 2px;
}

.bb-rl-companion-comments .required-field-message {
	font-size: 12px;
	color: var(--bb-rl-text-tertiary-color);
	display: block;
	margin-top: 4px;
}

.bb-rl-companion-comments .required {
	color: var(--bb-rl-background-danger-primary-color, #ec221f);
}

/* RL's main.css hides every native checkbox (opacity: 0; position: absolute)
 * because RL renders custom-styled checkboxes via labels with .bb-custom-check.
 * Plugins that inject opt-in checkboxes into the WP comment form (MailPoet,
 * FluentCRM, etc) don't get that replacement, so the checkbox disappears
 * leaving just floating "Yes, add me to..." text. We restore the native
 * checkbox here and give it a clean accent-color so it picks up the brand. */
.bb-rl-companion-comments input[type="checkbox"] {
	opacity: 1 !important;
	position: static !important;
	width: 16px;
	height: 16px;
	margin: 0 var(--bb-rl-space-100, 8px) 0 0;
	vertical-align: middle;
	accent-color: var(--bb-rl-background-brand-primary-color, var(--bb-rl-primary-color));
	cursor: pointer;
}

.bb-rl-companion-comments p.comment-form-mailpoet,
.bb-rl-companion-comments p.comment-form-cookies-consent,
.bb-rl-companion-comments p[class*="comment-form-"]:has(input[type="checkbox"]) {
	display: flex;
	align-items: flex-start;
	gap: var(--bb-rl-space-100, 8px);
	font-size: 14px;
	color: var(--bb-rl-text-secondary-color);
}

.bb-rl-companion-comments p.comment-form-mailpoet label,
.bb-rl-companion-comments p.comment-form-cookies-consent label {
	display: inline-flex;
	align-items: center;
	cursor: pointer;
	font-size: 14px;
	font-weight: 400;
	color: var(--bb-rl-text-secondary-color);
	margin: 0;
}

/* WordPress's comment_form() outputs a plain submit input. Force it to
 * adopt our button system styles so it matches every other button. */
.bb-rl-companion-comments .form-submit {
	display: flex;
	gap: var(--bb-rl-space-100, 8px);
	align-items: center;
}

.bb-rl-companion-comments .form-submit input[type="submit"],
.bb-rl-companion-comments #submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: var(--bb-rl-space-100, 8px) var(--bb-rl-space-200, 16px);
	font-size: 1rem;
	font-weight: 500;
	line-height: 1.4;
	text-align: center;
	border: 1px solid var(--bb-rl-background-brand-primary-color, var(--bb-rl-primary-color));
	background-color: var(--bb-rl-background-brand-primary-color, var(--bb-rl-primary-color));
	color: var(--bb-rl-text-white-color);
	border-radius: var(--bb-rl-radius-md, 6px);
	cursor: pointer;
	transition: background-color 0.2s ease, border-color 0.2s ease;
	-webkit-appearance: none;
	appearance: none;
}

.bb-rl-companion-comments .form-submit input[type="submit"]:hover,
.bb-rl-companion-comments #submit:hover {
	background-color: var(--bb-rl-background-brand-primary-hover-color);
	border-color: var(--bb-rl-background-brand-primary-hover-color);
}

.bb-rl-companion-comment-form label {
	display: block;
	font-size: 13px;
	font-weight: 600;
	color: var(--bb-rl-text-color);
	margin-bottom: 4px;
}

.bb-rl-companion-comment-form input[type="text"],
.bb-rl-companion-comment-form input[type="email"],
.bb-rl-companion-comment-form input[type="url"],
.bb-rl-companion-comment-form textarea {
	width: 100%;
	padding: 10px 14px;
	border: 1px solid var(--bb-rl-border-secondary-color);
	background: var(--bb-rl-background-color);
	color: var(--bb-rl-text-color);
	border-radius: var(--bb-rl-radius-md, 6px);
	font-size: 15px;
	font-family: inherit;
	transition: border-color 0.15s, box-shadow 0.15s;
}

.bb-rl-companion-comment-form textarea {
	min-height: 120px;
	resize: vertical;
}

.bb-rl-companion-comment-form input:focus,
.bb-rl-companion-comment-form textarea:focus {
	outline: none;
	border-color: var(--bb-rl-primary-color);
	box-shadow: 0 0 0 3px rgba(73, 70, 254, 0.15);
}

.bb-rl-companion-comment-form .comment-form-comment,
.bb-rl-companion-comment-form .comment-form-author,
.bb-rl-companion-comment-form .comment-form-email,
.bb-rl-companion-comment-form .comment-form-url {
	margin-bottom: var(--bb-rl-space-200, 16px);
}

.bb-rl-companion-comment-form .form-submit {
	margin-top: var(--bb-rl-space-200, 16px);
	margin-bottom: 0;
}

/* ─── Empty state ──────────────────────────────────────────────────────── */

.bb-rl-companion-empty {
	background: var(--bb-rl-background-secondary-color);
	border-radius: var(--bb-rl-companion-card-radius);
	padding: var(--bb-rl-space-700, 56px) var(--bb-rl-space-400, 32px);
	text-align: center;
}

.bb-rl-companion-empty h2 {
	font-size: 22px;
	font-weight: 700;
	color: var(--bb-rl-text-color);
	margin: 0 0 var(--bb-rl-space-100, 8px);
}

.bb-rl-companion-empty p {
	color: var(--bb-rl-text-secondary-color);
	margin: 0 auto var(--bb-rl-space-300, 24px);
	max-width: 50ch;
}

.bb-rl-companion-empty .bb-rl-companion-searchform {
	max-width: 420px;
	margin: 0 auto;
}

/* ─── Fallback header / footer (when RL isn't active) ──────────────────── */

.bb-rl-companion-fallback-header {
	background: var(--bb-rl-background-color);
	border-bottom: 1px solid var(--bb-rl-border-secondary-color);
	padding: var(--bb-rl-space-200, 16px) 0;
}

.bb-rl-companion-fallback-header .flex {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--bb-rl-space-300, 24px);
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 var(--bb-rl-space-300, 24px);
}

.bb-rl-companion-fallback-sitetitle {
	font-size: 18px;
	font-weight: 700;
	color: var(--bb-rl-text-color);
	text-decoration: none;
}

.bb-rl-companion-fallback-menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: var(--bb-rl-space-300, 24px);
}

.bb-rl-companion-fallback-menu a {
	color: var(--bb-rl-text-secondary-color);
	text-decoration: none;
	font-weight: 500;
	font-size: 14px;
}

.bb-rl-companion-fallback-menu a:hover { color: var(--bb-rl-primary-color); }

.bb-rl-companion-fallback-footer {
	background: var(--bb-rl-background-secondary-color);
	border-top: 1px solid var(--bb-rl-border-secondary-color);
	padding: var(--bb-rl-space-400, 32px) 0;
	margin-top: var(--bb-rl-space-700, 56px);
}

.bb-rl-companion-fallback-footer-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--bb-rl-space-300, 24px);
	flex-wrap: wrap;
}

.bb-rl-companion-fallback-credit {
	color: var(--bb-rl-text-tertiary-color);
	font-size: 14px;
	margin: 0;
}

.bb-rl-companion-fallback-footer-menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: var(--bb-rl-space-300, 24px);
}

.bb-rl-companion-fallback-footer-menu a {
	color: var(--bb-rl-text-secondary-color);
	text-decoration: none;
	font-size: 14px;
}

/* ─── Responsive ──────────────────────────────────────────────────────── */

@media (max-width: 600px) {
	.bb-rl-companion-content {
		padding: var(--bb-rl-space-400, 32px) var(--bb-rl-space-200, 16px) var(--bb-rl-space-600, 48px);
	}

	.bb-rl-companion-page-title { font-size: 26px; }
	.bb-rl-companion-article-title { font-size: 30px; }
	.bb-rl-companion-card-title { font-size: 19px; }

	.bb-rl-companion-post-list {
		grid-template-columns: 1fr;
	}

	.bb-rl-companion-postnav .nav-links { grid-template-columns: 1fr; }
	.bb-rl-companion-postnav .nav-next { text-align: left; }

	.bb-rl-companion-comment-list .children {
		margin-left: var(--bb-rl-space-200, 16px);
	}

	.bb-rl-companion-error-code { font-size: 72px; }
}

/* ─── Print ───────────────────────────────────────────────────────────── */

@media print {
	.bb-rl-companion-postnav,
	.bb-rl-companion-comments,
	.bb-rl-companion-card-footer { display: none; }

	.bb-rl-companion-content,
	.bb-rl-companion-content--single {
		max-width: none;
		padding: 0;
	}

	.bb-rl-companion-article-title { font-size: 28px; }
	.bb-rl-companion-article-body { font-size: 12pt; }
}