/************************************/
/* STILI SITO: COLORI BORDI E FONTS */
/************************************/

/* Tavolozza del sito. Stessi valori che prima erano scritti a mano regola per
   regola (screen.4.css): cambia solo che ora si governano da qui, come in
   CMS aWV Demo. La grafica resta quella di prima. */
:root {
    --color-body-text: #000;
    --color-text: #333;
    --color-accent: red;                        /* voce di menu corrente e passaggio del mouse */
    --color-overlay-light: rgba(255,255,255,0.8);
    --color-overlay-light-strong: rgba(255,255,255,0.9);
    --color-overlay-dark: rgba(43,43,43,0.8);
    --color-mobile-bar: #777;                   /* barra del menu su telefono (era quella di slicknav) */
    --color-session-text: #629D83;
    --color-session-text-dark: #003366;
    --color-header-accent: #CC0033;
    --color-header-menu-bg: #990000;
    --color-footer-text: #006FDA;
    --color-footer-evidence-bg: #003399;
    --color-company-link: #aaa;
    --color-focus-outline: #1a73e8;
    /* pulsanti di amministrazione: li disegna il framework (css/awvIcons.css),
       il colore lo decide il sito. #333399 e' quello dei vecchi pulsanti. */
    --awv-admin-bg: #333399;
    --awv-admin-text: #fff;
}

