/*Root-Level Config and var*/

:root{
    /*Color variables*/
    --clr-base-100: hsl(0, 0%, 100%);
    --clr-base-900: hsl(0, 0%, 0%);

    --primary-color: hsl(1, 76%, 39%);
    --primary-accent: hsl(0.6,75.6%,24.1%);

    --secondary-color: hsl(222, 46%, 17%);

    --tertiary-accent-300: hsl(181, 76%, 39%);
    --tertiary-accent-400: hsl(0, 1%, 21%);
    --tertiary-accent-500: hsl(320, 20%, 57%);

    --ff-primary: "Roboto Flex", sans-serif; 

    --ff-body: var(--ff-primary);
    --ff-heading: var(--ff-primary);
    
    --ff-body: var(--ff-primary);
    --ff-heading: var(--ff-primary);

    --fw-regular: 400;
    --fw-semi-bold: 600;
    --fw-bold: 700;

    --fs-100: 0.8125rem;
    --fs-200: 0.875rem;
    --fs-300: 0.9375rem;
    --fs-400: 1rem;
    --fs-425: 1.15rem;
    --fs-450: 1.25rem;
    --fs-475: 1.5rem;
    --fs-500: 1.875rem;
    --fs-550: 2rem;
    --fs-600: 2.5rem;
    --fs-700: 3.5rem;
    --fs-750: 4rem;
    --fs-800: 4.5rem;
    --fs-900: 5rem;
    --fs-h3: 6rem;
    --fs-h2: 8rem;
    --fs-h1: 10rem;

    --fs-body: var(--fs-200);
    --fs-primary-heading: var(--fs-100);
    --fs-secondary-heading: var(--fs-100);
    --fs-nav: var(--fs-100);
    --fs-button: var(--fs-100);
    
    --size-100: 0.25rem;
    --size-200: 0.5rem;
    --size-300: 0.75rem;
    --size-400: 1rem;
    --size-500: 1.5rem;
    --size-600: 2rem;
    --size-700: 3rem;
    --size-800: 4rem;
    --size-900: 5rem;
    --size-1000: 6rem;
    --size-1100: 7rem;
    --size-1200: 8rem;
}

@media (min-width: 50em){
  :root {
    --fs-body: var(--fs-300);
    --fs-primary-heading: var(--fs-400);
    --fs-secondary-heading: var(--fs-400);

    --fs-nav: var(--fs-400);
  }
}

/*Css Reset*/
/* 1. Use a more-intuitive box-sizing model */
*, *::before, *::after {
    box-sizing: border-box;
  }
  
  /* 2. Remove default margin */
  * {
    margin: 0;
  }
  
  body {
    /* 3. Add accessible line-height */
    line-height: 1.5;
    /* 4. Improve text rendering */
    -webkit-font-smoothing: antialiased;
  }
  
  /* 5. Improve media defaults */
  img, picture, video, canvas, svg {
    display: block;
    max-width: 100%;
  }
  
  /* 6. Inherit fonts for form controls */
  input, button, textarea, select {
    font: inherit;
  }
  
  /* 7. Avoid text overflows */
  p, h1, h2, h3, h4, h5, h6 {
    overflow-wrap: break-word;
  }
  
  /* 8. Improve line wrapping */
  p {
    text-wrap: pretty;
  }
  h1, h2, h3, h4, h5, h6 {
    text-wrap: balance;
  }
  
  /*
    9. Create a root stacking context
  */
  #root, #__next {
    isolation: isolate;
  }

  /*General Styling*/
  body {
    font-size: var(--fs-body);
    font-family: var(--ff-body);
    color: var(--clr-base-900);
  }

  p:not([class]){
    max-width: 32ch;
  }

  p[data-width="wide"]{
    max-width: 42ch;
  }

  a:not([class]){
    text-decoration: none;
  }

  button, a, p, img, span, div{
    -webkit-user-select: none;
    user-select: none;
    outline: none;
  }

  /* Button */

  .button{
    background-color: var(--primary-color);
    color: var(--clr-base-100);
    width: 180px;
    height: 80px;
    border: 2px solid var(--clr-base-100);
    border-radius: 32px;
    cursor: pointer;
    font-size: var(--fs-500);
    font-weight: var(--fw-bold);
  }

  .button:hover,
  .button:focus-visible{
    background-color: var(--clr-base-100);
    color: var(--primary-color);
  }

  .inverted-button{
    background-color: var(--clr-base-100);
    color: var(--primary-color);
    width: 180px;
    height: 80px;
    border: 2px solid var(--primary-color);
    border-radius: 32px;
    cursor: pointer;
    font-size: var(--fs-500);
    font-weight: var(--fw-bold);
  }

  .inverted-button:hover,
  .inverted-button:focus{
    background-color: var(--primary-color);
    color: var(--clr-base-100);
  }


  /*Account Button*/
.logo{
  width: 200px;
  height: 100px;
}

