/* ============================================================
   RocketX Section Library
   Styles for the reusable shortcode sections (inc/sections.php):
   page hero · feature grid · split · stats · cta · faq · prose
   Built on rx-section / rx-card-3d / rx-glass / rx-counter.
   ============================================================ */

/* Dark sections get light text by default (Elementor per-widget colors still win). */
.rx-section.rx-bg-dark {
	color: #fff;
}

/* Buttons must never inherit the content link underline or hover colour
   (Elementor's global kit styles `a:hover` colour, which washes out the
   ghost button text). Lock decoration + colour across every state. */
a.rx-btn,
a.rx-btn:hover,
a.rx-btn:focus,
a.rx-btn:active {
	text-decoration: none !important;
}

.rx-btn--primary,
.rx-btn--primary:hover,
.rx-btn--primary:focus,
.rx-btn--primary:active,
.rx-btn--ghost,
.rx-btn--ghost:hover,
.rx-btn--ghost:focus,
.rx-btn--ghost:active {
	color: #fff !important;
}

/* ---------- Page hero (interior banner) ---------- */
.rx-page-hero__inner {
	display: flex;
	flex-direction: column;
	gap: var(--rx-s-3);
	max-width: 820px;
}

.rx-page-hero--center .rx-page-hero__inner {
	margin-inline: auto;
	align-items: center;
	text-align: center;
}

.rx-page-hero__eyebrow {
	align-self: flex-start;
}

.rx-page-hero--center .rx-page-hero__eyebrow {
	align-self: center;
}

.rx-page-hero__title {
	font-size: clamp(2.5rem, 5.5vw, 4.5rem);
	font-weight: 600;
	line-height: 1.05;
	letter-spacing: -0.02em;
	margin: 0;
}

.rx-page-hero__sub {
	font-size: var(--rx-fs-md);
	line-height: 1.65;
	opacity: 0.78;
	max-width: 620px;
	margin: 0;
}

.rx-page-hero__ctas {
	display: flex;
	flex-wrap: wrap;
	gap: var(--rx-s-2);
	margin-top: var(--rx-s-2);
}

/* ---------- Feature grid columns (class-based, robust through the_content) ---------- */
.rx-cards-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rx-cards-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rx-cards-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 1024px) {
	.rx-cards-grid--3,
	.rx-cards-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
	.rx-cards-grid--2,
	.rx-cards-grid--3,
	.rx-cards-grid--4 { grid-template-columns: 1fr; }
}

/* Opt-in modifier: centers a trailing incomplete row instead of left-aligning it. */
.rx-cards-grid--center-last {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

.rx-cards-grid--center-last > * {
	flex: 0 1 calc((100% - (2 * var(--rx-s-3))) / 3);
}

@media (max-width: 1024px) {
	.rx-cards-grid--center-last > * {
		flex: 0 1 calc((100% - var(--rx-s-3)) / 2);
	}
}

@media (max-width: 600px) {
	.rx-cards-grid--center-last > * {
		flex: 1 1 100%;
	}
}

/* ---------- Split (text + media) ---------- */
.rx-split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(2rem, 5vw, 5rem);
	align-items: center;
}

.rx-split--media-left .rx-split__media {
	order: -1;
}

.rx-split__copy {
	display: flex;
	flex-direction: column;
	gap: var(--rx-s-3);
	align-items: flex-start;
}

.rx-split__title {
	font-size: clamp(1.75rem, 3.5vw, 3rem);
	font-weight: 600;
	line-height: 1.12;
	letter-spacing: -0.02em;
	margin: 0;
}

.rx-split__body {
	font-size: var(--rx-fs-md);
	line-height: 1.7;
	opacity: 0.8;
}

.rx-split__body > :first-child { margin-top: 0; }
.rx-split__body > :last-child { margin-bottom: 0; }

.rx-split__media {
	padding: var(--rx-s-2);
	border-radius: var(--rx-r-xl);
	overflow: hidden;
}

.rx-split__media img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: calc(var(--rx-r-xl) - var(--rx-s-2));
}

@media (max-width: 800px) {
	.rx-split {
		grid-template-columns: 1fr;
	}
	.rx-split--media-left .rx-split__media {
		order: 0;
	}
}

/* ---------- CTA band ---------- */
.rx-cta-band__inner {
	text-align: center;
	max-width: 860px;
	margin-inline: auto;
	padding: clamp(2.5rem, 6vw, 5rem) clamp(1.5rem, 5vw, 4rem);
	color: #fff;
}

