@layer tailwindBase, base, blogBase, tailwind;

@layer base {
  :root {
    --max-width: calc(1232px);
    --max-blog-content-width: calc(920px);
  }

  html.noscroll {
    position: fixed;
    top: var(--page-scroll-top, 0);
    inline-size: 100%;
    overflow-y: scroll;
    scroll-behavior: auto;
  }

  body {
    display: none;
  }

  body.appear {
    display: block;
    .newsletter-container {
      margin-inline: auto;
      padding: 0 16px;
    } 
  }

  /* html {
    background-color: var(--black);
  }

  body {
    background-color: var(--white);
    width:100dvw;
  } */
  input[type='search']::-webkit-search-cancel-button {
    -webkit-appearance: none;
    height: 24px;
    width: 24px;
    margin-left: 0.4em;
    cursor: pointer;
    background: white;
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23777'><path d='M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/></svg>");
  }

  .truncate-4-lines {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    padding-bottom: 0;
  }

  .truncate-3-lines {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    padding-bottom: 0;
  }

  .default-content-wrapper {
    ul,
    ol {
      margin-block: 1em;
      margin-top: 16px;
      margin-bottom: 16px;
      padding-inline-start: 40px;
      padding-left: 40px;
    }

    ul {
      list-style: disc;
    }

    ol {
      list-style: decimal;

      li::marker {
        font-weight: 600;
      }
    }
  }

  /* allow svg to inherit width and height from parent span */
  span > svg {
    width: inherit;
    height: inherit;
  }
}

@layer blogBase {
  html {
    scroll-behavior: smooth;
  }

  body.homepage {
    background: rgba(248, 248, 248, 1);
    overflow-x: hidden;

    .breadcrumb nav {
      max-width: var(--max-width);
      margin-inline: auto;
    }

    .section:not(.herocarousel-container) {
      max-width: var(--max-width);
      margin-inline: auto;

      @media (max-width: 1230px) {
        margin-inline: auto;
        padding: 0 16px;
      }
    }
  }

  body.category {
    background: rgba(248, 248, 248, 1);
    overflow-x: hidden;

    h1 {
      padding: 10px 0 80px;
      @media (max-width: 1260px) {
        padding: 10px 20px 80px;
      }
    }
    .postblocks {
      @media (max-width: 1260px) {
        padding: 0 20px;
      }
    }
    .col-1 .postblock-item .postblock-item-title h6 {
      -webkit-line-clamp: 6;
      @media (max-width: 1024px) {
        -webkit-line-clamp: 4;
      }
    }
    .order-date-label {
      @media (max-width: 767px) {
        display: none;
      }
    }

    .section:not(.blogtitle-container),
    .breadcrumb-wrapper,
    .badge-wrapper {
      max-width: var(--max-width);
      margin-inline: auto;
      @media (max-width: 1230px) {
        margin-inline: auto;
        padding: 0 16px;
      }
    }

    .breadcrumb-wrapper,
    .badge-wrapper {
      @media (max-width: 1230px) {
        margin-inline: auto;
        padding: 0 24px;
      }
      @media (max-width: 767px) {
        padding: 0 20px;
      }
    }
  }

  body.blogpost {
    overflow-x: hidden;

    .section {
      max-width: var(--max-blog-content-width);
      width: 100%;

      @media (max-width: 1230px) {
        margin-inline: auto;
        padding: 0 16px;
      }
    }

    .posthero-container,
    .breadcrumb-container,
    .relatedposts-container,
    .newsletter-container {
      max-width: unset;
      width: 100%;
    }

    .button.primary {
      font-weight: bold;
    }

    main {
      position: relative;
      max-width: var(--max-width);
      margin-inline: auto;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      align-items: flex-end;
      width: 100%;
      max-inline-size: min(100% - var(--scrollbar-width) * 2, var(--max-width));

      @media (max-width: 1230px) {
        align-items: center;
      }
    }

    .section:nth-of-type(3) {
      padding-block-start: 1.5rem;
      /* padding-block-end: 2rem; */
      /* border-bottom: 1px solid var(--neutrals-300); */
      /* max-inline-size: calc(min(100dvw - var(--scrollbar-width), var(--max-width))); */

      .default-content-wrapper {
        max-inline-size: calc(
          min(100dvw - 2rem - var(--scrollbar-width), var(--max-width))
        );
        margin-inline: auto;
      }
    }

    .default-content-wrapper {
      h2 {
        font-size: 1.5rem;
        line-height: 2rem;
        font-weight: 600;
        text-wrap: pretty;
        margin-block-end: 1.5rem;
        margin-block-start: 2rem;

        @media (min-width: 768px) {
          & {
            font-size: 1.875rem;
            line-height: 2.5rem;
          }
        }

        @media (min-width: 1440px) {
          & {
            font-size: 2.25rem;
            line-height: 3rem;
          }
        }
      }

      h3 {
        font-weight: 600;
        font-size: 1.25rem;
        line-height: 1.75rem;
        margin-block: 1.5rem;

        @media (min-width: 768px) {
          & {
            font-size: 1.5rem;
            line-height: 2rem;
          }
        }

        @media (min-width: 1440px) {
          & {
            font-size: 1.75rem;
            line-height: 2.25rem;
          }
        }
      }

      h4 {
        font-weight: 600;
        font-size: 1.125rem;
        line-height: 1.75rem;
        margin-block: 1.5rem;

        @media (min-width: 768px) {
          & {
            font-size: 1.25rem;
            line-height: 1.875rem;
          }
        }

        @media (min-width: 1440px) {
          & {
            font-size: 1.375rem;
            line-height: 2rem;
          }
        }
      }

      h5 {
        font-weight: 600;
        font-size: 1rem;
        line-height: 1.5rem;
        margin-block: 1.25rem;

        @media (min-width: 768px) {
          & {
            font-size: 1.125rem;
            line-height: 1.75rem;
          }
        }

        @media (min-width: 1440px) {
          & {
            font-size: 1.25rem;
            line-height: 1.875rem;
          }
        }
      }

      h6 {
        font-weight: 600;
        font-size: 0.875rem;
        line-height: 1.25rem;
        margin-block: 1rem;

        @media (min-width: 768px) {
          & {
            font-size: 1rem;
            line-height: 1.5rem;
          }
        }

        @media (min-width: 1440px) {
          & {
            font-size: 1.125rem;
            line-height: 1.75rem;
          }
        }
      }

      p picture + em {
        font-style: italic;
        font-size: 12px;
      }

      img {
        width: 100%;
      }

      p + p {
        margin-block-start: 1.5rem;
      }

      a {
        color: hsla(200, 89%, 47%, 1);
        text-decoration: underline;
      }
    }
  }

  body.search {

    main {
      max-width: 1250px;
      margin-inline: auto;

      input[type="search"]::-webkit-search-cancel-button {
        background: black;
      }
    }
  }
}