/** 
 * CSS Reset
 * from https://www.joshwcomeau.com/css/custom-css-reset/
 */

@charset "UTF-8";
/* 1. Use a more-intuitive box-sizing model */
*,
*::before,
*::after {
  box-sizing: border-box;
}
/* 2. Remove default margin */
*:not(dialog) {
  margin: 0;
}
/* 3. Enable keyword animations */
@media (prefers-reduced-motion: no-preference) {
  html {
    interpolate-size: allow-keywords;
  }
}
body {
  /* 4. Add accessible line-height */
  line-height: 1.5;
  /* 5. Improve text rendering */
  -webkit-font-smoothing: antialiased;
}
/* 6. Improve media defaults */
img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}
/* 7. Inherit fonts for form controls */
input,
button,
textarea,
select {
  font: inherit;
}
/* 8. Avoid text overflows */
p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}
/* 9. Improve line wrapping */
p {
  text-wrap: pretty;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  text-wrap: balance;
}
/*
  10. Create a root stacking context
*/
#root,
#__next {
  isolation: isolate;
}

/** 
 * Theme styling inspired heavily by a combination of
 * - Hugo Paper Theme: https://themes.gohugo.io/themes/hugo-paper/
 * - Hugo Book Theme: https://themes.gohugo.io/themes/hugo-book/
 */
:root {
  --gray-100: #faf8f1;
  --gray-200: #e9ecef;
  --gray-500: #adb5bd;
  --color-link: #ff6900;
  --color-visited-link: #e48c5f;
  --body-background: #faf8f1;
  --body-font-color: #2c230c;
  --icon-filter: none;

  --alert-note: #368de3;
  --alert-tip: #6ab861;
  --alert-important: #8461b8;
  --alert-warning: #db6b07;
  --alert-caution: #eb4034;
}

html {
  font-family:
    system-ui,
    segoe ui,
    Roboto,
    Helvetica,
    Arial,
    sans-serif,
    apple color emoji,
    segoe ui emoji;
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
  tab-size: 4;
}

body {
  margin: 0 auto;
  min-width: 20rem;
  max-width: 80rem;

  font-weight: 400;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;

  color: var(--body-font-color);
  background: var(--body-background);

  display: flex;
  flex-direction: row;
}

a {
  text-decoration: none;
  color: var(--color-link);

  &:visited {
    color: var(--color-visited-link);
  }
}

blockquote {
  border-inline-start: 0.25rem solid var(--color-visited-link);
  margin: 1rem 0;
  padding: 0.5rem 1rem 0.5rem 0.75rem;
}

/** 
 * Setup a left menu with a nested tree of links
 */
nav.menu {
  padding: 1rem;
  font-size: 0.875rem;
  background: var(--body-background);
  position: fixed;
  top: 0;
  bottom: 0;
  width: 16rem;
  overflow-y: auto;

  & > details {
    & > summary:first-child {
      & > ul {
        padding-left: 0;
      }
      &:after {
        display: none;
      }
    }
  }
  & details summary::-webkit-details-marker,
  details summary::marker {
    content: "";
    display: none;
  }
  & details > summary::after {
    content: "▶";
    transition: transform 100ms;
    float: right;
    opacity: 0.5;
    cursor: pointer;
  }
  & details[open] > summary::after {
    transform: rotate(90deg);
  }
  & ul {
    list-style-type: none;
    padding-left: 1rem;
  }

  & a,
  a:visited {
    color: inherit;
    display: inline-block;
    padding: 0.2rem 0;
    &:hover {
      opacity: 0.5;
    }

    &.active {
      color: var(--color-link);
    }
  }

  & span.tastic-post-category {
    display: inline-block;
    padding: 0.2rem 0;
    cursor: pointer;

    &:hover {
      opacity: 0.5;
    }
  }
}

/** 
 * The left menu collapses in mobile mode and is controlled
 * by this checkbox, but it is never actually visible - just
 * the label shows up as a hamburger icon
 */
input#tastic-menu-controller {
  display: none;
}

/* The menu overlay shows up behind the menu component while in mobile mode */
label.tastic-menu-overlay {
  display: none;
}

/** 
 * The menu header containing an optional header and the hamburger icon
 * only shows up in mobile mode
 */
span.tastic-mobile-header {
  display: none;
}

/** Set up a right Table of Contents panel */
aside.toc {
  flex: 0 0 16rem;
  font-size: 0.75rem;
  padding: 1rem;
  & > ul {
    position: fixed;
  }
  ul {
    padding: 0;
    margin: 0;
    list-style: none;

    ul {
      padding-inline-start: 1rem;
    }
  }
}

