/**
 * Bannatyne Digital — Typography
 *
 * Type scale, headings, body text, and prose utilities.
 * Font: Source Sans 3 (300 Light, 400 Regular, 700 Bold, 900 Black).
 */

/* ── Headings ────────────────────────────────────────────── */
.h1, h1 {
	font-size: var(--text-5xl);
	font-weight: var(--fw-black);
	line-height: var(--leading-tight);
	letter-spacing: var(--tracking-tight);
}

.h2, h2 {
	font-size: var(--text-4xl);
	font-weight: var(--fw-bold);
	line-height: var(--leading-tight);
	letter-spacing: var(--tracking-tight);
}

.h3, h3 {
	font-size: var(--text-3xl);
	font-weight: var(--fw-bold);
	line-height: var(--leading-snug);
}

.h4, h4 {
	font-size: var(--text-2xl);
	font-weight: var(--fw-bold);
	line-height: var(--leading-snug);
}

.h5, h5 {
	font-size: var(--text-xl);
	font-weight: var(--fw-bold);
	line-height: var(--leading-snug);
}

.h6, h6 {
	font-size: var(--text-lg);
	font-weight: var(--fw-bold);
	line-height: var(--leading-normal);
}

/* ── Body text ───────────────────────────────────────────── */
.text-body {
	font-size: var(--text-md);
	font-weight: var(--fw-regular);
	line-height: var(--leading-relaxed);
}

.text-body-sm {
	font-size: var(--text-base);
	font-weight: var(--fw-regular);
	line-height: var(--leading-normal);
}

/* ── Display / hero text ─────────────────────────────────── */
.text-display {
	font-size: var(--text-hero);
	font-weight: var(--fw-black);
	line-height: var(--leading-tight);
	letter-spacing: var(--tracking-tight);
}

/* ── Eyebrow / overline ──────────────────────────────────── */
.text-eyebrow {
	font-size: var(--text-sm);
	font-weight: var(--fw-bold);
	letter-spacing: var(--tracking-widest);
	text-transform: uppercase;
}

/* ── Italic emphasis (Source Sans 3 italic) ──────────────── */
.text-italic,
em,
i {
	font-style: italic;
}

/* ── Weight utilities ────────────────────────────────────── */
.fw-light   { font-weight: var(--fw-light); }
.fw-regular { font-weight: var(--fw-regular); }
.fw-bold    { font-weight: var(--fw-bold); }
.fw-black   { font-weight: var(--fw-black); }

/* ── Prose (rich-text / editor output) ───────────────────── */
.prose {
	font-size: var(--text-md);
	line-height: var(--leading-relaxed);
}

.prose p + p {
	margin-top: var(--space-6);
}

.prose h2,
.prose h3,
.prose h4 {
	margin-top: var(--space-12);
	margin-bottom: var(--space-4);
}

.prose ul,
.prose ol {
	margin-top: var(--space-4);
	margin-bottom: var(--space-4);
	padding-left: var(--space-6);
}

.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }

.prose li + li {
	margin-top: var(--space-2);
}

.prose a {
	color: var(--color-primary);
	text-decoration: underline;
	text-underline-offset: 2px;
	transition: color var(--duration-fast) var(--ease-out);
}

.prose a:hover {
	color: var(--color-cobolt);
}

.prose blockquote {
	border-left: 3px solid var(--color-primary);
	padding-left: var(--space-6);
	margin: var(--space-8) 0;
	font-style: italic;
	font-weight: var(--fw-light);
	font-size: var(--text-xl);
	color: var(--color-text-muted);
}

.prose strong,
.prose b {
	font-weight: var(--fw-bold);
}

/* ── Responsive heading scale ────────────────────────────── */
@media (max-width: 768px) {
	.h1, h1 { font-size: var(--text-3xl); }
	.h2, h2 { font-size: var(--text-2xl); }
	.h3, h3 { font-size: var(--text-xl); }
	.h4, h4 { font-size: var(--text-lg); }
}