/***************************************
 * BNCA Editor Styles
 * Version: 1.0
 * Editor-specific stylesheet
 ***************************************/ 

/*-----------------------------------
 * 1. ROOT VARIABLES & SETUP
 *----------------------------------*/
:root {
    /* Layout Fundamentals */
    --site-width: 90%;
    --max-width: 1200px;
    --spacing-base: 2rem;
    
    /* Brand Color Palette */
    --body-bg: #f5f6fa;
    --bnca-royal-blue: #030e78f9;
    --bnca-blue-violet: #6f3aca;
    --bnca-delft-blue: #82bccc;
    --bnca-electric-blue: #15cbdb;
    --bnca-sky-blue: #a6b9f2;
    --bnca-baby-blue: #ddedfd;
    --bnca-solar-gold: #d97d03;
}

/*-----------------------------------
 * 2. EDITOR BASE STYLES
 *----------------------------------*/
.editor-styles-wrapper {
    background-color: var(--body-bg) !important;
    color: inherit;
}

/* Reset editor padding */
.editor-styles-wrapper .is-root-container {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/*-----------------------------------
 * 3. EDITOR LAYOUT CONTAINERS
 *----------------------------------*/
.editor-styles-wrapper .is-root-container,
.editor-styles-wrapper .wp-block-post-content,
.editor-styles-wrapper .block-editor-block-list__layout {
    width: var(--site-width) !important;
    max-width: var(--max-width) !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/*-----------------------------------
 * 4. EDITOR TYPOGRAPHY
 *----------------------------------*/
.editor-styles-wrapper .wp-block-post-title,
.editor-styles-wrapper .editor-post-title {
    text-align: center !important;
    width: 90% !important;
    max-width: var(--max-width);
    margin: var(--spacing-base) auto !important;
    padding: 1rem 0;
    color: var(--bnca-royal-blue);
    background-color: var(--body-bg);
    border-bottom: 0;
}

/*-----------------------------------
 * 5. BLOCK STYLES IN EDITOR
 *----------------------------------*/
/* Group Blocks */
.editor-styles-wrapper .wp-block-group {
    width: 100% !important;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Content Width Control */
.editor-styles-wrapper .wp-block,
.editor-styles-wrapper .wp-block[data-align="wide"],
.editor-styles-wrapper .wp-block[data-align="full"] {
    max-width: var(--max-width);
}

/*-----------------------------------
 * 6. EDITOR-SPECIFIC ALIGNMENTS
 *----------------------------------*/
.editor-styles-wrapper .block-editor-block-list__layout > * {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

/* Alignment classes */
.editor-styles-wrapper .alignwide {
    max-width: var(--max-width);
    width: 100%;
}

.editor-styles-wrapper .alignfull {
    max-width: none;
    width: 100%;
}

/*-----------------------------------
 * 7. EDITOR DEBUG TOOLS
 *----------------------------------*/
/* Visual aids for development */
.editor-styles-wrapper .is-root-container {
    outline: 2px dotted blue;
    position: relative;
}

.editor-styles-wrapper .wp-block {
    outline: 1px dotted green;
    position: relative;
}

/* Debug labels */
.editor-styles-wrapper .is-root-container::after {
    content: 'Editor Root';
    position: absolute;
    top: 0;
    right: 0;
    background: rgba(0,0,255,0.1);
    padding: 2px 5px;
    font-size: 12px;
    color: blue;
}

/*-----------------------------------
 * 8. EDITOR BLOCK SPACING
 *----------------------------------*/
.editor-styles-wrapper .wp-block {
    margin-top: var(--spacing-base);
    margin-bottom: var(--spacing-base);
}

/* Remove excess spacing */
.editor-styles-wrapper .wp-block:first-child {
    margin-top: 0;
}

.editor-styles-wrapper .wp-block:last-child {
    margin-bottom: 0;
}

/*-----------------------------------
 * 9. EDITOR NAVIGATION
 *----------------------------------*/
.editor-styles-wrapper .wp-block-navigation {
    width: 100%;
    display: flex;
    justify-content: center;
}

/*-----------------------------------
 * 10. EDITOR OVERRIDES
 *----------------------------------*/
/* Override unwanted editor styles */
.editor-styles-wrapper .wp-block[data-align="full"] {
    max-width: none !important;
    width: 100% !important;
}

/* Force our constraints */
.editor-styles-wrapper .wp-block-post-content > * {
    width: var(--site-width) !important;
    max-width: var(--max-width) !important;
    margin-left: auto !important;
    margin-right: auto !important;
}