@font-face {
  font-family: "Poppins";
  src: url("./Poppins/Poppins-Light.ttf") format("truetype");
  font-weight: 100;
}

@font-face {
  font-family: "Poppins";
  src: url("./Poppins/Poppins-SemiBold.ttf") format("truetype");
  font-weight: 600;
}

:root {
  --margin: 2rem;
  --padding: 2rem;
  --gap: calc(var(--margin)*7);

  --gold-5: #1f1610;
  --gold-4: #493923;
  --gold-3: #9c7137;
  --gold-2: #fdd07d;
  --gold-1: #fde9a3;

  --median-gold-gray: #e6dcc8;

  --gray-scale-6: #282828;
  --gray-scale-5: #323232;
  --gray-scale-4: #3c3c3c;
  --gray-scale-3: #646464;
  --gray-scale-2: #6e6e6e;
  --gray-scale-1: #d2d2d2;

  --toned-black: #333333;
  --dark-fuchsia: #ae397e;

  --dark-green: #035150;
  --medium-green: #00958e;
  --light-green: #00b4a8;

  --sunrise-orange: #fc8d5e;
  --sunrise-yellow: #fcc97d;
  --sunrise-pink: #f2bfbb;
  --sunrise-light-blue: #e3e0fe;
  --sunrise-blue: #8498e1;
  --sunrise-sun: #fde25b;

  --dark-gradient-main: #664b2f;
  --gradient-gold-4: #c1a65b;
  --gradient-main: #ffd54c;
  --medium-to-dark-gradient: radial-gradient(circle at center, var(--gradient-gold-4) 30%, var(--gold-5));
  --gold-3-to-dark-gradient: radial-gradient(circle at center, var(--gold-3), var(--gold-5));
  --gold-3-to-medium-gradient: radial-gradient(var(--gold-3), var(--gradient-main));
  --golden-gradient: radial-gradient(circle at bottom, var(--gold-4) 15%, var(--gold-3) 45%, var(--gold-5) 80%, var(--toned-black));

  --dark-to-gold-3-linear-gradient: radial-gradient(var(--dark-gradient-main), var(--gradient-gold-3));
  --dark-to-medium-linear-gradient: linear-gradient(var(--gold-5), var(--gold-4));
  --dark-to-black-linear-gradient: linear-gradient(var(--gold-5), var(--toned-black));
  --green-linear-gradient: linear-gradient(var(--dark-green), var(--medium-green), var(--light-green));

  --sunrise-gradient: radial-gradient(circle at bottom, var(--sunrise-sun) 10%, var(--sunrise-orange), var(--sunrise-yellow), var(--sunrise-pink));

  --form-background: var(--dark-to-main-linear-gradient);

  /*Body css var*/
  --background-gradient: linear-gradient(black, var(--gray-scale-6));

  --inverted-background-gradient: linear-gradient(0deg, black, var(--gray-scale-6));

  /*Button css var*/
  --button-background-color-dark: var(--gold-3);
  --button-background-color-light: var(--gold-2);
  --button-border-color-dark: var(--gold-3);
  --button-border-color-light: var(--gold-2);
  --button-text-color: var(--gray-scale-6);
  --button-text-shadow-dark: var(--gold-4);
  --button-text-shadow-light: var(--gold-1);

  /*Text css var*/
  --text-color: var(--gray-scale-1);

  /* images */
  --wellness-wave-svg: url("data:image/svg+xml,%3Csvg width='1122.5197' height='65.885391' viewBox='0 0 296.99999 17.432176' version='1.1' id='svg1' xmlns='http://www.w3.org/2000/svg' xmlns:svg='http://www.w3.org/2000/svg'%3E%3Cg id='layer1' transform='translate(43.65625,-72.760417)'%3E%3Cg fill='%23ffffff' id='g3' transform='matrix(-0.23203125,0,0,-0.16573661,253.34375,90.192594)'%3E%3Cpath d='m 0,51.76 c 36.21,-2.25 77.57,-3.58 126.42,-3.58 320,0 320,57 640,57 271.15,0 312.58,-40.91 513.58,-53.4 V 0 H 0 Z' fill-opacity='0.3' id='path1'/%3E%3Cpath d='m 0,24.31 c 43.46,-5.69 94.56,-9.25 158.42,-9.25 320,0 320,89.24 640,89.24 256.13,0 307.28,-57.16 481.58,-80 V 0 H 0 Z' fill-opacity='0.5' id='path2'/%3E%3Cpath d='M 0,0 V 3.4 C 28.2,1.6 59.4,0.59 94.42,0.59 c 320,0 320,84.3 640,84.3 285,0 316.17,-66.85 545.58,-81.49 V 0 Z' id='path3'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  --up-wellness-wave: url('./svgs/up-wave.svg');
  --down-wellness-wave: url('./svgs/down-wave.svg');

  --header-up-decoration: var(--up-wellness-wave);
  --header-down-decoration: var(--down-wellness-wave);
}




/*General attributes*/
body {
  margin: 0;
  font-family: 'Poppins';

  color: var(--text-color);

  &>background {
    position: fixed;
    top: 0;
    left: 0;
    z-index: -10;
    height: 100vh;
    width: 100%;
    background-image: var(--background-gradient);
  }
}


nav {
  z-index: 1000;

  & a,
  p {
    color: var(--text-color);
  }

  &>p span {
    color: var(--dark-fuchsia)
  }

  & a:has(> img) {
    justify-content: center;
    align-content: center;
    display: flex;

    &>img {
      width: 12rem;
      align-self: center;
    }
  }
}

h1,
h2,
h3 {
  font-weight: 100;
}

h2,
h3 {
  background-color: var(--gold-3);
  /* Fallback color */
  background-image: linear-gradient(var(--gold-2), var(--gold-3));
  background-size: 100%;
  background-clip: text;
  -webkit-background-clip: text;
  -moz-background-clip: text;
  -webkit-text-fill-color: transparent;
  -moz-text-fill-color: transparent;

  filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.7));

  font-size: 2rem;
}


