/**
 * Rogue Knowledge Base — brand-native docs styling.
 * Palette and type mirror the site's design tokens (Forest / Brass / Off-White,
 * Cormorant Garamond for display, Archivo for text).
 */

.rkb {
	--rkb-forest: #0F3D2E;
	--rkb-fern: #1D5A44;
	--rkb-brass: #B08D57;
	--rkb-brass-dark: #9A7A48;
	--rkb-offwhite: #F6F5F2;
	--rkb-charcoal: #1A1A1A;
	--rkb-body: #55524A;
	--rkb-light: #EFEDE7;
	--rkb-riverstone: #E4E0D5;
	--rkb-deep: #0B2D22;
	--rkb-line: #DDD9CF;
	--rkb-line-card: #E5E2D9;
	--rkb-serif: 'Cormorant Garamond', Georgia, serif;
	--rkb-sans: 'Archivo', -apple-system, BlinkMacSystemFont, sans-serif;

	background: var(--rkb-offwhite);
	font-family: var(--rkb-sans);
	color: var(--rkb-body);
}

.rkb *,
.rkb *::before,
.rkb *::after { box-sizing: border-box; }

/* ---------- hero ---------- */

.rkb-hero {
	background: var(--rkb-forest);
	color: var(--rkb-offwhite);
	padding: 96px 24px 88px;
}

.rkb-hero-compact { padding: 72px 24px 64px; }

.rkb-hero-inner {
	max-width: 1240px;
	margin: 0 auto;
	text-align: center;
}

.rkb-eyebrow {
	font-size: 12px;
	letter-spacing: 0.26em;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--rkb-brass);
	margin-bottom: 22px;
}

.rkb-hero h1 {
	font-family: var(--rkb-serif);
	font-weight: 500;
	font-size: 56px;
	line-height: 1.1;
	letter-spacing: -0.01em;
	color: var(--rkb-offwhite);
	margin: 0;
	text-wrap: balance;
}

.rkb-hero p {
	font-size: 17px;
	line-height: 1.7;
	color: rgba(246, 245, 242, 0.72);
	max-width: 620px;
	margin: 22px auto 0;
}

/* ---------- search ---------- */

.rkb-search {
	display: flex;
	gap: 10px;
	max-width: 560px;
	margin: 36px auto 0;
}

.rkb-search input[type="search"] {
	flex: 1;
	font-family: var(--rkb-sans);
	font-size: 15px;
	color: var(--rkb-charcoal);
	background: var(--rkb-offwhite);
	border: 1px solid transparent;
	border-radius: 999px;
	padding: 15px 22px;
	outline: none;
	min-width: 0;
}

.rkb-search input[type="search"]:focus { border-color: var(--rkb-brass); }

.rkb-search button {
	font-family: var(--rkb-sans);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--rkb-offwhite);
	background: var(--rkb-brass);
	border: none;
	border-radius: 999px;
	padding: 15px 28px;
	cursor: pointer;
	transition: background 0.15s ease;
}

.rkb-search button:hover { background: var(--rkb-brass-dark); }

/* ---------- layout ---------- */

.rkb-main,
.rkb-article {
	max-width: 1240px;
	margin: 0 auto;
	padding: 64px 24px 96px;
}

.rkb-article { max-width: 820px; }

/* ---------- breadcrumbs ---------- */

.rkb-crumbs {
	font-size: 12px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	font-weight: 600;
	color: #8A8578;
	margin-bottom: 26px;
}

.rkb-crumbs a { color: #8A8578; text-decoration: none; }
.rkb-crumbs a:hover { color: var(--rkb-brass); }
.rkb-crumb-sep { margin: 0 10px; color: #C7C2B4; }
.rkb-crumbs [aria-current="page"] { color: var(--rkb-forest); }

/* ---------- section grid (the hub) ---------- */

.rkb-sections {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 32px;
}

.rkb-section {
	background: #FFFFFF;
	border: 1px solid var(--rkb-line-card);
	border-radius: 16px;
	padding: 36px 32px;
}

.rkb-section-title {
	font-family: var(--rkb-sans);
	font-size: 15px;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	margin: 0 0 10px;
}

.rkb-section-title a { color: var(--rkb-forest); text-decoration: none; }
.rkb-section-title a:hover { color: var(--rkb-brass); }

.rkb-section-desc {
	font-size: 14px;
	line-height: 1.65;
	color: var(--rkb-body);
	margin: 0 0 20px;
}

.rkb-section-links {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--rkb-line);
}

.rkb-section-links li {
	border-bottom: 1px solid var(--rkb-line);
	padding: 12px 0;
}

.rkb-section-links a {
	font-size: 14.5px;
	line-height: 1.5;
	color: var(--rkb-charcoal);
	text-decoration: none;
}

.rkb-section-links a:hover { color: var(--rkb-brass); }

.rkb-section-more {
	display: inline-block;
	margin-top: 18px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--rkb-brass);
	text-decoration: none;
}

