/* sandroronca.it — veste grafica delle lezioni interattive.
   Si carica DOPO lo stile originale della lezione e ne cambia solo l'aspetto:
   posizione e dimensioni della lavagna restano quelle di sempre, perché gli script ci contano. */
:root{
  --garnet:#12294c; --garnet-2:#1d4174; --night:#0a1628; --copper:#1f5fa8; --copper-2:#163f72; --accent:#d9531e; --gold:#f6c453;
  --paper:#fbfaf6; --cream:#eef2f8; --ink:#1d2433; --muted:#5b6475; --line:#e4e1d8; --white:#ffffff;
  --sans:Arial,Helvetica,"Liberation Sans",sans-serif;
  --serif:Arial,Helvetica,"Liberation Sans",sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
}
html{background:var(--paper)}
body{margin:0 !important;max-width:none !important;width:auto !important;background:var(--paper);color:var(--ink);font-family:var(--sans) !important}
/* la vecchia testata a linguette lascia il posto al menu del sito */
.main .tophead,.main .tophead2,.main .belowheader{display:none !important}
.main{width:auto !important;max-width:1320px;margin:0 auto !important;padding:0 20px;height:auto !important;min-height:0 !important}
.lesson-bar{display:flex;align-items:baseline;justify-content:space-between;gap:8px 20px;flex-wrap:wrap;padding:14px 0 10px;border-bottom:1px solid var(--line);margin-bottom:14px}
.lesson-bar .crumbs{font-family:var(--mono);font-size:12.5px;color:var(--muted);letter-spacing:.03em}
.lesson-bar .crumbs a{color:var(--copper) !important;text-decoration:none}
.lesson-bar h1{margin:0;font-family:var(--sans);font-size:20px;font-weight:600;color:var(--garnet)}
.lesson-bar .other{font-family:var(--mono);font-size:12.5px}

/* lavagna */
#mediabox{background:var(--white);border:1px solid var(--line);border-radius:10px;padding:8px;margin-left:0 !important;box-sizing:content-box}
#mediabox input[type=button],#mediabox button,#form1 input[type=button]{font:500 13.5px var(--sans);color:var(--garnet);background:var(--white);border:1.5px solid var(--garnet);border-radius:6px;padding:5px 10px;margin:2px 1px;cursor:pointer}
#mediabox input[type=button]:hover,#form1 input[type=button]:hover{background:var(--garnet);color:#fff}
#mediabox span[style*="8pt"]{color:var(--muted) !important}

