/*
  How the site links out (layouts/_partials/plains/home-link.html, layouts/_markup/render-link.html):
  the Plains of Sedia sigil home to the dashboard before the brand and the mobile page title, and
  the small arrow after any link that leaves the site. Plain CSS, outside the theme's Sass.
*/

.plains-home {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  line-height: 0;
  transition: filter 0.15s ease;
}

.plains-home img {
  display: block;
  width: 24px;
  height: 24px;
}

.plains-home:hover,
.plains-home:focus-visible {
  filter: brightness(1.2) drop-shadow(0 0 6px rgba(255, 154, 60, 0.5));
}

.plains-home:focus-visible {
  outline: 2px solid rgba(255, 154, 60, 0.85);
  outline-offset: 3px;
}

/* The theme marks every outgoing menu link with an icon; the sigil is mark enough. */
.book-menu nav a.plains-home::after {
  content: none;
}

.plains-home-divider {
  flex: none;
  width: 1px;
  height: 22px;
  background: rgba(244, 228, 188, 0.2);
}

/* The menu's brand: sigil, divider, then the site's title, a touch smaller and tighter than the
   theme's so it still takes two lines beside them, centered on both. */
.book-brand.plains-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.4rem;
  line-height: 1.3;
}

.book-brand.plains-brand > a:last-child {
  min-width: 0;
}

/* The mobile top bar: the sigil and divider ride with the page title between the menu and
   contents buttons, gaps trimmed so a long title still fits a phone. */
.book-header .plains-header-title {
  gap: 10px;
  min-width: 0;
  margin: 0 12px;
}

.book-header .plains-header-title h3 {
  min-width: 0;
  margin: 0;
}

/* A link that leaves the site: a dimmed arrow after its text, kept out of its accessible name. */
.external::after {
  content: '\2197';
  content: '\2197' / '';
  display: inline-block;
  margin-left: 0.2em;
  font-size: 0.8em;
  line-height: 1;
  opacity: 0.65;
  text-decoration: none;
}

@media (prefers-reduced-motion: reduce) {
  .plains-home {
    transition: none;
  }
}

/* The menu's groups (layouts/_partials/docs/menu-filetree.html): a small, dim, spaced-out label
   over each run of sections, and a smaller one setting the ascended races apart. */
.book-menu nav .plains-menu-group {
  margin: 1.4em 0 0.35em;
  font-size: 0.72em;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.55;
}

.book-menu nav > ul > .plains-menu-group:first-child {
  margin-top: 0.9em;
}

.book-menu nav .plains-menu-label {
  margin: 0.6em 0 0.2em;
  font-size: 0.85em;
  font-style: italic;
  opacity: 0.55;
}