/*
Theme Name: Casino Theme 1
Theme URI: https://example.com/casino-theme-1/
Author: Tuo Nome
Author URI: https://example.com/
Description: Un tema WordPress per un sito di casinò, ispirato a giochidislots.com.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: casino-theme-1
Tags: casino, games, slots
*/

/*--------------------------------------------------------------
# Reset & Normalize (Opzionale ma raccomandato)
--------------------------------------------------------------*/
/* Puoi includere qui un reset CSS o Normalize.css per una maggiore coerenza tra i browser */
/* Esempio: https://necolas.github.io/normalize.css/ */

/*--------------------------------------------------------------
# Font
--------------------------------------------------------------*/
/* Importa i font che intendi utilizzare. giochidislots.com sembra usare 'Open Sans' e 'Roboto' */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&family=Roboto:wght@400;500;700&display=swap');

/*--------------------------------------------------------------
# Variabili CSS (Opzionale ma utile per la coerenza)
--------------------------------------------------------------*/
:root {
    --primary-color: #8A2BE2; /* BlueViolet */
    --secondary-color: #9370DB; /* MediumPurple */
    --accent-color: #C481D9; /* Heliotrope-ish, un viola più chiaro/rosato */
    --background-color-light: #F8F0FF; /* LavenderBlush-like, molto chiaro per sfondi chiari */
    --background-color-dark: #4B0082;  /* Indigo, un viola molto scuro */
    --text-color: #333333; /* Grigio scuro per testo su sfondi chiari */
    --text-color-light: #FFFFFF; /* Bianco per testo su sfondi scuri */
    --border-color: #D8BFD8; /* Thistle, per bordi sottili */
}

/*--------------------------------------------------------------
# Stili Generali del Body
--------------------------------------------------------------*/
body {
    font-family: 'Open Sans', sans-serif;
    margin: 0;
    padding: 0;
    background-color: var(--background-color-dark); /* Imposta lo sfondo globale a viola scuro */
    color: var(--text-color-light); /* Imposta il colore del testo predefinito a chiaro per contrasto */
    line-height: 1.6;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-primary);
    font-weight: 700;
}

a {
    color: var(--text-color-light); /* CAMBIATO: Testo bianco per i link */
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
    /* Potresti voler definire un colore diverso per l'hover se il bianco sottolineato non è abbastanza evidente */
    /* Esempio: color: var(--accent-color); */
}

img {
    max-width: 100%;
    height: auto;
}

/*--------------------------------------------------------------
# Layout Principale (Wrapper, Container)
--------------------------------------------------------------*/
.container {
    width: 90%;
    max-width: 1200px; /* Larghezza massima simile a giochidislots */
    margin-left: auto;
    margin-right: auto;
    padding-left: 15px;
    padding-right: 15px;
}

/*--------------------------------------------------------------
# Header
--------------------------------------------------------------*/

.top-bar {
    background-color: var(--primary-color); /* Viola principale */
    color: var(--text-color-light);
    padding: 0.25em 0; 
    font-size: 0.8em; /* Ridotto leggermente per far stare più testo */
}

.top-bar .container {
    display: flex;
    justify-content: space-between; /* Manteniamo questo per ora, ma il flex-grow sotto è più importante */
    align-items: center;
    gap: 15px; 
}

.top-bar-content-left {
    flex-grow: 1; /* Permette al testo di occupare lo spazio disponibile */
    text-align: right; /* Allinea il testo al suo interno a destra */
    /* Opzionale: se vuoi un piccolo spazio tra il testo e i loghi, puoi aggiungere un padding-right qui
       o affidarti al 'gap' del .container
    padding-right: 10px; */
}

.top-bar-text {
    /* Puoi aggiungere stili specifici per il testo se necessario */
}

.top-bar-content-right {
    display: flex;
    align-items: center;
    gap: 10px; 
    flex-shrink: 0; /* Impedisce al blocco loghi di restringersi */
}

.gioco-sicuro-logo img {
    height: 24px; /* Ridotto da 30px. Regola ulteriormente se necessario */
    width: auto;
    display: block;
}

