/* ===========================================
   AccessGuard logo link (shared/_logo): header, mobile menu, footer and app sidebar.
   The mark is marker yellow on an ink navy tile in the SVG itself; the wordmark has no fill,
   so it takes the link color: ink on light, white on dark. The tiled mark is the logo, not an
   accent: it does not count toward one yellow element per screen.
   =========================================== */

@layer components {
  .logo {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    min-height: 2.75rem;
    color: var(--color-text);
    text-decoration: none;

    .logo__image {
      display: block;
      width: auto;
      height: 1.75rem;
      fill: currentColor;
    }
  }
}