/* testo */
#testobox{font-family:var(--serif) !important;font-size:16.5px !important;line-height:1.65 !important;color:var(--ink);background:var(--white);border:1px solid var(--line);border-radius:10px;padding:8px 24px 24px !important;box-sizing:border-box}
#testobox h1,#testobox h2,#testobox h3{font-family:var(--sans) !important;color:var(--garnet) !important;font-style:normal !important;line-height:1.25}
#testobox > span:first-of-type[style*="2.5em"]{font-family:var(--sans);font-style:normal !important;color:var(--garnet);font-weight:700 !important;font-size:2.1em !important}
#testobox b,#testobox strong,#testobox span[style*="bold"]{color:var(--garnet)}
a:link,a:visited{color:var(--copper) !important}
a:hover{color:var(--copper-2) !important}
#testobox a[href^="javascript"]{color:var(--copper) !important;border-bottom:1px dotted var(--copper);text-decoration:none !important}
#testobox a[href^="javascript"]:hover{background:var(--cream)}
#testobox img{max-width:100%}
.slidecontainer{font-family:var(--sans)}
input[type=range]{accent-color:var(--garnet)}
/* finestra "attendi..." */
#popup_container{font-family:var(--sans) !important;border:1px solid var(--line) !important;border-radius:10px !important;background:var(--white) !important;color:var(--ink) !important}
#popup_title{background:var(--garnet) !important;color:#fff !important;border:0 !important}
.foot{clear:both}
.masthead,.nav,.foot{font-family:var(--sans)}
.nav a:link,.nav a:visited{color:#e3ecf8 !important}
.nav a[aria-current="page"]{color:var(--gold) !important}
.nav .lang:link,.nav .lang:visited{color:var(--gold) !important}
.lesson-bar .crumbs a{color:var(--copper) !important}
.foot a:link,.foot a:visited{color:#fff !important}
.masthead a:link,.masthead a:visited{color:#fff !important}
/* sfondo blu come il resto del sito; lavagna e testo restano su fondo chiaro */
html{background:var(--night)}
body{background:var(--night) radial-gradient(ellipse 120% 80% at 70% 0%,var(--garnet-2) 0%,var(--garnet) 40%,var(--night) 85%) fixed !important}
.lesson-bar{border-bottom-color:rgba(255,255,255,.15)}
.lesson-bar h1{color:#fff}
.lesson-bar .crumbs{color:#a9bdd8}
.lesson-bar .crumbs a:link,.lesson-bar .crumbs a:visited,.lesson-bar .other a:link,.lesson-bar .other a:visited{color:var(--gold) !important}
#mediabox,#testobox{box-shadow:0 18px 40px -24px rgba(0,0,0,.6);border-color:transparent}
#form1 form{display:flex;flex-wrap:wrap;gap:4px}
#form1 input[type=button]{font-size:13px !important;padding:4px 8px !important;margin:0 !important;white-space:nowrap}
.main > br{display:none}
/* riga del copyright sotto la lavagna: staccata da caselle, cursori e pulsanti */
.copy-lezione{display:block;clear:both;margin:26px 0 8px !important;text-align:center;color:#5b6577;line-height:1.6}
/* lavagna e testo affiancati alla stessa altezza: la lavagna prende l'altezza del suo contenuto,
   il testo si adegua (ggb-bridge.js) e scorre al suo interno */
#mediabox{height:auto !important;overflow:hidden !important}
#testobox{overflow-y:auto !important;margin-top:0 !important}
/* link nel testo delle lezioni in grassetto */
#testobox a[href]{font-weight:700 !important}
/* colore dei link nel testo delle lezioni: per cambiarlo basta modificare questi due valori */
:root{--link-lezione:#c62828;--link-lezione-hover:#8e0000}
#testobox a[href]:link,#testobox a[href]:visited{color:var(--link-lezione) !important;border-bottom-color:var(--link-lezione) !important}
#testobox a[href]:hover{color:var(--link-lezione-hover) !important;background:#fdecea}
/* ---- impaginazione elastica: lavagna e testo affiancati in proporzione fissa ----
   la lavagna occupa il 47% della larghezza e si ridimensiona con la finestra, il testo il resto;
   sotto i 760 px (telefono, finestra molto stretta) il testo va sotto la lavagna */
.main{display:flex !important;flex-wrap:wrap;gap:18px;align-items:flex-start;box-sizing:border-box}
.main > *{flex:1 1 100%;min-width:0}
.main > script,.main > style{display:none}
#mediabox{flex:0 1 47% !important;width:auto !important;max-width:none !important;margin:0 !important;float:none !important;box-sizing:border-box;padding:8px !important}
#testobox{flex:1 1 0 !important;width:auto !important;max-width:none !important;margin:0 !important;float:none !important}
#mediabox #lav1{width:100% !important;max-width:none !important}
#mediabox svg.ggb-fig{width:100% !important;height:auto !important;max-width:none !important}
#mediabox #form1,#mediabox #form1 form{width:auto !important;max-width:100%}
#testobox svg.ggb-fig{max-width:100% !important;height:auto !important}
@media (max-width:760px){
  #mediabox,#testobox{flex:1 1 100% !important}
}
/* scelte di Sandro (dalla copia "Sito Work in Progreess"): menu in bianco, link nel testo in semigrassetto */
.nav a[aria-current="page"]{color:#fff !important}
.nav .lang:link,.nav .lang:visited{color:#fff !important}
#testobox a[href]{font-weight:600 !important}