/* ---------- article cards ---------- */

.rkb-card-list {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px;
}

.rkb-card {
	display: block;
	background: #FFFFFF;
	border: 1px solid var(--rkb-line-card);
	border-radius: 14px;
	padding: 26px 28px;
	text-decoration: none;
	transition: border-color 0.15s ease;
}

.rkb-card:hover { border-color: var(--rkb-brass); }

.rkb-card-title {
	display: block;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.4;
	color: var(--rkb-forest);
}

.rkb-card-summary {
	display: block;
	margin-top: 8px;
	font-size: 14px;
	line-height: 1.65;
	color: var(--rkb-body);
}

/* ---------- badge ---------- */

.rkb-badge {
	display: inline-block;
	margin-left: 8px;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--rkb-brass);
	border: 1px solid var(--rkb-line);
	border-radius: 999px;
	padding: 3px 10px;
	vertical-align: middle;
}

/* ---------- document layout: contents panel beside the article ---------- */

.rkb-doc { background: #FFFFFF; }

.rkb-layout {
	max-width: 1320px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 320px minmax(0, 1fr);
	align-items: start;
}

/* The panel runs the height of the document, like a manual's margin. */
.rkb-aside {
	background: var(--rkb-offwhite);
	border-right: 1px solid var(--rkb-line);
	align-self: stretch;
	padding: 44px 36px 56px;
}

.rkb-side { position: sticky; top: 100px; }

.rkb-side-back {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	font-weight: 600;
	color: var(--rkb-body);
	text-decoration: none;
	margin-bottom: 28px;
}

.rkb-side-back:hover { color: var(--rkb-brass); }

.rkb-side-title {
	font-size: 15px;
	font-weight: 700;
	line-height: 1.45;
	color: var(--rkb-forest);
	padding-bottom: 18px;
	border-bottom: 1px solid var(--rkb-line);
}

.rkb-side-toc ul {
	list-style: none;
	margin: 0;
	padding: 18px 0 0;
	border-bottom: 1px solid var(--rkb-line);
	padding-bottom: 18px;
}

.rkb-side-toc li { margin: 0; }

.rkb-side-toc a {
	display: block;
	padding: 8px 0 8px 12px;
	border-left: 2px solid transparent;
	font-size: 14px;
	line-height: 1.5;
	color: var(--rkb-body);
	text-decoration: none;
}

.rkb-side-toc a:hover { color: var(--rkb-forest); }

.rkb-side-toc a.is-active {
	color: var(--rkb-forest);
	font-weight: 600;
	border-left-color: var(--rkb-brass);
}

.rkb-side-toc .rkb-toc-l3 a { padding-left: 28px; font-size: 13.5px; }

/* Numbers: tabular, quiet, never competing with the words. */
.rkb-h-num {
	color: var(--rkb-brass);
	font-variant-numeric: tabular-nums;
	margin-right: 6px;
	font-weight: 600;
}

.rkb-side-help {
	margin-top: 32px;
	background: var(--rkb-forest);
	border-radius: 14px;
	padding: 26px 24px;
	text-align: center;
}

.rkb-side-help-title {
	font-family: var(--rkb-serif);
	font-size: 24px;
	font-weight: 500;
	color: var(--rkb-offwhite);
}

.rkb-side-help p {
	font-size: 13.5px;
	line-height: 1.6;
	color: rgba(246, 245, 242, 0.72);
	margin: 8px 0 18px;
}

.rkb-side-help .rkb-btn { padding: 13px 26px; font-size: 12px; }

/* ---------- the document column ---------- */

.rkb-layout .rkb-article {
	max-width: 820px;
	margin: 0;
	padding: 44px 56px 88px;
}

.rkb-meta {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
	margin: 14px 0 0;
}

.rkb-meta-date {
	font-size: 12px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #8A8578;
}

/* Headings carry their number and a link handle on the right, with a rule under. */
.rkb-content h2.rkb-h,
.rkb-content h3.rkb-h {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 20px;
	scroll-margin-top: 100px;
	border-bottom: 1px solid var(--rkb-line);
	padding-bottom: 12px;
}

.rkb-content h3.rkb-h { border-bottom: none; padding-bottom: 0; }

.rkb-h-text { flex: 1; }

.rkb-anchor {
	flex-shrink: 0;
	opacity: 0;
	color: #A8A398;
	line-height: 1;
	text-decoration: none;
	transition: opacity 0.15s ease, color 0.15s ease;
}

.rkb-content h2.rkb-h:hover .rkb-anchor,
.rkb-content h3.rkb-h:hover .rkb-anchor,
.rkb-anchor:focus { opacity: 1; }

.rkb-anchor:hover { color: var(--rkb-brass); }
.rkb-anchor.is-copied { opacity: 1; color: var(--rkb-brass); }

.rkb-anchor.is-copied::after {
	content: " copied";
	font-size: 10px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	margin-left: 6px;
}

/* ---------- previous / next ---------- */

.rkb-prevnext {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
	margin-top: 56px;
}

.rkb-prevnext-item {
	display: block;
	border: 1px solid var(--rkb-line-card);
	border-radius: 14px;
	padding: 20px 24px;
	background: #FFFFFF;
	text-decoration: none;
	transition: border-color 0.15s ease;
}

.rkb-prevnext-item:hover { border-color: var(--rkb-brass); }
.rkb-next { text-align: right; }

.rkb-prevnext-label {
	display: block;
	font-size: 10px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	font-weight: 700;
	color: #8A8578;
	margin-bottom: 6px;
}

.rkb-prevnext-title {
	display: block;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.4;
	color: var(--rkb-forest);
}

/* ---------- author notes in content ---------- */

.rkb-content .rkb-note {
	background: var(--rkb-light);
	border-left: 3px solid var(--rkb-brass);
	border-radius: 0 12px 12px 0;
	padding: 18px 24px;
	margin: 26px 0;
}

.rkb-content .rkb-note p:last-child { margin-bottom: 0; }


/* ---------- block editor content ---------- */
/*
 * Images, video, embeds, galleries, and tables as the block editor emits them.
 * Core loads its own per-block CSS on render; these rules put the result in the
 * brand — rounded corners, quiet captions, and figures that breathe.
 */

.rkb-content figure,
.rkb-content .wp-block-image,
.rkb-content .wp-block-embed,
.rkb-content .wp-block-video,
.rkb-content .wp-block-gallery { margin: 32px 0; }

.rkb-content figure img,
.rkb-content .wp-block-image img {
	max-width: 100%;
	height: auto;
	display: block;
	border-radius: 12px;
	border: 1px solid var(--rkb-line-card);
}

/* A screenshot with no frame of its own reads better with a soft one. */
.rkb-content .wp-block-image.is-style-plain img { border: none; }

.rkb-content figcaption,
.rkb-content .wp-block-image figcaption,
.rkb-content .wp-block-embed figcaption {
	margin-top: 10px;
	font-size: 13.5px;
	line-height: 1.6;
	color: #8A8578;
	text-align: left;
}

/* Video and embeds: the theme provides responsive sizing, we provide the corners. */
.rkb-content .wp-block-embed__wrapper iframe,
.rkb-content .wp-block-video video,
.rkb-content video,
.rkb-content iframe {
	max-width: 100%;
	border-radius: 12px;
	display: block;
}

.rkb-content .wp-block-embed__wrapper { position: relative; }

/* Galleries */
.rkb-content .wp-block-gallery.has-nested-images { gap: 14px; }
.rkb-content .wp-block-gallery figcaption { text-align: center; }

/* Tables scroll rather than break the column on a phone. */
.rkb-content .wp-block-table { overflow-x: auto; }

.rkb-content table {
	width: 100%;
	border-collapse: collapse;
	font-size: 14.5px;
	margin: 0;
}

.rkb-content table th,
.rkb-content table td {
	border: 1px solid var(--rkb-line);
	padding: 10px 14px;
	text-align: left;
	vertical-align: top;
}

.rkb-content table th {
	background: var(--rkb-light);
	color: var(--rkb-forest);
	font-weight: 700;
	font-size: 13px;
	letter-spacing: 0.04em;
}

.rkb-content .wp-block-table figcaption { text-align: left; }

/* Buttons inside an article pick up the brand pill. */
.rkb-content .wp-block-button__link {
	background: var(--rkb-brass);
	color: var(--rkb-offwhite);
	border-radius: 999px;
	padding: 15px 30px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-decoration: none;
}

.rkb-content .wp-block-button__link:hover { background: var(--rkb-brass-dark); color: var(--rkb-offwhite); }

/* Quotes reuse the pull-quote treatment. */
.rkb-content .wp-block-quote {
	border-left: 3px solid var(--rkb-brass);
	margin: 26px 0;
	padding: 4px 0 4px 22px;
	font-family: var(--rkb-serif);
	font-size: 21px;
	line-height: 1.5;
	color: var(--rkb-forest);
}

.rkb-content .wp-block-quote cite {
	display: block;
	margin-top: 10px;
	font-family: var(--rkb-sans);
	font-size: 13px;
	font-style: normal;
	color: #8A8578;
}

/* Separators and columns */
.rkb-content .wp-block-separator {
	border: none;
	border-top: 1px solid var(--rkb-line);
	margin: 40px 0;
}

.rkb-content .wp-block-columns { gap: 32px; margin: 32px 0; }

/* Alignment: keep wide media inside the reading column but let it breathe. */
.rkb-content .alignwide { margin-left: -40px; margin-right: -40px; max-width: calc(100% + 80px); }
.rkb-content .alignfull { margin-left: -40px; margin-right: -40px; max-width: calc(100% + 80px); }
.rkb-content .aligncenter { margin-left: auto; margin-right: auto; }

@media (max-width: 767px) {
	.rkb-content .alignwide,
	.rkb-content .alignfull { margin-left: 0; margin-right: 0; max-width: 100%; }
	.rkb-content .wp-block-columns { gap: 20px; }
}

/* ---------- single article ---------- */

.rkb-article-title {
	font-family: var(--rkb-serif);
	font-weight: 500;
	font-size: 48px;
	line-height: 1.12;
	color: var(--rkb-forest);
	margin: 0 0 8px;
	text-wrap: balance;
}

.rkb-summary {
	background: var(--rkb-light);
	border-left: 3px solid var(--rkb-brass);
	border-radius: 0 12px 12px 0;
	padding: 22px 26px;
	margin: 28px 0 36px;
}

.rkb-summary p {
	margin: 0;
	font-size: 17px;
	line-height: 1.7;
	color: var(--rkb-charcoal);
}

.rkb-content {
	font-size: 16px;
	line-height: 1.8;
	color: var(--rkb-body);
}

.rkb-content h2 {
	font-family: var(--rkb-serif);
	font-weight: 500;
	font-size: 32px;
	line-height: 1.25;
	color: var(--rkb-forest);
	margin: 44px 0 14px;
}

.rkb-content h3 {
	font-family: var(--rkb-sans);
	font-weight: 700;
	font-size: 18px;
	line-height: 1.4;
	color: var(--rkb-forest);
	margin: 32px 0 10px;
}

.rkb-content p { margin: 0 0 18px; }
.rkb-content ul,
.rkb-content ol { margin: 0 0 18px; padding-left: 22px; }
.rkb-content li { margin-bottom: 8px; }
.rkb-content a { color: var(--rkb-forest); text-decoration: underline; text-underline-offset: 2px; }
.rkb-content a:hover { color: var(--rkb-brass); }
.rkb-content img { max-width: 100%; height: auto; border-radius: 12px; }

.rkb-content blockquote {
	border-left: 3px solid var(--rkb-brass);
	margin: 26px 0;
	padding: 4px 0 4px 22px;
	font-family: var(--rkb-serif);
	font-size: 21px;
	line-height: 1.5;
	color: var(--rkb-forest);
}

.rkb-content code {
	background: var(--rkb-light);
	border-radius: 5px;
	padding: 2px 6px;
	font-size: 14px;
}

.rkb-content pre {
	background: var(--rkb-charcoal);
	color: var(--rkb-offwhite);
	border-radius: 12px;
	padding: 20px 22px;
	overflow-x: auto;
	font-size: 13.5px;
	line-height: 1.6;
}

.rkb-content pre code { background: none; padding: 0; color: inherit; }

.rkb-updated {
	margin-top: 40px;
	padding-top: 18px;
	border-top: 1px solid var(--rkb-line);
	font-size: 12px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #8A8578;
}

/* ---------- related ---------- */

.rkb-related { margin-top: 56px; }

.rkb-related h2 {
	font-family: var(--rkb-serif);
	font-weight: 500;
	font-size: 30px;
	color: var(--rkb-forest);
	margin: 0 0 22px;
}

/* ---------- help CTA ---------- */

.rkb-help {
	margin-top: 72px;
	background: var(--rkb-forest);
	border-radius: 18px;
	padding: 56px 40px;
	text-align: center;
}

.rkb-help h2 {
	font-family: var(--rkb-serif);
	font-weight: 500;
	font-size: 38px;
	line-height: 1.15;
	color: var(--rkb-offwhite);
	margin: 0;
}

.rkb-help p {
	font-size: 16px;
	line-height: 1.7;
	color: rgba(246, 245, 242, 0.72);
	max-width: 520px;
	margin: 16px auto 0;
}

.rkb-help-actions {
	display: flex;
	gap: 16px;
	justify-content: center;
	flex-wrap: wrap;
	margin-top: 32px;
}

.rkb-btn {
	display: inline-block;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	border-radius: 999px;
	padding: 17px 34px;
	text-decoration: none;
	transition: background 0.15s ease, border-color 0.15s ease;
}

.rkb-btn-primary {
	background: var(--rkb-brass);
	color: var(--rkb-offwhite);
	border: 1px solid var(--rkb-brass);
}

.rkb-btn-primary:hover { background: var(--rkb-brass-dark); border-color: var(--rkb-brass-dark); color: var(--rkb-offwhite); }

.rkb-btn-ghost {
	background: transparent;
	color: var(--rkb-offwhite);
	border: 1px solid rgba(246, 245, 242, 0.35);
}

.rkb-btn-ghost:hover { border-color: var(--rkb-offwhite); color: var(--rkb-offwhite); }

/* ---------- misc ---------- */

.rkb-results-head h2 {
	font-family: var(--rkb-serif);
	font-weight: 500;
	font-size: 36px;
	color: var(--rkb-forest);
	margin: 0 0 28px;
}

.rkb-empty {
	font-size: 16px;
	line-height: 1.7;
	color: var(--rkb-body);
	padding: 40px 0;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden; clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

/* ---------- responsive ---------- */

@media (max-width: 1024px) {
	.rkb-sections { grid-template-columns: repeat(2, 1fr); }
	.rkb-hero h1 { font-size: 44px; }
	.rkb-article-title { font-size: 38px; }

	/* The contents panel moves above the document. */
	.rkb-layout { grid-template-columns: 1fr; }
	.rkb-aside {
		position: static;
		border-right: none;
		border-bottom: 1px solid var(--rkb-line);
		padding: 28px 24px;
	}
	.rkb-side { position: static; }
	.rkb-side-help { display: none; }
	.rkb-layout .rkb-article { padding: 36px 24px 72px; }
}

@media (max-width: 767px) {
	.rkb-hero { padding: 64px 20px 56px; }
	.rkb-hero h1 { font-size: 34px; }
	.rkb-main, .rkb-article { padding: 44px 20px 64px; }
	.rkb-aside { padding: 22px 20px; }
	.rkb-layout .rkb-article { padding: 28px 20px 64px; }
	.rkb-prevnext { grid-template-columns: 1fr; }
	.rkb-next { text-align: left; }
	.rkb-content h2.rkb-h, .rkb-content h3.rkb-h { gap: 10px; }
	.rkb-anchor { opacity: 1; }
	.rkb-sections,
	.rkb-card-list { grid-template-columns: 1fr; }
	.rkb-search { flex-direction: column; border-radius: 16px; }
	.rkb-search input[type="search"],
	.rkb-search button { width: 100%; }
	.rkb-help { padding: 40px 24px; }
	.rkb-help h2 { font-size: 30px; }
}