/*

============================================================

   riassunto sezioni 

============================================================ 

	 PALETTE MINIMALheader

1. RESET & BASE

2. TIPOGRAFIA

3. LAYOUT GENERALE

4. FORM ELEMENTS

5. HEADER

6. NAVBAR + DROPDOWN

7. HERO SECTION

8. NEWS CARDS

9. SIDEBAR + CARD FABI

10. IFRAME SECTION

11. FOOTER

12. RESPONSIVE (tutte le media query raccolte)



/* ============================================================

   PALETTE MINIMAL 

   ============================================================ */



:root {

    --blu-notte: #0B2545;

    --blu-tenue: #3A6EA5;

    --blu-hover: #2F5985;

	--fabi:#36A5DC;

    --azzurro-chiaro: #7FB3D5;

    --azzurro-soft: #DCE6F2;

    --grigio-freddo: #A7B1C2;

    --sfondo-pagina: #F5F7FA;

    --testo: #1A1A1A;

    --testo-secondario: #7A7A7A;

    --bianco: #FFFFFF;

}



   ============================================================

   1. RESET & BASE

   ============================================================ */

   

   /* Mostra solo versione desktop */

#layout-desktop { display: block; }

#layout-mobile { display: none; }



/* Quando lo schermo è piccolo (smartphone) */

@media (max-width: 768px) {

  #layout-desktop { display: none; }

  #layout-mobile { display: block; }

}



.cellulare {

  width: 25px;

  cursor: pointer;

  display: flex;

  flex-direction: column;

  gap: 6px;

}



.cellulare span {

  height: 3px;

  background: #1e293b;

  border-radius: 3px;

  display: block;

}



/* Sidebar */

#mobile-sidebar {

  position: fixed;

  top: 0;

  left: -260px; /* nascosto */

  width: 260px;

  height: 100vh;

  background: var(--fabi);

  color: white;

  padding: 20px;

  transition: left 0.3s ease;

  z-index: 999;

  overflow-y: auto;

}



/* Sidebar aperta */

#mobile-sidebar.active {

  left: 0;

}



/* Bottone chiusura */

.close-btn {

  font-size: 32px;      

    font-weight: bold;    

   text-align: right;

  cursor: pointer;

  margin-bottom: 20px;

}



/* Menu mobile */

.mobile-menu ul {

  list-style: none;

  padding: 0;

  margin: 0;

}



.mobile-menu li {

  padding: 12px 0;

  border-bottom: 1px solid rgba(255,255,255,0.1);

}



.mobile-menu a {

  color: white;

  text-decoration: none;

  font-size: 18px;

}



/* Dropdown mobile */

.mobile-menu .dropdown-menu .dropdown-mobile{

  display: none;

  padding-left: 15px;

}





* {

      box-sizing: border-box;

}

.hidden-title {

    position: absolute;

    width: 1px;

    height: 1px;

    padding: 0;

    margin: -1px;

    overflow: hidden;

    clip: rect(0, 0, 0, 0);

    border: 0;

}



body {

    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

    font-size:  105%;

    line-height: 1.6;

    text-align: justify;

    color: #2d3436;

    background-color: #ffffff;

    -webkit-font-smoothing: antialiased;

    margin: 5px 30px;

}





a {

    color: #0984e3;

    text-decoration: underline;

    transition: color 0.3s ease;

}



a:hover {

    color: springgreen;

    text-decoration: none;

}



ul, ol {

    margin: 0;

	 margin-bottom: 0;

    padding-left: 1.5rem;

}



li {

	margin: 0;

	 margin-top: 0;

    margin-bottom: 0.5rem;

}



i.fas::before,

i.far::before {

    content: "" !important;

}

.action-btn .icon {

    width: 18px;

    height: 18px;

}



.action-btn.external i {

    width: 16px;

    height: 16px;

    display: inline-block;

    background: url('img/link.png') no-repeat center;

    background-size: contain;

}



.action-btn.preview i {

    width: 22px;

    height: 22px;

    display: inline-block;

    background: url('img/eye.png') no-repeat center;

    background-size: contain;

	cursor: pointer;

	  

}

.action-btn.preview {

    border: none;

    outline: none;

    background: transparent;

    padding: 0;

    box-shadow: none;

}

.action-btn.preview:focus,

.action-btn.preview:active {

    outline: none;

    box-shadow: none;

}

.icon-inline {

    width: 20px;

    height: 20px;

    vertical-align: middle;

    display: inline-block;

   

}





/* ============================================================

   2. TIPOGRAFIA

   ============================================================ */



h1, h2, h3 {

    color: #000;

    margin-bottom: 15;

    line-height: 1.2;

}



h1 { font-size: 160%; margin-top: 6%; }

h2 { font-size: 130%; margin-top: 4%; }



p {

    margin-bottom: 5%;

}



/* Titoli FABI */

.fabi-title-blue {

    color: #00568c;

    font-size: 180%;

    font-weight: 800;

    margin-bottom: 15px;

    text-transform: uppercase;

}



.fabi-title-dark {

    color: #333;

    font-size: 200%;

    font-weight: 800;

    margin-bottom: 15px;

    text-transform: uppercase;

}



.fabi-subtitle {

    color: #333;

    font-size: 180%;

    font-weight: 700;

    margin-top: 30px;

    margin-bottom: 15px;

}

/* Il contenitore che racchiude lente + input + bottone */

