/**
 * Shared content typography for Fisher Design studio:
 * — block editor canvas (.editor-styles-wrapper)
 * — frontend block pages (.studio-main .entry-content)
 *
 * Matches Bootstrap body + studio display scale used on the PHP homepage.
 */

:root {
	--bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
		"Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
		"Segoe UI Symbol", "Noto Color Emoji";
	--bs-body-font-family: var(--bs-font-sans-serif);
	--bs-body-font-weight: 400;
	--bs-body-font-size: 1rem;
	--bs-body-line-height: 1.5;
	--bs-headings-font-weight: 500;
	--studio-text: #1a1a1a;
	--studio-text-strong: #000;
	--studio-content-font: var(--bs-body-font-family);
}

.editor-styles-wrapper,
body.studio-body .studio-main .entry-content {
	font-family: var(--studio-content-font);
	font-size: var(--bs-body-font-size);
	font-weight: var(--bs-body-font-weight);
	line-height: var(--bs-body-line-height);
	color: var(--studio-text);
	background-color: #fff;
}

/*
 * Block editor canvas: theme.json enables useRootPaddingAwareAlignments, so
 * title + post-content use .has-global-padding with --wp--style--root--padding-*.
 * Those vars were unset → 0 inset. Match studio-main desktop gutter (24px).
 * Scoped to .editor-styles-wrapper so the frontend shell is unchanged.
 */
.editor-styles-wrapper {
	--wp--style--root--padding-top: 0px;
	--wp--style--root--padding-right: 24px;
	--wp--style--root--padding-bottom: 0px;
	--wp--style--root--padding-left: 24px;
}

.editor-styles-wrapper .block-editor-block-list__layout,
.editor-styles-wrapper .wp-block,
body.studio-body .studio-main .entry-content .wp-block {
	font-family: inherit;
}

/* Body / paragraphs — studio about lead scale */
.editor-styles-wrapper p,
.editor-styles-wrapper li,
.editor-styles-wrapper figcaption,
body.studio-body .studio-main .entry-content p,
body.studio-body .studio-main .entry-content li,
body.studio-body .studio-main .entry-content figcaption {
	font-family: var(--studio-content-font);
	font-size: clamp(1rem, 2.2vw, 1.35rem);
	font-weight: 400;
	line-height: 1.65;
	letter-spacing: 0.01em;
	color: var(--studio-text);
}

.editor-styles-wrapper p,
body.studio-body .studio-main .entry-content p {
	margin-top: 0;
	margin-bottom: 1rem;
}

.editor-styles-wrapper ul,
.editor-styles-wrapper ol,
body.studio-body .studio-main .entry-content ul,
body.studio-body .studio-main .entry-content ol {
	margin-top: 0;
	margin-bottom: 1rem;
	padding-left: 2rem;
}

/* Display H1 — studio about / hero headline */
.editor-styles-wrapper h1,
.editor-styles-wrapper .wp-block-heading.h1,
body.studio-body .studio-main .entry-content h1 {
	margin: 0 0 clamp(1.25rem, 3vw, 1.75rem);
	font-family: var(--studio-content-font);
	font-size: clamp(1.85rem, 6.2vw, 4.35rem);
	font-weight: 800;
	line-height: 1.08;
	letter-spacing: -0.02em;
	color: var(--studio-text-strong);
}

/* Section H2 */
.editor-styles-wrapper h2,
body.studio-body .studio-main .entry-content h2 {
	margin: clamp(2rem, 4vw, 3rem) 0 clamp(1rem, 2vw, 1.5rem);
	font-family: var(--studio-content-font);
	font-size: clamp(1.5rem, 3.8vw, 2.5rem);
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.02em;
	color: var(--studio-text-strong);
}

.editor-styles-wrapper h3,
body.studio-body .studio-main .entry-content h3 {
	margin: clamp(1.25rem, 2.5vw, 2rem) 0 0.75rem;
	font-family: var(--studio-content-font);
	font-size: clamp(1.35rem, 3.2vw, 2rem);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.02em;
	color: var(--studio-text-strong);
}

/* H4–H6 — Bootstrap scale + studio weight */
.editor-styles-wrapper h4,
body.studio-body .studio-main .entry-content h4 {
	margin: 1rem 0 0.5rem;
	font-family: var(--studio-content-font);
	font-size: calc(1.275rem + 0.3vw);
	font-weight: 600;
	line-height: 1.2;
	color: var(--studio-text-strong);
}

.editor-styles-wrapper h5,
body.studio-body .studio-main .entry-content h5 {
	margin: 1rem 0 0.5rem;
	font-family: var(--studio-content-font);
	font-size: 1.25rem;
	font-weight: 600;
	line-height: 1.2;
	color: var(--studio-text-strong);
}

.editor-styles-wrapper h6,
body.studio-body .studio-main .entry-content h6 {
	margin: 1rem 0 0.5rem;
	font-family: var(--studio-content-font);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.2;
	color: var(--studio-text-strong);
}

@media (min-width: 1200px) {
	.editor-styles-wrapper h4,
	body.studio-body .studio-main .entry-content h4 {
		font-size: 1.5rem;
	}
}

.editor-styles-wrapper strong,
.editor-styles-wrapper b,
body.studio-body .studio-main .entry-content strong,
body.studio-body .studio-main .entry-content b {
	font-weight: 700;
}

.editor-styles-wrapper a,
body.studio-body .studio-main .entry-content a {
	color: inherit;
}