/**
 * Style Quentin Canva v0.7 - Système Parent/Enfants
 */

/* backoffice css */

.wp-block-quentin-canva {border: 1px dotted grey}

/* ==========================================================================
   CONTENEUR PRINCIPAL (Parent Canva)
   ========================================================================== */

.qba-canva {
    display: flex;
    flex-direction: column;
    justify-content: center;

    margin: 2rem auto;
    width: 100%;
    
    /*min-height: 60vh;*/
    /*padding: 4rem;*/

    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    background-color: transparent;
    transition: border-color 0.3s ease, background-color 0.3s ease;
}

/* Espacement entre blocs enfants directs du canva */
.qba-canva > .wp-block {
    margin-bottom: 0 !important;
}

/* ==========================================================================
   HEADER (Bloc enfant)
   ========================================================================== */

.qba-canva-header-block {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto 2rem auto;
    padding-bottom: 2rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    order: -2; /* Force le header en haut */
}

/* Espacement des blocs dans le header */
.qba-canva-header-block > * {
    margin-bottom: 1rem;
}

.qba-canva-header-block > *:last-child {
    margin-bottom: 0;
}

/* ==========================================================================
   FOOTER (Bloc enfant)
   ========================================================================== */

.qba-canva-footer-block {
    width: 100%;
    max-width: 1200px;
    margin: 2rem auto 0 auto;
    padding-top: 2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    order: 2; /* Force le footer en bas */
}

/* Espacement des blocs dans le footer */
.qba-canva-footer-block > * {
    margin-bottom: 1rem;
}

.qba-canva-footer-block > *:last-child {
    margin-bottom: 0;
}

/* ==========================================================================
   CONTENU (Blocs normaux dans le canva)
   ========================================================================== */

/* Tous les blocs qui ne sont ni header ni footer */
.qba-canva > .wp-block:not(.qba-canva-header-block):not(.qba-canva-footer-block) {
    flex: 1;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    order: 0; /* Reste au centre */
}

/* Espacement des blocs de contenu */
.qba-canva > .wp-block:not(.qba-canva-header-block):not(.qba-canva-footer-block) > * {
    margin-bottom: 1.5rem;
}

/* ==========================================================================
   MODE ÉDITEUR
   ========================================================================== */

.editor-styles-wrapper .qba-canva {
    min-height: 400px;
    border: 1px dotted grey;
}


/* Labels pour identifier les blocs header/footer */
.editor-styles-wrapper .qba-canva-header-block::before {
    content: '📍 HEADER';
    display: block;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: #4a7c59;
    margin-bottom: 1rem;
    padding: 0.5rem;
    background: rgba(74, 124, 89, 0.1);
    border-radius: 4px;
    text-align: center;
}

.editor-styles-wrapper .qba-canva-footer-block::before {
    content: '📍 FOOTER';
    display: block;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: #4a5f7f;
    margin-bottom: 1rem;
    padding: 0.5rem;
    background: rgba(74, 95, 127, 0.1);
    border-radius: 4px;
    text-align: center;
}

/* Placeholder pour blocs vides */
.qba-canva-header-block .block-editor-inner-blocks > .block-editor-block-list__layout:empty::before {
    content: 'Ajoutez des blocs dans le header...';
    display: block;
    padding: 1.5rem;
    text-align: center;
    color: #999;
    font-style: italic;
    border: 2px dashed rgba(74, 124, 89, 0.3);
    border-radius: 4px;
}

.qba-canva-footer-block .block-editor-inner-blocks > .block-editor-block-list__layout:empty::before {
    content: 'Ajoutez des blocs dans le footer...';
    display: block;
    padding: 1.5rem;
    text-align: center;
    color: #999;
    font-style: italic;
    border: 2px dashed rgba(74, 95, 127, 0.3);
    border-radius: 4px;
}

/* Bordure pour le canva parent vide */
.qba-canva > .block-list-appender {
    width: 100%;
    padding: 3rem;
    border: 2px dashed rgba(153, 153, 153, 0.3);
    border-radius: 8px;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 1024px) {
    .qba-canva {
        min-height: 50vh !important;
        padding: 3rem !important;
    }
    
    .qba-canva-header-block,
    .qba-canva-footer-block {
        margin: 1.5rem auto;
        padding: 1.5rem 0;
    }
}

@media (max-width: 768px) {
    .qba-canva {
        min-height: 40vh !important;
        padding: 2rem !important;
        margin: 1rem auto;
    }
    
    .qba-canva-header-block,
    .qba-canva-footer-block {
        margin: 1rem auto;
        padding: 1rem 0;
    }
}

@media (max-width: 480px) {
    .qba-canva {
        min-height: 30vh !important;
        padding: 1.5rem !important;
    }
}

/* ==========================================================================
   ALIGNEMENTS
   ========================================================================== */

.qba-canva.alignwide {
    max-width: 1200px;
}

.qba-canva.alignfull {
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
}

/* ==========================================================================
   ANIMATIONS
   ========================================================================== */

@keyframes canvaAppear {
    from {
        opacity: 0;
        transform: scale(0.98);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.qba-canva {
    animation: canvaAppear 0.5s ease-out;
}

/* ==========================================================================
   PRINT
   ========================================================================== */

@media print {
    .qba-canva {
        min-height: auto !important;
        border: 1px solid #ccc !important;
        background: white !important;
        padding: 2rem !important;
        break-inside: avoid;
    }
    
    .editor-styles-wrapper .qba-canva-header-block::before,
    .editor-styles-wrapper .qba-canva-footer-block::before {
        display: none;
    }
}