/**
 * Article layout — guides, comparisons, posts and pages.
 *
 * Applies the homepage's design language AND its layout: every template
 * uses the same --rtq-container-xl shell, set site-wide in components.css
 * so templates that don't exist yet inherit it with no extra work.
 *
 * An earlier revision held prose to --rtq-measure here, on the reasoning
 * that a 1560px line of body text is hard to read. The owner decided on
 * 2026-08-02 that consistency with the homepage matters more. The
 * trade-off is real and is recorded rather than hidden: if line length
 * becomes a problem, restoring a measure is one declaration on
 * .rtq-article .entry-content > * and nothing else needs to change.
 *
 * Scoped to .rtq-article (added via body_class on singular views) so
 * nothing here can leak into the homepage or an archive.
 */

/* ==========================================================================
   Shell
   ========================================================================== */

.rtq-article .site-content {
	background: var(--rtq-surface-alt);
}

.rtq-article .inside-article {
	background: var(--rtq-surface);
	border: 1px solid var(--rtq-border);
	border-radius: var(--rtq-radius-lg);
	box-shadow: var(--rtq-shadow-sm);
	padding: clamp(1.5rem, 4vw, 3.5rem);
}

/* Content runs the full column width. Owner decision, 2026-08-02: every
   template matches the homepage shell rather than sitting in a narrower
   reading column. Line length on a wide display is the known trade-off --
   restoring a measure is a one-line change (max-width: var(--rtq-measure)
   on this selector), deliberately left as a single lever. */

/* ==========================================================================
   Typography
   ========================================================================== */

.rtq-article .entry-title {
	font-size: var(--rtq-text-title);
	line-height: var(--rtq-leading-tight);
	letter-spacing: var(--rtq-tracking-tight);
	color: var(--rtq-ink);
	margin-bottom: var(--rtq-space-sm);
}

.rtq-article .entry-content {
	color: var(--rtq-body);
	font-size: var(--rtq-text-lead);
	line-height: var(--rtq-leading-body);
}

.rtq-article .entry-content h2 {
	font-size: var(--rtq-text-h2);
	line-height: var(--rtq-leading-snug);
	letter-spacing: var(--rtq-tracking-tight);
	color: var(--rtq-ink);
	margin-top: var(--rtq-space-2xl);
	margin-bottom: var(--rtq-space-sm);
	/* Hairline separates a 15-heading document into scannable sections. */
	padding-top: var(--rtq-space-lg);
	border-top: 1px solid var(--rtq-border);
}

.rtq-article .entry-content h2:first-child {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}

.rtq-article .entry-content h3 {
	font-size: var(--rtq-text-h3);
	line-height: var(--rtq-leading-snug);
	letter-spacing: var(--rtq-tracking-snug);
	color: var(--rtq-ink);
	margin-top: var(--rtq-space-xl);
	margin-bottom: var(--rtq-space-2xs);
}

.rtq-article .entry-content p,
.rtq-article .entry-content li {
	font-size: var(--rtq-text-lead);
	line-height: var(--rtq-leading-body);
}

.rtq-article .entry-content strong {
	color: var(--rtq-ink);
	font-weight: 650;
}

.rtq-article .entry-content ul,
.rtq-article .entry-content ol {
	padding-left: var(--rtq-space-md);
}

.rtq-article .entry-content li + li {
	margin-top: var(--rtq-space-2xs);
}

/* ==========================================================================
   Links — accent, with an underline that stays legible under descenders
   ========================================================================== */

.rtq-article .entry-content a:not(.wp-element-button) {
	color: var(--rtq-accent);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	transition: color var(--rtq-transition);
}

.rtq-article .entry-content a:not(.wp-element-button):hover,
.rtq-article .entry-content a:not(.wp-element-button):focus-visible {
	color: var(--rtq-primary-hover);
}

.rtq-article .entry-content a:focus-visible {
	outline: 2px solid var(--rtq-primary);
	outline-offset: 2px;
	border-radius: var(--rtq-radius-xs);
}

/* ==========================================================================
   Tables — the densest thing on a pricing page
   Wrapped in their own scroll container so a wide plan table never forces
   the page to scroll horizontally on a phone.
   ========================================================================== */

