/* Assistenza Legale, rifiniture (22/10 sera, "un gioiellino"). Si carica dopo css/al.css e tocca solo dettagli:
   ritmo e caratteri, link, pulsanti, schede, colonna, moduli, piede, stati al passaggio e alla tastiera.
   Il menu del telefono resta in al.css (sezione 13 e seguenti): qui non si tocca. */

/* 1 Caratteri e ritmo ------------------------------------------------------------------------------------- */
body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;font-feature-settings:"kern","liga"}
p,li,dd,blockquote{text-wrap:pretty}
html{scroll-behavior:smooth}
::selection{background:var(--ambra);color:var(--notte)}
.contenuto{font-variant-numeric:lining-nums}
.descad p+ul,.descad p+ol{margin-top:-.2em!important}

/* 2 Link: sottolineatura sottile che si accende al passaggio -------------------------------------------------- */
a{transition:color .18s ease,text-decoration-color .18s ease,background-color .18s ease,border-color .18s ease,box-shadow .18s ease}
.descad a,.descad a strong,.descad a b,.descad a u,.descad a span,.contenuto form a,.consenso-testo a{text-decoration-thickness:1px;text-decoration-color:rgba(31,86,216,.38)}
.descad a:hover,.contenuto form a:hover,.consenso-testo a:hover{text-decoration-color:currentColor}
.link-freccia::after,.ambito-corpo em::after{display:inline-block;transition:transform .2s var(--ease-out,ease)}
.link-freccia:hover::after,.ambito:hover .ambito-corpo em::after{transform:translateX(4px)}
.percorso>span[aria-hidden]{color:rgba(255,255,255,.4)}
.percorso a{border-bottom:1px solid transparent}
.percorso a:hover{border-bottom-color:currentColor}

/* 3 Tastiera: anello visibile e coerente ovunque --------------------------------------------------------------- */
:focus-visible{outline:2px solid var(--blu);outline-offset:3px;border-radius:6px}
.eroe :focus-visible,.fascia :focus-visible,.invito :focus-visible,.piede :focus-visible,.box-scuro :focus-visible{outline-color:var(--ambra)}
.ambito:focus-visible,.notizia:focus-visible,.servizio:focus-visible,.comuni-griglia a:focus-visible{outline-offset:4px;border-radius:var(--raggio)}

/* 4 Pulsanti: rilievo leggero, pressione, ombra che cresce ------------------------------------------------- */
.btn,.button,input[type=submit],button[type=submit]{transition:filter .18s,transform .18s var(--ease-out,ease),box-shadow .18s}
.btn:active,.button:active,input[type=submit]:active,button[type=submit]:active{transform:translateY(0);filter:brightness(.97)}
.btn-ambra:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 10px 24px rgba(242,173,18,.38)}
.btn-blu:hover,.button:hover,input[type=submit]:hover,button[type=submit]:hover{box-shadow:0 10px 24px rgba(31,86,216,.3)}
.btn-vetro:hover{background:rgba(255,255,255,.18);box-shadow:inset 0 0 0 1.5px #fff}
.btn-filo:hover{background:var(--cielo)}
.servizi-rapidi a,.fatti li,.pillole a,.subcatlink,.comuni-distretti a{transition:background-color .18s,border-color .18s,color .18s,transform .18s}
.servizi-rapidi a:hover,.pillole a:hover,.subcatlink:hover,.comuni-distretti a:hover{transform:translateY(-1px)}

/* 5 Testata e menu del computer (sopra 1180px; il menu del telefono non si tocca) -------------------------- */
@media (min-width:1181px){
	.menu>ul>li>a{transition:background-color .15s,color .15s}
	.apri-sotto .ico{transition:transform .2s ease}
	.ha-sotto:hover>.apri-sotto .ico,.ha-sotto:focus-within>.apri-sotto .ico{transform:rotate(180deg);color:var(--blu-2)}
	.sotto{padding:8px;border-radius:14px;box-shadow:0 22px 48px rgba(10,26,51,.16),0 2px 6px rgba(10,26,51,.05)}
	.sotto::before{content:"";position:absolute;left:0;right:0;top:-10px;height:10px}
	.sotto a{position:relative;transition:background-color .15s,color .15s,padding-left .15s}
	.sotto a:hover{padding-left:16px}
	.testata-cta{box-shadow:0 4px 12px rgba(242,173,18,.25)}
}
.tasto{transition:border-color .15s,color .15s,background-color .15s}
.tasto:hover{background:var(--cielo)}

/* 6 Fasce in cima alle pagine ---------------------------------------------------------------------------------- */
.fascia h1{text-shadow:0 2px 18px rgba(10,26,51,.35)}
.fascia-sotto{line-height:1.5}
.fascia::after,.eroe::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:linear-gradient(90deg,var(--ambra),rgba(253,188,49,0) 60%);z-index:0;pointer-events:none}

