/*  Styles for the entire site. No need for SCSS or anything like that;
 *  keep it simple.  */

:root{
  /* Colours adapted from https://abloomdecor.com/charcoal-color-palette/ with thanks! */
  --main-bg-color: #edeef2;
  --light-hi-color: #BEB4AE;
  --mid-hi-color: #80746E;
  --dark-hi-color: #5e4c43;
  --light-charcoal-color: #6e717d;
  --charcoal-color: #45474F;
  --text-color: #201f20;
}
 
@font-face {
  font-family: "NotoSansVariableNormal";
  src: url("../fonts/NotoSansVariableNormal.woff2") format("woff2 supports variations"),
       url("../fonts/NotoSansVariableNormal.woff2") format("woff2-variations");
       font-weight: 100 1000;
}

@font-face {
  font-family: "NotoSansVariableItalic";
  src: url("../fonts/NotoSansVariableItalic.woff2") format("woff2 supports variations"),
       url("../fonts/NotoSansVariableItalic.woff2") format("woff2-variations");
       font-weight: 100 1000;
}

body{
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: NotoSansVariableNormal;
  font-weight: 350;
  font-stretch: 95%; /* Deprecated in favour of font-width, but the latter is not widely supported yet. */
  font-width: 95%;
  background-color: var(--main-bg-color);
  color: var(--text-color);
  min-height: 98vh;
  padding: 0;
  margin: 0;
  background: url(../images/tree_heavy_fog.jpg) no-repeat center fixed;
  background-size: cover;
  scroll-margin-top: 1rem;
}

h1, h2, h3{
  font-family: NotoSansVariableItalic;
  font-weight: 600;
  padding-left: 1rem;
}

header{
  width: 100%;
}

nav{
  margin: auto;
  
  &>ul{
    list-style-type: none;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    /* background-color: var(--charcoal-color); */
    background: linear-gradient(90deg, var(--charcoal-color), var(--light-charcoal-color), var(--charcoal-color));
    margin: auto;
    padding: 5pt;
    li{
      padding: 0.25em;
      margin: 1pt;
      border: solid 1pt black;
      text-align: center;
      background-color: var(--mid-hi-color);
      color: white;
      cursor: pointer;
      box-shadow: -1pt -1pt var(--light-hi-color);
      &:hover, &:focus{
        color: var(--mid-hi-color);
        background-color: var(--main-bg-color);
        a{
          color: var(--mid-hi-color);
          background-color: var(--main-bg-color);
          outline: none;
          &:hover, &:focus{
            outline: none;
          }
        }
      }
      &.current, &.current:hover{
        background-color: var(--text-color);
        color: white;
        cursor: text;
      }
      a, a:visited, span{
        color: white;
        text-decoration: none;
        padding: 0.2em;
        &:hover{
          color: var(--mid-hi-color);
          background-color: var(--main-bg-color);
        }
      }
    }
  }
}

main{
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  @media (min-width: 40rem){
    max-width: 60rem;
    margin: 1rem auto;
    padding: 0 5rem;
  }
}

a, a:visited{
  color: var(--dark-hi-color);
  padding: 0.2em;
  overflow-wrap: break-word;
  &:hover, &:focus{
    color: var(--text-color);
    background-color: white;
    outline: solid 1pt var(--light-charcoal-color);
  }
}

footer{
  font-size: 0.8rem;
  @media (min-width: 40rem){
    width: 100%;
  }
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: auto;
  padding: 0.5rem;
  border-top: 1pt solid var(--mid-hi-color);
  p{
    margin: 0.1em 1em;
    &#buildInfo{
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      align-items: center;
    }
  }
  img.footerIcon{
    width: 1.5em; 
    height: 1.5em; 
    margin: 0.5em;
    display: inline-block;
  }
}

table{
  border-collapse: separate;
  border-spacing: 0;
  thead{
    font-weight: 600;
    font-family: NotoSansVariableItalic;
  }
  td{
    border-style: solid;
    border-width: 1pt 0;
    border-color: var(--light-hi-color);
    padding: 0.25em;
  }
}

ul>li>a, nav>ul>li>span{
  letter-spacing: 0.25px;
}

div#publications{
  ul>li{
    margin-top: 0.5em;
    span.publicationTitle{
      font-weight: 600;
    }
  }
}

/* Outline things pointed at. */
*:target{
  outline: solid 2pt var(--dark-hi-color);
  scroll-margin-top: 1rem;
  &+td{
    padding-left: 0.5em;
  }
}

/* I know we should be styling mobile-first, and at some point
   I'll do that, but for now I'm adding overrides for mobile. */

@media (max-width: 40rem) {
  main{
    max-width: 38rem;
    margin: 1rem;
    padding: 0;
  }
  ul{
    padding-left: 0.2em;
  }
  table{
    max-width: 96%;
    thead{
      display: none;
    }
    tr{
      display: list;
      list-style-type: none;
      td{
        display: list-item;
        border-style: none;
        &:first-of-type{
          border-top-style: solid;
        }
        &:last-of-type{
          border-bottom-style: solid;
        }
        &:before{
          content: attr(title);
          padding-right: 0.25rem;
          font-variant: small-caps;
          font-size: 0.9rem;
          display: block;
          font-weight: 650;
        }
        &:target+td{
          padding-left: 0.25em;
        }
      }
    }
  } 
}

@media (max-width: 30rem) {
  main{
    max-width: 20rem;
    margin: 0.5rem;
    h3{
      background-color: var(--charcoal-color);
      color: var(--main-bg-color);
      padding: 0.25em;
    }
    div{
      max-width: 100%;
    }
  }
}