/*
Theme Name: Juntrax Chrome
Theme URI: https://juntrax.com/
Author: Juntrax
Author URI: https://juntrax.com/
Description: Lightweight WordPress theme that mirrors the juntrax.com marketing site header & footer. The chrome (assets/chrome.css) is generated from the Next.js Navigation/Footer components via scripts/gen-wp-chrome.mjs. Post content renders as authored so Yoast SEO and formatting are preserved.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: juntrax-chrome
*/

/* ============================================================
 * Base — the marketing site's page canvas.
 * (Header/footer visuals live in assets/chrome.css, scoped to
 *  #jx-site-header / #jx-site-footer.)
 * ========================================================== */
html { -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	font-family: "Rubik", system-ui, -apple-system, sans-serif;
	font-size: 16px;
	line-height: 1.6;
	color: #080e2d;
	background: #f8faff;
	-webkit-font-smoothing: antialiased;
}

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

/* The mobile menu / submenu are always in the DOM (unlike the React version,
 * which mounts them on open) and toggled via the `hidden` attribute. The scoped
 * chrome CSS sets display on them (some with !important), so `hidden` must win.
 * The submenu override is specificity-matched to beat the chrome's
 * `.mobileNavMenuOptions ul li ul { display:block !important }` rule. */
[hidden] { display: none !important; }
#jx-site-header .mobileNavMenuOptions ul li ul[hidden] { display: none !important; }

/* Clears the fixed glass nav. Mirrors --nav-offset behaviour. */
.jx-nav-spacer { height: 104px; }
@media (max-width: 991px) { .jx-nav-spacer { height: 84px; } }

.jx-content { display: block; min-height: 40vh; }

.jx-container {
	width: 100%;
	max-width: 1140px;
	margin: 0 auto;
	padding: 0 24px;
}

