/*
 * Global typography for native WordPress content elements (headings,
 * paragraphs, links). Scoped to editorial content rather than applied
 * unconditionally, so it doesn't fight the bespoke header/footer/mini-sidebar
 * styles, which set their own typography on their own wrapper classes.
 * Headings/paragraphs also exclude [class*="solea-"] (matching native-forms.css
 * and native-buttons.css's convention): bespoke blocks like hero-panels are
 * rendered inside .entry-content itself (unlike the header/footer/mini-sidebar
 * template parts, which live outside it), so without this exclusion their own
 * h1/p color and size would otherwise still be fought over here.
 */
.entry-content,
.wp-block-post-content {
	font-family: var(--wp--preset--font-family--corsa-grotesk);
	color: var(--wp--preset--color--brand-lavender);
}

strong,
b {
	font-weight: 600;
}

.entry-content h1:not([class*="solea-"]),
.wp-block-post-content h1:not([class*="solea-"]),
.entry-content h2:not([class*="solea-"]),
.wp-block-post-content h2:not([class*="solea-"]),
.entry-content h3:not([class*="solea-"]),
.wp-block-post-content h3:not([class*="solea-"]),
.entry-content h4:not([class*="solea-"]),
.wp-block-post-content h4:not([class*="solea-"]),
.entry-content h5:not([class*="solea-"]),
.wp-block-post-content h5:not([class*="solea-"]),
.entry-content h6:not([class*="solea-"]),
.wp-block-post-content h6:not([class*="solea-"]) {
	margin: 0 0 0.6em;
	font-family: var(--wp--preset--font-family--corsa-grotesk);
	font-weight: 700;
	line-height: 1.2;
	text-wrap: balance;
}

.entry-content h1:not([class*="solea-"]),
.wp-block-post-content h1:not([class*="solea-"]) {
	font-size: var(--wp--preset--font-size--h-1);
	font-weight: 800;
	line-height: 1.02;
	letter-spacing: -0.02em;
	text-transform: uppercase;
	color: var(--wp--preset--color--brand-lavender);
}

.entry-content h2:not([class*="solea-"]),
.wp-block-post-content h2:not([class*="solea-"]) {
	font-size: clamp(1.5rem, 2vw, 2rem);
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -0.01em;
	text-transform: uppercase;
	color: var(--wp--preset--color--brand-lavender);
}

.entry-content h3:not([class*="solea-"]),
.wp-block-post-content h3:not([class*="solea-"]) {
	font-size: clamp(1.1875rem, 1.5vw, 1.5rem);
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--brand-purple-light);
}

.entry-content h4:not([class*="solea-"]),
.wp-block-post-content h4:not([class*="solea-"]) {
	font-size: var(--wp--preset--font-size--h-4);
	font-weight: 800;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	color: var(--wp--preset--color--brand-purple-light);
}

.entry-content h5:not([class*="solea-"]),
.wp-block-post-content h5:not([class*="solea-"]) {
	font-size: var(--wp--preset--font-size--h-5);
	font-weight: 700;
	color: var(--wp--preset--color--brand-purple-light);
}

.entry-content h6:not([class*="solea-"]),
.wp-block-post-content h6:not([class*="solea-"]) {
	font-size: var(--wp--preset--font-size--h-6);
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--wp--preset--color--brand-muted);
}

.entry-content p:not([class*="solea-"]),
.wp-block-post-content p:not([class*="solea-"]) {
	margin: 0 0 1.2em;
	font-size: 1rem;
	line-height: 1.6;
	color: var(--wp--preset--color--brand-lavender);
}

.entry-content a:not(.wp-element-button):not([class*="solea-"]),
.wp-block-post-content a:not(.wp-element-button):not([class*="solea-"]) {
	color: var(--wp--preset--color--brand-purple-light);
	text-decoration-color: var(--wp--preset--color--brand-accent-light);
}

.entry-content a:not(.wp-element-button):not([class*="solea-"]):hover,
.wp-block-post-content a:not(.wp-element-button):not([class*="solea-"]):hover {
	color: var(--wp--preset--color--brand-accent-light);
}

/*
 * Global focus-visible ring, matching the box-shadow-based focus treatment
 * already used on the mini-sidebar block (an outline would get clipped by
 * `overflow: hidden` wrappers elsewhere in the theme).
 */
:focus-visible {
	outline: 3px solid var(--wp--preset--color--brand-purple-light);
	outline-offset: 3px;
	border-radius: 6px;
}
