@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap');

html {
  background: #fdfdfd;
  color: #111;

  font-family: "Noto Sans", Verdana, Geneva, Tahoma, sans-serif;
  font-weight: 400;
  font-style: normal;

  a {
    font-weight: bold;
    text-decoration: none;
    color: #48c;

    &.current {
      color: #eb4a41;

    }

    &:hover {
      * {
        filter: brightness(0.9);
      }

      section.synopsis {
        border-left: 0.2em solid #888;
      }
    }

    &.alert-link {
      color: #eb4a41;
    }
  }

  div.alert {
    display: flex;
    flex-direction: column;
    align-items: center;
    align-content: center;
    width: 100%;
  }

  div.disclaimer {
    font-size: 0.8em;
    font-weight: bold;
    text-align: center;
    margin: 1em;
    color: #f00;
    text-shadow: 0px 0px 1px #ccc;

    @media (prefers-color-scheme: dark) {
      text-shadow: 0px 0px 1px #333;
    }
  }

  @media (prefers-color-scheme: dark) {
    background: #111;
    color: #fdfdfd;
  }

  @media (prefers-color-scheme: light) {

  }

  blockquote {
    color: #4a8b41;
    font-style: italic;
  }

  body {
    margin: 0;
    display: flex;
    flex-direction: column;
    min-height: 100dvh;

    p:has(+ figcaption) {
      margin-bottom: 0.5em;
    }

    figcaption {
      font-size: 0.5em;
      text-align: center;
    }

    header {
      min-height: 2em;
      display: flex;
      flex-direction: row;
      vertical-align: middle;
      align-items: center;
      background-color: #f8f8f8;

      &:first-of-type {       
        background-image: linear-gradient(to bottom, #f8f8f800, #eeeeee88); 
        height: 3em;

        @media (prefers-color-scheme: dark) {
          background-color: #222;
          background-image: linear-gradient(to bottom, #000, #222);
        }
      }

      &:not(:first-of-type) {
        border-top: 0.2px solid #888;
        background-color: #eeeeee88;

        top: 3em;
        min-height: 0;
        margin: 0;
        padding: 0;

        @media (prefers-color-scheme: dark) {
          background-color: #222;
        }

        * {
          margin: auto;
          &:first-child {
            margin-left: 0.5em;
          }

          &:last-child {
            margin-right: 0.5em;
          }
        }

        span {
          opacity: 0.5;
        }
      }

      opacity: 0.95;
      backdrop-filter: blur(10px);
      position: sticky;

      @media (prefers-color-scheme: dark) {
        background-color: #222;
        background-image: linear-gradient(to bottom, #000, #222);
      }

      @media screen and (max-width: 900px) {
        a.logo {
          flex: 1;
        }
      }

      .title {
        flex: auto;
        opacity: 0.5;
      }

      label {
        flex: 1;
      }

      div.project {
        a {
          color: #48c;
        }

        @media screen and (max-width: 900px) {
          display: none;
        }
      }

      .title {
        min-width: fit-content;

        a {
          color: #48c;
        } 
      }

      & > * {
        margin: 0;     
      }

      @media screen and (min-width: 900px) {
        .title {
          display: none;
        }
      }

      @media screen and (max-width: 900px) {
        flex-direction: row;
        vertical-align: middle;

        .title {
          margin: auto;
        }

        &:has(input[type=checkbox]:checked) {
          .title {
            display: none;
          }
        }
      }

      img {          
        height: 1.5em;
      }

      input#menuControl {
        display: none;
      }

      label {
        flex: 1 1 1;
        margin-bottom: 0;
        margin-right: 0.25em;
      }

      @media screen and (max-width: 900px) {
        label {
          margin-top: auto;
          margin-bottom: auto;
        }

        input[type=checkbox] {
          &:not(:checked) {
            + label {
              > nav > ul {
                opacity: 0;
                transform: scaleZ(0);
                height: 0;
                margin: 0;
                padding: 0;
                display: none;
                transition: 50ms;
              }

              > nav > .line {
                display: block;
                opacity: 1;
                transition: 50ms;
                width: 1.5em;
                transform: scaleZ(1);
              }
            }
          }

          &:checked {
            + label {
              > nav > ul {
                opacity: 1;
                transition: 50ms;
                
                background-color: #ddd;
                @media (prefers-color-scheme: dark) {
                  background-color: #222;
                }
              }

              > nav > .line {
                transition: 50ms;
                opacity: 1;

                height: 0.5px;

                &:not(:first-child):not(:last-child) {
                  display: none;
                }
              }
            }
          }
        }
      }

      nav {
        &:target {
          background-color: orange;
        }

        @media screen and (min-width: 900px) {
          margin-bottom: 0.5em;
        }

        .line {
          background-color: #292929;

          @media (prefers-color-scheme: dark) {
            background-color: #d6d6d6;
          }

          height: 0.25em;
          margin-bottom: 0.25em;
          display: block;

          &:last-child {
            margin-bottom: auto;
          }

          @media screen and (max-width: 900px) {
            margin-left: auto;
            margin-right: 0.5em;
            width: 1.5em;
          }

          @media screen and (min-width: 900px) {
            display: none;
          }
        }

        ul {
          list-style-type: none;
          display: flex;
          margin: auto;

          @media screen and (max-width: 900px) {
            flex-direction: column;
          }

          li {
            &:first-child {
              @media screen and (min-width: 900px) {
                margin-left: 0;
              }
            }

            white-space: nowrap;
            display: inline;
            margin: auto;
            margin-right: 1em;

            @media (prefers-color-scheme: light) {
              a.current {
                filter:brightness(0.5);
              }
            }

            a:hover {
              opacity: 0.9;
            }
          }
        }
      }
    }

    &.scott-menor {
      background-image: url(/images/scott_hiking.jpg);
      background-repeat: no-repeat;
      background-size: cover;
      background-position: top center;

      .title {
        display: none;
      }

      article {
        flex: 1 1 auto;
        display: flex;
        flex-direction: column;

        p {
          &:first-child {           
            margin-top: auto; 
          }

          display: flex;

          a {
            display: flex;
            vertical-align: middle;

            img {
              height: 2em;
              width: auto;
              margin-right: 0.5em;
            }
          }

          @media screen and (max-width: 900px) {
            flex-direction: column;
            align-items: start;
            align-content: end;
          }
        }
      }
    }

    main {
      display: flex;
      flex-direction: column;
      flex: 1 1 auto;
    }

    form {
      display: flex;
      flex-direction: column;
      margin: auto;
      margin-top: 2em;
      max-width: 30em;
      align-items: center;

      > *, > * > * {        
        @media (prefers-color-scheme: dark) {
          background: #111;
          color: #fdfdfd;
        }
      }

      input {
        width: 100%;
        margin: 0.25em;
        font-size: 1.4em;

        @media screen and (max-width: 900px) {
           max-width: 95%;
        }
      }

      textarea {
        width: 100%;
        margin: 0.25em;
        font-size: 1.4em;
      }

      submit {
        width: 100%;
      }
    }

    #map {
      height: 100vh;
      width: 100vw;
    }

    footer {
      flex: 1 1 1;
      display: flex;
      flex-direction: row;
      background-color: #eee;
      border-top: 0.2px solid #ccc;
      @media (prefers-color-scheme: dark) {
        background-color: #111;
        border-top: 0.2px solid #333;
      }

      position: sticky;
      color: #888;
      bottom: 0;
      left: 0;
      right: 0;
      width: 100%;
      text-align: center;
      align-items: end;
      font-size: 0.8em;
      margin: 0;
      margin-top: auto;
      margin-bottom: 0;

      :first-child {
        margin-left: 1em;
      }

      :last-child {
        margin-right: 1em;
      }

      :only-child {
        margin-left: auto;
        margin-right: auto;
      }

      > span {
        margin-left: auto;
        margin-right: auto;
      }

      span.projectID,span.project {
        opacity: 0.8;

        @media screen and (max-width: 900px) {
          display: none;
        }

        a {
          font-weight: normal;
        }
      }

      svg {
        width: 5em;
        margin-left: auto;
      }
    }

    &.tangents {      
      article {
        margin-left: 0;
        margin-right: 0; 
      }

      article h1:first-child {
        display: table-cell;
        width: 100dvw;
        background-image: url(/images/JrEyesCentred.png);
        background-position-y: bottom;
        background-position-x: center;
        background-size: cover;
        background-repeat: no-repeat;
        color: #ddd;
        font-size: 3rem;
        height: 3em;
        vertical-align: top;
      }
    }

    article {
      @media screen and (min-width: 900px) {
        margin: 0.5em 2em 0.5em 2em;
        padding: 0.5em;
      }

      @media screen and (max-width: 900px) {
        margin: 0em 0.5em 0em 0.5em;
        padding: 0.25em;
      } 

      audio {
        width: 100%;
      }

      section {    
      }

      section.synopsis {
        display: flex;
        flex-direction: row;
        margin-bottom: 0.5em;
        font-weight: normal;

        border-left: 0.2em solid #111;

        @media (prefers-color-scheme: light) {
          border-left: 0.2em solid #fdfdfd;
        }

        img {
          display: block;
          width: 6em;
          height: 6em;
        }

        div.snippet {
          display: flex;
          margin-left: 0.5em;
          width: 100%;
          flex-direction: column;
          margin-top: 0.5em;
          margin-bottom: 0.5em;

          span.title {
            font-weight: bold;
          }

          div {
            margin-left: 1em;
            font-size: 0.8em;
            border-top: 0.2px solid #888;
          }

          div.summary {
            color: #4a8b41;
          }
        }

        span.signature {
            margin-top: auto;
            color: #888;
            font-size: 0.6em;         
          time {
          } 

          span.location {
            font-weight: bold;
          }
        }

        &:not(:last-child) {
          border-bottom: 0.2px solid #888;
        }
      }

      p {
        img {
          display: block;
          max-width: 100%;
          max-height: 80vh;
          margin: auto;
          object-fit: contain;
        }
      }
    }

    h1 {
      text-align: center;
      font-weight: bold;

      &.title {
        font-size: 1.5em;
        margin: 0;
      }
    }

    h2 {
      font-size: 1.5em;
      &.location {
        font-size: 1em;
        margin: 0;
      }
    }

    h3 {
      margin-left: 1em;
    }
  }
}

body.roambotics.companion {
  img.roambotics {
    /*@media (prefers-color-scheme: dark) {*/
      filter: invert();
      opacity: 0.2;
    /*}*/
  }

  div.reserve {
    display: flex;
    flex-direction: column;
    align-items: center;
    align-content: center;
  }  

  article {
    color: #eee;  
    text-shadow: 0px 0px 2px black;

    background-image: url(/images/DesignLanguageClip.jpg);
    background-blend-mode: difference, luminosity;
    background-position-y: bottom;
    background-position-x: center;
    background-size: cover;
    background-repeat: no-repeat;
  }
}