@import url("theme.css");

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

* {
     z-index: 1;
}

body {
     color: var(--primary-colour);
     font-family: var(--general-sans);
}

.page-menu {
     align-items: center;
     background-color: var(--background-colour);
     color: var(--primary-colour);
     display: flex;
     flex-direction: row;
     font-size: 0.6rem;
     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;
     }
}

.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: 100vh;
     justify-content: center;
     text-align: center;
     z-index: -5 !important;

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

     .title {
          font-family: var(--general-serif);
          font-size: 5rem;
          font-variation-settings: "opsz" 8;
          font-weight: 900;
     }

     .metadetails {
          border-bottom: 0.5px solid lightgray;
          border-top: 0.5px solid lightgray;
          display: flex;
          flex-direction: row;
          gap: 5rem;

          img {
               height: 2.5rem;
          }

          figcaption {
               color: var(--primary-colour);
               font-family: var(--general-sans);
               font-size: 0.8rem;
               font-style: normal;
               font-weight: 400;
          }
     }
}

#experience {
     color: var(--primary-colour);
     min-height: 80vh;


     &>div {
          margin: 30px;
          padding: 1.2rem;

          li {
               border: none;

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

          h2 {
               color: var(--primary-colour);
               font-family: var(--general-sans);
               font-size: 2.5rem;
               margin: 0 0 -18px 0;
          }

          .company {
               font-family: var(--general-sans);
               font-weight: 400;
               font-size: 1.2rem;
               margin: 0;

               span {
                    font-size: 0.7rem;
                    font-weight: 400;
                    margin: 0 0 0 25px;
               }
          }

          .job-blurb {
               font-family: var(--general-serif);
               font-size: 1.2rem;
               font-weight: 700;
               line-height: 1.5;
               margin-bottom: 30px;
               margin-top: 30px;
          }

          .job-achievements {
               font-family: var(--general-serif);

               h5 {
                    color: var(--primary-colour);
                    font-size: 0.9rem;
                    margin: 0;
                    text-transform: none;
               }

               p {
                    margin: 0 0 10px 0;
               }
          }
     }

     .mambu {
          background-image: url("../media/mambu-logo-272x263.png");
     }

     .spread {
          background-image: url("../media/spread-ai-logo-125x144.png");
     }

     .mambu,
     .spread {
          background-size: contain;
          background-repeat: no-repeat;
          filter: saturate(0);
          height: 112px;
          margin-left: 3rem;
          margin-right: 3rem;
          position: relative;

          &::after {
               background: rgba(255, 255, 255, 0.70);
               bottom: 0;
               content: '';
               left: 0;
               pointer-events: none;
               position: absolute;
               right: 0;
               top: 0;
               z-index: -5;
          }
     }
}

#demo {
     margin: 0 2.5rem;

     .cards {

          .twemoji {
               font-size: 3rem;
               margin-bottom: 8px;
          }

          ul li {
               align-items: center;
               display: flex;
               flex-direction: column;
               font-size: 1.8rem;
               height: 300px;
               justify-content: center;
          }
     }
}

#learning {
     margin: 2.5rem;

     .cards {

          ul li {
               background-color: var(--tertiary-colour);
               border: none;

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

.prefooter {
     align-items: flex-start;
     display: flex;
     flex-direction: row;
     gap: 2rem;
     justify-content: center;
     margin-top: 1.3rem;
     margin-bottom: 0.5rem;
     text-align: center;

     div {
          img {
               height: 1.2rem;
          }
     }

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

.faq-container {
     position: relative;

     .faq {
          background: var(--background-colour);
          border: 2px solid var(--primary-colour);
          border-radius: 5px;
          bottom: 50px;
          opacity: 0;
          padding: 20px;
          position: fixed;
          right: 20px;
          transition: opacity 0.3s, visibility 0.3s;
          visibility: hidden;
          width: 300px;
          z-index: 999;

          h3 {
               color: var(--primary-colour);
               font-family: var(--general-serif);
          }
     }

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

     #faq-toggle:checked+.question-icon .icon.close {
          opacity: 1;
     }

     #faq-toggle:checked~.faq {
          opacity: 1;
          visibility: visible;
     }

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

          .icon {
               font-size: 1rem;
               position: absolute;
               transition: opacity 0.3s;
          }

          .icon.question {
               opacity: 1;
          }

          .icon.close {
               opacity: 0;
          }
     }
}

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