/**
 * BlockStudio Extensions - Custom Styles
 *
 * This file contains custom styles for BlockStudio extensions.
 * Organize styles by block type for easier maintenance.
 */

/**
 * Image Block Extensions
 */
figure.box-shadow img {
    box-shadow: var(--box-shadow-m);
}

/**
 * Heading Block Extensions
 */
/* Add heading-related extension styles here */

/**
 * Paragraph Block Extensions
 */
/* Add paragraph-related extension styles here */

/**
 * Button Block Extensions
 */
/* Add button-related extension styles here */

/**
 * Group Block Extensions
 */
/* Add group-related extension styles here */

/**
 * Column Block Extensions
 */
/* Add column-related extension styles here */

/**
 * Global Alignment Styles for DGS Blocks
 * Using CSS Custom Properties for consistency
 */
:root {
    /* Editor alignment widths */
    --editor-wide-width: 1024px;
    --editor-full-width: 100%;

    /* Frontend alignment widths */
    --frontend-wide-width: 120%;
    --frontend-full-width: 100vw;

    /* Optional: Add more custom properties as needed */
    --alignwide-margin: 10%;
}

/**
 * Editor-specific alignment fixes for all DGS blocks
 */
.editor-styles-wrapper [data-type^="dgs/"].alignwide {
    margin-left: auto !important;
    margin-right: auto !important;
    width: 100% !important;
    max-width: var(--editor-wide-width) !important;
}

.editor-styles-wrapper [data-type^="dgs/"].alignfull {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    position: relative !important;
    left: 0 !important;
    right: 0 !important;
}

/* More aggressive editor selectors */
.editor-styles-wrapper .alignfull {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    position: relative !important;
    left: 0 !important;
    right: 0 !important;
}

/**
 * Default block width constraints (1024px max-width)
 */
.cta-section-tango,
.fr-feature-card-uniform {
    max-width: 1024px;
    margin: 0 auto;
}

/**
 * Frontend alignment styles using CSS variables
 * Using more aggressive selectors to ensure they apply
 */

/* ALIGNWIDE - Extends 10% beyond container on each side */
.wp-block.alignwide,
.alignwide {
    margin-left: -10% !important;
    margin-right: -10% !important;
    max-width: 120% !important;
    width: 120% !important;
    position: relative;
}

/* Make inner elements expand when parent is alignwide */
.alignwide .brxe-section,
.alignwide .section__donate,
.alignwide .section-cta-donate,
.alignwide .cta-section-tango,
.alignwide .fr-feature-card-uniform {
    width: 100% !important;
    max-width: 100% !important;
}

.alignwide .brxe-container,
.alignwide .section__donate-container {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.alignwide .brxe-divider {
    width: 100% !important;
    /* max-width: 100% !important; */
}
.block-editor-block-list__layout.is-root-container > .alignwide {
    max-width: 1140px !important;
}
/* ALIGNFULL - Edge to edge */
.wp-block.alignfull,
.alignfull {
    left: 50% !important;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
    max-width: 100vw !important;
    position: relative !important;
    right: 50% !important;
    width: 100vw !important;
}

/* Make inner elements expand when parent is alignfull */
.alignfull .brxe-section,
.alignfull .section__donate,
.alignfull .section-cta-donate,
.alignfull .cta-section-tango,
.alignfull .fr-feature-card-uniform {
    width: 100% !important;
    max-width: 100% !important;
}

.alignfull .brxe-container,
.alignfull .section__donate-container {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.alignfull .brxe-divider {
    width: 100% !important;
    /* max-width: 100% !important; */
}

/* Editor alignment width constraint */
.block-editor-block-list__layout.is-root-container > .alignwide {
    max-width: 1140px !important;
}

/* Responsive adjustments */
@media (max-width: 1320px) {
    .wp-block.alignwide,
    .alignwide {
        margin-left: auto !important;
        margin-right: auto !important;
        width: 100% !important;
        max-width: 100% !important;
    }
}