/**
 * Communio inherited typography systems.
 *
 * Page-level selections are applied to the main content area from a body class.
 * Group-level selections apply directly to the selected Group and override the
 * inherited page system for that section and its descendants.
 *
 * The current checkpoint establishes font-family inheritance. System-specific
 * responsive scales will be tuned and stress-tested separately before the
 * typography systems are considered final.
 */

/* Cormorant Garamond + Source Sans 3 */
body.communio-site-typography--cormorant-source,
body.communio-type-system--cormorant-source .site-main,
.communio-type-system--cormorant-source:not(body) {
	--communio-font-display:
		"cormorant-garamond",
		"Cormorant Garamond",
		"Iowan Old Style",
		"Palatino Linotype",
		Palatino,
		Georgia,
		serif;
	--communio-font-reading:
		"cormorant-garamond",
		"Cormorant Garamond",
		"Iowan Old Style",
		"Palatino Linotype",
		Palatino,
		Georgia,
		serif;
	--communio-font-utility:
		"source-sans-3",
		"Source Sans 3",
		-apple-system,
		BlinkMacSystemFont,
		"Segoe UI",
		Arial,
		sans-serif;
}

/* Crimson Pro + IBM Plex Sans */
body.communio-site-typography--crimson-plex,
body.communio-type-system--crimson-plex .site-main,
.communio-type-system--crimson-plex:not(body) {
	--communio-font-display:
		"Crimson Pro",
		Georgia,
		serif;
	--communio-font-reading:
		"Crimson Pro",
		Georgia,
		serif;
	--communio-font-utility:
		"IBM Plex Sans",
		-apple-system,
		BlinkMacSystemFont,
		"Segoe UI",
		Arial,
		sans-serif;
}

/* Newsreader + IBM Plex Sans */
body.communio-site-typography--newsreader-plex,
body.communio-type-system--newsreader-plex .site-main,
.communio-type-system--newsreader-plex:not(body) {
	--communio-font-display:
		"Newsreader",
		Georgia,
		serif;
	--communio-font-reading:
		"Newsreader",
		Georgia,
		serif;
	--communio-font-utility:
		"IBM Plex Sans",
		-apple-system,
		BlinkMacSystemFont,
		"Segoe UI",
		Arial,
		sans-serif;
}

/* Kepler 3 + Aktiv Grotesk */
body.communio-site-typography--kepler-aktiv,
body.communio-type-system--kepler-aktiv .site-main,
.communio-type-system--kepler-aktiv:not(body) {
	--communio-font-display:
		"kepler-3-display-variable",
		"Kepler 3 Display",
		Georgia,
		serif;
	--communio-font-reading:
		"kepler-3-variable",
		"Kepler 3",
		Georgia,
		serif;
	--communio-font-utility:
		"aktiv-grotesk",
		"Aktiv Grotesk",
		-apple-system,
		BlinkMacSystemFont,
		"Segoe UI",
		Arial,
		sans-serif;
}

/* Source Serif 4 + Source Sans 3 */
body.communio-site-typography--source-source,
body.communio-type-system--source-source .site-main,
.communio-type-system--source-source:not(body) {
	--communio-font-display:
		"Source Serif 4",
		Georgia,
		serif;
	--communio-font-reading:
		"Source Serif 4",
		Georgia,
		serif;
	--communio-font-utility:
		"Source Sans 3",
		-apple-system,
		BlinkMacSystemFont,
		"Segoe UI",
		Arial,
		sans-serif;
}

/*
 * Shared semantic role mapping.
 *
 * The typography-system class itself establishes reading typography. Major
 * headings use the display face. Interface-like elements use the utility face.
 */
:where(
	body[class*="communio-site-typography--"],
	body[class*="communio-type-system--"] .site-main,
	[class*="communio-type-system--"]:not(body)
) {
	font-family: var(--communio-font-reading);
}

:where(
	body[class*="communio-site-typography--"],
	body[class*="communio-type-system--"] .site-main,
	[class*="communio-type-system--"]:not(body)
) :where(
	h1,
	h2,
	h3,
	h4,
	h5,
	h6,
	.wp-block-heading,
	.communio-display-heading,
	.communio-section-heading,
	.communio-issue-theme
) {
	font-family: var(--communio-font-display);
}