a { color: #1a56ff; }

/* ============================================================
 * Single post / page — chrome AROUND the content.
 * ========================================================== */
.jx-article { padding: 40px 0 80px; }

.jx-breadcrumb {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 28px;
	font-size: 13px;
	color: #6b7280;
}
.jx-breadcrumb a { color: #4376ea; text-decoration: none; font-weight: 500; }
.jx-breadcrumb a:hover { text-decoration: underline; }
.jx-breadcrumb .sep { color: #cbd2dd; }

.jx-post-head { max-width: 760px; margin: 0 auto 32px; }

.jx-chip {
	display: inline-block;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #1a56ff;
	background: #dce8ff;
	border-radius: 9999px;
	padding: 5px 12px;
	margin-bottom: 16px;
}

.jx-post-title {
	font-size: 40px;
	line-height: 1.15;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: #080e2d;
	margin: 0 0 16px;
}

.jx-post-meta {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 14px;
	color: #7382a8;
	margin-bottom: 8px;
}
.jx-post-meta .dot { width: 3px; height: 3px; border-radius: 50%; background: #cbd2dd; }

.jx-featured {
	max-width: 900px;
	margin: 0 auto 40px;
}
.jx-featured img { width: 100%; height: auto; border-radius: 14px; display: block; }

/* ---- The authored content column. Baseline typography only:
 *      authored inline styles always win over these defaults. ---- */
.jx-post-content {
	max-width: 760px;
	margin: 0 auto;
	font-size: 18px;
	line-height: 1.75;
	color: #1c2a3e;
}
.jx-post-content > *:first-child { margin-top: 0; }
.jx-post-content p { margin: 0 0 1.4em; }
.jx-post-content h2 { font-size: 28px; line-height: 1.25; font-weight: 700; color: #080e2d; margin: 2em 0 0.6em; letter-spacing: -0.01em; }
.jx-post-content h3 { font-size: 22px; line-height: 1.3; font-weight: 600; color: #080e2d; margin: 1.6em 0 0.5em; }
.jx-post-content h4 { font-size: 18px; font-weight: 600; color: #080e2d; margin: 1.4em 0 0.5em; }
.jx-post-content a { color: #1a56ff; text-decoration: underline; text-underline-offset: 2px; }
.jx-post-content ul, .jx-post-content ol { margin: 0 0 1.4em; padding-left: 1.4em; }
.jx-post-content li { margin-bottom: 0.5em; }
.jx-post-content img { max-width: 100%; height: auto; border-radius: 10px; }
.jx-post-content figure { margin: 1.8em 0; }
.jx-post-content figcaption { font-size: 14px; color: #7382a8; text-align: center; margin-top: 8px; }
.jx-post-content blockquote {
	margin: 1.8em 0;
	padding: 4px 20px;
	border-left: 3px solid #4376ea;
	color: #3d4e7a;
	font-style: italic;
}
.jx-post-content pre {
	background: #0b1020;
	color: #e5e9f5;
	padding: 18px 20px;
	border-radius: 10px;
	overflow-x: auto;
	font-size: 14px;
}
.jx-post-content code { font-size: 0.9em; }
.jx-post-content :not(pre) > code {
	background: #eef2fb;
	padding: 2px 6px;
	border-radius: 4px;
}
/* WordPress table overflow safety */
.jx-post-content table { width: 100%; border-collapse: collapse; margin: 1.8em 0; font-size: 15px; display: block; overflow-x: auto; }
.jx-post-content th, .jx-post-content td { border: 1px solid #e5e7eb; padding: 10px 14px; text-align: left; }
.jx-post-content th { background: #f2f6ff; font-weight: 600; color: #080e2d; }

@media (max-width: 767px) {
	.jx-post-title { font-size: 30px; }
	.jx-post-content { font-size: 17px; }
}

/* ============================================================
 * Blog landing / archive — post cards (mirrors /resources hub).
 * ========================================================== */
.jx-archive { padding: 24px 0 80px; }

.jx-archive-head { max-width: 1140px; margin: 0 auto 40px; padding: 0 24px; text-align: center; }
.jx-archive-title { font-size: 40px; font-weight: 700; letter-spacing: -0.02em; color: #080e2d; margin: 0 0 12px; }
.jx-archive-sub { font-size: 18px; color: #7382a8; margin: 0; }

.jx-card-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 28px;
}
@media (max-width: 991px) { .jx-card-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .jx-card-grid { grid-template-columns: 1fr; } }

.jx-card {
	display: flex;
	flex-direction: column;
	background: #ffffff;
	border: 1px solid rgba(26, 86, 255, 0.12);
	border-radius: 16px;
	overflow: hidden;
	transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.jx-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 14px 38px rgba(8, 14, 45, 0.1);
	border-color: rgba(26, 86, 255, 0.25);
}
.jx-card-thumb { display: block; aspect-ratio: 16 / 9; background: #dce8ff; overflow: hidden; }
.jx-card-thumb img { width: 100%; height: 100%; object-fit: cover; }
.jx-card-body { padding: 22px; display: flex; flex-direction: column; flex: 1; }
.jx-card-title { font-size: 19px; line-height: 1.35; font-weight: 600; color: #080e2d; margin: 12px 0 10px; }
.jx-card-title a { color: inherit; text-decoration: none; }
.jx-card-title a:hover { color: #1a56ff; }
.jx-card-meta { font-size: 13px; color: #7382a8; margin-bottom: 10px; }
.jx-card-excerpt { font-size: 15px; color: #667085; line-height: 1.6; margin: 0 0 18px; }
.jx-card-more { margin-top: auto; font-size: 14px; font-weight: 600; color: #1a56ff; text-decoration: none; }
.jx-card-more:hover { text-decoration: underline; }

/* Pagination */
.jx-pagination { max-width: 1140px; margin: 48px auto 0; padding: 0 24px; }
.jx-pagination .nav-links { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; }
.jx-pagination .page-numbers {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 40px; height: 40px; padding: 0 12px;
	border: 1px solid rgba(26, 86, 255, 0.15); border-radius: 8px;
	color: #3d4e7a; text-decoration: none; font-size: 14px; font-weight: 500;
}
.jx-pagination .page-numbers.current { background: #4376ea; color: #fff; border-color: #4376ea; }
.jx-pagination a.page-numbers:hover { background: #dce8ff; }

/* Search / 404 shared */
.jx-notice { max-width: 760px; margin: 60px auto; padding: 0 24px; text-align: center; }
.jx-notice h1 { font-size: 40px; font-weight: 700; color: #080e2d; margin: 0 0 12px; }
.jx-notice p { font-size: 18px; color: #7382a8; margin: 0 0 24px; }
.jx-search-form { display: flex; gap: 10px; max-width: 480px; margin: 0 auto; }
.jx-search-form input[type="search"] {
	flex: 1; padding: 12px 16px; font-size: 15px;
	border: 1px solid rgba(26, 86, 255, 0.25); border-radius: 8px; font-family: inherit;
}
.jx-btn {
	display: inline-block; background: #4376ea; color: #fff; border: none;
	border-radius: 8px; padding: 12px 22px; font-size: 15px; font-weight: 600;
	text-decoration: none; cursor: pointer; font-family: inherit;
}
.jx-btn:hover { background: #1040cc; color: #fff; }