@import url("/pagefind/pagefind-ui.css");
@import url("/assets/styles/crown.css");

@import url("/assets/styles/atoms/language-picker.css");
@import url("/assets/styles/atoms/action-button.css");

@import url("/assets/styles/molecules/navigation.css");
@import url("/assets/styles/molecules/search.css");

@import url("/assets/styles/organisms/header.css");
@import url("/assets/styles/organisms/footer.css");
@import url("/assets/styles/organisms/product-card.css");
@import url("/assets/styles/organisms/products-list.css");
@import url("/assets/styles/organisms/cards.css");
@import url("/assets/styles/organisms/order-form.css");

:root {
  --font-body: system-ui;
  --font-size: 14px;
  --line-height: 1.7;
  --padding: 16px;
  --width: 1280px;
  --width-article: 840px;
  --selection-background: rgb(249, 244, 220);
  --color-body: #000000;
  --color-background: #f7f7f7;
  --color-border: #eeeeee;
  --color-accent-dark: #055c91;
  --color-accent: #1985ea;
  --color-accent-light: #81a4cd;
  --shadow: rgba(0, 0, 0, 0.06) 0px 2px 4px 0px inset;
}

html {
  color-scheme: light;
  max-width: 100vw;
  overflow-x: hidden;
}

* {
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;

  &:focus-visible {
    outline-color: currentColor;
    border-radius: 3px;
    outline-offset: 3px;
  }

  &::-webkit-scrollbar {
    width: 10px;
    height: 10px;
    background-color: transparent;
    border-radius: 5px;
  }

  &::-webkit-scrollbar-thumb {
    background: #d9d9d9;
    border: 2px solid white;
    border-radius: 5px;
  }

  &::-webkit-scrollbar-thumb:hover {
    background: #858585;
  }
}

::selection,
mark {
  background: var(--selection-background);
  color: currentColor;
  padding: 5px 0;
}

html {
  scrollbar-gutter: stable;
  -webkit-font-smoothing: antialiased;
  color: var(--color-body);
  background-color: var(--color-background);
  font-family: var(--font-body);
  font-size: var(--font-size);
  line-height: var(--line-height);
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  max-width: 100vw;
  overflow-x: hidden;
  overscroll-behavior-x: none;

  body {
    margin: 0 auto;
    min-height: 100dvh;
    text-underline-offset: 0.15lh;
    display: flex;
    flex-direction: column;
    max-width: 100vw;
    overflow-x: hidden;

    a {
      color: currentColor;
    }

    .i {
      background-repeat: no-repeat;
      background-size: contain;
      display: inline-block;
      height: 1lh;
      vertical-align: bottom;
      width: 1lh;
    }

    figcaption {
      text-align: center;
      margin-block-start: 1em;
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    hgroup {
      margin-top: 0;
      line-height: 1.1em;
      font-weight: 550;
    }

    hr {
      background-color: currentColor;
      opacity: 0.2;
      border: hidden;
      height: 1px;
      width: 100%;
    }

    main {
      flex: 1;
      margin: auto;
      padding-bottom: 2lh;
      width: min(96%, var(--width));
      padding-top: calc(2 * var(--padding));

      article {
        max-width: var(--width-article);
        margin: auto;
        background: white;
        box-shadow: var(--shadow);
        padding: calc(2 * var(--padding));

        a.header-anchor,
        .footnote-ref a,
        a.footnote-backref {
          text-decoration: none;
        }

        @media only screen and (min-width: calc(768px + 40px)) {
          ul,
          ol {
            padding: 0;
          }
        }

        ul,
        ol {
          margin: 0;

          li {
            margin-bottom: 0.5em;
            margin-top: 0.5em;
            padding-left: 0.25em;
            margin-left: -0.25em;

            ul,
            ol {
              padding-inline-start: 20px;
            }
          }
        }

        img,
        video {
          display: block;
          margin: auto;
          max-width: 100%;
        }
      }
    }
  }
}

table {
  border-collapse: collapse;
  width: 100%;
  table-layout: fixed;
}

thead {
  border-block-end: 2px solid;
  background: whitesmoke;
}

tfoot {
  border-block: 2px solid;
  background: whitesmoke;
}

th,
td {
  text-align: start;
  border: 1px solid lightgrey;
  padding: 0.25rem 0.75rem;
  vertical-align: baseline;
}

tbody th {
  background: white;
}

thead th,
tfoot th {
  background: whitesmoke;
}