/**
 * Shared Typography Styles - Frontend & Editor Parity
 * 
 * This file contains typography styles that apply to both the Gutenberg editor
 * and the frontend, ensuring true WYSIWYG consistency.
 * 
 * These styles use CSS variables defined in typography-variables.css.
 * 
 * Scope: Only typography (h1-h6, p, ul, ol, li, blockquote, hr, a)
 * No layout, containers, or component-specific styles.
 */

/* Base Typography */
/* These styles apply to both .editor-styles-wrapper (editor) and content areas (frontend) */
.editor-styles-wrapper,
.wp-block-post-content,
.entry-content,
.prose {
    font-family: var(--wp--typography--font-family);
    font-size: var(--wp--typography--font-size--base);
    line-height: var(--wp--typography--line-height--base);
    color: var(--wp--color--text-main);
    background-color: var(--wp--color--background);
}

/* Headings - Consistent across editor and frontend */
.editor-styles-wrapper h1,
.editor-styles-wrapper h2,
.editor-styles-wrapper h3,
.editor-styles-wrapper h4,
.editor-styles-wrapper h5,
.editor-styles-wrapper h6,
.wp-block-post-content h1,
.wp-block-post-content h2,
.wp-block-post-content h3,
.wp-block-post-content h4,
.wp-block-post-content h5,
.wp-block-post-content h6,
.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6,
.prose h1,
.prose h2,
.prose h3,
.prose h4,
.prose h5,
.prose h6 {
    font-family: var(--wp--typography--font-family);
    font-weight: var(--wp--typography--font-weight--heading);
    text-transform: var(--wp--typography--text-transform--heading);
    letter-spacing: var(--wp--typography--letter-spacing--heading);
    line-height: var(--wp--typography--line-height--heading);
    color: var(--wp--color--text-main);
    margin-top: var(--wp--spacing--heading--top);
    margin-bottom: var(--wp--spacing--heading--bottom);
}

/* Individual Heading Sizes */
.editor-styles-wrapper h1,
.wp-block-post-content h1,
.entry-content h1,
.prose h1 {
    font-size: var(--wp--typography--font-size--h1);
    line-height: var(--wp--typography--line-height--h1);
    margin-top: var(--wp--spacing--heading--top--first);
}

.editor-styles-wrapper h2,
.wp-block-post-content h2,
.entry-content h2,
.prose h2 {
    font-size: var(--wp--typography--font-size--h2);
}

.editor-styles-wrapper h3,
.wp-block-post-content h3,
.entry-content h3,
.prose h3 {
    font-size: var(--wp--typography--font-size--h3);
}

.editor-styles-wrapper h4,
.wp-block-post-content h4,
.entry-content h4,
.prose h4 {
    font-size: var(--wp--typography--font-size--h4);
}

.editor-styles-wrapper h5,
.wp-block-post-content h5,
.entry-content h5,
.prose h5 {
    font-size: var(--wp--typography--font-size--h5);
}

.editor-styles-wrapper h6,
.wp-block-post-content h6,
.entry-content h6,
.prose h6 {
    font-size: var(--wp--typography--font-size--h6);
}

/* Paragraphs */
.editor-styles-wrapper p,
.wp-block-post-content p,
.entry-content p,
.prose p {
    margin-bottom: var(--wp--spacing--paragraph--bottom);
    line-height: var(--wp--typography--line-height--base);
}

/* Lists */
.editor-styles-wrapper ul,
.editor-styles-wrapper ol,
.wp-block-post-content ul,
.wp-block-post-content ol,
.entry-content ul,
.entry-content ol,
.prose ul,
.prose ol {
    margin-top: var(--wp--spacing--list--top);
    margin-bottom: var(--wp--spacing--list--bottom);
    padding-left: var(--wp--spacing--list--left);
}

.editor-styles-wrapper ul,
.wp-block-post-content ul,
.entry-content ul,
.prose ul {
    list-style-type: disc;
}

.editor-styles-wrapper ol,
.wp-block-post-content ol,
.entry-content ol,
.prose ol {
    list-style-type: decimal;
}

.editor-styles-wrapper li,
.wp-block-post-content li,
.entry-content li,
.prose li {
    margin-bottom: var(--wp--spacing--list-item--bottom);
    padding-left: var(--wp--spacing--list-item--left);
}

/* Nested Lists */
.editor-styles-wrapper ul ul,
.editor-styles-wrapper ol ol,
.editor-styles-wrapper ul ol,
.editor-styles-wrapper ol ul,
.wp-block-post-content ul ul,
.wp-block-post-content ol ol,
.wp-block-post-content ul ol,
.wp-block-post-content ol ul,
.entry-content ul ul,
.entry-content ol ol,
.entry-content ul ol,
.entry-content ol ul,
.prose ul ul,
.prose ol ol,
.prose ul ol,
.prose ol ul {
    margin-top: var(--wp--spacing--nested-list--top);
    margin-bottom: var(--wp--spacing--nested-list--bottom);
}

/* Links */
.editor-styles-wrapper a,
.wp-block-post-content a,
.entry-content a,
.prose a {
    color: var(--wp--color--link);
    text-decoration: none;
    font-weight: var(--wp--typography--font-weight--link);
}

.editor-styles-wrapper a:hover,
.wp-block-post-content a:hover,
.entry-content a:hover,
.prose a:hover {
    text-decoration: underline;
}

/* Blockquotes */
.editor-styles-wrapper blockquote,
.wp-block-post-content blockquote,
.entry-content blockquote,
.prose blockquote {
    border-left: var(--wp--spacing--blockquote--border-width) solid var(--wp--color--blockquote--border);
    padding-left: var(--wp--spacing--blockquote--left);
    font-style: italic;
    color: var(--wp--color--blockquote--text);
    margin: var(--wp--spacing--blockquote--vertical) 0;
}

/* Horizontal Rules */
.editor-styles-wrapper hr,
.wp-block-post-content hr,
.entry-content hr,
.prose hr {
    border: 0;
    border-top: 2px solid var(--wp--color--hr);
    margin: var(--wp--spacing--hr--vertical) 0;
}