/*
 * Typography defaults for Gutenberg content.
 *
 * Scoped so they only apply on pages where Gutenberg actually owns the
 * rendering — i.e. the body must NOT have the `.elementor-page` class
 * (which Elementor sets on every page it builds, including ones whose
 * "Edit with Elementor" canvas still wraps the post in `.entry-content`).
 *
 * The editor canvas (`.editor-styles-wrapper`) is also scoped here so the
 * block-editor preview matches the frontend Gutenberg rendering.
 *
 * Loads after tokens.css. All values are var() references — no literal hex or px.
 */

body:not(.elementor-page) .entry-content,
body:not(.elementor-page) .wp-block-post-content,
.editor-styles-wrapper {
  font-family: var(--font-body);
  font-size: var(--font-text-md);
  line-height: var(--line-height-text);
  color: var(--text-primary);
}

body:not(.elementor-page) .entry-content :is(h1,h2,h3,h4,h5,h6),
body:not(.elementor-page) .wp-block-post-content :is(h1,h2,h3,h4,h5,h6),
.editor-styles-wrapper :is(h1,h2,h3,h4,h5,h6) {
  font-family: var(--font-heading);
  font-weight: 700;
  letter-spacing: var(--letter-spacing-display);
  margin: 0 0 var(--space-lg);
  color: var(--text-primary);
}

body:not(.elementor-page) .entry-content h1,
body:not(.elementor-page) .wp-block-post-content h1,
.editor-styles-wrapper h1 { font-size: var(--font-display-xl); line-height: var(--line-height-display-xl); }

body:not(.elementor-page) .entry-content h2,
body:not(.elementor-page) .wp-block-post-content h2,
.editor-styles-wrapper h2 { font-size: var(--font-display-lg); line-height: var(--line-height-display-lg); }

body:not(.elementor-page) .entry-content h3,
body:not(.elementor-page) .wp-block-post-content h3,
.editor-styles-wrapper h3 { font-size: var(--font-display-md); line-height: var(--line-height-display-md); }

body:not(.elementor-page) .entry-content h4,
body:not(.elementor-page) .wp-block-post-content h4,
.editor-styles-wrapper h4 { font-size: var(--font-text-lg); line-height: var(--line-height-text); }

body:not(.elementor-page) .entry-content h5,
body:not(.elementor-page) .wp-block-post-content h5,
.editor-styles-wrapper h5 { font-size: var(--font-text-md); line-height: var(--line-height-text); }

body:not(.elementor-page) .entry-content h6,
body:not(.elementor-page) .wp-block-post-content h6,
.editor-styles-wrapper h6 { font-size: var(--font-text-sm); line-height: var(--line-height-text); }

body:not(.elementor-page) .entry-content p,
body:not(.elementor-page) .wp-block-post-content p,
.editor-styles-wrapper p {
  margin: 0 0 var(--space-lg);
}

body:not(.elementor-page) .entry-content a,
body:not(.elementor-page) .wp-block-post-content a,
.editor-styles-wrapper a {
  color: var(--accent-text);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

body:not(.elementor-page) .entry-content a:hover,
body:not(.elementor-page) .wp-block-post-content a:hover,
.editor-styles-wrapper a:hover {
  color: var(--accent-fill-hover);
}

body:not(.elementor-page) .entry-content small,
body:not(.elementor-page) .wp-block-post-content small,
.editor-styles-wrapper small {
  font-size: var(--font-text-sm);
}

/* Lead paragraph — opt-in via .lead class or article first paragraph */
body:not(.elementor-page) .entry-content .lead,
body:not(.elementor-page) .entry-content > p:first-of-type,
body:not(.elementor-page) .wp-block-post-content .lead,
body:not(.elementor-page) .wp-block-post-content > p:first-of-type,
.editor-styles-wrapper .lead {
  font-size: var(--font-lead);
  line-height: var(--line-height-lead);
}