/* ==========================================================
   Global Typography System
   File: /css/typography.css

   Requires typography and color tokens from variables.css.
   ========================================================== */


/* ==========================================================
   1. DOCUMENT DEFAULTS
   ========================================================== */

html {
		font-size: 100%;
	}


	body {
		color: var(--color-text);

		font-family: var(--type-body-m-family);
		font-size: var(--type-body-m-size);
		font-weight: var(--type-body-m-weight);
		line-height: var(--type-body-m-line-height);
		letter-spacing: var(--type-body-m-letter-spacing);

		text-rendering: optimizeLegibility;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
	}


	/* ==========================================================
	   2. DEFAULT BODY CONTENT
	   ========================================================== */

	p,
	li,
	dd,
	dt,
	blockquote,
	figcaption {
		font-family: var(--type-body-m-family);
		font-size: var(--type-body-m-size);
		font-weight: var(--type-body-m-weight);
		line-height: var(--type-body-m-line-height);
		letter-spacing: var(--type-body-m-letter-spacing);
	}


	p {
		margin-top: 0;
	}


	/* ==========================================================
	   3. DEFAULT HTML HEADING MAPPING

	   HTML elements are mapped to semantic typography roles.
	   Components may use the utility classes below instead.
	   ========================================================== */

	h1,
	h2,
	h3,
	h4,
	h5,
	h6,
	.fusion-title-heading {
		margin-top: 0;

		color: var(--color-text);

		font-family: var(--font-family-display);

		text-wrap: balance;
	}


	/* H1 → Display M */

	h1,
	h1.fusion-title-heading {
		font-family: var(--type-display-m-family);
		font-size: var(--type-display-m-size);
		font-weight: var(--type-display-m-weight);
		line-height: var(--type-display-m-line-height);
		letter-spacing: var(--type-display-m-letter-spacing);
	}


	/* H2 → Heading XL */

	h2,
	h2.fusion-title-heading {
		font-family: var(--type-heading-xl-family);
		font-size: var(--type-heading-xl-size);
		font-weight: var(--type-heading-xl-weight);
		line-height: var(--type-heading-xl-line-height);
		letter-spacing: var(--type-heading-xl-letter-spacing);
	}


	/* H3 → Heading L */

	h3,
	h3.fusion-title-heading {
		font-family: var(--type-heading-l-family);
		font-size: var(--type-heading-l-size);
		font-weight: var(--type-heading-l-weight);
		line-height: var(--type-heading-l-line-height);
		letter-spacing: var(--type-heading-l-letter-spacing);
	}


	/* H4 → Heading M */

	h4,
	h4.fusion-title-heading {
		font-family: var(--type-heading-m-family);
		font-size: var(--type-heading-m-size);
		font-weight: var(--type-heading-m-weight);
		line-height: var(--type-heading-m-line-height);
		letter-spacing: var(--type-heading-m-letter-spacing);
	}


	/* H5 and H6 → Heading S */

	h5,
	h6,
	h5.fusion-title-heading,
	h6.fusion-title-heading {
		font-family: var(--type-heading-s-family);
		font-size: var(--type-heading-s-size);
		font-weight: var(--type-heading-s-weight);
		line-height: var(--type-heading-s-line-height);
		letter-spacing: var(--type-heading-s-letter-spacing);
	}


	/* ==========================================================
	   4. TYPOGRAPHY UTILITIES

	   Apply these classes to an Avada element's CSS Class field.
	   They style the wrapper and ordinary text nested inside it.
	   ========================================================== */


	/* ----------------------------------------------------------
	   Shared WYSIWYG behavior
	   ---------------------------------------------------------- */

	[class*="type-"] > p:first-child {
		margin-top: 0;
	}

	[class*="type-"] > p:last-child {
		margin-bottom: 0;
	}


	/* Preserve semantic bold and italic styling */

	[class*="type-"] strong,
	[class*="type-"] b {
		font-weight: var(--font-weight-bold) !important;
	}

	[class*="type-"] em,
	[class*="type-"] i {
		font-style: italic !important;
	}

	/* ==========================================================
   5. BLOCKQUOTES
   ========================================================== */
	/* ==========================================================
   TYPOGRAPHY VERTICAL RHYTHM

   Spacing is applied to the Avada text-block wrapper rather
   than the nested paragraph.
   ========================================================== */

	/* Remove Avada/WYSIWYG paragraph margins inside text blocks */

	.fusion-text[class*="type-"] > p:first-child {
		margin-top: 0;
	}

	.fusion-text[class*="type-"] > p:last-child {
		margin-bottom: 0;
	}


	/* Display spacing */

	.fusion-text.type-display-xl,
	.fusion-text.type-display-l,
	.fusion-text.type-display-m {
		margin-bottom: var(--space-display-bottom);
	}


	/* Heading spacing */

	.fusion-text.type-heading-xl,
	.fusion-text.type-heading-l,
	.fusion-text.type-heading-m,
	.fusion-text.type-heading-s {
		margin-bottom: var(--space-heading-bottom);
	}


	/* Content spacing */

	.fusion-text.type-subtitle {
		margin-bottom: var(--space-subtitle-bottom);
	}

	.fusion-text.type-lead {
		margin-bottom: var(--space-lead-bottom);
	}

	.fusion-text.type-body-l,
	.fusion-text.type-body-m,
	.fusion-text.type-body-s {
		margin-bottom: var(--space-body-bottom);
	}

	.fusion-text.type-caption,
	.fusion-text.type-overline {
		margin-bottom: var(--space-caption-bottom);
	}

	/* ==========================================================
	   DISPLAY
	   ========================================================== */

	.type-display-xl.type-display-xl,
	.fusion-text.type-display-xl,
	.type-display-xl.type-display-xl :where(
		p, span, a, small,
		h1, h2, h3, h4, h5, h6,
		li, dt, dd, blockquote, figcaption
	),
	.fusion-text.type-display-xl :where(
		p, span, a, small,
		h1, h2, h3, h4, h5, h6,
		li, dt, dd, blockquote, figcaption
	) {
		font-family: var(--type-display-xl-family) !important;
		font-size: var(--type-display-xl-size) !important;
		font-weight: var(--type-display-xl-weight) !important;
		line-height: var(--type-display-xl-line-height) !important;
		letter-spacing: var(--type-display-xl-letter-spacing) !important;

		text-wrap: balance;
	}


	.type-display-l.type-display-l,
	.fusion-text.type-display-l,
	.type-display-l.type-display-l :where(
		p, span, a, small,
		h1, h2, h3, h4, h5, h6,
		li, dt, dd, blockquote, figcaption
	),
	.fusion-text.type-display-l :where(
		p, span, a, small,
		h1, h2, h3, h4, h5, h6,
		li, dt, dd, blockquote, figcaption
	) {
		font-family: var(--type-display-l-family) !important;
		font-size: var(--type-display-l-size) !important;
		font-weight: var(--type-display-l-weight) !important;
		line-height: var(--type-display-l-line-height) !important;
		letter-spacing: var(--type-display-l-letter-spacing) !important;

		text-wrap: balance;
	}


	.type-display-m.type-display-m,
	.fusion-text.type-display-m,
	.type-display-m.type-display-m :where(
		p, span, a, small,
		h1, h2, h3, h4, h5, h6,
		li, dt, dd, blockquote, figcaption
	),
	.fusion-text.type-display-m :where(
		p, span, a, small,
		h1, h2, h3, h4, h5, h6,
		li, dt, dd, blockquote, figcaption
	) {
		font-family: var(--type-display-m-family) !important;
		font-size: var(--type-display-m-size) !important;
		font-weight: var(--type-display-m-weight) !important;
		line-height: var(--type-display-m-line-height) !important;
		letter-spacing: var(--type-display-m-letter-spacing) !important;

		text-wrap: balance;
	}


	/* ==========================================================
	   HEADINGS
	   ========================================================== */

	.type-heading-xl.type-heading-xl,
	.fusion-text.type-heading-xl,
	.type-heading-xl.type-heading-xl :where(
		p, span, a, small,
		h1, h2, h3, h4, h5, h6,
		li, dt, dd, blockquote, figcaption
	),
	.fusion-text.type-heading-xl :where(
		p, span, a, small,
		h1, h2, h3, h4, h5, h6,
		li, dt, dd, blockquote, figcaption
	) {
		font-family: var(--type-heading-xl-family) !important;
		font-size: var(--type-heading-xl-size) !important;
		font-weight: var(--type-heading-xl-weight) !important;
		line-height: var(--type-heading-xl-line-height) !important;
		letter-spacing: var(--type-heading-xl-letter-spacing) !important;

		text-wrap: balance;
	}


	.type-heading-l.type-heading-l,
	.fusion-text.type-heading-l,
	.type-heading-l.type-heading-l :where(
		p, span, a, small,
		h1, h2, h3, h4, h5, h6,
		li, dt, dd, blockquote, figcaption
	),
	.fusion-text.type-heading-l :where(
		p, span, a, small,
		h1, h2, h3, h4, h5, h6,
		li, dt, dd, blockquote, figcaption
	) {
		font-family: var(--type-heading-l-family) !important;
		font-size: var(--type-heading-l-size) !important;
		font-weight: var(--type-heading-l-weight) !important;
		line-height: var(--type-heading-l-line-height) !important;
		letter-spacing: var(--type-heading-l-letter-spacing) !important;

		text-wrap: balance;
	}


	.type-heading-m.type-heading-m,
	.fusion-text.type-heading-m,
	.type-heading-m.type-heading-m :where(
		p, span, a, small,
		h1, h2, h3, h4, h5, h6,
		li, dt, dd, blockquote, figcaption
	),
	.fusion-text.type-heading-m :where(
		p, span, a, small,
		h1, h2, h3, h4, h5, h6,
		li, dt, dd, blockquote, figcaption
	) {
		font-family: var(--type-heading-m-family) !important;
		font-size: var(--type-heading-m-size) !important;
		font-weight: var(--type-heading-m-weight) !important;
		line-height: var(--type-heading-m-line-height) !important;
		letter-spacing: var(--type-heading-m-letter-spacing) !important;

		text-wrap: balance;
	}


	.type-heading-s.type-heading-s,
	.fusion-text.type-heading-s,
	.type-heading-s.type-heading-s :where(
		p, span, a, small,
		h1, h2, h3, h4, h5, h6,
		li, dt, dd, blockquote, figcaption
	),
	.fusion-text.type-heading-s :where(
		p, span, a, small,
		h1, h2, h3, h4, h5, h6,
		li, dt, dd, blockquote, figcaption
	) {
		font-family: var(--type-heading-s-family) !important;
		font-size: var(--type-heading-s-size) !important;
		font-weight: var(--type-heading-s-weight) !important;
		line-height: var(--type-heading-s-line-height) !important;
		letter-spacing: var(--type-heading-s-letter-spacing) !important;

		text-wrap: balance;
	}


	/* ==========================================================
	   SUBTITLE AND LEAD
	   ========================================================== */

	.type-subtitle.type-subtitle,
	.fusion-text.type-subtitle,
	.type-subtitle.type-subtitle :where(
		p, span, a, small,
		h1, h2, h3, h4, h5, h6,
		li, dt, dd, blockquote, figcaption
	),
	.fusion-text.type-subtitle :where(
		p, span, a, small,
		h1, h2, h3, h4, h5, h6,
		li, dt, dd, blockquote, figcaption
	) {
		font-family: var(--type-subtitle-family) !important;
		font-size: var(--type-subtitle-size) !important;
		font-weight: var(--type-subtitle-weight) !important;
		line-height: var(--type-subtitle-line-height) !important;
		letter-spacing: var(--type-subtitle-letter-spacing) !important;
	}


	.type-lead.type-lead,
	.fusion-text.type-lead,
	.type-lead.type-lead :where(
		p, span, a, small,
		h1, h2, h3, h4, h5, h6,
		li, dt, dd, blockquote, figcaption
	),
	.fusion-text.type-lead :where(
		p, span, a, small,
		h1, h2, h3, h4, h5, h6,
		li, dt, dd, blockquote, figcaption
	) {
		font-family: var(--type-lead-family) !important;
		font-size: var(--type-lead-size) !important;
		font-weight: var(--type-lead-weight) !important;
		line-height: var(--type-lead-line-height) !important;
		letter-spacing: var(--type-lead-letter-spacing) !important;
	}


	/* ==========================================================
	   BODY
	   ========================================================== */

	.type-body-l.type-body-l,
	.fusion-text.type-body-l,
	.type-body-l.type-body-l :where(
		p, span, a, small,
		h1, h2, h3, h4, h5, h6,
		li, dt, dd, blockquote, figcaption
	),
	.fusion-text.type-body-l :where(
		p, span, a, small,
		h1, h2, h3, h4, h5, h6,
		li, dt, dd, blockquote, figcaption
	) {
		font-family: var(--type-body-l-family) !important;
		font-size: var(--type-body-l-size) !important;
		font-weight: var(--type-body-l-weight) !important;
		line-height: var(--type-body-l-line-height) !important;
		letter-spacing: var(--type-body-l-letter-spacing) !important;
	}


	.type-body-m.type-body-m,
	.fusion-text.type-body-m,
	.type-body-m.type-body-m :where(
		p, span, a, small,
		h1, h2, h3, h4, h5, h6,
		li, dt, dd, blockquote, figcaption
	),
	.fusion-text.type-body-m :where(
		p, span, a, small,
		h1, h2, h3, h4, h5, h6,
		li, dt, dd, blockquote, figcaption
	) {
		font-family: var(--type-body-m-family) !important;
		font-size: var(--type-body-m-size) !important;
		font-weight: var(--type-body-m-weight) !important;
		line-height: var(--type-body-m-line-height) !important;
		letter-spacing: var(--type-body-m-letter-spacing) !important;
	}


	.type-body-s.type-body-s,
	.fusion-text.type-body-s,
	.type-body-s.type-body-s :where(
		p, span, a, small,
		h1, h2, h3, h4, h5, h6,
		li, dt, dd, blockquote, figcaption
	),
	.fusion-text.type-body-s :where(
		p, span, a, small,
		h1, h2, h3, h4, h5, h6,
		li, dt, dd, blockquote, figcaption
	) {
		font-family: var(--type-body-s-family) !important;
		font-size: var(--type-body-s-size) !important;
		font-weight: var(--type-body-s-weight) !important;
		line-height: var(--type-body-s-line-height) !important;
		letter-spacing: var(--type-body-s-letter-spacing) !important;
	}


	/* ==========================================================
	   CAPTION AND OVERLINE
	   ========================================================== */

	.type-caption.type-caption,
	.fusion-text.type-caption,
	.type-caption.type-caption :where(
		p, span, a, small,
		h1, h2, h3, h4, h5, h6,
		li, dt, dd, figcaption
	),
	.fusion-text.type-caption :where(
		p, span, a, small,
		h1, h2, h3, h4, h5, h6,
		li, dt, dd, figcaption
	) {
		font-family: var(--type-caption-family) !important;
		font-size: var(--type-caption-size) !important;
		font-weight: var(--type-caption-weight) !important;
		line-height: var(--type-caption-line-height) !important;
		letter-spacing: var(--type-caption-letter-spacing) !important;
	}


	.type-overline.type-overline,
	.fusion-text.type-overline,
	.type-overline.type-overline :where(
		p, span, a, small,
		h1, h2, h3, h4, h5, h6,
		li, dt, dd
	),
	.fusion-text.type-overline :where(
		p, span, a, small,
		h1, h2, h3, h4, h5, h6,
		li, dt, dd
	) {
		font-family: var(--type-overline-family) !important;
		font-size: var(--type-overline-size) !important;
		font-weight: var(--type-overline-weight) !important;
		line-height: var(--type-overline-line-height) !important;
		letter-spacing: var(--type-overline-letter-spacing) !important;
		text-transform: var(--type-overline-transform) !important;
	}

	/* ==========================================================
	   5. BLOCKQUOTES
	   ========================================================== */

	blockquote {
		margin-inline: 0;
		padding-inline-start: var(--space-5);

		border-inline-start:
			var(--border-width-button)
			solid
			var(--color-brand);

		color: var(--color-text);
	}


	/* ==========================================================
	   6. CODE
	   ========================================================== */

	code,
	kbd,
	samp,
	pre {
		font-family: var(--type-code-family);
		font-size: var(--type-code-size);
		font-weight: var(--type-code-weight);
		line-height: var(--type-code-line-height);
		letter-spacing: var(--type-code-letter-spacing);
	}


	/* ==========================================================
	   7. RESPONSIVE TYPOGRAPHY TOKENS
	   Display sizes use clamp() and do not need breakpoint
	   overrides. Breakpoints only adjust smaller heading roles.
	   ========================================================== */

	@media (max-width: 1024px) {

		:root {
			--type-heading-xl-size: var(--font-size-800);
			--type-heading-l-size: var(--font-size-700);
			--type-heading-m-size: var(--font-size-600);
		}
	}


	@media (max-width: 640px) {

		:root {
			--type-heading-xl-size: var(--font-size-700);
			--type-heading-l-size: var(--font-size-600);
			--type-heading-m-size: var(--font-size-500);
			--type-heading-s-size: var(--font-size-400);

			--type-body-l-size: var(--font-size-400);
		}
}