/********************************
 * ROOT STYLES
 ********************************/

:root {

  interpolate-size: allow-keywords;

  /* Light/Dark Mode Support */
  color-scheme: light dark;

  --colour-dark-1: oklch(1.489% 0.00011 271.152);
  --colour-dark-1-transparent: oklch(1.489% 0.00011 271.152 / 0.9);
  --colour-dark-2: oklch(3.885% 0.00011 271.152);
  --colour-dark-3: oklch(7.251% 0.00011 271.152);
  --colour-dark-4: oklch(10.356% 0.00011 271.152);
  --colour-dark-5: oklch(13.460% 0.00011 271.152);
  --colour-dark-6: oklch(16.565% 0.00011 271.152);
  --colour-dark-7: oklch(19.670% 0.00011 271.152);
  --colour-dark-8: oklch(22.774% 0.00011 271.152);
  --colour-dark-9: oklch(25.879% 0.00011 271.152);
  --colour-light-1: oklch(98.511% 0.00011 91.152);
  --colour-light-1-transparent: oklch(98.511% 0.00011 91.152 / 0.95);
  --colour-light-2: oklch(96.115% 0.00011 91.152);
  --colour-light-3: oklch(92.749% 0.00011 91.152);
  --colour-light-4: oklch(89.644% 0.00011 91.152);
  --colour-light-5: oklch(86.540% 0.00011 91.152);
  --colour-light-6: oklch(83.435% 0.00011 91.152);
  --colour-light-7: oklch(80.330% 0.00011 91.152);
  --colour-light-8: oklch(77.226% 0.00011 91.152);
  --colour-light-9: oklch(74.121% 0.00011 91.152);

  /* Colours */
  --test-colour: light-dark(oklch(50% 0.1 120), oklch(50% 0.1 240));
  --colour-primary-1: light-dark(var(--colour-light-1), var(--colour-dark-1));
  --colour-primary-1-transparent: light-dark(var(--colour-light-1-transparent), var(--colour-dark-1-transparent));
  --colour-primary-2: light-dark(var(--colour-light-2), var(--colour-dark-2));
  --colour-primary-3: light-dark(var(--colour-light-3), var(--colour-dark-3));
  --colour-primary-4: light-dark(var(--colour-light-4), var(--colour-dark-4));
  --colour-primary-5: light-dark(var(--colour-light-5), var(--colour-dark-5));
  --colour-primary-6: light-dark(var(--colour-light-6), var(--colour-dark-6));
  --colour-primary-7: light-dark(var(--colour-light-7), var(--colour-dark-7));
  --colour-primary-8: light-dark(var(--colour-light-8), var(--colour-dark-8));
  --colour-primary-9: light-dark(var(--colour-light-9), var(--colour-dark-9));
  --colour-secondary-1: light-dark(var(--colour-dark-1), var(--colour-light-1));
  --colour-secondary-2: light-dark(var(--colour-dark-2), var(--colour-light-2));
  --colour-secondary-3: light-dark(var(--colour-dark-3), var(--colour-light-3));
  --colour-secondary-4: light-dark(var(--colour-dark-4), var(--colour-light-4));
  --colour-secondary-5: light-dark(var(--colour-dark-5), var(--colour-light-5));
  --colour-secondary-6: light-dark(var(--colour-dark-6), var(--colour-light-6));
  --colour-secondary-7: light-dark(var(--colour-dark-7), var(--colour-light-7));
  --colour-secondary-8: light-dark(var(--colour-dark-8), var(--colour-light-8));
  --colour-secondary-9: light-dark(var(--colour-dark-9), var(--colour-light-9));
  --brand-highlight-1: oklch(0.6421 0.1081 149.14);

  /* Borders */
  --border-thin: 1px;
  --border-normal: 2px;
  --border-thick: 4px;
  --primary-border: var(--border-thin) solid var(--colour-primary-9);
  --surface-shadow-1: 0 10px 30px -24px rgba(0, 0, 0, 0.6);
  --surface-shadow-2: 0 20px 45px -28px rgba(0, 0, 0, 0.75);

  /* Fonts */
  --font-primary: "Poppins", sans-serif;
  --font-colour-primary: light-dark(var(--colour-secondary-6), var(--colour-secondary-9));
  --font-colour-secondary: var(--colour-secondary-5);

  /* Font Size Variables */
  --standard-font-size: clamp(0.875rem, calc(1vw + 0.2rem), 1.125rem);
  --standard-button-font-size: clamp(0.8125rem, calc(2.8vw + 0.2em), 1rem);

  /* Widths */
  --max-content-width: 1800px;
}

