/*
Theme Name: RetroX
Theme URI: https://retrox.tv
Author: RetroX
Author URI: https://retrox.tv
Description: Marketing and documentation theme for RetroX, the retro gaming app for Android and Raspberry Pi. Bold dark landing page for the front page, calm readable layout for docs and blog.
Version: 1.0.0
Requires at least: 5.9
Requires PHP: 7.4
Text Domain: retrox
License: GNU General Public License v2 or later
License URI: LICENSE

Screenshot: add a real 1200x900 screenshot.png here once the theme is visually finished.
*/

/* ---------- Custom properties ---------- */
:root {
	--color-bg: #001d39;
	--color-bg-alt: #0a4174;
	--color-surface: #0a4174;
	--color-surface-2: #49769f;
	--color-border: #49769f;
	--color-text: #bdd8e9;
	--color-text-muted: #7bbde8;
	--color-text-dim: #6ea2b3;

	--accent-blue: #7bbde8;
	--accent-blue-2: #49769f;
	--accent-purple: #0a4174;
	--accent-orange: #bdd8e9;
	--accent-pink: #4e8ea2;
	--accent-green: #6ea2b3;

	--gradient-brand: linear-gradient(90deg, var(--accent-blue-2), var(--accent-purple));
	--gradient-hero: radial-gradient(120% 100% at 15% 0%, #0a4174 0%, var(--color-bg) 55%), radial-gradient(90% 80% at 100% 10%, #49769f 0%, transparent 60%);
	--shadow-glow: 0 0 50px rgba(123, 189, 232, 0.18);

	--radius-sm: 8px;
	--radius-md: 16px;
	--radius-lg: 28px;

	--font-display: Poppins, "Segoe UI", "Space Grotesk", system-ui, sans-serif;
	--font-body: Poppins, "Inter", "Segoe UI", system-ui, sans-serif;

	--container: 1240px;
	--container-narrow: 760px;

	--space-1: 0.5rem;
	--space-2: 1rem;
	--space-3: 1.75rem;
	--space-4: 2.75rem;
	--space-5: 4.5rem;
	--space-6: 7rem;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body, h1, h2, h3, h4, p, figure, blockquote, ul, ol, dl, dd {
	margin: 0;
}
ul[class], ol[class] { list-style: none; padding: 0; }
img, picture, video { display: block; max-width: 100%; height: auto; }
button, input, textarea, select { font: inherit; color: inherit; }
a { color: inherit; }

/* ---------- Base ---------- */
body {
	background: var(--color-bg);
	color: var(--color-text);
	font-family: var(--font-body);
	font-size: 18px;
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
	font-family: var(--font-display);
	line-height: 1.15;
	font-weight: 700;
	color: #fff;
}

h1 { font-size: clamp(2.4rem, 5vw, 4rem); }
h2 { font-size: clamp(1.9rem, 3.4vw, 2.75rem); }
h3 { font-size: clamp(1.3rem, 2vw, 1.6rem); }

a { text-decoration: none; }

.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	background: var(--accent-blue-2);
	color: #fff;
	padding: 0.75rem 1.25rem;
	z-index: 1000;
	border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus { left: 0; }

.container {
	width: 100%;
	max-width: var(--container);
	margin-inline: auto;
	padding-inline: var(--space-3);
}

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

.eyebrow {
	display: inline-block;
	font-family: var(--font-display);
	font-size: 0.85rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--accent-blue);
	margin-bottom: var(--space-2);
}

/* ---------- Buttons ---------- */
.btn {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 1.05rem;
	padding: 0.95rem 1.9rem;
	border-radius: 999px;
	border: 2px solid transparent;
	cursor: pointer;
	transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, border-color 0.15s ease;
	white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn-primary {
	background: var(--gradient-brand);
	color: #fff;
	box-shadow: 0 10px 30px -8px rgba(58, 134, 255, 0.55);
}
.btn-primary:hover { box-shadow: 0 14px 36px -6px rgba(176, 107, 255, 0.55); }

.btn-secondary {
	background: transparent;
	border-color: var(--color-border);
	color: var(--color-text);
}
.btn-secondary:hover { border-color: var(--accent-blue); color: var(--accent-blue); }

.btn-ghost {
	background: rgba(255, 255, 255, 0.06);
	color: #fff;
}
.btn-ghost:hover { background: rgba(255, 255, 255, 0.12); }

.btn-row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
}

/* ---------- Site header ---------- */
.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: rgba(10, 12, 22, 0.82);
	backdrop-filter: saturate(140%) blur(10px);
	border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-3);
	padding-block: 1rem;
}