.search-container {

    display: flex;

    align-items: center;

    position: relative; 

	z-index: 100;

}



/* La lente (icona) */

.search-icon {

	background-color:var(--fabi);

	padding:5px;

    cursor: pointer;

    z-index: 101;

}



/* La barra che contiene input e tasto 'cerca' */

.search-bar {

    display: none; /* Diventa flex tramite JS quando attiva */

    position: absolute;

    left: 45px;

    top: 50%;

    transform: translateY(-50%);

    

    /* --- IL FIX --- */

    background: white;

    padding: 5px 5px 5px 10px; /* Spazio interno per contenere tutto */

    border: 1px solid #ddd;

    border-radius: 8px;

    box-shadow: 0 4px 12px rgba(0,0,0,0.15);

    z-index: 1000;

    

    /* Forza gli elementi a stare sulla stessa riga e adatta la larghezza al contenuto */

    flex-direction: row; 

    align-items: center;

    width: auto;      /* IMPORTANTE: permette al rettangolo di allargarsi */

    min-width: 300px; /* Opzionale */

}



.search-bar.active {

    display: flex !important; /* Forza l'attivazione del layout flex */

}

/* Intestazione della tendina */

.search-header {

    position: sticky;

    top: 0;

    background: #f8f9fa;

    padding: 10px 15px;

    border-bottom: 1px solid #ddd;

    display: flex;

    justify-content: space-between;

    align-items: center;

    z-index: 100; 

}



/* Intestazione della tendina dei risultati */

.search-results-header {

    position: sticky; /* Lo tiene bloccato in alto */

    top: 0;

    background-color: #ffffff;

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 10px 15px;

    border-bottom: 2px solid #00acee; /* Una linea azzurra per separarlo */

    z-index: 1000;

}



/* Tasto chiudi rosso e chiaro */

.btn-close-search {

    color: #ff0000 !important;

    cursor: pointer;

    font-weight: bold;

    font-size: 100%;

    padding: 5px 10px;

}



.btn-close-search:hover {

    background-color: #fff0f0;

    border-radius: 4px;

}

/* Il contenitore dei risultati deve restare sotto tutto */

#search-results {

    display: none;

    position: absolute;

    top: 100%; /* Appare sotto la riga di ricerca */

	margin-top:20px;

    left: 40px; 

    width: 350px;

    background: white;

    border: 1px solid #ccc;

    z-index: 9999;

    max-height: 400px;

    overflow-y: auto;

    box-shadow: 0 4px 15px rgba(0,0,0,0.2);

}







/* ============================================================

   3. FORM ELEMENTS

   ============================================================ */



/* Input di testo, email, date, numeri, select */

input[type="text"],

input[type="email"],

input[type="month"],

input[type="date"],

input[type="number"],

select {

    appearance: none;

    height: 40px;

    padding: 8px 12px;

    background: #F7F7F7;

    border: 1px solid gray;

    border-radius: 3px;

    font-size: 120%;

    color: #000;

    font-family: inherit;

    display: inline-flex;

    align-items: center;

    transition: all 0.2s ease;

    box-sizing: border-box;

}



/* Textarea */

textarea {

    appearance: none;

    height: 150px;

    width: 30%;

    padding: 8px 12px;

    background-color: #fff;

    border: 1px solid gray;

    border-radius: 6px;

    font-size: 120%;

    color: #000;

    font-family: inherit;

    display: inline-flex;

    align-items: center;

    transition: all 0.2s ease;

    box-sizing: border-box;

}



/* Bottoni principali */

input[type=submit],

button[type=submit]{

    flex: 1 1 auto;

    color: #fff;

	background-color:#36A5DC;

    border: none;

    border-radius: 15px;

    padding: 10px 20px;

    font-size: 100%;

    cursor: pointer;

    transition: 0.2s;

}

button[type=button] {

    flex: 1 1 auto;

    color: white;

	background-color:var(--fabi);

    border: none;

    border-radius: 8px;

    padding: 10px 20px;

    font-size: 100%;

    cursor: pointer;

    transition: background 0.2s ease;

	font-weight: 500;



}

    

}



/* Stato disabilitato */

button[type=button]:disabled {

    background-color: #ccc;

    color: #666;

    cursor: not-allowed;

    opacity: 0.6;

}

/* ============================================================

   4. LAYOUT GENERALE

   ============================================================ */



/* Contenitore principale generico */

.container {

    width: 90%;

    max-width: 750px;

    margin: 5px auto;

    padding: 1rem 0;

}



/* Contenitore ampio */

.container-wide {

    max-width: 1200px;

    margin: 0 auto;

    padding: 0 20px;

}

.link-nazionale {

  background-color: #f1f5f9; /* Grigio azzurrato  */

  padding: 15px 0;

  border-bottom: 1px solid #e2e8f0;

}



.container-nazionale {

  max-width: 1200px;

  margin: 0 auto;

  display: flex;

  justify-content: space-between;

  align-items: center;

  padding: 0 20px;

}

@media (max-width: 768px) {

.container-nazionale {

	display: flex;

    flex-direction: column;

    align-items: flex-start;

    gap: 12px;

	margin-right:30px;

}

.testo-nazionale span {

    display: block;

    width: 100%; 

    line-height: 1.4;

}

}

.testo-nazionale {

  display: flex;

  align-items: center;

  gap: 15px;

  color: #334155;

  font-size: 105%;

}



