/* LegalAtoms prose — long-form article styling for /manual entries and blog
   posts. Harbor design system typography applied to the Beaver Builder theme's
   post content wrapper. Scope: single manual + single post + any element with
   the la-prose class. Depends on tokens.css.

   Note: legacy blog posts carry inline styles that beat these rules; the fix
   for those is cleaning up the post HTML, not more CSS specificity. */

:is(.single-manual, .single-post) :is(.fl-post-content, .fl-module-fl-post-content .fl-module-content),
.la-prose {
	color: var(--text-body);
	font: var(--text-body-lg);
	font-family: var(--font-sans);
	margin-left: auto;
	margin-right: auto;
	max-width: var(--content-narrow);
	-webkit-font-smoothing: antialiased;
}

/* The Beaver Builder Themer layout bundle sets heading fonts with !important
   on bare element selectors, so the heading face needs !important to win. */
:is(.single-manual, .single-post) :is(.fl-post-content, .fl-module-fl-post-content .fl-module-content) :is(h1, h2, h3),
.la-prose :is(h1, h2, h3) {
	color: var(--text-heading) !important;
	font-family: var(--font-display) !important;
	font-weight: 400 !important;
	letter-spacing: var(--tracking-heading);
	line-height: 1.2;
	text-wrap: balance;
}

:is(.single-manual, .single-post) :is(.fl-post-content, .fl-module-fl-post-content .fl-module-content) h2,
.la-prose h2 {
	border-top: 1px solid var(--border-default);
	font-size: 1.75rem;
	margin: 2.5em 0 0.75em;
	padding-top: 1.25em;
}

:is(.single-manual, .single-post) :is(.fl-post-content, .fl-module-fl-post-content .fl-module-content) h2:first-child,
.la-prose h2:first-child {
	border-top: none;
	margin-top: 0;
	padding-top: 0;
}

:is(.single-manual, .single-post) :is(.fl-post-content, .fl-module-fl-post-content .fl-module-content) h3,
.la-prose h3 {
	font-size: 1.3125rem;
	font-weight: 600 !important;
	margin: 1.75em 0 0.5em;
}

:is(.single-manual, .single-post) :is(.fl-post-content, .fl-module-fl-post-content .fl-module-content) h4,
.la-prose h4 {
	color: var(--text-heading) !important;
	font-family: var(--font-sans) !important;
	font-size: 1.125rem;
	font-weight: 600 !important;
	margin: 1.5em 0 0.5em;
}

:is(.single-manual, .single-post) :is(.fl-post-content, .fl-module-fl-post-content .fl-module-content) :is(p, li),
.la-prose :is(p, li) {
	color: var(--text-body);
	font-size: 1.125rem;
	line-height: 1.7;
}

:is(.single-manual, .single-post) :is(.fl-post-content, .fl-module-fl-post-content .fl-module-content) :is(ul, ol),
.la-prose :is(ul, ol) {
	margin: 0.75em 0 1.25em;
	padding-left: 1.5em;
}

:is(.single-manual, .single-post) :is(.fl-post-content, .fl-module-fl-post-content .fl-module-content) li,
.la-prose li {
	margin-bottom: 0.5em;
}

:is(.single-manual, .single-post) :is(.fl-post-content, .fl-module-fl-post-content .fl-module-content) a,
.la-prose a {
	color: var(--text-link);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

:is(.single-manual, .single-post) :is(.fl-post-content, .fl-module-fl-post-content .fl-module-content) a:hover,
.la-prose a:hover {
	color: var(--la-navy-800);
}

/* Screenshots and figures: framed, never edge-to-edge raw bitmaps. */
:is(.single-manual, .single-post) :is(.fl-post-content, .fl-module-fl-post-content .fl-module-content) img,
.la-prose img {
	border: 1px solid var(--border-default);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-sm);
	display: block;
	height: auto;
	margin: 1.5em auto;
	max-width: 100%;
}

:is(.single-manual, .single-post) :is(.fl-post-content, .fl-module-fl-post-content .fl-module-content) :is(.wp-block-image, figure) figcaption,
.la-prose figcaption {
	color: var(--text-muted);
	font: var(--text-body-sm);
	margin-top: -0.5em;
	text-align: center;
}

/* Emoji-as-icons are banned by the design system; inline icon images from
   legacy content get neutralized to text-height. */
:is(.single-manual, .single-post) :is(.fl-post-content, .fl-module-fl-post-content .fl-module-content) img.emoji,
.la-prose img.emoji {
	border: none;
	box-shadow: none;
	display: inline;
	margin: 0;
}

:is(.single-manual, .single-post) :is(.fl-post-content, .fl-module-fl-post-content .fl-module-content) blockquote,
.la-prose blockquote {
	border-left: 3px solid var(--la-coral-300);
	color: var(--text-heading);
	font: var(--text-quote);
	font-style: italic;
	margin: 1.5em 0;
	padding-left: 20px;
}

:is(.single-manual, .single-post) :is(.fl-post-content, .fl-module-fl-post-content .fl-module-content) :is(code, kbd),
.la-prose :is(code, kbd) {
	background: var(--la-slate-100);
	border-radius: var(--radius-sm);
	color: var(--la-slate-800);
	font: var(--text-mono-sm);
	padding: 2px 6px;
}

:is(.single-manual, .single-post) :is(.fl-post-content, .fl-module-fl-post-content .fl-module-content) table,
.la-prose table {
	border-collapse: collapse;
	font-size: 1rem;
	margin: 1.5em 0;
	width: 100%;
}

:is(.single-manual, .single-post) :is(.fl-post-content, .fl-module-fl-post-content .fl-module-content) :is(th, td),
.la-prose :is(th, td) {
	border: 1px solid var(--border-default);
	padding: 10px 14px;
	text-align: left;
}

:is(.single-manual, .single-post) :is(.fl-post-content, .fl-module-fl-post-content .fl-module-content) th,
.la-prose th {
	background: var(--surface-subtle);
	color: var(--text-heading);
	font-weight: 600;
}

:is(.single-manual, .single-post) :is(.fl-post-content, .fl-module-fl-post-content .fl-module-content) hr,
.la-prose hr {
	border: none;
	border-top: 1px solid var(--border-default);
	margin: 2.5em 0;
}

/* Article title: rendered by the Themer layout as h1.fl-heading outside the
   content wrapper. Bring it onto the display face. */
:is(.single-manual, .single-post) h1.fl-heading,
:is(.single-manual, .single-post) .fl-post-title {
	color: var(--text-heading) !important;
	font-family: var(--font-display) !important;
	font-weight: 400 !important;
	letter-spacing: var(--tracking-heading);
	line-height: 1.15;
}

:is(.single-manual, .single-post) h1.fl-heading .fl-heading-text {
	color: inherit !important;
	font: inherit !important;
}

/* Callout boxes for tips/notes inside articles. Use semantic status colors,
   never coral (brand accent) and never safety red. */
.la-callout {
	background: var(--la-info-bg);
	border: 1px solid var(--la-navy-200);
	border-radius: var(--radius-md);
	margin: 1.5em 0;
	padding: 16px 20px;
}

.la-callout--warning {
	background: var(--la-warning-bg);
	border-color: #E8D5A8;
}

.la-callout--success {
	background: var(--la-success-bg);
	border-color: #BCE3CD;
}

.la-callout > :is(p, li) {
	font-size: 1rem !important;
}

.la-callout > p:last-child {
	margin-bottom: 0;
}