/* ROOT  */
:root {
  --wrapper-inline-padding: 5vw;
  --content-inline-padding: 3.5vw;
  font-size: calc((16px * 100vw) / 1920px);
  --dnir-color: #EBEDFC;
}

h1 {
  font-size: 2.25rem;
}

h1 a,
h2 a {
  color: #000;
  text-decoration: none;
}

/*
 * HEADER 
 */
.academy-title {
  font-weight: 600;
}

header {
  padding-top: 1rem;
  padding-bottom: 1rem;
  justify-content: start;
  flex-wrap: wrap;
}

header h1 {
    line-height: 1;
}

#header-logo {
  width: var(--wrapper-inline-padding);
  padding: 10px;
}

#header-logo img {
  width: 100%;
}

#header-text {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  padding-right: var(--wrapper-inline-padding);
  justify-content: space-between;
}

#header-label {
  width: fit-content;
  background-color: var(--dnir-color);
  font-size: 1.25rem;
  font-weight: 700;
  padding: 0.5rem 1.2rem 0.5rem 1.2rem;
  margin-top: calc(var(--wrapper-inline-padding) - 85px);
}

/*
 * SITE SUB HEADER
 */
#site-title * {
  font-family: 'Times New Roman', Times, serif !important;
}

#site-title h2 {
  font-size: 2rem;
  line-height: 1;
}

/*
 * NAVIGATION MENU
 */
#top-nav {
  margin-top: 0.5rem;
}

#top-nav > .navigation {
  gap: 15px;
  padding-bottom: 0;
}

/* forzato nella creazione del menù. Ora ovunque si trovi "Browse" nel menù viene neascosto */
/* #top-nav > .navigation > li:first-child {
  display: none;
} */

#top-nav li {
  font-size: 1.25rem;
}

#top-nav > ul {
  border: none;
}

#top-nav > ul > li {
  padding: 0.25rem 1.2rem 0.25rem 1.2rem;
  background-color: var(--dnir-color);
}

#top-nav > ul > li.active {
  border: 1px solid #000;
}

#top-nav > ul > li a {
  color: var(--text-color);
  opacity: 1;
  text-decoration: none;
  text-transform: capitalize;
}

#burgerMenuButton {
  display: none;
}

/* #top-nav > ul li.active > a {
  color: #ffffff;
  background-color: var(--text-color);
  border-radius: 30px;
  padding: 5px 15px 2px 15px;
} */

/*
 * SUB-NAVIGATION MENU
 */

/* #top-nav > ul > li.active:hover {
  background-color: transparent;
  border-radius: 15px;
} */

#top-nav > ul > li > ul {
  display: none;
  background-color: transparent;
  box-shadow: none;
}

#top-nav > ul > li > ul * {
  opacity: 1;
}

#top-nav > ul > li:hover > ul,
#top-nav > ul > li > ul:hover {
    display: none;
    position: relative;
    height: auto;
    overflow: auto;
    margin-inline: 0;
    margin-bottom: 0;
    padding: 0;
    padding-left: 15px;
}

/*
 * OFFCANVAS NAVIGATION MENU
 */
#offcanvasSmartphoneMenu{
  font-size: 2rem;
}

#offcanvasMenuBody li {
  list-style-type: none;
}

#offcanvasMenuBody li a {
  color: #000;
}

#offcanvasMenuBody > ul > li > ul {
  display: none;
}

/* 
 * CONTENT
 */
#content {
  padding: 0;
  display: grid;
  grid-template-areas:
    "title viewer"
    "text viewer"
    "navigation viewer";
  grid-template-areas:
    "viewer title"
    "viewer text"
    "viewer navigation";
  grid-template-columns: auto calc(70vw - var(--wrapper-inline-padding)*2 + 70px);
  grid-template-columns: calc(70vw - var(--wrapper-inline-padding)*2 + 70px) auto;
  /* grid-template-rows: auto auto 80px; */
  grid-template-rows: auto auto calc(var(--content-inline-padding) / 2 + 40px);
  grid-row-gap: 1.5vh;
  margin: var(--wrapper-inline-padding);
  margin-top: 1rem;
  margin-bottom: 0;
  /*border: 1px solid #000;*/
}

nav.breadcrumbs {
  display: none;
}

#content .pageTitle {
  grid-area: title;
  height: fit-content;
  min-height: 5vh;
  padding-top: calc(var(--content-inline-padding) / 2);
}

#content .pageTitle h2 {
  margin: 0;
  line-height: 1;
  font-size: 1.5rem;
}

#content .html {
  grid-area: text;
}

#content .html[data-irn-text="no-title-page"] {
  padding-top: calc(var(--content-inline-padding) / 2);
}

#content .html p:first-child {
  margin-top: 0;
}

#content .html p:last-child {
  margin-bottom: 0;
}

#content .html a {
  padding: 0.25rem 0.25rem 0.25rem 0.25rem;
  background-color: var(--dnir-color);
  color: var(--text-color);
  opacity: 1;
  text-decoration: none;
}

