/* Overrides for stylesheets/screen.css (Octopress's compiled sheet, which has
   no Sass source in this repo). Loaded after screen.css from
   _includes/custom/head.html. */


/* ---------------------------------------------------------------- headings */

/* screen.css sets h1 to 2.6em above 992px, which compounds with the 1.15em
   body size there. Long post titles wrapped to four lines. */
#content article header h1 {
  font-size: clamp(1.75rem, 1.25rem + 1.6vw, 2.25rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
}

#content .blog-index article h1 {
  font-size: clamp(1.5rem, 1.1rem + 1.2vw, 1.9rem);
}


/* ---------------------------------------------------------------- archives */

/* The post list on the home page and /blog/archives is a flat run of sibling
   <h2>year</h2> and <article> elements. Above 550px screen.css floats the year
   into the left gutter next to its first post, so the gap between groups has
   to move the floated heading and that first article by the same amount --
   otherwise the year label drifts out of line with the posts it names.

   Below 550px screen.css hides the year headings altogether, so a gap there
   would split the list into groups with nothing to label them. */
@media only screen and (min-width: 550px) {
  #blog-archives h2:not(:first-child),
  #blog-archives h2:not(:first-child) + article {
    margin-top: 2.75em;
  }
}

/* The home page reuses the archive list ungrouped (same trick the Talks page
   plays with .category). With no year heading there is nothing to put in the
   left gutter, so drop the 9.5em indent screen.css reserves for it and let the
   date sit under the title instead of absolutely positioned beside it -- the
   4.5em gutter fits "Aug 07" but not the year, which an ungrouped list needs. */
@media only screen and (min-width: 550px) {
  #blog-archives.recent article {
    margin-left: 0;
    padding-left: 0;
  }

  #blog-archives.recent time {
    position: static;
    text-align: left;
  }
}

#blog-archives.recent time {
  display: block;
  margin-top: 0.15em;
}

#blog-archives.recent .year {
  display: inline-block;
}

#blog-archives.recent article {
  padding-bottom: 1em;
}

.archive-link {
  margin-top: 1.75em;
  font-family: "PT Sans", "Helvetica Neue", Arial, sans-serif;
  font-size: 0.95em;
}


/* ------------------------------------------------------------------- lists */

/* screen.css indents lists 1.3em, then zeroes that out again above 768px.
   With list-style-position: outside and the reset's padding: 0, that left
   the markers hanging outside the text column. */
#content article ol,
#content article ul {
  margin-left: 0;
  padding-left: 1.6em;
}

#content article li + li {
  margin-top: 0.25em;
}


/* ------------------------------------------------------------------ tables */

/* screen.css scopes all of its table styling to a .table class, which
   kramdown never emits, so markdown tables fell through to the reset. */
#content article table {
  width: 100%;
  margin-bottom: 1.5em;
  border-collapse: collapse;
  font-family: "PT Sans", "Helvetica Neue", Arial, sans-serif;
  font-size: 0.9em;
  line-height: 1.4;
  /* Digits share one advance width so columns of figures line up. */
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

#content article th,
#content article td {
  padding: 0.55em 0.85em;
  vertical-align: baseline;
}

/* Flush the outer edges with the body text rather than the cell padding. */
#content article th:first-child,
#content article td:first-child {
  padding-left: 0;
}

#content article th:last-child,
#content article td:last-child {
  padding-right: 0;
}

#content article thead th {
  font-weight: bold;
  color: #333;
  border-bottom: 2px solid #cfcfcf;
  white-space: nowrap;
}

#content article tbody td {
  border-bottom: 1px solid #e4e4e4;
}

#content article tbody tr:last-child td {
  border-bottom: 1px solid #cfcfcf;
}

#content article tbody tr:nth-child(even) {
  background-color: rgba(0, 0, 0, 0.018);
}

#content article caption {
  caption-side: bottom;
  padding-top: 0.6em;
  font-family: "PT Sans", "Helvetica Neue", Arial, sans-serif;
  font-size: 0.85em;
  color: #6e6e6e;
  text-align: left;
}

/* Header cells stay on one line above; below 768px let a wide table scroll
   sideways instead of crushing its columns. */
@media only screen and (max-width: 767px) {
  #content article table {
    display: block;
    width: max-content;
    max-width: 100%;
    overflow-x: auto;
  }

  #content article thead th {
    white-space: normal;
  }
}