/* 7 Schede: stesso raggio, stessa ombra, stesso movimento ------------------------------------------------------ */
:root{--ombra-lieve:0 1px 2px rgba(10,26,51,.04),0 6px 18px rgba(10,26,51,.04);--ombra-su:0 18px 40px rgba(10,26,51,.12),0 3px 8px rgba(10,26,51,.05)}
.obiettivi li,.ambito,.notizia,.servizio,.paragr,.catbox,.dati-luogo div,.box,.indice-comuni section,.comuni-griglia a,form.newuser{box-shadow:var(--ombra-lieve)}
.ambito,.notizia,.servizio,.paragr,.comuni-griglia a{transition:transform .25s var(--ease-out,ease),box-shadow .25s,border-color .25s}
.ambito:hover,.notizia:hover,.servizio:hover,.paragr:hover,.comuni-griglia a:hover{transform:translateY(-3px);box-shadow:var(--ombra-su)}
.obiettivi li{transition:box-shadow .25s,transform .25s var(--ease-out,ease)}
.obiettivi li:hover{box-shadow:var(--ombra-su);transform:translateY(-2px)}
.lettera{box-shadow:inset 0 0 0 1px rgba(31,86,216,.12)}
.obiettivi li:first-child .lettera{box-shadow:inset 0 0 0 1px rgba(242,173,18,.3)}
.ambito-foto::after{content:"";position:absolute;inset:auto 0 0;height:40%;background:linear-gradient(180deg,rgba(10,26,51,0),rgba(10,26,51,.18));pointer-events:none}
.ambito-corpo{padding:20px 22px 22px}
.paragr-foto img{transition:transform .4s var(--ease-out,ease)}
.paragr-foto{overflow:hidden;border-radius:10px}
.paragr:hover .paragr-foto img{transform:scale(1.04)}
.passi li::before{transition:transform .25s var(--ease-out,ease)}
.passi li:hover::before{transform:scale(1.08)}
.invito{box-shadow:0 24px 50px rgba(10,26,51,.18)}