:where(
	body[class*="communio-site-typography--"],
	body[class*="communio-type-system--"] .site-main,
	[class*="communio-type-system--"]:not(body)
) :where(
	button,
	.wp-block-button__link,
	.communio-button,
	.communio-eyebrow,
	.communio-meta-label,
	.communio-issue-metadata,
	.communio-arrow-link
) {
	font-family: var(--communio-font-utility);
}

/*
 * Production typography-role baseline.
 *
 * These values establish the common calibration target derived from the
 * Communio Type Lab. Individual typography systems may override these
 * variables after responsive stress testing.
 */
:where(
	body[class*="communio-site-typography--"],
	body[class*="communio-type-system--"] .site-main,
	[class*="communio-type-system--"]:not(body)
) {
	--communio-type-display-size: clamp(2.6rem, 7vw, 6.5rem);
	--communio-type-section-size: clamp(1.75rem, 3.5vw, 2.8rem);
	--communio-type-deck-size: clamp(1.3rem, 2.4vw, 1.85rem);

	--communio-type-display-leading: 0.98;
	--communio-type-section-leading: 1.08;
	--communio-type-deck-leading: 1.15;

	--communio-type-display-weight: 500;
	--communio-type-section-weight: 550;
	--communio-type-deck-weight: 400;
}

/*
 * Important editorial headings preserve whole words. Responsive sizing and
 * available measure must solve narrow compositions before word-breaking does.
 */
:where(
	body[class*="communio-site-typography--"],
	body[class*="communio-type-system--"] .site-main,
	[class*="communio-type-system--"]:not(body)
) :is(
	.communio-display-heading,
	.wp-block-heading.is-style-communio-display,
	.communio-issue-theme.is-style-communio-display
) {
	font-family: var(--communio-font-display);
	font-size: var(--communio-type-display-size);
	letter-spacing: var(--communio-tracking-display);
	font-weight: var(--communio-type-display-weight);
	line-height: var(--communio-type-display-leading);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
	text-wrap: balance;
}

:where(
	body[class*="communio-site-typography--"],
	body[class*="communio-type-system--"] .site-main,
	[class*="communio-type-system--"]:not(body)
) :is(
	.communio-section-heading,
	.wp-block-heading.is-style-communio-section-heading,
	.communio-issue-theme.is-style-communio-section-heading
) {
	font-family: var(--communio-font-display);
	font-size: var(--communio-type-section-size);
	letter-spacing: var(--communio-tracking-heading);
	font-weight: var(--communio-type-section-weight);
	line-height: var(--communio-type-section-leading);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
	text-wrap: balance;
}

:where(
	body[class*="communio-site-typography--"],
	body[class*="communio-type-system--"] .site-main,
	[class*="communio-type-system--"]:not(body)
) :is(
	.communio-editorial-deck,
	p.is-style-communio-deck,
	.communio-issue-description.is-style-communio-deck
) {
	font-family: var(--communio-font-reading);
	font-size: var(--communio-type-deck-size);
	font-weight: var(--communio-type-deck-weight);
	line-height: var(--communio-type-deck-leading);
}

/*
 * Narrow-display calibration.
 *
 * Different display faces consume materially different horizontal space.
 * These first-pass values moderate each system independently while retaining
 * the same semantic Communio Display role and whole-word integrity rules.
 *
 * These values remain under visual calibration and are not yet final.
 */
