/* 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;  /* list and navigation links; body links are ink */
  --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);
}

/* ---- links ----------------------------------------------------------- */

/* A link keeps the colour of the words around it and is marked by its rule
   alone: the text's own colour, washed most of the way out toward the ground,
   so black text gets a light grey line. Hover brings that line up to full
   strength. Before this, nothing distinguished a link until the pointer was
   already on it.

   Links that sit in lists rather than in running text opt out below: in the
   sidebar, the crumb trail and the menu, every item is a link, so underlining
   them all is noise. Those are the only links drawn in --link blue, since
   position and colour are all they have to go on.

   To tune: the 30% is how much of the text's colour survives the wash - lower
   is fainter. To go back to the old treatment, delete this rule. */
a {
  /* Inherited rather than fixed to --ink, so a link inside a muted blockquote
     is drawn in the blockquote's grey and underlined to match. */
  color: inherit;
  text-decoration: underline;
  text-decoration-color: lightgray;                              /* fallback */
  text-decoration-color: color-mix(in srgb, currentColor 30%, var(--ground));
  /* Scales with the type, so a 2em post title is not underlined by a hair. */
  text-decoration-thickness: max(1px, 0.05em);
  text-underline-offset: 0.18em;
}
a:hover { text-decoration-color: currentColor; }

#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; }

/* A `no-title: yes` page is typically a picture rather than prose, so it takes
   the whole width under the banner, sidebar space included, edge to edge. */
#single-post.full-width { width: auto; padding-left: 0; }
#single-post.full-width .post-content img { width: 100%; }

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

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

/* Titles and body links are both black, as before. What is new is the grey
   rule under them from the links section: the old site left body links with no
   mark at all, which was already hard to spot, and unworkable now that the home
   page carries the site's navigation in its body. Both take their colour by
   inheritance, so there is no rule here to keep in step with the headings. */

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 p.post-time .tags a {
  color: var(--link);
  margin-left: 0.6em;
  text-decoration: none;
}
article.post p.post-time .tags a:hover { text-decoration: underline; }
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; }

/* Paragraph alignment set in Google Docs. These outrank article.post's
   justify, including the narrow-screen override to left. */
.post-content .align-center { text-align: center; }
.post-content .align-right  { text-align: right; }
.post-content .align-left   { text-align: left; }

.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; }

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

/* A title is as long as it is, and the sidebar is narrow, so each one gets one
   line and an ellipsis. The full title is on the anchor's title attribute. */
.archive-posts a {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.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: inherit; }

/* ---- 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;
  text-decoration: none;
  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; }