/*
 * xcoins-pages.css — styling for xcoins-core programmatic pages (T1–T4 buy family).
 * Styles the .xc-* body markup the plugin emits, wrapped by theme/xcoins/layout.php.
 * Dark, brand-led (Color Hierarchy 2.2: navy dominant, blue accents only).
 * Tokens mirror theme.json so this file is self-contained on virtual pages.
 */

:root {
	--navy: #273045;
	--rich-black: #111620;
	--dark-grey: #1F242D;
	--true-blue: #015ADF;
	--bright-blue: #1A9CFC;
	--slate: #788196;
	--soft-white: #EEEFF2;
	--off-white: #F9FDFF;
	--line: rgba(255, 255, 255, .08);
	--card: rgba(255, 255, 255, .03);
	--display: 'Saira', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
	--body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
	--maxw: 1080px;
	--rad: 14px;
	--rad-lg: 22px;
	--pill: 999px;
}

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

body.xcoins-virtual-page {
	margin: 0;
	background: var(--rich-black);
	color: var(--off-white);
	font-family: var(--body);
	font-size: 1rem;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}
body.xcoins-virtual-page img { max-width: 100%; height: auto; }
/* Content links only — scoped to <main> so the shared header/footer chrome
   (styled in base.css) is not affected. */
.xcoins-main a { color: var(--bright-blue); text-decoration: none; }
.xcoins-main a:hover { text-decoration: underline; }

/* Header, buttons and footer now live in base.css (shared chrome). */

/* ---------- Page shell ---------- */
.xcoins-main { display: block; }
.xc-page {
	max-width: var(--maxw); margin: 0 auto; padding: 0 24px;
}
.xc-page > section { padding: 56px 0; border-top: 1px solid var(--line); }
.xc-page > section:first-child { border-top: none; }
.xc-page h2 {
	font-family: var(--display); font-weight: 800; font-size: clamp(1.6rem, 3vw, 2.25rem);
	line-height: 1.1; letter-spacing: -.01em; margin: 0 0 24px;
}
.xc-page h3 { font-family: var(--body); }

/* ---------- 1. Hero ---------- */
.xc-hero {
	padding: 64px 0 56px !important;
	background:
		radial-gradient(900px 480px at 85% -10%, rgba(26,156,252,.16), transparent 60%),
		radial-gradient(700px 420px at 0% 120%, rgba(1,90,223,.18), transparent 60%);
	border-top: none;
}
.xc-hero__title {
	font-family: var(--display); font-weight: 800;
	font-size: clamp(2.5rem, 6vw, 4.25rem); line-height: 1; letter-spacing: -.02em;
	margin: 0 0 18px;
}
.xc-hero__answer { font-size: 1.15rem; color: #cfd6e2; max-width: 640px; line-height: 1.55; }

/* ---------- 3. How to buy (steps) ---------- */
.xc-steps__list {
	list-style: none; margin: 0; padding: 0;
	display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; counter-reset: step;
}
.xc-step {
	background: var(--card); border: 1px solid var(--line); border-radius: var(--rad);
	padding: 24px; counter-increment: step;
}
.xc-step::before {
	content: "STEP " counter(step);
	display: block; font-family: var(--display); font-weight: 700; font-size: .7rem;
	letter-spacing: .14em; color: var(--bright-blue); margin-bottom: 10px;
}
.xc-step__title { font-family: var(--body); font-weight: 600; font-size: 1.05rem; margin: 0 0 6px; }
.xc-step__body { margin: 0; color: var(--slate); font-size: .95rem; }
@media (max-width: 760px) { .xc-steps__list { grid-template-columns: 1fr; } }

/* ---------- 4. Pay ---------- */
.xc-pay__intro { color: var(--slate); max-width: 640px; margin: 0; }

/* ---------- 5. USPs ---------- */
.xc-usps__grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.xc-usp {
	background: var(--card); border: 1px solid var(--line); border-radius: var(--rad);
	padding: 22px; min-height: 150px;
}
.xc-usp__title { font-family: var(--body); font-weight: 600; font-size: 1rem; margin: 0 0 8px; }
.xc-usp__body { margin: 0; color: var(--slate); font-size: .9rem; line-height: 1.45; }
@media (max-width: 980px) { .xc-usps__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .xc-usps__grid { grid-template-columns: 1fr; } }

/* ---------- 6. Fees ---------- */
.xc-fees__body { color: #cfd6e2; max-width: 680px; }

/* ---------- 7. Regulation ---------- */
.xc-regulation { text-align: center; }
.xc-regulation::before {
	content: "🛡"; display: grid; place-items: center;
	width: 56px; height: 56px; margin: 0 auto 18px; border-radius: 14px;
	background: rgba(1,90,223,.12); border: 1px solid rgba(1,90,223,.4); font-size: 24px;
}
.xc-regulation h2 { max-width: 760px; margin-inline: auto; }
.xc-regulation__body { color: var(--slate); max-width: 620px; margin: 0 auto; font-size: .95rem; line-height: 1.6; }

/* ---------- 8. FAQ (legacy generic fallback only — scoped to .xc-page) ----------
   Hub + T1 FAQs use template-parts/faq-section.php + sections-shared.css. */
.xc-page .xc-faq { max-width: 760px; }
.xc-page .xc-faq__item {
	border: 1px solid var(--line); border-radius: var(--rad);
	background: var(--card); margin-bottom: 10px; padding: 4px 18px;
}
.xc-page .xc-faq__item[open] { border-color: rgba(26,156,252,.35); }
.xc-page .xc-faq__q {
	font-family: var(--display); font-weight: 700; font-size: 1.02rem;
	padding: 14px 0; cursor: pointer; list-style: none;
}
.xc-page .xc-faq__q::-webkit-details-marker { display: none; }
.xc-page .xc-faq__q::after { content: "+"; float: right; color: var(--bright-blue); font-size: 1.2rem; }
.xc-page .xc-faq__item[open] .xc-faq__q::after { content: "−"; }
.xc-page .xc-faq__a { color: var(--slate); padding: 0 0 16px; line-height: 1.6; }

/* ---------- 9. Related ---------- */
.xc-related h2 { margin-bottom: 8px; }

/* ---------- Shared pill buttons (used by T1 + T2's own hero overrides) ----------
   Scoped under `.xcoins-main` (2 classes, (0,2,0)) rather than a bare
   `.xc-btn--*` (0,1,0) — `.xcoins-main a { color: var(--bright-blue) }` in
   this file is (0,1,1) and would otherwise win and force blue text on these
   buttons regardless of load order (see t1-template-architecture memory,
   BUG #4). */
.xc-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	font-family: var(--display); font-weight: 700; font-size: .95rem;
	padding: 14px 26px; border-radius: var(--pill); text-decoration: none; cursor: pointer; border: 1px solid transparent;
	transition: transform .15s ease;
}
.xc-btn:hover { transform: translateY(-1px); }
/* Beat `.xcoins-main a:hover { text-decoration: underline }` (0,2,1) — buttons
   must never underline on hover. */
.xcoins-main .xc-btn:hover,
.xcoins-main .xc-btn:focus,
.xcoins-main .xc-btn:focus-visible { text-decoration: none; }
.xcoins-main .xc-btn--primary { background: var(--true-blue); color: #fff; }
.xcoins-main .xc-btn--secondary { background: transparent; color: #fff; border-color: rgba(255,255,255,.35); }
.xcoins-main .xc-btn--secondary:hover { background: rgba(255,255,255,.08); }

/* Footer lives in base.css (shared chrome). */