/* ============================================================
   1. BRAND BANNER
   ============================================================ */
.brand-section {
    display: flex;
    align-items: flex-end;
    
    /* SFONDO */
    background-image: url('/contents/img/SuaRhe_banner.png');
    background-size: contain; /* Mostra l'immagine intera senza tagli */
    background-repeat: no-repeat;
    background-position: center;
    /* IL TRUCCO: Imposta il rapporto larghezza/altezza dell'immagine */
    /* Se l'immagine è larga 1000 e alta 200, scrivi 1000/200 */
    aspect-ratio: 2297 / 448; 
    width: 100%; /* Occupa tutta la larghezza */
}

.brand { 
    display: flex; text-decoration: none; background-color: rgba(255, 255, 255, 0.5); margin: 20px 50px;
    padding: 10px 10px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.5); box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.brand-logo-container { 
    position: absolute;
    top: 20px;
    right: 20px;
}

.logo-img { height: 80px; width: auto; }
.brand-text { font-size: 1.4rem; color: #004085; line-height: 1; }
.brand-main { font-weight: 800; text-transform: lowercase; }
.brand-sub { font-weight: 300; text-transform: lowercase; opacity: 0.7; }

/* ============================================================
   2. NAVBAR (STRUTTURA A DUE LIVELLI)
   ============================================================ */
.navbar {
    background: #ffffff;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    position: sticky;
    top: 0;
    z-index: 1000;
}

.nav-container {
    max-width: 1200px;
    margin: 0;
    flex-direction: column;
    display: flex;
    justify-content: flex-start;
    background: #f0f9f6;
    padding: 12px 5%; 
    border-top: 1px solid #d1e7dd;
    width: 100%;
}

.nav-links {
    list-style: none;
    display: flex;
    gap: 35px;
    margin: 0;
    padding: 0;
}

.nav-links a {
    text-decoration: none;
    color: #555;
    font-size: 0.85rem;
    font-weight: 700;
    position: relative;
    display: inline-block;
    padding: 5px 0;
    transition: 0.3s;
}

.nav-links a:hover, .nav-links a.active { color: #0056b3; }

.nav-links a.active::after {
    content: '';
    position: absolute;
    width: 100%; 
    height: 3px;
    bottom: -2px;
    left: 0;
    background-color: #0056b3;
    border-radius: 2px;
}

/* ============================================================
   3. FOOTER
   ============================================================ */
.main-footer {
    background-color: #f0f9f6;
    border-top: 1px solid #d1e7dd;
    padding: 30px 5%;
    margin-top: 50px;
    color: #444;
    font-size: 0.75rem;
}

.footer-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.footer-center { text-align: center; flex: 2; }
.footer-left, .footer-right { flex: 1; opacity: 0.8; }
.footer-right { text-align: right; }

@media (max-width: 768px) {
    .footer-container { flex-direction: column; text-align: center; gap: 15px; }
    .footer-right { text-align: center; }
}