@layer reset {
  *:not(dialog) {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
  }

  img {
    display: block;
    max-width: 100%;
  }

  a {
    color: #b8084b;
  }

  body {
    isolation: isolate;
  }
}

@layer base {
  :root {
    font-family: "Oswald", sans-serif;
  }
}

@layer layout {
  header {
    position: absolute;
    inset-block-start: 0;
    inset-inline: 0;
    isolation: isolate;
    z-index: 100;
    padding: 1.5em;

    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    align-items: center;

    & nav {
      z-index: -1;
      display: block;
      position: fixed;
      inset: 0;
      align-content: center;
      background-color: hsl(0, 0%, 0%, 0.9);

      & ul {
        list-style: none;
        width: min(300px, 90%);
        padding: 2em;
        border-radius: 4px;
        text-align: center;
        margin-inline: auto;
        background-color: #b8084b;

        /* &>* {
            margin-block-end: 0.5em;
          } */

        & a {
          display: block;
          max-width: max-content;
          margin-inline: auto;
          text-decoration: none;
          color: white;
          text-transform: uppercase;
          padding: 0.5em;

          &:hover {
            background-color: white;
            color: #b8084b;
          }
        }
      }
    }

    & button {
      cursor: pointer;
      display: block;
      padding: 1em;
      aspect-ratio: 1 / 1;
      background-color: transparent;
      border: none;

      & span {
        display: block;
        font-size: 3rem;
        font-weight: bolder;
        color: white;

        margin-block-start: -0.25em;
      }
    }
  }

  #call-cta {
    display: none;
  }

  @media screen and (width <=768px) {
    header {
      &:has(button[aria-expanded="false"]) nav {
        display: none;
      }
    }
  }

  @media screen and (width > 768px) {
    header {
      display: grid;
      grid-template-columns: 0.3fr 1fr 0.3fr;

      & button {
        display: none;
      }

      & nav {
        z-index: 1;
        position: relative;
        background-color: transparent;

        & ul {
          display: flex;
          flex-flow: row wrap;
          justify-content: center;
          align-items: center;
          padding: 0;

          width: 100%;
          background-color: transparent;

          & li {
            &:hover ul {
              display: block;
            }

            & ul {
              display: none;
              position: absolute;
              width: max-content;

              & li {
                & a {
                  background-color: #b8084b;
                  color: white;
                  max-width: 100%;
                  text-align: left;

                  &:hover {
                    background-color: white;
                    color: #b8084b;
                  }
                }
              }
            }
          }
        }
      }
    }

    #call-cta {
      max-width: max-content;
      text-decoration: none;
      display: grid;
      grid-template-columns: auto 1fr;
      place-items: center;
      padding: 0.5em;
      color: white;

      & .icon {
        font-size: 3rem;
        height: 100%;
      }

      & .text span {
        display: block;
      }
    }
  }

  footer {
    padding: 1.5em;
    padding-block-start: 2.5em;
    text-align: center;
    background-color: hsl(0, 0%, 0%, 0.6);
    background-blend-mode: overlay;
    background-position: center;
    background-size: cover;
    color: white;

    & .wrapper {
      display: grid;
      grid-template-columns: auto repeat(3, 1fr);
      grid-template-areas: "logo cta cta cta";
      place-items: center;
      gap: 1em;

      & .logo {
        grid-area: logo;
      }

      & a,
      & div {
        display: block;
        text-decoration: none;

        & .icon {
          font-size: 3rem;
        }

        & .text {
          font-size: 1.25rem;
          color: white;
          word-break: break-all;
        }
      }
    }

    & hr {
      border-color: white;
      border-width: 2px;
      border-radius: 50vh;
      margin-block-start: 2em;
      margin-block-end: 1em;
    }
  }

  @media screen and (width < 768px) {
    footer {
      & .wrapper {
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
          "logo logo"
          "cta cta"
          "cta cta";
      }
    }
  }

  @media screen and (width < 640px) {
    footer {
      & .wrapper {
        grid-template-columns: 1fr;
        grid-template-areas:
          "logo"
          "cta"
          "cta"
          "cta";
      }
    }
  }

  main {
    min-height: 50vh;
  }
}

@layer components {
  .global-button {
    display: block;
    max-width: max-content;
    padding: 0.5em 1em;
    border-radius: 4px;
    background-color: #b8084b;
    text-transform: uppercase;
    color: white;
    text-decoration: none;
    font-weight: bold;
  }
}

@layer utilities {
  .wrapper {
    width: min(1200px, 90%);
    margin-inline: auto;
  }
}