/*
 * urbamid.css - Stili personalizzati URBAmid
 * ===========================================
 * Definisce il tema visivo dell'applicazione URBAmid del Comune di Messina.
 * Mantiene fedelmente lo stesso aspetto del vecchio sito (Materialize CSS 0.99):
 * - Colore principale: teal (#009688)
 * - Colore secondario: brown (#795548)
 * - Navbar bianca fissa con ombra
 * - Footer teal pieno
 * - Sezioni parallax con immagini di sfondo
 * - Blocchi icone marrone con Material Icons
 *
 * Migrato da: css/style.css + Materialize CSS 0.99
 * Verso:      CSS personalizzato su Bootstrap 5
 */

/* ─────────────────────────────────────────────────────────────────
   VARIABILI COLORE (identiche al tema del vecchio sito)
   ───────────────────────────────────────────────────────────────── */
:root {
    --urbamid-teal:        #009688;
    --urbamid-teal-light:  #4db6ac;
    --urbamid-teal-dark:   #00695c;
    --urbamid-brown:       #795548;
    --urbamid-brown-light: #a1887f;
    --urbamid-white:       #ffffff;
}

/* ─────────────────────────────────────────────────────────────────
   NAVBAR
   ───────────────────────────────────────────────────────────────── */

/* Navbar fissa bianca con ombra sottile (equivalente alla navbar-fixed di Materialize) */
.urbamid-navbar {
    border-bottom: 1px solid #e0e0e0;
    z-index: 1030;
}

/* Brand/logo centrato (replicato dal vecchio "brand-logo center") */
.urbamid-brand {
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--urbamid-teal) !important;
    letter-spacing: 0.02em;
}

.urbamid-brand:hover {
    color: var(--urbamid-teal-dark) !important;
}

/* Voci del menu: testo scuro con hover teal */
.urbamid-navbar .nav-link {
    color: #444 !important;
    font-size: 0.9rem;
}

.urbamid-navbar .nav-link:hover {
    color: var(--urbamid-teal) !important;
}

/* Bottone Accedi nella navbar (equivalente al btn waves-effect del vecchio sito) */
.btn-outline-teal {
    color: var(--urbamid-teal);
    border-color: var(--urbamid-teal);
    font-weight: 500;
}

.btn-outline-teal:hover {
    background-color: var(--urbamid-teal);
    color: #fff;
}

.text-teal {
    color: var(--urbamid-teal) !important;
}

/* ─────────────────────────────────────────────────────────────────
   SEZIONE HERO / PARALLAX PRINCIPALE
   Equivalente al <div class="parallax-container"> del vecchio Default.aspx
   ───────────────────────────────────────────────────────────────── */
.urbamid-hero {
    background-image: url('/images/BackCity2.JPG');
    background-attachment: fixed;        /* effetto parallax CSS */
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    /* Altezza come il parallax-container Materialize dell'originale (~500px) */
    min-height: 500px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

/* NESSUN overlay sull'immagine: la foto si vede pulita come nell'originale Materialize.
   La leggibilità del titolo è garantita solo dall'ombra del testo (vedi sotto). */

.urbamid-hero .hero-content {
    position: relative;
    z-index: 1;
    text-align: center;
    color: #fff;
    padding: 2rem;
}

.urbamid-hero h1 {
    color: var(--urbamid-teal-light);
    /* Ombra del testo (sul testo, non sull'immagine) per la leggibilità senza velo */
    text-shadow: 0 2px 10px rgba(0,0,0,0.9), 0 0 3px rgba(0,0,0,0.8);
    /* Dimensione come l'<h1> Materialize dell'originale (default 4.2rem) */
    font-size: 4.2rem;
    font-weight: 400;
}

.urbamid-hero h5 {
    color: #fff;
    font-weight: 300;
    text-shadow: 0 2px 7px rgba(0,0,0,0.85), 0 0 2px rgba(0,0,0,0.7);
}

/* Seconda sezione parallax (equivalente al secondo parallax-container) */
.urbamid-parallax-2 {
    background-image: url('/images/BackMessina1.JPG');
    background-attachment: fixed;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    min-height: 200px;
}

/* ─────────────────────────────────────────────────────────────────
   BLOCCHI ICONA (equivalenti agli icon-block del vecchio sito)
   ───────────────────────────────────────────────────────────────── */
.urbamid-icon-block {
    text-align: center;
    padding: 1.5rem 1rem;
}

/* Pulsante circolare marrone con icona Material (equivalente al btn-floating brown) */
.urbamid-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background-color: var(--urbamid-brown);
    color: #fff;
    text-decoration: none;
    font-size: 1.8rem;
    margin-bottom: 0.75rem;
    transition: background-color 0.25s, box-shadow 0.25s;
    box-shadow: 0 2px 6px rgba(0,0,0,0.25);
}

.urbamid-icon-btn:hover {
    background-color: var(--urbamid-brown-light);
    color: #fff;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    text-decoration: none;
}

.urbamid-icon-btn .material-icons {
    font-size: 2rem;
}

.urbamid-icon-block h5 {
    color: var(--urbamid-brown);
    font-weight: 500;
    margin-bottom: 0.75rem;
}

