/* ========================================
   GUTENBERG BLOCKS - RESPONSIVE STYLES
   ======================================== */

.synergy-box {
    background: #fff;
    border-radius: 8px;
    padding: 24px;
    position: relative;
    gap: 5px;
}

/* ========================================
   ALLINEAMENTO FLEX BLOCKS
   ======================================== */

/* Allineamento verticale verso l'alto per blocchi flex */
.wp-block-group.is-layout-flex,
.wp-block-group.is-layout-constrained,
.wp-block-buttons {
    align-items: flex-start !important;
}

/* Colonne allineate verso l'alto */
.wp-block-columns {
    align-items: flex-start !important;
}

.wp-block-column {
    align-self: flex-start !important;
}

/* Row layout (orizzontale) - allinea verso l'alto */
.wp-block-group.is-layout-flex.is-content-justification-left,
.wp-block-group.is-layout-flex.is-content-justification-center,
.wp-block-group.is-layout-flex.is-content-justification-right,
.wp-block-group.is-layout-flex.is-content-justification-space-between {
    align-items: flex-start !important;
}

/* Override per mantenere allineamento manuale se specificato */
.wp-block-group.is-vertically-aligned-top,
.wp-block-column.is-vertically-aligned-top {
    align-self: flex-start !important;
}

.wp-block-group.is-vertically-aligned-center,
.wp-block-column.is-vertically-aligned-center {
    align-self: center !important;
}

.wp-block-group.is-vertically-aligned-bottom,
.wp-block-column.is-vertically-aligned-bottom {
    align-self: flex-end !important;
}

/* ========================================
   BLOCCO DETAILS/ACCORDION
   ======================================== */

/* 
   Utilizzo nel blocco Gutenberg:
   
   1. Aggiungi il blocco "Details" dall'editor
   2. Scrivi il titolo nel tag <summary>
   3. Aggiungi il contenuto (testo, liste, etc.)
   
   Stili disponibili:
   - Default: bordo grigio, sfondo bianco
   - .is-style-dark: sfondo scuro
   - .is-style-accent: bordo e header rosso Arteco
   
   Liste automatiche:
   - <ul>: icone check verdi
   - <ol>: numerazione con sfondo rosso
*/

.wp-block-details {
    background: #fff;
    border: none;
    padding: 0;
    margin-bottom: 20px;
    overflow: hidden;
    transition: all 0.3s ease;
    width: 100%;
}

 
.wp-block-details summary {
    background: #fff;
    padding: 15px 20px;
    font-size: 16px;
    font-weight: 700;
    color: #262626;
    text-transform: uppercase;
    cursor: pointer;
    list-style: none;
    position: relative;
    user-select: none;
    transition: all 0.3s ease;
    letter-spacing: 0.5px;
    border: 1px solid #ddd;
    border-radius: 8px;
}

.wp-block-details summary::-webkit-details-marker {
    display: none;
}

.wp-block-details summary::marker {
    display: none;
}

/* Icona freccia per il summary */
.wp-block-details summary::after {
    content: '';
    position: absolute;
    right: 24px;
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
    width: 8px;
    height: 8px;
    border-right: 2px solid #262626;
    border-bottom: 2px solid #262626;
    transition: transform 0.3s ease;
}

.wp-block-details[open] summary::after {
    transform: translateY(-50%) rotate(-135deg);
}

.wp-block-details summary:hover {
    background: #F1F3F5;
    color: #b22222;
}

.wp-block-details summary:hover::after {
    border-color: #b22222;
}

/* Contenuto del details */
.wp-block-details__content,
.wp-block-details > *:not(summary) {
    padding: 24px;
    border-top: 1px solid #e0e0e0;
    animation: slideDown 0.3s ease-out;
}

