/* ============================================================
   RocketX — Dark theme for library pages (body.rx-darksite)
   Matches the homepage: deep navy canvas, frosted dark glass,
   ambient glow orbs, white type with orange accents, 2.5D depth.
   Section-level deco classes are global so the same markup also
   works inside custom Elementor widgets.
   ============================================================ */

/* ---------- Canvas ---------- */
body.rx-darksite {
	background-color: var(--rx-navy);
	color: #fff;
}

/* Guard: a leftover Elementor template (e.g. the old single-post #903) can
   set its page background to #FFFFFF via `body.elementor-page-NNN` — a (0,2,1)
   selector that loads after this file and would whitewash the dark blog,
   leaving white text on white. Force the dark canvas on all blog views. */
body.rx-blogsite {
	background-color: var(--rx-navy) !important;
}

body.rx-darksite .site-main,
body.rx-darksite .page-content,
body.rx-darksite .entry-content,
body.rx-darksite main {
	background: transparent;
}

/* Hero supplies the H1 — hide the theme's duplicate page title */
body.rx-darksite .page-header { display: none; }

/* Reset — WordPress/Hello Elementor's own base styles underline plain <a>
   tags by default. Every link component in the section library already sets
   its own text-decoration (buttons, cards, tiles), so a leftover underline
   showing through can only be an un-classed link slipping past those rules;
   kill it at the darksite root rather than chasing it component by component. */
body.rx-darksite a { text-decoration: none; }

body.rx-darksite .rx-section { position: relative; z-index: 1; }

/* Muted body copy on dark */
body.rx-darksite .rx-section__sub,
body.rx-darksite .rx-split__body,
body.rx-darksite .rx-cta-band__sub,
body.rx-darksite .rx-card-3d__body {
	color: rgba(255, 255, 255, 0.72);
	opacity: 1;
}

/* ---------- Page hero (2.5D) ---------- */
body.rx-darksite .rx-page-hero {
	overflow: hidden;
	padding-top: clamp(4.5rem, 10vw, 8rem);
	padding-bottom: clamp(4.5rem, 10vw, 8rem);
}

.rx-page-hero { position: relative; }
.rx-page-hero__deco { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.rx-page-hero__inner { position: relative; z-index: 2; }

.rx-page-hero__orb { position: absolute; border-radius: 50%; filter: blur(52px); opacity: 0.55; }
.rx-page-hero__orb--a {
	width: 420px; height: 420px; top: -130px; left: -90px;
	background: radial-gradient(circle, rgba(220, 79, 44, 0.55), transparent 70%);
}
.rx-page-hero__orb--b {
	width: 460px; height: 460px; top: -70px; right: -100px;
	background: radial-gradient(circle, rgba(109, 93, 246, 0.40), transparent 70%);
}

/* Floating frosted mini trading cards */
.rx-page-hero__pane {
	position: absolute;
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	padding: 0.95rem 1.05rem;
	border-radius: var(--rx-r-lg);
	background: rgba(255, 255, 255, 0.07);
	border: 1px solid rgba(255, 255, 255, 0.14);
	box-shadow: var(--rx-shadow-lg);
	-webkit-backdrop-filter: blur(16px);
	backdrop-filter: blur(16px);
}
.rx-page-hero__pane--1 { width: 222px; left: 4%; bottom: 9%; transform: rotate(-6deg); }
.rx-page-hero__pane--2 { width: 166px; right: 6%; bottom: 15%; transform: rotate(6deg); }
.rx-page-hero__pane-row { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.rx-page-hero__pane-cap { font-size: var(--rx-fs-xs); font-weight: 600; letter-spacing: 0.02em; color: rgba(255, 255, 255, 0.6); }
.rx-page-hero__pane-up { font-size: var(--rx-fs-md); font-weight: 700; color: #3FD17A; }

.rx-spark { width: 100%; height: 38px; display: block; }
.rx-spark polyline { fill: none; stroke: var(--rx-orange-300); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.rx-bars { display: flex; align-items: flex-end; gap: 6px; height: 56px; }
.rx-bars span { flex: 1; border-radius: 4px 4px 2px 2px; background: linear-gradient(180deg, var(--rx-orange-300), var(--rx-orange)); }

.rx-page-hero__chip {
	position: absolute;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.6rem 0.95rem;
	border-radius: var(--rx-r-pill);
	background: rgba(255, 255, 255, 0.09);
	border: 1px solid rgba(255, 255, 255, 0.16);
	box-shadow: var(--rx-shadow-md);
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
	font-size: var(--rx-fs-sm);
	font-weight: 600;
	color: #fff;
	white-space: nowrap;
}
.rx-page-hero__chip--1 { left: 8%; top: 22%; }
.rx-page-hero__chip--2 { right: 6%; top: 30%; }
.rx-page-hero__chip strong { color: #3FD17A; margin-left: 0.15rem; }
.rx-page-hero__chip-dot { width: 8px; height: 8px; border-radius: 50%; background: #3FD17A; box-shadow: 0 0 0 4px rgba(63, 209, 122, 0.18); }
.rx-page-hero__chip-star { color: var(--rx-orange-300); letter-spacing: 1px; }

@media (max-width: 820px) {
	.rx-page-hero__pane,
	.rx-page-hero__chip { display: none; }
}

/* ---------- Split (dark) ---------- */
body.rx-darksite .rx-split__media {
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid var(--rx-line);
	box-shadow: var(--rx-shadow-md);
}
body.rx-darksite .rx-split:has(.rx-split__copy:only-child) {
	grid-template-columns: minmax(0, 760px);
	justify-content: center;
	text-align: center;
}
body.rx-darksite .rx-split:has(.rx-split__copy:only-child) .rx-split__copy { align-items: center; }

/* ---------- Stats panel (dark glass) ---------- */
.rx-stats--panel {
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid var(--rx-line);
	border-radius: var(--rx-r-xl);
	box-shadow: var(--rx-shadow-md);
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
	padding: clamp(2rem, 4vw, 3.25rem);
}

/* ---------- Prose (light text on dark) ---------- */
body.rx-darksite .rx-prose__body { color: rgba(255, 255, 255, 0.78); }
body.rx-darksite .rx-prose__body h2,
body.rx-darksite .rx-prose__body h3 { color: #fff; }
body.rx-darksite .rx-prose__body a { color: var(--rx-orange-300); }