.rtq-article .entry-content .wp-block-table {
	overflow-x: auto;
	margin-block: var(--rtq-space-lg);
	border: 1px solid var(--rtq-border);
	border-radius: var(--rtq-radius);
}

.rtq-article .entry-content table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--rtq-text-sm);
	background: var(--rtq-surface);
}

.rtq-article .entry-content th {
	background: var(--rtq-surface-alt);
	color: var(--rtq-ink);
	font-weight: 700;
	text-align: left;
	letter-spacing: var(--rtq-tracking-snug);
}

.rtq-article .entry-content th,
.rtq-article .entry-content td {
	padding: var(--rtq-space-xs) var(--rtq-space-sm);
	border-bottom: 1px solid var(--rtq-border);
	vertical-align: top;
}

.rtq-article .entry-content tbody tr:last-child td {
	border-bottom: 0;
}

/* ==========================================================================
   Callouts — the guide uses blockquote for its method/limitation notes
   ========================================================================== */

.rtq-article .entry-content .wp-block-quote {
	margin-block: var(--rtq-space-lg);
	padding: var(--rtq-space-md) var(--rtq-space-lg);
	background: var(--rtq-primary-wash);
	border: 0;
	border-left: 3px solid var(--rtq-accent);
	border-radius: var(--rtq-radius-sm);
	font-style: normal;
	color: var(--rtq-body);
}

.rtq-article .entry-content .wp-block-quote p:last-child {
	margin-bottom: 0;
}

.rtq-article .entry-content .wp-block-quote strong {
	color: var(--rtq-ink);
}

/* ==========================================================================
   Media
   ========================================================================== */

.rtq-article .entry-content figure,
.rtq-article .post-image {
	margin-block: var(--rtq-space-lg);
}

.rtq-article .entry-content img,
.rtq-article .post-image img {
	border-radius: var(--rtq-radius);
	/* Reserve the box so a lazily-loaded image cannot shift the article. */
	height: auto;
}

/* ==========================================================================
   Entry meta + the per-guide source notice
   ========================================================================== */

.rtq-article .entry-meta,
.rtq-article .rtq-source-notice {
	font-size: var(--rtq-text-xs);
	color: var(--rtq-muted);
}

.rtq-article .rtq-source-notice {
	margin-top: var(--rtq-space-lg);
	padding-top: var(--rtq-space-sm);
	border-top: 1px solid var(--rtq-border);
}

/* ==========================================================================
   Affiliate CTA — inherits the button system rather than restyling it
   ========================================================================== */

.rtq-article .entry-content .wp-block-buttons {
	margin-block: var(--rtq-space-lg);
}

.rtq-article .entry-content .rtq-affiliate-cta .wp-element-button {
	display: inline-flex;
	align-items: center;
	gap: var(--rtq-space-2xs);
	min-height: 48px;
	padding: var(--rtq-space-xs) var(--rtq-space-lg);
	background: var(--rtq-primary);
	color: var(--rtq-on-dark);
	font-size: var(--rtq-text-base);
	font-weight: 650;
	text-decoration: none;
	border: 0;
	border-radius: var(--rtq-radius-sm);
	box-shadow: var(--rtq-shadow-sm);
	transition: background-color var(--rtq-transition), box-shadow var(--rtq-transition);
}

.rtq-article .entry-content .rtq-affiliate-cta .wp-element-button:hover,
.rtq-article .entry-content .rtq-affiliate-cta .wp-element-button:focus-visible {
	background: var(--rtq-primary-hover);
	color: var(--rtq-on-dark);
	box-shadow: var(--rtq-shadow);
}

.rtq-article .entry-content .rtq-affiliate-cta .wp-element-button:focus-visible {
	outline: 2px solid var(--rtq-primary);
	outline-offset: 3px;
}

/* ==========================================================================
   Narrow screens
   ========================================================================== */

@media (max-width: 37.5rem) {
	.rtq-article .inside-article {
		border-radius: var(--rtq-radius);
	}

	.rtq-article .entry-content .wp-block-quote {
		padding: var(--rtq-space-sm) var(--rtq-space-md);
	}
}