/* 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`.
   State modifiers bared to `&.sticky` / `&.open` / `&.hidden`; the responsive
   brand-logo/brand-text visibility uses bared `&.desktop` / `&.mobile`
   modifiers (compound on the element, scoped by the block). */

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

.navbar {
  /* --navbar-h is the desktop header height; menu dropdowns anchor their
     full-width panel to it (position: fixed; top: var(--navbar-h)). */
  --navbar-h: 63px;
  width: 100%;
  padding: 10px 0;
  background: #e9e9e1;
  color: #292929;
  z-index: 40;

  &.sticky {
    position: sticky;
    top: 0;
    transition: transform 0.3s ease, box-shadow 0.2s ease;

    /* Hide-on-scroll-down: slide the sticky header up out of view. */
    &.hidden {
      transform: translateY(-100%);

      /* While slid off-screen the header is still in the DOM, and its menu
       * dropdowns are `position: fixed` anchored to `--navbar-h`. This
       * `transform` becomes their containing block, so they resolve back to
       * the viewport top — and the off-screen triggers + the invisible hover
       * "bridge" would still open a menu when the user hovers the top of the
       * page. `pointer-events: none` (inherited into the slotted menus) stops
       * any hover/click from reaching the hidden bar or its panels; it's
       * restored to auto the moment the header un-hides on scroll-up. */
      pointer-events: none;
    }
  }

  .container {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 10px 20px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
  }

  /* Logo area: holds the brand + the mobile hamburger. On mobile it spans the
     full row with the toggle pushed to the right; on desktop it just hugs the
     logo (the toggle is hidden). */
  .logo {
    flex: 1 1 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
  }

  .brand {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    color: inherit;
  }

  .brand-logo {
    display: block;
    max-width: 122px;
    height: auto;
  }

  .brand-logo.desktop,
  .brand-text.desktop {
    display: none;
  }

  .brand-text {
    display: inline-block;
    font-family: 'Maison Neue Extended', 'Maisonneueextended Book',
      'Maisonneueextended', 'Helvetica Now Display', 'Helveticanowdisplay',
      sans-serif;
    font-size: 24px;
    line-height: 1;
    letter-spacing: 0.5px;
    text-transform: lowercase;
  }

  .toggle {
    display: inline-flex;
    width: 48px;
    height: 48px;
    padding: 0;
    border: 0;
    background: transparent;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
  }

  .toggle-bar {
    width: 24px;
    height: 2px;
    border-radius: 999px;
    background: currentColor;
  }

  .panel {
    display: none;
    flex-basis: 100%;
    padding: 8px 0 16px;
  }

  &.open .panel {
    display: grid;
    gap: 20px;
  }

  .main-list,
  .secondary-list {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .overlay {
    position: fixed;
    inset: 0;
    border: 0;
    background: rgba(0, 0, 0, 0.2);
    z-index: 30;
  }

  @media (min-width: 1280px) {
    height: var(--navbar-h);
    padding: 0;
    display: flex;
    align-items: center;
    background: rgba(49, 49, 48, 0.85);
    backdrop-filter: blur(10px);
    color: #ffffff;

    /* Desktop layout — three zones evenly distributed across the full width:
         [ logo ] ····· [ menu area ] ····· [ buttons ]
       The container is the space-between flex row, and the panel is
       display:contents so its two children (menu + buttons) become direct flex
       siblings of the logo. With three flex children + justify-content:
       space-between, the menu area sits in the middle, equidistant from the logo
       and the buttons. display:contents only flattens the panel box — slot
       behavior, hover dropdowns and styling on the children are all preserved. */
    .container {
      display: flex;
      flex-wrap: nowrap;
      align-items: center;
      justify-content: space-between;
      gap: 40px;
    }

    .logo {
      flex: 0 0 auto;
      justify-content: flex-start;
    }

    .brand-logo.mobile,
    .brand-text.mobile,
    .toggle,
    .overlay {
      display: none;
    }

    .brand-logo.desktop,
    .brand-text.desktop {
      display: inline-block;
    }

    .brand {
      flex: 0 0 auto;
    }

    /* Flatten the panel so logo + menu + buttons are three siblings of the same
       space-between row. */
    .panel,
    &.open .panel {
      display: contents;
      padding: 0;
    }

    .main {
      flex: 0 0 auto;
    }

    .secondary {
      flex: 0 0 auto;
    }

    .main-list {
      flex-direction: row;
      align-items: center;
      gap: 24px;
    }

    .secondary-list {
      flex-direction: row;
      align-items: center;
      gap: 24px;
    }
  }
}

/* Slotted nav children (kept flat — ::slotted only resolves in the shadow
   tree; these theme the NavbarItem/Cta labels dropped into each list). */
.navbar .main-list ::slotted(*) {
  display: contents;
  --navbar-item-color: #292929;
  --navbar-item-hover-color: #292929;
  --navbar-item-hover-bg: rgba(41, 41, 41, 0.08);
  /* Center any CTA label dropped into the navbar (inherits into the Cta's
     shadow tree). Applies at every viewport — desktop rules below don't unset
     it. */
  --cta-justify: center;
}

.navbar .secondary-list ::slotted(*) {
  display: contents;
  --navbar-item-color: #292929;
  --navbar-item-hover-color: #292929;
  --navbar-item-hover-bg: rgba(41, 41, 41, 0.08);
  --cta-justify: center;
  /* Mobile bar is light (#e9e9e1): secondary CTA label is dark. Desktop
     re-sets these to white in the >=1280 block for the dark bar. */
  --cta-color: #292929;
  --cta-secondary-color: #292929;
  --cta-secondary-hover-color: #292929;
}

@media (min-width: 1280px) {
  .navbar .main-list ::slotted(*) {
    --navbar-item-color: #ffffff;
    --navbar-item-hover-color: #ffffff;
    --navbar-item-hover-bg: rgba(255, 255, 255, 0.15);
  }

  .navbar .secondary-list ::slotted(*) {
    --navbar-item-color: #ffffff;
    --navbar-item-hover-color: #ffffff;
    --navbar-item-hover-bg: rgba(255, 255, 255, 0.15);
    /* Match the live creditas.com nav CTA exactly: 14/20 label, #292929 text,
       8px radius, 12px×20px padding → 44px tall (fits the 63px bar). */
    --cta-padding: 12px 20px;
    --cta-radius: 8px;
    --cta-font-size: 14px;
    --cta-line-height: 20px;
    --cta-color: #292929 !important;
    /* Dark bar on desktop: the ghost secondary CTA label is white. (The
       primary green CTA keeps --cta-color #292929 above.) */
    --cta-secondary-color: #ffffff;
    --cta-secondary-hover-color: #ffffff;
  }
}