/* Griglie generiche */

.grid {

    display: grid;

    gap: 20px;

}



/* Flex container generico */

.flex {

    display: flex;

    gap: 20px;

}



/* Sezioni con sfondo chiaro */

.section-light {

    background-color: #f8fafc;

    padding: 40px 20px;

}



/* Sezioni con sfondo bianco */

.section-white {

    background-color: #ffffff;

    padding: 40px 20px;

}



/* Spaziature verticali */

.spacer-sm { margin-top: 20px; }

.spacer-md { margin-top: 40px; }

.spacer-lg { margin-top: 60px; }



/* Tabelle */

table {

    border-collapse: collapse;

    width: 90%;

    margin: 20px auto;

}



table td {

    padding: 35px 5px !important;

    vertical-align: middle;

}





.prima-linea {

  display: flex;

  flex-wrap: wrap;

  margin: 0 15% 0 10%; 

  width: 100%;

  max-width: 2400px; 

  gap: 50px; 

  padding: 20px;

}



/* Colonna sinistra (Sidebar) */

.col-sx {

  flex: 0 0 27%; 

  border-right: 1px solid #eee;

  padding-right: 30px; 

  box-sizing: border-box;

}



/* Colonna destra (Card) */

.col-dx {

  flex: 1; 

  max-width: 48%; 

  box-sizing: border-box;

}



	.card-title {

		display: flex;

		flex-shrink: 0;

		align-items: center;

		position: sticky;

        top: -30px;

		background: white;

        z-index: 50;

		margin: 0;

        padding: 25px ;

		border-bottom: 1px solid #eee;

    }

	.card-title .btn-close{

		font-size:200%;

				}

		.btn-close {

    background: var(--fabi);

    cursor: pointer;

    font-weight: 600;

    padding: 8px 12px;

    display: inline-block;

	border: none;

	}



@media (max-width: 768px) {

    /* Il contenitore passa da riga a colonna */

    .prima-linea {

        flex-direction: column;

        margin: 0 !important;

        padding: 10px !important;

        gap: 20px;

    }



    /* Colonna sinistra (Sidebar) diventa riga intera */

    .col-sx {

        flex: 1 1 100% !important; /* Occupa il 100% della larghezza */

        max-width: 100% !important;

        border-right: none !important; /* Rimuove la linea verticale inutile su mobile */

        border-bottom: 1px solid #eee; /* Opzionale: aggiunge una linea di separazione orizzontale */

        padding-right: 0 !important;

        padding-bottom: 20px;

    }



    /* Colonna destra (Card) diventa riga intera */

    .col-dx {

        flex: 1 1 100% !important;

        max-width: 100% !important; /* Rimuove il limite del 48% che creava il vuoto a destra */

        padding: 0 !important;

    }



    /* Forza tutte le card interne a espandersi */

    .fabi-card, .news-card, .cardLeg, .cardfisc, .cardpadr {

       height: auto !important;  

        min-height: 120px;       

        display: flex;

        flex-direction: column;

        padding: 15px !important;

    }





	.news-content p, .news-content ol {

    margin-top: 10px;

}

.news-content {

        margin-top: 60px;  

    }



}

/* ============================================================

   5. HEADER

   ============================================================ */



/* Header principale */

.main-header {

    background-color: #f8fafc;

    color: #1e293b;

    padding: 20px 40px 20px;

    box-sizing: border-box;

	}



/* Griglia del header */

.mobile-header-row {

    display: grid;

    grid-template-columns: auto  auto;

    align-items: center;

    margin-bottom: 30px;

    justify-content: center;

}



/* Gruppi informativi nel header */

.header-group {

    display: flex;

    flex-direction: column;

   

}

.mobile-header-row img {

    width: 100px;

}

.header-label {

    color:  var(--fabi);

    font-size: 120%;

    text-transform: uppercase;

    font-weight: bold;

    letter-spacing: 0.5px;

}



.header-value {

    font-size: 115%;

    color: #1e293b;

}



/* Area logo */

.logo-area {

    display: flex;

    flex-direction: column;

    align-items: flex-start;

}



.logo-img {

    height: 70px;

    width: auto;

}



.logo-text {

    display: flex;

    flex-direction: column;

    gap: 2px;

}



.logo-title {

    font-size: 180%;

    font-weight: bold;

    color: #333;

    text-transform: uppercase;

    letter-spacing: 0.5px;

}



.logo-subtitle {

    font-size: 120%;

    color: #555;

    font-weight: 500;

}



.logo-address-badge {

    background-color: #f0f4f8;

    color: #fff;

    font-size: 170%;

    padding: 3px 10px;

    border-radius: 20px;

}



	@media (max-width: 768px) {

    

    .mobile-header-row {

        display: flex !important;

        flex-direction: row !important;  

        flex-wrap: nowrap !important;   

        align-items: center;           

        gap: 10px;                     

        width: 100%;

        padding: 10px;

    }



    

    .mobile-header-row img {

        width: 50px !important;

        height: auto;

        flex-shrink: 0;                 

    }



  

    .text-container-mobile {

        display: flex;

        flex-direction: column;         

        flex-grow: 1;

    }



    .header-label {

        font-size: 10px !important;      

        line-height: 1.1;

        display: block;

        font-weight: bold;

        color: var(--fabi);

    }



    .header-subtitle {

        font-size: 9px !important;

        color: #555;

        text-transform: none;          

    }

	.contatto-row {

    display: flex;

    align-items: center; /* Centra perfettamente icona e testo verticalmente */

    gap: 10px;           /* Spazio costante tra icona e testo */

    line-height: 1.5;    /* Imposta un'interlinea fissa e pulita */

    margin-bottom: 8px;  /* Spazio tra la riga Mail e la riga PEC */

}

}

		.header-group {

		width: auto; 

        display: flex;

        flex-direction: row;  

        align-items: right;

	}





    .search-container {

        width: 70%;

        margin-left: auto;

		margin-right: 0;

         display: flex;

		 justify-content: flex-end;

    }



    .search-container form {

        width:  auto;

        display: flex;

       justify-content: flex-end;

    }



    .search-container input {

        width: 80%;

    }

