/**
 * guides.css — single blog post (Guides) content styling.
 *
 * Loaded only on is_singular('post') (see inc/enqueue.php). The theme was
 * built product-first, so single-post content had no typography, table, or
 * FAQ styling. This gives the /guides/ long-form content proper vertical
 * rhythm, aligned/readable tables, and reuses the site FAQ accordion look
 * (mirrors the .mxo-faq__* rules in pages.css) for cohesiveness.
 */

/* ── Post hero header (mirrors .mxo-vspoke-hero--bg on model/archive pages) ── */
.mxo-guide-hero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	display: flex;
	align-items: center;
	background: var(--secondary);
	color: #fff;
}
.mxo-guide-hero--bg {
	min-height: clamp(300px, 32vw, 440px);
}
.mxo-guide-hero__bg-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: right center;
	z-index: -2;
}
.mxo-guide-hero__scrim {
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(90deg, rgba(11, 16, 21, 0.86) 0%, rgba(11, 16, 21, 0.64) 34%, rgba(11, 16, 21, 0.3) 56%, rgba(11, 16, 21, 0) 74%),
		linear-gradient(0deg, rgba(11, 16, 21, 0.42) 0%, rgba(11, 16, 21, 0) 34%);
}
.mxo-guide-hero .mxo-container { position: relative; z-index: 1; }
.mxo-guide-hero__text {
	max-width: 42rem;
	padding-block: 3.5rem;
}
.mxo-guide-hero__tagline {
	font-size: 0.8125rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	margin: 0 0 0.6rem;
}
.mxo-guide-hero__tagline a { color: var(--primary); text-decoration: none; }
.mxo-guide-hero__tagline a:hover { text-decoration: underline; }
.mxo-guide-hero__title {
	font-family: var(--font-display);
	font-size: clamp(1.9rem, 4.5vw, 3rem);
	font-weight: 700;
	line-height: 1.12;
	letter-spacing: -0.01em;
	margin: 0 0 1rem;
	color: #fff;
}
.mxo-guide-hero__desc {
	font-size: 1.125rem;
	line-height: 1.6;
	margin: 0 0 1.25rem;
	max-width: 40rem;
	color: #fff;
	opacity: 0.92;
}
.mxo-guide-hero__desc p { margin: 0; }
.mxo-guide-hero__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem;
	font-size: 0.875rem;
	color: #fff;
	opacity: 0.82;
}
.mxo-guide-hero__meta a { color: inherit; }
.mxo-guide-hero__meta > *:not(:last-child)::after {
	content: "\00B7";
	margin-left: 0.75rem;
	opacity: 0.6;
}

/* ── Reading column ─────────────────────────────────────────────── */
.mxo-single__article {
	max-width: 820px;
	margin-inline: auto;
	padding-block: 2.75rem 2rem;
}
.mxo-single__post-nav {
	max-width: 820px;
	margin-inline: auto;
}

/* ── Content typography / vertical rhythm ───────────────────────── */
.mxo-single__content {
	font-size: 1.0625rem;
	line-height: 1.75;
	color: var(--foreground);
}
.mxo-single__content > *:first-child { margin-top: 0; }

.mxo-single__content p {
	margin: 0 0 1.2rem;
}

.mxo-single__content h2 {
	font-family: var(--font-display);
	font-size: 1.65rem;
	line-height: 1.2;
	letter-spacing: 0.01em;
	margin: 2.75rem 0 1rem;
}
.mxo-single__content h3 {
	font-family: var(--font-display);
	font-size: 1.25rem;
	line-height: 1.3;
	margin: 2rem 0 0.75rem;
}

.mxo-single__content ul,
.mxo-single__content ol {
	margin: 0 0 1.35rem;
	padding-left: 1.4rem;
}
.mxo-single__content li {
	margin-bottom: 0.6rem;
}
.mxo-single__content li > ul,
.mxo-single__content li > ol {
	margin: 0.6rem 0 0;
}

.mxo-single__content a {
	color: var(--primary);
	text-decoration: underline;
	text-underline-offset: 2px;
}
.mxo-single__content a:hover { text-decoration: none; }
.mxo-single__content strong { color: var(--foreground); font-weight: 700; }

/* ── Inline SVG charts (role="img" scopes to charts, not the FAQ chevron) ── */
.mxo-single__content svg[role="img"] {
	display: block;
	margin: 1.75rem auto 2rem;
	max-width: 100%;
	height: auto;
}

/* ── Tables ─────────────────────────────────────────────────────── */
.mxo-table-wrap {
	overflow-x: auto;
	margin: 0 0 1.75rem;
	-webkit-overflow-scrolling: touch;
}
.mxo-single__content table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.9375rem;
	line-height: 1.5;
}
.mxo-table-wrap table { margin-bottom: 0; }
.mxo-single__content th,
.mxo-single__content td {
	text-align: left;            /* fixes default centered <th> vs left <td> */
	padding: 0.6rem 0.9rem;
	border: 1px solid var(--border);
	vertical-align: top;
}
.mxo-single__content thead th {
	background: var(--muted);
	color: var(--foreground);
	font-family: var(--font-display);
	text-transform: uppercase;
	letter-spacing: 0.02em;
	font-size: 0.8125rem;
	white-space: nowrap;
}
.mxo-single__content tbody tr:nth-child(even) {
	background: rgba(0, 0, 0, 0.025);
}

/* ── Author bio card (brand byline E-E-A-T block) ───────────────── */
.mxo-single__author-bio {
	display: flex;
	gap: 1rem;
	align-items: flex-start;
	margin: 2.5rem 0 0;
	padding: 1.25rem 1.5rem;
	background: var(--card);
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
}
.mxo-single__author-avatar { flex-shrink: 0; }
.mxo-single__author-avatar img { display: block; border-radius: 50%; }
.mxo-single__author-name {
	display: block;
	font-family: var(--font-display);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	margin-bottom: 0.35rem;
}
.mxo-single__author-desc {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--muted-foreground);
}

/* ── FAQ accordion (mirrors pages.css .mxo-faq__* for a cohesive look) ── */
.mxo-single__content .mxo-faq__accordion {
	display: grid;
	gap: 0.75rem;
	margin: 0 0 1.75rem;
}
.mxo-single__content .mxo-faq__item {
	background: var(--card);
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	overflow: hidden;
}
.mxo-single__content .mxo-faq__item[open] { border-color: var(--primary); }
.mxo-single__content .mxo-faq__question {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1rem 1.25rem;
	font-family: var(--font-display);
	font-size: 0.9375rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	cursor: pointer;
	list-style: none;
}
.mxo-single__content .mxo-faq__question::-webkit-details-marker { display: none; }
.mxo-single__content .mxo-faq__question:hover { color: var(--primary); }
.mxo-single__content .mxo-faq__chevron {
	flex-shrink: 0;
	transition: transform 0.2s;
	color: var(--muted-foreground);
}
.mxo-single__content .mxo-faq__item[open] .mxo-faq__chevron {
	transform: rotate(180deg);
	color: var(--primary);
}
.mxo-single__content .mxo-faq__answer {
	padding: 0 1.25rem 1.25rem;
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--muted-foreground);
}
.mxo-single__content .mxo-faq__answer p { margin: 0; }