/* Stile per i placeholder dei futuri loghi (opzionale, per visualizzazione) */
.placeholder-logo {
    width: 24px; /* Esempio, adatta alla dimensione dei tuoi loghi */
    height: 24px;
    background-color: #ccc; /* Colore placeholder */
    border: 1px dashed #999;
}

.main-header-area {
    /* background-color: var(--background-color-dark); */
    padding: 0.7em 0;
    border-bottom: 1px solid var(--primary-color);
}

.main-header-area .container {
    display: flex;
    align-items: center; /* Fondamentale per l'allineamento verticale */
    /* justify-content: space-between; */ /* Rimosso per un controllo più granulare */
    gap: 20px; /* Spazio tra logo, navigazione e ricerca. Modifica se necessario. */
}

.site-branding {
    display: flex;
    align-items: center;
    flex-shrink: 0; /* Impedisce al logo di restringersi */
}

.site-title a {
    color: var(--text-color-light);
    font-size: 2em;
    font-weight: bold;
    text-decoration: none;
}

.site-description {
    color: var(--accent-color); /* Viola accento per la descrizione */
    font-size: 0.8em;
    margin: 0 0 0 10px; /* Rimuove margini verticali, aggiunge un po' di spazio a sinistra se la descrizione è accanto al logo */
                       /* Se la descrizione è sotto il logo, considera margin: 5px 0 0 0; o simile */
}

.main-navigation {
    flex-grow: 1; /* Permette alla navigazione di occupare lo spazio centrale */
    display: flex; /* Aggiunto per un miglior controllo interno se necessario */
    justify-content: center; /* Centra la lista ul se la navigazione è più larga del menu */
}

.main-navigation ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex; /* Per un menu orizzontale */
}

.main-navigation li {
    margin-left: 20px; /* Spazio a sinistra invece che a destra per allineare meglio con il search */
}

.main-navigation li:first-child {
    margin-left: 0;
}

.main-navigation a {
    text-decoration: none;
    color: var(--text-color-light); /* Testo bianco (normale) */
    padding: 0.35em 0.8em;
    display: block;
    transition: background-color 0.3s ease, color 0.3s ease; /* Aggiunta transizione */
    background-color: transparent !important; /* Override: rimuovi sfondo sui link di navigazione */
}

.main-navigation a:hover,
.main-navigation .current-menu-item > a {
    color: var(--background-color-dark); /* Testo viola scuro (hover e active) */
    background-color: var(--text-color-light); /* Sfondo bianco (hover e active) */
}

/* Stili per il menu toggle (hamburger icon) per mobile */
.menu-toggle {
    display: none; /* Nascosto su desktop per impostazione predefinita */
    background: var(--accent-color); /* Sfondo di esempio, puoi personalizzarlo */
    color: var(--text-color-light); /* Colore testo/icona di esempio */
    border: none;
    padding: 0.5em;
    cursor: pointer;
    /* Aggiungi qui altri stili se necessario per quando sarà visibile su mobile */
}

.header-search .search-form {
    display: flex;
}

.header-search .search-field {
    padding: 0.35em 0.5em; /* Ridotto padding verticale da 0.5em, mantenendo quello orizzontale */
    border: 1px solid var(--secondary-color);
    border-right: none;
    background-color: #fff;
    color: var(--text-color);
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
    box-sizing: border-box; /* Importante per il calcolo dell'altezza */
    line-height: normal; /* Può aiutare a normalizzare l'altezza del testo interno */
}

.header-search .search-submit {
    padding-top: 0.35em; /* Ridotto da 0.5em */
    padding-bottom: 0.35em; /* Ridotto da 0.5em */
    padding-left: 0.8em;
    padding-right: 0.8em; /* Padding orizzontale per dare spazio all'icona */
    /* width: 40px; */ /* Rimuovi o commenta la larghezza fissa se vuoi che si adatti al padding */
    /* height: auto; */ /* Rimosso */
    /* aspect-ratio: 1 / 1; */ /* Rimosso */
    border: 1px solid  #000; /* Stesso spessore del bordo */
    background-color:  #000;
    color: #fff;
    cursor: pointer;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box; /* Importante per il calcolo dell'altezza */
}

.header-search .search-submit svg {
    width: 16px; /* Dimensione dell'icona */
    height: 16px; /* Dimensione dell'icona */
}