/** The main content goes in the middle column of the page */
main {
  min-width: 20rem;
  padding: 0 1rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;

  margin-left: 16rem;

  & p {
    margin: 1rem 0;
  }
}

/** Set up the search input box and the underlying list of search results */
input.fuse-search-input {
  width: 100%;
  padding: 0.5rem;
  border: 0;
  border-radius: 0.25rem;
  background: var(--gray-100);
  color: var(--body-font-color);
}

ul.fuse-search-results {
  box-shadow: 0 1rem 1rem -1rem currentColor;
  margin-bottom: 0.5rem;
  &:empty {
    box-shadow: none;
    margin-bottom: 0;
  }
}

/** 
 * Footers are terminated with a link to their referant, whose contents is the 
 * character "↩" - which renders as an emoji in our default font on my macbook
 * and is a bit ugly. Use Roboto to reset it to a regular arrow
 */
a[data-footnote-backref] {
  font-family: Roboto, sans-serif;
}

/** 
 * Display the footer with links to posts before and after in the bottom 
 * of the page
 */
footer.tastic-footer {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  justify-content: space-between;
  margin-top: auto;
}

/** 
 * It is easiest to setup columns as list items in markdown
 * This will transform those items into proper columns
 */
section.columns > ul {
  display: flex;
  flex-direction: row;
  list-style: none;
}

/** Setup the various alert callout boxes */
.markdown-alert {
  padding: 1rem 2rem;
  margin-bottom: 2rem;
  color: inherit;
  border-left: 0.25em solid var(--borderColor-default);
  border: 1px solid;

  &.markdown-alert-note {
    border-color: var(--alert-note);
    .markdown-alert-title {
      color: var(--alert-note);
    }
  }
  &.markdown-alert-tip {
    border-color: var(--alert-tip);
    .markdown-alert-title {
      color: var(--alert-tip);
    }
  }
  &.markdown-alert-important {
    border-color: var(--alert-important);
    .markdown-alert-title {
      color: var(--alert-important);
    }
  }
  &.markdown-alert-warning {
    border-color: var(--alert-warning);
    .markdown-alert-title {
      color: var(--alert-warning);
    }
  }
  &.markdown-alert-caution {
    border-color: var(--alert-caution);
    .markdown-alert-title {
      color: var(--alert-caution);
    }
  }

  .markdown-alert-title {
    display: flex;
    font-weight: var(--base-text-weight-medium, 500);
    align-items: center;
    line-height: 1;

    > svg {
      display: inline-block;
      vertical-align: text-bottom;
      fill: currentColor;
      margin-right: 0.5rem;
    }
  }
}

@media (max-width: 56rem) {
  /** Menu collapses to the left and then slides in on checkbox (menu icon) click */
  nav.menu {
    margin-inline-start: -16rem;
    transition: 150ms transform;
    z-index: 2;
  }

  main {
    margin-left: 0;
    opacity: 1;
    transition: 200ms opacity;
  }

  /** Just hide the table of contents in mobile */
  aside.toc {
    display: none;
  }
  /** When in mobile, the tastic title shows up in the mobile header */
  h1.tastic-title {
    display: none;
  }
  /** Mobile header showing the title if it exists and the menu button icon */
  span.tastic-mobile-header {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;

    label.tastic-menu-button {
      cursor: pointer;
      font-size: 1.5rem;
      /* The trigram is weirdly alligned, gotta move it up a bit to be in line */
      margin-top: -0.3rem;
    }
    span.tastic-title {
      flex-grow: 1;
      text-align: center;
      width: 100%;
      margin-right: 1.3rem;
    }
  }
  /** 
   * If the menu button icon (which is a label for a hidden checkbox #tastic-menu-controller)
   * is clicked, then the neighboring nav.menu item will slide right into view
   */
  input#tastic-menu-controller:checked ~ nav.menu {
    transform: translateX(16rem);
    box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.1);
  }

  /** 
   * Also if the menu button icon is clicked, the overlay will be on top of the
   * main content, so you can't interact with the main content and if it is clicked
   * the menu item will close
   */
  input#tastic-menu-controller:checked ~ label.tastic-menu-overlay {
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
  }

  /** Also if the button is clicked the main content will fade in the background */
  input#tastic-menu-controller:checked ~ main {
    opacity: 0.25;
  }
}