/* ==========================================================================
   ChopSkills — Shared Page Title Block
   Consistent H1 header rendered by Page_Titles_Admin::render_title_html()
   across every shortcode page (Arena, Gallery, Leaderboard, etc.).
   Uses CSS custom properties from the Global Styles admin panel.
   ========================================================================== */

.cs-page-title-wrap {
	text-align: center;
	padding: 2.5rem 1.5rem 1.5rem;
	margin: 0 auto;
	max-width: 800px;
}

.cs-page-title {
	font-size: clamp(1.75rem, 4vw, 2.75rem);
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1.3;
	margin: 0 0 0.5rem;
	padding-bottom: 0.1em;

	/* Use heading color token from Global Styles, fall back to white */
	color: var(--cs-heading-color, var(--cs-text-primary, #f0f0f5)) !important;

	/* Subtle gradient underline accent */
	background: linear-gradient(
		135deg,
		var(--cs-comp-grad-start, #6366f1),
		var(--cs-comp-grad-end, #a855f7)
	);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

.cs-page-subtitle {
	font-size: 1rem;
	color: var(--cs-text-muted, #94a3b8);
	line-height: 1.6;
	margin: 0.25rem auto 0;
	max-width: 560px;
}

/* Thin gradient divider below the title block */
.cs-page-title-wrap::after {
	content: '';
	display: block;
	width: 60px;
	height: 3px;
	margin: 1rem auto 0;
	border-radius: 100px;
	background: linear-gradient(
		90deg,
		var(--cs-comp-grad-start, #6366f1),
		var(--cs-comp-grad-end, #a855f7)
	);
	opacity: 0.7;
}

/* Spacing when the title block precedes a shortcode content area */
.cs-page-title-wrap + *,
.cs-page-title-wrap + div,
.cs-page-title-wrap + #chopskills-arena-root,
.cs-page-title-wrap + #chopskills-leaderboard-root,
.cs-page-title-wrap + #chopskills-hall-of-fame-root,
.cs-page-title-wrap + #chopskills-gallery-root,
.cs-page-title-wrap + .cs-challenges-root,
.cs-page-title-wrap + .cs-sponsor-form-wrapper,
.cs-page-title-wrap + .cs-vault-root,
.cs-page-title-wrap + .cs-dashboard-root,
.cs-page-title-wrap + .cs-profile-root {
	margin-top: 0;
}

/* Responsive adjustments */
@media (max-width: 640px) {
	.cs-page-title-wrap {
		padding: 1.75rem 1rem 1rem;
	}

	.cs-page-title {
		font-size: 1.6rem;
	}
}