/*--------------------------------------------------------------
# Breadcrumbs Area
--------------------------------------------------------------*/
.breadcrumbs-area {
    background-color: #2e0450; /* Viola intermedio, più scuro di --primary-color e più chiaro di --background-color-dark */
    color: var(--text-color-light); /* Testo chiaro per i breadcrumbs */
    padding-top: 10px;  /* Aggiungi un po' di padding sopra il testo dei breadcrumbs */
    padding-bottom: 10px; /* Aggiungi un po' di padding sotto il testo dei breadcrumbs, prima della linea */
    border-bottom: 1px solid #ffffff; /* Linea bianca sotto i breadcrumbs */
    /* min-height: 0; // Puoi rimuoverlo se il padding gestisce l'altezza minima */
    /* display: flex; // Potrebbe non essere necessario su .breadcrumbs-area se .container gestisce l'allineamento */
    /* align-items: center; // Idem */
}

.breadcrumbs-area .container {
    text-align: left;
    /* width: 100%; // .container ha già max-width e margin auto, quindi questo non è necessario qui */
    padding-top: 0; 
    padding-bottom: 0;
    /* line-height: 1; // Questo è molto specifico, assicurati che sia necessario */
    display: flex; /* Aggiunto per allineare il nav dei breadcrumbs */
    align-items: center; /* Allinea verticalmente il nav dei breadcrumbs */
    min-height: 20px; /* Assicura un'altezza minima per l'area del container dei breadcrumbs */
}

/* Stile per l'elemento NAV dentro il container dei breadcrumbs */
.breadcrumbs-area .container nav {
    margin: 0; /* Rimuovi margini specifici se .container e .breadcrumb-item gestiscono lo spazio */
    padding: 0;
    /* line-height: 1; // Ereditato o gestito da .breadcrumb-item */
    /* display: block; // Non necessario se il genitore è flex */
}

/* Stili per la lista ol dei breadcrumbs */
.breadcrumbs { /* Questo è l'elemento <ol> */
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap; 
    width: 100%; 
    line-height: 1; /* Assicura che l'ol stesso non aggiunga interlinea */
}

.breadcrumb-item { /* Questo è l'elemento <li> */
    margin: 0; 
    padding: 0; 
    font-size: 13px;   /* Dimensione font fissa e molto piccola */
    line-height: 1;    /* Interlinea minima, altezza della riga = altezza del font */
    display: flex;     /* Aggiunto per un controllo più fine dell'allineamento interno */
    align-items: center; /* Allinea il testo verticalmente all'interno dell'item se necessario */
}

.breadcrumb-item a,
.breadcrumb-item.active {
    color: inherit; 
    text-decoration: none;
    display: block; /* Assicura che occupi lo spazio definito dal genitore li */
}

.breadcrumb-item a:hover {
    text-decoration: underline;
}

.breadcrumb-separator {
    margin: 0 0.4em; /* Leggermente ridotto */
    font-size: 11px;   /* Stessa dimensione degli item */
    line-height: 1;    /* Stessa interlinea degli item */
    display: flex;     /* Aggiunto per un controllo più fine dell'allineamento interno */
    align-items: center; /* Allinea il separatore verticalmente */
}

/* Stile per nascondere il testo per screen reader */
.screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    word-wrap: normal !important;
}

/*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/
/* Aggiungi qui gli stili per il footer, simili a quelli del header */

/* Footer Styles */
.site-footer {
    background-color: #000000; /* Black background */
    color: #ffffff; /* White text */
    padding: 40px 0; /* Adjust vertical padding as needed */
    font-size: 0.9em;
    border-top: 2px solid #ffffff; /* White line above the footer - spessore 2px */
}

.footer-container {
    max-width: 1200px; /* Or your theme's standard container width */
    margin: 0 auto;
    padding: 0 15px; /* Horizontal padding for content within the container */
}

.footer-top-content {
    text-align: center;
    margin-bottom: 30px;
}

.footer-title-area { /* Nuovo stile per il wrapper del titolo e logo */
    display: flex;
    align-items: center;
    justify-content: center; /* Centra il logo e il titolo insieme */
    gap: 10px; /* Spazio tra il logo e il titolo */
    margin-bottom: 10px; /* Spazio sotto l'area del titolo, prima dello slogan */
}

