@layer fonts, reset, tokens, base, layout, components, utilities;

@layer fonts {
  @font-face {
    font-family: "StackSans";
    src: url("/assets/fonts/StackSansText-Regular.woff2 ") format("woff2");
    font-weight: 400;
    font-display: swap;
  }

  @font-face {
    font-family: "StackSans";
    src: url("/assets/fonts/StackSansText-Bold.woff2") format("woff2");
    font-weight: 700;
    font-display: swap;
  }
}

@layer reset {
  /* 1. Use a more-intuitive box-sizing model */
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  /* 2. Remove default margin */
  *:not(dialog) {
    margin: 0;
  }

  /* 3. Enable keyword animations */
  @media (prefers-reduced-motion: no-preference) {
    html {
      interpolate-size: allow-keywords;
    }
  }

  body {
    /* 4. Increase line-height */
    line-height: 1.5;
    /* 5. Improve text rendering */
    -webkit-font-smoothing: antialiased;
  }

  /* 6. Improve media defaults */
  img,
  picture,
  video,
  canvas,
  svg {
    display: block;
    max-width: 100%;
  }

  /* 7. Inherit fonts for form controls */
  input,
  button,
  textarea,
  select {
    font: inherit;
  }

  /* 8. Avoid text overflows */
  p,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    overflow-wrap: break-word;
  }

  /* 9. Improve line wrapping */
  p {
    text-wrap: pretty;
  }
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    text-wrap: balance;
  }

  /*
  10. Create a root stacking context
*/
  #root,
  #__next {
    isolation: isolate;
  }
}

@layer tokens {
  :root {
    --background-color: #f0f3f1;
    --primary-color: #e1400e;
    --text-color: #05182b;
    --font-body: "StackSans", sans-serif;

    font-size: 10px;

    --ratio: 1.6;
    --body-font-size: 2rem;

    --small: calc(var(--body-font-size) / var(--ratio));
    --h3: calc(var(--body-font-size) * var(--ratio));
    --h2: calc(var(--h3) * var(--ratio));
    --h1: calc(var(--h2) * var(--ratio));
  }

  @media (max-width: 768px) {
    :root {
      font-size: 10px;

      --ratio: 1.25;
      --body-font-size: 1.6rem;

      --small: calc(var(--body-font-size) / var(--ratio));
      --h3: calc(var(--body-font-size) * var(--ratio));
      --h2: calc(var(--h3) * var(--ratio));
      --h1: calc(var(--h2) * var(--ratio));
    }
  }
}

@layer base {
  body {
    background: var(--background-color);
    font-family: var(--font-body);
    color: var(--color-text);
    font-size: var(--body-font-size);
  }

  h1 {
    font-size: var(--h1);
    font-weight: 700;
  }

  h2 {
    font-size: var(--h2);
    font-weight: 700;
  }

  h3 {
    font-size: var(--h3);
    font-weight: 700;
  }

  hgroup {
    margin-bottom: 2rem;
  }

  hgroup p {
    color: var(--primary-color);
    font-weight: 700;
  }

  hgroup p::before {
    content: "";
    color: var(--primary-color);
  }

  button {
    background: var(--primary-color);
    color: var(--background-color);
    padding-block: 1rem;
    padding-inline: 4rem;
    border: none;
    font-weight: 700;
  }

  button a {
    color: var(--background-color);
  }

  button:valid,
  button:focus {
    cursor: pointer;
  }

  form {
    margin-top: 3rem;
    display: flex;
    width: 50%;
    flex-direction: column;
    gap: 1rem;
  }

  input {
    width: 100%;
    border: none;
    padding: 1rem 1.5rem;
  }

  textarea {
    height: 20rem;
    border: none;
    padding: 1rem 1.5rem;
  }

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

  a {
    text-decoration: none;
    color: var(--text-color);
  }
}

@layer layout {
  .about,
  .products,
  .projects,
  .partnership,
  .team,
  .contact,
  .contact-us,
  .thank-you {
    padding-block: 10rem;
  }

  .container {
    width: 80%;
    margin: auto;
  }
}