/* Navigazione principale */

.main-nav ul {

    display: flex;

    gap: 20px;

}



.main-nav a {

    text-decoration: none;

    color: #555;

    font-weight: 500;

    font-size: 170%;

    transition: color 0.3s ease;

}



.main-nav a:hover,

.main-nav a.active {

    color: #3498db;

}



.main-nav span {

    font-size: 100%;

    margin-left: 3px;

    opacity: 0.7;

}

/* ============================================================

   6. NAVBAR + DROPDOWN

   ============================================================ */



/* Barra di navigazione */

.navbar {

    position: relative;

    z-index: 10;

    padding: 20px 0;

    box-shadow: 0 4px 6px rgba(0,0,0,0.05);

}



/* Lista principale dei link */

.nav-links {

    list-style: none;

    display: flex;

    gap: 30px;

    margin: 0;

    padding: 10;

	background-color: var(--fabi);

	border-radius:10px;

}



.nav-links li {

    position: relative;

    padding-bottom: 5px;

	

}





.nav-links a {

    text-decoration: none;

    color: #ffffff;

	

    font-weight: 500;

    font-size: 110%;

    display: flex;

    align-items: center;

    transition: color 0.3s ease;

}



/* Effetto linea sotto */

.nav-links li:hover,

.nav-links li.active {

    border-bottom: 3px solid #00aaff;

}



/* Freccia del dropdown */

.arrow {

    border: solid #ffffff;

    border-width: 0 2px 2px 0;

    display: inline-block;

    padding: 3px;

	 margin-left: 10px;

    transform: rotate(45deg);

    transition: transform 0.3s;

}



/* Rotazione freccia quando il menu è aperto */

.dropdown:hover .arrow {

    transform: rotate(-135deg);

    margin-top: 4px;

}



/* Sottomenu */

.dropdown-menu {

    display: none;

    position: absolute;

    background-color: var(--fabi);

	color: #ffffff;

    min-width: 280px;

    max-height: 300px;

    overflow-y: auto;

    overflow-x: hidden;

    box-shadow: 0px 8px 16px rgba(0,0,0,0.1);

    border-top: 2px solid #00aaff;

    padding: 10px 0;

    margin-top: 5px;

    z-index: 1;

}



/* Ponte invisibile per evitare chiusure involontarie */

.dropdown-menu::before {

    content: "";

    position: absolute;

    top: -20px;

    left: 0;

    width: 100%;

    height: 20px;

}



/* Mostra il dropdown */

.dropdown:hover .dropdown-menu {

    display: block;

}

.dropdown-menu li {

    width: 100%;

    display: flex;

    align-items: center;

    gap: 8px;

}

/* Link del dropdown */

.dropdown-menu li a {

    white-space: nowrap;

    padding: 10px 20px;

     color: #ffffff;

    display: block;

    transition: background 0.2s ease;

}



.dropdown-menu li a:hover {

    background-color: var(--fabi);

    color: #5c5c5c;

}

/* --- REGOLE PER IL MOBILE --- */



/* 1. Nascondi il sottomenu di default */

.dropdown-mobile {

    display: none !important; /* Forza la chiusura iniziale */

    list-style: none;

    padding-left: 20px;

    background: rgba(255, 255, 255, 0.05);

}



/* 2. Mostra il sottomenu quando il principale (li) ha la classe .open */

.nav-links-mobile.open .dropdown-mobile {

    display: block !important;

	padding: 15px 25px;

}

.nav-item-mobile.open .dropdown-mobile {

    display: block !important;

}

.nav-item-mobile.open .arrow {

    transform: rotate(-135deg);

}





/* 3. Ruota la freccia quando il principale è aperto */

.nav-links-mobile.open .arrow {

    transform: rotate(-135deg);

    margin-top: 6px;

}



/* 4. Rimuovi eventuali stili ereditati dal desktop che bloccano il layout */

#mobile-sidebar .dropdown-mobile {

    position: static;

    width: 100%;

    max-height: none;

	left: 0;

	overflow-y: auto;

}

* {

    box-sizing: border-box;

}

/* ============================================================

   7. SEARCH BAR

   ============================================================ */



//* Contenitore nella colonna */

.search-container {

    display: flex;

    align-items: center;

    justify-content: flex-end; /* o flex-start se la vuoi a sinistra */

    width: 100%;

	z-index: 99999;       

}



/* Form compatto */

.search-container form {

    display: flex;

    align-items: center;

    gap: 5px;

    

}



/* Input */

