/*
 * PCCC typography.
 *
 * Scope
 *
 * Text styles are attached to two opt-in wrappers:
 *   .pccc-content — future PCCC-coded pages, sections, cards.
 *   .entry-content — WordPress classic content on default-template pages
 *                    (page.php in BuddyBoss renders content here).
 *
 * They are NOT applied to `body`. BuddyBoss directory/profile/activity
 * pages and Elementor Canvas pages already have carefully-tuned type
 * settings, and touching `body` would leak into them. If we ever redesign
 * the whole BuddyBoss surface, that will be an explicit follow-up task.
 */

.pccc-content,
.entry-content {
	font-family: var(--pccc-font-sans);
	font-size: var(--pccc-text-base);
	line-height: var(--pccc-leading-normal);
	color: var(--pccc-color-ink);
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* ---------------------------------------------------------------------
 * Headings
 * --------------------------------------------------------------------- */
.pccc-content :where(h1, h2, h3, h4, h5, h6),
.entry-content :where(h1, h2, h3, h4, h5, h6),
.pccc-heading {
	font-family: var(--pccc-font-display);
	font-weight: var(--pccc-weight-semibold);
	color: var(--pccc-color-ink);
	line-height: var(--pccc-leading-tight);
	letter-spacing: var(--pccc-tracking-tight);
	margin: 0 0 var(--pccc-space-4);
}

.pccc-content :where(h1),
.entry-content :where(h1),
.pccc-heading--1 {
	font-size: var(--pccc-text-4xl);
	line-height: var(--pccc-leading-tight);
	margin-top: var(--pccc-space-7);
}

.pccc-content :where(h2),
.entry-content :where(h2),
.pccc-heading--2 {
	font-size: var(--pccc-text-3xl);
	margin-top: var(--pccc-space-6);
}

.pccc-content :where(h3),
.entry-content :where(h3),
.pccc-heading--3 {
	font-size: var(--pccc-text-2xl);
	margin-top: var(--pccc-space-5);
}

.pccc-content :where(h4),
.entry-content :where(h4),
.pccc-heading--4 {
	font-size: var(--pccc-text-xl);
	margin-top: var(--pccc-space-5);
}

.pccc-content :where(h5),
.entry-content :where(h5),
.pccc-heading--5 {
	font-size: var(--pccc-text-lg);
	font-weight: var(--pccc-weight-semibold);
	color: var(--pccc-color-ink-muted);
	text-transform: none;
	margin-top: var(--pccc-space-5);
}

.pccc-content :where(h6),
.entry-content :where(h6),
.pccc-heading--6 {
	font-size: var(--pccc-text-sm);
	font-weight: var(--pccc-weight-semibold);
	color: var(--pccc-color-ink-muted);
	text-transform: uppercase;
	letter-spacing: var(--pccc-tracking-wide);
	margin-top: var(--pccc-space-5);
}

/* First heading in a container shouldn't have a leading margin. */
.pccc-content > :where(h1, h2, h3, h4, h5, h6):first-child,
.entry-content > :where(h1, h2, h3, h4, h5, h6):first-child {
	margin-top: 0;
}

/* ---------------------------------------------------------------------
 * Body text
 * --------------------------------------------------------------------- */
.pccc-content p,
.entry-content p {
	margin: 0 0 var(--pccc-space-4);
	max-width: 70ch;
}

.pccc-lead {
	font-size: var(--pccc-text-lg);
	line-height: var(--pccc-leading-normal);
	color: var(--pccc-color-ink-muted);
	max-width: 60ch;
	margin: 0 0 var(--pccc-space-5);
}

.pccc-small,
.pccc-meta {
	font-size: var(--pccc-text-sm);
	color: var(--pccc-color-ink-subtle);
	line-height: var(--pccc-leading-normal);
}

.pccc-eyebrow {
	display: inline-block;
	font-size: var(--pccc-text-xs);
	font-weight: var(--pccc-weight-semibold);
	color: var(--pccc-color-primary);
	text-transform: uppercase;
	letter-spacing: var(--pccc-tracking-eyebrow);
	margin: 0 0 var(--pccc-space-3);
}

/* ---------------------------------------------------------------------
 * Links inside content
 * --------------------------------------------------------------------- */
.pccc-content a,
.entry-content a {
	color: var(--pccc-color-primary);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	transition: color var(--pccc-transition-fast);
}
.pccc-content a:hover,
.entry-content a:hover,
.pccc-content a:focus-visible,
.entry-content a:focus-visible {
	color: var(--pccc-color-primary-hover);
	text-decoration-thickness: 2px;
}

/* ---------------------------------------------------------------------
 * Lists
 * --------------------------------------------------------------------- */
.pccc-content :where(ul, ol),
.entry-content :where(ul, ol) {
	margin: 0 0 var(--pccc-space-4);
	padding-left: var(--pccc-space-5);
}
.pccc-content :where(ul, ol) li + li,
.entry-content :where(ul, ol) li + li {
	margin-top: var(--pccc-space-2);
}
.pccc-content :where(ul) li,
.entry-content :where(ul) li {
	list-style-type: disc;
}
.pccc-content :where(ol) li,
.entry-content :where(ol) li {
	list-style-type: decimal;
}
.pccc-content :where(ul, ol) :where(ul, ol),
.entry-content :where(ul, ol) :where(ul, ol) {
	margin-top: var(--pccc-space-2);
	margin-bottom: 0;
}

/* ---------------------------------------------------------------------
 * Blockquotes
 * --------------------------------------------------------------------- */
.pccc-content blockquote,
.entry-content blockquote {
	margin: var(--pccc-space-5) 0;
	padding: var(--pccc-space-4) var(--pccc-space-5);
	border-left: 3px solid var(--pccc-color-primary);
	background: var(--pccc-color-surface-sunken);
	font-size: var(--pccc-text-lg);
	color: var(--pccc-color-ink);
	border-radius: 0 var(--pccc-radius) var(--pccc-radius) 0;
}
.pccc-content blockquote > *:last-child,
.entry-content blockquote > *:last-child {
	margin-bottom: 0;
}
.pccc-content blockquote cite,
.entry-content blockquote cite {
	display: block;
	margin-top: var(--pccc-space-3);
	font-size: var(--pccc-text-sm);
	color: var(--pccc-color-ink-muted);
	font-style: normal;
}

/* ---------------------------------------------------------------------
 * Tables
 * --------------------------------------------------------------------- */
.pccc-content table,
.entry-content table {
	width: 100%;
	border-collapse: collapse;
	margin: var(--pccc-space-5) 0;
	font-size: var(--pccc-text-sm);
}
.pccc-content th,
.pccc-content td,
.entry-content th,
.entry-content td {
	padding: var(--pccc-space-3) var(--pccc-space-4);
	text-align: left;
	border-bottom: 1px solid var(--pccc-color-border);
	vertical-align: top;
}
.pccc-content thead th,
.entry-content thead th {
	background: var(--pccc-color-surface-sunken);
	font-weight: var(--pccc-weight-semibold);
	color: var(--pccc-color-ink);
}

/* ---------------------------------------------------------------------
 * Inline code and code blocks
 * --------------------------------------------------------------------- */
.pccc-content code,
.entry-content code {
	font-family: var(--pccc-font-mono);
	font-size: 0.9em;
	padding: 0.15em 0.35em;
	background: var(--pccc-color-surface-sunken);
	border-radius: var(--pccc-radius-sm);
	color: var(--pccc-color-ink);
}
.pccc-content pre,
.entry-content pre {
	overflow-x: auto;
	padding: var(--pccc-space-4);
	background: var(--pccc-color-surface-sunken);
	border-radius: var(--pccc-radius);
	font-size: var(--pccc-text-sm);
	margin: var(--pccc-space-5) 0;
}
.pccc-content pre code,
.entry-content pre code {
	padding: 0;
	background: transparent;
}

/* ---------------------------------------------------------------------
 * Images and captions inside content
 * --------------------------------------------------------------------- */
.pccc-content img,
.entry-content img {
	max-width: 100%;
	height: auto;
	border-radius: var(--pccc-radius);
}
.pccc-content figure,
.entry-content figure {
	margin: var(--pccc-space-5) 0;
}
.pccc-content figcaption,
.entry-content figcaption {
	margin-top: var(--pccc-space-2);
	font-size: var(--pccc-text-sm);
	color: var(--pccc-color-ink-subtle);
	text-align: center;
}

/* ---------------------------------------------------------------------
 * Horizontal rule
 * --------------------------------------------------------------------- */
.pccc-content hr,
.entry-content hr {
	border: 0;
	border-top: 1px solid var(--pccc-color-border);
	margin: var(--pccc-space-6) 0;
}

/* ---------------------------------------------------------------------
 * Responsive scaling — nudge type down on narrow viewports.
 * --------------------------------------------------------------------- */
@media (max-width: 600px) {
	.pccc-content :where(h1),
	.entry-content :where(h1),
	.pccc-heading--1 {
		font-size: var(--pccc-text-3xl);
	}
	.pccc-content :where(h2),
	.entry-content :where(h2),
	.pccc-heading--2 {
		font-size: var(--pccc-text-2xl);
	}
	.pccc-content :where(h3),
	.entry-content :where(h3),
	.pccc-heading--3 {
		font-size: var(--pccc-text-xl);
	}
	.pccc-lead {
		font-size: var(--pccc-text-base);
	}
}