/* ============================
   FOOTER – LOGHI
============================ */
/* 
.logo-box {
    background: #ffffff;
   
	
    min-height: 140px; 
    height: 140px;     

    padding: 1.5rem 1rem;
    border-radius: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}



.logo-box img {
    max-height: 65px;
    width: auto;
}

.logo-box h2,
.logo-box h6,
.logo-box p,
.logo-box span {
    color: #000 !important;
}
 */

/* ============================
   HEADER – LOGHI
============================ */

.brand-logo {
    height: 70px;
    width: auto;
}

.brand-logo-secondary {
    height: 65px;
    width: auto;
}


/* ============================
   HEADER – TESTI BRAND
============================ */

.it-brand-title {
    font-size: 1.4rem;
    font-weight: 600;
    color: #fff;
}

.it-brand-tagline {
    font-size: 0.9rem;
    color: #fff;
    opacity: 0.85;
}

/* Rimuove sottolineatura dal brand */
.it-brand-wrapper a,
.it-brand-wrapper a:hover,
.it-brand-wrapper a:focus {
    text-decoration: none !important;
}

/* ============================
   FOOTER DARK – STILE GENERALE
============================ */

.it-footer {
    background-color: #003274 !important; /* blu scuro come header */
    color: #ffffff !important;
    border-top: 4px solid #003882; /* richiamo al blu istituzionale */
}

/* Testi generali */
.it-footer a {
    color: #ffffff !important;
    text-decoration: none;
}

.it-footer a:hover {
    text-decoration: underline;
    color: #b3d4ff !important; /* blu chiaro elegante */
}

/* Titoli delle colonne */
.footer-heading-title {
    color: #ffffff !important;
    font-weight: 600;
    margin-bottom: 0.75rem;
}

/* Liste */
.footer-list li {
    margin-bottom: 0.35rem;
}

.footer-list a {
    color: #e6e6e6 !important;
}

.footer-list a:hover {
    color: #ffffff !important;
}

/* ============================
   LOGHI – SU SFONDO BIANCO
============================ */

.logo-box {
    /*background: #ffffff !important;*/ /* sfondo bianco per i loghi */
    background: #202a2e !important; /* sfondo bianco per i loghi */
    border-radius: 0px; /* leggero arrotondamento elegante */
    padding: 1.5rem 1rem;
    height: 140px;
    min-height: 140px; /* altezza uniforme */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* I loghi NON vengono invertiti */
.logo-box img {
    max-height: 65px;
    width: auto;
    filter: none !important;
}

/* Testo sotto il logo ZPS */
.logo-box h2,
.logo-box h6,
.logo-box p,
.logo-box span {
    color: #fff !important; /* bianco coerente con header */
}

/* ============================
   SOCIAL ICONS
============================ */

.social svg.icon {
    fill: #ffffff !important;
    transition: 0.2s ease;
}

.social a:hover svg.icon {
    fill: #b3d4ff !important;
}

/* ============================
   FOOTER BOTTOM
============================ */

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.25);
    padding-top: 1rem;
    margin-top: 1rem;
    display: flex;
    gap: 1.5rem;
}

.footer-bottom a {
    color: #e6e6e6 !important;
}

.footer-bottom a:hover {
    color: #ffffff !important;
}


/* ============================
   CARD HOME CON CITAZIONE
============================ */

.quote-card {
    border-left: 4px solid #003882;
    background: #ffffff;
    border-radius: 8px;
    padding: 2rem 2.5rem;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.08);
}


.quote-card h4 {
    font-style: italic;
    line-height: 1.6;
}
.quote-card h4 {
    font-family: "Lora", serif;
    font-weight: 400;
    font-size: 1.35rem;
    line-height: 1.7;
    color: #333;
}
.quote-card::before {
    content: "“";
    font-family: "Lora", serif;
    font-size: 4rem;
    line-height: 0;
    color: #003882;
    opacity: 0.15;
    position: absolute;
    top: -10px;
    left: 10px;
}
/* ============================
   HERO
============================ */
/* HERO – Box testo elegante */
.it-hero-text-wrapper {
    background: rgba(0, 0, 0, 0.45) !important; /* semi-trasparente */
    padding: 2rem 2.5rem !important;
    border-radius: 8px;
    backdrop-filter: blur(4px); /* effetto vetro leggero */
}
/* HERO – Tipografia elegante */
.it-hero-text-wrapper h2 {
    font-family: "Lora", serif;
    font-weight: 500;
    font-size: 2.4rem;
    line-height: 1.3;
}

