/**
 * SchoolCanvas typography system.
 *
 * Source of truth for families and sizes is theme.json (presets → --wp--preset--font-*).
 * This file maps those presets onto Bootstrap, headings and the shared text styles, so the
 * front end, the block editor and every section use one scale. Full spec: TYPOGRAPHY.md and
 * the "Typography guide" page (Demos menu).
 *
 * Families: Poppins (headings, buttons, navigation, numbers) · Open Sans (body text).
 */

:root {
	/* Families */
	--sc-font-heading: var(--wp--preset--font-family--heading, Poppins, system-ui, sans-serif);
	--sc-font-body: var(--wp--preset--font-family--body, "Open Sans", system-ui, sans-serif);

	/* Sizes (fluid values generated from theme.json) */
	--sc-fs-display: var(--wp--preset--font-size--display, 4rem);
	--sc-fs-h1: var(--wp--preset--font-size--heading-1, 3rem);
	--sc-fs-h2: var(--wp--preset--font-size--heading-2, 2.5rem);
	--sc-fs-h3: var(--wp--preset--font-size--heading-3, 1.75rem);
	--sc-fs-h4: var(--wp--preset--font-size--heading-4, 1.25rem);
	--sc-fs-h5: var(--wp--preset--font-size--heading-5, 1.125rem);
	--sc-fs-h6: var(--wp--preset--font-size--heading-6, 1rem);
	--sc-fs-lead: var(--wp--preset--font-size--lead, 1.25rem);
	--sc-fs-body: var(--wp--preset--font-size--body, 1rem);
	--sc-fs-small: var(--wp--preset--font-size--small, 0.875rem);
	--sc-fs-caption: var(--wp--preset--font-size--caption, 0.75rem);
	--sc-fs-eyebrow: 0.8125rem;
	--sc-fs-button: 0.9375rem;
	--sc-fs-nav: 0.9375rem;
	--sc-fs-stat: clamp(2.25rem, 1.6rem + 2vw, 3rem);
	--sc-fs-quote: clamp(1.1875rem, 1rem + 0.6vw, 1.375rem);

	/* Line heights */
	--sc-lh-tight: 1.1;
	--sc-lh-heading: 1.2;
	--sc-lh-snug: 1.35;
	--sc-lh-body: 1.65;
	--sc-lh-lead: 1.6;

	/* Letter spacing */
	--sc-ls-display: -0.02em;
	--sc-ls-heading: -0.01em;
	--sc-ls-eyebrow: 0.16em;

	/* Text colours */
	--sc-color-heading: #0f1b33;
	--sc-color-body: #3b4457;
	--sc-color-muted: #6b7385;
	--sc-measure: 68ch;

	/* Bootstrap bridge */
	--bs-body-font-family: var(--sc-font-body);
	--bs-body-font-size: var(--sc-fs-body);
	--bs-body-line-height: var(--sc-lh-body);
	--bs-body-color: var(--sc-color-body);
	--bs-secondary-color: var(--sc-color-muted);
}

body {
	color: var(--sc-color-body);
	font-family: var(--sc-font-body);
	font-size: var(--sc-fs-body);
	line-height: var(--sc-lh-body);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

/* Headings use the heading colour, except inside anything that sets its own text colour
   (dark sections, coloured panels, the footer): there they follow that colour. */
.has-text-color,
.site-footer,
.sc-library-type,
[data-bs-theme="dark"] {
	--sc-color-heading: currentColor;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
	margin-bottom: 0.5em;
	color: var(--sc-color-heading);
	font-family: var(--sc-font-heading);
	font-weight: 700;
	line-height: var(--sc-lh-heading);
	letter-spacing: var(--sc-ls-heading);
	text-wrap: balance;
}

h1, .h1 { font-size: var(--sc-fs-h1); line-height: 1.15; letter-spacing: -0.015em; }
h2, .h2 { font-size: var(--sc-fs-h2); }
h3, .h3 { font-size: var(--sc-fs-h3); font-weight: 600; line-height: 1.3; letter-spacing: 0; }
h4, .h4 { font-size: var(--sc-fs-h4); font-weight: 600; line-height: var(--sc-lh-snug); letter-spacing: 0; }
h5, .h5 { font-size: var(--sc-fs-h5); font-weight: 600; line-height: 1.4; letter-spacing: 0; }
h6, .h6 { font-size: var(--sc-fs-h6); font-weight: 600; line-height: 1.45; letter-spacing: 0; }

/* Heading-style text that is not an h-element (e.g. a paragraph styled as display or a stat). */
.sc-display,
.sc-stat-number,
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
	color: var(--sc-color-heading);
	font-family: var(--sc-font-heading);
}

