/* Editor-specific styles for DGS Hero CTA block */

/* Make overlay work in the editor */
.editor-styles-wrapper .dgs-hero-cta.with-background-image::after,
.block-editor-writing-flow .dgs-hero-cta.with-background-image::after,
.edit-post-visual-editor .dgs-hero-cta.with-background-image::after,
.block-editor .dgs-hero-cta.with-background-image::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--neutral-trans-dark-80);
    border-radius: inherit;
    z-index: 1;
    pointer-events: none;
}

/* Use custom property for dynamic overlay color in editor */
.editor-styles-wrapper .dgs-hero-cta.with-background-image[data-overlay-color]::after,
.block-editor-writing-flow .dgs-hero-cta.with-background-image[data-overlay-color]::after,
.edit-post-visual-editor .dgs-hero-cta.with-background-image[data-overlay-color]::after,
.block-editor .dgs-hero-cta.with-background-image[data-overlay-color]::after {
    background-color: var(--overlay-color, var(--neutral-trans-dark-80));
}

/* Ensure content is above overlay in editor */
.editor-styles-wrapper .dgs-hero-cta.with-background-image .dgs-hero-cta__container,
.block-editor-writing-flow .dgs-hero-cta.with-background-image .dgs-hero-cta__container,
.edit-post-visual-editor .dgs-hero-cta.with-background-image .dgs-hero-cta__container,
.block-editor .dgs-hero-cta.with-background-image .dgs-hero-cta__container {
    position: relative;
    z-index: 2;
}

