/*--------------------------------------------------------------
# AuthorPro Block Editor Canvas Styles (WYSIWYG Bridge)
# Description: Synchronizes Gutenberg Canvas styling 1:1 with Frontend
# Note: Strictly scoped for editor canvas without global admin resets
--------------------------------------------------------------*/

/* =============================================================
   1. Editor Canvas Typography & Token Defaults
   ============================================================= */
.editor-styles-wrapper {
    /* Fallback Tokens */
    --authorpro-color-brand-600: #ea580c;
    --authorpro-color-brand-700: #c2410c;
    --authorpro-color-slate-900: #0f172a;
    --authorpro-color-slate-800: #1e293b;
    --authorpro-color-slate-700: #334155;
    --authorpro-color-slate-600: #475569;
    --authorpro-color-slate-500: #64748b;
    --authorpro-color-slate-300: #cbd5e1;
    --authorpro-color-slate-200: #e2e8f0;
    --authorpro-color-slate-100: #f1f5f9;
    --authorpro-color-slate-50: #f8fafc;
    --authorpro-color-white: #ffffff;

    --authorpro-font-heading: 'Libre Baskerville', serif;
    --authorpro-font-body: 'Inter', sans-serif;
    --authorpro-font-mono: 'JetBrains Mono', monospace;

    --authorpro-transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --authorpro-transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);

    font-family: var(--authorpro-font-body);
    color: var(--authorpro-color-slate-700);
    font-size: 1.125rem;
    line-height: 1.8;
}

/* =============================================================
   2. Post Title (Gutenberg Post Title Block & Editor Input)
   ============================================================= */
.editor-styles-wrapper .wp-block-post-title,
.editor-styles-wrapper .editor-post-title__input {
    font-family: var(--authorpro-font-heading) !important;
    color: var(--authorpro-color-slate-900) !important;
    font-size: 2.5rem !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    letter-spacing: -0.025em;
    margin-bottom: 1.5rem !important;
}

/* =============================================================
   3. Headings Hierarchy (Zero-Specificity :where)
   ============================================================= */
.editor-styles-wrapper :where(h1, h2, h3, h4, h5, h6),
.editor-styles-wrapper .wp-block-heading {
    font-family: var(--authorpro-font-heading);
    color: var(--authorpro-color-slate-900);
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.015em;
}

.editor-styles-wrapper :where(h1),
.editor-styles-wrapper h1.wp-block-heading {
    font-size: 2.25rem;
    margin-top: 2.5rem;
    margin-bottom: 1.25rem;
}

.editor-styles-wrapper :where(h2),
.editor-styles-wrapper h2.wp-block-heading {
    font-size: 1.875rem;
    margin-top: 2.25rem;
    margin-bottom: 1rem;
}

.editor-styles-wrapper :where(h3),
.editor-styles-wrapper h3.wp-block-heading {
    font-size: 1.5rem;
    margin-top: 2rem;
    margin-bottom: 0.875rem;
}

.editor-styles-wrapper :where(h4),
.editor-styles-wrapper h4.wp-block-heading {
    font-size: 1.25rem;
    margin-top: 1.75rem;
    margin-bottom: 0.75rem;
}

.editor-styles-wrapper :where(h5),
.editor-styles-wrapper h5.wp-block-heading {
    font-size: 1.125rem;
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
}

