/*
 * Editor Styles
 *
 * This file contains styles that are specifically applied within the
 * Block Editor (Gutenberg) to ensure the backend editing experience
 * closely matches the frontend appearance of the theme.
 *
 * These styles are loaded via `add_editor_style()` in `functions.php`.
 */

/*--------------------------------------------------------------
# Header and Top Bar
--------------------------------------------------------------*/
.wp-block-group.car-top-bar {
    background: var(--wp--preset--color--topbar);
    padding: 10px;
}

/* 
 * Combined and cleaned up styles for header columns.
 * The clip-path creates a slanted edge effect.
 */
.wp-block-column.car-container-logo {
    clip-path: polygon(0 0, 100% 0, 95% 100%, 0% 100%);
    display: flex;
    background: var(--wp--preset--color--backmenu);
    height: 100px;
    justify-content: center;
    align-items: center;
    padding: 10px;
}

.wp-block-column.car-container-menu {
    display: flex;
    background: var(--wp--preset--color--backmenu);
    color: var(--wp--preset--color--colormenu);
    height: 100px;
    padding: 10px;
    justify-content: center;
}


/*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/
.wp-block-group.car-footer {
    background: var(--wp--preset--color--backmenu);
    color: var(--wp--preset--color--colormenu);
    padding: 10px;
}

.wp-block-heading.car-footer-heading {
    color: var(--wp--preset--color--colormenu);
    font-size: 18px;
    /* Removed redundant background color */
}


.car-footer-copy {
    color: var(--wp--preset--color--colormenu);
    font-size: 18px;
    /* Removed redundant background color */
}

.car-footer-copy a {
    color: inherit;
    text-decoration: underline;
}

.car-footer-copy a:hover {
    color: var(--wp--preset--color--link-hover);
}

.car-dealer-show-footer-tagline {
    margin-top: 10px;
    color: var(--wp--preset--color--colormenu);
    font-size: 18px;
    /* Removed redundant background color */
}

.car-dealer-show-footer-first {
    padding-right: 20px;
    padding-bottom: 20px;
}


/*--------------------------------------------------------------
# Shape Effects
--------------------------------------------------------------*/
.wp-block-column.car-container-left-of-menu {
    clip-path: polygon(33% 0, 100% 0, 100% 100%, 0 100%);
    display: flex;
    background: var(--wp--preset--color--backmenu);
    height: 100px;
    padding: 10px;
    justify-content: center;
}

.car-column-shape-effect {
    clip-path: polygon(15% 0, 100% 0, 100% 100%, 0 100%);
    background-color: var(--wp--preset--color--backmenu);
}


/*--------------------------------------------------------------
# Slider Editor Preview Override
--------------------------------------------------------------*/
/* Hide the actual functional slider in the editor */
.wp-block-group .slider-container {
    display: none !important;
}

/* Show the static editor preview block in the editor */
.wp-block-group .slider-editor-preview {
    display: block !important;
    text-align: center;
    /* Center the image within the preview block */
    border: 1px solid #eee;
    /* Optional: add a subtle border for visual clarity */
    padding: 5px;
    /* Optional: add some padding */
}

/* Ensure the image inside the preview block is fully visible and responsive */
.wp-block-group .slider-editor-preview img {
    display: block !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 auto;
    /* Ensure image is centered */
}

/* Optional: Hide slider navigation buttons if they somehow appear */
.wp-block-group .slider-container .slider-prev,
.wp-block-group .slider-container .slider-next {
    display: none !important;
}

.wp-block-group.has-dynamic-gradient.has-base-2-background-color {
    /* Primeiro defina a cor de fundo sólida */
    background-color: var(--wp--preset--color--base-2);

    /* Depois adicione apenas os gradientes escuros nos cantos */
    background-image:
        linear-gradient(135deg, rgba(0, 0, 0, 0.25) 0%, transparent 50%),
        linear-gradient(225deg, rgba(0, 0, 0, 0.25) 0%, transparent 50%),
        linear-gradient(45deg, rgba(0, 0, 0, 0.25) 0%, transparent 50%),
        linear-gradient(315deg, rgba(0, 0, 0, 0.25) 0%, transparent 50%);

    background-repeat: no-repeat;
    background-size:
        50% 50%,
        /* Canto superior esquerdo */
        50% 50%,
        /* Canto superior direito */
        50% 50%,
        /* Canto inferior esquerdo */
        50% 50%;
    /* Canto inferior direito */

    background-position:
        top left,
        /* Superior esquerdo */
        top right,
        /* Superior direito */
        bottom left,
        /* Inferior esquerdo */
        bottom right;
    /* Inferior direito */
}