/* Theme style reset */
*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}
html.smooth-scroll {
  scroll-behavior: smooth;
}

body {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

input,
button,
textarea,
select {
  font: inherit;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}

#root,
#__next {
  isolation: isolate;
}

/* general theme layout */
body {
  z-index: 0;

  & .wp-site-blocks {
    min-height: 100vh;
    max-width: 100vw;
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 0;

    & > header.wp-block-template-part, & > .wp-block-template-part:has(.header) {
      z-index: 50;
      position: sticky;
      top: calc(0px + var(--wp-admin--admin-bar--height, 0px));
    }

    & > main {
      flex: 1;
    }

    & > footer {
      margin-top: auto;
    }
  }

  &.admin-bar .wp-site-blocks {
    min-height: calc(100vh - var(--wp-admin--admin-bar--height));
  }
}

/* Theme general typography */

body {
  font-family: var(--wp--preset--font-family--source-sans);
  font-size: var(--wp--preset--font-size--medium);
  font-weight: 400;
  line-height: 24px;
  color: var(--wp--preset--color--grey-900);
}

h1,
h2,
h3,
h4,
h5 {
  font-family: var(--wp--preset--font-family--source-sans);
  font-weight: 700;
}

h1 {
  font-size: 32px;
  line-height: 40px;
}

h2 {
  font-size: 28px;
  line-height: 32px;
}

h3 {
  font-size: 24px;
  line-height: 32px;
}

h4 {
  font-size: 20px;
  line-height: 24px;
}

@media (min-width: 1024px) {
  h1 {
    font-size: 40px;
    line-height: 48px;
  }

  h2 {
    font-size: 32px;
    line-height: 40px;
  }

  h3 {
    font-size: 28px;
    line-height: 32px;
  }

  h4 {
    font-size: 24px;
    line-height: 32px;
  }
}

.header {
  &.header--dark {
    .wp-block-buttons {
      & .wp-block-button {
        & a {
          background: transparent none;
          background-color: var(--wp--preset--color--white);
          border-color: var(--wp--preset--color--primary);
          border-width: 2px;
          border-style: solid;
          color: var(--wp--preset--color--primary);
          padding-top: 0.667em;
          padding-right: 1.33em;
          padding-bottom: 0.667em;
          padding-left: 1.33em;
          &:hover {
            background: #cde1f0;
          }
        }
      }
    }
  }
}

footer {
  & .footer__container {
    @media (min-width: 1024px) {
      background-size: 488px !important;
    }
  }
}

/* cap content width for pages
.home main {
  width: 100%;
  max-width: 1600px;
  margin: 0 auto;
} */

.wp-block-button {
  width: 100%;
  & a {
    transition: background-color 0.3s;
    background: var(--wp--preset--color--primary);
    display: block;
    border-radius: 8px;
    &:hover {
      background: var(--wp--preset--color--primary-700);
    }
  }

  &.is-style-outline .wp-block-button__link {
    background: var(--wp--preset--color--white);
    &:hover {
      background: #cde1f0;
    }
  }
}

footer {
  & nav li {
    position: relative;
    overflow: hidden;

    &::before {
      content: "";
      position: absolute;
      bottom: 0px;
      left: 100%;
      width: 100%;
      height: 1px;
      background: var(--wp--preset--color--white);
      transition: left 0.3s ease-out;
    }

    &:hover {
      &::before {
        left: 0;
      }
    }
  }
}

.no-scroll-on-mobile {
  @media (max-width: 1023px) {
    overflow: hidden;
  }
}

.no-x-scroll-on-desktop {
  @media (min-width: 1024px) {
    overflow-x: hidden;
  }
}

body {
  @media (min-width: 1024px) {
    overflow-x: hidden;
  }
}