@charset "UTF-8";

@layer reset, tokens, base, layout, components;

@import "/css/reset.css" layer(reset);
@import "/css/tokens.css" layer(tokens);

@layer base {
  html {
    font-size: var(--font-size-base);
    font-family: var(--font-stack-sans);
    line-height: var(--line-height-text);
    background-color: var(--base-background);
  }

  p,
  a:link,
  a:visited,
  a:hover {
    color: var(--base-foreground);
  }

  .title,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-family: var(--font-stack-serif);
    font-variant: small-caps;
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-heading);
    margin-top: var(--spacing-4);
    margin-bottom: var(--spacing-3);
    color: var(--highlight);
  }

  .title {
    margin-top: 0;
    font-size: var(--font-size-xxxl);
  }

  h1 {
    font-size: var(--font-size-xxl);
  }

  h2 {
    font-size: var(--font-size-xl);
  }

  h3 {
    font-size: var(--font-size-l);
  }

  p {
    margin-bottom: var(--spacing-2);
  }

  ul,
  ol {
    list-style-type: square;
  }

  strong {
    font-weight: var(--font-weight-semibold);
  }
}

@layer layout {
  .layout-split {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
  }

  @media screen and (min-width: 800px) {
    .layout-split {
      height: 100vh;
      grid-template-columns: 1fr 2fr;
    }

    /* .sidebar-wrapper { */
    /*   border-top-right-radius: var(--radius-l); */
    /*   border-bottom-right-radius: var(--radius-l); */
    /* } */
  }

  .layout-split .sidebar-wrapper {
    background: var(--alt-background);
    color: var(--alt-foreground);
    display: flex;
    align-items: center;
    justify-content: right;
    box-shadow: 0 0 16px var(--green-40);
    z-index: 1;
  }

  .layout-split .content-wrapper {
    background: var(--base-background);
    color: var(--base-foreground);
    padding: 48px;
    overflow-y: scroll;
    display: flex;
    justify-content: center;
  }

  .layout-split .content {
    width: min(100%, var(--max-content-width));
    height: fit-content;
  }

  .layout-centered {
    background-color: var(--base-background);
    min-height: 100vh;
    padding: var(--spacing-5);
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .layout-centered .content {
    background-color: var(--alt-background);
    color: var(--alt-foreground);
    width: min(100%, var(--max-content-width));
    padding: var(--spacing-5);
    border-radius: var(--radius-m);
    box-shadow:
      0 0 20px var(--green-40) inset,
      0 0 20px var(--green-40);
  }
}

@layer components {
  .sidebar {
    font-size: var(--font-size-l);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-heading);
    padding: var(--spacing-4);

    menu {
      list-style-type: none;
      padding: 0;

      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      gap: var(--spacing-3);
      justify-content: center;

      @media screen and (min-width: 800px) {
        flex-direction: column;
        align-items: flex-end;
      }
    }

    a:link,
    a:visited,
    a:hover {
      color: var(--alt-foreground);
      text-decoration: none;
    }
  }

  /* Trick to create a line between menu items */
  /* Any menu item that follows another menu item will have separating line */
  .menu-item + .menu-item {
    border-top: 1px solid var(--green-80);
  }

  .menu-item {
    padding: var(--spacing-2) 0;

    a {
      font-weight: var(--font-weight-semibold);
    }
  }

  .accordion {
    summary {
      font-weight: var(--font-weight-bold);
      background-color: var(--green-80);
      border-radius: var(--radius-s);
      padding: var(--spacing-2);
      /* list-style: none; */
    }

    div {
      padding: var(--spacing-3);
    }
  }

  .accordion + .accordion {
    margin-top: var(--spacing-3);
  }

  .accordion:open + .accordion {
    margin-top: 0;
  }
}