/*
 * typography.css — Heading scale, body text, links, lists, blockquote, code, tables.
 * .mvc-wysiwyg scopes WYSIWYG-output opinionated defaults.
 * All sizes/colors reference tokens from tokens.css.
 */

/* ── Google Fonts import ─────────────────────────────────────────────────── */
/* Loaded conditionally by preset files. Base typography uses system fonts.   */

/* ── Heading defaults ────────────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
	font-family: var(--mvc-font-heading);
	font-weight: var(--mvc-font-weight-heading);
	line-height: var(--leading-tight);
	color: var(--color-heading);
	letter-spacing: var(--tracking-tight);
	margin-bottom: 0.5em;
}

h1 { font-size: clamp(var(--text-4xl), 5.5vw, var(--text-6xl)); }
h2 { font-size: clamp(var(--text-3xl), 4.5vw, var(--text-5xl)); }
h3 { font-size: clamp(var(--text-2xl), 3.5vw, var(--text-4xl)); }
h4 { font-size: clamp(var(--text-xl),  2.5vw, var(--text-3xl)); }
h5 { font-size: var(--text-2xl); }
h6 { font-size: var(--text-xl); }

/* ── Body text ───────────────────────────────────────────────────────────── */
/* Paragraph copy is bumped one step above the rem root (--text-base) for a more
   readable, modern body size site-wide. Kept as an explicit size (not by raising
   the rem root) so it doesn't compound the heading clamps, which are already rem-
   based off the root. Scales back down a step on narrow screens below. */
p {
	margin-bottom: 1em;
	font-size: var(--text-lg);
	line-height: var(--leading-relaxed);
}

p:last-child {
	margin-bottom: 0;
}

/* ── Links ───────────────────────────────────────────────────────────────── */
a {
	color: var(--color-link);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	transition: var(--transition-colors);
}

a:hover,
a:focus {
	color: var(--color-link-hover);
}

/* ── Navigation text style (dashboard: Typography tab) ──────────────────── */
.mvc-header__nav a,
.mvc-header__nav .menu-item > a,
.mvc-header__nav .menu-item > span,
.mvc-mobile-menu a {
	text-transform:  var(--mvc-nav-text-transform, none);
	letter-spacing:  var(--mvc-nav-letter-spacing, 0);
	font-weight:     var(--mvc-nav-font-weight, 500);
}

/* ── Accent font — applied to pull quotes, badges ────────────────────────── */
.mvc-accent-font,
[data-mvc-accent] {
	font-family: var(--mvc-font-accent, var(--mvc-font-body));
}

/* Nav links never underline — header nav, mobile drawer, footer nav */
.mvc-header__nav a,
.mvc-header__nav a:link,
.mvc-header__nav a:hover,
.mvc-header__nav a:focus,
.mvc-header__nav a:visited,
.mvc-header__nav a:active,
.mvc-mobile-menu a,
.mvc-mobile-menu a:link,
.mvc-mobile-menu a:hover,
.mvc-mobile-menu a:focus,
.mvc-mobile-menu a:visited,
.mvc-mobile-menu a:active,
.mvc-footer__nav a,
.mvc-footer__nav a:link,
.mvc-footer__nav a:hover,
.mvc-footer__nav a:focus,
.mvc-footer__nav a:visited,
.mvc-footer__nav a:active,
.mvc-header__phone,
.mvc-header__phone:link,
.mvc-header__phone:hover,
.mvc-header__phone:visited {
	text-decoration: none !important;
}

a:focus-visible {
	outline: var(--focus-ring-width) solid var(--focus-ring-color);
	outline-offset: var(--focus-ring-offset);
	border-radius: var(--radius-sm);
}

/* ── Responsive heading scale (tablet / mobile breakpoints) ──────────────── */
@media (max-width: 767px) {
	h1 { font-size: var(--text-4xl); }
	h2 { font-size: var(--text-3xl); }
	h3 { font-size: var(--text-2xl); }
	h4 { font-size: var(--text-xl); }
	h5 { font-size: var(--text-lg); }
	h6 { font-size: var(--text-lg); }
	p  { font-size: var(--text-base); }
}

