/* Palette + key values pulled from the live site's compiled
   assets/css/main.css (Jekyll hydeout theme), not just the SCSS defaults. */
:root {
  --gray-1: #f9f9f9;
  --gray-2: #e5e5e5;
  --gray-3: #ccc;
  --gray-4: #767676;
  --gray-9: #999;
  --blue: #268bd2;
  --code-color: #bf616a;

  --body-color: var(--gray-3);
  --body-muted: var(--gray-2);
  --body-bg: #0d0d0d;
  --link-color: var(--blue);
  --heading-color: #e1ddd8;
  --border-color: var(--gray-2);

  --sidebar-fg-color: #0d0d0d;
  --sidebar-text-color: rgba(13, 13, 13, 0.75);
}

* { box-sizing: border-box; }

/* Almost everything below is sized in rem, so this root scale (1rem -> 1.25rem
   at the desktop breakpoint) is what makes the whole page -- headings,
   spacing, the sidebar width -- match the live site's actual size, not just
   the font itself. */
html {
  font-size: 1rem;
  line-height: 1.5;
}

/* Mobile-first: sidebar stacks above content until the $large-breakpoint
   (49rem) below, where it switches to the live site's two-column layout. */
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", Arial, sans-serif;
  color: var(--body-color);
  background: var(--body-bg);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

a { color: var(--link-color); text-decoration: none; }
a:hover, a:focus { text-decoration: underline; }

/* Keep images and third-party embeds (imgur widgets, etc.) from forcing the
   page wider than the viewport -- most posts embed an imgur blockquote that
   imgur's own script replaces with a fixed-width iframe at runtime. */
img, iframe, video, embed, object {
  max-width: 100%;
  height: auto;
}
img { display: block; margin: 0 0 1rem; border-radius: 5px; }

table { max-width: 100%; display: block; overflow-x: auto; }

.content, .post-body { overflow-wrap: break-word; }

/* #sidebar is just the background column -- it stretches to match
   main.container's height (default flex stretch) so the cream background
   fills the page instead of stopping at its own content's height.
   .sidebar-inner holds the actual content and gets position: sticky at the
   desktop breakpoint below, so the content stays pinned near the top while
   scrolling without needing the outer box to be sticky itself. */
#sidebar {
  flex-shrink: 0;
  text-align: center;
  color: var(--sidebar-text-color);
  background-color: #e1ddd8;
  background-image: linear-gradient(to bottom, #f1efec, #d1cbc4);
}

/* No top padding: the logo sits flush against the sidebar's top edge. Every
   other element gets its own top spacing below instead of relying on the
   container's padding. */
.sidebar-inner { padding: 0 2rem 2rem; }

#sidebar h1 {
  font-family: "Abril Fatface", serif;
  font-weight: normal;
  font-size: 2.25rem;
  margin: 0 0 0.5rem;
  color: var(--sidebar-fg-color);
}
#sidebar h1 a { color: inherit; }
#sidebar h1 a:hover { color: black; }
#sidebar h1 .logo { display: block; width: 144px; height: 144px; margin: 0 auto 0.5rem; border-radius: 0; }
#sidebar .lead { font-size: 0.9rem; color: var(--sidebar-text-color); margin: 0 0 1.5rem; }

.lead { font-size: 1.25rem; font-weight: 300; }

.search-row { display: flex; border: 1px solid var(--border-color); border-radius: 300px; padding: 2px; }
.search-row input { border: 0; }
.search-row input + input { margin-left: 2px; }
.search-row input[type="text"], .search-row input[type="search"] { flex-grow: 1; }

#sidebar nav { display: flex; flex-direction: column; align-items: center; gap: 0.4rem; margin-bottom: 1.5rem; }
#sidebar nav a { color: var(--sidebar-fg-color); line-height: 1.75; }
#sidebar nav a.active { font-weight: bold; }
#sidebar nav a:hover, #sidebar nav a:focus { text-decoration: underline; }

#sidebar nav.icon-links { flex-direction: row; justify-content: center; gap: 0.75rem; margin-bottom: 1rem; }
#sidebar nav.icon-links a.icon svg { width: 1.5rem; height: 1.5rem; fill: rgba(13, 13, 13, 0.85); }

#sidebar .copyright { font-size: 0.75rem; color: var(--sidebar-text-color); }
#sidebar .copyright a { color: inherit; text-decoration: underline; }