/********************************
 * GLOBAL STYLES
 ********************************/

 *,
 *::before, 
 *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
 }

html {
  accent-color: var(--brand-highlight-1);
  scroll-behavior: smooth;
}
body {
  background: linear-gradient(to bottom, var(--colour-primary-1), var(--colour-primary-7));
  border-block: clamp(1px, 4vw, 2px) solid var(--brand-highlight-1);
  font-family: var(--font-primary);
  margin: 0;
  padding: 0;

  & * {
    accent-color: var(--brand-highlight-1);
    color: var(--colour-secondary-9);
  }
}

p {
  font-size: var(--standard-font-size);
  letter-spacing: 0.02em;
  line-height: 1.5;
}

a {
  list-style: none;
  text-decoration: none;

  &:hover {
    cursor: pointer;
  }

  &.hover-effect {
    color: var(--colour-secondary-4);
    cursor: pointer;
    overflow: hidden;
    position: relative; 

    &::before {
      background-color: var(--brand-highlight-1);
      bottom: 0;
      content: "";
      height: 2px;
      left: 0;
      position: absolute;
      transition: width .5s ease-out; 
      width: 0; 
    }

    &:hover::before {
      width: 100%;
    }
  }
}

/* TYPOGRAPHY CLASSES */

.bold {
  font-weight: 600;
}

.underline {
  text-decoration: underline;
  text-decoration-color: var(--colour-secondary-4);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
  text-underline-position: under;
}

/* UTILITIES */

.placeholder-image {
  align-items: center;
  aspect-ratio: 3/2;
  background-color: var(--colour-primary-9);
  border: 16px solid var(--colour-primary-9);
  overflow: hidden;

  img {
    filter: grayscale(100);
    object-fit: cover;
    object-position: top;
    opacity: .5;
    overflow: hidden;
    width: 100%;
  }
}

.placeholder-button {
  background-color: var(--colour-dark-1);
  border: 1px solid var(--brand-highlight-1);
  border-radius: 0.5rem;
  color: var(--colour-light-4);
  cursor: pointer;
  display: flex;
  font-size: var(--standard-button-font-size);
  letter-spacing: 0.1em;
  padding: 1rem;
  transition: background-color 0.5s ease, color 0.5s ease;
  width: fit-content;

  &:hover,
  &:focus {
    background-color: var(--brand-highlight-1);
    color: var(--colour-primary-4) !important;
  }
}

.mx-auto {
  margin-inline: auto;
}

.visually-hidden {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.page-wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;

  & > *:not(:is(.hero-content, .what-i-do)) {
    text-align: center;
  }


  & > * {
    width: 100%;
    margin-inline: auto;
  }
}

/* Announcement Bar Styles */
.announcement-bar-wrapper {
  background-color: var(--brand-highlight-1);
  padding: 0.5rem 0;
  text-align: center;

  p {
    color: var(--colour-dark-5);
    font-size: 0.75rem;

    @media (width >= 1440px) {
      font-size: 0.875rem;
    }
  }

  a {
    color: var(--colour-primary-1);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 4px;
  }
}