@layer components {
  /* ----------- Header ---------- */
  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: auto;
    padding: 1.2rem 1.5rem;
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--background-color);
    overflow: hidden;
  }

  .header__logo img {
    width: fit-content;
    height: 5rem;
    border-radius: 50%;
    display: block;
  }

  .nav {
    display: flex;
    align-items: center;
    gap: 2rem;
  }

  .nav__link {
    text-decoration: none;
    padding: 0.5rem;
    font-size: var(--small);
    font-weight: 700;
  }

  /* --------- Hero --------- */
  .hero {
    position: relative;
    height: 50rem;
    padding-inline: 15rem;
    padding-block: 10rem;
  }

  .hero p {
    width: 30ch;
    margin-bottom: 2rem;
  }

  .hero img {
    position: absolute;
    z-index: -1;
    top: 0;
    right: 0;
    height: 100%;
  }

  @media (max-width: 768px) {
    .hero {
      padding-inline: 5rem;
      padding-block: 5rem;

      height: 40rem;
    }

    .hero img {
      opacity: 40%;
    }
  }

  /* --------- About ---------  */
  .about hgroup p {
    margin-bottom: 0;
  }

  .about {
    width: 50%;
  }

  .about p,
  .about hr {
    margin-bottom: 3rem;
  }

  .about__showcases {
    display: flex;
    justify-content: space-between;
    gap: 3rem;
    text-align: center;
  }

  .about__showcases h3 {
    color: var(--primary-color);
  }

  @media (max-width: 768px) {
    .about {
      width: 100%;
    }

    .about__showcases {
      display: grid;
      grid-template-columns: 1fr 1fr;
    }
  }

  /* -------- Products ----------*/
  .products__list {
    display: flex;
    justify-content: space-around;
    gap: 3rem;
  }

  .products__list figcaption {
    display: flex;
    flex-direction: column;
  }

  .products__list figcaption span {
    font-size: var(--small);
  }

  @media (max-width: 768px) {
    .products__list {
      display: grid;
      grid-template-columns: 1fr 1fr;
    }
  }

  /* ---------- Projects ----------- */
  .projects__header {
    display: flex;
    justify-content: space-between;
    align-items: end;
    margin-bottom: 4rem;
  }

  .projects__header hgroup {
    margin: 0;
  }

  .projects__header__regions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    align-items: center;
  }

  .projects__header__regions img {
    width: 2rem;
    height: auto;
  }

  .projects__header__regions li {
    display: flex;
    gap: 0.5rem;
  }

  .projects__list {
    display: flex;
    gap: 2rem;
  }

  .projects__list figcaption {
    margin-top: 1rem;
  }

  @media (max-width: 768px) {
    .projects__header {
      flex-direction: column;
      align-items: start;
      gap: 1rem;
    }

    .projects__list {
      flex-direction: column;
    }
  }

  /* ---------- Partnership ------------ */
  .partnership__list {
    display: flex;
    gap: 2rem;
    margin-top: 4rem;
  }

  @media (max-width: 768px) {
    .partnership__list {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
    }
  }

  /* ---------- Team ---------------  */
  .team__list {
    display: flex;
    gap: 2rem;
  }

  .team__list figcaption {
    display: flex;
    flex-direction: column;
    margin-top: 2rem;
  }

  .team__list figcaption span {
    font-size: var(--small);
  }

  @media (max-width: 768px) {
    .team__list {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1rem;
    }
  }

  /* ----------- Contact List -------------  */
  .contact__list li {
    display: flex;
    align-items: start;
    gap: 2rem;
    margin-bottom: 2rem;
  }

  .contact__list p {
    display: flex;
    flex-direction: column;
    width: 50ch;
  }

  .form-first-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
  }

  .thank-you p {
    margin-bottom: 2rem;
  }

  .thank-you a {
    color: var(--primary-color);
  }

  /* ---------- Footer  ------------ */

  .footer {
    width: 90%;
    margin: auto;
    padding-block: 10rem;
  }

  .footer__container {
    display: flex;
    justify-content: space-between;
  }

  .footer__contact__list li {
    display: flex;
    gap: 2rem;
    margin-block: 1rem;
  }

  .footer__gallery {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 2rem;
    margin-top: 1rem;
  }

  .footer__gallery img {
    width: 100%;
    height: 10rem;
  }

  .footer__copyright {
    text-align: end;
  }

  .footer__copyright a {
    color: var(--primary-color);
  }

  @media (max-width: 768px) {
    .footer__container {
      display: block;
    }

    .footer__container div {
      margin-bottom: 3rem;
    }
  }
}

@layer utilities {
  .mt {
    margin-top: 3rem;
  }
}