.search-container input {

    border: 1px solid #ddd;

    padding: 8px 12px;

    border-radius: 4px;

    outline: none;

    width: 80%; 

    font-size: 100%;

	z-index: 99999;       

}



/* Bottone con lente */

.search-container button {

     background: none;        /* niente sfondo */

    border: none;            /* niente bordo */

    padding: 0;              /* niente padding */

    cursor: pointer;

    display: flex;

    align-items: center;

	z-index: 99999;

}

#search-results {

    position: absolute;

    top: 100%;

    left: 0;

    width: 100%;

    background: white;

    border: 1px solid #ddd;

    box-shadow: 0 8px 15px rgba(0,0,0,0.1);

    border-radius: 8px;

    z-index: 999999; 

}



/* Animazione apertura */

@keyframes fadeIn {

    from { opacity: 0; transform: translateY(-10px); }

    to   { opacity: 1; transform: translateY(0); }

}

/* ============================================================

   8. HERO SECTION

   ============================================================ */



/* Sezione Hero ridotta */

.hero-reduced {

    position: relative;

    background: url('img/chieti.jpg') no-repeat center center;

    background-size: cover;

    height: 70vh;

    display: flex;

    align-items: center;

    justify-content: flex-start;

    padding-left: 5%;

    color: white;

	background-position-y: 80%;

}



/* Overlay scuro per migliorare la leggibilità */

.hero-overlay {

    position: absolute;

    top: 0;

    left: 0;

    width: 50%;

    height: auto;

    z-index: 1;

}



/* Card contenente il testo */

.hero-content {

    position: relative;

    z-index: 2;

    background-color: rgba(255, 255, 255, 0.95);

    padding: 2px 25px; 

    border-radius: 12px;

    box-shadow: 0 6px 18px rgba(0,0,0,0.12); 

    max-width: 22%; 

    text-align: left;

    color: #1a1a1a;

   

}





/* Titolo */

.h1-reduced {

    color: #0b2545;

    font-size: 150%;

    margin-bottom: 10px;

    text-align: left;

}



/* Testo descrittivo */

.p-reduced-container {

    margin-bottom: 10px;

}



.p-reduced {

    font-size: 105%;

    margin-bottom: 12px;

    line-height: 1.2;

    font-weight: 400;

    color: #f1f1f1;

}

.p-testo {

    font-size: 105%;

    margin: 10; 

	padding: 0 20px;         

    line-height: 1.4;

    font-weight: 400;

    color: black;

    text-align: justify-content;     

}





/* Pulsante principale ridotto */

.btn-primary.btn-reduced {

    display: inline-block;

    background-color: var(--fabi);

    color: white;

    padding: 5px 10px;

    font-size: 80%;

    text-decoration: none;

    border-radius: 5px;

    font-weight: 50%;

    transition: all 0.3s ease;

    box-shadow: 0 4px 6px rgba(0,0,0,0.1);

}



.btn-primary.btn-reduced:hover {

    transform: translateY(-3px);

    box-shadow: 0 10px 20px rgba(0,170,255,0.4);

}



/* Pulsante principale standard */

.btn-primary {

    display: inline-block;

    background-color: #00aaff;

    color: white;

    padding: 15px 35px;

    text-decoration: none;

    border-radius: 5px;

    font-weight: 600;

    margin-top: 10px;

	margin-bottom: 10px;

    transition: all 0.3s ease;

    box-shadow: 0 4px 6px rgba(0,0,0,0.1);

}



.btn-primary:hover {

    transform: translateY(-3px);

    box-shadow: 0 10px 20px rgba(0,170,255,0.4);

}



.link-nazionale:hover .mini-logo {

  filter: grayscale(0%);

}



.btn-nazionale {

  color: #0088cc;

  text-decoration: none;

  font-weight: bold;

  font-size: 100%;

  display: inline-flex; 

  align-items: center;

  gap: 8px;

  border: 2px solid #0088cc; 

  padding: 6px 15px;      

  border-radius: 25px;

  transition: all 0.3s ease;

  width: fit-content;     

  white-space: nowrap;    

  margin-right: 20px;    

}



.btn-nazionale:hover {

  background-color: #0088cc;

  color: white;

}

/* ============================================================

   9. NEWS CARDS

   ============================================================ */



/* Sezione contenitore */

.news-section {

	padding-top:10px;

    width: 100%;

	height: 65px;

    background-color: #f0f4f8;  

    text-align:center;      

    justify-content: center; 

	font-weight: bold;

	font-size:160%;

}



.news-sotto-section {

    width: 100%;

	height: 35px;

    background-color: #f0f4f8;  

    padding: 5px 20px;          

    margin: 10;                 

    

}





/* Contenitore delle card (scrollabile su schermi piccoli) */

.news-container {

    display: flex;

	flex-direction: row;

     gap: 1%;

    padding: 2% 4%;

    width: 100%;

    box-sizing: border-box;

    align-items: center;

    justify-content: center;

}

.news-content {

  width: 100%;

overflow-y: auto;

   position: relative;

  flex: 1 1 auto;

  padding: 0.5rem;  

}

.news-content.expanded {

    display: block !important;

}



