/* 
 * WEB BOOK CSS: tutti gli stili utilizzati nel web book rendering
 */

/* VARIABILI GLOBALI */
:root {
  --wb-width_col_indexes: 264px;
  --wb-base-font-size: 2.2rem;
  --wb-scuro: black;
  --wb-chiaro: white;
  --wb-color-link: #36f;
  --wb-bordo-riquadri: #aaa;
  --wb-topnavbar-height: 44px;
}

/*****************/
/* STILI GLOBALI */
/*****************/
.wb-align-left  { float:left }
.wb-align-right { float:right }
.wb-nsc         { display: none }

/* 1rem = 10px */
html { font-size: 64% }

body { margin:0; padding:0 }

hr {
  width: 94%;
  background: #0000CC;
  border: 0;
  color: #0000CC;
  height: 2px;
  margin: 4px auto;
}

/***************************************************************/
/* INIZIO DEFINIZIONE STRUTTURA GENERALE DELLA PAGINA WEB BOOK */
/***************************************************************/

.wb-supercontainer {
  width:100%;
  height: 100vh;
  max-width: 2000px;
  text-align: center;
  color: var(--wb-scuro);
  background-color: var(--wb-chiaro);
}

.wb-container {
  background-color: inherit;
  display: flex;
  justify-content: center;
  text-align: left;
}

.wb-column-index,
.wb-column-toc { 
  background-color: inherit;
  height: 100vh; /* fondamentale, se no sticky non funziona ~ vh = viewport height */
  overflow-x: hidden;
  overflow-y:auto;
  position: sticky;
  top: 0; /* fondamentale, se no sticky non funziona */
  bottom: 0;
  width: var(--wb-width_col_indexes);
  z-index:14;
}

.wb-column-index  { margin:0 8px 0 0 }
.wb-column-toc    { margin:0 0 0 8px }

.wb-column-content { 
  background-color: inherit;
  width: calc( 100% - var(--wb-width_col_indexes) * 2 - 12px ); 
  border-right: #00C solid 2px;
  border-left: #00C solid 2px;
}

.wb-margin-reader { }

.wb-container a:link,
.wb-container a:visited {
  color: var(--wb-color-link);
  border-bottom: 1px solid var(--wb-color-link);
  text-decoration:none;
}

/*****************************************************************/
/* INIZIO DEFINIZIONE STRUTTURA SINGOLI ELEMENTI INDICE WEB BOOK */
/*****************************************************************/
.wb-index-container {
  text-align: left;
  font-family: 'Open Sans', sans-serif;
  padding: 0 2px;
}

.wb-cover,
.wb-image-website {
  text-align: center;
}

.wb-image-website a:link {
  border: 0;
}

.wb-cover img,
.wb-image-website img {
  max-width: 84%;
  margin: 12px auto 0;
}