@media (max-width: 479px) {
	h1 { font-size: var(--text-3xl); }
	h2 { font-size: var(--text-2xl); }
}

/* ── Entry title ─────────────────────────────────────────────────────────── */
.entry-title {
	font-size: clamp(var(--text-3xl), 5.5vw, var(--text-6xl));
	font-family: var(--mvc-font-heading);
	font-weight: var(--mvc-font-weight-heading);
	color: var(--color-heading);
	line-height: var(--leading-tight);
	letter-spacing: var(--tracking-tight);
}

/* ── Section heading pattern ─────────────────────────────────────────────── */
.mvc-section-header {
	margin-bottom: var(--space-16);
}

.mvc-section-header--center {
	text-align: center;
}

.mvc-section-header--center .mvc-section-subtitle {
	margin-left: auto;
	margin-right: auto;
}

.mvc-section-eyebrow {
	display: block;
	font-size: var(--text-sm);
	font-family: var(--mvc-font-accent, var(--mvc-font-body));
	font-weight: var(--mvc-nav-font-weight, 600);
	letter-spacing: var(--mvc-nav-letter-spacing, 0.12em);
	text-transform: var(--mvc-nav-text-transform, uppercase);
	color: var(--color-accent);
	margin-bottom: var(--space-3);
}

.mvc-section-title {
	font-size: clamp(var(--text-3xl), 4.5vw, var(--text-5xl));
	font-family: var(--mvc-font-heading);
	font-weight: var(--mvc-font-weight-heading);
	color: var(--color-heading);
	line-height: var(--leading-tight);
	letter-spacing: var(--tracking-tight);
	margin-bottom: var(--space-4);
}

.mvc-section-subtitle {
	font-size: var(--text-xl);
	color: var(--color-text-muted);
	line-height: var(--leading-relaxed);
	max-width: 60ch;
}

/* ── Title style: flanking dashes ────────────────────────────────────────── */
/* Renders horizontal lines on each side of the eyebrow text:  ──── EYEBROW ──── */
.mvc-section-header--flanking-dashes .mvc-section-eyebrow {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-3);
	text-align: center;
}

.mvc-section-header--flanking-dashes .mvc-section-eyebrow::before,
.mvc-section-header--flanking-dashes .mvc-section-eyebrow::after {
	content: "";
	flex: 0 0 var(--mvc-eyebrow-dash-length, 2.5rem);
	height: 1px;
	background-color: currentColor;
	opacity: 0.6;
}

/* Left-aligned variant: only show a dash on the right of the text */
.mvc-section-header--flanking-dashes:not(.mvc-section-header--center) .mvc-section-eyebrow {
	justify-content: flex-start;
}
.mvc-section-header--flanking-dashes:not(.mvc-section-header--center) .mvc-section-eyebrow::before {
	display: none;
}

/* ── Title style: line above eyebrow ─────────────────────────────────────── */
.mvc-section-header--line-above .mvc-section-eyebrow {
	padding-top: var(--space-3);
	position: relative;
}

.mvc-section-header--line-above .mvc-section-eyebrow::before {
	content: "";
	display: block;
	width: var(--mvc-eyebrow-line-length, 3rem);
	height: 2px;
	background-color: currentColor;
	margin-bottom: var(--space-2);
}

.mvc-section-header--line-above.mvc-section-header--center .mvc-section-eyebrow::before {
	margin-left: auto;
	margin-right: auto;
}

/* ── Title style: line below title ───────────────────────────────────────── */
.mvc-section-header--line-below .mvc-section-title {
	margin-bottom: var(--space-3);
}

.mvc-section-header--line-below .mvc-section-title::after {
	content: "";
	display: block;
	width: var(--mvc-title-underline-length, 4rem);
	height: 3px;
	background-color: var(--color-accent);
	margin-top: var(--space-3);
}