#content .site-page-pagination {
  grid-area: navigation;
  background-color: transparent;
  margin: 0;
  align-items: start;
  padding: 0;
}

#content .site-page-pagination a {
  padding: 0;
  color: #000;
  font-size: 35px;
}

/* .backPageNav {
  align-self: start;
} */

.nextPageNav {
  margin-left: auto !important;
}

.backPageNav,
.nextPageNav {
  width: fit-content;
  margin: 0;
}

#content .pageTitle,
#content .html,
#content .site-page-pagination {
  padding-left: calc(var(--content-inline-padding)/2);
  padding-right: calc(var(--content-inline-padding)/2);
}

.scrollable-text {
  overflow: auto;
  scrollbar-width: thin;
  padding-right: 10px;
}

.scrollable-text::-webkit-scrollbar {
  width: 2px;
}

.scrollable-text::-webkit-scrollbar-thumb {
  background: #777777;
}

/*
 * * MIRADOR
 */
div#content > div.mirador {
  grid-area: viewer;
  padding: calc(var(--content-inline-padding) / 2);
  /* border-left: 1px solid #000; */
  /*border-right: 1px solid #000;*/
}

div.mirador {
  height: 100%;
  min-height: 500px;
}

/*
 * THUMBNAILS
 */
#thumbs-content {
  border: 1px solid;
  padding: 0;
  margin-left: var(--wrapper-inline-padding);
  margin-right: var(--wrapper-inline-padding);
  margin-top: 3vh;
}

#thumbs-content #thumb_block {
  display: flex;
  justify-content: flex-start;
  overflow-x: auto;
  overflow-y: hidden;
  gap: 15px;
  scrollbar-width: thin;
}

#thumb_block::-webkit-scrollbar {
  height: 5px;
  background: transparent;
}

#thumb_block::-webkit-scrollbar-thumb {
  background: var(--text-color);
}

#thumb_block::-webkit-scrollbar-thumb:hover {
  background: var(--text-color); /*in realtà ci vorrebbe un colore diverso*/
}

#thumb_block::-webkit-scrollbar-button {
  background: none;
  width: 0;
}

#thumbs-content .thumb-block-card {
  height: 12.5vh;
  width: 20vh;
  border: 1px solid #777777;
}

#thumbs-content #thumb_block img {
  /* height: 12.5vh;
  width: 20vh; */
  height: 100%;
  width: 100%;
  object-fit: cover;
}

#thumbs-content #thumb_block > div {
  display: flex;
  padding: 1%;
  /*overflow: hidden;*/
}

/*
 * FOOTER
 */
footer {background-color: #fff;}

/*
 * FOOTER SPACER
 */
#footer-spacer {
  margin-top: var(--wrapper-inline-padding);
  text-align: center;
  font-size: 0.7rem;
}

/* * * * * * * *
 * RESPONSIVE  *
 * * * * * * * */
/*
 * RISOLUZIONE 1425 PX
 */
 @media only screen and (max-width: 1425px) {
  :root {
    font-size: 14px
  }
}

/*
 * RISOLUZIONE 1350 PX
 */
 @media only screen and (max-width: 1350px) {
  #header-label {
    padding: 0.25rem 1rem 0.25rem 1rem;
    margin-top: 1px;
  }
}

/*
 * RISOLUZIONE 1250 PX
 */
 @media only screen and (max-width: 1250px) {
  :root {
    font-size: 12px;
  }
}

/*
 * RISOLUZIONE 1100 PX
 */
 @media only screen and (max-width: 1100px) {
  #content {
    grid-template-rows: auto auto 50px;
  }
  #content .html[data-irn-text="no-title-page"] {
    padding-top: 20px;
  }
  div#content > div.mirador {
    padding: 20px;
  }
}

/*
 * RISOLUZIONE 950 PX
 */
@media only screen and (max-width: 950px) {
  header {
   justify-content: center;
  }

  header #header-logo {
    width: 80px;
  }

  header #header-text {
    width: fit-content;
    flex-grow: unset;
    padding: 0;
  }

  #content {
    grid-template-areas:
    "viewer"
    "title"
    "text"
    "navigation";
    grid-template-columns: auto;
    grid-template-rows: auto auto auto 50px;
    row-gap: 0;
  }

  #content .pageTitle {
    padding-top: 0;
  }

  div#content > div.mirador {border: none;}

  #content .site-page-pagination {
    margin-bottom: calc(var(--content-inline-padding)/2);
  }

  #content .html[data-irn-text="no-title-page"] {
    padding-top: 0;
  }
}

/*
 * RISOLUZIONE 640 PX
 */
@media only screen and (max-width: 640px) {
  #site-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  #burgerMenuButton {
    display: block;
    font-size: 2rem;
  }
}

/*
 * RISOLUZIONE 360 PX
 */
 @media only screen and (max-width: 360px) {
  :root {
    --wrapper-inline-padding: 2.5vw;
  }

  #header-text {
    text-align: center;
    align-items: center;
  }

  div#content > div.mirador {
    padding: 10px;
  }
}