/* Header Styles */
.header-wrapper {
  background-color: var(--colour-primary-1-transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--colour-primary-6);
  box-shadow: var(--surface-shadow-1);
  position: sticky;
  scroll-margin-top: 8rem;
  top: 0;
  z-index: 3;
  
  header {
    display: grid;
    grid-template-areas:
    "logo logo"
    "nav-1 nav-2";
    margin-inline: auto;
    max-width: var(--max-content-width);
    padding-block: clamp(0.5rem, 1vw, 1rem);
    
    @media (width >= 800px) {
      align-items: center;
      grid-template-areas: "nav-1 logo nav-2";
      grid-template-columns: 1fr 1fr 1fr;
      padding-block-end: 2rem;
    }

    /* Logo Styles */
    .logo {
      align-items: center;
      display: flex;
      grid-area: logo;
      font-size: clamp(2.4rem, 5vw, 4rem);
      font-weight: 600;
      justify-content: center;
      margin-block-start: 0.5rem;
      padding-block: 0.5rem 1rem;

      a {
        color: var(--font-colour-secondary);
        display: inline-block;
      }

      &::before, &::after {
        color: var(--brand-highlight-1);
        font-size: 0.75em;
        font-weight: 600;
      }
      
      &::before {
        content: "<";
        margin-inline-end: 0.1em;
      }

      &::after {
        content: "/>";
        margin-inline-start: 0.1em;
      }
    }

    /* Navigation Styles */
    nav:is(.nav-mini-list) {
      ul {
        display: flex;
        margin-block-start: 0 !important;
        margin-block-end: 0 !important;
        padding: 0 !important;

        li {
          list-style-type: none;
          width: 50%;

          a {
            color: var(--colour-secondary-5);
            cursor: pointer;
            display: flex;
            justify-content: center;
            font-size: clamp(0.75rem, calc(1.5vw + 0.1em), 1.25rem);
            letter-spacing: 0.05em;
            padding: 1rem 0;
            text-align: center;
            text-decoration: none;
            transition: background-color 0.5s ease, color 0.5s ease;

            &:hover {
              background-color: var(--brand-highlight-1);
              color: var(--colour-primary-4);
            }
          }
        }
      }
    }

    #nav-1 {
      grid-area: nav-1;
    }

    #nav-2 {
      grid-area: nav-2;
    }
  }
}

.hero-section {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%3E...%3C%2Fsvg%3E");
    background-size: cover; 
    background-position: center;
}

/* Hero Styles */
.hero-wrapper {
  position: relative;

  @media (prefers-color-scheme: light) {
    border-top: 1px solid var(--colour-light-3)
  }

  .overlay-background {
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
    height: 100%;
    inset: 0;
    position: absolute;
    width: 100%;

    @media (prefers-color-scheme: dark) {
      background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1));
    }

    @media (width >= 768px) {
      background-image: linear-gradient(to left, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));

      @media (prefers-color-scheme: dark) {
        background-image: linear-gradient(to left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1));
      }
    }
  }

  .hero-section {
    display: grid;
    grid-template-areas: "image" "text";
    grid-template-columns: 1fr;
    grid-template-rows: 8rem auto;
    margin-inline: auto;
    max-width: var(--max-content-width);
    min-height: 24rem;

    @media (width >= 768px) {
      gap: 1rem;
      grid-template-areas: "text image";
      grid-template-columns: 3fr 1fr;
      grid-template-rows: auto;
    }

    @media (width >= 1200px) {
      grid-template-columns: 3fr 2fr;
    }

    :is(.text-and-button) {
      padding-inline: clamp(16px, 4vw, 32px);
    }

    .text-and-button {
      align-items: center;
      display: flex;
      flex-direction: column;
      gap: 2.4rem;
      grid-area: text;
      justify-content: center;
      padding-block: clamp(2rem, 8vw, 6rem);
      text-align: center;
      z-index: 2;

      @media (width < 768px) {
        padding-block-end: 4rem;
      }
      @media (width >= 768px) {
        align-items: flex-start;
        padding-block-end: clamp(32px, 8vw, 96px);
        text-align: left;
      }

      h1 {
        color: var(--colour-primary-9);
        font-size: clamp(1.75rem, 5vw, 3rem);
        font-weight: 500;
        line-height: clamp(3rem, 6vw, 4rem);
        margin-block: 0;
        text-wrap: balance;

        @media (prefers-color-scheme: dark) {
          color: var(--colour-light-8);
        }
        a {
          color: var(--colour-secondary-1);
        }
      }
      
      > a {
        background-color: transparent;
        border: 2px solid var(--brand-highlight-1);
        color: var(--colour-secondary-4);
        cursor: pointer;
        font-size: var(--standard-button-font-size);

        @media (prefers-color-scheme: dark) {
          border-width: 2px;
        }

        @media (width >= 1440px) {
          border-width: 2px;
        }

        &:hover {
          background-color: var(--brand-highlight-1);
          color: var(--colour-primary-4);
        }
      }
    }

    .image {
      display: flex;
      flex-direction: row;
      justify-content: stretch;
      grid-area: image;
      height: 100%;
      width: 100%;

      img {
        object-fit: cover;
        width: 100%;
      }
    }
  }
}