.editor-styles-wrapper :where(h6),
.editor-styles-wrapper h6.wp-block-heading {
    font-size: 1rem;
    margin-top: 1.25rem;
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* =============================================================
   4. Paragraphs & Lead Text
   ============================================================= */
.editor-styles-wrapper :where(p),
.editor-styles-wrapper .wp-block-paragraph {
    font-family: var(--authorpro-font-body);
    color: var(--authorpro-color-slate-700);
    font-size: 1.125rem;
    line-height: 1.8;
    margin-top: 0;
    margin-bottom: 1.75rem;
}

.editor-styles-wrapper :where(.is-style-lead),
.editor-styles-wrapper .is-style-lead p {
    font-size: 1.25rem;
    line-height: 1.7;
    color: var(--authorpro-color-slate-800);
}

/* =============================================================
   5. Links (Zero-Specificity :where)
   ============================================================= */
.editor-styles-wrapper :where(a) {
    color: var(--authorpro-color-brand-600);
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color var(--authorpro-transition-fast);
}

.editor-styles-wrapper :where(a):hover,
.editor-styles-wrapper :where(a):focus {
    color: var(--authorpro-color-brand-700);
}

/* =============================================================
   6. Blockquotes & Citations
   ============================================================= */
.editor-styles-wrapper :where(blockquote, .wp-block-quote) {
    border-left: 3px solid var(--authorpro-color-brand-600);
    padding-left: 1.5rem;
    margin: 2rem 0;
    font-style: italic;
    color: var(--authorpro-color-slate-800);
    line-height: 1.7;
    font-size: 1.125rem;
    background-color: transparent;
}

.editor-styles-wrapper :where(blockquote p, .wp-block-quote p) {
    margin-bottom: 0.75rem;
}

.editor-styles-wrapper :where(blockquote cite, .wp-block-quote cite) {
    display: block;
    margin-top: 0.75rem;
    font-size: 0.875rem;
    font-style: normal;
    font-weight: 600;
    color: var(--authorpro-color-slate-500);
}

/* =============================================================
   7. Drop Caps
   ============================================================= */
.editor-styles-wrapper :where(.has-drop-cap:not(:focus)::first-letter) {
    font-family: var(--authorpro-font-heading);
    font-size: 4.5rem;
    line-height: 0.85;
    float: left;
    margin: 0.25rem 0.75rem 0 0;
    color: var(--authorpro-color-brand-600);
    font-weight: 700;
}

/* =============================================================
   8. Lists
   ============================================================= */
.editor-styles-wrapper :where(ul, ol) {
    padding-left: 1.75rem;
    margin-top: 0;
    margin-bottom: 1.75rem;
    line-height: 1.75;
    color: var(--authorpro-color-slate-700);
    font-size: 1.125rem;
}

.editor-styles-wrapper :where(li) {
    margin-bottom: 0.5rem;
}

/* =============================================================
   9. Tables
   ============================================================= */
.editor-styles-wrapper :where(table, .wp-block-table) {
    width: 100%;
    border-collapse: collapse;
    margin: 2rem 0;
    font-size: 0.9375rem;
}

.editor-styles-wrapper :where(th) {
    background-color: var(--authorpro-color-slate-50);
    font-weight: 600;
    color: var(--authorpro-color-slate-900);
    text-align: left;
    padding: 0.75rem 1rem;
    border: 1px solid var(--authorpro-color-slate-200);
}

.editor-styles-wrapper :where(td) {
    padding: 0.75rem 1rem;
    border: 1px solid var(--authorpro-color-slate-200);
    color: var(--authorpro-color-slate-700);
}

/* =============================================================
   10. Code & Preformatted Text
   ============================================================= */
.editor-styles-wrapper :where(code) {
    font-family: var(--authorpro-font-mono);
    font-size: 0.875em;
    padding: 0.2rem 0.4rem;
    background-color: var(--authorpro-color-slate-100);
    color: var(--authorpro-color-slate-900);
    border-radius: 0.25rem;
}

.editor-styles-wrapper :where(pre, .wp-block-code) {
    padding: 1.25rem;
    background-color: var(--authorpro-color-slate-900);
    color: #f8fafc;
    border-radius: 0.375rem;
    overflow-x: auto;
    font-family: var(--authorpro-font-mono);
    font-size: 0.875rem;
    line-height: 1.6;
    margin: 2rem 0;
}

.editor-styles-wrapper :where(pre code, .wp-block-code code) {
    background: transparent;
    color: inherit;
    padding: 0;
    font-size: inherit;
}

/* =============================================================
   11. Separators & Dividers
   ============================================================= */
.editor-styles-wrapper :where(hr, .wp-block-separator) {
    border: 0;
    border-top: 1px solid var(--authorpro-color-slate-200);
    margin: 3rem auto;
    max-width: 120px;
}