// If you change this file, please regenerate it as follows:
//
//    npx sass@1 extra_sass/style.css.scss:docs/stylesheets/style.css
//
// This is not done automatically, since the `extra-sass` mkdocs plugins
// adds 7 second to each build, which is tedious with `mkdocs serve`.

/* Configuration reference has a really wide table. Make use of all screen width */
.md-grid:has(.wide-table) {
  max-width: initial;
}

/* Stuff on the landing page needs to be more specific than mkdocs-material's CSS. */
.md-content .landing-page {
  .columns {
    flex-flow: row;

    div {
      width: 100%;
    }
  }

  .columns-1 {
    flex-flow: column;

    div {
      width: 100%;
    }
  }

  .columns-2 {
    flex-flow: row wrap;

    div {
      flex-grow: 1;
      width: 40%;

      @media (max-width: 960px) {
        width: 100%;
      }
    }
  }

  .columns,
  .columns-1,
  .columns-2 {
    display: flex;
    margin: 0;
    padding: 0;
    gap: 10px;

    @media (max-width: 960px) {
      flex-flow: column;
    }

    div {
      border: 5px solid var(--elastisys-sky-blue-dark);
      text-align: center;
      padding: 12px 24px;
      margin: 0;
      border-radius: 20px;

      display: flex;
      flex-flow: column;
    }

    li {
      width: 100%;
      text-align: center;
      margin: 0;
      padding: 12px 24px;
      list-style-type: none;
    }

    img {
      max-width: 256px;
      height: 128px;
    }

    dt {
      font-weight: bold;
    }

    dd {
      margin: 0;
      padding: 12px;
    }

    dt.grow-me {
      flex-grow: 4;
    }

    dd.grow-me {
      margin: 0;
      padding: 12px;
      flex-grow: 4;
    }

    /* Make emojis look like block elements */
    .twemoji {
      display: block;
      height: 48px;
      margin-bottom: 12px;
    }

    .twemoji svg {
      width: initial;
    }
  } /* .columns */

  a[role=button] {
    background-color: var(--elastisys-northern-lights-2);
    color: var(--elastisys-snow-light);
    padding: 12px 24px;
    border-radius: 20px;
    font-size: 14px;
    display: block;
    width: fit-content;
    margin: auto;
    font-family: var(--elastisys-details-font);
    font-weight: var(--elastisys-details-weight);
  }

  .columns-always {
    margin: 0;
    padding: 0;

    display: flex;
    flex-flow: row;
    align-items: center;
    gap: 10px;

    li {
      width: 100%;
      list-style-type: none;
      padding: 12px 24px;
      margin: 0;
      text-align: center;

      @media (max-width: 960px) {
        padding: 0;
      }

      img {
        /* Make logos fit in a uniform row */
        max-height: 50px;
        width: auto;
      }
    }
  }

  img,
  embed {
    width: 100%;
  }

  h2 {
    margin: 2em 0 1em;
  }
} /* .landing-page */