main.container {
  flex: 1;
  padding: 2rem;
  overflow-x: hidden; /* safety net against runaway-width third-party embeds, kept off body/html so it doesn't disturb #sidebar's position: sticky */
}

/* This must come after every base rule it overrides (#sidebar, main.container
   above): media queries don't add specificity, so with equal-specificity
   selectors the later one in source order wins regardless of which media
   query matched -- these overrides need to be last to take effect. */
@media (min-width: 49rem) {
  html { font-size: 1.25rem; }

  body { flex-direction: row; }

  #sidebar {
    width: 18rem;
    text-align: left;
  }

  /* Sticky rather than the live site's independent-scroll-column approach:
     that requires the mouse to be hovering the content column specifically
     for the wheel to scroll it. This keeps the nav in view during a normal
     whole-page scroll from anywhere, while #sidebar's background still
     spans the full column height above. */
  .sidebar-inner {
    padding: 0 2rem 3rem;
    position: sticky;
    top: 0;
  }
  #sidebar nav { align-items: flex-start; }
  #sidebar nav.icon-links { justify-content: flex-start; }

  /* Left-anchored against the sidebar, not centered in the remaining space --
     main.container itself has no max-width, only its direct children do, so
     extra room on a wide viewport appears on the right, not split evenly on
     both sides. */
  main.container { padding: 4rem 4rem 0; }
  main.container > * { max-width: 38rem; padding: 0; }
}

h1, h2, h3, h4, h5, h6 { line-height: 1.25; font-weight: 600; color: var(--heading-color); }
h1 { font-size: 2rem; }
h2 { margin-top: 1rem; font-size: 1.5rem; }
h2.post-title, h2.page-title { font-size: 2rem; }
h3 { margin-top: 1.5rem; font-size: 1.25rem; }
h4, h5, h6 { margin-top: 1rem; font-size: 1rem; }

.post-title a { color: var(--heading-color); }
.post-meta { color: var(--body-muted); font-size: 0.85rem; margin-top: -0.5rem; }

.pagination { text-align: center; margin-bottom: 2rem; }
.pagination a {
  display: inline-block;
  width: 60%;
  padding: 0.9em 1.2em;
  border: 1px solid var(--border-color);
  border-radius: 300px;
  background: var(--body-bg);
  color: var(--link-color);
  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.16);
}
.pagination a:hover { background-color: var(--border-color); text-decoration: none; }

article { margin-bottom: 2.5rem; padding-top: 2rem; border-top: 1px solid var(--border-color); }
article:first-of-type { border-top: none; padding-top: 0; }

.posts-by-tag h2 { text-transform: capitalize; }

.posts-list { list-style: none; padding: 0; }
.posts-list li { margin-bottom: 0.5rem; }
.posts-list a { color: var(--heading-color); }
.posts-list a:hover { color: var(--link-color); text-decoration: none; }
.posts-list small { color: var(--gray-9); margin-left: 0.5rem; font-size: 75%; }

.tags-list { margin: 1.5rem 0; }
.tags-list a, .post-tags a {
  display: inline-block;
  margin-right: 0.5em;
  color: var(--body-color);
  opacity: 0.75;
}
.tags-list a:hover, .post-tags a:hover { opacity: 1; text-decoration: none; }
.post-tags a { font-size: 0.8em; }
.post-tags a .tag-name { text-transform: capitalize; }
.tags-list a .tag-count {
  background: var(--link-color);
  color: rgba(255, 255, 255, 0.8);
  margin-left: 0.25em;
  border-radius: 1000px;
  font-size: 0.75em;
  padding: 0 0.6em;
}

.post-tags { margin-top: 2rem; }

code {
  padding: 0.25em 0.5em;
  font-size: 85%;
  color: var(--code-color);
  background-color: var(--gray-1);
  border-radius: 3px;
  font-family: Menlo, Monaco, "Courier New", monospace;
}
pre {
  font-family: Menlo, Monaco, "Courier New", monospace;
  padding: 1rem;
  background-color: var(--gray-1);
  border-radius: 4px;
  overflow-x: auto;
}
pre code { padding: 0; background: transparent; color: inherit; }

blockquote {
  padding: 0.5rem 1rem;
  margin: 0.8rem 0;
  color: var(--gray-4);
  border-left: 0.25rem solid var(--border-color);
}