/**
 * The Security page, /security/: the reading column under the charcoal hero.
 *
 * Structure lives in Elementor (scripts/build-security-elementor.php); the
 * threat alerts box and the login and dashboard notices are painted by the
 * raskin-security-alerts plugin's own stylesheet. This file sets the
 * article's column and type: the layout guide's section head width (48rem,
 * body copy stops at roughly 65 characters) and the guide's body type,
 * 16px/26px charcoal, section headings at 24px. See docs/security.md.
 *
 * Selectors carry the Elementor widget class so they outrank the Global
 * Kit's element rules, which Elementor prints as `.elementor-kit-N h2`.
 */

.elementor-widget.sba-sec-alerts,
.elementor-widget.sba-sec-prose {
	max-width: 48rem;
}

.elementor-widget.sba-sec-prose {
	color: var(--sba-charcoal);
	font-size: 16px;
	line-height: 26px;
}

.elementor-widget.sba-sec-prose p {
	margin: 0 0 16px;
}

.elementor-widget.sba-sec-prose h2 {
	margin: 40px 0 16px;
	color: var(--sba-charcoal);
	font-size: 24px;
	font-weight: var(--sba-heading-weight);
	letter-spacing: var(--sba-heading-tracking);
	line-height: 32px;
	text-wrap: balance;
}

.elementor-widget.sba-sec-prose h3 {
	margin: 28px 0 12px;
	color: var(--sba-charcoal);
	font-size: 18px;
	font-weight: var(--sba-heading-weight);
	letter-spacing: var(--sba-heading-tracking);
	line-height: 28px;
}

.elementor-widget.sba-sec-prose .elementor-widget-container > h2:first-child {
	margin-top: 0;
}

.elementor-widget.sba-sec-prose ul {
	margin: 0 0 16px;
	padding-left: 20px;
	list-style: disc;
}

.elementor-widget.sba-sec-prose li {
	margin: 0 0 8px;
}

.elementor-widget.sba-sec-prose li:last-child {
	margin-bottom: 0;
}

.elementor-widget.sba-sec-prose code {
	padding: 1px 4px;
	border-radius: var(--sba-radius-sm);
	background: var(--sba-muted);
	font-family: var(--sba-font-mono);
	font-size: 0.9em;
}

.elementor-widget.sba-sec-prose strong {
	font-weight: 700;
}