@media (max-width: 768px) {

    /* La sezione che contiene le card */

    .news-section {

        width: 100% !important;

        padding: 10px !important;

        margin: 10px;

    }



    

    .news-container {

        display: flex;

        flex-direction: column;

        align-items: center; /* Centra le card nello schermo */

        width: 90%;

        padding: 10;

		margin-right: 10px;

    }



    

    .news-card, .cardLeg, .cardfisc, .cardpadr {

        width: 95% !important;  

        margin: 5px !important; 

        max-width: none !important;

		padding: 10px !important; 

		overflow: hidden;

		

    }



     

   .badge-container {

    display: flex;

    flex-direction: row;  

    align-items: center;

    justify-content: center;  

    width: 100%;           

    gap: 15px;

    padding: 15px 0;        

    

    }



    .badge {

        flex-grow: 1;   

        text-align: left;

    }

	.p-testo {

    max-width: 505px;        

    }

}



.story-content {

    max-height: 100%;

    overflow-y: auto;

    transition: max-height 0.4s ease;

}



.news-content {

    display: -webkit-box;

    -webkit-line-clamp: 3;

    -webkit-box-orient: vertical;

    overflow-y: auto;

    font-size: 125%;

    color: #666;

    margin: 5px;

}



 

.news-content.expanded {

    -webkit-line-clamp: unset;

    display: block;

}



.story-content.expanded {

    max-height: 150%;

}





/* Card base */

.news-card {

  background: white;

    border: 1px solid #e0e0e0;

    border-radius: 15px; 

    box-shadow: 0 4px 8px rgba(0,0,0,0.1);

    overflow: hidden;    

    padding: 0;     

    display: flex;

    flex-direction: column;

    text-align: center;

    transition: transform 0.2s, box-shadow 0.2s;

       

}

.cardLeg:hover, 

.cardfisc:hover, 

.cardpadr:hover,

.news-card:hover {

   transform: translateY(-10px); 

    box-shadow: 0 10px 25px rgba(0,0,0,0.15); 

    z-index: 10;

	border-top: none;

}

.cardLeg, .cardfisc, .cardpadr {

    transition: all 0.3s ease; 

    cursor: pointer;

}

/* Icona o immagine nella card */

.news-card img,

.news-icon {

  width: 50px;

   opacity: 0.95;

  background: transparent;

  mix-blend-mode: multiply;

  flex-shrink: 0;  

  margin-left:10px;

  }

 .badge  {

   /* display: inline-block;

	background-repeat: no-repeat;

    background-size: 100% 100%;     

    background-position: center;

    padding: 25px 50px;           

    box-sizing: border-box;

    font-family: "Georgia", serif;

    font-style: italic;

    font-size: 15px;

    color: #0b2545;

    text-align: center;

    line-height: 1.3;

    width: fit-content;

    height: fit-content;  

	padding:3%;*/

	margin-right:15px;

	  }

    

   .badge-container {

	border-radius: 15px 15px 0 0 !important;

	font-family: "Georgia", serif;

	font-style: italic;

    display: flex;

	flex-direction: row;  

    flex-wrap: wrap;

	align-items: center;

    justify-content: center;  

    width: 100%;           

    gap: 15px;

	background: linear-gradient(180deg, #c1d1e6 0%, #f0f4f8 100%) !important;	

 	padding: 15px 0;        

    border-bottom: 1px solid rgba(0,0,0,0.1); 

	   

}

.badge-container span, 

.badge-container p {

    flex: 1;                /* Prende tutto lo spazio rimanente accanto all'icona */

    white-space: normal;    /* Forza l'andata a capo */

    word-wrap: break-word;  /* Rompe le parole se troppo lunghe */

    text-align: left;       /* O center, a seconda dei gusti */

    font-family: "Georgia", serif;

    font-style: italic;

    line-height: 1.2;       /* Riduce lo spazio tra le righe se va a capo */

    padding-right: 10px;    /* Evita che il testo tocchi il bordo destro */

}



.card-title {

        font-size: 110%;

        font-weight: 800;

        color: #333;

    }



/* Corpo della card */

.news-body {

  display: flex;

  flex-direction: column;

  gap: 1%;

}







/* Bottone "Leggi di più" */

.read-more-btn {

    margin-top: auto;

    background: none;

    border: 2px solid #0088cc;

	border-radius:12px;

	color: #0b2545;

    font-weight: bold;

    cursor: pointer;

    padding: 5px;

    text-align: left;

	

}



/* Varianti card tematiche */

.cardLeg, .cardfisc, .cardpadr {

    position: relative;

	 border-radius: 12px;

	 background: #ffffff;

  margin-left:10px;

  box-shadow: 0 0.3vw 0.8vw rgba(0,0,0,0.08);

  transition: all 0.25s ease;

}

/*

.cardLeg {

    border-top: 5px solid #0b2545;

 

}



.cardfisc {

    border-top: 5px solid orange;

  }



.cardpadr {

  border-top: 5px solid green;

}

*/

.cardLeg::before, .cardfisc::before, .cardpadr::before {

    content: ''; 

    position: absolute;

    

    width: 100%; 

    height: 2%; 

    border-radius: 4% 4% 0 0; 

    

    z-index: 1; 

}







/* Il contenitore principale */

.fabi-card {

  width: 100%;

  max-width: 70%; 

  background-color: #fff;

  border-radius: 6px;

  border: 1px solid #d1d9e0; 

  /* border-top: 4px solid #003366; */

  box-shadow: 0 0.3vw 0.7vw rgba(0,0,0,0.05);

  font-family: sans-serif;

  margin-bottom: 2%;

}



.fabi-card-header {

  background-color: #003366; 

  color: #ffffff;

  padding: 2.5% 4%;

  display: flex;

  justify-content: space-between;

  align-items: center;

  font-weight: bold;

  font-size: 100%;

}



/* Il contenuto interno */

.fabi-card-body {

  padding: 2% 3%;

}



.fabi-card-body ul {

  list-style: none;

  padding: 0;

  margin: 5px;

}



.fabi-card-body li {

  display: flex;

  align-items: center;

   padding: 2% 3%;;

  transition: background 0.2s;

  gap: 1%;

}



.fabi-card-body li:hover {

  background-color: #f8f9fa;

}

/* === STILE MODAL/POPUP === */

.modal-overlay {

  display: none; /* NASCOSTO DI DEFAULT */

  position: fixed;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  background-color: rgba(0, 0, 0, 0.7); /* Sfondo scuro semitrasparente */

  z-index: 9999; /* Sopra ogni altra cosa */

  justify-content: center;

  align-items: center;

}

.modal-content {

  background-color: #fff;

  width: 80%; 

  max-height: 85vh; 

  overflow-y: auto; 

  border-radius: 8px;

  position: relative;

  box-shadow: 0 0.25vw 0.8vw rgba(0,0,0,0.5);

  display: flex;

  flex-direction: column;

  padding: 25px;

  z-index: 9999;

}



#popupIframe {

  width: 100%;

  height: 100%; 

  border: none;

}



