body {
  margin: 0;
  font-family: Georgia, serif;
  background-color: #fff;
  color: #111;
  line-height: 1.6;
}

.container {
  display: grid;
  grid-template-columns: 250px 1fr;
  /* Row is at least the full viewport, but grows with the content.
     The sidebar stretches to fill it, so its divider always reaches the
     bottom — on short pages (home) and tall ones (about) alike. */
  grid-template-rows: minmax(100vh, auto);
}

/* Sidebar */
/* The grid item is #sidebar-container; the sidebar loads inside it. Make it a
   flex box so the sidebar stretches to the full row height — otherwise the
   divider would only be as tall as the nav. */
#sidebar-container {
  display: flex;
}

.sidebar {
  flex: 1; /* fill the full height of #sidebar-container */
  padding: 2rem;
  border-right: 2px solid #ddd; /* Increased border thickness */
}

.sidebar h1 {
  font-size: 1.5rem;
  margin-bottom: 1.5rem;
}

/* The hamburger toggle is desktop-hidden; the mobile breakpoint reveals it. */
.nav-toggle {
  display: none;
  background: none;
  border: none;
  font-size: 1.6rem;
  line-height: 1;
  padding: 0;
  cursor: pointer;
  color: #111;
}

/* Navigation tree — the only nav pane, under the "Guy Gilad" headline */
.nav-tree,
.nav-tree ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-tree ul {
  padding-left: 1rem; /* indent children */
}

.nav-tree a,
.nav-folder {
  font: inherit; /* same font and size everywhere */
  color: #111;
  text-decoration: none;
  cursor: pointer;
  display: block; /* full-width row = bigger, contiguous hover target */
  padding: 0.2rem 0;
}

.nav-tree a:hover,
.nav-folder:hover {
  text-decoration: underline;
}

/* Children of a folder are hidden until it's hovered or pinned open.
   No top margin on the list so it sits flush under the label — that keeps
   the hover area continuous, so the mouse can travel onto the posts. */
.nav-tree li.is-expandable > ul {
  display: none;
}

/* Click-pinned folders open everywhere. */
.nav-tree li.is-expandable.open > ul {
  display: block;
}

/* Hover-to-peek is desktop-only: on touch, :hover sticks after a tap and would
   stop a second tap from collapsing the folder. */
@media (hover: hover) {
  .nav-tree li.is-expandable:hover > ul {
    display: block;
  }
}

/* Chevron marking a folder (two strokes, drawn with borders) */
.folder-arrow {
  display: inline-block;
  width: 4px;
  height: 4px;
  border-right: 1.25px solid #999;
  border-bottom: 1.25px solid #999;
  transform: rotate(-45deg); /* points right when closed */
  margin-right: 0.5rem;
  margin-bottom: 1px;
  vertical-align: middle;
  transition: transform 0.15s ease;
}

.nav-tree li.is-expandable.open > .nav-folder .folder-arrow {
  transform: rotate(45deg); /* points down while open */
}

@media (hover: hover) {
  .nav-tree li.is-expandable:hover > .nav-folder .folder-arrow {
    transform: rotate(45deg); /* points down on hover (desktop peek) */
  }
}

/* Content */
.content {
  padding: 2rem;
  max-width: 800px;
}

.content h2 {
  font-size: 2rem;
  margin-bottom: 1.5rem;
}

.content p {
  margin-bottom: 1rem;
}

.content a {
  color: #0073e6;
  text-decoration: none;
}

.content a:hover {
  text-decoration: underline;
}

a:visited {
  color: inherit; /* or use the same color as a:link, e.g. #000 or #333 */
}

h1 a {
  color: inherit;           /* Use the color of the h1 */
  text-decoration: none;    /* Remove underline */
  cursor: pointer;          /* Optional: pointer cursor */
}
h1 a:visited,
h1 a:hover,
h1 a:active,
h1 a:focus {
  color: inherit;
  text-decoration: none;
}

/* Home intro (from home.md), above the Posts header */
.home-intro {
  color: #555;
  font-size: 1rem;
  font-style: normal;
  margin-bottom: 1.5rem;
}

.home-intro p {
  margin: 0 0 0.5rem;
}

/* Home intro links: green underline that fills upward into a highlight on hover */
.home-intro a {
  color: inherit;
  text-decoration: none;
  padding: 0 2px;
  border-bottom: 2px solid #2e7d32;
  background-image: linear-gradient(#2e7d32, #2e7d32);
  background-repeat: no-repeat;
  background-position: bottom;
  background-size: 100% 0;
  transition: background-size 0.25s ease, color 0.25s ease;
}

/* Only run the fill-up hover effect on devices with a real pointer. On touch
   screens :hover sticks after a tap, leaving the link stuck in the filled
   (white-on-green) state — so there it just keeps the static green underline. */
@media (hover: hover) {
  .home-intro a:hover {
    color: #fff;
    text-decoration: none;
    background-size: 100% 100%;
  }
}

/* Blog landing — flat list of posts */
.post-summary {
  margin-bottom: 2rem;
}

.post-summary h3 {
  margin-bottom: 0.25rem;
  font-size: 1.4rem;
}

.post-summary h3 a {
  color: #111;
}

.post-date {
  display: block;
  color: #888;
  font-size: 0.9rem;
  margin-bottom: 0.75rem;
}

/* Single post */
.post-folder {
  color: #888;
  font-size: 0.85rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  margin: 0 0 0.25rem;
}

.post-folder:empty {
  display: none; /* no label for top-level posts */
}

#post-content h1 {
  font-size: 2rem;
  margin-bottom: 1rem;
}

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

#post-content blockquote {
  border-left: 3px solid #ddd;
  margin-left: 0;
  padding-left: 1rem;
  color: #555;
}

#post-content pre {
  background: #f5f5f5;
  padding: 1rem;
  overflow-x: auto;
}

#post-content code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.9em;
}

/* --- Phones / narrow screens -------------------------------------------
   Stack the sidebar on top of the content instead of beside it, and move
   the divider from the right edge to the bottom. Tighten spacing and the
   large headings so posts are comfortable to read on a small screen. */
@media (max-width: 700px) {
  .container {
    grid-template-columns: 1fr; /* single column */
    grid-template-rows: auto;   /* don't force the sidebar to full height */
  }

  .sidebar {
    border-right: none;
    border-bottom: 2px solid #ddd; /* divider under the nav now */
    padding: 1.25rem;
  }

  /* Compact top bar: site name on the left, hamburger on the right. */
  .sidebar-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .sidebar h1 {
    margin-bottom: 0; /* keep the collapsed bar tight */
  }

  .nav-toggle {
    display: inline-block; /* reveal the hamburger */
  }

  /* Nav starts collapsed so the post content sits right at the top; the
     hamburger toggles .nav-open to reveal it. */
  #site-nav {
    display: none;
    margin-top: 1rem;
  }

  .sidebar.nav-open #site-nav {
    display: block;
  }

  .content {
    padding: 1.25rem;
  }

  .content h2 {
    font-size: 1.6rem;
  }

  .post-summary h3 {
    font-size: 1.25rem;
  }

  #post-content h1 {
    font-size: 1.6rem;
  }
}