/* 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 `__`; elements nested under
   `.navbar-menu`. Two collision-driven choices (playground = global CSS):
   - the menu label uses `& > .summary` (direct child) so it does NOT reach a
     deeply-nested NavbarItem `.link.summary` (same bared name, different comp);
   - `navbar-menu__panel` → `.dropdown` to avoid Navbar's own `.panel`. */

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

/* Small fade + slide-down when the panel opens. Applied on both the mobile
   accordion and the desktop dropdown (the display flip is instant; the
   keyframe handles the perceived animation). */
@keyframes navbar-menu-fade-in {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.navbar-menu {
  position: relative;
  display: block;
  width: 100%;

  /* Menu label (direct child — see collision note above). */
  & > .summary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 32px;
    padding: 2px 4px;
    margin: 0;
    border: 0;
    background: transparent;
    border-radius: 6px;
    cursor: pointer;
    color: var(--navbar-item-color, #292929);
    font-family: 'Helvetica Now Display', 'Helveticanowdisplay', sans-serif;
    font-size: 22px;
    line-height: 20px;
    font-weight: 700;
    opacity: 1;
    transition: opacity 0.15s ease;

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

    /* Hover/focus: dim the item to 75% opacity. */
    &:hover,
    &:focus-visible {
      opacity: 0.75;
    }
  }

  .chevron {
    width: 10px;
    height: 10px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg) translateY(-2px);
    transition: transform 0.2s ease;
  }

  /* Chevron points up while the menu is open. On mobile the ONLY trigger is the
     click accordion state ([data-open]); :hover/:focus-within are desktop-only
     dropdown affordances (scoped in the desktop @media below) — on touch they'd
     flip the arrow on a focused-but-closed menu with no panel under it. */
  &[data-open='true'] .chevron {
    transform: rotate(-135deg) translateY(2px);
  }

  .dropdown {
    padding-top: 16px;
  }

  .groups {
    display: grid;
    gap: 24px;
  }

  /* Mobile / touch: the panel is an accordion that shows when open. */
  &[data-open='false'] .dropdown {
    display: none;
  }

  @media (min-width: 1280px) {
    width: auto;

    /* Full-bleed bar dropdown (matches the old creditas-site header): a
       viewport-wide panel pinned just under the header, NOT a floating card
       attached to the trigger. Because it's position:fixed to the viewport,
       every menu's panel lands at the exact same height/left edge. */
    .dropdown {
      display: none;
      position: fixed;
      top: var(--navbar-h, 63px);
      left: 0;
      right: 0;
      width: 100vw;
      padding: 24px 0 16px;
      background: #e9e9e1;
      box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
      z-index: 35;
    }

    /* Invisible bridge over the vertical gap between the trigger and the panel.
       It sits on the .navbar-menu itself (NOT the 100vw panel), so it only spans
       the width of THIS trigger — it no longer blankets the whole bar blocking
       the sibling triggers. That lets a horizontal sweep across the menu bar hit
       each trigger directly and switch panels instantly. (.navbar-menu is
       already position:relative from the base rule.) */
    &::after {
      content: '';
      position: absolute;
      left: 0;
      right: 0;
      top: 100%;
      height: 40px;
    }

    /* Desktop opens on pure CSS hover (and keyboard focus). No JS, no timers —
       hover naturally stays alive across trigger → bridge → panel because they
       are all inside .navbar-menu. */
    &:hover .dropdown,
    &:focus-within .dropdown {
      display: block;
      animation: navbar-menu-fade-in 0.18s ease both;
    }

    /* Desktop-only: hover/focus also rotate the chevron (mobile uses data-open). */
    &:hover .chevron,
    &:focus-within .chevron {
      transform: rotate(-135deg) translateY(2px);
    }

    /* Inner content is centered to the same 1200px grid as the header, with the
       groups laid out in a row (like SubMenuContainer in the old repo). */
    .groups {
      width: min(1200px, calc(100% - 32px));
      margin: 0 auto;
      grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
      gap: 40px;
      color: #292929;
    }
  }
}

/* Slotted NavbarMenuGroups (kept flat — ::slotted only resolves in shadow). */
.navbar-menu .groups ::slotted(*) {
  display: contents;
}