@use '../layout/mixins' as *;
@use 'typography' as *;

@layer base {
	.b-h1, .b-h2, .b-h3, .b-h4, .b-h5, .b-h6,
	.b-prose h1,
	.b-prose h2,
	.b-prose h3,
	.b-prose h4,
	.b-prose h5,
	.b-prose h6 {
		@extend .b-font-heading;
	}

	.b-prose h1,
	.b-h1,
	.b-heading:has(h1) {
		margin-top: var(--spacing-14);
		margin-bottom: var(--spacing-7);
		font-size: 2.2rem;
		font-weight: var(--font-weight-bold);

		@include mobile {
			margin-top: var(--spacing-10);
			margin-bottom: var(--spacing-5);
			font-size: 1.5rem;
		}
	}

	.b-prose h2,
	.b-h2,
	.b-heading:has(.b-h2) {
		margin-top: var(--spacing-12);
		margin-bottom: var(--spacing-6);
		font-size: 1.6rem;
		font-weight: var(--font-weight-bold);

		@include mobile {
			margin-top: var(--spacing-9);
			margin-bottom: var(--spacing-4);
			font-size: 1.35rem;
		}
	}

	.b-prose h3,
	.b-h3,
	.b-heading:has(.b-h3) {
		margin-top: var(--spacing-10);
		margin-bottom: var(--spacing-4);
		font-size: 1.4rem;
		font-weight: var(--font-weight-bold);

		@include mobile {
			margin-top: var(--spacing-8);
			margin-bottom: var(--spacing-3);
			font-size: 1.2rem;
		}
	}

	.b-prose h4,
	.b-h4,
	.b-heading:has(.b-h4) {
		margin-top: var(--spacing-9);
		margin-bottom: var(--spacing-6);
		font-size: 1.25rem;
		font-weight: var(--font-weight-semibold);

		@include mobile {
			margin-top: var(--spacing-7);
			margin-bottom: var(--spacing-5);
			font-size: 1.1rem;
		}
	}

	.b-prose h5,
	.b-h5,
	.b-heading:has(.b-h5) {
		margin-top: var(--spacing-8);
		margin-bottom: var(--spacing-4);
		font-size: 1.1rem;
		font-weight: var(--font-weight-semibold);

		@include mobile {
			margin-top: var(--spacing-6);
			margin-bottom: var(--spacing-3);
			font-size: 1rem;
		}
	}

	.b-prose h6,
	.b-h6,
	.b-heading:has(.b-h6) {
		margin-top: var(--spacing-7);
		margin-bottom: var(--spacing-3);
		font-size: 1rem;
		font-weight: var(--font-weight-semibold);

		@include mobile {
			margin-top: var(--spacing-5);
			margin-bottom: var(--spacing-2);
			font-size: 0.85rem;
		}
	}

	.b-heading {
		.b-h1, .b-h2, .b-h3, .b-h4, .b-h5, .b-h6 {
			margin-top: 0;
			margin-bottom: 0;
		}
	}
}