.it-hero-text-wrapper p {
    font-size: 1.1rem;
    line-height: 1.6;
    color: #f2f2f2;
}
/* HERO – Overlay più leggero */
.it-hero-wrapper.it-dark.it-overlay::before {
    background: rgba(0, 0, 0, 0.35) !important;
}
/* HERO – Altezza più equilibrata su mobile */
@media (max-width: 576px) {
    .it-hero-wrapper {
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
    }

    .it-hero-text-wrapper {
        padding: 1.5rem !important;
    }
}
/* ============================
   CARD GOVERNANCE E GESTIONE
============================ */

/* CARD – Altezza uniforme */
.card-teaser {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
/* CARD – Immagini uniformi */
.card-image img {
    width: 100%;
    height: 140px;
    object-fit: contain; /* mantiene proporzioni */
    padding: 0.5rem;
}
/* CARD – Stile elegante */
.card-teaser {
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06) !important;
    border-radius: 8px !important;
}
/* CARD – Tipografia elegante */
.card-teaser .card-title {
    font-family: "Lora", serif;
    font-size: 1.25rem;
    font-weight: 500;
    color: #003274;
}

.card-teaser p {
    font-size: 0.95rem;
    color: #555;
}
/* CARD – Link elegante */
.card-teaser .read-more .text {
    font-weight: 500;
    color: #003882;
}

.card-teaser .read-more:hover .text {
    text-decoration: underline;
}



/* CARD – Effetto hover elegante e accessibile */
.card-teaser {
    transition: box-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
}

.card-teaser:hover,
.card-teaser:focus-within {
    border-color: #003882 !important; /* blu istituzionale */
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12) !important;
    transform: translateY(-3px); /* sollevamento leggero */
	
	/*-----------------
	link vai alla pagina
	------------------*/
}
/* CARD – Link elegante e accessibile */
.card-teaser .read-more .text {
    color: #003882;
    font-weight: 600;
    transition: color 0.2s ease;
}
.card-teaser:hover .read-more .text,
.card-teaser:focus-within .read-more .text {
    color: #001f4d; /* più scuro, più contrasto */
    text-decoration: underline;
}
/*focus keyboard visibile*/

.card-teaser:focus-within {
    outline: 3px solid #003882;
    outline-offset: 3px;
}
/* */



/* TITOLO SEZIONE – Stile istituzionale */
.section-title {
    font-family: "Lora", serif;
    font-size: 2.2rem;
    font-weight: 500;
    color: #003274; /* blu istituzionale */
    margin-bottom: 1.5rem;
    position: relative;
    padding-bottom: 0.5rem;
}
.section-title::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 60px;
    height: 3px;
    background-color: #003882; /* blu istituzionale più chiaro */
    border-radius: 2px;
}
.row-title {
    margin-bottom: 2rem;
}

/*----------------
Trasformano ogni card “Governance e Gestione” in un unico grande link cliccabile,
----------------*/
/* CARD – Overlay cliccabile accessibile */
.card-link-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    text-indent: -9999px;
    overflow: hidden;
}
/*
Si assicura che gli elementi interni restino cliccabili
*/
.card-teaser .read-more,
.card-teaser .read-more * {
    position: relative;
    z-index: 2;
}
/* focus keyboard accessibile*/

.card-teaser:focus-within {
    outline: 3px solid #003882;
    outline-offset: 4px;
}
/*----------------
		FINE -->Trasformano ogni card “Governance e Gestione” in un unico grande link cliccabile,
----------------*/

/*----------------
		SEZIONE VOCI DALL'ALTIPIANO
----------------*/

