/*
 * Blog content area foundations. Scoped under .cotr-main so the embedded
 * store chrome (header/footer) is never affected.
 */
html {
	scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

.cotr-main {
	font-family: var(--cotr-font-body);
	color: var(--cotr-color-text);
	font-size: var(--cotr-text-base);
	line-height: var(--cotr-leading-body);
	background: var(--cotr-color-surface);
	/*
	 * The store's @font-face mapping is non-standard: 300 = Light,
	 * 400 = SemiBold, 700 = Bold. Body copy therefore runs at 300 —
	 * anything heavier reads as semi-bold (matches the live store).
	 */
	font-weight: var(--cotr-weight-body, 300);
	-webkit-font-smoothing: antialiased;
}

.cotr-main b,
.cotr-main strong {
	font-weight: 700;
}

/*
 * Zero-specificity resets (:where) so any single-class component rule
 * (e.g. .cotr-section-title's margin-bottom) can override them.
 */
.cotr-main :where(h1, h2, h3, h4) {
	font-family: var(--cotr-font-heading);
	line-height: 1.22;
	font-weight: 700;
	color: var(--cotr-color-text);
	margin: 0;
}

.cotr-main :where(p) {
	margin: 0;
}

.cotr-main :focus-visible {
	outline: 2px solid var(--cotr-color-primary);
	outline-offset: 2px;
	border-radius: 3px;
}

.cotr-container {
	max-width: var(--cotr-page-max);
	margin: 0 auto;
	padding-inline: var(--cotr-gutter);
}
/* Mirror the store chrome's narrower mid-range container so nothing overhangs
   the embedded header/footer between 1024–1199px. */
@media (min-width: 1024px) and (max-width: 1199.98px) {
	.cotr-container {
		max-width: var(--cotr-page-max-mid);
	}
}

/* Anchor targets clear the (sticky) store header */
.cotr-prose h2,
.cotr-prose h3 {
	scroll-margin-top: var(--cotr-anchor-offset);
}

.cotr-main img {
	max-width: 100%;
	height: auto;
}

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}