/*
 * GameRStar News — Single post article layout
 * Ported 1:1 from the <style> block the site previously pasted by hand into
 * every post's content (same colors/spacing/accent), now loaded once for
 * every post automatically instead of per-post inline markup. Scoped to
 * .gsn-article so it never leaks onto other templates.
 */

/*
 * The Hello Elementor base stylesheet caps `body:not([class*=elementor-page-])
 * .site-main` at max-width:1140px (centered), the same rule gsn-hero.css
 * already overrides for the homepage. Left alone here it would nest .gsn-article's
 * own 1280px width inside that 1140px box — still centered, but a
 * redundant, unnecessary width constraint on the outer wrapper. Same fix,
 * same `!important` reasoning as `.site-main.gsn-front-page`: let #content
 * span the full viewport and leave all width/centering to .gsn-article alone.
 */
.site-main.gsn-article-page {
	max-width: none !important;
	width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
}

.gsn-article {
	--gsn-article-bg: var( --color-bg-primary );
	--gsn-article-text: #f0f0f0;
	--gsn-article-muted: #b0b0b0;
	--gsn-article-accent: #00f7ff;

	max-width: 1280px;
	margin: 0 auto;
	padding: 60px 40px;
	background: var( --gsn-article-bg );
	color: var( --gsn-article-text );
	font-family: 'Segoe UI', system-ui, sans-serif;
}

.gsn-article__category {
	font-size: 12px;
	letter-spacing: 2px;
	margin-bottom: 14px;
	text-transform: uppercase;
}

/* `!important` needed: overrides a sitewide `a { color: #FBD446 !important; }`
 * rule stored in the site's Additional CSS (Customizer), same as
 * gsn-hero.css / gsn-card.css already work around. */
.gsn-article__category a {
	color: var( --gsn-article-accent ) !important;
	text-decoration: none;
}

.gsn-article__title {
	font-size: clamp( 32px, 4vw, 44px );
	margin: 0 0 18px;
	line-height: 1.2;
	color: var( --gsn-article-text );
}

/* `!important` needed: overrides a sitewide
 * `p, h1, h2, h3, h4, h5, h6 { color: #fff !important; }` rule stored in the
 * site's Additional CSS (Customizer), same as gsn-hero.css / gsn-card.css
 * already work around. Without it this <p> loses its muted color and reads
 * the same bright white as the title right above it. */
.gsn-article__subtitle {
	color: var( --gsn-article-muted ) !important;
	margin: 0 0 28px;
	font-size: 18px;
}

.gsn-article__meta {
	color: #777;
	margin-bottom: 40px;
	font-size: 14px;
}

.gsn-article__hero img {
	width: 100%;
	border-radius: 16px;
	margin-bottom: 40px;
	display: block;
}

/* `!important` needed on the color: see .gsn-article__subtitle above. */
.gsn-article__content p {
	margin-bottom: 22px;
	line-height: 1.85;
	font-size: 17px;
	color: #e6e6e6 !important;
}

.gsn-article__content h2 {
	margin-top: 45px;
	margin-bottom: 10px;
	font-size: 26px;
	color: var( --gsn-article-text );
}

.gsn-article__content img {
	width: 100%;
	border-radius: 14px;
	margin: 35px 0;
	display: block;
}

.gsn-article__content ul,
.gsn-article__content ol {
	margin: 0 0 22px;
	padding-left: 22px;
	color: #e6e6e6;
	font-size: 17px;
	line-height: 1.85;
}

/* FAQ: applied automatically by gsn_wrap_faq_section() (see
 * includes/gsn-single-post.php) to whichever "Frequently Asked Questions" /
 * "FAQ" heading and the H3/P pairs that follow it — no manual classes ever
 * required in the post editor. */
.gsn-article__faq {
	margin-top: 60px;
	padding-top: 30px;
	border-top: 1px solid #222;
}

.gsn-article__faq > h2 {
	font-size: 24px;
	margin-bottom: 20px;
	margin-top: 0;
}

.gsn-article__faq-item {
	margin-bottom: 22px;
}

.gsn-article__faq-item h3 {
	font-size: 18px;
	margin: 0 0 6px;
	color: var( --gsn-article-text );
}

/* `!important` needed on the color: see .gsn-article__subtitle above. */
.gsn-article__faq-item p {
	color: #cfcfcf !important;
	font-size: 15px;
	line-height: 1.6;
	margin: 0;
}

@media ( max-width: 600px ) {
	.gsn-article__title {
		font-size: 28px;
	}
}