.account-btn{
    margin: var(--size-300);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--size-200);
    border-radius: 16px;
    padding: var(--size-200);
    font-weight: var(--fw-semi-bold);
    font-size: var(--fs-450);
  }

  .account-btn{
    color: var(--clr-base-100);
    background-color: var(--secondary-color);
  }

  .account-btn svg{
    width: var(--size-600);
    fill: var(--primary-color);
    height: auto;
  }

  .account-svg-wrapper{
    background-color: var(--clr-base-100);
    height: auto;
    width: auto;
    border-radius: 50%; 
  }

  .account-btn:hover, 
  .account-btn:focus{
    background-color: var(--clr-base-100);
    color: var(--primary-color);
    cursor: pointer;
  }

  /* Navigation */
  
  .primary-header{
    position: sticky;
    top: 0px;
    z-index: 100;
    padding-top: var(--size-200);
    background-color: var(--clr-base-100);
  }

  .nav-wrapper{
    display: flex;
    flex-wrap: wrap;
    justify-content: end;
    align-items: center;
    font-size: var(--fs-nav);
  }

  .nav-list{
    background-color: var(--primary-color);
    width: 100vw;
  }

  .nav-list{
    padding: var(--size-200);
    font-size: var(--fs-nav);
    display: flex;
    justify-content: end;
    gap: clamp(var(--size-300), 5vw, var(--size-600));
    font-weight: var(--fw-semi-bold);
    list-style: none;
  }
  
  .nav-list a{
    padding: var(--size-200);
    color: var(--clr-base-100);
  }

  .nav-list a:hover,
  .nav-list a:focus{
    background-color: var(--secondary-color);
    border-radius: 8px;
    cursor: pointer;
  }

  .nav-list:last-child{
    padding-right: var(--size-600);
  }

  .nav-item-active{
    color: var(--clr-base-100);
    background-color: var(--secondary-color);
    text-decoration: none;
    border-radius: 8px;
  }

  .nav-upper{
    display: flex;
    width: 100vw;
    align-items: center;
    justify-content: space-between;
  }

  .nav-upper{
    padding-right: var(--size-800);
    padding-left: var(--size-800);
  }

  .burger, 
  .burger-content{
    display: none;
  }

  /* Footer */

  .footer-nav{
    height: 100px;
  }

  .footer-wrapper{
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-left: auto;
    height: inherit;
    background: linear-gradient(to bottom, var(--primary-color), var(--primary-accent));
  }

  .footer-nav-list{
    padding: var(--size-200);
    font-size: var(--fs-nav);
    display: flex;
    justify-content: end;
    align-items: center;
    gap: clamp(var(--size-300), 5vw, var(--size-600));
    font-weight: var(--fw-semi-bold);
    list-style: none;
  }

  .footer-nav-list a{
    color: var(--clr-base-100);
  }

  .footer-nav-list li{
    opacity: 0.95;
  }

  .footer-nav-list li:last-of-type{
    padding-right: 32px;
  }

  .footer-nav-list a:hover,
  .footer-nav-list a:focus{
    color: var(--secondary-color);
    text-decoration: underline;
  }

  .footer-special{
    position: relative;
    left: 85%;
    bottom: 10%;
    display: flex;
    padding-right: var(--size-300);
    padding-bottom: var(--size-300);
    fill: var(--clr-base-100);
    align-items: center;
    opacity: 0.8;
  }

  .footer-special p{
    padding: 4px;
    color: var(--clr-base-100);
  }

  .footer-special svg{
    width: 16px;
    height: 16px;
  }

  /* Socials */
  .social-platform{
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    padding-top: var(--size-500);  
  }

  .social-platform li{
    width: 64px;
    list-style: none;
  }

  .social-platform svg:hover,
  .social-platform svg:focus-within{
    fill: var(--secondary-color);
  }

  .social-platform svg{
    width: 32px;
    height: 32px;
    fill: var(--clr-base-100);
  }

    /*utility class*/
    
  .vanished{
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: rect(0px 0px 0px 0px round 0%);
    white-space: nowrap;
    border: 0;
  }

  /*Temporary To change width of container */
  .container{
    /*padding can change*/
    --max-width: 1920px;
    --container-padding: 0.2rem;

    width: min(var(--max-width), 100% - (var(--container-padding) * 2));
    margin-inline: auto;
    overflow: hidden;
  }

  .container-sm{
    /*padding can change*/
    --max-width: 1110px;
    --container-padding: 0.2rem;

    width: min(var(--max-width), 100% - (var(--container-padding) * 2));
    margin: auto;
    overflow: hidden;
  }

  .container-block-center{
    width: 100%;
    height: auto;
    display: block;
    text-align: center;
    padding: var(--size-200);
    margin-inline: 0 auto;
  }

  .content-flex-center{
    padding: var(--size-400);
    margin: var(--size-200);
    display: flex;
    align-items: center;
    justify-content: center;
    place-items: center;
  }

  .even-columns{
    display: grid;
    gap: 1rem;
  }

  .grow{
    width: 100%;
    height: 1000px;
  }

  .fs-100{
    font-size: var(--fs-100);
  }

  .fs-200{
    font-size: var(--fs-200);
  }

  .fs-300{
    font-size: var(--fs-300);
  }

  .fs-400{
    font-size: var(--fs-400);
  }

  .fs-450{
    font-size: var(--fs-450);
  }

  .fs-450{
    font-size: var(--fs-475);
  }
  
  .fs-500{
    font-size: var(--fs-500);
  }

  .fs-600{
    font-size: var(--fs-600);
  }

  .fs-700{
    font-size: var(--fs-700);
  }

  .fs-800{
    font-size: var(--fs-800);
  }

  .fs-900{
    font-size: var(--fs-900);
  }

  .fs-h3{
    font-size: var(--fs-h3);
  }

  .fs-h2{
    font-size: var(--fs-h2);
  }

  .fs-h1{
    font-size: var(--fs-h1);
  }

  .fs-h2{
    font-size: var(--fs-h2);
  }

  .fs-h3{
    font-size: var(--fs-h3);
  }

  .fw-regular{
    font-weight: var(--fw-regular);
  }

  .fw-semi-bold{
    font-weight: var(--fw-semi-bold);
  }

  .fw-bold{
    font-weight: var(--fw-bold);
  }

  .align-items-center{
    align-items: center;
  }

  .align-items-start{
    align-items: start;
  }

  .align-self-start{
    align-self: start;
  }

  .justify-self-center{
    justify-self: center;
  }

  .justify-content-center{
    justify-content: center;
  }

  .space-evenly{
    justify-content: space-evenly;
  }

  .padding-400{
    padding: var(--size-400);
  }

  .clr-primary{
    color: var(--primary-color);
  }

  .clr-secondary{
    color: var(--secondary-color);
  }

  .clr-white{
    color: var(--clr-base-100);
  }

  .clr-black{
    color: var(--clr-base-900);
  }

  .display-flex{
    display: flex;
  }

  .flex-break{
    flex-basis: 100%;
    height: 0;
  }

  .flex-down{
    flex: 1;
  }

  .break-100{
    width: inherit;
    height: var(--size-100);
    margin: 0;
    padding: 0;
  }

  .break-200{
    width: inherit;
    height: var(--size-200);
    margin: 0;
    padding: 0;
  }

  .break-400{
    width: inherit;
    height: var(--size-400);
    margin: 0;
    padding: 0;
  }

  .break-800{
    width: inherit;
    height: var(--size-800);
    margin: 0;
    padding: 0;
  }

  .break-1000{
    width: inherit;
    height: var(--size-1000);
    margin: 0;
    padding: 0;
  }

  .break-large-100{
    width: inherit;
    height: 50%;
    margin: 0;
    padding: 0;
  }

  .break-large-200{
    width: inherit;
    height: 60%;
    margin: 0;
    padding: 0;
  }

  .break-large-300{
    width: inherit;
    height: 70%;
    margin: 0;
    padding: 0;
  }

  .text-align-center{
    text-align: center;
  } 

  .space-evenly{
    justify-content: space-evenly;
  }


  /*Navigation Media Query*/
  @media (max-width: 720px){
    .logo{
      width: 140px;
      height: 80px;
    }

    .nav-wrapper{
      padding: 0;
    }

    .nav-upper{
      padding-left: var(--size-200);
      padding-right: var(--size-300);
      width: 100vw; 
    }

    .container:has(> * .burger-content){
      --max-width: 1110px;
      overflow: visible;
    }

    .primary-header{
      overflow: visible;
    }

    .nav-list,
    .account-btn{
      display: none;
    }

    .burger{
      cursor: pointer;
      display: block;
      fill: var(--tertiary-accent-500);
      width: 28px;
      height: 28px;
    }

    .burger-content{
      /*display*/
      display: none;
      grid-template-columns: repeat(3, 1fr);
    }

    .burger-content{
      display: grid;
      padding-left: var(--size-200);
      padding-right: var(--size-200);
      padding-bottom: var(--size-200);
      background-color: var(clr-base-100);
      width: 100%;
      height: 100%;
      margin: 0 auto;
    }

    .burger-nav{
      padding-left: var(--size-300);
      list-style: none;
      text-decoration: none;
    }

    .burger-nav{
      /*Parent Grid*/
      grid-column-start: span 3;

      /*Nav Display*/
      display: grid;
      grid-template-columns: 1fr;
      place-items: left;
    }

    .burger-nav a{
      font-size: var(--fs-300);
      font-weight: var(--fw-bold);
      color: var(--primary-color);
    }

    .burger-nav li{
      display: flex;
      width: 100%;
      height: 32px;
      align-items: center;
      padding-left: var(--size-200);
    }

    .burger-nav li:hover,
    .burger-nav li:focus-within {
      cursor: pointer;
      border-radius: 8px;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    }
}