.footer-logo-icon { /* Stile per l'SVG del logo nel footer */
    flex-shrink: 0; /* Impedisce al logo di restringersi */
}

.footer-top-content h4 {
    font-size: 1.5em; /* Adjust as needed */
    margin-top: 0;
    margin-bottom: 0; /* Rimosso il margine inferiore, gestito da .footer-title-area */
    font-weight: 600;
    line-height: 1.2; /* Aggiunto per un miglior allineamento verticale con l'icona */
}

.footer-top-content .footer-slogan {
    font-size: 1em;
    margin-top: 0;
    margin-bottom: 0;
    font-style: italic;
}

.footer-bottom-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap; /* Allow wrapping on smaller screens */
    border-top: 1px solid #333333; /* Optional separator line */
    padding-top: 20px;
    
}

.footer-copyright {
    flex-basis: 100%; /* Full width on small screens */
    text-align: center; /* Center on small screens */
    margin-bottom: 15px; /* Space below copyright on small screens */
}

.footer-copyright p {
    margin: 0;
}

.footer-logos {
    flex-basis: 100%; /* Full width on small screens */
    text-align: center; /* Center on small screens */
}

.footer-logos img {
    height: 35px; /* Adjust logo height as needed */
    margin: 0 10px; /* Spacing around logos */
    vertical-align: middle;
}

/* Responsive adjustments for larger screens */
@media (min-width: 768px) {
    .footer-copyright {
        flex-basis: auto; /* Auto width on larger screens */
        text-align: left;
        margin-bottom: 0;
    }

    .footer-logos {
        flex-basis: auto; /* Auto width on larger screens */
        text-align: right;
    }
}

/*--------------------------------------------------------------
# Responsive Design
--------------------------------------------------------------*/
/* Aggiungi qui gli stili per la versione mobile, se necessario */

/*--------------------------------------------------------------
# Altri Stili
--------------------------------------------------------------*/
/* Aggiungi qui altri stili man mano che sviluppi il tema */

/*--------------------------------------------------------------
# Content
--------------------------------------------------------------*/
.game-entry-single .entry-header {
    padding: 15px; /* Padding uniforme per dare respiro al titolo */
    margin-bottom: 10px; /* Ridotto da 20px. Puoi provare anche 5px o 0px se vuoi che siano attaccati */
}

.game-entry-single .entry-header .game-title {
    font-size: 1.75rem; 
    color: var(--text-color-light); /* Testo chiaro per contrasto */
    margin-top: 0; 
    margin-bottom: 0; 
}

.game-entry-single .entry-content {
    margin-bottom: 2em; /* Puoi usare px, em, rem. 2em è circa l'altezza di due righe di testo. */
                         /* Regola questo valore finché non ottieni lo spazio desiderato. */
}

/*--------------------------------------------------------------
# Game Demo Area
--------------------------------------------------------------*/
.game-demo-wrapper { 
    position: relative;
    margin-bottom: 20px; /* O il margine che preferisci */
    /* background-color: #000; Rimosso o commentato se il placeholder gestisce il suo sfondo */
    border: 2px solid var(--primary-color); /* Manteniamo il bordo viola primario attorno al wrapper */
    border-radius: 5px;
    overflow: hidden;
}

.game-demo-placeholder {
    position: relative;
    cursor: pointer;
    display: flex; 
    flex-direction: column;
    align-items: center; 
    justify-content: center; 
    width: 100%; 
    aspect-ratio: 16 / 9; 
    background-color: #000000; /* Imposta lo sfondo del placeholder a nero */
}

/* Nuovo wrapper per l'immagine e il pulsante play */
.image-and-play-button-wrapper {
    position: relative; 
    display: inline-block; 
    max-width: 300px; 
    max-height: 250px; 
    line-height: 0; 
}

.game-placeholder-image { 
    display: block;
    max-width: 100%; 
    max-height: 100%;
    width: auto;   
    height: auto;  
    object-fit: contain; 
}

.play-demo-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    z-index: 10;
    width: 60px; 
    height: 60px; 
}

.play-demo-button:hover .play-demo-button-icon {
    opacity: 0.8;
}

.play-demo-button-icon {
    display: block;
    width: 100%;
    height: 100%;
}