@media (max-width: 600px) {
	body.communio-site-typography--cormorant-source,
	body.communio-type-system--cormorant-source .site-main,
	.communio-type-system--cormorant-source:not(body) {
		--communio-type-display-size: clamp(2.35rem, 10vw, 2.6rem);
	}

	body.communio-site-typography--crimson-plex,
	body.communio-type-system--crimson-plex .site-main,
	.communio-type-system--crimson-plex:not(body) {
		--communio-type-display-size: clamp(2.2rem, 9.4vw, 2.5rem);
	}

	body.communio-site-typography--newsreader-plex,
	body.communio-type-system--newsreader-plex .site-main,
	.communio-type-system--newsreader-plex:not(body) {
		--communio-type-display-size: clamp(2.25rem, 9.6vw, 2.5rem);
	}

	body.communio-site-typography--kepler-aktiv,
	body.communio-type-system--kepler-aktiv .site-main,
	.communio-type-system--kepler-aktiv:not(body) {
		--communio-type-display-size: clamp(2.3rem, 9.8vw, 2.55rem);
	}

	body.communio-site-typography--source-source,
	body.communio-type-system--source-source .site-main,
	.communio-type-system--source-source:not(body) {
		--communio-type-display-size: clamp(2.15rem, 9.2vw, 2.45rem);
	}
}

/*
 * Container-aware Display calibration.
 *
 * Mobile viewport behavior is calibrated separately above. On wider screens,
 * Communio Display responds to the actual width of a sanctioned Communio
 * layout region rather than assuming that a wide viewport means a wide text
 * column.
 *
 * The custom property belongs to the typography system so a section-level
 * typography override automatically supplies its own container calibration.
 */

body.communio-site-typography--cormorant-source,
body.communio-type-system--cormorant-source .site-main,
.communio-type-system--cormorant-source:not(body) {
	--communio-type-display-container-size: clamp(2.35rem, calc(2rem + 1.5cqw), 3rem);
}

body.communio-site-typography--crimson-plex,
body.communio-type-system--crimson-plex .site-main,
.communio-type-system--crimson-plex:not(body) {
	--communio-type-display-container-size: clamp(2.2rem, calc(1.9rem + 1.5cqw), 2.85rem);
}

body.communio-site-typography--newsreader-plex,
body.communio-type-system--newsreader-plex .site-main,
.communio-type-system--newsreader-plex:not(body) {
	--communio-type-display-container-size: clamp(2.25rem, calc(1.95rem + 1.5cqw), 2.9rem);
}

body.communio-site-typography--kepler-aktiv,
body.communio-type-system--kepler-aktiv .site-main,
.communio-type-system--kepler-aktiv:not(body) {
	--communio-type-display-container-size: clamp(2.3rem, calc(1.95rem + 1.5cqw), 2.95rem);
}

body.communio-site-typography--source-source,
body.communio-type-system--source-source .site-main,
.communio-type-system--source-source:not(body) {
	--communio-type-display-container-size: clamp(2.15rem, calc(1.85rem + 1.5cqw), 2.8rem);
}

/*
 * Do not disturb the separately calibrated <=600px viewport behavior.
 * This rule handles narrow compositions occurring on tablet/desktop screens.
 */
@media (min-width: 601px) {
	@container communio-layout (max-width: 760px) {
		:is(
			.communio-display-heading,
			.wp-block-heading.is-style-communio-display,
			.communio-issue-theme.is-style-communio-display
		) {
			font-size: var(
				--communio-type-display-container-size,
				var(--communio-type-display-size)
			);
		}
	}
}

/*
 * Gutenberg live-preview heading parity.
 *
 * In Gutenberg the semantic h1-h6 element is itself the block wrapper.
 * The live Communio typography-system class and the Gutenberg block-style
 * class therefore coexist on that same element.
 */
:is(h1,h2,h3,h4,h5,h6).communio-editor-page-type-preview[class*="communio-type-system--"].is-style-communio-display {
	font-family: var(--communio-font-display);
	font-size: var(--communio-type-display-size);
	letter-spacing: var(--communio-tracking-display);
	font-weight: var(--communio-type-display-weight);
	line-height: var(--communio-type-display-leading);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
	text-wrap: balance;
}

:is(h1,h2,h3,h4,h5,h6).communio-editor-page-type-preview[class*="communio-type-system--"].is-style-communio-section-heading {
	font-family: var(--communio-font-display);
	font-size: var(--communio-type-section-size);
	letter-spacing: var(--communio-tracking-heading);
	font-weight: var(--communio-type-section-weight);
	line-height: var(--communio-type-section-leading);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
	text-wrap: balance;
}