/* Full Width Block Styles */
.wp-block-lucca-blocks-full-width {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    box-sizing: border-box;
}

/* When the block has align-full class, make it truly full width */
.wp-block-lucca-blocks-full-width.alignfull {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    left: 0;
    right: 0;
    position: relative;
    box-sizing: border-box;
    /* Fix for themes that might add padding to the body or container */
    padding-left: 0;
    padding-right: 0;
}

.wp-block-lucca-blocks-full-width .full-width-content {
    margin-left: auto;
    margin-right: auto;
    position: relative;
    z-index: 1;
}

/* Content width options */
.wp-block-lucca-blocks-full-width.content-width-contained .full-width-content {
    max-width: 1200px;
    padding-left: 20px;
    padding-right: 20px;
}

.wp-block-lucca-blocks-full-width.content-width-wide .full-width-content {
    max-width: 1600px;
    padding-left: 20px;
    padding-right: 20px;
}

.wp-block-lucca-blocks-full-width.content-width-full .full-width-content {
    width: 100%;
    max-width: 100%;
}

/* Parallax effect */
.wp-block-lucca-blocks-full-width[data-parallax="true"] {
    background-attachment: fixed;
    overflow: hidden;
}

/* Editor-specific styles for Full Width */
.editor-styles-wrapper .wp-block-lucca-blocks-full-width {
    border: 1px dashed #ccc;
    padding: 20px;
    margin-top: 20px;
    margin-bottom: 20px;
}

.editor-styles-wrapper .wp-block-lucca-blocks-full-width.is-selected,
.editor-styles-wrapper .wp-block-lucca-blocks-full-width.has-child-selected {
    border: 1px dashed #007cba;
}

.editor-styles-wrapper .full-width-background-preview {
    max-width: 100%;
    height: auto;
    margin-bottom: 10px;
    border-radius: 4px;
}

.editor-styles-wrapper .full-width-image-buttons {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-top: 10px;
}