.wb-cover img { border: 1px solid #000 }

.wb-link-website {
  text-transform: uppercase;
  font-size: 1.32rem;
  text-align: center;
  font-weight: bold;
  margin-bottom:54px; 
}

.wb-index-items-container {
  margin: 6px 0;
  overflow: hidden;
}

.wb-index-text-header {
  text-align: center;
  font-size:1.4rem;
  font-weight: bold;
  margin:12px 0 6px;
  color: #009;
}

.wb-index-bookauthor {
  text-align: center;
  font-style: italic;
  font-size:1.8rem;
  margin: 12px 0 0;
}

.wb-index-booktitle {
  text-align: center;
  font-size:3.2rem;
  margin: 4px 0 6px;
  font-weight: bold;
}

.wb-index-booksubtitle {
  text-align: center;
  font-style: italic;
  font-size:2.2rem;
  margin: 4px 0 6px;
  padding: 4px;
}

.wb-index-string {
  text-align: center;
  font-weight: bold;
  font-size:1.8rem;
  margin: 4px 0 12px;
}

.wb-index-item {
  font-size:1.48rem;
  padding: 0 8px;
  margin-bottom: 10px;
}

/*******************************************/
/* INIZIO DEFINIZIONE STRUTTURA TOP NAVBAR */
/*******************************************/
.wb-topnavbar {
  position:fixed;
  left: 50%;
  transform: translate(-50%); 
  width:98%;
  height:var(--wb-topnavbar-height);
  z-index:12;
  overflow:visible;
  clear:both;
  text-align:center;
  background-color: var(--wb-chiaro);
  margin:0 auto;
}

.wb-topnavbar a:link,
.wb-topnavbar a:visited {
  text-decoration:none;
  border: 0;
}

.helper { display: inline-block; height: 100%; vertical-align: middle; }

.wb-topnavbar img {
  width:36px;
  margin-right: 12px;
  vertical-align: middle;
}

.wb-topnavbar-top-shadow {
  background-color: var(--wb-chiaro);
  overflow-x: hidden;
  position: sticky;
  clear: both;
  width: 98%;
  z-index:12;
  top: var(--wb-topnavbar-height);
  height:1px;
  box-shadow: 0px 2px 4px #111;
  border-bottom:#ddd solid 1px;
  margin: 0 auto;
}


/******************************************************************/
/* INIZIO DEFINIZIONE STRUTTURA SINGOLI ELEMENTI CONTENT WEB BOOK */
/******************************************************************/
.wb-content-data {
  background-color: inherit;
  font-family: "Noto Sans", "Helvetica", "Arial", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-variation-settings: "wdth" 100;
  /**/
  padding: 12px;
  margin:52px 0 0;
}

.wb-content-data h1 { 
  text-align: left;
  font-size: calc( var(--wb-base-font-size) + 1.6rem );
  color: #000;
  margin:0px 8px 24px;
  padding:6px;
  font-weight: bold;
  text-shadow: 0 1px 1px #969696;
  background-color: #F7FEE7;
  border:1px solid var(--wb-bordo-riquadri);
  border-radius: 12px;
}

.wb-content-data h2,
.wb-content-data h3,
.wb-content-data h4,
.wb-content-data h5,
.wb-content-data h6 {
  margin: 24px 0 12px 24px;
  padding: 0 0 2px;
  text-align: left;
  border-bottom: 1px solid #ddd;
  color:inherit;
  font-weight: bold;
}

.wb-content-data h2 { font-size: calc( var(--wb-base-font-size) + 1rem ) }
.wb-content-data h3 { font-size: calc( var(--wb-base-font-size) + 0.57rem ) }

.wb-content-data h4, 
.wb-content-data p, 
.wb-content-data a,
.wb-content-data del,
.wb-content-data u,
.wb-content-data li { 
  font-size: var(--wb-base-font-size); 
  color:inherit;
}

.wb-content-data a {
  background: url(../images/external.png) no-repeat right;
  padding-right:14px;
}

.wb-content-data p {
  padding: 0;
  margin: 16px 0 16px 6px;
  line-height: 1.54; 
  text-align: justify;
}

.wb-content-data strong {
  font-weight: bold;
  color:inherit;
  text-shadow: none;
}

.wb-content-data figure               { text-align: center; margin: 24px 0 }
.wb-content-data figure img           { max-width: 96% }
.wb-content-data figure img.border    { border:1px solid #000 }
.wb-content-data figure figcaption    { font-size:1.6rem }
.wb-content-data figure.wb-copertina  { float:left; margin:0 24px 24px 48px } 
.wb-content-data .wb-abstract         { margin: 12px 0 0 }

.wb-content-data .video {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width:100%;
  max-width:800px;
  margin: 36px auto;
}

.wb-content-data .video iframe {
   aspect-ratio: 16 / 9;
   width: 100% !important;
   height: 100% !important;
}

.wb-content-data .video .caption p,
.wb-content-data .video .link-video p,
.wb-content-data .video .link-video p a {
  font-size: 1.6rem;
  text-align: center;
}

.wb-content-data .video .link-video p::before { 
  content: 'LINK DIRETTO AL VIDEO:  ';  
  font-weight: bold;
}

.wb-content-data .bottone {
  display:flex;
  justify-content: center;
  border-radius:12px;
  border:1px solid #009;
  box-shadow: 4px 4px 4px #646464;
  background-color:#009;
  cursor: pointer;
  clear: both;
  text-align: center;
  color:yellow;
  width: 264px;
  margin: 12px auto;
}

.wb-content-data .bottone p {
  font-weight: bold;
  text-align: center;
  padding:6px;
  line-height: normal;
  margin: 0;
}

.wb-content-data .bottone a { background: none; padding-right: 0 }

.wb-content-data .bottone a:link,
.wb-content-data .bottone a:visited {
  color: inherit;
  border-bottom:0;
}

.wb-content-data div.enfasi {
  background-color: #ffe; 
  border: 1px solid var(--wb-bordo-riquadri);
  border-radius: 8px; 
  margin: 24px auto; 
  width: 92%;
}

.wb-content-data div.enfasi p {
  font-size: calc( var(--wb-base-font-size) + 0.6rem );
  font-style: italic; 
  padding: 8px; 
  text-align: justify; 
  color: #000;
}

.wb-content-data div.enfasi.center p { text-align: center }

.wb-content-data div.alert {
  margin: 24px auto; 
  width: 92%;
  padding:2px 8px 2px 4px;
  border-radius: 12px;
}

.wb-content-data div.alert p {
  color: #000;
}

.wb-chap-nav span.wb-nav-title::before,
.wb-content-data div.alert p:first-child::before {
  display: block;
  font-weight: bold;
  font-size: 1.72rem;
  padding-bottom:4px;
}

.wb-content-data div.alert.nota {
  background-color: #e7f3fe;
  border-left: 6px solid #2196F3;
}

.wb-content-data div.alert.consiglio {
  background-color: #d4edda;
  border-left: 6px solid #c3e812;
}

.wb-content-data div.alert.attenzione {
  background-color: #fff3cd;
  border-left: 6px solid #fff149;
}

.wb-content-data div.alert.allarme {
  background-color: #fe0;
  border-left: 6px solid #f44336;
}

.wb-content-data div.alert.nota p:first-child::before { content: 'NOTA'; color: #009 }
.wb-content-data div.alert.consiglio p:first-child::before { content: 'CONSIGLIO'; color: #093 }
.wb-content-data div.alert.attenzione p:first-child::before { content: 'ATTENZIONE'; color:#900 }
.wb-content-data div.alert.allarme p:first-child::before { content: 'IMPORTANTE !!'; color:#f00; }

.wb-chap-nav-container {
  text-align:left;
  overflow: hidden;
  margin-left:24px;
  margin-right:24px;
}

.wb-chap-nav-container p a {
  background: none;
  padding-right:0px;
}

.wb-donation-container {
  overflow: hidden;
  background-color: #E6E6FA;
  border-radius: 12px;
  margin:8px auto;
  width:92%;
  padding-bottom: 8px;
  border: 1px solid #aaa;
}

.wb-donation-button-container {
  margin: 8px 0;
  text-align: center;
}

/********************************************/
/* INIZIO DEFINIZIONE ELEMENTI TOC WEB BOOK */
/********************************************/
.wb-toc-container {
  text-align: left;
  margin: 6px 0;
  font-family: 'Open Sans', sans-serif;
}

.wb-toc-string {
  text-align: center;
  font-weight: bold;
  font-size:1.8rem;
  margin: 4px 0 12px;
}

.wb-toc-item-container {
  margin-bottom: 10px;
  padding: 0 8px;
  text-align: left;
  display: block;
}

.wb-toc-item {
  font-size:2rem;
  color: var(--wb-color-link);
  display: inline-block;
}

.wb-toc-item span {
  cursor:pointer;
  border-bottom: 1px solid var(--wb-color-link);
}

/** DIV CONTAINER DEGLI ERRORI GENERATI NELL'USO IMPROPRIO DELLA LIBRERIA, DA USARE DENTRO EXIT **/
.wb-error-container {
  clear: both;
  display: block;
  width: 84%;
  height:54px;
  margin: 12px auto;
  border-radius: 12px;
  border: 1px solid #F00;
  font-size:2rem;
  font-weight: bold;
  padding:12px;
  z-index:24;
  background: linear-gradient( #FA0, #F30 );
}

#wb-bottom_container  { margin: 24px 0 }
#wb-bottom            { font-size: 1.64rem; text-align: center}
#wb-bottom a          { font-size: 1.64rem !important}
.wb-bottom_desktop    { display: unset }
.wb-bottom_mobile     { display: none }

/***********************************************************/
/* INIZIO DEFINIZIONE TUTTI GLI ELEMENTI RESPONSIVE MOBILE */
/* LA SOGLIA DESKTOP MOBILE DEL WEB BOOK è 1099px          */
/***********************************************************/
/**/

@media (max-width: 1099px) { 

  :root {
    --wb-base-font-size: 1.72rem;
  }
  
  .wb-container { width:100%; display:block }
  
  .wb-topnavbar { 
    width:100%; 
    left: auto; 
    top:0;
    transform: none;
    box-shadow: 0px 2px 4px #111;
    border-bottom:#ddd solid 1px;
  }
  
  .wb-topnavbar img { width:36px; margin-right: 8px }
  .wb-topnavbar-top-shadow { display: none }
  
  /** COLONNA INDICE **/
  .wb-column-index,
  .wb-column-toc { 
    position: fixed; 
    top: 100vh;
    z-index: 11; 
    width: 100%;
    height:calc( 100vh - var(--wb-topnavbar-height) -2px );
    overflow-y: auto;
    display: none;
    margin: 0;
    background-color: #F0FDF4;
    /*border-bottom:#F8F8FF solid 24px;*/
    color:black;
    box-shadow: 0px 15px 10px -15px #111;
  }
  
  .wb-animation-mobile-show {
    animation-duration: 1s;
    animation-name: slidein;
    animation-direction: normal;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
  }
  
  @keyframes slidein {
    0%      { top: 100vh }
    100%    { top: var(--wb-topnavbar-height) }
  }

  .wb-animation-mobile-hide {
    animation-duration: 1s;
    animation-name: slideout;
    animation-direction: normal;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
  }
  
  @keyframes slideout {
    0%      { top: var(--wb-topnavbar-height) }
    100%    { top: 100vh }
  }
  
  .wb-index-container { padding: 4px }
  .wb-index-booksubtitle { width:84%; margin: 0 auto; font-size:1.8rem }
  .wb-index-bookauthor { font-size: 1.6rem }
  .wb-cover img { max-height: 124px }
  .wb-image-website img#img-website { max-width: 284px }
  #wb-indextoc-close { position:fixed; top:0; width:24px; z-index: 26 }
  #wb-indextoc-close img { cursor:pointer; width:24px; margin:6px 0 0 6px }

  /** COLONNA CONTENT **/
  .wb-column-content { display: block; width: 100%; border: 0 }

  .wb-header-mobile { 
    width: 92%; 
    text-align: center; 
    background-color: #F5F3FF;
    margin: 0 auto 8px; 
    border-radius: 12px; 
    border: 1px solid var(--wb-bordo-riquadri);
  }
  .wb-header-title  { font-size: 4rem; font-style: italic; color:#1C398E; margin: 0; padding: 4px }
  .wb-header-subtitle  { font-size: 2rem; font-style: italic; margin: 0 0 8px; color: #009; padding: 4px }
  
  .wb-chap-nav-container { margin:0 }
  .wb-chap-nav-container .wb-align-right  { margin-right: 8px }
  .wb-chap-nav-container .wb-align-left   { margin-left: 8px }

  .wb-header-navlink { 
    background-color:#009;
    border:1px solid #ddd;
    border-radius:12px;
    color:yellow;
    cursor: pointer;
    display: inline-block;
    font-family: 'Open Sans', sans-serif;
    height: 42px;
    line-height: 1.32;
    margin: 8px 4px;
    padding: 4px;
    text-align: center;
    vertical-align: top;
    width: 200px;
  }

  .wb-header-navlink span { font-size: 1.4rem; font-weight: bold; vertical-align: middle; }
  
  .wb-content-data figure.wb-copertina  { float:none; margin:0; text-align: center } 
  .wb-content-data .wb-abstract         { margin: 0 }

  .wb-content-data p,
  .wb-content-data div.enfasi p { text-align: left }
   
  .wb-content-data h2,
  .wb-content-data h3,
  .wb-content-data h4,
  .wb-content-data h5,
  .wb-content-data h6 { margin: 24px 0 2px }
  
  /** COLONNA TOC **/
  
  /** BOTTOM **/

  #wb-bottom            { margin: 24px 0 }
  .wb-bottom_desktop    { display: none }
  .wb-bottom_mobile     { display: unset }
  .wb-bottom_license    { margin: 0 4px 8px }
  
}