.rx-cta-band__title {
	font-size: clamp(2rem, 4vw, 3.25rem);
	font-weight: 600;
	line-height: 1.1;
	letter-spacing: -0.02em;
	margin: 0 0 var(--rx-s-2);
}

.rx-cta-band__sub {
	font-size: var(--rx-fs-md);
	line-height: 1.65;
	opacity: 0.8;
	max-width: 560px;
	margin: 0 auto var(--rx-s-4);
}

.rx-cta-band__ctas {
	display: flex;
	flex-wrap: wrap;
	gap: var(--rx-s-2);
	justify-content: center;
}

/* ---------- FAQ accordion ---------- */
.rx-faq {
	max-width: 820px;
	margin-inline: auto;
}

.rx-faq__list {
	display: flex;
	flex-direction: column;
	gap: var(--rx-s-2);
}

.rx-faq__item {
	padding: 0 var(--rx-s-3);
	color: #fff;
}

.rx-faq__q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--rx-s-2);
	padding: var(--rx-s-3) 0;
	font-size: var(--rx-fs-md);
	font-weight: 600;
	cursor: pointer;
	list-style: none;
}

.rx-faq__q::-webkit-details-marker { display: none; }

.rx-faq__icon {
	position: relative;
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
}

.rx-faq__icon::before,
.rx-faq__icon::after {
	content: "";
	position: absolute;
	inset: 0;
	margin: auto;
	background: var(--rx-orange-300);
	transition: transform var(--rx-dur-fast) var(--rx-ease-out), opacity var(--rx-dur-fast);
}

.rx-faq__icon::before { width: 18px; height: 2px; }
.rx-faq__icon::after  { width: 2px; height: 18px; }

.rx-faq__item[open] .rx-faq__icon::after { transform: rotate(90deg); opacity: 0; }

.rx-faq__a {
	padding: 0 0 var(--rx-s-3);
	font-size: var(--rx-fs-base);
	line-height: 1.7;
	opacity: 0.78;
}

.rx-faq__a > :first-child { margin-top: 0; }
.rx-faq__a > :last-child { margin-bottom: 0; }

/* A categorised FAQ page stacks many [rx_faq] sections back to back — the
   generic .rx-section rhythm (built for a handful of wide marketing blocks)
   turns that into a very empty-feeling scroll. Tighten it throughout. */
