/* ------------------------------
   STILE GENERALE
--------------------------------*/

body {
    margin: 0;
    padding: 0;
    background-color: #14285f;
    font-family: "Poppins", "Segoe UI", Arial, sans-serif;
    color: #ffffff;
}

/* Titoli */
#logo {
    font-size: 30px;
    font-weight: 700;
    color: #ffd54f;
    padding-left: 20px;
}

#tagline {
    font-size: 16px;
    color: #cfd8dc;
    padding-left: 20px;
}

.pageName {
    font-size: 30px;
    font-weight: 600;
    color: #ffcc00;
    margin-bottom: 10px;
}

.bodyText {
    font-size: 17px;
    line-height: 1.6;
    color: #e0e0e0;
}

/* ------------------------------
   MENU LATERALE (DESKTOP)
--------------------------------*/

#navigation {
    width: 227px;
    background: linear-gradient(180deg, #0f1e47 0%, #1b3a7a 100%);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 0 12px #00000066;
}

#navigation td {
    border-bottom: 1px solid #1f3b7a;
}

#navigation td:last-child {
    border-bottom: none;
}

#navigation td a {
    display: flex;
    align-items: center;
    gap: 12px;
    height: 42px;
    padding-left: 14px;
    color: #ffffff;
    text-decoration: none;
    font-size: 17px;
    font-weight: 500;
    transition: 0.25s ease;
}

/* Effetto animato */
#navigation td a:hover {
    background-color: #1f3b7a;
    padding-left: 22px;
    transform: translateX(4px);
}

/* Emoji animate */
#navigation td a span.emoji {
    font-size: 20px;
    transition: 0.25s ease;
}

#navigation td a:hover span.emoji {
    transform: scale(1.25) rotate(8deg);
}

/* ------------------------------
   IMMAGINI
--------------------------------*/

img {
    border-radius: 8px;
    box-shadow: 0 0 10px #00000055;
    max-width: 100%;
    height: auto;
}

#dateformat img {
    border-radius: 8px;
    box-shadow: 0 0 12px #00000066;
}

/* ------------------------------
   RESPONSIVE SMARTPHONE
--------------------------------*/

@media (max-width: 768px) {

    /* Menu diventa barra superiore */
    #navigation {
        width: 100%;
        display: flex;
        flex-direction: row;
        overflow-x: auto;
        border-radius: 0;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 999;
        height: 55px;
        background: linear-gradient(90deg, #0f1e47 0%, #1b3a7a 100%);
    }

    #navigation td {
        border-bottom: none;
        border-right: 1px solid #1f3b7a;
        white-space: nowrap;
    }

    #navigation td:last-child {
        border-right: none;
    }

    #navigation td a {
        padding: 0 14px;
        height: 55px;
        justify-content: center;
        font-size: 15px;
    }

    #navigation td a span.emoji {
        font-size: 22px;
    }

    /* Spazio sotto il menu */
    body {
        padding-top: 65px;
    }

    /* Tabelle centrali diventano fluide */
    table[width="880"],
    table[width="580"] {
        width: 95% !important;
    }

    /* Colonna laterale con foto Nicole va sotto */
    td[width="50"] {
        display: none;
    }
}