body{color:var(--color-body-text);background-color:#fff;font-size:100%;font-family:'Abel', sans-serif;margin:0 auto;padding:0;}
img{text-decoration:none;border-style:none;}

#global{background:var(--color-overlay-light);margin:0;padding:0;}

#bg{position:fixed;top:0;left:0;min-width:100%;min-height:100%;z-index:-5000;}
#clear{clear:both;}

/* messa a fuoco da tastiera sempre visibile */
:focus-visible{outline:2px solid var(--color-focus-outline);outline-offset:2px;}

/* BARRA LINGUA */
#flag{background:transparent;position:absolute;width:150px;height:27px;}
#flag ul.lang{text-align:right;float:right;margin:0;padding:2px 5px;}
#flag ul.lang li.flag{display:inline;margin-left:1px;padding:0 4px;}

/* SESSIONE UTENTE */
/* pointer-events:none sul contenitore (resta a piena larghezza solo come sfondo
   semi-trasparente) + pointer-events:auto sui soli link: cosi' la barra non
   blocca i click su logo e menu sottostanti nelle zone senza testo. */
#session{background:var(--color-overlay-light);color:var(--color-session-text) !important;position:absolute;width:100%;height:25px;top:0;right:0;margin:0;padding:0 150px 0 0;pointer-events:none;}
#session p{background:transparent;color:var(--color-session-text-dark) !important;font-size:0.6em;height:40px;margin:0 0 0 30px !important;padding:5px 0 0 0 !important;text-align:right;}
#session a{pointer-events:auto;}
#session img.logout{padding:0 10px;margin:0;max-width:16px;}

/* HEADER */
#headerbox{background:transparent;width:100%;clear:both;padding:0;}
#header{background:var(--color-overlay-light);border-radius:0;margin:0 auto;padding:0;clear:both;}
#header h1{color:#ccc;font-family:'Abel', sans-serif;font-size:2.0em;font-weight:bold;z-index:1;height:80px;margin:0 0 0 20px;}
#header h1 a,
#header h1 a:hover{color:#ccc;text-decoration:none;}
#header p{color:var(--color-header-accent);font-size:0.8em;line-height:1.1em;font-weight:bold;padding:15px 0 0 12px;}
#header ul.headmenu{background:var(--color-header-menu-bg);list-style:none;margin:55px 4px 0;padding:3px 5px 0;float:right;}
#header ul.headmenu li{font-size:0.7em;line-height:1.0em;display:inline;letter-spacing:0;margin:0 4px;padding:0 5px;}
#header ul.headmenu li a,
#header ul.headmenu li a:hover{color:#fff;font-weight:bold;text-decoration:none;text-transform:uppercase;}
#header img.logo{margin:3px 3px 3px 15px;max-height:70px;float:left;border-style:none;}

#header ul.logos{background:none;position:absolute;list-style:none;margin:5px 2px;padding:0;right:0;top:0;}
#header ul.logos li{display:inline;}
#header ul.logos li img{padding:0 3px;margin:0;top:0;}

/* SKIP LINK: fuori schermo di default, torna visibile quando riceve il focus da tastiera */
#header a#skipnav{position:absolute;left:-9000px;top:auto;}
#header a#skipnav:focus{left:10px;top:10px;width:auto;height:auto;background:#fff;color:#000;padding:8px 16px;z-index:2000;text-decoration:none;border-radius:3px;}

/* BREADCRUMB (markup del FW: <nav id="breadcrumbs"><ol class="navigator">).
   Spente nel config (MENU_BREADCRUMBS), come prima: le regole restano pronte. */
#breadcrumbs{background:var(--color-overlay-light);height:20px;clear:both;padding:7px 0 0;margin:0;}
#breadcrumbs ol.navigator{color:var(--color-text);font-size:0.7em;list-style:none;text-align:left;letter-spacing:1px;margin:0;padding:0 5px;}
#breadcrumbs ol.navigator li.head{display:inline;margin-left:1px;padding:0;}
#breadcrumbs ol.navigator li.item,
#breadcrumbs ol.navigator li.current{display:inline;margin-left:1px;padding:0 0 0 20px;}
#breadcrumbs ol.navigator li a{color:var(--color-text);font-weight:bold;text-decoration:none;margin-left:0;}
#breadcrumbs ol.navigator a:hover{color:var(--color-accent);text-decoration:underline;}

/* MAIN MENU': NAVLIST (markup del FW: <nav id="navcontainer"><button class="nav-toggle">...<ul id="navlist-list" class="navlist">) */
#navcontainer{background:transparent;padding:0;margin:0;position:absolute;width:100%;top:20px;text-align:center;}
#navcontainer ul.navlist{background:transparent;font-family:'Abel', sans-serif;font-size:1.2em;text-transform:uppercase;letter-spacing:2px;margin:0;padding:0 20px;list-style:none;position:relative;display:inline-table;}
#navcontainer ul.navlist:after{content:"";clear:both;display:block;}
#navcontainer ul.navlist li{float:left;}
#navcontainer ul.navlist li a{color:var(--color-text);}
#navcontainer ul.navlist li:hover a,
#navcontainer ul.navlist li.current a{color:var(--color-accent);}
#navcontainer ul.navlist li.evidence a{color:#fff;background:var(--color-overlay-dark);}
#navcontainer ul.navlist li a,
#navcontainer ul.navlist li.current a,
#navcontainer ul.navlist li.evidence a{display:block;text-decoration:none;}

/* Pulsante del menu su telefono, generato dal FW (aWVmenu) e gestito da
   js/navToggle.js: prende il posto di jQuery slicknav. Nascosto sugli schermi
   larghi, compare sotto i 769px (vedi le media query) con lo stesso aspetto del
   vecchio pulsante: riquadro bianco con tre lineette grigie su barra grigia. */
.nav-toggle{display:none;}

/* MAIN MENU': NAVLIST - DROPDOWN MENU'
   Niente display:none sul sottomenu: toglierebbe i link dal tab order e li
   renderebbe irraggiungibili da tastiera. Restano nel flusso, nascosti con
   max-height+overflow, cosi' anche il focus su un link interno li apre, non
   solo il passaggio del mouse (stesso schema di CMS aWV Demo). */
#navcontainer ul.navlist ul.subnav{opacity:0;max-height:0;overflow:hidden;background:#fff;list-style:none;border-radius:0;padding:0;position:absolute;top:100%;z-index:999;}
#navcontainer ul.navlist ul.subnav li{border-top:1px solid #eee;min-width:250px;font-size:0.8em;float:none;position:relative;}
#navcontainer ul.navlist ul.subnav li a{color:var(--color-text);text-align:left;padding:5px 40px;background:#fff;}
#navcontainer ul.navlist ul.subnav li a:hover{background:rgb(243,243,243);}

/* CONTENITORI */
#container01{background:transparent;margin:0 auto;padding:0;}
#container02{background:var(--color-overlay-light-strong);margin-right:auto;margin-left:auto;padding:0;overflow:auto;}
div#content{background:transparent;text-align:left;margin:0;min-height:440px;}
#login{text-align:left;width:100%;min-height:390px;}
#home{text-align:left;width:100%;}

/* NAVIGAZIONE VERTICALE - SOTTOMENU' */
#nav{background:transparent;font-family:'Abel', sans-serif;text-align:center;letter-spacing:2px;padding:0;margin:0;position:relative;width:100%;}
#nav h2{color:var(--color-text);font-size:1.4em;font-weight:bold;text-transform:uppercase;margin-top:25px;padding-left:0;}
#nav ul.menu{background:var(--color-overlay-light-strong);width:98%;text-align:center;list-style-type:none;padding:0 1%;margin:0;}
#nav ul.menu a{font-size:1.2em;line-height:1.2em;text-transform:uppercase;text-decoration:none;white-space:normal;list-style-type:none;list-style-image:none;display:list-item;}
#nav ul.menu li{display:inline-block;}
#nav ul.menu li.head a{background:transparent;border-radius:0;color:#fff;font-weight:700;text-transform:uppercase;text-align:center;padding:8px 10px 8px 20px;margin:0;}
#nav ul.menu li.title a,
#nav ul.menu li.item a{background:transparent;color:var(--color-text);font-weight:400;white-space:normal;padding:2px 7px;margin:0 3px;}
#nav ul.menu li.title a:hover,
#nav ul.menu li.item a:hover,
#nav ul.menu li.cur a{color:var(--color-accent);}

/* FOOTER */
#footerbox{background:transparent;clear:both;padding:0;}
#footer{background:var(--color-overlay-light-strong);margin:0 auto;clear:both;}
#footer p{color:var(--color-footer-text);}
#footer p.link a,
#footer p.link a:hover{color:#fff;background:var(--color-footer-text);}

#footer ul.footmenu{color:var(--color-text);background:transparent;text-align:center;font-family:'Abel', sans-serif;font-size:1.4em;letter-spacing:2px;list-style:none;padding:3px 5px 0;}
#footer ul.footmenu li{background:transparent;letter-spacing:0;display:inline;margin:0 4px;padding:0 5px 0 15px;}
#footer ul.footmenu li a{color:var(--color-text);background:transparent;font-weight:400;text-decoration:none;text-transform:lowercase;margin:4px 0 0;padding:4px 20px;}
#footer ul.footmenu li a:hover{color:#999;background:transparent;text-decoration:none;}
#footer ul.footmenu li.current a{color:#999;background:transparent;font-weight:400;text-transform:lowercase;text-decoration:none;}
#footer ul.footmenu li.evidence a{color:#fff;background:var(--color-footer-evidence-bg);text-decoration:none;}
#footer ul.footmenu li.evidence a:hover{color:var(--color-footer-text);background:var(--color-footer-evidence-bg);text-decoration:none;}
#footer ul.logos{background:transparent;list-style:none;margin:0 2px;padding:0;float:left;font-size:1.0em;line-height:1.2em;}
#footer ul.logos li{display:inline;}
#footer ul.logos li img{padding:0 3px;margin:0;top:0;}

/* Social Icons */
#social{background-color:transparent;margin:10px 0;text-align:center;}
#social ul.social{text-align:center;list-style:none;display:inline-block;margin:5px auto;}
#social ul.social li{padding:0;display:inline;position:relative;margin:0 10px;}
#social ul.social li img{width:32px;left:0;padding:0;margin:0;border:none;overflow:hidden;}

/* COMPANY */
#company{background:var(--color-overlay-light-strong);color:var(--color-text);border-radius:0;font-size:0.8em;text-align:center;clear:both;margin:0 auto 20px;padding:20px 0 5px;}
#company p{color:var(--color-text);text-align:center;font-size:0.7em;margin:0 auto;}
/* il grigio chiaro di prima (#aaa) su bianco non arrivava al contrasto minimo:
   il link resta riconoscibile per la sottolineatura al passaggio */
#company a{color:#767676;text-decoration:none;font-weight:400;}
#company a:hover{text-decoration:underline;}
#company strong{color:var(--color-text);font-weight:700;}
#company img{margin:0 10px;}
#company ul.logos{background:transparent;clear:both;list-style:none;text-align:center;margin:5px;padding:0;}
#company ul.logos li{background:transparent;display:inline;margin:0;}
#company ul.logos li img{padding:0 3px;margin:0;top:0;}

/* TELEFONO E TABLET VERTICALE (fino a 768px): il menu diventa la barra grigia in
   alto con il pulsante, sopra al logo, come faceva slicknav. */
@media only screen and (max-width: 768px) {
#header,
#search,
#container02,
#footer,
#company{width:100%;}
#session{right:auto;left:0;width:100%;padding:0;}
#social{margin:0;}
#social ul{padding:0;}
#social ul.social li img{height:32px;}

#headerbox{position:relative !important;z-index:0;display:flex;flex-direction:column;}
#header h1{text-align:center;height:80px;margin:0;}
#header img.logo{float:none;margin:3px auto;}

#flag{background:transparent;top:0;left:0;width:auto;margin:5px;}

#navcontainer{order:-1;position:static;width:auto;height:auto;background:var(--color-mobile-bar);padding:5px;text-align:right;}
.nav-toggle{display:inline-block;width:45px;height:31px;margin:3px 5px;padding:0;border:0;border-radius:4px;cursor:pointer;
            background:linear-gradient(#777,#777) center 9px/22px 3px no-repeat,
                       linear-gradient(#777,#777) center 14px/22px 3px no-repeat,
                       linear-gradient(#777,#777) center 19px/22px 3px no-repeat,
                       #fff;}
.nav-toggle span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
.nav-toggle:focus-visible{outline:2px solid #fff;outline-offset:2px;}
#navcontainer ul.navlist{display:none;position:static;width:auto;padding:0 10px 10px;font-size:1.6em;letter-spacing:2px;text-align:left;}
#navcontainer ul.navlist.is-open{display:block;}
#navcontainer ul.navlist li{float:none;}
#navcontainer ul.navlist li a,
#navcontainer ul.navlist li:hover a,
#navcontainer ul.navlist li.current a{color:#fff;background:transparent;padding:5px 10px;}
#navcontainer ul.navlist li a:hover{color:#222;background:#ccc;}
#navcontainer ul.navlist ul.subnav{opacity:1;max-height:none;overflow:visible;position:static;background:transparent;margin:0 0 0 20px;}
#navcontainer ul.navlist ul.subnav li{border:0;min-width:0;font-size:0.8em;}
#navcontainer ul.navlist ul.subnav li a,
#navcontainer ul.navlist ul.subnav li.current a{color:#fff;background:transparent;padding:5px 10px;}
#navcontainer ul.navlist ul.subnav li a:hover{color:#222;background:#ccc;}
#nav{display:none;}

#content{margin-left:0;}

#footer ul.footmenu{width:95%;margin:0;}
#footer ul.footmenu li{display:list-item;text-align:center;}
}

/* TABLET ORIZZONTALE E SCHERMI LARGHI (da 769px): menu orizzontale, sottomenu
   che si aprono al passaggio del mouse e al focus da tastiera */
@media only screen and (min-width: 769px) {
#header,
#search,
#container02,
#footer,
#company{width:100%;}

#flag{float:right;top:0;right:0;}

#navcontainer{height:0;}
#navcontainer ul.navlist li:hover > ul.subnav,
#navcontainer ul.navlist li:focus-within > ul.subnav{opacity:1;max-height:none;overflow:visible;}
#navcontainer ul.navlist li a,
#navcontainer ul.navlist li.current a,
#navcontainer ul.navlist li.evidence a{padding:5px 12px;}

#footer ul.footmenu{margin:0 4px;}
}

/* Codice per TABLET ORIZ 769 – 1024 px */
@media only screen and (min-width: 769px) and (max-width: 1024px) {
#header h1{height:90px;}
#navcontainer ul.navlist{font-size:1.4em;padding-left:15%;}
#navcontainer ul.navlist li a,
#navcontainer ul.navlist li.current a,
#navcontainer ul.navlist li.evidence a{padding:5px 10px;}
}