/**
 * Opt-in normalization for standalone course sales pages.
 *
 * Keep this file brand-neutral. Course-specific type scales, colors, layouts,
 * and components belong in each course stylesheet. Nothing here can affect
 * the theme header or footer unless it is inside .course-sales-page.
 */
.course-sales-page,
.course-sales-page * {
	box-sizing: border-box;
}

.course-sales-page {
	--course-sales-focus-color: currentColor; /* use the same value as the color property; sets this as a variable (leading `--` is a custom property) */
	font-size: 16px;
	line-height: 1.65;
}

.course-sales-page img {
	display: block;
	max-width: 100%;
	height: auto;
}

/* :where() groups selectors with zero specificity, so it can be overridden without needing !important */
.course-sales-page :where(h1, h2, h3, h4, h5, h6, p, ul, ol, blockquote, figure) {
	margin: 0;
}

.course-sales-page :where(h1, h2, h3, h4, h5, h6) {
	clear: none;
}

.course-sales-page p {
	margin-bottom: 1rem;
}

.course-sales-page :where(button, input, select, textarea) {
	margin: 0;
	font: inherit;
}

.course-sales-page :where(button) {
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	color: inherit;
}

.course-sales-page :where(a, button, input, select, textarea, summary):focus-visible {
	outline: 3px solid var(--course-sales-focus-color);
	outline-offset: 3px;
}