@layer components {
  /* Navbar Component
     ========================================================================== */

  /* Fixing is the .website-header wrapper's job; the navbar itself stays in
     flow so the public/auth layout gets the same header row as the app. Block
     padding mirrors the app header's `#header > *`. */
  .navbar {
    /* App body rhythm — the website's 1.5 default renders the same icons two
       pixels taller, which shifts the bar between website and app. */
    line-height: 1.4;
    padding-block: var(--block-space-half);
    transition: background-color 0.3s ease-out;
  }

  .navbar.scrolled {
    background-color: oklch(var(--lch-white) / 0.6);
    backdrop-filter: blur(5px);
  }

  .navbar__brand img {
    width: clamp(120px, 25vw, 160px);
    height: auto;
  }

  /* News indicator dot on hamburger menu */
  a.has-news:not(.app-nav__item) {
    position: relative;

    &::after {
      --size: 0.5em;
      content: "";
      position: absolute;
      inset-block-start: 0;
      inset-inline-end: -0.15em;
      inline-size: var(--size);
      aspect-ratio: 1;
      border-radius: 50%;
      background-color: var(--color-blue);
    }
  }

  /* Brand logo pairs (navbar, product window, footer, session brand): show the
     variant matching the theme. */
  .logo-dark {
    display: none;
  }

  html[data-theme="dark"] .logo-light {
    display: none;
  }

  html[data-theme="dark"] .logo-dark {
    display: inline;
  }

  @media (prefers-color-scheme: dark) {
    html:not([data-theme]) .logo-light {
      display: none;
    }

    html:not([data-theme]) .logo-dark {
      display: inline;
    }
  }
}