/* Container principale per spingere il footer in fondo */
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    margin: 0;
}

.app-container {
    display: flex;
    flex-direction: column;
    /* Imposta la larghezza massima desiderata */
    max-width: 1200px; 
    /* Centra il contenitore nella pagina */
    margin: 0 auto; 
    /* Occupa tutto lo spazio disponibile fino a 1400px */
    width: 100%; 
}

.embedded-app {
    width: 100%; /* Prende tutti i 1400px del padre */
    height: 800px;
    border: none;
}

/* Struttura Generale Footer */
.footer {
    background-color: #ffffff;
    padding: 40px 0 30px 0;
    border-top: 1px solid #e0e0e0;
    font-family: "Open Sans", Arial, sans-serif;
    /* Font tipico FAO */
    color: #333;
}

/* Allineamento Logo */
.footer-logo {
    display: flex;
    align-items: center;
    margin-bottom: 25px;
}

.footer-logo img {
    max-height: 80px;
    /* Regola in base alla grandezza del tuo logo */
}

/* Sezione Social Icons */
/* .footer-social .title-category {
    text-transform: uppercase;
    color: #666;
    font-weight: 700;
    font-size: 0.85rem;
    margin-bottom: 10px;
}
 */
.social-icons {
    padding-left: 0;
}

.social-icons .list-inline-item {
    margin-right: 8px;
}

.social-icons .list-inline-item img {
    /* width: 28px; */
    width: 1.5rem; 
    /* Dimensione icone social */
    /* height: 28px; */
    height:  1.5rem; 
    transition: opacity 0.2s;
}

.social-icons .list-inline-item a:hover img {
    opacity: 0.8;
}

/* Sezione Link (Top e Bottom) */
.footer-links-top {
    display: flex;
    gap: 20px;
    margin-bottom: 15px;
    font-size: 0.95rem;
}

.footer-links-top a,
.footer-links-top .btn-secondary {
    color: #006699;
    /* Blu istituzionale */
    text-decoration: none;
    font-weight: 400;
    background: none;
    border: none;
    padding: 0;
}

/* Stile speciale per il dropdown Worldwide Offices */
.footer-links-top .dropdown-toggle::after {
    margin-left: 5px;
    vertical-align: middle;
}

/* Lista Link Inferiore con Separatori | */

.footer .footer-links .footer-links-bottom .list-inline {
    margin-bottom: 0;
    /* line-height: 2.2;  *//* Dà respiro verticale quando i link vanno a capo */
}

.footer .footer-links .footer-links-bottom .list-inline-item {
    font-size: 0.85rem;
    display: inline-block;
    margin-right: 0;
}

.footer .footer-links .footer-links-bottom .list-inline-item a {
    color: #006699;
    text-decoration: none;
    white-space: nowrap; /* Impedisce che un singolo link si spezzi su due righe */
}

/* Sovrascriviamo pesantemente la regola del framework FAO */
.footer .footer-links .footer-links-bottom .list-inline-item::after {
    position: static !important; /* ANNULLA il position: absolute del CSS FAO */
    content: "|" !important; /* Forza il carattere invece del blocchetto grafico */
    background: transparent !important; /* Rimuove lo sfondo del framework */
    width: auto !important;
    height: auto !important;
    color: #ccc;
    margin: 0 0px 0 0px !important; /* Gestisce gli spazi a destra e sinistra del | */
    display: inline-block;
    font-weight: 300;
}

/* Nascondiamo il separatore sull'ultimo elemento */
.footer .footer-links .footer-links-bottom .list-inline-item:last-child::after {
    content: none !important;
    display: none !important;
}

.footer-links-bottom .list-inline-item a:hover,
.footer-links-top a:hover {
    text-decoration: underline;
}

/* .footer-links-bottom .list-inline {
    margin-bottom: 0;
    
}

.footer-links-bottom .list-inline-item {
    font-size: 0.85rem;
    margin-right: 0;
    display: inline-block;
}

.footer-links-bottom .list-inline-item a {
    color: #006699;
    text-decoration: none;
    white-space: nowrap;
}

.footer-links-bottom .list-inline-item:not(:last-child):after {
    content: "|";
    color: #ccc;
    margin: 0 10px;
    font-weight: 300;
    display: inline-block;
}

.footer-links-bottom .list-inline-item a:hover,
.footer-links-top a:hover {
    text-decoration: underline;
} */

/* Copyright (Allineato a destra) */
.footer-download {
    text-align: right;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
}

.copyright {
    color: #666;
    text-decoration: none;
    font-size: 0.9rem;
}

.copyright:hover {
    color: #333;
}

/* Responsive adjustments */
@media (max-width: 768px) {

    .footer-logo,
    .footer-social,
    .footer-download {
        text-align: center;
        justify-content: center;
        margin-bottom: 20px;
    }

    .footer-links-top {
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }

    .footer-links-bottom {
        text-align: center;
    }

    .footer-download {
        justify-content: center;
    }
}
/* Ripristino degli stili per i link DENTRO il menu a tendina */
.footer-links-top .dropdown-menu .dropdown-item {
    color: #545454 !important; /* Grigio scuro standard FAO invece del blu */
    padding: 5px 20px !important; /* Ripristina l'ariosità verticale e orizzontale */
    font-size: 0.95rem; 
    background-color: transparent !important;
}

/* Stile al passaggio del mouse sulle voci della tendina */
.footer-links-top .dropdown-menu .dropdown-item:hover {
    background-color: #f2f2f2 !important; /* Sfondo grigio chiaro */
    color: #116bac !important; /* Diventa azzurro FAO al passaggio del mouse */
    text-decoration: none;
}

/* Diamo un po' di respiro alla "scatola" del menu intero */
.footer-links-top .dropdown-menu {
    padding: 10px 0 !important;
    border-radius: 5px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); /* Aggiunge una leggera ombra per staccarlo dallo sfondo */
}
/* Stile esatto per i bottoni dell'header (Discover, Language) basato sui DevTools FAO */
.fao-header .fao-header-right .dropdown > .btn.btn-secondary {
    background-color: #FFFFFF !important; /* Sfondo bianco esatto */
    color: #116BAC !important; /* Blu FAO esatto */
    font-family: "Open Sans", sans-serif !important;
    font-size: 16px !important;
    padding: 6px 12px !important;
    border: none !important;
    box-shadow: none !important; /* Rimuove l'ombra base di Bootstrap */
    font-weight: 400 !important;
}

/* Evita che diventi grigio quando ci clicchi sopra o apri la tendina */
.fao-header .fao-header-right .dropdown > .btn.btn-secondary:hover,
.fao-header .fao-header-right .dropdown > .btn.btn-secondary:focus,
.fao-header .fao-header-right .dropdown > .btn.btn-secondary:active,
.fao-header .fao-header-right .dropdown > .btn.btn-secondary.show,
.fao-header .fao-header-right .dropdown > .btn.btn-secondary[aria-expanded="true"] {
    background-color: #FFFFFF !important;
    color: #0b4d7c !important; /* Blu leggermente più scuro per il feedback del click */
    border: none !important;
    box-shadow: none !important;
}