/*
 Theme Name:  Divi Child Theme
 Theme URI:    https://divilife.com
 Description:  Child Theme for Divi
 Author:       Tim Strifler
 Author URI:   https://divilife.com
 Template:     Divi
 Version:      1.0.0
*/
/* ==========================================================================
   CSS NEWS + FILTRO
   Child Theme Divi
   ========================================================================== */


/*xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/
/***** GRIGLIA NEWS *****/
.my-news-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2 colonne desktop */
    gap: 28px;
    width: 100%;
    box-sizing: border-box;
    padding-right: 10px;
}

@media (max-width: 768px) {
    .my-news-grid {
        grid-template-columns: 1fr; /* 1 colonna su mobile */
    }
}
/* ----- CARD NEWS ----- */
.news-item {
    background: #ffffff;
    border: 1px solid #D8D8D8;
    border-radius: 5px;
    padding: 18px 10px 18px 0px !important; /*  padding */
    box-shadow: 0px 2px 6px rgba(0,0,0,0.15);
    transition: transform .15s ease;
    display: flex;
    flex-direction: column;
}

.news-item:hover {
    transform: translateY(-2px);
}

/* ----- HEADER ----- */
.news-header {
    display: flex;
    align-items: flex-start;
    margin-bottom: 12px;
}

.news-square {
    width: 25px;
    height: 25px;
    background: #F26B0F;
    margin-right: 10px; /* spazio tra quadrato e tipologia */
}

.news-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

/* Singolo tag */
.tag-item {
    font-size: 0.75rem;
    font-weight: 700;
    color: #000;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ----- META + TITOLO ----- */
/* Aggiustamento per allineare a tipologia news */
.news-meta, .news-title {
    margin-left: 35px; /* deve corrispondere alla distanza dal bordo del quadrato al primo tag */
}

/* Data */
.news-date {
    font-size: 0.75rem;
    color: #757575 !Important;
    margin: 0 0 5px 0;
}

/* Titolo */
.news-title {
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.3;
    padding-top: 5px !Important;
    margin-left: 35px !Important;
    margin-top: 0px !Important;
    padding-right: 10px !Important;
}

.news-title a {
    color: #0E71C3;
    text-decoration: none;
}

.news-title a:hover {
    text-decoration: underline;
}

/* THUMBNAIL */
.news-thumb img {
    width: 100%;
    height: auto;
    display: block;
    margin-bottom: 12px;
}


/*xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/





/* FILTRO NEWS LISTA ARCHIVIO PAGINA___________________________________________________________________________________  */


/* Piccole ottimizzazioni per il form filtro */
#news-filter-form label { font-size: 0.95rem; display:block; margin-bottom:8px; }
#news-filter-form input[type="date"], #news-filter-form select { width:100%; padding:6px; margin-top:4px; box-sizing:border-box; }
#news-filter-form button { padding:8px 12px; }


/* Testo dei label del form in bianco */
#news-filter-form label {
    color: #fff;
}

/* Ripristino stile originale dei campi input/select */
#news-filter-form select,
#news-filter-form input[type="date"] {
    color: #000;               /* testo nero */
    background: #fff;          /* sfondo bianco */
    border: 1px solid #ccc;    /* bordo standard */
}

/* Pulsante FILTRA */
#news-filter-form button[type="submit"] {
    background: transparent;
    color: #fff;
    border: 1px solid #fff;
    border-radius: 5px;
    padding: 6px 15px;
    cursor: pointer;
}

/* Spazio tra Filtra e Reset */
#news-filter-form button[type="submit"] {
    margin-right: 20px;
}

/* Link RESET in bianco */
#news-filter-form a {
    color: #fff;
}

/*xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
FILTRO DELLE CIRCOLARI
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/

/* ===============================
   FILTRO CIRCOLARI
   =============================== */

/* Piccole ottimizzazioni per il form filtro */
#circolari-filter-form label { 
    font-size: 0.95rem; 
    display: block; 
    margin-bottom: 8px; 
}
#circolari-filter-form input[type="date"], 
#circolari-filter-form select { 
    width: 100%; 
    padding: 6px; 
    margin-top: 4px; 
    box-sizing: border-box; 
}
#circolari-filter-form button { 
    padding: 8px 12px; 
}

/* Testo dei label del form in bianco */
#circolari-filter-form label {
    color: #fff;
}

/* Ripristino stile originale dei campi input/select */
#circolari-filter-form select,
#circolari-filter-form input[type="date"] {
    color: #000;               /* testo nero */
    background: #fff;          /* sfondo bianco */
    border: 1px solid #ccc;    /* bordo standard */
}

/* Pulsante FILTRA */
#circolari-filter-form button[type="submit"] {
    background: transparent;
    color: #fff;
    border: 1px solid #fff;
    border-radius: 5px;
    padding: 6px 15px;
    cursor: pointer;
}

/* Spazio tra Filtra e Reset */
#circolari-filter-form button[type="submit"] {
    margin-right: 20px;
}

/* Link RESET in bianco */
#circolari-filter-form a {
    color: #fff;
}


/*xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
CARD CIRCOLARI QUADRATO AZZURRO
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/

/* ----- CARD CIRCOLARI -----

.circolari-module .news-square.circolare-square {
    background-color: #0177ad;
   padding: 18px 0px !Important;  vertical padding */






