/* certcomp.css - personalizzazioni grafiche di CertComp sopra css/site.css (che resta quello del modello).
   Contiene: intestazione chiara con logo, menu a piu' livelli, riquadro newsletter, informazioni nel piè di pagina,
   adattamenti dei contenuti convertiti dal sito statico (.cc-content). */

/* ---------- INTESTAZIONE: sfondo chiaro (il logo e' blu scuro) ---------- */
header{background:#fff; box-shadow:0 2px 10px rgba(7,41,77,.12); border-bottom:3px solid var(--teal);}
.header-inner{padding:8px 20px;}
.brand{color:var(--navy); gap:12px;}
.brand-logo{height:60px; width:auto; display:block;}
.brand small.brand-tag{display:block; max-width:150px; font-family:var(--font-body); font-weight:600; font-size:11px; line-height:1.25; color:var(--navy); letter-spacing:.3px; text-transform:uppercase;}
nav.mainmenu > ul > li > a{color:var(--navy-deep); font-size:14.5px;}
nav.mainmenu > ul > li > a:hover, nav.mainmenu > ul > li.active > a, nav.mainmenu > ul > li > a.active-link{background:var(--gray-light); color:var(--navy);}
nav.mainmenu .submenu{border-top:3px solid var(--teal);}
.nav-toggle{border-color:var(--navy);}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after{background:var(--navy);}
.nav-toggle.open span{background:transparent;}

/* ---------- SOTTOMENU A PIU' LIVELLI ----------
   1° livello: pannello sotto la voce; 2° livello: si apre di lato; dal 3° in poi le voci si aprono in verticale
   dentro il pannello (evita pannelli fuori dallo schermo). */
nav.mainmenu .submenu li{position:relative;}
nav.mainmenu .submenu .submenu{left:100%; top:-11px; border-top:0; border-left:3px solid var(--teal);}
nav.mainmenu .submenu .submenu.flip{left:auto; right:100%; border-left:0; border-right:3px solid var(--teal);}
nav.mainmenu .submenu li > a.has-children{padding-right:26px; position:relative;}
nav.mainmenu .submenu li > a.has-children::after{content:'\203A'; position:absolute; right:10px; top:50%; transform:translateY(-50%); font-size:18px; color:var(--gray);}
nav.mainmenu .submenu li > a{white-space:normal;}
nav.mainmenu .submenu{min-width:250px; max-width:340px;}
nav.mainmenu > ul > li > .submenu.flip-r{left:auto; right:0;}
@media (min-width:1101px){
  nav.mainmenu .submenu .submenu .submenu{
    position:static; opacity:1; visibility:visible; transform:none; box-shadow:none; border:0; background:transparent;
    min-width:0; max-width:none; display:none; padding:0 0 4px 14px; margin:0;
  }
  /* dal 3° livello le voci si aprono con un clic (non al passaggio del mouse: la lista non "salta" sotto il cursore) */
  nav.mainmenu .submenu .submenu li.open > .submenu{display:block; animation:ccMenuOpen .16s ease;}
  nav.mainmenu .submenu .submenu li.open > a.has-children{color:var(--teal);}
  nav.mainmenu .submenu .submenu li.open > a.has-children::after{transform:translateY(-50%) rotate(90deg);}
  nav.mainmenu .submenu .submenu li > a.has-children{cursor:pointer;}
}

@media (max-width:1100px){
  .header-inner{padding:8px 14px;}
  .brand-logo{height:48px;}
  nav.mainmenu{top:72px; height:calc(100vh - 72px);}
  nav.mainmenu > ul > li > a{color:#fff;}
  nav.mainmenu > ul > li > a:hover{background:rgba(255,255,255,.08); color:#fff;}
  nav.mainmenu .submenu, nav.mainmenu .submenu .submenu{border:0; max-width:none; padding:2px 0 2px 14px;}
  nav.mainmenu .submenu li > a{color:#cfe0ea; padding:9px 11px;}
  nav.mainmenu .submenu li > a.has-children::after{content:'+'; right:8px; color:#cfe0ea; font-size:16px;}
  nav.mainmenu .submenu li.expanded > a.has-children::after{content:'\2013';}
  nav.mainmenu li.expanded > .submenu{display:block;}
}
@media (max-width:480px){
  .brand small.brand-tag{display:none;}
  .brand-logo{height:44px;}
}

/* ---------- RIQUADRO NEWSLETTER (piè di pagina) ---------- */
.newsletter-box{max-width:var(--maxw); margin:0 auto; padding:10px 20px 40px;}
.newsletter-inner{
  background-color:var(--navy-deep); background-size:cover; background-position:center; border-radius:14px;
  padding:34px 40px; display:flex; flex-wrap:wrap; gap:24px; align-items:center; justify-content:space-between; color:#fff;
}
.newsletter-inner .nl-text{flex:1 1 320px;}
.newsletter-inner h2{margin:0 0 8px; font-size:28px; color:#fff; text-transform:none;}
.newsletter-inner p{margin:0; color:#dbe8f0;}
.nl-form{flex:1 1 380px; display:flex; flex-wrap:wrap; gap:10px; position:relative;}
.nl-form input[type=email]{flex:1 1 230px; padding:13px 16px; border:0; border-radius:30px; font:inherit; font-size:15px;}
.nl-form .btn{border:0; cursor:pointer; padding:13px 26px; border-radius:30px;}
.nl-form .nl-priv{flex:1 1 100%; font-size:12.5px; color:#cfe0ea;}
.nl-form .nl-priv a{color:#fff; text-decoration:underline;}
.nl-form .nl-msg{flex:1 1 100%; background:#e8f6ee; color:#1e6b3c; border-radius:8px; padding:9px 14px; font-size:14px;}
.nl-form .nl-msg.nl-err{background:#fdecea; color:#c0392b;}
.nl-hp{position:absolute !important; left:-9999px !important; width:1px; height:1px; opacity:0;}

/* ---------- PIE' DI PAGINA: informazioni di contatto ---------- */
.footer-info{max-width:var(--maxw); margin:0 auto; padding:18px 20px 6px; text-align:center; font-size:14px; line-height:1.7; color:#cfe0ea;}
.footer-info p{margin:0;}
.footer-info a{color:#fff; text-decoration:underline;}
.footer-top .social a{color:#fff;}

/* ---------- CONTENUTI CONVERTITI (.cc-content) ---------- */
main:has(> .cc-content){max-width:none; padding:0 0 60px;}
.cc-content{font-family:var(--font-body); color:#151515; font-size:16px; line-height:1.5;}
.cc-content .container{width:100%; max-width:var(--maxw); padding-left:20px; padding-right:20px; margin-left:auto; margin-right:auto;}
.cc-content img{max-width:100%; height:auto;}
.cc-content .page-banner{margin:0 0 30px; padding-top:0 !important; background:transparent !important;}
.cc-content .page-banner-bg{background-size:cover; background-position:center; padding:56px 0; background-color:var(--navy-deep);}
.cc-content .page-banner .title{color:#fff; font-size:clamp(28px,4vw,40px); margin:0;}
.cc-content .features-area, .cc-content .top-courses-area{overflow:hidden;}
.cc-content .btn{font-family:inherit;}
.cc-content .nav-tabs, .cc-content .nav-pills{display:flex; flex-wrap:wrap; list-style:none; padding-left:0;}
.cc-content table{max-width:100%;}
@media (max-width:760px){
  .newsletter-inner{padding:26px 20px;}
  .cc-content .page-banner-bg{padding:40px 0;}
}

@keyframes ccMenuOpen{from{opacity:0; transform:translateY(-4px);} to{opacity:1; transform:none;}}

/* pulsante menu mobile: le due barre aggiuntive devono avere la larghezza della barra centrale */
.nav-toggle span::before, .nav-toggle span::after{left:0; right:0;}

/* ---------- ANIMAZIONI (come nel vecchio sito: animate.css + WOW + slick) ---------- */
@keyframes ccFadeInLeft{from{opacity:0; transform:translate3d(-20%,0,0);} to{opacity:1; transform:none;}}
@keyframes ccFadeInUp{from{opacity:0; transform:translate3d(0,40%,0);} to{opacity:1; transform:none;}}
@keyframes ccFadeInUpBig{from{opacity:0; transform:translate3d(0,100px,0);} to{opacity:1; transform:none;}}
/* banner: titolo da sinistra (0,2s), testo, pulsante dal basso (1s) a ogni cambio di slide */
.slide.active .hs-eyebrow, .slide.active h2{animation:ccFadeInLeft 1s .2s both;}
.slide.active p, .slide.active .hs-chips{animation:ccFadeInUp 1s .6s both;}
.slide.active .btn{animation:ccFadeInUp 1s 1s both;}
/* riquadri dei contenuti: compaiono dal basso quando entrano nello schermo (js/animazioni.js) */
.cc-content{overflow:clip;}
.cc-content .cc-wait{opacity:0;}
.cc-content .cc-in{animation:ccFadeInUpBig 1s both;}
@media (prefers-reduced-motion:reduce){
  .slide.active .hs-eyebrow, .slide.active h2, .slide.active p, .slide.active .hs-chips, .slide.active .btn, .cc-content .cc-in{animation:none;}
  .cc-content .cc-wait{opacity:1;}
}