.game-demo-iframe-container {
    width: 100%;
    aspect-ratio: 16 / 9; /* MANTIENI: Anche il contenitore dell'iframe deve avere lo stesso aspect-ratio. */
                          /* Se l'altezza dell'iframe è fissa (es. 500px nel JS), 
                             allora imposta qui: height: 500px; e rimuovi aspect-ratio. */
    line-height: 0; 
}

.game-demo-iframe-container iframe {
    display: block;
    width: 100%;
    height: 100%; /* L'iframe riempie il suo contenitore che ha l'aspect-ratio corretto */
}

/* Nuova barra sotto l'iframe */
.game-demo-toolbar {
    display: flex; /* Aggiunto per allineare i pulsanti e gestire lo spazio */
    justify-content: center; /* Centra i pulsanti */
    align-items: center; /* Allinea verticalmente i pulsanti se hanno altezze diverse */
    padding: 10px 0; /* Aggiunto padding sopra/sotto la toolbar */
    gap: 10px; /* Spazio tra i pulsanti */
    background-color: #016501; /* Aggiunto: Sfondo nero per la toolbar */
}

.game-demo-toolbar-button {
    display: inline-flex; /* Per allineare icona e testo */
    align-items: center;
    justify-content: center; /* Centra contenuto (icona e testo) nel pulsante */
    gap: 5px; /* Spazio tra icona e testo */
    padding: 8px 12px;
    border: 1px solid #ccc;
    background-color: #f0f0f0;
    color: #333;
    text-decoration: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px; /* Imposta una dimensione font esplicita per uniformità */
    line-height: 1.2; /* Aggiusta line-height per coerenza */
    /* Assicurati che non ci siano stili specifici per .report-button che sovrascrivono questi */
}

.game-demo-toolbar-button:hover {
    background-color: #e0e0e0;
}

.game-demo-toolbar-button svg {
    width: 20px; /* Assicura che le SVG abbiano la stessa larghezza */
    height: 20px; /* Assicura che le SVG abbiano la stessa altezza */
    /* Eventuali stili specifici per le SVG se necessario */
}

/* .game-demo-toolbar-button .button-text { // Per nascondere il testo se vuoi solo icone
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute !important;
    width: 1px;
    word-wrap: normal !important;
} */

/* Stili per mobile per la toolbar della demo */
@media (max-width: 600px) { /* Puoi aggiustare questo breakpoint se necessario */
    .game-demo-toolbar {
        gap: 5px; /* Riduci lo spazio tra i pulsanti */
        padding: 8px 5px; /* Riduci il padding laterale della toolbar stessa */
    }

    .game-demo-toolbar-button {
        padding: 6px 8px; /* Riduci il padding interno dei pulsanti */
        font-size: 12px; /* Riduci la dimensione del font */
        gap: 3px; /* Riduci lo spazio tra icona e testo */
    }

    .game-demo-toolbar-button svg {
        width: 16px; /* Riduci leggermente la dimensione dell'icona */
        height: 16px; /* Riduci leggermente la dimensione dell'icona */
    }
}

.game-demo-error {
    color: red;
    text-align: center;
    padding: 20px;
}

.elemento-con-sfondo-chiaro {
    background-color: #FFFFFF; /* o var(--background-color-light) */
    color: var(--text-color); /* Testo scuro per questo elemento */
}

/*--------------------------------------------------------------
# Related Games Section
--------------------------------------------------------------*/
.related-games-section {
    margin-top: 40px; /* Spazio sopra la sezione dei giochi correlati */
    margin-bottom: 30px;
    padding: 20px;
    background-color: rgba(0,0,0, 0.1); /* Sfondo leggermente diverso per staccare, opzionale */
    border-radius: 5px;
}

.related-games-title {
    text-align: center;
    font-size: 1.8rem; /* Dimensione del titolo della sezione */
    color: var(--text-color-light); /* Colore del testo chiaro */
    margin-top: 0;
    margin-bottom: 25px;
}

.related-games-grid {
    display: grid;
    /* Mobile: 2 colonne per impostazione predefinita */
    grid-template-columns: repeat(2, 1fr);
    gap: 20px; /* Spazio tra gli elementi della griglia */
}