a {
  text-decoration: none;
}

ul {
  list-style: none;
  padding: 0;

  & li {
    margin: var(--margin) 0;
  }
}

img#logo {
  width: 180px;
  margin-bottom: var(--margin);
}

/*********************/
/*Specific attributes*/
/*********************/

.action-button {
  --background-color-dark: var(--button-background-color-dark, #646464);
  --background-color-light: var(--button-background-color-light, #6e6e6e);
  --border-color-dark: var(--button-border-color-dark, #646464);
  --border-color-light: var(--button-border-color-light, #6e6e6e);
  --text-color: var(--button-text-color, #282828);
  --text-shadow-dark: var(--button-text-shadow-dark, #3c3c3c);
  --text-shadow-light: var(--button-text-shadow-light, #d2d2d2);

  --background-gradient: linear-gradient(var(--background-color-dark), var(--background-color-light));
  --background-detail: url("svgs/button_reflection.svg");
  --border-gradient: linear-gradient(30deg, var(--border-color-light), var(--border-color-dark));

  padding: var(--padding);
  margin: 0 auto;
  width: fit-content;
  background: var(--background-detail), var(--background-gradient) padding-box, var(--border-gradient) border-box;
  background-position: right;
  background-size: contain;
  background-repeat: no-repeat;
  border: 2px solid transparent;
  border-radius: 3rem;
  color: var(--text-color);
  font-weight: 600;
  text-transform: uppercase;
  text-align: center;
  letter-spacing: 0.3rem;
  text-shadow: -0.5px -0.5px 0px var(--text-shadow-dark), 0.5px 0.5px 0px var(--text-shadow-light);
  box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.5);
}

.grid {
  display: grid;
  gap: 4rem 0;
}

/*Phone navbar handling*/
.phone-nav {
  position: fixed;
  bottom: var(--margin);
  left: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;

  &>div:has(input) {
    margin: var(--margin);

    &>input,
    img {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
    }

    &>input {
      width: 20%;
      height: 80%;
      opacity: 0;
      z-index: 3;
    }

    &>img {
      z-index: 2;
      width: 3rem;
      height: 3rem;
    }
  }

  &>div:has(ul) {
    border-radius: 2rem 2rem 0 0;
    display: none;
    z-index: 1;
    position: fixed;
    bottom: 0;
    background-image: var(--inverted-background-gradient);
    width: 100%;
    height: 80%;

    &>ul {
      display: flex;
      flex-direction: column;
      margin: var(--margin) 0 0 0;
      padding: 0 var(--padding);
      width: 100%;

      &>img {
        width: 180px;
        align-self: center;
        margin-bottom: var(--margin);
      }

      & a,
      details {
        margin: calc(var(--margin)/2) 0 0;
        color: var(--text-color);
        text-transform: uppercase;
        font-weight: bold;
      }

      &>details {
        display: block;

        &>summary>p {
          margin-left: calc(var(--margin)/2);
        }

        &>summary::marker {
          font-size: 1.4rem;
        }

        &>ul {
          display: flex;
          flex-direction: column;

          &>a {
            margin-left: var(--margin);
          }
        }
      }
    }

    ul.social {
      display: flex;
      flex-direction: row;
      gap: 1rem;
      justify-content: center;
      align-items: center;

      & .icon {
        width: 2rem;
      }
    }
  }

  & div:has(input:checked)~div:has(ul) {
    display: flex;
  }

}


/*desktop navbar handling*/
.desktop-nav {
  display: none;
  grid-template-columns: [margin-left]1fr [content] 1080px [margin-right]1fr;
  position: fixed;
  top: 0;
  box-sizing: border-box;
  overflow: visible;
  width: 100%;
  background-image: var(--inverted-background-gradient);
  box-shadow: 0 3px 5px -5px black;

  &>div {
    grid-column: content;
    display: flex;
    justify-content: space-between;
    align-items: center;

    &>img {
      width: 180px;
      margin: 1rem 0;
    }

    &>div {

      &>a,
      p {
        position: relative;
        padding: var(--padding) 0;
        bottom: 0;
      }

      &>p {
        margin: 0;
      }

      &>ul {
        position: absolute;
        display: none;
        flex-direction: column;
        padding: calc(var(--padding)/2);
        padding-right: calc(var(--padding)*2);
        margin: calc(var(--margin)*-0.5) 0 0 0;
        box-shadow: 0 0 10px var(--gold-2);
        top: 100%;
        background-image: var(--inverted-background-gradient);
        border-radius: 0 0 1rem 1rem;

        &>a {
          margin: calc(var(--margin)/4) 0;
        }
      }

      &>p:hover+ul,
      ul:hover {
        display: flex;
      }
    }


    & p,
    a {
      background-color: transparent;

      &:hover {
        color: var(--gold-2);
      }
    }

    ul.social {
      display: flex;
      flex-direction: row;
      gap: 1rem;
      justify-content: center;
      align-items: center;

      & .icon {
        width: 2rem;
      }
    }
  }


}

/*Header handling*/

header {
  --background-color: #3c3228;
  --background-image: url("");
  --background-position: center;
  --background-blend-mode: multiply;
  /*     --up-decoration: var(--header-up-decoration);
    --down-decoration: var(--header-down-decoration);
    
    border-image-source: var(--down-decoration);
    border-image-repeat: stretch;
    border-image-width: 50px;
    border-image-outset: 50px;
    border-image-slice: 0 0 100 0 fill; */

  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  text-align: center;



  &>div {
    display: grid;
    width: 100%;
    padding: 0;
    background-color: var(--background-color);
    background-image: var(--background-image);
    background-blend-mode: var(--background-blend-mode);
    background-size: cover;
    background-position: var(--background-position);

    & a {
      margin-top: calc(var(--margin)*2);
    }

    &>hgroup {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin: calc(var(--margin)*2) 0;
      gap: 2rem 0;

      &>* {
        margin: 0;
      }


      & h1 {
        color: var(--gold-2);
        text-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
        font-size: 1.5rem;
        padding: 0 var(--padding);

        &>span {
          color: white;
          font-size: 2.25rem;
          text-shadow:
            0 0 5px var(--gold-1),
            0 0 15px var(--gold-3);
        }
      }



      &>div {
        display: flex;
        flex-direction: column;
        color: var(--gold-1);
        padding: var(--padding);
        gap: 1rem 0;

        &>* {
          margin: 0;
        }

        &>a img {
          aspect-ratio: 1 / 1;
          max-width: 8rem;
          border-radius: 50%;
          align-self: center;
          box-shadow: 0 0 20px var(--gold-1);
        }

        &>p {
          text-shadow: 0 0 5px var(--gold-4);
        }
      }
    }

    &>* {
      grid-column: 1;
      grid-row: 1;
      align-self: center;
      justify-self: center;
    }
  }
}

/*Main handling*/
main {
  box-sizing: border-box;

  &>section {
    display: grid;
    grid-template-columns: var(--padding) 1fr var(--padding);
    gap: calc(var(--gap)/2) 0;
    padding: calc(var(--padding)*3.5) 0;

    &>* {
      grid-column: 2;
    }

    &#offer {
      gap: calc(var(--gap)/2) 0 !important;

      &>h3 {
        margin-top: calc(var(--margin)*3.5);
        font-size: 1.5rem;
        font-weight: bold;
        text-align: center;
        color: var(--gold-1);
      }

      & a {
        justify-self: center;
      }
    }


    & img {
      width: 100%;
      border-radius: 3rem;
    }

    & h2 {
      &:not(:first-of-type) {
        margin-top: calc(var(--margin)*3.5);
      }
    }
  }
}

/*Footer and contact form handling*/
footer {
  padding-bottom: calc(var(--padding)*4);
  background: var(--toned-black);
  padding-top: var(--padding);
  text-align: center;
  display: flex;
  flex-direction: column;

  &>a {
    margin: calc(var(--margin)/2);
    color: var(--gold-1);
  }

  &>form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 0 var(--padding);
    text-align: initial;

    &>div {
      display: flex;
      flex-direction: column;

      &>input {
        padding: calc(var(--padding)/4);
        font-size: large;
        border-radius: .5rem;
        border: solid 2px var(--gold-3);
      }
    }

    &>button {
      padding: var(--padding) calc(var(--padding)*2) !important;
    }

    & .hp-field {
      position: absolute;
      left: -10000px;
      width: 1px;
      height: 1px;
      overflow: hidden;
    }
  }
}



/***********************/
/*Tablet CSS*/
/***********************/
@media screen and (min-width:480px) {
  :root {
    --gap: calc(var(--margin)*3.5);
  }


  h3 {
    font-size: 1.5rem;
  }

  header {

    &>div>hgroup>h1 {
      font-size: 2.25rem;

      &>span {
        font-size: 3.5rem;
      }
    }

    &>div div {
      display: grid !important;
      grid-template-columns: 8rem 1fr;
      border-radius: 3rem;
      gap: 1rem 2rem !important;
      max-width: 480px;

      &>a {
        grid-column: 1;
        grid-row: 1 / 3;
        max-width: 100%;
      }

      &>h3 {
        grid-column: 2;
        grid-row: 1;
        align-self: end;
      }

      &>p {
        grid-column: 2;
        grid-row: 2;
      }

      &>h3,
      p {
        text-align: left;
        margin: 0;
      }

      &>.action-button {
        grid-column: 1 / 3;
        grid-row: 3;
        margin-top: var(--margin) !important;
      }
    }
  }

  footer>form {
    display: grid;
    grid-template-columns: repeat(6, 1fr);

    &> :nth-child(1) {
      grid-column: 1 / 4;
      grid-row: 1;
    }

    &> :nth-child(2) {
      grid-column: 4 / 7;
      grid-row: 1;
    }

    &> :nth-child(3) {
      grid-column: 1 / 3;
      grid-row: 2;
    }

    &> :nth-child(4) {
      grid-column: 3 / 5;
      grid-row: 2;
    }

    &> :nth-child(5) {
      grid-column: 5 / 7;
      grid-row: 2;
    }

    &> :nth-child(6) {
      grid-column: 1 / 7;
      grid-row: 3;
    }

    &>button {
      grid-column: 3 / 5;
      grid-row: 4;
    }
  }

}


/***********************/
/*Desktop CSS*/
/***********************/
@media screen and (min-width:980px) {

  header {
    margin-top: calc(var(--margin)*2.75);

    img#logo {
      display: none;
    }

  }

  .phone-nav {
    display: none;
  }

  .desktop-nav {
    display: grid;
  }

  main>section {

    grid-template-columns: 1fr 960px 1fr !important;
    gap: var(--gap) 0 !important;


    &>* {
      grid-column: 2;
    }
  }

  footer {
    display: grid;
    grid-template-columns: 1fr 960px 1fr;

    &>* {
      grid-column: 2;
    }
  }
}