/* bjornfreemanbenson.com
 *
 * Follows the previous Hugo site: #f4f4f4 ground, Avenir Next, a centred
 * column, and a lime rounded banner. Two departures, both deliberate: the
 * layout is responsive rather than a fixed 800px, and the space the old design
 * left empty to the right of the text column now holds the tag list on
 * listing pages.
 */

:root {
  --ground:     #f4f4f4;
  --paper:      #fff;    /* lifts the menu off the ground when it opens */
  --ink:        #000;
  --ink-muted:  #444;
  --rule:       lightgray;
  --link:       darkblue;
  --banner:     #b6ec0b;

  --column:     600px;   /* text column, as before */
  --sidebar:    180px;   /* fits in the space the old layout wasted */
  --gutter:     20px;
}

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

body {
  background-color: var(--ground);
  font-family: 'Avenir Next', Avenir, 'Segoe UI', system-ui, -apple-system, sans-serif;
  margin: 0;
  color: var(--ink);
}

#body-surround {
  width: calc(var(--gutter) + var(--column) + var(--gutter) + var(--sidebar));
  max-width: 100%;
  margin: 0 auto;
  padding: 0 0.75rem;
}

/* ---- banner ---------------------------------------------------------- */

/* A real link rather than the old onclick handler: it works without
   JavaScript, and it is reachable by keyboard. */
#header {
  display: block;
  width: 100%;
  margin: 0.5em 0 1em;
  padding: 0.5rem;
  background-color: var(--banner);
  border-radius: 15px;
  color: var(--ink);
  text-decoration: none;
}

#header-title    { font-size: 200%; text-align: center; line-height: 1.15; }
#header-subtitle { font-size: 110%; text-align: center; }

/* ---- layout ---------------------------------------------------------- */

#single-post,
#page-of-posts {
  width: var(--column);
  max-width: 100%;
  padding-left: var(--gutter);
}

/* Listing pages put the tag column in the margin the old design left blank. */
.with-sidebar {
  display: grid;
  grid-template-columns: var(--column) var(--sidebar);
  gap: var(--gutter);
  align-items: start;
}
.with-sidebar #page-of-posts { width: auto; }

/* ---- posts ----------------------------------------------------------- */

article.post {
  text-align: justify;
  hyphens: auto;
}

/* Post and page titles are black links, as before. */
article.post a { text-decoration: none; color: var(--ink); }
article.post a:hover { text-decoration: underline; }

/* Links inside body text are blue. The old site drew these black with no
   underline, which was already hard to spot; now that the home page carries
   the site's navigation in its body, invisible links would be a real problem.
   To go back to the old treatment, delete this rule. */
.post-content a { color: var(--link); }
.post-content a:hover { text-decoration: underline; }

article.post h1,
article.post h2 {
  margin-bottom: 0;
  font-size: 2em;
  font-weight: bold;
  line-height: 1.2;
  text-align: left;
}

article.post p.post-time {
  font-size: 90%;
  color: var(--ink-muted);
  margin-top: -0.4em;
  text-align: left;
}

article.post p.read-more { margin-top: -0.5em; padding-left: 2em; }
article.post a.read-more { color: var(--link); }

article.post p.post-time .tags a {
  color: var(--link);
  margin-left: 0.6em;
}
article.post p.post-time .tags a::before { content: "#"; opacity: 0.55; }

/* Headings inside post bodies sit below the post title. */
.post-content h2 { font-size: 1.3em; }
.post-content h3 { font-size: 1.15em; }
.post-content h4,
.post-content h5,
.post-content h6 { font-size: 1em; }

.post-content img { max-width: 100%; height: auto; }

.post-content blockquote {
  margin-inline: 0;
  padding-left: 1em;
  border-left: thin var(--rule) solid;
  color: var(--ink-muted);
  font-style: italic;
}

