:root {
  /* --primary-white: #fffffff;  */
  --primary: 255, 255, 255;
  /* --secondary-grey: #e1ddd6;  */
  --secondary: 225, 221, 214;
  /* --tetriary-black: #3e3e3e */
  /* black text color */
  --tetriary: 62, 62, 62;
  --tetriary-highlight: 145, 145, 145;
  /* --quaternary-orange: #e26030*/
  --quaternary: 226, 96, 48;
  --quaternary-highlight: 236, 106, 58;
  /* --highlight-bright-green: #83c58e */
  --highlight: 131, 197, 142;

  /* error message colors */
  --error-red: 255, 85, 85;
  --error-border: red;

  --light-low-contrast-text: #8a8a8a;
  --dark-high-contrast-text: #ffffff;
}

@keyframes fade-out {
  40% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

* {
  font-family: 'Montserrat', sans-serif;
  box-sizing: border-box;
}

p, h1, h2, ul {
  margin: 0;
}

button, button * {
  cursor: pointer;
}

html, body {
  height: 100%;
  margin: 0;

  &:is(body) {
    display: flex;
    flex-direction: column;
    background-color: rgb(var(--primary));
  }
}

#error-messages {
  position: fixed;
  display: block;
  top: 10%;
  left: 50%;
  transform: translateX(-50%);
  border: 2px solid var(--error-border);
  border-radius: 8px;
  background: rgb(var(--error-red));
  padding: 4px 8px;
  z-index: 99;
  opacity: 0;
  pointer-events: none;

  &:has(:nth-child(1)) {
    opacity: 1;

    * {
      animation: 4s fade-out;
    }
  }

  &.animating {
    animation: 4s fade-out;
  }
}

header, main, #main-content {
  width: 100%;

  &:is(main) {
    flex-grow: 1;
  }
}

header {
  position: relative;
  padding: 4px 0 8px;

  &::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(rgb(var(--secondary)), #c2bdb4);
    border-bottom: 6px solid rgb(var(--highlight));
    box-shadow: 0px 2px 4px 2px rgba(0,0,0,0.1);
    z-index: -1;
  }

  .logo {
    grid-column: 2 / span 6;
    align-self: center;
    width: 100%;
    padding: 8px 0;

    img {
      vertical-align: middle;
      width: 100%;
    }
  }

  & > button.orange.pronounced {
    --background-padding: 4px;

    justify-self: end;
    align-self: center;
    
    display: flex;
    place-items: center;
    width: 100%;
    min-width: 36px;
    max-width: 48px;
    background-color: rgb(var(--tetriary-highlight));
    border-radius: 4px;
    border-style: outset;
    border-color:
      black
      rgb(115, 115, 115)
      rgb(115, 115, 115)
      black;
  
    &::before {
      border-radius: 1px;
      
    }
  
    img {
      padding: 2px;
    }
  }

  #authentication-toggler {
    grid-row: 1;
    grid-column: -4 / -2;

    @media (min-width: 425px) {
      grid-column: -3 / -2;
    }
  }

  #authentication {
    position: fixed;
    top:0;
    right: 0;
    bottom: 0;

    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 16px;

    max-width: 30vw;
    transform: translateX(105%);
    transition: transform 0.2s;
    padding: 48px 20px;
    background-color: rgb(var(--secondary));
    box-shadow: 0px 0px 8px 4px rgba(0,0,0, 0.4);
    border-left: 4px solid rgb(var(--highlight));
    

    a, button {
      display: flex;
      justify-content: center;
      min-height: 32px;
      text-decoration: none;
      border-radius: 20px;
      overflow: hidden;

      p {
        color: white !important;
        font-weight: 600;
        font-size: 16px;
        letter-spacing: 0.02em;
        padding: 4px 8px;
        text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
        width: fit-content;
        white-space: nowrap;
      }

      &.pronounced {
        border-color: rgb(55,55,55);
      }

      &::before {
        border-radius: 20px;
      }
    }

    #authentication-closer {
      --background-padding: 3px;
      position: absolute;
      top: 8px;
      right: 8px;
      width: 32px;
      aspect-ratio: 1 / 1;
      background-color: rgb(var(--tetriary-highlight));

      img { 
        padding: 4px;
      }
    }

    #current-user {
      width: 100%;
      overflow: hidden;

      p {
        font-size: 14px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;

        &.name {
          font-weight: 600;
        }
      }
    } 

    #logout {
      display: flex;
      justify-content: center;
    }


    &.active {
      transform: translateX(0);
    }
  }

  @media (min-width: 768px) {
    padding: 0;

    .logo {
      grid-column: 2 / span 5;
      max-width: 300px;
    }

    & > button.orange.pronounced {
      --background-padding: 5px;
    }

    #authentication {
      gap: 12px;

      a p, button p {
        font-size: 20px;
        letter-spacing: 0.04em;
        padding: 4px 12px;
      }
    }
  }

  @media (min-width: 1400px) {
    .logo {
      grid-column: 2 / span 3;
    }

    #authentication-toggler {
      display: none;
    }

    #authentication {
      grid-column: 13 / span 3;
 
      flex-direction: row;
      justify-content: end;
      align-items: center;
      gap: 8px;

      background: none;
      position: relative;
      transform: none;
      padding: 0;
      box-shadow: none;
      border: none;
      max-width: none;

      #authentication-closer {
        display: none;
      }
    }
  }
}

#main-content {
  grid-column: 1 / -1;
}

/* ---- HELPER CLASSES ---- */
/* 
grid-container
  Divide HTMLElement into 16 equally-sized grid columns

pronounced
  Give HTMLElement a contrasting ridge effect by adding a background and multi-layered border
  Can be modified with an additional color class (e.g. "orange", "black")

status-message
  Make HTMLElement an absolute-positioned status message
  Hidden until element is also given "active" class
*/

/* ---- grid-container ---- */
.grid-container {
  display: grid;
  grid-template-columns: repeat(16, 1fr);
  gap: 8px;
}

/* ---- prounounced ---- */

.pronounced {
  --background-padding: 5px;
  --border-width: 2px;
  position: relative;
  background-color: white;
  border: var(--border-width) solid black;
  padding: var(--background-padding);
  border-radius: 11px;
  box-shadow: 0 0 2px 1px rgba(0,0,0, 0.5);
  
  &::before {
    content:'';
    position: absolute;
    inset: calc(var(--background-padding) - var(--border-width));
    border: var(--border-width) solid red;
    border-radius: 6px;
  }

  & > * {
    position: relative;
  }

  &.black {
    background-color: rgb(var(--tetriary-highlight));
    border-color: rgb(40, 40, 40);

    * {
      color: var(--dark-high-contrast-text);
    }

    &::before {
      background-color: rgb(var(--tetriary));
      border-color: rgb(80, 80, 80);
      box-shadow: inset 0 0 4px 2px rgba(0,0,0, 0.75);
    }
  }


  &.orange {
    background-color: rgb(var(--quaternary-highlight));
    border-color: black;

    * {
      color: black;
    }

    &::before {
      background-color: rgb(var(--quaternary));
      border-color: rgb(var(--tetriary));
    }
  }

  &.error {
    background-color: rgb(var(--error-red));
    border-color: black;

    * {
      color: black;
    }
  
    &::before {
      background-color: rgb(var(--error-red));
      border-color: rgb(var(--tetriary));
    }
  }
}

/* ---- status-message ---- */
.status-message {
  position: absolute;
  display: none;
  padding: 4px 8px;
  border-radius: 24px;

  &.active {
    display: block;
  }
}