/*
 * FOGLIO DI STILE DEFINITIVO - Modello Siti dei Comuni Italiani (Designers Italia / AGID)
 * Sito: Protezione Civile Genzano di Roma
 * Conformità: WCAG 2.1 AA, WAI-ARIA, Responsive
*/

/* --- FONT IMPORT UFFICIALI --- */
@import url('https://fonts.googleapis.com/css2?family=Titillium+Web:ital,wght@0,300;0,400;0,600;0,700;1,400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,700;1,400;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;700&display=swap');

/* --- VARIABILI GLOBALI --- */
:root {
    --primary: #0066CC;
    --secondary: #009966;
    --white: #ffffff;
    --grey-100: #F0F2F5;
    --grey-800: #3D4C59;
    --grey-700: #5C6F82;
    --link-color: #0066CC;
    --link-hover-color: #004d99;
    --font-family-sans-serif: 'Titillium Web', sans-serif;
    --font-family-serif: 'Lora', serif;
    --font-size-base: 1rem;
    --line-height-base: 1.6;
}

/* --- RESET E LAYOUT DI BASE --- */
body {
    font-family: var(--font-family-sans-serif);
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
    color: var(--grey-800);
    background-color: #fff;
    margin: 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
main {
    flex-grow: 1;
}
*, ::after, ::before { box-sizing: border-box; }
a { color: var(--link-color); text-decoration: none; }
a:hover { color: var(--link-hover-color); text-decoration: underline; }
p { margin-top: 0; margin-bottom: 1rem; font-family: var(--font-family-serif); }
h1, h2, h3, h4, h5, h6 { margin-top: 0; margin-bottom: .5rem; font-weight: 600; line-height: 1.2; }
h1 { font-size: 2.25rem; } h2 { font-size: 1.8rem; } h3 { font-size: 1.5rem; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 0.75rem; vertical-align: top; border-top: 1px solid #dee2e6; }
thead th { vertical-align: bottom; border-bottom: 2px solid #dee2e6; background-color: var(--grey-800); color: var(--white); }

/* --- LAYOUT GRID --- */
.container { width: 100%; padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto; }
@media (min-width: 576px) { .container { max-width: 540px; } }
@media (min-width: 768px) { .container { max-width: 720px; } }
@media (min-width: 992px) { .container { max-width: 960px; } }
@media (min-width: 1200px) { .container { max-width: 1140px; } }
.row { display: flex; flex-wrap: wrap; margin-right: -15px; margin-left: -15px; }
.col-lg-8, .col-lg-4, .col-lg-6 { position: relative; width: 100%; padding-right: 15px; padding-left: 15px; }
@media (min-width: 992px) {
    .col-lg-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
    .col-lg-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
    .col-lg-6 { flex: 0 0 50%; max-width: 50%; }
}

/* --- HEADER --- */
.it-header-slim-wrapper { background-color: var(--primary); z-index: 5; }
.it-header-slim-wrapper .container { display: flex; justify-content: space-between; align-items: center; height: 40px; }
.it-header-slim-wrapper a { color: var(--white); font-size: .875rem; font-weight: 600; }
.header-slim-links { display: flex; gap: 1.5rem; }
.it-header-center-wrapper { background-color: var(--white); padding: 1.5rem 0; }
.it-header-center-wrapper .it-brand-wrapper { display: flex; align-items: center; }
.it-header-center-wrapper .icon { margin-right: 1.5rem; }
.it-header-center-wrapper .icon img { max-height: 80px; }
.it-brand-text h2 { font-size: 1.75rem; color: var(--primary); margin: 0; }
.it-brand-text p { font-family: var(--font-family-sans-serif); font-size: 1.125rem; margin: 0; }
.it-header-navbar-wrapper { background: #fff; border-bottom: 1px solid #dee2e6; box-shadow: 0 .125rem .25rem rgba(0,0,0,.075); position: relative; }
.navbar-nav { display: flex; padding-left: 0; margin-bottom: 0; list-style: none; }
.nav-link { display: block; padding: 1.25rem 1rem; color: var(--grey-800); font-weight: 600; border-bottom: 4px solid transparent; }
.nav-link:hover { color: var(--primary); border-bottom-color: var(--primary); text-decoration: none; }
.nav-link[aria-current="page"] { color: var(--primary); border-bottom-color: var(--primary); }
.navbar-toggler { display: none; }

/* --- COMPONENTI UI --- */
.py-5 { padding-top: 3rem !important; padding-bottom: 3rem !important; } .mb-4 { margin-bottom: 1.5rem !important; } .mt-5 { margin-top: 3rem !important; } .mt-3 { margin-top: 1rem !important; } .mt-2 { margin-top: 0.5rem !important; } .callout { padding: 1.25rem; margin-bottom: 1.25rem; border-left-width: .25rem; border-radius: .25rem; border: 1px solid #eee; } .callout-primary { border-left-color: var(--primary); } .callout-title { margin-top: 0; margin-bottom: .25rem; font-size: 1.25rem; } .callout-primary .callout-title { color: var(--primary); } .card { position: relative; display: flex; flex-direction: column; min-width: 0; word-wrap: break-word; background-color: #fff; border: 1px solid rgba(0,0,0,.125); border-radius: .25rem; height: 100%; } .card-body { flex: 1 1 auto; padding: 1.25rem; } .card-title { margin-bottom: .75rem; font-size: 1.25rem; } .card-text:last-child { margin-bottom: 0; } .card a { text-decoration: none; } .card a:hover .card-title { color: var(--link-hover-color); } .list-group { display: flex; flex-direction: column; padding-left: 0; margin-bottom: 0; } .list-group-item { position: relative; display: block; padding: .75rem 1.25rem; background-color: #fff; border: 1px solid rgba(0,0,0,.125); } .list-group-item:first-child { border-top-left-radius: .25rem; border-top-right-radius: .25rem; } .list-group-item:last-child { border-bottom-right-radius: .25rem; border-bottom-left-radius: .25rem; }
.list-group-item-action { width: 100%; color: #495057; text-align: inherit; } 
.list-group-item-action:focus, .list-group-item-action:hover { 
    color: var(--primary); 
    text-decoration: none; 
    background-color: #f8f9fa; 
} 
.list-group-item[aria-current="page"] { z-index: 2; color: #fff; background-color: var(--primary); border-color: var(--primary); } 
.link-list-wrapper { background-color: var(--grey-100); padding: 1rem; border-radius: 4px; } .btn { padding: .75rem 1.25rem; font-size: 1rem; font-weight: 600; cursor: pointer; border-radius: .25rem; text-decoration: none; display: inline-block; border: 1px solid transparent; } .btn-primary { color: #fff; background-color: var(--primary); border-color: var(--primary); } .btn-secondary { color: #fff; background-color: var(--secondary); border-color: var(--secondary); } .btn-sm { padding: .25rem .5rem; font-size: .875rem; border-radius: .2rem; }

/* --- FOOTER --- */
.it-footer { background: #004d99; color: var(--white); padding: 2rem 0; font-size: .875rem; } .it-footer .row { align-items: flex-start; } .it-footer-main { border-bottom: 1px solid rgba(255, 255, 255, 0.2); padding-bottom: 2rem; margin-bottom: 2rem; } .it-footer h3 { font-size: 1rem; font-weight: 700; color: var(--white); } .it-footer a, .it-footer p { color: var(--white); font-family: var(--font-family-sans-serif); } .it-footer .list-inline { padding-left: 0; list-style: none; } .it-footer .list-inline-item { display: inline-block; } .it-footer .list-inline-item:not(:last-child) { margin-right: .5rem; }

/* --- Componente Allerta Meteo --- */
.alert-widget { padding: 1.5rem; border-radius: 4px; color: var(--white); text-align: center; box-shadow: 0 4px 8px rgba(0,0,0,0.1); } .alert-widget h3 { color: var(--white); margin-top: 0; margin-bottom: 0.5rem; font-size: 1.25rem; text-transform: uppercase; letter-spacing: 1px; } .alert-widget p { font-family: var(--font-family-sans-serif); font-size: 2.5rem; font-weight: 700; margin-bottom: 0; line-height: 1.2; } .alert-widget.verde { background-color: #4CAF50; } .alert-widget.gialla { background-color: #FFC107; color: var(--grey-800); } .alert-widget.gialla h3, .alert-widget.gialla p { color: var(--grey-800); } .alert-widget.arancione { background-color: #FF9800; } .alert-widget.rossa { background-color: #B71C1C; }

/* --- Stili per Pagina "Chi Siamo" (con correzione) --- */
.timeline { list-style: none; padding: 20px 0; position: relative; }
.timeline:before { top: 0; bottom: 0; position: absolute; content: " "; width: 3px; background-color: #eeeeee; left: 25px; }
.timeline > li { margin-bottom: 20px; position: relative; clear: both; }
.timeline > li:after { content: ""; display: table; clear: both; }
.timeline > li .timeline-panel { 
    margin-left: 85px; 
    border: 1px solid #d4d4d4; 
    border-radius: 4px; 
    padding: 20px; 
    position: relative; 
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1); 
}
.timeline > li .timeline-badge { color: #fff; width: 50px; height: 50px; line-height: 50px; font-size: 1.4em; text-align: center; position: absolute; top: 16px; left: 0px; z-index: 100; border-radius: 50%; background-color: var(--primary); }
.timeline-title { margin-top: 0; color: inherit; font-weight: 700; }
.timeline-body > p, .timeline-body > ul { margin-bottom: 0; }

/* --- Box Attivazione Emergenze --- */
.emergency-activation-box { background-color: #f8d7da; border: 2px solid #f5c6cb; color: #721c24; padding: 1.5rem; border-radius: 5px; margin-top: 2rem; } .emergency-activation-box h3 { color: #721c24; margin-top: 0; } .emergency-activation-box ul { padding-left: 20px; margin-bottom: 0; } .emergency-activation-box a { color: #721c24; font-weight: 700; }

/* --- Stili Testo Animato Homepage --- */
.animated-text-container { text-align: center; padding: 2rem 0; background-color: var(--grey-100); border-top: 1px solid #dee2e6; margin-top: 3rem; } .animated-text-container p { font-family: var(--font-family-sans-serif); font-size: 2.25rem; font-weight: 600; color: #000000; margin: 0; } .animated-text-container .typed-text { color: #000000; font-weight: 700; } .animated-text-container .cursor { display: inline-block; width: 3px; background-color: #000000; animation: blink 1s infinite; } .animated-text-container .cursor.typing { animation: none; } @keyframes blink { 0%, 100% { background-color: transparent; } 50% { background-color: #000000; } }

/* --- Stili per Social Media Icons --- */
.footer-social-list { list-style: none; padding: 0; margin: 1rem 0 0 0; display: flex; gap: 1rem; } .footer-social-list a { display: inline-block; } .footer-social-list svg { width: 32px; height: 32px; fill: var(--white); transition: all 0.3s ease-in-out; } .footer-social-list a:hover svg { fill: var(--secondary); transform: scale(1.1); }

/* --- Stili per FAQ --- */
.faq-item { margin-bottom: 1.5rem; border-bottom: 1px solid #dee2e6; padding-bottom: 1.5rem; } .faq-item:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; } .faq-question { font-weight: 700; font-size: 1.25rem; color: var(--primary); margin-bottom: .5rem; } .faq-answer p { margin-bottom: 1rem; } .faq-answer p:last-child { margin-bottom: 0; }

/* =================================== */
/* RESPONSIVE DESIGN                   */
/* =================================== */
.d-lg-none { display: none !important; }
@media (min-width: 992px) {
    .d-lg-block { display: block !important; }
    .d-lg-flex { display: flex !important; }
    .d-lg-none { display: none !important; }
}
@media (max-width: 991.98px) {
    .d-none { display: none !important; }
    .d-lg-block { display: none !important; }
    .navbar-wrapper { display: flex; justify-content: space-between; align-items: center; width: 100%; }
    .navbar-toggler { display: block; background: none; border: none; color: var(--primary); font-size: 2rem; padding: 0.5rem 1rem; }
    .navbar-collapsable { display: none; position: absolute; top: 100%; left: 0; width: 100%; background-color: white; box-shadow: 0 4px 8px rgba(0,0,0,0.1); z-index: 1000; }
    .navbar-collapsable.show { display: block; }
    .navbar-nav { flex-direction: column; width: 100%; padding: 0; }
    .nav-link { padding: 0.75rem 1.5rem; border-bottom: 1px solid var(--grey-100); }
    .nav-link:hover, .nav-link[aria-current="page"] { border-bottom: 1px solid var(--grey-100); background-color: var(--grey-100); }
    .nav-institutional-links { border-top: 2px solid var(--primary); margin-top: 1rem; padding-top: 1rem; }
    .nav-institutional-links a { font-size: 0.9rem; font-weight: 600; color: var(--grey-800); }
}
@media (max-width: 767.98px) {
    h1 { font-size: 1.8rem; } h2 { font-size: 1.5rem; }
    .it-header-center-wrapper { padding: 1rem 0; }
    .it-header-center-wrapper .icon img { max-height: 60px; }
    .it-brand-text h2 { font-size: 1.25rem; }
    .it-brand-text p { font-size: 0.9rem; }
    .alert-widget p { font-size: 2rem; }
    .animated-text-container p { font-size: 1.5rem; }
    .it-footer-main { flex-direction: column; gap: 2rem; }
}

/* --- Stili per Categorie Notizie --- */

.news-category-wrapper {
    margin-bottom: 0.75rem;
}

.news-category {
    display: inline-block;
    padding: .3em .7em;
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: 50px; /* Forma a pillola */
    color: #fff;
    background-color: var(--secondary); /* Colore verde di default (#009966) */
}

/* Categoria per avvisi, emergenze o notizie urgenti (ROSSO) */
.news-category.avviso {
    background-color: #B71C1C; /* Rosso, come alert-widget.rossa */
}

/* Categoria per allerte o notizie che richiedono attenzione (GIALLO) */
.news-category.allerta {
    background-color: #FFC107; /* Giallo, come alert-widget.gialla */
    color: var(--grey-800);   /* Testo scuro per migliore leggibilità su sfondo giallo */
}

/* Categoria per informazioni generali o comunicazioni (BLU) */
.news-category.info {
    background-color: var(--primary); /* Blu primario (#0066CC) */
}