/* Base styles. These carry over the handful of Bootstrap 3.3.7 defaults the
   blog actually relied on: the type scale, colors, and spacing for prose,
   code, and blockquotes. */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  padding-bottom: 40px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.42857143;
  color: #333;
  background-color: #fff;
}

a {
  color: #337ab7;
  text-decoration: none;
}

a:hover,
a:focus {
  color: #23527c;
  text-decoration: underline;
}

h1, h2, h3, h4, h5, h6 {
  font-family: inherit;
  font-weight: 500;
  line-height: 1.1;
  color: inherit;
}

h1, h2, h3 {
  margin-top: 20px;
  margin-bottom: 10px;
}

h4, h5, h6 {
  margin-top: 10px;
  margin-bottom: 10px;
}

h1 { font-size: 36px; }
h2 { font-size: 30px; }
h3 { font-size: 24px; }
h4 { font-size: 18px; }
h5 { font-size: 14px; }
h6 { font-size: 12px; }

p {
  margin: 0 0 10px;
}

ul,
ol {
  margin-top: 0;
  margin-bottom: 10px;
}

ul ul,
ol ul,
ul ol,
ol ol {
  margin-bottom: 0;
}

small {
  font-size: 85%;
}

/* Keep footnote markers from stretching the line they sit on. */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sup {
  top: -0.5em;
}

sub {
  bottom: -0.25em;
}

img {
  vertical-align: middle;
}

hr {
  box-sizing: content-box;
  height: 0;
  /* The UA's auto inline margins would shrink an hr to nothing as a grid
     item. */
  margin: 20px 0;
  border: 0;
  border-top: 1px solid #eee;
}

blockquote {
  padding: 10px 20px;
  margin: 0 0 20px;
  font-size: 17.5px;
  border-left: 5px solid #eee;
}

blockquote p:last-child,
blockquote ul:last-child,
blockquote ol:last-child {
  margin-bottom: 0;
}

code,
kbd,
pre,
samp {
  font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
}

code {
  padding: 2px 4px;
  font-size: 90%;
  color: #333;
  background-color: #f9f2f4;
  border-radius: 4px;
}

pre {
  display: block;
  padding: 9.5px;
  margin: 0 0 10px;
  font-size: 13px;
  line-height: 1.42857143;
  overflow-x: auto;
  /* Wrap long lines at word boundaries, only splitting tokens that can't
     fit otherwise (Bootstrap's word-break: break-all split mid-word). */
  overflow-wrap: break-word;
  color: #333;
  background-color: #f5f5f5;
  border: 1px solid #ccc;
  border-radius: 4px;
}

pre code {
  padding: 0;
  font-size: inherit;
  color: inherit;
  white-space: pre-wrap;
  background-color: transparent;
  border-radius: 0;
}

a code {
  /* Make code inside a link the same color as the link */
  color: #08C;
}

/* Rating labels, colored to match howsmyssl.com's Good/Improvable/Bad
   palette. */
.label {
  display: inline;
  padding: 0.2em 0.6em 0.3em;
  font-size: 1em;
  font-weight: 700;
  line-height: 1;
  color: #fff;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: 0.25em;
}

.label.okay {
  background-color: #1B9E77;
}

.label.improvable {
  background-color: #7570B3;
}

.label.bad {
  background-color: #D95F02;
}

/* Page width. These are Bootstrap 3's .container widths, which the nav, the
   rule above the footer, and the footer still line up with. */

:root {
  --site-width: none;
  --site-nav-width: var(--site-width);
}

@media (min-width: 768px) {
  :root { --site-width: 750px; }
}

@media (min-width: 992px) {
  :root { --site-width: 970px; }
}

@media (min-width: 1200px) {
  :root { --site-width: 1170px; }
}

/* Site navigation. This block is shared with howsmyssl.com
   (static/css/site.css in jmhodges/howsmyssl), so keep the two in sync.

   A bar across the top with the brand on the left and the links inline
   after it. It sticks to the top of the viewport as the page scrolls, like
   Bootstrap's navbar-fixed-top did, but stays in the page flow so that on
   narrow screens the links can wrap onto a second row without covering the
   content. Text colors meet WCAG AAA (7:1) contrast against the
   background. */