.wp-block-details__content, .wp-block-details > *:not(summary) {
    border-top: 0;
}
.synergy-section-title h3 {
    color: #262626;
    font-weight: bold; 
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Liste all'interno del details */
.wp-block-details ul,
.wp-block-details ol {
    margin: 0;
    padding-left: 0;
    list-style: none;
}

.wp-block-details ul li,
.wp-block-details ol li {
    padding: 12px 0 12px 35px;
    position: relative;
    color: #666666;
    font-size: 16px;
    line-height: 1.6;
}

/* Icona check verde per le liste non ordinate */
.wp-block-details ul.advantages li::before {
    content: '✓';
    position: absolute;
    left: 0;
    top: 12px;
    width: 24px;
    height: 24px;
    background: #28a745;
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: bold;
}


/* Icona grigia per le liste non ordinate */
.wp-block-details ul.disadvantages li::before {
    content: '×';
    position: absolute;
    left: 0;
    top: 12px;
    width: 24px;
    height: 24px;
    background: #ddd;
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: bold;
}
/* Numerazione per le liste ordinate */
.wp-block-details ol {
    counter-reset: details-counter;
}

.wp-block-details ol li {
    counter-increment: details-counter;
}

.wp-block-details ol li::before {
    content: counter(details-counter);
    position: absolute;
    left: 0;
    top: 12px;
    width: 24px;
    height: 24px;
    background: #b22222;
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
}

/* Paragrafi all'interno del details */
.wp-block-details p {
    color: #666666;
    font-size: 16px;
    line-height: 1.6;
    margin-bottom: 15px;
}

.wp-block-details p:last-child {
    margin-bottom: 0;
}

/* Stile alternativo: Details con sfondo scuro */
.wp-block-details.is-style-dark {
    background: #262626;
    border-color: #262626;
}

.wp-block-details.is-style-dark summary {
    background: #262626;
    color: #fff;
}

.wp-block-details.is-style-dark summary::after {
    border-color: #fff;
}

.wp-block-details.is-style-dark summary:hover {
    background: #161616;
    color: #b22222;
}

.wp-block-details.is-style-dark .wp-block-details__content,
.wp-block-details.is-style-dark > *:not(summary) {
    background: #262626;
    border-top-color: #444;
}

.wp-block-details.is-style-dark p,
.wp-block-details.is-style-dark li {
    color: #cccccc;
}

/* Stile alternativo: Details con bordo rosso */
.wp-block-details.is-style-accent {
    border: 2px solid #b22222;
}

.wp-block-details.is-style-accent summary {
    background: #b22222;
    color: #fff;
}

.wp-block-details.is-style-accent summary::after {
    border-color: #fff;
}

.wp-block-details.is-style-accent summary:hover {
    background: #9a1d1d;
}

/* Media Queries per blocchi Gutenberg */

/* Tablet e mobile landscape */
@media (max-width: 899px) {
    .wp-block-group,
    .wp-block-cover {
        padding: 30px 15px !important;
    }
    
    .wp-block-columns {
        padding: 15px 0 !important;
    }
    
    .wp-block-column {
        padding: 0 10px !important;
    }
    
    .wp-block-quote {
        padding: 20px 25px !important;
        margin: 20px 10px !important;
    }
    
    .wp-block-pullquote {
        padding: 30px 20px !important;
        margin: 30px 10px !important;
    }
    
    .wp-block-media-text .wp-block-media-text__content {
        padding: 20px !important;
    }
    
    .wp-block-cover {
        padding: 60px 20px !important;
    }
    
    .wp-block-button__link {
        padding: 10px 40px !important;
        font-size: 18px !important;
    }
    
    /* Details responsive */
    .wp-block-details summary {
        padding: 15px 20px;
        font-size: 16px;
    }
    
    .wp-block-details summary::after {
        right: 20px;
    }
    
    .wp-block-details__content,
    .wp-block-details > *:not(summary) {
        padding: 20px;
    }
}

/* Mobile portrait */
@media (max-width: 600px) {
    .wp-block-group,
    .wp-block-cover {
        padding: 20px 10px !important;
    }
    
    .wp-block-paragraph,
    .wp-block-heading {
        padding: 10px !important;
    }
    
    .wp-block-quote {
        padding: 15px 20px !important;
        margin: 15px 5px !important;
    }
    
    .wp-block-pullquote {
        padding: 20px 15px !important;
    }
    
    .wp-block-button__link {
        padding: 8px 30px !important;
        font-size: 16px !important;
    }
    
    .wp-block-cover {
        padding: 40px 15px !important;
    }
    
    .wp-block-columns {
        gap: 20px !important;
    }
    
    /* Details responsive mobile */
    .wp-block-details summary {
        padding: 12px 16px;
        font-size: 15px;
    }
    
    .wp-block-details summary::after {
        right: 16px;
        width: 10px;
        height: 10px;
    }
    
    .wp-block-details__content,
    .wp-block-details > *:not(summary) {
        padding: 16px;
    }
    
    .wp-block-details ul li,
    .wp-block-details ol li {
        padding: 10px 0 10px 30px;
        font-size: 14px;
    }
    
    .wp-block-details ul li::before,
    .wp-block-details ol li::before {
        width: 20px;
        height: 20px;
        font-size: 12px;
    }
}

/* Stili aggiuntivi per immagini e gallery */
.wp-block-image img {
    border-radius: 8px;
}

.wp-block-image figcaption {
    padding: 10px;
    color: #666666;
    font-size: 14px;
    font-style: italic;
    text-align: center;
}

/* Tabelle responsive */
@media (max-width: 600px) {
    .wp-block-table {
        overflow-x: auto;
        display: block;
    }
    
    .wp-block-table table {
        min-width: 600px;
    }
}

/* Fix per allineamenti wide e full */
.alignwide {
    width: 100%;
    max-width: 1400px;
}

.alignfull {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

/* Stili per il blocco file */
.wp-block-file a.wp-block-file__button {
    background: #b22222;
    color: #fff;
    padding: 8px 20px;
    border-radius: 4px;
    margin-left: 10px;
    text-decoration: none;
    font-weight: 600;
}

.wp-block-file a.wp-block-file__button:hover {
    background: #9a1d1d;
}

/* Migliora separatori */
.wp-block-separator.is-style-wide {
    border-top: 2px solid #b22222;
}

.wp-block-separator.is-style-dots {
    background: none;
    border: none;
    text-align: center;
    line-height: 1;
}

.wp-block-separator.is-style-dots:before {
    content: '···';
    color: #666666;
    font-size: 30px;
    letter-spacing: 10px;
}

/* ========================================
   CLASSI DIMENSIONI FONT GUTENBERG
   ======================================== */

/* Dimensioni font standard */
.has-small-font-size {
    font-size: 14px !important;
    line-height: 1.6;
}

.has-normal-font-size,
.has-medium-font-size {
    font-size: 16px !important;
    line-height: 1.6;
}

.has-large-font-size {
    font-size: 30px !important;
    line-height: 1.5;
}

.has-x-large-font-size {
    font-size: 40px !important;
    line-height: 1.4;
}

.has-huge-font-size {
    font-size: 60px !important;
    line-height: 1.2;
    font-weight: 700;
}

/* Dimensioni heading personalizzate (da theme.json) */
.has-heading-3-font-size {
    font-size: 40px !important;
    line-height: 1.4;
    font-weight: 700;
}

.has-heading-2-font-size {
    font-size: 36px !important;
    line-height: 1.3;
    font-weight: 700;
}

.has-heading-1-font-size {
    font-size: 50px !important;
    line-height: 1.2;
    font-weight: 800;
}

/* Responsive font sizes */
@media (max-width: 899px) {
    .has-huge-font-size {
        font-size: 48px !important;
    }
    
    .has-heading-1-font-size {
        font-size: 40px !important;
    }
    
    .has-heading-2-font-size {
        font-size: 30px !important;
    }
    
    .has-heading-3-font-size {
        font-size: 22px !important;
    }
    
    .has-x-large-font-size {
        font-size: 22px !important;
    }
}

@media (max-width: 600px) {
    .has-huge-font-size {
        font-size: 36px !important;
    }
    
    .has-heading-1-font-size {
        font-size: 32px !important;
    }
    
    .has-heading-2-font-size {
        font-size: 26px !important;
    }
    
    .has-heading-3-font-size {
        font-size: 20px !important;
    }
    
    .has-x-large-font-size {
        font-size: 20px !important;
    }
    
    .has-large-font-size {
        font-size: 18px !important;
    }
}

/* ========================================
   CLASSI COLORI TESTO GUTENBERG
   ======================================== */

/* Colori testo (text color) */
.has-arteco-red-color {
    color: #b22222 !important;
}

.has-arteco-grey-light-color {
    color: #cccccc !important;
}

.has-arteco-grey-medium-color {
    color: #666666 !important;
}

.has-arteco-grey-dark-color {
    color: #262626 !important;
}

.has-arteco-grey-darker-color {
    color: #161616 !important;
}

.has-arteco-bg-color {
    color: #F1F3F5 !important;
}

.has-white-color {
    color: #ffffff !important;
}

.has-black-color {
    color: #000000 !important;
}

/* Colori sfondo (background color) */
.has-arteco-red-background-color {
    background-color: #b22222 !important;
}

.has-arteco-grey-light-background-color {
    background-color: #cccccc !important;
}

.has-arteco-grey-medium-background-color {
    background-color: #666666 !important;
}

.has-arteco-grey-dark-background-color {
    background-color: #262626 !important;
}

.has-arteco-grey-darker-background-color {
    background-color: #161616 !important;
}

.has-arteco-bg-background-color {
    background-color: #F1F3F5 !important;
}

.has-white-background-color {
    background-color: #ffffff !important;
}

.has-black-background-color {
    background-color: #000000 !important;
}

/* Migliora leggibilità con sfondi scuri */
.has-arteco-red-background-color,
.has-arteco-grey-dark-background-color,
.has-arteco-grey-darker-background-color,
.has-black-background-color {
    color: #ffffff;
}

.has-arteco-red-background-color h1,
.has-arteco-red-background-color h2,
.has-arteco-red-background-color h3,
.has-arteco-red-background-color h4,
.has-arteco-red-background-color h5,
.has-arteco-red-background-color h6,
.has-arteco-grey-dark-background-color h1,
.has-arteco-grey-dark-background-color h2,
.has-arteco-grey-dark-background-color h3,
.has-arteco-grey-dark-background-color h4,
.has-arteco-grey-dark-background-color h5,
.has-arteco-grey-dark-background-color h6,
.has-arteco-grey-darker-background-color h1,
.has-arteco-grey-darker-background-color h2,
.has-arteco-grey-darker-background-color h3,
.has-arteco-grey-darker-background-color h4,
.has-arteco-grey-darker-background-color h5,
.has-arteco-grey-darker-background-color h6,
.has-black-background-color h1,
.has-black-background-color h2,
.has-black-background-color h3,
.has-black-background-color h4,
.has-black-background-color h5,
.has-black-background-color h6 {
    color: #ffffff !important;
}

/* ========================================
   CLASSI ALLINEAMENTO TESTO
   ======================================== */

.has-text-align-left {
    text-align: left !important;
}

.has-text-align-center {
    text-align: center !important;
}

.has-text-align-right {
    text-align: right !important;
}

.has-text-align-justify {
    text-align: justify !important;
}