/* Bootstrap display classes follow the same scale. */
.display-1, .display-2, .display-3 {
	font-family: var(--sc-font-heading);
	font-size: var(--sc-fs-display);
	font-weight: 700;
	line-height: var(--sc-lh-tight);
	letter-spacing: var(--sc-ls-display);
}

.display-4, .display-5, .display-6 {
	font-family: var(--sc-font-heading);
	font-size: var(--sc-fs-h1);
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.015em;
}

/* Body text styles. */
p {
	margin-bottom: 1em;
}

.lead {
	font-size: var(--sc-fs-lead);
	font-weight: 400;
	line-height: var(--sc-lh-lead);
}

small, .small {
	font-size: var(--sc-fs-small);
	line-height: 1.55;
}

.sc-caption,
figcaption,
.wp-element-caption {
	color: var(--sc-color-muted);
	font-size: var(--sc-fs-caption);
	line-height: 1.5;
}

.entry-content > p,
.entry-content > ul,
.entry-content > ol {
	max-width: var(--sc-measure);
}

strong, b {
	font-weight: 700;
}

/* Links in running text. */
a {
	text-underline-offset: 0.18em;
	text-decoration-thickness: 1px;
}

.entry-content p a,
.entry-content li a {
	text-decoration: underline;
}

.entry-content p a:hover,
.entry-content li a:hover {
	text-decoration-thickness: 2px;
}

/* Lists in content (not menus). */
.entry-content ul:not([class*="sc-"]),
.entry-content ol {
	padding-left: 1.25em;
}

.entry-content :where(ul, ol):not(.sc-pills):not(.sc-side-nav) > li + li {
	margin-top: 0.35em;
}

/* Quotes. */
blockquote,
.wp-block-quote {
	margin: 2rem 0;
	padding-left: 1.25rem;
	border-left: 3px solid var(--bs-primary);
	color: var(--sc-color-heading);
	font-family: var(--sc-font-heading);
	font-size: var(--sc-fs-quote);
	font-weight: 500;
	line-height: 1.5;
}

blockquote cite,
.wp-block-quote cite {
	display: block;
	margin-top: 0.75rem;
	color: var(--sc-color-muted);
	font-family: var(--sc-font-body);
	font-size: var(--sc-fs-small);
	font-style: normal;
	font-weight: 600;
}

/* Code. */
code, kbd, pre {
	font-size: 0.875em;
}

/* Interface text: buttons, navigation, form labels, badges, numbers. */
.btn,
.wp-block-button__link,
.wp-element-button,
button {
	font-family: var(--sc-font-heading);
	font-size: var(--sc-fs-button);
	font-weight: 600;
	letter-spacing: 0.01em;
}

.site-header .nav-link,
.site-header .dropdown-item {
	font-family: var(--sc-font-heading);
	font-size: var(--sc-fs-nav);
	font-weight: 500;
}

.site-header .navbar {
	--bs-navbar-color: var(--sc-color-heading);
	--bs-navbar-hover-color: var(--bs-primary);
	--bs-navbar-active-color: var(--bs-primary);
}

label,
.form-label {
	font-family: var(--sc-font-heading);
	font-size: var(--sc-fs-small);
	font-weight: 500;
}

.badge {
	font-family: var(--sc-font-heading);
	font-weight: 600;
}

/* Numbers in tables line up. */
table,
.sc-price,
.sc-stat-number {
	font-variant-numeric: tabular-nums;
}