.rx-section.rx-faq-cat { padding-top: clamp(1.5rem, 3vw, 2.5rem); padding-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.rx-faq-cat > .rx-section__header { margin-bottom: clamp(1.25rem, 2.5vw, 2rem); }
body.rx-darksite .rx-page-hero:has(+ .rx-faq-search-section) { padding-bottom: clamp(1.5rem, 3vw, 2.5rem); }

/* ---------- FAQ search ([rx_faq_search]) ---------- */
.rx-faq-search-section { padding-top: clamp(1.5rem, 3vw, 2.5rem); padding-bottom: clamp(1rem, 2vw, 1.5rem); }
.rx-faq-search { max-width: 820px; margin-inline: auto; }
.rx-faq-search__box {
	position: relative;
	display: flex;
	align-items: center;
}
.rx-faq-search__ic {
	position: absolute;
	left: 18px;
	width: 18px;
	height: 18px;
	color: rgba(255, 255, 255, 0.42);
	pointer-events: none;
}
/* Element+class (not just class) to tie the specificity of Hello Elementor's
   reset.css `input[type="search"]` rule (0,1,1) — a plain class alone (0,1,0)
   loses that fight regardless of stylesheet order, and its 1rem padding
   pushes the search icon on top of the placeholder text. */
input.rx-faq-search__input {
	width: 100%;
	height: 50px;
	padding: 0 20px 0 48px;
	border-radius: var(--rx-r-pill, 999px);
	border: 1px solid var(--rx-stroke-light);
	background: rgba(255, 255, 255, 0.05);
	color: #fff;
	font-size: var(--rx-fs-sm);
	font-family: inherit;
	transition: border-color 160ms, background 160ms, box-shadow 160ms;
}
.rx-faq-search__input::placeholder { color: rgba(255, 255, 255, 0.4); }
input.rx-faq-search__input:focus {
	outline: none;
	border-color: rgba(240, 133, 102, 0.6);
	background: rgba(255, 255, 255, 0.08);
	box-shadow: 0 0 0 4px rgba(220, 79, 44, 0.16);
}
.rx-faq-search__empty {
	max-width: 820px;
	margin: var(--rx-s-3) auto 0;
	text-align: center;
	font-size: var(--rx-fs-sm);
	color: rgba(255, 255, 255, 0.55);
}
.rx-faq-search__empty a { color: var(--rx-orange-300, #F08566); }
.rx-faq__item mark {
	background: rgba(240, 133, 102, 0.28);
	color: #fff;
	border-radius: 3px;
	padding: 0 1px;
}

/* ---------- Prose (legal / blog) ---------- */
.rx-prose {
	max-width: 760px;
	margin-inline: auto;
}

.rx-prose__title {
	font-size: clamp(2rem, 4vw, 3rem);
	font-weight: 600;
	letter-spacing: -0.02em;
	line-height: 1.1;
	margin: 0.5rem 0 0;
}

.rx-prose__body {
	font-size: var(--rx-fs-md);
	line-height: 1.8;
	color: var(--rx-ink-2);
}

.rx-prose__body h2 {
	font-size: var(--rx-fs-xl);
	font-weight: 600;
	letter-spacing: -0.01em;
	margin: 2.5rem 0 1rem;
}

.rx-prose__body h3 {
	font-size: var(--rx-fs-lg);
	font-weight: 600;
	margin: 2rem 0 0.75rem;
}

.rx-prose__body p { margin: 0 0 1.25rem; }

.rx-prose__body a {
	color: var(--rx-orange-600);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.rx-prose__body ul,
.rx-prose__body ol {
	margin: 0 0 1.25rem;
	padding-left: 1.5rem;
}

.rx-prose__body li { margin-bottom: 0.5rem; }

/* ---------- Page-specific compaction: Who We Are (page-id-161) ---------- */
/* Same treatment as the FAQ/glossary hero-to-content tightening, pulled in
   even further per feedback ("less crawling") since this page has no dense
   list below it to fill the space — just one more section. Both selectors
   stack body.page-id-161 with .rx-darksite to out-specificity dark.css's
   own `body.rx-darksite .rx-page-hero` padding rule (0,2,1), which a lone
   page-id selector would tie with and lose on load order. */
body.page-id-161.rx-darksite .rx-page-hero { padding-bottom: clamp(1rem, 2vw, 1.5rem); }
body.page-id-161.rx-darksite .rx-page-hero + .rx-section { padding-top: clamp(1rem, 2vw, 1.5rem); }

/* ---------- Page-specific compaction: Partners (page-id-435) ---------- */
/* Same hero-to-content tightening as page-id-161, applied after removing the
   legacy floating hero widgets (kept the newer rx-bg-fx streak/viz layer). */
body.page-id-435.rx-darksite .rx-page-hero { padding-bottom: clamp(1rem, 2vw, 1.5rem); }
body.page-id-435.rx-darksite .rx-page-hero + .rx-section { padding-top: clamp(1rem, 2vw, 1.5rem); }

/* ---------- Page-specific compaction: Contact Us (page-id-178) ---------- */
body.page-id-178.rx-darksite .rx-page-hero { padding-bottom: clamp(1rem, 2vw, 1.5rem); }
body.page-id-178.rx-darksite .rx-page-hero + .rx-section { padding-top: clamp(1rem, 2vw, 1.5rem); }

/* ---------- Page-specific compaction: Trading Station / forex-trading (page-id-111) ---------- */
/* Same hero-to-content tightening as page-id-161/435/178, applied after removing the
   legacy floating hero widgets (kept the newer rx-bg-fx / rx-live-float layer). */
body.page-id-111.rx-darksite .rx-page-hero { padding-bottom: clamp(1rem, 2vw, 1.5rem); }
body.page-id-111.rx-darksite .rx-page-hero + .rx-section { padding-top: clamp(1rem, 2vw, 1.5rem); }

/* ---------- Page-specific compaction: Terms and conditions (page-id-258) ---------- */
/* Same hero-to-content tightening as the other reference pages, applied after
   replacing the legacy Elementor link-list widget with [rx_legal_documents]. */
body.page-id-258.rx-darksite .rx-page-hero { padding-bottom: clamp(1rem, 2vw, 1.5rem); }
body.page-id-258.rx-darksite .rx-page-hero + .rx-section { padding-top: clamp(1rem, 2vw, 1.5rem); }

/* ---------- Page-specific compaction: Synthetics (page-id-1906) ---------- */
/* Same hero-to-content tightening as the other reference pages, applied after
   removing the legacy floating hero widgets (kept the newer rx-bg-fx / rx-live-float layer). */
body.page-id-1906.rx-darksite .rx-page-hero { padding-bottom: clamp(1rem, 2vw, 1.5rem); }
body.page-id-1906.rx-darksite .rx-page-hero + .rx-section { padding-top: clamp(1rem, 2vw, 1.5rem); }