/* Legacy-parity text rendering: the old Creditas site sets
 * -webkit-font-smoothing: antialiased globally, which renders type
 * lighter/thinner on macOS. Webflow Code Components live in isolated
 * shadow roots, so this must be declared per-component on :host to
 * inherit into the shadow tree (the property does not cross the
 * shadow boundary). Without it, Blink defaults to subpixel smoothing
 * and identical 400-weight text looks heavier than the old site. */
:host {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Class naming: single-class, no BEM `__` separator; the link is nested
   under `.navbar-item` (scoped as `.navbar-item .link`). Modifiers are bared
   to `&.button` / `&.summary` on the link. */

.navbar-item,
.navbar-item *,
.navbar-item *::before,
.navbar-item *::after {
  box-sizing: border-box;
}

.navbar-item {
  display: block;

  .link {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 2px 4px;
    border-radius: 6px;
    color: var(--navbar-item-color, #292929);
    text-decoration: none;
    font-family: 'Helvetica Now Display', 'Helveticanowdisplay', sans-serif;
    font-size: 16px;
    line-height: 24px;
    font-weight: 500;
    transition: background-color 0.2s ease, color 0.2s ease;

    &:hover,
    &:focus-visible {
      background: var(--navbar-item-hover-bg, rgba(41, 41, 41, 0.08));
      color: var(--navbar-item-hover-color, #292929);
    }

    /* Summary style — matches navbar-menu .summary (bold, 22px) so a plain
       Navbar Item lines up visually with a menu group's summary label. From
       1280px up it reverts to the standard link size (16px / 500). */
    &.summary {
      font-size: 22px;
      font-weight: 700;

      @media (min-width: 1280px) {
        font-size: 16px;
        line-height: 24px;
        font-weight: 500;
      }
    }

    &.button {
      padding: 12px 20px;
      border-radius: 8px;
      background: #8edb00;
      color: #1c4200;

      &:hover,
      &:focus-visible {
        background: #74b600;
        color: #1c4200;
      }
    }
  }
}