.site-nav {
  position: sticky;
  top: 0;
  z-index: 1030;
  /* Content started 60px down, below the old fixed 51px navbar. */
  margin-bottom: 9px;
  background-color: #f8f8f8;
  border-bottom: 1px solid #e7e7e7;
}

.site-nav nav {
  display: flex;
  flex-wrap: wrap;
  max-width: var(--site-nav-width, none);
  margin-inline: auto;
}

.site-nav ul {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-nav a {
  display: block;
  padding: 15px;
  line-height: 20px;
  color: #595959; /* 7.04:1 on #f8f8f8 */
}

.site-nav .site-nav-brand {
  font-size: 18px;
}

.site-nav a:hover,
.site-nav a:focus {
  color: #333; /* 12.63:1 on #f8f8f8 */
  text-decoration: none;
}

.site-nav a[aria-current] {
  color: #333; /* 10.36:1 on #e7e7e7 */
  background-color: #e7e7e7;
}

/* End of the shared navigation block. */

/* Page layout. A single grid replaces Bootstrap's container/row/column
   floats. The content sits in a centered column capped at 670px so prose
   keeps a comfortable line length; the rule above the footer and the
   footer span the full page width. */

.site {
  display: grid;
  grid-template-columns: [full-start main-start] minmax(0, 1fr) [main-end full-end];
  max-width: var(--site-width);
  margin-inline: auto;
  padding-inline: 15px;
}

@media (min-width: 768px) {
  .site {
    grid-template-columns:
      [full-start] 1fr
      [main-start] minmax(0, 670px)
      [main-end] 1fr
      [full-end];
  }
}

.site > * {
  grid-column: full;
}

.site > #content {
  grid-column: main;
}

#footer {
  /* 60px below the rule. Grid items' margins don't collapse, so this adds
     to hr.fancy's 40px bottom margin. */
  margin-top: 20px;
  margin-bottom: 60px;
  color: #888;
  text-align: center;
}

.entry-title h3 {
  font-size: 24px;
  line-height: 35px;
  margin-bottom: 0;
}

.entry-date {
  font-size: 13px;
  color: #888;
  margin-top: 2px;
  margin-bottom: 2px;
}

.entry-byline {
  font-size: 13px;
  color: #888;
  margin-bottom: 2px;
}

.entry-byline a {
  color: #888;
  text-decoration: underline;
}

.entry-content {
  margin-top: 20px;
}

.entry-content blockquote {
  font-size: 15px;
  margin-left: 1em;
}

ul.archive {
  list-style: none;
  padding-left: 0;
}

ul.archive li {
  margin-bottom: 10px;
}

/* gradient hr — same trick somethingsimilar.com uses
   (style14 from https://codepen.io/ibrahimjabbari/pen/ozinB) */
hr.fancy {
  box-sizing: border-box;
  border: 0;
  height: 1px;
  margin-top: 40px;
  margin-bottom: 40px;
  background-image: linear-gradient(to right, #f0f0f0, #8c8b8b, #f0f0f0);
}

/* Print: black on white, no nav, link targets spelled out, and no splitting
   code blocks, quotes, or images across pages. */
@media print {
  *,
  *::before,
  *::after {
    background: transparent !important;
    color: #000 !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }

  .site-nav {
    display: none;
  }

  a,
  a:visited {
    text-decoration: underline;
  }

  .entry-content a[href]::after {
    content: " (" attr(href) ")";
    overflow-wrap: anywhere;
  }

  .entry-content a[href^="#"]::after {
    content: "";
  }

  .label {
    border: 1px solid #000;
  }

  pre,
  blockquote {
    border: 1px solid #999;
    break-inside: avoid;
  }

  img {
    break-inside: avoid;
  }

  p,
  h2,
  h3 {
    orphans: 3;
    widows: 3;
  }

  h2,
  h3 {
    break-after: avoid;
  }

  hr.fancy {
    border-top: 1px solid #999;
  }

  #footer {
    margin-bottom: 0;
  }
}