.site-branding { display: flex; align-items: center; }
.site-branding .custom-logo-link img { width: auto; height: 36px; }

.brand-link { display: flex; align-items: center; }
.brand-mark { width: auto; height: 2.4rem; }

.primary-navigation { display: flex; align-items: center; gap: var(--space-4); }

.primary-menu {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	font-family: var(--font-display);
	font-weight: 500;
	font-size: 0.98rem;
}
.primary-menu a {
	color: var(--color-text-muted);
	padding: 0.4rem 0.1rem;
	border-bottom: 2px solid transparent;
	transition: color 0.15s ease, border-color 0.15s ease;
}
.primary-menu a:hover,
.primary-menu .current-menu-item > a { color: #fff; border-color: var(--accent-blue); }

.menu-toggle {
	display: none;
	background: none;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	padding: 0.5rem 0.65rem;
}
.menu-toggle span,
.menu-toggle::before,
.menu-toggle::after {
	content: "";
	display: block;
	width: 22px;
	height: 2px;
	background: #fff;
	margin: 5px 0;
}

/* ---------- Hero ---------- */
.hero {
	position: relative;
	background: var(--gradient-hero);
	padding-block: var(--space-6) var(--space-5);
	overflow: hidden;
}
.hero__inner {
	display: grid;
	grid-template-columns: 1.05fr 1fr;
	gap: var(--space-5);
	align-items: center;
}
.hero__content h1 { margin-bottom: var(--space-2); }
.hero__content h1 .accent {
	background: var(--gradient-brand);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
.hero__lede {
	font-size: 1.2rem;
	color: var(--color-text-muted);
	max-width: 46ch;
	margin-bottom: var(--space-4);
}
.hero__meta {
	margin-top: var(--space-3);
	display: flex;
	gap: var(--space-4);
	flex-wrap: wrap;
	color: var(--color-text-dim);
	font-size: 0.95rem;
}
.hero__media { position: relative; }
.hero__media img,
.hero__media iframe {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-glow), 0 40px 80px -30px rgba(0, 0, 0, 0.7);
	border: 1px solid rgba(255, 255, 255, 0.08);
}

/* Inline YouTube embeds inside post/page content, faced the same way as the hero */
.video-embed { position: relative; margin-block: var(--space-3); }
.video-embed img,
.video-embed iframe {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	border-radius: var(--radius-md);
	box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.7);
	border: 1px solid rgba(255, 255, 255, 0.08);
}

.video-facade {
	position: relative;
	display: block;
	width: 100%;
	padding: 0;
	background: none;
	border: none;
	cursor: pointer;
}
.video-facade__play {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
}
.video-facade__play svg {
	box-sizing: border-box;
	width: 68px;
	height: 68px;
	padding: 18px;
	border-radius: 50%;
	background: rgba(10, 12, 22, 0.75);
	color: #fff;
	box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.25);
	transition: transform 0.15s ease, background 0.15s ease;
}
.video-facade:hover .video-facade__play svg,
.video-facade:focus-visible .video-facade__play svg {
	transform: scale(1.08);
	background: var(--accent-blue-2);
}

/* ---------- Section scaffolding ---------- */
.section { padding-block: var(--space-6); }
.section--tight { padding-block: var(--space-5); }
.section-head {
	max-width: 640px;
	margin-bottom: var(--space-5);
}
.section-head.center { margin-inline: auto; text-align: center; }
.section-head p { color: var(--color-text-muted); font-size: 1.1rem; }

/* ---------- Feature rows ---------- */
.feature-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-5);
	align-items: center;
	padding-block: var(--space-5);
	border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.feature-row:first-of-type { border-top: none; }
.feature-row--reverse .feature-row__media { order: -1; }
.feature-row__media img {
	border-radius: var(--radius-md);
	box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.8);
	border: 1px solid rgba(255, 255, 255, 0.08);
}
.feature-row__icon {
	width: 52px;
	height: 52px;
	display: grid;
	place-items: center;
	border-radius: var(--radius-sm);
	background: var(--color-surface-2);
	color: var(--accent-blue);
	margin-bottom: var(--space-2);
}
.feature-row h3 { margin-bottom: var(--space-1); }
.feature-row p { color: var(--color-text-muted); }