/* 8 Colonna a lato ---------------------------------------------------------------------------------------------- */
.box{padding:24px}
.box h2{padding-bottom:12px;margin-bottom:4px;border-bottom:1px solid var(--filo)}
.box-scuro h2{border-bottom-color:rgba(255,255,255,.14)}
.notizie-lato a{margin:0 -10px;padding:12px 10px;border-radius:10px;transition:background-color .15s}
.notizie-lato a:hover{background:var(--carta)}
.notizie-lato li+li{border-top-color:#edf1f7}
.comuni-lato a::before{transition:transform .18s,background-color .18s}
.comuni-lato a{transition:color .15s,padding-left .18s}
.comuni-lato a:hover{padding-left:22px}
.comuni-lato a:hover::before{background:var(--blu);transform:scale(1.2)}
.box .link-freccia{display:inline-block;margin-top:4px}

/* 9 Testi delle pagine ----------------------------------------------------------------------------------------- */
.descad strong,.descad b{font-weight:650}
.descad img{box-shadow:0 10px 28px rgba(10,26,51,.1)}
.descad blockquote,.descad .al-legge{box-shadow:var(--ombra-lieve)}
.manage{box-shadow:var(--ombra-lieve)}
.manage a{text-decoration:none}
.manage a:hover{text-decoration:underline}
/* titoli secondari ancora col vecchio carattere: come gli altri titoli dei contenuti (maiuscolo spaziato, barretta ambra) */
form.newuser h2.titlepage,.indice-comuni h2{font-family:var(--f-testo);font-weight:700;text-transform:uppercase;letter-spacing:.04em;font-size:clamp(18px,1.8vw,21px);line-height:1.3;color:var(--notte)}
form.newuser h2.titlepage::before,.indice-comuni h2::before{content:"";display:block;width:34px;height:3px;border-radius:2px;background:var(--ambra);margin-bottom:12px}
.indice-comuni h2{margin-bottom:14px}
.indice-comuni a{display:inline-block;padding:2px 0;color:var(--notte)}
.indice-comuni a:hover{color:var(--blu)}
.maincatlink{font:700 17px/1.3 var(--f-testo);text-transform:uppercase;letter-spacing:.04em}
.listlinkads a{transition:color .15s,padding-left .18s}
.listlinkads a:hover{padding-left:10px}

/* 10 Moduli ------------------------------------------------------------------------------------------------------ */
input[type=text],input[type=email],input[type=password],input[type=search],input[type=tel],input[type=number],input[type=url],select,textarea{transition:border-color .15s,box-shadow .15s,background-color .15s}
input[type=text]:hover,input[type=email]:hover,input[type=password]:hover,input[type=search]:hover,input[type=tel]:hover,input[type=number]:hover,input[type=url]:hover,select:hover,textarea:hover{border-color:#a9b9d0}
::placeholder{color:#8a97aa;opacity:1}
select:not([multiple]):not([size]){-webkit-appearance:none;appearance:none;padding-right:42px;cursor:pointer;
	background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231642b0' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat:no-repeat;background-position:right 14px center;background-size:18px}
input[type=checkbox],input[type=radio]{cursor:pointer}
form.newuser label{cursor:pointer}
form.newuser{border-top:3px solid var(--ambra)}
form.newuser .red{font-weight:700}
form.newuser .row>.large-4{font-size:15.5px}
form.newuser input[type=submit]{min-width:220px}

/* 11 Paginazione ------------------------------------------------------------------------------------------------- */
.pagerow a{transition:border-color .15s,color .15s,background-color .15s}
.pagerow a:hover{border-color:var(--blu);color:var(--blu-2);background:var(--cielo)}
.pageclassselect{box-shadow:0 4px 12px rgba(31,86,216,.25)}

/* 12 Piede --------------------------------------------------------------------------------------------------------- */
.piede{background:linear-gradient(180deg,var(--notte),#081429);position:relative}
.piede::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,var(--ambra),rgba(253,188,49,0) 70%)}
.piede h2{display:flex;align-items:center;gap:10px}
.piede h2::after{content:"";width:22px;height:2px;border-radius:2px;background:var(--ambra);opacity:.85}
.piede ul a{display:inline-block;transition:color .15s,transform .18s var(--ease-out,ease)}
.piede ul a:hover{transform:translateX(3px)}
.piede address a{color:#fff;border-bottom:1px solid rgba(253,188,49,.5)}
.piede address a:hover{border-bottom-color:var(--ambra)}
.piede-comuni p{color:#8396b2}
.piede-comuni a{color:#b9c8dc}
.fondo-in{color:#7f93b0}
.fondo-in a,.fondo-in .link-piede{color:#b9c8dc}

/* 13 Telefono (escluso il menu) ----------------------------------------------------------------------------------- */
@media (max-width:640px){
	.piede-in{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 20px;padding-block:44px 24px}
	.piede-in>.piede-marchio{grid-column:1/-1}
	.piede-in>div:last-child:nth-child(even){grid-column:1/-1}
	.piede ul{gap:9px}
	.piede ul a{padding:2px 0}
	.fondo-in{flex-direction:column;align-items:flex-start}
	.box{padding:20px}
	.sez-testa{margin-bottom:24px}
	form.newuser input[type=submit]{width:100%}
	.ambito-foto{aspect-ratio:640/210}
	.fascia::after,.eroe::after{height:2px}
}
@media (hover:none){
	.ambito:hover,.notizia:hover,.servizio:hover,.paragr:hover,.comuni-griglia a:hover,.obiettivi li:hover{transform:none}
	.piede ul a:hover{transform:none}
	.listlinkads a:hover{padding-left:4px}
	.comuni-lato a:hover{padding-left:18px}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* ===== Gestione sul telefono (23/10): il menu si apre sotto la barra e non dietro.
   Chrome applica align-self:start anche agli elementi fixed in una griglia: con il menu piu' alto dello schermo
   lo spostava in cima (sotto la barra) e ignorava top/bottom. Ora si allunga tra barra e fondo e scorre. ===== */
@media (max-width:960px){
	.layout-gestione .g-lato{align-self:stretch;top:60px;bottom:0;height:auto;overscroll-behavior:contain;padding-bottom:max(18px,env(safe-area-inset-bottom));box-shadow:0 0 0 100vmax rgba(10,26,51,.45)}
	.g-menu-aperto{overflow:hidden}
	.g-menu-aperto .gt-menu{background:var(--ambra);color:var(--notte)}
	.g-testata{gap:10px;padding:0 12px}
	.gt-destra{gap:6px}
}
@media (max-width:520px){
	.gt-chi{display:none}
	.gt-sito,.gt-esci{padding:8px 10px}
	.gt-marchio{font-size:17px;min-width:0}
}

/* classifica delle pagine piu' viste fino al 22/10/2026 (al_badge_classifica in includes/al-tema.php) */
.g-classifica{display:inline-block;margin-left:6px;padding:2px 8px;border-radius:999px;background:#eef2f8;color:#334155;font:600 12px var(--f-testo);white-space:nowrap;vertical-align:middle}
.g-classifica-top{background:#fff4d6;color:#7a5300}
.g-classifica-nota{margin:0 0 18px;padding:12px 16px;border-radius:12px;background:#eef2f8;color:#334155;font-size:15px}
.g-classifica-nota.g-classifica-top{background:#fff4d6;color:#5c3f00}

/* ===== Pagine semplici della gestione rifatte (22/10 notte): IP bloccati, Parole vietate, Parole d'allarme, Utenti ===== */
.g-main form.g-riga-modulo{background:none;border:0;border-radius:0;box-shadow:none}
.g-main form.g-riga-modulo{display:flex;flex-wrap:wrap;align-items:flex-end;gap:14px;padding:18px}
.g-riga-modulo .campo-g{flex:1 1 240px;min-width:0}
.g-riga-modulo .btn{flex:none}
.g-riga-modulo select{min-height:46px}
.g-dove{display:flex;flex-wrap:wrap;gap:8px 18px;border:0;margin:0;padding:0 0 10px;flex:1 1 240px}
.g-dove legend{font-size:14px;padding:0;margin:0 0 6px}
.g-nota-modulo{margin:-6px 18px 16px;font-size:14px}
.pann-t h2+.g-conta{margin-right:auto;margin-left:-2px}
.g-conta{min-width:28px;padding:2px 10px;border-radius:999px;background:#eef2f8;color:#334155;font:700 13px var(--f-testo);text-align:center}
.pann-t .g-filtro{margin-left:auto;width:min(260px,100%);height:38px;padding:0 12px;border:1px solid var(--filo);border-radius:9px;font:inherit;font-size:14.5px}
.g-vuoto{margin:0;padding:22px 18px;color:var(--tenue)}
.g-elenco{list-style:none;margin:0;padding:0}
.g-elenco li{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 18px;border-bottom:1px solid #edf1f7}
.g-elenco li:last-child{border-bottom:0}
.g-elenco li:hover{background:#fafcff}
.g-main .g-elenco form,.g-main .g-cella-az form{margin:0;padding:0;border:0;border-radius:0;background:none;box-shadow:none}
.g-cella-az{text-align:right;white-space:nowrap;width:1%}
.g-main button.g-az{cursor:pointer}
.g-main .tab td small{display:block;margin-top:2px;font-size:13px}
@media (max-width:640px){
	.g-main form.g-riga-modulo{padding:14px}
	.g-riga-modulo .btn{width:100%;justify-content:center}
	.g-elenco li{padding:10px 14px}
}

/* ===== Sezione Attivita' (includes/al-attivita.php): sotto il testo delle pagine ===== */
.att-blocco{margin:44px 0 0;padding:34px 0 0;border-top:1px solid var(--filo)}
.att-titolo,.contenuto h2.att-titolo{margin:0 0 20px;font:600 13px/1.2 var(--f-testo);letter-spacing:.14em;text-transform:uppercase;color:var(--tenue)}
.att-titolo::after,.contenuto h2.att-titolo::after{content:"";display:inline-block;width:22px;height:2px;margin-left:10px;vertical-align:middle;background:var(--ambra)}
.contenuto .att-ambiti{grid-template-columns:repeat(2,minmax(0,1fr))}
.att-ambiti .ambito-corpo strong{font-size:19px}
.att-articoli,.contenuto ul.att-articoli{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.att-articoli li,.contenuto ul.att-articoli li{margin:0;padding:0}
.att-articoli li::before{content:none!important}
.att-articoli a{display:flex;gap:14px;align-items:flex-start;padding:16px 18px;background:#fff;border:1px solid var(--filo);border-radius:14px;text-decoration:none;color:inherit;transition:border-color .2s,box-shadow .2s,transform .2s}
.att-articoli a:hover{border-color:#c9d6ea;box-shadow:var(--ombra);transform:translateY(-2px)}
.att-articoli strong{display:block;font:600 16.5px/1.35 var(--f-testo);color:var(--notte)}
.att-articoli small{display:block;margin-top:4px;font-size:14.5px;line-height:1.5;color:var(--tenue)}
.att-icona{flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:10px;background:#eef3fb;color:var(--blu-2)}
.att-icona .ico{width:20px;height:20px}
.att-chips,.contenuto ul.att-chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.att-chips li,.contenuto ul.att-chips li{margin:0;padding:0}
.att-chips li::before{content:none!important}
.att-chips a{display:inline-flex;align-items:center;gap:10px;padding:6px 16px 6px 6px;background:#fff;border:1px solid var(--filo);border-radius:999px;text-decoration:none;color:var(--notte);font:600 15px var(--f-testo);transition:border-color .2s,background .2s}
.att-chips a:hover{border-color:var(--ambra);background:#fffaf0}
.att-chips img{width:44px;height:30px;object-fit:cover;border-radius:999px}
.att-invito{margin:44px 0 0}
.contenuto .att-invito .invito-in{grid-template-columns:minmax(0,1fr);padding:30px 32px}
.contenuto .att-invito .btn{justify-self:start}
@media (max-width:640px){
	.contenuto .att-ambiti{grid-template-columns:minmax(0,1fr)}
	.att-blocco{margin-top:34px;padding-top:26px}
	.contenuto .att-invito .invito-in{padding:24px 20px}
	.contenuto .att-invito .btn{justify-self:stretch;justify-content:center}
}