.post-content pre {
  padding: 0.75em 1em;
  border: thin var(--rule) solid;
  background: #fff;
  overflow-x: auto;
  text-align: left;
}
.post-content code, .post-content pre { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 0.875em; }
.post-content pre code { padding: 0; background: none; }
.post-content code { padding: 0.1em 0.3em; background: #fff; }

.post-content .table-wrap { overflow-x: auto; }
.post-content table { border-collapse: collapse; width: 100%; text-align: left; }
.post-content th, .post-content td {
  padding: 0.4em 0.6em;
  border-bottom: thin var(--rule) solid;
  text-align: left;
}

.post-content hr { border: 0; border-top: thin var(--rule) solid; margin: 2em 0; }

/* ---- navigation between posts and pages ------------------------------ */

.page-of-posts-navigation { margin-top: 3em; }
.single-post-navigation { margin-top: 2em; padding-left: var(--gutter); }

.page-of-posts-navigation,
.single-post-navigation {
  display: flex;
  gap: 1em;
}

.page-of-posts-navigation div,
.single-post-navigation div {
  border-top: thin var(--rule) solid;
  flex: 1;
  min-height: 1.5em;
  padding: 0 1em;
}

.page-of-posts-navigation .navigate-previous,
.single-post-navigation .navigate-previous { text-align: left; }

.page-of-posts-navigation .navigate-next,
.single-post-navigation .navigate-next { text-align: right; }

.page-of-posts-navigation a,
.single-post-navigation a {
  text-decoration: none;
  color: var(--link);
}
.page-of-posts-navigation a:hover,
.single-post-navigation a:hover { text-decoration: underline; }

/* ---- sidebar --------------------------------------------------------- */

#sidebar { font-size: 85%; padding-top: 0.5em; }

.sidebar-title {
  font-weight: bold;
  padding-bottom: 0.3em;
  margin-bottom: 0.5em;
  border-bottom: thin var(--rule) solid;
}

.tag-list { list-style: none; margin: 0; padding: 0; }
.tag-list li { margin-bottom: 0.35em; }
.tag-list a { text-decoration: none; color: var(--link); }
.tag-list a:hover { text-decoration: underline; }
.tag-list li.current a { color: var(--ink); font-weight: bold; }

/* The Archive block follows the Tags block, so it needs its own top margin. */
.sidebar-title + .tag-list + .sidebar-title { margin-top: 1.6em; }

/* ---- archive tree ---------------------------------------------------- */

/* Built from <details>, so expanding a year needs no JavaScript and stays
   reachable by keyboard. */
.archive-tree,
.archive-tree ul { list-style: none; margin: 0; padding: 0; }
.archive-tree ul { padding-left: 1em; }
.archive-tree li { margin-bottom: 0.25em; }

.archive-tree summary {
  cursor: pointer;
  /* The marker is the only way to expand without following the link, so give
     it room to be hit. */
  padding: 0.1em 0;
}
.archive-tree summary::marker { color: var(--ink-muted); }
.archive-tree details[open] > summary { margin-bottom: 0.25em; }

.archive-tree a { text-decoration: none; color: var(--link); }
.archive-tree a:hover { text-decoration: underline; }
.archive-tree a.current { color: var(--ink); font-weight: bold; }

/* Days are leaves: no disclosure marker, so indent them to line up under the
   month's summary text rather than under its marker. */
.archive-days { padding-left: 2.1em; }

.tag-heading { margin-top: 0; color: var(--ink-muted); }
.tag-heading .tag-name { color: var(--ink); font-weight: bold; }

p.back { margin-top: 3em; }
p.back a { color: var(--link); text-decoration: none; }
p.back a:hover { text-decoration: underline; }

/* ---- footer ---------------------------------------------------------- */

/* The trail and the copyright share one row: trail left, copyright right, both
   sitting on the rule that separates the footer from the content. They wrap to
   two rows only when there is genuinely no width for one. */
#footer {
  clear: both;
  margin-top: 3em;
  width: 100%;
  padding: 0.6em 0 1.3rem;
  border-top: thin var(--rule) solid;

  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.4em 1.5em;
}

#footer-copyright {
  font-size: 60%;
  text-align: right;
  /* Holds the copyright to the right even after a wrap drops it onto its own
     row, where space-between would otherwise have nothing to push against. */
  margin-left: auto;
}
#footer-copyright a { text-decoration: none; color: var(--ink); }

/* ---- footer crumb trail ---------------------------------------------- */

#crumbs {
  font-size: 75%;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.15em 0.4em;
}

/* The trail reads left to right, so the first separator, which would sit
   between the hamburger and nothing, is dropped when there is no menu. */
#crumbs > .crumb-separator:first-child { display: none; }

#crumbs .crumb-separator { color: var(--ink-muted); }
#crumbs a.crumb { color: var(--link); text-decoration: none; }
#crumbs a.crumb:hover { text-decoration: underline; }
#crumbs .crumb.current { color: var(--ink-muted); }

/* The menu is a <details>, so it opens with no JavaScript, like the archive
   tree. It is taken out of flow when open so that a long list does not push
   the copyright line down the page. */
#menu { position: relative; }
#menu > summary {
  cursor: pointer;
  list-style: none;
  line-height: 1;
  padding: 0.1em 0.2em;
}
#menu > summary::-webkit-details-marker { display: none; }
/* The trail is small type, but the hamburger is a control and needs to stay a
   comfortable target. */
#menu .menu-icon { font-size: 170%; line-height: 1; color: var(--ink); }

#menu > ul {
  position: absolute;
  bottom: 100%;
  left: 0;
  z-index: 1;
  margin: 0 0 0.4em;
  padding: 0.5em 1.1em;
  list-style: none;
  min-width: 8em;
  background: var(--paper);
  border: thin var(--rule) solid;
  border-radius: 0.4em;
  box-shadow: 0 2px 8px rgb(0 0 0 / 12%);
}
#menu > ul li { margin: 0.3em 0; }
#menu > ul a { color: var(--link); text-decoration: none; white-space: nowrap; }
#menu > ul a:hover { text-decoration: underline; }

/* ---- narrow screens -------------------------------------------------- */

@media (max-width: 860px) {
  .with-sidebar { grid-template-columns: 1fr; }

  #single-post,
  #page-of-posts,
  .single-post-navigation { padding-left: 0; }

  /* The sidebar becomes a footer strip once it is no longer a column. */
  #sidebar {
    margin-top: 2.5em;
    padding-top: 0.5em;
    border-top: thin var(--rule) solid;
  }
  .sidebar-title { border-bottom: 0; margin-bottom: 0.4em; }
  .tag-list { display: flex; flex-wrap: wrap; gap: 0.35em 1em; }
  .tag-list li { margin-bottom: 0; }

  /* The tree keeps its shape here; only its top spacing needs to shrink. */
  .sidebar-title + .tag-list + .sidebar-title { margin-top: 1.2em; }
}

@media (max-width: 560px) {
  /* Justified text without room to breathe opens rivers between words. */
  article.post { text-align: left; }
  #header-title { font-size: 150%; }
  #header-subtitle { font-size: 100%; }
  article.post h1, article.post h2 { font-size: 1.6em; }
}

:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }