@import url("theme.css");

/*****************************
* RESUME
* Styling for the resume page.
*****************************/

* {
     z-index: 1;
}

body {
     color: var(--dark-grey);
     font-family: var(--general-sans);

     li {
          /* Remove the default styles for grids */
          border: none !important;

          &:hover {
               box-shadow: none !important;
          }
     }

     .twemoji {
          --md-icon-size: 1.2rem;
          vertical-align: middle !important;
     }
}

/* .md-typeset .grid {
     grid-gap: .4rem;
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
     margin: .4em 0;
} */

/*****************************/

#experience {

     .jobs {
          display: grid;
          gap: 2rem;
          grid-template-columns: repeat(2, 1fr);
          padding: 1rem;

          @media (max-width: 768px) {
               grid-template-columns: 1fr;
          }
     }

     .job {
          position: relative;
          padding: 0.5rem;

          &::before {
               content: '';
               position: absolute;
               top: 0;
               left: 0;
               width: 120px;
               height: 120px;
               background-image: var(--bg-image);
               background-size: 100px;
               background-repeat: no-repeat;
               filter: saturate(0%);
               opacity: 0.18;
               pointer-events: none;
          }

          h2 {
               color: var(--dark-grey);
               font-family: var(--general-sans);
               font-size: clamp(1.5rem, 5vw, 2.5rem);
               line-height: 1;
               margin: 0 0 0.5rem 0;
          }

          .company {
               font-family: var(--general-sans);
               font-weight: 400;
               font-size: clamp(0.9rem, 2vw, 1.2rem);
               margin-bottom: 1rem;

               span {
                    font-size: clamp(0.6rem, 1.2vw, 0.7rem);
                    margin-left: 1rem;
               }
          }

          .job-blurb {
               font-family: var(--general-serif);
               font-size: clamp(0.9rem, 2vw, 1.2rem);
               font-variation-settings: "opsz" 8;
               font-weight: 700;
               line-height: 1.5;
               margin: 1.5rem 0;
          }

          .job-achievements {
               font-family: var(--general-serif);
               font-variation-settings: "opsz" 8;

               h5 {
                    color: var(--dark-grey);
                    cursor: pointer;
                    font-size: clamp(0.75rem, 1.8vw, 0.9rem);
                    margin: 1rem 0 0.5rem 0;
                    text-transform: none;

                    /* &[style*="cursor: default"] {
                         cursor: default;
                    } */
               }

               p {
                    margin: 0 0 1rem 0;
                    line-height: 1.6;
               }
          }
     }
}

#hero {
     align-items: center;
     background-image: url('../media/face-1276x1276.webp');
     background-position: center center;
     background-repeat: no-repeat;
     background-size: 50vh;
     display: flex;
     flex-direction: column;
     height: clamp(50vh, 50vh + 10rem, 100vh);
     justify-content: center;
     text-align: center;

     &::after {
          background: rgba(250, 250, 250, 0.95);
          bottom: 0;
          content: '';
          position: absolute;
          left: 0;
          pointer-events: none;
          right: 0;
          top: 0;
     }

     .title {
          font-family: var(--general-serif);
          font-size: clamp(2rem, 8vw, 5rem);
          font-variation-settings: "opsz" 8;
          font-weight: 900;
          padding: 0 5px;
     }

     .metadetails {
          border-bottom: 0.5px solid var(--light-grey);
          border-top: 0.5px solid var(--light-grey);
          display: flex;
          flex-direction: row;
          gap: 5rem;
          margin-top: 1rem;

          figcaption {
               color: var(--dark-grey);
               font-family: var(--general-sans);
               font-size: clamp(0.9rem, 1.2vw, 1.2rem);
               font-style: normal;
               font-weight: 400;
          }

          img {
               height: 2.5rem;
          }
     }
}

#learning {
     margin: 2.5rem;

     .cards {

          ul li {
               background-color: var(--light-grey);

               figure {
                    align-items: center;
                    display: flex;
                    flex-wrap: wrap;
                    gap: 0.75rem;
                    justify-content: center;
                    margin: 0;

                    img {
                         max-width: 150px;
                         width: 30%;
                         min-width: 100px;
                         height: auto;
                         display: block;
                         padding: 20px;
                    }

                    figcaption {
                         color: var(--dark-grey);
                         flex: 1 1 200px;
                         font-family: var(--general-sans);
                         /* OLD: font-size: 0.8rem; */
                         font-size: clamp(0.7rem, 1.5vw, 0.8rem);
                         font-style: normal;
                         margin: 0;
                         text-align: left;
                    }
               }
          }
     }
}

#skills {
     margin: 1.2rem;

     .grid {
          grid-gap: 4rem;
     }

     .cards {
          ul li {
               align-items: center;
               display: flex;
               flex-direction: column;
               font-size: clamp(1.2rem, 3vw, 1.8rem);
               gap: 1rem;
               justify-content: space-evenly;
               padding: 0;

               .technical-icons {
                    align-content: stretch;
                    column-gap: 1rem;
                    display: flex;
                    flex-direction: row;
                    flex-wrap: wrap;
                    justify-content: space-evenly;
                    gap: 1rem;
                    flex: 1;
                    width: 100%;

                    .technical {
                         align-items: center;
                         display: flex;
                         min-width: 80px;

                         span {
                              align-items: center;
                              display: flex;
                              font-size: 0.7rem;
                              gap: 5px;
                              height: 100%;

                              img,
                              svg {
                                   height: 1rem;
                                   width: 1rem;
                                   max-height: 1rem;
                                   max-width: 1rem;
                                   object-fit: contain;
                                   flex-shrink: 0;
                              }
                         }
                    }
               }

               .writing-types {
                    flex: 1;
                    font-size: clamp(0.7rem, 1.5vw, 0.8rem);
                    justify-content: stretch;
                    margin-bottom: 0.7rem;
                    text-align: left;
                    width: 100%;

                    svg {
                         height: 0.8rem;
                    }
               }

               .media-tools {

                    figure {
                         align-items: center;
                         display: flex;
                         gap: 0.75rem;
                         justify-content: space-evenly;
                         margin: 0;

                         img {
                              max-width: 100px;
                              width: 20%;
                              min-width: 80px;
                              height: auto;
                              display: block;
                              padding: 20px;
                         }

                         figcaption {
                              color: var(--dark-grey);
                              flex: 1 1 200px;
                              font-family: var(--general-sans);
                              font-size: clamp(0.7rem, 1.5vw, 0.8rem);
                              font-style: normal;
                              margin: 0;
                              text-align: left;
                         }
                    }
               }

               .ai {
                    grid-gap: 0.4rem;
                    display: grid;
                    grid-template-columns: repeat(2, 1fr);
                    grid-template-rows: repeat(2, 1fr);
                    margin-top: 0;

                    li {
                         border-bottom: 0.5px solid var(--light-grey);
                         border-top: 0.5px solid var(--light-grey);
                         display: flex;
                         flex-direction: row;
                         padding: 0;
                         margin: 0;

                         figcaption {
                              color: var(--dark-grey);
                              font-family: var(--general-sans);
                              font-size: clamp(0.5rem, 0.7rem, 0.8rem);
                              font-style: normal;
                              font-weight: 400;
                         }
                    }

                    img {
                         height: 50px;
                         display: block;
                         padding: 5px;
                         width: auto;
                    }
               }
          }
     }

     h3 {
          border-bottom: 2px solid var(--dark-grey);
          color: var(--dark-grey);
          font-family: var(--general-serif);
          font-size: clamp(1rem, 2.5vw, 1.2rem);
          font-variation-settings: "opsz" 8;
          font-weight: 700;
     }
}


.faq-container {
     position: relative;

     #faq-toggle {
          &:checked {
               &+.question-icon {
                    .icon.question {
                         opacity: 0;
                    }

                    .icon.close {
                         opacity: 1;
                    }
               }

               &~.faq {
                    opacity: 1;
                    visibility: visible;
               }
          }
     }

     .faq {
          background-color: var(--neutral-grey);
          border: 2px solid var(--dark-grey);
          border-radius: 5px;
          bottom: 100px;
          opacity: 0;
          padding: 20px;
          position: fixed;
          right: 50px;
          transition: opacity 0.3s, visibility 0.3s;
          visibility: hidden;
          width: 400px;
          z-index: 999;

          h3 {
               color: var(--dark-grey);
               font-family: var(--general-serif);
               font-size: 1.2rem;
               font-variation-settings: "opsz" 8;
          }

          p {
               font-size: 1rem;
          }
     }

     .question-icon {
          align-items: center;
          bottom: 80px;
          cursor: pointer;
          display: flex;
          justify-content: center;
          position: fixed;
          right: 50px;
          width: 50px;
          z-index: 1000;

          .icon {
               position: absolute;
               transition: opacity 0.3s;

               span.twemoji {
                    --md-icon-size: clamp(1.2rem, 1vw + 2rem, 1.8rem);
               }
          }

          .icon.question {
               opacity: 1;
          }

          .icon.close {
               opacity: 0;
          }
     }

     .visually-hidden {
          height: 1px;
          left: -9999px;
          overflow: hidden;
          position: absolute;
          width: 1px;
     }
}

.modal-container {
     align-items: center;
     background-color: rgba(250, 250, 250, 0.9);
     display: none;
     height: 100%;
     justify-content: center;
     position: fixed;
     left: 0;
     top: 0;
     width: 100%;
     z-index: 999;

     &.is-visible {
          display: flex;
     }

     .modal {
          background-color: var(--neutral-grey);
          border: 2px solid var(--dark-grey);
          border-radius: 5px;
          height: 80vh;
          max-height: 1200px;
          max-width: 1200px;
          overflow: auto;
          position: relative;
          transition: opacity 0.3s, visibility 0.3s;
          width: 80vw;
          z-index: 999;

          .body-image {
               border: 1px solid var(--light-grey);
               margin: 0 1rem;
               width: 80%;
          }

          button {
               background-color: var(--light-grey);
               color: var(--dark-grey);
               cursor: pointer;
               border-radius: 5px;
               /* OLD: font-size: 0.8rem; */
               font-size: clamp(0.7rem, 1.5vw, 0.8rem);
               font-weight: 700;
               margin-bottom: 1rem;
               margin-left: 1rem;
               padding: 0.5rem;
          }

          h5 {
               color: var(--dark-grey);
               /* OLD: font-size: 0.8rem; */
               font-size: clamp(0.7rem, 1.5vw, 0.8rem);
               font-weight: 900;
               margin-bottom: 0;
          }

          ul {
               list-style-type: square;

               li {
                    /* OLD: font-size: 1rem; */
                    font-size: clamp(0.85rem, 1.8vw, 1rem);
               }
          }

          p {
               margin-top: 0;
          }

          h5,
          ul,
          p {
               padding: 0 1rem;
          }
     }

     .close-icon {
          position: absolute;
          right: 5vw;
          top: 5vh;

          svg {
               height: 1.8rem;
               max-height: none;
               width: 1.8rem;
          }
     }
}


.prefooter {
     align-items: flex-start;
     border-bottom: 5px solid var(--light-grey);
     display: flex;
     flex-direction: row;
     gap: 2rem;
     justify-content: center;
     margin-top: 1.3rem;
     margin-bottom: 3rem;
     padding-bottom: 1rem;
     text-align: center;

     div {
          img {
               height: 1.2rem;
          }

          &:last-child {
               img {
                    height: 1.5rem;
               }
          }
     }
}

.section-menu {
     align-items: center;
     background-color: var(--neutral-grey);
     display: flex;
     flex-direction: row;
     font-size: clamp(0.7rem, 1vw, 1.2rem);
     font-weight: 400;
     justify-content: center;
     padding: 10px;
     position: sticky;
     text-align: center;
     top: 0;
     z-index: 100;

     &>*:not(:last-child)::after {
          content: " | ";
          margin: 0 8px;
     }
}

/*****************************/

@media (max-width: 1300px) {
     #skills>div.grid>ul>li:nth-child(3) {
          display: none;
     }
}

@media (max-width: 1000px) {
     #skills>div.grid>ul>li:nth-child(4) {
          display: none;
     }

     #hero .metadetails {
          display: none;
     }

     .faq {
          bottom: 80px !important;
          right: 10px !important;
     }

     .question-icon {
          bottom: 60px !important;
          right: 10px !important;
     }
}