/* 
    Theme name: Wind Theme
    Description: Wild as the wind
    Author: Sczel
    Version: 1.0.0
*/

:root {
  --color-base: #050729;
  --color-base2: hsl(237, 78%, 9%);
  --color-accent: hsl(from var(--color-base) calc(h - 80) calc(s + 12) calc(l + 40));
  /* --color-accent: #77e000; */
  --color-light: #e1f4f5;


  --color-text: var(--color-light);
  --color-text2: hsl(from var(--color-base) h s calc(l + 20));
  --color-link: var(--color-accent);

  --wp-menu: 46px;
  --page-wrapper: 800px;
  --page-height: calc(100vh - var(--wp-menu)); /* DEV Size */
  --header-height: 64px;

  --hamburger-width: 20px;
  --hamburger-bar: 2px;
  --hamburger-gap: 5px;
  --hamburger-height: calc(var(--hamburger-bar) * 3 + var(--hamburger-gap) * 2);
  --hamburger-margin: 22px;
  --hamburger-color: var(--color-light);
  --hamburger-timing: .4s cubic-bezier(0.23, 1, 0.320, 1);

}
* {
  box-sizing: border-box;
}
a {
  text-decoration: none;
  color: var(--color-text);
  &:hover {
    color: var(--color-link);
  }
}
.wrapper {
  width: 100%;
  max-width: var(--page-wrapper);
  margin: 0 auto;
}
body {
  margin: 0;
  padding: 0;
  width: 100%;
  min-height: var(--page-height);

  display: flex;
  flex-direction: column;

  background-color: var(--color-base);
  color: var(--color-text);

  font-family: 'Geist', sans-serif;
  font-size: 0.825rem;
  font-weight: 300;
  text-wrap-style: pretty;
  
  #page {
    height: 100%;
    display: flex;
    flex-direction: column;
    flex: 1;
    
    header {
      background-color: hsl(from var(--color-base) h s calc(l - 10));
      
      section {

        div.topbar-container {
          display: flex;
          justify-content: space-between;
          height: var(--header-height);

          div.logo-container {
            display: flex;
            align-items: center;
            
            a {
              display: flex;
              align-items: center;
  
              svg#logo {
                width: calc(512px / 3);
                height: calc(128px  / 3);
                path.logoColor {
                  fill: var(--color-text);
                }
                &:hover {
                  path.logoColor {
                    fill: var(--color-accent);
                  }
                }
              }
            }
          }
          div.nav-container {
            position: relative;

            label.hamburger {
              --x-width: calc(var(--hamburger-height) * 1.41421356237);

              display: flex;
              flex-direction: column;
              gap: var(--hamburger-gap);
              width: max-content;
              position: absolute;
              top: var(--hamburger-margin);
              right: var(--hamburger-margin);
              z-index: 10;
              cursor: pointer;

              &::after, &::before, input {
                  content: "";
                  width: var(--hamburger-width);
                  height: var(--hamburger-bar);
                  background-color: var(--hamburger-color);
                  border-radius: 50px;
                  transform-origin: right center;
                  transition: opacity var(--hamburger-timing), width var(--hamburger-timing), rotate var(--hamburger-timing);
              }
              input {
                  appearance: none;
                  padding: 0;
                  margin: 0;
                  outline: none;
                  pointer-events: none;

                  &:checked {
                      opacity: 0;
                      width: 0;
                  }
              }

              &:has(input:checked)::before {
                  rotate: -45deg;
                  width: var(--x-width);
                  translate: 0 calc(var(--hamburger-bar) / -2);
                  background-color: var(--color-accent);
              }
              &:has(input:checked)::after {
                  rotate: 45deg;
                  width: var(--x-width);
                  translate: 0 calc(var(--hamburger-bar) / 2);
                  background-color: var(--color-accent);
              }
              &:has(input:checked) + nav.top-nav {
                  display: flex;
              }
              &:hover {
                  &::after, &::before, input {background-color: var(--color-accent);}
              }
            }
            
            nav.top-nav {
              display: none;
              height: auto;
              position: absolute;
              top: var(--header-height);
              right: 0;
              z-index: 10;

              div.menu-top-menu-container {
                background-color: hsl(from var(--color-base) h s calc(l - 20));
                padding: 1rem 2rem;

                ul#menu-top-menu {
                  height: 100%;
                  list-style: none;
                  padding: 0;
                  margin: 0;
                  display: flex;
                  flex-direction: column;
                  gap: 1rem;

                  li.menu-item {
                    display: flex;
                    align-items: center;
                    
                    a {
                      display: flex;
                      align-items: center;
                      height: 100%;
                      font-weight: 300;

                      &:hover {
                        svg.menu-icon {
                          .svg-fill {
                            fill: var(--color-accent);
                          }
                        }
                      }
                      svg.menu-icon {
                        width: 20px;
                        height: 20px;
                        align-self: center;
                      }
                      span.cart-count {
                        align-self: flex-start;
                        line-height: 2rem;
                        font-weight: 300;
                        font-size: .75rem;
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
      
    }
    main {
      flex: 1;
      color: rebeccapurple;
    }
    footer {
      background-color: rebeccapurple;
      section {
        div.grid-container {
          margin: 4rem 0;
          display: grid;
          gap: 1rem;
          grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
          div.grid-item {
            div.logo-container {
              svg#symbol {
                width: calc(512px / 4);
                height: calc(512px  / 4); 
                path {
                  fill: hsl(from var(--color-base) h s calc(l + 12));
                }
                &:hover {
                  path {
                    fill: var(--color-text2);
                  }
                  rotate: -30deg;
                }
              }
            }
          }
          
          ul {
            list-style: none;
            padding: 0;
            margin: 0;
            li {
              h4 {
                color: var(--color-text2);
              }
              a {
                color: var(--color-text2);
                &:hover {
                  color: var(--color-accent);
                }
              }
              p {
                color: var(--color-text2);
              }
            }
          }
          
        }
      }
    }
  }
}
@media screen and (min-width: 768px) {
 :root {
  --wp-menu: 32px;
 }
    body {
      div#page {

        header {
          margin-bottom: 2rem !important;
          
          div.topbar-container {
              
            label.hamburger {
              display: none !important;
            }
            nav.top-nav {
              display: flex !important;
              margin-top: 0 !important;
              position: static !important;
              height: 100% !important;
              
              div.menu-top-menu-container {
                background-color: transparent !important;
                padding: 0 !important;

                ul.menu {
                    flex-direction: row !important;
                }
              }
            }
          }
        }
      section.hero-wrapper {
        div.hero-container {
          flex-direction: row !important;

          div.hero-textbox {
            align-self: center;
          }
          img.hero-image {
            width: 50% !important;
          }
        }
      }
    }
  }
}