/* Fix button styles in editor */
.editor-styles-wrapper a.dgs-hero-cta__button,
.block-editor-writing-flow a.dgs-hero-cta__button,
.edit-post-visual-editor a.dgs-hero-cta__button,
.block-editor a.dgs-hero-cta__button {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

/* Ensure secondary button is visible in editor */
.editor-styles-wrapper a.dgs-hero-cta__button.btn--secondary,
.editor-styles-wrapper a.dgs-hero-cta__button.btn--outline,
.block-editor-writing-flow a.dgs-hero-cta__button.btn--secondary,
.block-editor-writing-flow a.dgs-hero-cta__button.btn--outline,
.edit-post-visual-editor a.dgs-hero-cta__button.btn--secondary,
.edit-post-visual-editor a.dgs-hero-cta__button.btn--outline,
.block-editor a.dgs-hero-cta__button.btn--secondary,
.block-editor a.dgs-hero-cta__button.btn--outline {
    background-color: transparent;
    color: var(--primary);
    border: 2px solid var(--primary);
}

/* Apply dynamic overlay colors immediately in editor */
.dgs-hero-cta.with-background-image[style*="--overlay-color"]::after {
    background-color: var(--overlay-color) !important;
}

/* Ensure text colors are applied in editor using custom property */
.editor-styles-wrapper .dgs-hero-cta__accent-heading,
.editor-styles-wrapper .dgs-hero-cta__heading,
.editor-styles-wrapper .dgs-hero-cta__subtitle,
.block-editor-writing-flow .dgs-hero-cta__accent-heading,
.block-editor-writing-flow .dgs-hero-cta__heading,
.block-editor-writing-flow .dgs-hero-cta__subtitle,
.edit-post-visual-editor .dgs-hero-cta__accent-heading,
.edit-post-visual-editor .dgs-hero-cta__heading,
.edit-post-visual-editor .dgs-hero-cta__subtitle,
.block-editor .dgs-hero-cta__accent-heading,
.block-editor .dgs-hero-cta__heading,
.block-editor .dgs-hero-cta__subtitle {
    color: var(--text-color, inherit) !important;
}

/* Button alignment follows text alignment in editor */
.editor-styles-wrapper .dgs-hero-cta[style*="text-align: left"] .dgs-hero-cta__cta-block,
.block-editor-writing-flow .dgs-hero-cta[style*="text-align: left"] .dgs-hero-cta__cta-block {
    justify-content: flex-start;
}

.editor-styles-wrapper .dgs-hero-cta[style*="text-align: center"] .dgs-hero-cta__cta-block,
.block-editor-writing-flow .dgs-hero-cta[style*="text-align: center"] .dgs-hero-cta__cta-block {
    justify-content: center;
}

.editor-styles-wrapper .dgs-hero-cta[style*="text-align: right"] .dgs-hero-cta__cta-block,
.block-editor-writing-flow .dgs-hero-cta[style*="text-align: right"] .dgs-hero-cta__cta-block {
    justify-content: flex-end;
}

/* Text alignment for individual text elements in editor */
.editor-styles-wrapper .dgs-hero-cta[style*="text-align: left"] .dgs-hero-cta__accent-heading,
.editor-styles-wrapper .dgs-hero-cta[style*="text-align: left"] .dgs-hero-cta__heading,
.editor-styles-wrapper .dgs-hero-cta[style*="text-align: left"] .dgs-hero-cta__subtitle,
.block-editor-writing-flow .dgs-hero-cta[style*="text-align: left"] .dgs-hero-cta__accent-heading,
.block-editor-writing-flow .dgs-hero-cta[style*="text-align: left"] .dgs-hero-cta__heading,
.block-editor-writing-flow .dgs-hero-cta[style*="text-align: left"] .dgs-hero-cta__subtitle {
    text-align: left !important;
}

.editor-styles-wrapper .dgs-hero-cta[style*="text-align: center"] .dgs-hero-cta__accent-heading,
.editor-styles-wrapper .dgs-hero-cta[style*="text-align: center"] .dgs-hero-cta__heading,
.editor-styles-wrapper .dgs-hero-cta[style*="text-align: center"] .dgs-hero-cta__subtitle,
.block-editor-writing-flow .dgs-hero-cta[style*="text-align: center"] .dgs-hero-cta__accent-heading,
.block-editor-writing-flow .dgs-hero-cta[style*="text-align: center"] .dgs-hero-cta__heading,
.block-editor-writing-flow .dgs-hero-cta[style*="text-align: center"] .dgs-hero-cta__subtitle {
    text-align: center !important;
}

.editor-styles-wrapper .dgs-hero-cta[style*="text-align: right"] .dgs-hero-cta__accent-heading,
.editor-styles-wrapper .dgs-hero-cta[style*="text-align: right"] .dgs-hero-cta__heading,
.editor-styles-wrapper .dgs-hero-cta[style*="text-align: right"] .dgs-hero-cta__subtitle,
.block-editor-writing-flow .dgs-hero-cta[style*="text-align: right"] .dgs-hero-cta__accent-heading,
.block-editor-writing-flow .dgs-hero-cta[style*="text-align: right"] .dgs-hero-cta__heading,
.block-editor-writing-flow .dgs-hero-cta[style*="text-align: right"] .dgs-hero-cta__subtitle {
    text-align: right !important;
}

/* Additional editor contexts */
.edit-post-visual-editor .dgs-hero-cta[style*="text-align: left"] .dgs-hero-cta__accent-heading,
.edit-post-visual-editor .dgs-hero-cta[style*="text-align: left"] .dgs-hero-cta__heading,
.edit-post-visual-editor .dgs-hero-cta[style*="text-align: left"] .dgs-hero-cta__subtitle,
.block-editor .dgs-hero-cta[style*="text-align: left"] .dgs-hero-cta__accent-heading,
.block-editor .dgs-hero-cta[style*="text-align: left"] .dgs-hero-cta__heading,
.block-editor .dgs-hero-cta[style*="text-align: left"] .dgs-hero-cta__subtitle {
    text-align: left !important;
}

.edit-post-visual-editor .dgs-hero-cta[style*="text-align: center"] .dgs-hero-cta__accent-heading,
.edit-post-visual-editor .dgs-hero-cta[style*="text-align: center"] .dgs-hero-cta__heading,
.edit-post-visual-editor .dgs-hero-cta[style*="text-align: center"] .dgs-hero-cta__subtitle,
.block-editor .dgs-hero-cta[style*="text-align: center"] .dgs-hero-cta__accent-heading,
.block-editor .dgs-hero-cta[style*="text-align: center"] .dgs-hero-cta__heading,
.block-editor .dgs-hero-cta[style*="text-align: center"] .dgs-hero-cta__subtitle {
    text-align: center !important;
}

.edit-post-visual-editor .dgs-hero-cta[style*="text-align: right"] .dgs-hero-cta__accent-heading,
.edit-post-visual-editor .dgs-hero-cta[style*="text-align: right"] .dgs-hero-cta__heading,
.edit-post-visual-editor .dgs-hero-cta[style*="text-align: right"] .dgs-hero-cta__subtitle,
.block-editor .dgs-hero-cta[style*="text-align: right"] .dgs-hero-cta__accent-heading,
.block-editor .dgs-hero-cta[style*="text-align: right"] .dgs-hero-cta__heading,
.block-editor .dgs-hero-cta[style*="text-align: right"] .dgs-hero-cta__subtitle {
    text-align: right !important;
}