/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */
@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

html {
  background: #fdfdfd;
  color: #111;
  /* font-family: Verdana, Geneva, Tahoma, sans-serif; */

  font-family: "Be Vietnam Pro", 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.8);
    }
  }

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

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

  }

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

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

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

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

    header {
      > * {
        overflow-wrap: break-word;
      }
      
      display: flex;
      flex-direction: row;
      background-color: #f8f8f8;
      background-image: linear-gradient(to bottom, #f8f8f800, #eeeeee88);
      opacity: 0.98;
      position: sticky;

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

      margin: 0;
      padding: 0;
      padding-right: 0.5em;
      padding-left: 0.5em;

      & > * {
      	margin: auto;
      }

      :first-child {
      	margin-left: 0;
      }

      :last-child {
      	margin-right: 0;
      }

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

        div.title {
          margin: auto;
          margin-left: 0.2em;
          margin-right: 0.2em;
        }

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

      img {
        height: 3em;
        vertical-align: middle;
      }

      h1 {
        display: flex;
        min-width: fit-content;
        flex-direction: row;
        vertical-align: middle;
        margin: auto;

        @media screen and (max-width: 900px){
          max-width: fit-content;
        }

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

          :last-child {
            margin-left: auto;
            margin-right: 0;
          }
        }

        font-size: 1.3em;

        a {
          margin: auto;
          color: #48ab41;
        }

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

        :first-child {
          margin-right: auto;
        }

        :last-child {
          margin-left: auto;
        }

        img {
          height: 3em;
          vertical-align: middle;

          @media (prefers-color-scheme: dark) {
            filter: invert();
          }
        }
      }

      input#menuControl {
        display: none;
      }

      label {
        margin: auto;
        margin-right: 0.25em;

        width: 100%;
        @media screen and (max-width: 900px) {
          min-width: fit-content;
        }
      }

      @media screen and (max-width: 900px) {
        input[type=checkbox] {
          &:not(:checked) {
            + label {
              > nav > ul {
                opacity: 0;
                transform: scaleZ(0);
                height: 0;
                transition: 50ms;
              }

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

          &:checked {
            + label {
              > nav > ul {
                opacity: 1;
                transition: 50ms;
              }

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

                height: 0.5px;

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

      nav {
        margin-left: 1em;

        &: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;
              }
            }

            display: inline;
            margin: auto;
            margin-right: 1em;

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

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

    	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 {
      display: flex;
      flex-direction: row;
      position: relative;
      color: #888;
      bottom: 0;
      left: 0;
      right: 0;
      text-align: center;
      align-items: end;
      font-size: 0.5em;
      margin: auto;
      margin-top: auto;
      margin-bottom: 0;

      @media screen and (max-width: 900px) {
        padding: 0.2em;
        margin-top: auto;
      }

      :first-child {
        @media screen and (min-width: 900px) {
          margin-right: auto;
        }
      }

      :last-child {
        @media screen and (min-width: 900px){
          margin-left: 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;
      }
    }

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

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

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

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

    h2 {

      font-size: 1.5em;
    }

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