/* ---------- Systems showcase ---------- */
.systems-band { background: var(--color-bg-alt); }
.systems-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
	gap: 0.85rem;
}
.systems-grid li {
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	padding: 0.85rem 1rem;
	font-family: var(--font-display);
	font-size: 0.95rem;
	color: var(--color-text-muted);
	text-align: center;
	transition: border-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.systems-grid li:hover { border-color: var(--accent-blue); color: #fff; transform: translateY(-2px); }
.systems-more { margin-top: var(--space-3); text-align: center; }

/* ---------- CTA band ---------- */
.cta-band {
	background: var(--gradient-brand);
	border-radius: var(--radius-lg);
	margin-inline: var(--space-3);
	padding: var(--space-5) var(--space-4);
	text-align: center;
	color: #fff;
}
.cta-band h2 { color: #fff; }
.cta-band p { color: rgba(255, 255, 255, 0.85); font-size: 1.15rem; margin-bottom: var(--space-3); max-width: 55ch; margin-inline: auto; }
.cta-band .btn-row { justify-content: center; }
.cta-band .btn-primary { background: #fff; color: #171238; box-shadow: none; }
.cta-band .btn-secondary { border-color: rgba(255, 255, 255, 0.55); color: #fff; }
.cta-band .btn-secondary:hover { border-color: #fff; color: #fff; }

/* ---------- Trust / social proof ---------- */
.trust-band {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-3);
	padding-block: var(--space-5);
}
.trust-stat {
	font-family: var(--font-display);
	font-size: 1.15rem;
	color: var(--color-text-muted);
}
.trust-stat strong { color: #fff; font-size: 1.4rem; display: block; }
.social-links { display: flex; gap: 0.85rem; }
.social-links a {
	width: 44px;
	height: 44px;
	display: grid;
	place-items: center;
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: 50%;
	color: var(--color-text-muted);
	transition: color 0.15s ease, border-color 0.15s ease;
}
.social-links a:hover { color: var(--accent-blue); border-color: var(--accent-blue); }
.social-links svg { width: 20px; height: 20px; }

/* ---------- Footer ---------- */
.site-footer {
	background: var(--color-bg-alt);
	border-top: 1px solid rgba(255, 255, 255, 0.06);
	padding-block: var(--space-5) var(--space-3);
	margin-top: var(--space-6);
}
.footer-grid {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr 1fr;
	gap: var(--space-4);
	padding-bottom: var(--space-4);
}
.footer-brand { font-family: var(--font-display); font-weight: 700; font-size: 1.3rem; color: #fff; margin-bottom: var(--space-1); }
.footer-tagline { color: var(--color-text-dim); max-width: 32ch; }
.footer-col h4 { font-size: 1rem; color: #fff; margin-bottom: var(--space-2); }
.footer-col ul { display: flex; flex-direction: column; gap: 0.6rem; }
.footer-col a { color: var(--color-text-muted); }
.footer-col a:hover { color: var(--accent-blue); }
.footer-bottom {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var(--space-2);
	padding-top: var(--space-3);
	border-top: 1px solid rgba(255, 255, 255, 0.06);
	color: var(--color-text-dim);
	font-size: 0.9rem;
}
.footer-bottom a { color: var(--color-text-dim); }
.footer-bottom a:hover { color: var(--accent-blue); }

/* ================================================================
   Documentation / blog pages — calmer, reading-focused
   ================================================================ */
.site-main.is-doc { padding-block: var(--space-5); }

.doc-header {
	max-width: var(--container-narrow);
	margin: 0 auto var(--space-4);
	padding-inline: var(--space-3);
}
.doc-header .eyebrow { color: var(--accent-purple); }
.doc-header h1 { font-size: clamp(2rem, 4vw, 2.75rem); }
.doc-meta { color: var(--color-text-dim); font-size: 0.95rem; margin-top: var(--space-1); }

.doc-content,
.entry-content {
	max-width: var(--container-narrow);
	margin: 0 auto;
	padding-inline: var(--space-3);
	color: var(--color-text-muted);
	font-size: 1.05rem;
	line-height: 1.85;
}
.doc-content h2, .entry-content h2 { margin-top: var(--space-4); margin-bottom: var(--space-2); font-size: 1.6rem; color: #fff; }
.doc-content h3, .entry-content h3 { margin-top: var(--space-3); margin-bottom: var(--space-1); font-size: 1.25rem; color: #fff; }
.doc-content p, .entry-content p { margin-bottom: var(--space-2); }
.doc-content ul, .doc-content ol,
.entry-content ul, .entry-content ol {
	margin-bottom: var(--space-2);
	padding-left: 1.4rem;
	list-style: disc;
}
.entry-content ol { list-style: decimal; }
.doc-content a, .entry-content a { color: var(--accent-blue); text-decoration: underline; text-underline-offset: 3px; }
.doc-content img, .entry-content img { border-radius: var(--radius-md); margin-block: var(--space-2); }
.doc-content blockquote, .entry-content blockquote {
	border-left: 3px solid var(--accent-purple);
	padding-left: var(--space-2);
	color: var(--color-text-dim);
	margin-bottom: var(--space-2);
}
.doc-content pre, .entry-content pre,
.doc-content code, .entry-content code {
	font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
}
.doc-content code, .entry-content code { padding: 0.15rem 0.4rem; font-size: 0.92em; }
.doc-content pre, .entry-content pre { padding: var(--space-2); overflow-x: auto; margin-bottom: var(--space-2); }
.doc-content pre code, .entry-content pre code { border: none; padding: 0; background: none; }
.doc-content hr, .entry-content hr { border: none; border-top: 1px solid var(--color-border); margin-block: var(--space-4); }
.doc-content table, .entry-content table { width: 100%; border-collapse: collapse; margin-bottom: var(--space-3); }
.doc-content th, .doc-content td, .entry-content th, .entry-content td {
	border: 1px solid var(--color-border);
	padding: 0.6rem 0.8rem;
	text-align: left;
}

.retrox-shortcode-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.85rem 1.7rem;
	margin: 0.4rem 0.6rem 0.4rem 0;
	border-radius: var(--radius-sm);
	border: 1px solid var(--color-border);
	background: var(--color-surface);
	color: #fff;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 0.95rem;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	text-decoration: none !important;
	transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}
.retrox-shortcode-btn:hover { transform: translateY(-2px); background: var(--color-surface-2); }
.retrox-shortcode-btn svg { width: 18px; height: 18px; flex-shrink: 0; }
.retrox-shortcode-btn--green { border-color: var(--accent-green); }
.retrox-shortcode-btn--green svg { color: var(--accent-green); }
.retrox-shortcode-btn--blue { border-color: var(--accent-blue-2); }
.retrox-shortcode-btn--blue svg { color: var(--accent-blue-2); }
.retrox-shortcode-btn--red { border-color: var(--accent-pink); }
.retrox-shortcode-btn--red svg { color: var(--accent-pink); }

.archive-list { display: flex; flex-direction: column; gap: var(--space-4); }
.archive-list article {
	padding-bottom: var(--space-4);
	border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.archive-list h2 { font-size: 1.5rem; margin-bottom: 0.4rem; }
.archive-list h2 a:hover { color: var(--accent-blue); }
.archive-list .doc-meta { margin-bottom: var(--space-2); }
.archive-list .excerpt { color: var(--color-text-muted); }

.pagination {
	display: flex;
	justify-content: space-between;
	gap: var(--space-2);
	margin-top: var(--space-4);
	font-family: var(--font-display);
}
.pagination a, .pagination span { color: var(--color-text-muted); }
.pagination a:hover { color: var(--accent-blue); }

.comments-area { max-width: var(--container-narrow); margin: var(--space-5) auto 0; padding-inline: var(--space-3); }
.comment-list { display: flex; flex-direction: column; gap: var(--space-3); }
.comment-body { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-2); }
.comment-meta { font-size: 0.9rem; color: var(--color-text-dim); margin-bottom: 0.4rem; }
.comment-respond input,
.comment-respond textarea {
	width: 100%;
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	color: var(--color-text);
	padding: 0.7rem 0.9rem;
	margin-bottom: var(--space-2);
}

.not-found { text-align: center; padding-block: var(--space-6); }
.not-found h1 { font-size: clamp(4rem, 12vw, 8rem); background: var(--gradient-brand); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
	.hero__inner { grid-template-columns: 1fr; }
	.hero__media { order: -1; }
	.feature-row { grid-template-columns: 1fr; }
	.feature-row--reverse .feature-row__media { order: 0; }
	.footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 780px) {
	.primary-navigation { position: fixed; inset: 64px 0 auto 0; background: var(--color-bg); border-bottom: 1px solid var(--color-border); flex-direction: column; align-items: stretch; padding: var(--space-2) var(--space-3) var(--space-3); transform: translateY(-8px); opacity: 0; pointer-events: none; transition: opacity 0.15s ease, transform 0.15s ease; }
	.primary-navigation.is-open { opacity: 1; transform: translateY(0); pointer-events: auto; }
	.primary-menu { flex-direction: column; align-items: flex-start; gap: var(--space-2); }
	.menu-toggle { display: block; }
	.cta-band { margin-inline: var(--space-2); padding: var(--space-4) var(--space-2); }
	.footer-grid { grid-template-columns: 1fr; }
	.trust-band { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 480px) {
	body { font-size: 16.5px; }
	.systems-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
}