/* ==========================================================================
   sitemap.css
   Styles used only on the Sitemap (sitemap.html): the site's structure as a
   tree — the menu's places in two columns, each with its parts below.
   ========================================================================== */

.sitemap {
  padding-top: .5rem;
}

.site-tree {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* top level: the menu's places, two columns on wide screens */
.site-tree.is-top {
  columns: 2 22rem;
  column-gap: clamp(2rem, 5vw, 4rem);
}

.site-tree.is-top > li {
  break-inside: avoid;
  padding: 1rem 0 1.25rem;
  border-top: 1px solid var(--line);
}

.site-tree.is-top > li > a {
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--accent);
}

.site-tree a {
  color: var(--ink);
  text-decoration: none;
}

.site-tree a:hover,
.site-tree a:focus-visible {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: .25em;
}

/* the parts of each place, with a fine pine line on their left */
.site-tree .site-tree {
  margin: .5rem 0 0 .2rem;
  padding-left: 1rem;
  border-left: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  font-size: var(--fs-small);
}

.site-tree .site-tree li {
  padding: .2rem 0;
}

.site-tree .site-tree .site-tree {
  margin-top: .25rem;
  color: var(--ink-soft);
}

.site-tree .site-tree .site-tree a {
  color: var(--ink-soft);
}

/* Initiatives: each year in bold, before its places */
.tree-year {
  display: inline-block;
  min-width: 4.5rem;
  font-weight: 800;
  color: var(--accent);
}