/* Stili per i singoli elementi dei giochi correlati (rimangono invariati) */
.related-game-item {
    background-color: rgba(255, 255, 255, 0.05); /* Sfondo per ogni item, leggermente trasparente */
    border: 1px solid var(--primary-color); /* Bordo per ogni item */
    border-radius: 5px;
    overflow: hidden; /* Per contenere l'immagine e gli angoli arrotondati */
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.related-game-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}

.related-game-link {
    display: block;
    text-decoration: none;
    color: inherit; /* Eredita il colore del testo dal genitore */
}

.related-game-image {
    width: 100%;
    aspect-ratio: 4 / 3; /* O un altro aspect ratio che preferisci per le immagini */
    overflow: hidden;
    background-color: #000000; /* Sfondo nero per l'area immagine se l'immagine non copre */
}

.related-game-image img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Assicura che l'immagine copra l'area mantenendo l'aspect ratio */
    display: block;
}

.related-game-image.placeholder-image img {
    object-fit: contain; /* Per il placeholder, meglio 'contain' se ha dimensioni fisse */
    padding: 10px; /* Un po' di padding per il placeholder */
}

.related-game-title-text {
    font-size: 1.1rem; /* Dimensione del titolo del gioco correlato */
    color: var(--text-color-light);
    margin: 0;
    padding: 10px 15px;
    text-align: center;
    background-color: rgba(0,0,0, 0.2); /* Sfondo leggermente scuro per l'area del titolo */
}

/* Media query per schermi più grandi (desktop) */
@media (min-width: 768px) { /* Puoi aggiustare 768px se necessario */
    .related-games-grid {
        /* Desktop: 4 colonne */
        grid-template-columns: repeat(4, 1fr);
    }
}

/*--------------------------------------------------------------
# Sezione Personalizzata a Due Colonne Sotto Tabella
--------------------------------------------------------------*/
.custom-two-column-section {
    background-color: #ffffff; /* Sfondo bianco per l'intera sezione */
    color: #000000;            /* Colore testo predefinito nero */
    padding: 30px 20px;        /* Padding interno (verticale, orizzontale) */
    margin-top: 40px;          /* Spazio dalla tabella di comparazione sovrastante */
    border-radius: 5px;        /* Angoli leggermente arrotondati (opzionale) */
    box-shadow: 0 2px 10px rgba(0,0,0,0.05); /* Ombra leggera (opzionale) */
}

/* Stili per quando usi il blocco Colonne di Gutenberg all'interno della sezione */
.custom-two-column-section .wp-block-columns {
    gap: 30px; /* Spazio tra le due colonne */
}

/* Targeting specifico per i titoli all'interno della sezione */
.custom-two-column-section h1,
.custom-two-column-section h2,
.custom-two-column-section h3 {
    color: var(--background-color-dark); /* Viola scuro (dalle tue variabili CSS) */
    /* Puoi aggiungere altri stili specifici per i titoli qui, es. font-family, margin-bottom */
}
.custom-two-column-section h1 {
    font-size: 2.2rem; /* Esempio dimensione H1 */
    margin-bottom: 0.8em;
}
.custom-two-column-section h2 {
    font-size: 1.8rem; /* Esempio dimensione H2 */
    margin-bottom: 0.7em;
}
.custom-two-column-section h3 {
    font-size: 1.5rem; /* Esempio dimensione H3 */
    margin-bottom: 0.6em;
}

/* Assicura che il testo dei paragrafi sia nero */
.custom-two-column-section p {
    color: #000000;
    line-height: 1.7; /* Interlinea per una migliore leggibilità */
}

.custom-two-column-section a {
    color: var(--primary-color); /* Link viola primario (dalle tue variabili) */
}
.custom-two-column-section a:hover {
    color: var(--secondary-color); /* Link viola secondario su hover */
}

/* Se vuoi forzare la larghezza delle colonne tramite CSS, anche se Gutenberg lo permette.
   Questo è più un fallback o per sovrascrivere.
   Di solito imposti la larghezza direttamente nel blocco Colonne di Gutenberg.
.custom-two-column-section .wp-block-column:first-child {
    flex-basis: 70% !important;
}
.custom-two-column-section .wp-block-column:last-child {
    flex-basis: 30% !important;
}
*/