/* =============================================================================
   Alabama Signature Homes — blog/_blog
   =============================================================================

   Shared by the three blog views, blog/index, blog/show and blog/author, and
   listed by each of them. The underscore marks it as mirroring no view, the
   way services/_service_page.css does.

   What they share is the small navigation vocabulary the database-backed blog
   brought with it: the breadcrumb trail, the chip links (topics, categories,
   tags, services, profiles) and the section heading the blocks around a post
   use. Nothing outside the blog uses any of it, so none of it is main.css's —
   if a page elsewhere ever wants a chip, move .chip-link into main.css's
   components then.

   Same house rules as main.css — no nesting, flat selectors, media queries
   inside the layer that owns them. Everything is wrapped in @layer: an
   unlayered rule would outrank even the utilities layer.
   ========================================================================== */

@layer pages {
  /* ----- breadcrumbs ----- */

  .blog-crumbs {
    margin-block-end: var(--space-xs);
    font-size: var(--fs-sm);
    color: var(--clr-text-faint);
  }

  .blog-crumbs ol {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2xs);
  }

  /* Generated rather than typed, so it is never read aloud as a word between
     two link names. */
  .blog-crumbs li + li::before {
    content: "/";
    margin-inline-end: var(--space-2xs);
    color: var(--clr-neutral-600);
  }

  .blog-crumbs a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 3px;
  }

  .blog-crumbs [aria-current] {
    color: var(--clr-text-muted);
  }

  /* ----- chips ----- */

  .chip-nav {
    margin-block-end: var(--space-sm);
  }

  .chip-nav__list,
  .chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2xs);
  }

  .chip-list {
    margin-block-start: var(--space-xs);
  }

  .chip-link {
    display: inline-flex;
    gap: var(--space-2xs);
    align-items: center;
    padding: var(--space-3xs) var(--space-xs);
    font-size: var(--fs-sm);
    color: var(--clr-text);
    text-decoration: none;
    background-color: var(--clr-surface-card);
    border: 1px solid var(--clr-neutral-600);
    border-radius: var(--radius-full);
    transition: border-color var(--dur-fast), color var(--dur-fast), background-color var(--dur-fast);
  }

  .chip-link:hover,
  .chip-link:focus-visible {
    color: var(--clr-text);
    border-color: var(--clr-primary-200);
  }

  .chip-link.is-current {
    color: var(--clr-white);
    background-color: var(--clr-primary-400);
    border-color: var(--clr-primary-400);
  }

  /* A second kind of chip in the same row — a category beside the topics, a
     tag beside a category — marked out by losing the fill rather than by a
     colour of its own, which would read as a different kind of link. */
  .chip-link--quiet {
    background-color: transparent;
  }

  .chip-link__count {
    font-size: var(--fs-xs);
    font-variant-numeric: tabular-nums;
    opacity: 0.7;
  }

  /* ----- the heading the blocks around a post share ----- */

  .post-section-title {
    font-size: var(--fs-2xl);
    text-decoration: underline;
    text-decoration-color: var(--clr-primary-400);
    text-underline-offset: 4px;
  }
}