/* Titoli dei blocchi cliccabili: stesso colore del titolo, sottolineatura solo al passaggio del mouse */
.urbamid-icon-block h5 a {
    color: inherit;
    text-decoration: none;
}

.urbamid-icon-block h5 a:hover {
    color: var(--urbamid-teal);
    text-decoration: underline;
}

.urbamid-icon-block p {
    color: #555;
    font-size: 0.92rem;
}

.urbamid-icon-block blockquote {
    border-left: 4px solid var(--urbamid-teal-light);
    padding-left: 0.75rem;
    color: #777;
    font-size: 0.85rem;
    font-style: italic;
}

/* ─────────────────────────────────────────────────────────────────
   SEZIONI ALTERNATE (sfondo bianco / grigio chiaro)
   ───────────────────────────────────────────────────────────────── */
.urbamid-section {
    padding: 3rem 0;
}

.urbamid-section-alt {
    padding: 3rem 0;
    background-color: #f5f5f5;
}

/* ─────────────────────────────────────────────────────────────────
   FOOTER TEAL (identico al vecchio page-footer teal di Materialize)
   ───────────────────────────────────────────────────────────────── */
.urbamid-footer {
    background-color: var(--urbamid-teal);
    color: #fff;
    margin-top: 2rem;
}

.urbamid-footer a {
    color: #ffe082; /* giallo caldo per i link nel footer */
}

.urbamid-footer a:hover {
    color: #fff;
}

/* Striscia scura in fondo al footer (equivalente al footer-copyright) */
.urbamid-footer-copyright {
    background-color: rgba(0, 0, 0, 0.2);
    color: rgba(255,255,255,0.75);
    font-size: 0.85rem;
}

.urbamid-footer-copyright a {
    color: rgba(255,255,255,0.6);
}

/* ─────────────────────────────────────────────────────────────────
   PULSANTE "TORNA SU" (equivalente al #back-top del vecchio sito)
   ───────────────────────────────────────────────────────────────── */
#back-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    display: none;       /* nascosto di default, mostrato via JS allo scroll */
    z-index: 999;
}

#back-top a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    border-radius: 12px;
    background: #ddd url('/images/ArrowUpNew.png') no-repeat center center;
    background-size: 24px;
    text-decoration: none;
    transition: background-color 0.3s;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

#back-top a:hover {
    background-color: #888;
}

/* ─────────────────────────────────────────────────────────────────
   OVERLAY DI CARICAMENTO (spinner per le navigazioni lente)
   Mostrato via JS solo se il server tarda a rispondere (vedi _Layout.cshtml)
   ───────────────────────────────────────────────────────────────── */
#page-loading {
    position: fixed;
    inset: 0;
    display: none;                          /* nascosto: attivato con la classe .show */
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.55);  /* velo chiaro non invasivo */
    z-index: 10000;
}

#page-loading.show {
    display: flex;
}

/* ─────────────────────────────────────────────────────────────────
   PULSANTE TEAL (equivalente ai btn waves-effect waves-light teal di Materialize)
   ───────────────────────────────────────────────────────────────── */
.btn-teal {
    background-color: var(--urbamid-teal);
    color: #fff;
    border-color: var(--urbamid-teal);
}

.btn-teal:hover {
    background-color: var(--urbamid-teal-dark);
    color: #fff;
    border-color: var(--urbamid-teal-dark);
}

/* ─────────────────────────────────────────────────────────────────
   RICERCA PROTOCOLLO (campo GUID nella home page)
   ───────────────────────────────────────────────────────────────── */
.urbamid-guid-input {
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-family: monospace;
    font-size: 0.9rem;
}

/* ─────────────────────────────────────────────────────────────────
   UTILITÀ COLORE (bg-teal, bg-brown, text-brown)
   Equivalenti alle classi di sfondo di Materialize CSS
   ───────────────────────────────────────────────────────────────── */
.bg-teal {
    background-color: var(--urbamid-teal) !important;
}

.bg-teal-light {
    background-color: var(--urbamid-teal-light) !important;
}

.bg-brown {
    background-color: var(--urbamid-brown) !important;
}

.text-brown {
    color: var(--urbamid-brown) !important;
}

/* Intestazione tabelle con sfondo teal (card-header delle tabelle riservate) */
.table-teal th {
    background-color: var(--urbamid-teal);
    color: #fff;
    border-color: var(--urbamid-teal-dark);
    font-size: 0.85rem;
    font-weight: 500;
}

/* Card con effetto hover (ombre più marcate al passaggio del mouse) */
.hover-shadow {
    transition: box-shadow 0.25s, transform 0.15s;
}

.hover-shadow:hover {
    box-shadow: 0 6px 20px rgba(0,0,0,0.18) !important;
    transform: translateY(-2px);
}

/* ─────────────────────────────────────────────────────────────────
   RESPONSIVE: su mobile disabilita background-attachment: fixed
   (non supportato correttamente da tutti i browser mobili)
   ───────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .urbamid-hero,
    .urbamid-parallax-2 {
        background-attachment: scroll;
    }

    .urbamid-hero {
        min-height: 360px;
    }

    .urbamid-hero h1 {
        font-size: 2.6rem;
    }

    .urbamid-icon-btn {
        width: 56px;
        height: 56px;
    }
}