/* Main Content Styles */
.main-content-wrapper {
  border-top: 2px solid var(--colour-primary-7);
  padding-inline-end: 0;

  @media (width >= 1200px) {
    gap: 14rem;
  }

  & > * {
    margin-inline: auto;
    max-width: var(--max-content-width);
    padding-block: 4rem; 
    scroll-margin-top: 8rem;

    @media (width >= 1200px) {
      padding-block: 6rem;
    }
  }

  > header {
    scroll-margin-top: 0;
  }

  h2 {
    align-items: center;
    color: var(--colour-secondary-9);
    display: inline-flex;
    font-size: clamp(1rem, 3vw, 2rem);
    font-weight: 700;
    letter-spacing: .1em;
    margin-block-end: clamp(1.5rem, calc(4vw + 0.2rem), 2.5rem);
    text-align: center;
    text-transform: uppercase;
    transition: color 0.5s ease-in-out;

    @media (width >= 900px) {
      letter-spacing: 0.025em;
    }

    &::before, &::after {
      color: var(--brand-highlight-1);
      font-size: 1em;
      font-weight: 700;
    }

    &::before {
      content: "<";
      margin-inline-end: 0.1em;
    }

    &::after {
      content: "/>";
      margin-inline-start: 0.1em;
    }

    span {
      color: var(--colour-secondary-4);
      font-weight: 700;
    }
  }

  &:hover h2 {
    color: var(--colour-secondary-4);
  }
}

/* Where You Can Find Me Section */
.where-you-can-find-me {
    padding-inline: 1.5rem;

    p {
      font-size: var(--standard-font-size);
      max-width: 48ch;
    }

    .social-icons {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      margin-top: 2rem;
      padding-block: 2rem;

      .social-icon {
        align-items: center;
        display: flex;
        flex-direction: column;
        gap: clamp(0.5rem, 1vw, 1rem);
        inline-size: 100%;
        justify-content: center;
        text-align: center;

        @media (width >= 1200px) {
          flex-direction: row;
        }

        &:last-of-type {
          border-right: none;
        }

        .icon {
          align-items: center;
          border-radius: 8px;
          display: flex;
          justify-content: center;

          a {
            cursor: pointer;

            svg {
              rect,
              path {
                transition: fill 0.5s ease;
              }
            }

            &#icon-linkedin {
              path {
                fill: light-dark(var(--colour-secondary-7), var(--colour-secondary-7)) !important;
              }
              &:hover {
                g path {
                  fill: var(--brand-highlight-1) !important;
                }
              }
            }

            &#icon-github {
              path {
                fill: light-dark(var(--colour-secondary-7), var(--colour-secondary-7)) !important;
              }
              &:hover {
                path {
                  fill: var(--brand-highlight-1) !important;
                }
              }
            }

            &#icon-codepen {
              path {
                fill: light-dark(var(--colour-secondary-7), var(--colour-secondary-7)) !important;
              }
              g path:nth-of-type(2) {
                fill: light-dark(var(--colour-primary-7), var(--colour-primary-2)) !important;
              }
              &:hover {
                g rect {
                  fill: var(--brand-highlight-1) !important;
                }

                g path:nth-of-type(1) {
                  fill: var(--brand-highlight-1) !important;
                }
              }
            }

            &#icon-x {
              g path {
                fill: light-dark(var(--colour-secondary-7), var(--colour-secondary-7)) !important;
              }
              &:hover {
                g path {
                  fill: var(--brand-highlight-1) !important;
                }
              }
            }
          }
        }

        .icon-label {
          font-size: clamp(0.75rem, 1.25vw, 1.125rem);
          letter-spacing: 0.05em;
        }
      }
    }
}

/* Footer Styles */
.footer-wrapper {
  p {
    font-size: 0.75rem;
    padding-block: 0.5rem;
    text-align: center;
  }
}