@import url("./reset.css");
@import url("./kofi/kofi.css");

:root {
  --primary-color: #4169e1;
  --background-color: #f5f5f5;
  --text-color: #333;
  --white: #ffffff;
}

[data-observer-intercept] {
  position: absolute;
  top: 300px;
}

html {
  color-scheme: light;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-sans);
  background-color: var(--background-color);
  color: var(--text-color);
}

header {
  background-color: var(--white);
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;

  &.active {
    box-shadow: hsla(0 0% 0% / 0.1) 0 0.5rem 1rem;
    transition-duration: 400ms;
  }

  section {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 2rem;
    width: 100%;
    max-width: var(--layout-max-width);
    margin: 0 auto;
    height: 70px;

    h1 {
      font-size: 1.5em;
    }
  }
}

section#hero {
  background-color: var(--white);
  padding: 2em 0 0 0;

  article {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    padding: 1rem 2rem;

    width: 100%;
    max-width: var(--layout-max-width);
    margin: 0 auto;
  }

  h2 {
    font-size: 3em;
    line-height: 1.2em;
  }

  p {
    font-size: 1.2em;
    text-align: center;
    margin-top: 1.5em;
  }

  .cta {
    margin: 2em auto;
  }
}

main {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  min-height: 100vh;

  & > section {
    display: flex;
    padding: var(--main-article-padding, 1rem 2rem);
    width: 100%;
    max-width: var(--layout-max-width);
    margin: 0 auto;

    article {
      text-align: left;
      width: var(--article-width);
    }

    &#features {
      background: #2a7b9b;
      background: linear-gradient(
        90deg,
        rgba(42, 123, 155, 1) 0%,
        rgba(87, 199, 133, 1) 50%,
        rgba(237, 221, 83, 1) 100%
      );

      margin: 0 0 4em 0;

      & > h1 {
        width: 100%;
        text-align: center;
        color: var(--white);
        text-shadow: hsla(0 0% 0% / 0.5) 0 0.5rem 1rem;
        margin: 1em 0 0.5em;
        font-size: 3em;
      }

      width: 100%;
      max-width: unset;

      flex-flow: var(--features-flex-direction, row wrap);
      justify-content: space-between;

      article {
        display: flex;
        width: 100%;

        flex-flow: var(--features-flex-direction, row wrap);
        justify-content: space-between;

        padding: var(--main-article-padding, 1rem 2rem);
        max-width: var(--layout-max-width);
        margin: 0 auto;

        background-color: unset;
        border-radius: unset;
        box-shadow: unset;

        section {
          width: calc(
            var(--features-section-width, 33%) - 2 * var(--main-section-margin-horizontal, 2em)
          );
          padding: 3em 2em;
          text-align: center;
          background-color: var(--white);
          margin: var(--main-section-margin-vertical, 3em)
            var(--main-section-margin-horizontal, 2em);
          border-radius: 8px;
          padding: 2rem;
          box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);

          flex-direction: column;

          h1 {
            margin-bottom: 1rem;
            color: var(--primary-color);
            font-size: 1.75rem;
            line-height: 1.2;
          }

          p {
            margin-bottom: 1.5rem;
          }
        }
      }
    }
  }

  article {
    text-align: center;
    padding: 2rem;
    background-color: var(--white);
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    margin: var(--main-section-margin-vertical, 3em) var(--main-section-margin-horizontal, 2em);

    h1 {
      margin-bottom: 1rem;
      color: var(--primary-color);
      font-size: 1.75rem;
      line-height: 1.2;
    }

    h2 {
      font-size: 1.3rem;
      line-height: 1.25;
      margin-bottom: 0.75rem;
    }

    p,
    ul {
      margin-bottom: 1.5rem;
    }
  }
}

footer {
  section {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0.75rem;
    padding: 1.5rem 2rem;
    width: 100%;
    max-width: var(--layout-max-width);
    margin: 0 auto;
  }

  .footer-links {
    display: flex;
    gap: 1.5rem;

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

a.cta {
  text-decoration: none;
  color: var(--white);
  background-color: var(--primary-color);
  border: 1px solid var(--primary-color);
  padding: 0.5rem 1rem;
  border-radius: 4px;
  transition: background-color 0.3s ease;

  &:hover {
    background-color: var(--white);
    border: 1px solid var(--primary-color);
    color: var(--primary-color);
  }
}

.table-wrapper {
  overflow-x: auto;
  width: 100%;
  margin: 1em 0;
  padding: 0;

  table {
    margin: 0 auto;
  }
}

table {
  border-collapse: collapse;
  border: 0px;
}

caption {
  caption-side: bottom;
  padding: 1em;
  font-weight: bold;
}

thead,
tfoot {
  border: 0px;

  tr {
    border: 0px;
    th {
      border: 0px;
    }
  }
}

th,
td {
  border: 1px solid #ccc;
  padding: 0.5em 1em;
  white-space: nowrap;

  &.align-right {
    text-align: right;
  }
}

tbody > tr:nth-of-type(even) {
  background-color: #f0f0f0;
}

details {
  padding: 0 1rem;
  background: var(--white);
}
details + details {
  border-top: none;
}
details[open] {
  padding-bottom: 1em;
}
summary {
  padding: 1rem 2em 1rem 0;
  font-size: 1.25rem;
  font-weight: bold;
  cursor: pointer;
}

/*
 * Responsive Design
 *
 * Breakpoints borrowed from MUI
 * @see https://mui.com/material-ui/customization/breakpoints/
 */

/* XL media query */
@media screen and (min-width: 1536px) {
  :root {
    --layout-max-width: 1400px;
    --features-flex-direction: row wrap;
    --features-section-width: 33%;
    --article-width: 100%;
  }
}
/* LG media query */
@media screen and (max-width: 1536px) {
  :root {
    --layout-max-width: 1400px;
    --features-flex-direction: row wrap;
    --features-section-width: 33%;
    --article-width: 100%;
  }
}
/* MD media query */
@media screen and (max-width: 1200px) {
  :root {
    --layout-max-width: 1200px;
    --features-flex-direction: row wrap;
    --features-section-width: 50%;
    --article-width: 100%;
  }
}
/* SM media query */
@media screen and (max-width: 900px) {
  :root {
    --layout-max-width: 90%;
    --features-flex-direction: column nowrap;
    --features-section-width: 100%;
    --main-article-padding: 1rem 0rem;
    --main-section-margin-horizontal: 0.5rem;
    --main-section-margin-vertical: 1rem;
    --article-width: calc(
      var(--features-section-width, 33%) - 2 * var(--main-section-margin-horizontal, 2em)
    );
  }

  header {
    .cta {
      display: none;
    }
  }
}
/* XS media query */
@media screen and (max-width: 600px) {
  :root {
    --layout-max-width: 100%;
    --features-flex-direction: column nowrap;
    --features-section-width: 100%;
    --main-article-padding: 1rem 0rem;
    --main-section-margin-horizontal: 0.5rem;
    --main-section-margin-vertical: 1rem;

    --article-width: calc(
      var(--features-section-width, 33%) - 2 * var(--main-section-margin-horizontal, 2em)
    );
  }

  header {
    .cta {
      display: none;
    }
  }
}