.close-modal {

  position: absolute;

  top: 2%;

  right: 3%;

  font-size: 80%;

  font-weight: bold;

  color: #333;

  cursor: pointer;

  z-index: 10000; 

}



.close-modal:hover {

  color: #ff0000;

}



/* Container dei pulsanti a destra del testo */

.actions {

  display: flex;

  gap: 2%; 

  align-items: center;

}

.extra-section-ass {

     display: none; 

    margin-top: 20px;

}

/* ============================================================

   10. SIDEBAR + CARD FABI

   ============================================================ */



/* Sezione generale "Chi siamo / Mission" */

.fabi-about-section {

    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

    color: #333;

    padding: 2%;

    background-color: #fff;

}



/* Contenitore principale */

.fabi-container {

    max-width: 80%;

    margin: 0 auto;

    display: flex;

    gap: 4%;

    flex-wrap: wrap;

}



/* Colonna sinistra (sidebar) */

.fabi-sidebar {

    flex: 1 1 27%;

    min-width: 10%;

}



/* Box della sidebar */

.sidebar-box {

    border: 1px solid #d1dee3;

    border-radius: 8px;

    padding: 3%;

    background-color: #f8fbff;

}



/* Colonna destra (contenuto principale) */

.fabi-content {

    flex: 2 1 68%;

}



.content-block {

    margin-bottom: 4%;

}



/* Lista valori con checkmark */

.fabi-values-list {

    list-style: none !important;

    padding: 0 !important;

    margin: 2% 0 !important;

}



.fabi-values-list li {

    display: flex !important;

    justify-content: flex-start !important;

    align-items: flex-start !important;

    text-align: left !important;

    background: #fff !important;

    margin-bottom: 10px !important;

    padding: 12px 15px !important;

    border: 1px solid #eef2f6 !important;

    border-radius: 4px !important;

    gap: 15px !important;

    position: static !important;

    color: #444 !important;

    width: 100% !important;

}



/* Icona check */

.fabi-values-list li::before {

    content: '✔' !important;

    color: #00568c !important;

    font-weight: bold !important;

    flex: 0 0 auto !important;

    font-size:110%!important;

    margin: 0 !important;

}

/* ============================================================

   11. IFRAME SECTION

   ============================================================ */



/* Contenitore principale a due colonne */

.iframe-container-section {

    display: grid;

    grid-template-columns: 1.5fr 1.5fr;

    gap: 20px;

    background: #fff;

    border: 1px solid #e0e0e0;

    border-radius: 12px;

    overflow-y: auto;

    box-shadow: 0 4px 20px rgba(0,0,0,0.05);

    position: relative;

}



/* Linea verticale interna */

.iframe-container-section::before {

    content: "";

    position: absolute;

    top: 0;

    bottom: 0;

    left: 50%;

    width: 1px;

    background: #e0e0e0;

}



/* Header dell’iframe */

.iframe-header {

    width: 100%;

    padding: 20px;

    background: #f8f9fa;

    border-bottom: 1px solid #eee;

}



.live-indicator {

    color: #d9534f;

    font-size: 80%;

    font-weight: bold;

    letter-spacing: 1px;

}





/* Colonna principale destra */

.iframe-main {

    display: flex;

    flex-direction: column;

    width: 100%;

    background: #fff;

    padding: 0 48px 35px 48px;

}



/* Sidebar sinistra */

.iframe-sidebar {

    padding: 30px;

    background: #fdfdfd;

    border-right: 1px solid #eee;

}



/* Link di supporto */

.support-links {

    display: flex;

    flex-direction: column;

    gap: 15px;

    margin-top: 20px;

}



.support-card {

    display: flex;

    align-items: center;

    gap: 15px;

    padding: 12px;

    text-decoration: none;

    color: #333;

    background: white;

    border: 1px solid #eee;

    border-radius: 8px;

    transition: all 0.3s ease;

}



.support-card:hover {

    border-color: #0056b3;

    box-shadow: 0 2px 8px rgba(0,0,0,0.1);

    transform: translateX(5px);

}