/*xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
CARD CIRCOLARI QUADRATO AZZURRO in homepage
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/



/* CIRCOLARI IN HOME – quadrato blu 
.home .news-square.circolare-square {
    background-color: #0177ad;
    padding: 18px 10px 18px 0px !important; /* top right bottom left */







/*xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
FILTRO MISURE PNRR
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/

/* Piccole ottimizzazioni per il form filtro */
#pnrr-filter-form label { 
    font-size: 0.95rem; 
    display: block; 
    margin-bottom: 8px; 
}

/* Select */
#pnrr-filter-form select { 
    width: 100%; 
    padding: 6px; 
    margin-top: 4px; 
    box-sizing: border-box; 
}

/* Testo dei label in bianco */
#pnrr-filter-form label {
    color: #fff;
}

/* Ripristino stile originale dei select */
#pnrr-filter-form select {
    color: #000;               /* testo nero */
    background: #fff;          /* sfondo bianco */
    border: 1px solid #ccc;    /* bordo standard */
}

/* Pulsante FILTRA */
#pnrr-filter-form button[type="submit"] {
    background: transparent;
    color: #fff;
    border: 1px solid #fff;
    border-radius: 5px;
    padding: 6px 15px;
    cursor: pointer;
}

/* Spazio tra Filtra e Reset */
#pnrr-filter-form button[type="submit"] {
    margin-right: 20px;
}

/* Link RESET in bianco */
#pnrr-filter-form a {
    color: #fff;
}

/* Hover accessibilità */
#pnrr-filter-form button[type="submit"]:hover,
#pnrr-filter-form a:hover {
    opacity: 0.8;
}



/* ===============================
   CAMPO RICERCA CODICE MISURA – PNRR
   =============================== */

/* CAMPO RICERCA CODICE MISURA – PNRR */


#news-filter-form p {
    width: 100%;
}

#news-filter-form input,
#news-filter-form select {
    width: 100%;
    padding-top: 8px;
    padding-bottom: 8px;
    box-sizing: border-box;
}


/* ===============================
   NEWS FAQ / WEBINAR – GRIGLIA 2 COLONNE
   =============================== */

/* Desktop */
@media (min-width: 981px) {
    .news-faq .my-news-grid,
    .news-webinar .my-news-grid {
        grid-template-columns: 1fr 1fr;
    }
}



/*-----------------------------------------
Immagini approfondimenti tematici
SCHEDA MISURE
-----------------------------------------*/

/* ===============================
   PNRR – Immagini Approfondimenti Tematici
   max 2 immagini per riga su desktop
   =============================== */

.pnrr-img-wrapper {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* max 2 immagini per riga */
    gap: 24px; /* spazio tra immagini */
    width: 100%;
    box-sizing: border-box;
}

/* Contenitore singola immagine */
.pnrr-img {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Immagini quadrate */
.pnrr-img img {
    width: 100%;
    max-width: 700px;
    aspect-ratio: 1 / 1;  /* forza quadrato */
    object-fit: cover;    /* ritaglio corretto */
    display: block;
    border-radius: 6px;   /* opzionale */
}

/* ===============================
   Responsive
   =============================== */

/* Tablet */
@media (max-width: 980px) {
    .pnrr-img-wrapper {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
}

/* Mobile */
@media (max-width: 767px) {
    .pnrr-img-wrapper {
        grid-template-columns: 1fr; /* 1 immagine per riga su mobile */
        gap: 16px;
    }
}



/* ===============================
   aggiunta font titillium web
   =============================== */
   
   /* ===============================
   Titillium Web - tutti i pesi e stili
   =============================== */
@font-face {
  font-family: 'Titillium Web';
  src: url('fonts/TitilliumWeb-ExtraLight.ttf') format('truetype');
  font-weight: 200;
  font-style: normal;
}
@font-face {
  font-family: 'Titillium Web';
  src: url('fonts/TitilliumWeb-ExtraLightItalic.ttf') format('truetype');
  font-weight: 200;
  font-style: italic;
}
@font-face {
  font-family: 'Titillium Web';
  src: url('fonts/TitilliumWeb-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
}
@font-face {
  font-family: 'Titillium Web';
  src: url('fonts/TitilliumWeb-LightItalic.ttf') format('truetype');
  font-weight: 300;
  font-style: italic;
}
@font-face {
  font-family: 'Titillium Web';
  src: url('fonts/TitilliumWeb-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: 'Titillium Web';
  src: url('fonts/TitilliumWeb-Italic.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
}
@font-face {
  font-family: 'Titillium Web';
  src: url('fonts/TitilliumWeb-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
}
@font-face {
  font-family: 'Titillium Web';
  src: url('fonts/TitilliumWeb-SemiBoldItalic.ttf') format('truetype');
  font-weight: 600;
  font-style: italic;
}
@font-face {
  font-family: 'Titillium Web';
  src: url('fonts/TitilliumWeb-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: 'Titillium Web';
  src: url('fonts/TitilliumWeb-BoldItalic.ttf') format('truetype');
  font-weight: 700;
  font-style: italic;
}
@font-face {
  font-family: 'Titillium Web';
  src: url('fonts/TitilliumWeb-Black.ttf') format('truetype');
  font-weight: 900;
  font-style: normal;
}

/* ===============================
   Applicazione globale del font
   =============================== */
body, h1, h2, h3, h4, h5, h6, p, span, a, li, div, section, .et_pb_text {
  font-family: 'Titillium Web', sans-serif !important;
}