.mvc-section-header--line-below.mvc-section-header--center .mvc-section-title::after {
	margin-left: auto;
	margin-right: auto;
}

/* ── Title style: badge eyebrow ──────────────────────────────────────────── */
.mvc-section-header--badge .mvc-section-eyebrow {
	display: inline-block;
	padding: var(--space-1) var(--space-3);
	background-color: var(--color-accent);
	color: var(--color-on-accent, #fff);
	border-radius: var(--radius-full, 9999px);
	line-height: 1.4;
}

/* ── Title style: plain ──────────────────────────────────────────────────── */
/* No additional decoration — eyebrow + title + subtitle as-is */

/* ── WYSIWYG scope ───────────────────────────────────────────────────────── */
.mvc-wysiwyg h1,
.mvc-wysiwyg h2,
.mvc-wysiwyg h3,
.mvc-wysiwyg h4,
.mvc-wysiwyg h5,
.mvc-wysiwyg h6 {
	margin-top: 1.5em;
	margin-bottom: 0.5em;
}

.mvc-wysiwyg h1:first-child,
.mvc-wysiwyg h2:first-child,
.mvc-wysiwyg h3:first-child {
	margin-top: 0;
}

.mvc-wysiwyg p {
	margin-bottom: 1em;
}

.mvc-wysiwyg ul,
.mvc-wysiwyg ol {
	list-style: revert;
	padding-left: 1.5em;
	margin-bottom: 1em;
}

.mvc-wysiwyg ul li,
.mvc-wysiwyg ol li {
	margin-bottom: 0.25em;
	line-height: var(--leading-relaxed);
}

.mvc-wysiwyg blockquote {
	border-left: 4px solid var(--color-primary);
	margin: var(--space-8) 0;
	padding: var(--space-4) var(--space-6);
	background: var(--color-primary-subtle);
	border-radius: 0 var(--radius) var(--radius) 0;
	font-style: italic;
	color: var(--color-text-muted);
}

.mvc-wysiwyg blockquote p:last-child {
	margin-bottom: 0;
}

.mvc-wysiwyg code {
	font-family: var(--font-mono);
	font-size: 0.875em;
	background: var(--color-gray-100);
	padding: 0.15em 0.4em;
	border-radius: var(--radius-sm);
	color: var(--color-error);
}

.mvc-wysiwyg pre {
	background: var(--color-gray-900);
	color: var(--color-gray-100);
	padding: var(--space-6);
	border-radius: var(--radius);
	overflow-x: auto;
	margin-bottom: var(--space-6);
}

.mvc-wysiwyg pre code {
	background: none;
	padding: 0;
	color: inherit;
	font-size: var(--text-sm);
}

.mvc-wysiwyg table {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: var(--space-6);
	font-size: var(--text-sm);
}

.mvc-wysiwyg th,
.mvc-wysiwyg td {
	padding: var(--space-3) var(--space-4);
	text-align: left;
	border-bottom: 1px solid var(--color-border);
}

.mvc-wysiwyg th {
	font-weight: var(--font-weight-semibold);
	background: var(--color-gray-50);
	color: var(--color-heading);
}

.mvc-wysiwyg img {
	border-radius: var(--radius);
	margin-bottom: var(--space-4);
}

.mvc-wysiwyg a {
	color: var(--color-link);
}

.mvc-wysiwyg a:hover {
	color: var(--color-link-hover);
}

.mvc-wysiwyg hr {
	margin: var(--space-8) 0;
}

/* ── Star rating ─────────────────────────────────────────────────────────── */
.mvc-star-rating {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	color: var(--color-accent);
	font-size: var(--text-lg);
	line-height: 1;
}

.mvc-star-rating__count {
	font-size: var(--text-sm);
	color: var(--color-text-muted);
	margin-left: var(--space-1);
}