.support-card img {

    width: 40px;

}



.cta-banner {

    margin-top: 30px;

    padding: 15px;

    background: #0056b3;

    color: white;

    border-radius: 8px;

    text-align: center;

}



.cta-banner button {

    background: white;

    color: #0056b3;

    border: none;

    padding: 8px 15px;

    border-radius: 4px;

    cursor: pointer;

    font-weight: bold;

    margin-top: 10px;

}





/* ============================================================

   12. FOOTER

   ============================================================ */

@media (max-width: 768px) {

    .main-footer {

        padding: 20px;

        margin-top: 10px;

        width: 100%;

    }



    .footer-grid {

        display: flex;  

        flex-direction: column;

        gap: 25px; 

    }



    .footer-group {

        display: flex;

        flex-direction: column;  

        gap: 2px;  

        width: 100% !important;

        text-align: left;

    }



    .footer-value {

        margin-bottom: 0;  

        padding: 2px 0;  

    }

}

/* Footer principale */

.main-footer {

    background-color: #f0f4f8;

    color: black;

    padding: 30px 50px;

    margin-top: 50px;

    border-top: 1px solid #e2e8f0;

    border-radius: 12px 12px 0 0;

    box-sizing: border-box;

}



/* Griglia del footer */

.footer-grid {

    display: grid;

    grid-template-columns: 10% 25% 30% 35%;

    gap: 20px;

    align-items: start;

}



/* Gruppi informativi */

.footer-group {

    display: flex;

    flex-direction: column;

    gap: 5px;

    min-width: 300px;

}



/* Etichette */

.footer-label {

    color:  var(--fabi);

    font-size: 100%;

    text-transform: uppercase;

    font-weight: bold;

    letter-spacing: 0.5px;

}

.footer-value img {

    margin-right: 3px;    

    width: 20px !important;  

    height: auto;

}

/* Valori */

.footer-value {

    display: flex;

    align-items: center;

    flex-direction: row;

    margin-bottom: 4px;

  

}



/* Link nel footer */

.footer-value a {

    color: black;

    text-decoration: none;

}



.footer-value a:hover {

    text-decoration: underline;

}



.footer-value .icon, 

.footer-value .img {

    width: 20px;          

    height: 20px;          

    display: inline-block;  

    object-fit: contain;

    flex-shrink: 0;       

    margin-right: 8px;

}



.footer-value a {

    color: inherit;

    text-decoration: none;

}



.footer-value a:hover {

    text-decoration: underline;

}



/* ============================================================

   13. RESPONSIVE

   ============================================================ */



/* ============================================================

   13.1 — Tablet (max-width: 992px)

   ============================================================ */

@media (max-width: 992px) {



    /* Header e Footer in colonna */

    .header-grid,

    .footer-grid {

        display: flex !important;

        flex-direction: column !important;

        gap: 30px;

        padding: 20px;

    }



    .header-group,

    .footer-group {

        width: 100% !important;

        min-width: 0 !important;

    }



    /* Navbar verticale */

    .nav-links {

        flex-direction: column;

		gap: 0;

        width: 100%;

    }



    .nav-links li {

        width: 100%;

        border-bottom: 1px solid #eee;

    }



    /* Link più grandi e cliccabili */

    .nav-links a,

    .dropdown-menu li a,

    .footer-value a {

        color: balck;

        text-decoration: none !important;

        display: block !important;

        padding: 18px 10px !important;

        font-size: 105% !important;

        width: 100%;

    }



    .nav-links a:hover,

    .dropdown-menu li a:hover,

    .footer-value a:hover {

        text-decoration: underline !important;

        opacity: 0.9;

		 }



    /* Dropdown sempre visibile su mobile */

    .dropdown-menu {

        position: static !important;

        display: block !important;

        box-shadow: none;

        border-top: none;

        padding-left: 20px;

        background-color: #fcfcfc;

    }



   



    /* Hero */

    .hero-reduced {

		height: auto;

        padding: 10px 25px;

        justify-content: right;

        background-position: center;

    }



    .hero-content {

        max-width: 45%;

    padding: 20px 30px;

    margin: 0 30px;

    text-align: center;

    }



    .h1-reduced {

        font-size: 150% !important;

    }



    .p-reduced {

        font-size:105% !important;

    }



  

}



/* ============================================================

   13.2 — Smartphone (max-width: 768px)

   ============================================================ */

@media (max-width: 768px) {

	 body {

        margin: 10;

    }



    /* FABI layout */

    .fabi-container {

        flex-direction: column;

    }



    .fabi-sidebar,

    .fabi-content {

        flex: 1 1 100%;

    }



    /* News cards scrollabili */

    .news-container {

        padding: 2px;

        gap: 1px;

    }



    .news-card {

        min-width: 260px !important;

    }







    .iframe-main {

        padding: 20px;

    }



    /* Footer */

    .footer-grid {

        padding: 1px;

    }

}



/* ============================================================

   13.3 — Extra Small (max-width: 600px)

   ============================================================ */

@media (max-width: 600px) {



    /* Riduzione padding globale */

    body {

        margin: 0;

    }



    /* Hero */

    .hero-content {

        padding: 2px;

    }



    



    /* Sidebar */

    .sidebar-box {

        padding: 1px;

    }



    /* Footer */

    .footer-group {

        min-width: 0;

    }

}