.evidence-section {
   /* background-image: url("../images/evidenza-header.png"); */
   background-image: url("../images/canvas2.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-top: 1px solid rgba(0,0,0,0.06);
    border-bottom: 1px solid rgba(0,0,0,0.06);
}
/* CARD – Stile istituzionale */
.evidence-section .card-wrapper {
    border: 1px solid rgba(0,0,0,0.08) !important;
    border-radius: 10px !important;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08) !important;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    background: #fff;
}
/*  Uniformiamo le card (come quelle di “Governance e Gestione”)*/
/* Hover elegante */
.evidence-section .card-wrapper:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.12) !important;
}
/*  Uniformiamo le IMMAGINI*/

.evidence-section .img-responsive-wrapper img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    border-radius: 8px 8px 0 0;
}

.evidence-section .card-title {
  /*  font-family: "Lora", serif;*/
    font-size: 1.3rem;
    font-weight: 500;
    /*color: #003274;*/
    color: #009e82;
    margin-bottom: 0.75rem;
}
/*UNIFORMIAMO STILE TIPOGRAFICO */
.evidence-section .card-text {
    font-size: 1rem;
    line-height: 1.6;
    color: #444;
}

/* Disattiva hover sulle card della sezione evidence */
.evidence-section .card-wrapper:hover {
    transform: none !important;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08) !important;
}

/* Effetto immagine elegante */
.evidence-section .img-responsive-wrapper img {
    transition: transform 0.35s ease, opacity 0.35s ease;
    transform-origin: center;
}

/* Hover: solo immagine */
/* effetto 1 */
/*
.evidence-section .card-wrapper:hover .img-responsive-wrapper img {
    transform: scale(1.05);
    opacity: 0.92;
}
*/
/* effetto 2 */

.evidence-section .card-wrapper:hover .img-responsive-wrapper img {
    transform: scale(1.08) translateY(-3px);
    opacity: 0.9;
}

/* effetto 3 */
/*
.evidence-section .img-responsive-wrapper {
    position: relative;
    overflow: hidden;
}

.evidence-section .img-responsive-wrapper::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.15);
    opacity: 0;
    transition: opacity 0.35s ease;
}

.evidence-section .card-wrapper:hover .img-responsive-wrapper::after {
    opacity: 1;
}
*/
/*//////////////////         CAROUSEL         ///////////////////*/
/* Titolo istituzionale */
/* .section-title {
    font-family: "Lora", serif;
    font-size: 2.2rem;
    font-weight: 500;
    color: #003274;
    margin-bottom: 1.5rem;
    position: relative;
    padding-bottom: 0.5rem;
}
 */
/* .section-title::after {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0;
    width: 60px;
    height: 3px;
    background-color: #003882;
    border-radius: 2px;
} */

/* Carousel spacing */
/* .territorio-carousel .splide__slide {
    padding: 0.75rem;
}
 */
/* Card statiche */
/* .territorio-carousel .card {
    transition: none !important;
}
 */
/* Effetto SOLO sulle immagini */
/* .territorio-carousel .img-responsive-wrapper img {
    transition: transform 0.35s ease, opacity 0.35s ease;
    transform-origin: center;
} */
/* 
.territorio-carousel .card:hover .img-responsive-wrapper img {
    transform: scale(1.05);
    opacity: 0.92;
}

 */

/*------   CSS PER ALTEZZA FISSA E CARD (siti rematici nome) UNIFORMATE      -----*/

/* Altezza uniforme per tutte le card del carousel */
.external-card {
    height: 260px; /* puoi aumentare a 280 o 300 se serve */
    display: flex;
    flex-direction: row;
    align-items: flex-start;
}

/* Avatar sempre della stessa dimensione */
.external-card .avatar img {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 8px;
}

/* Testo che si adatta allo spazio */
.external-card .card-body {
    flex-grow: 1;
    overflow: hidden;
}

/* Evita che il testo faccia saltare l’altezza */
.external-card .card-text {
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Rende l'outline visibile senza uscire dalla slide */
.external-card:focus-visible {
    outline: 3px solid #ffffff;
    outline-offset: -8px; /* rientra l'outline dentro la card */
    border-radius: 8px;
}



/* Evita che la slide tagli l'outline */
.it-carousel-wrapper .splide__slide {
    overflow: visible !important;
	
	
}




}