/* SMB desktop main menu v1 (2026-10-28 owner: match the legalnewcreditfiles.com main menu structure and design).
   Built by /js/smb-nav.js. Pattern from LNCF: full-width white bar, two-line logo, uppercase icon items with an
   underline on the current/open item, mega panels (intro / grouped icon links / feature card), glowing CTA pair.
   SMB brand: navy #0f1e3d / #1E3A5F, gold #D4A84B, blue #2563eb. Breakpoint matches the mobile bar: <=991px keeps
   the old Webflow nav + /js/smb-mobile-menu.js drawer; >=992px shows this header and hides the old nav. */

.smbn { display: none; }

@media (min-width: 992px) {
  html.smbn-on .uui-navbar01_component.w-nav { display: none !important; }

  /* Sticky like the old floating nav. Same footprint (64px, in flow where the old nav sat), so page heroes that are
     pulled up under the nav with a negative margin (home -75px, 508 page -120px) still land where they did.
     Webflow sets body{margin-top:-15px}; sticky top:0 still paints the bar from y=0. */
  .smbn {
    display: block; position: sticky; top: 0; z-index: 1001; margin-top: 0;
    background: #ffffff; border-bottom: 1px solid rgba(15, 30, 61, .08);
    box-shadow: 0 1px 2px rgba(15, 30, 61, .04);
    font-family: "Inter", "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    transition: box-shadow .2s ease;
  }
  .smbn.is-scrolled { box-shadow: 0 8px 24px -14px rgba(15, 30, 61, .45); }
  .smbn *, .smbn *::before, .smbn *::after { box-sizing: border-box; }
  /* page CSS sets wide letter-spacing on p/span (Webflow body text); reset it for the menu's plain text only */
  .smbn-mm-title, .smbn-mm-text, .smbn-mm-all, .smbn-mm-t, .smbn-mm-d, .smbn-mm-ft, .smbn-mm-go { letter-spacing: normal; text-shadow: none; }
  .smbn-in {
    max-width: 1232px; height: 64px; margin: 0 auto; padding: 0 16px;
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
  }

  /* Logo: S tile + two-line wordmark (LNCF stacks LEGAL NEW / CREDIT FILE the same way) */
  .smbn-brand { display: flex; align-items: center; gap: 10px; text-decoration: none !important; flex: 0 0 auto; }
  .smbn-logo { width: 40px; height: 40px; border-radius: 10px; display: block; object-fit: contain; }
  .smbn-word { display: flex; flex-direction: column; line-height: 1; }
  .smbn-word-1 { font-family: "Plus Jakarta Sans", "Inter", system-ui, sans-serif; font-weight: 800; font-size: 16px; letter-spacing: -.01em; color: #0f1e3d; }
  .smbn-word-2 { margin-top: 5px; font-size: 8px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; color: #9a7020; }

  /* Menu items: 12px uppercase 700, 14px icon, underline bar for current (gold) and hover/open (blue) */
  .smbn-nav { flex: 1 1 auto; display: flex; justify-content: center; min-width: 0; }
  .smbn-ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 2px; }
  .smbn-li { position: static; display: flex; align-items: center; margin: 0; padding: 0; }
  .smbn-a {
    all: unset; box-sizing: border-box; cursor: pointer; position: relative;
    display: inline-flex; align-items: center; gap: 5px; height: 64px; padding: 0 7px;
    font: 700 11.5px/1 "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif; letter-spacing: .025em; text-transform: uppercase;
    color: #1E3A5F; white-space: nowrap; text-decoration: none !important;
    transition: color .15s ease;
  }
  .smbn-a .smbn-ic { width: 14px; height: 14px; flex: 0 0 14px; color: #6b7f99; transition: color .15s ease; }
  .smbn-a::after {
    content: ""; position: absolute; left: 7px; right: 7px; bottom: 16px; height: 2px; border-radius: 2px;
    background: #2563eb; transform: scaleX(0); transform-origin: left center; transition: transform .22s cubic-bezier(.16, 1, .3, 1);
  }
  .smbn-a.is-current { color: #8a6414; }
  .smbn-a.is-current .smbn-ic { color: #D4A84B; }
  .smbn-a.is-current::after { background: #D4A84B; transform: scaleX(1); }
  .smbn-a:hover, .smbn-li.is-open > .smbn-a { color: #2563eb; }
  .smbn-a:hover .smbn-ic, .smbn-li.is-open > .smbn-a .smbn-ic { color: #2563eb; }
  .smbn-a:hover::after, .smbn-li.is-open > .smbn-a::after { background: #2563eb; transform: scaleX(1); }
  .smbn-a:focus-visible, .smbn-caret:focus-visible { outline: 2px solid #2563eb; outline-offset: -14px; border-radius: 8px; }
  .smbn-a-split { padding-right: 2px; }
  .smbn-a-split::after { right: 2px; }
  .smbn-dn { width: 13px; height: 13px; flex: 0 0 13px; transition: transform .22s ease; }
  .smbn-caret {
    all: unset; box-sizing: border-box; cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 64px; margin-right: 4px; color: #1E3A5F;
  }
  .smbn-caret:hover, .smbn-li.is-open > .smbn-caret { color: #2563eb; }
  .smbn-li.is-open .smbn-dn { transform: rotate(180deg); }

  /* CTA pair: same radial-gradient + glow treatment LNCF uses, in SMB blue (join) and gold (call) */
  .smbn-ctas { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
  .smbn-cta {
    display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 13px; border-radius: 9px;
    font: 800 13px/1 "Plus Jakarta Sans", "Inter", system-ui, sans-serif; letter-spacing: .01em; white-space: nowrap;
    text-decoration: none !important; transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
  }
  .smbn-cta .smbn-ic { width: 16px; height: 16px; flex: 0 0 16px; }
  .smbn-cta-join {
    color: #ffffff !important; text-transform: uppercase;
    background: radial-gradient(circle at 50% 30%, #4f8df7, #2563eb 70%);
    box-shadow: 0 0 0 1px rgba(37, 99, 235, .25), 0 0 8px rgba(59, 130, 246, .55), 0 6px 16px -6px rgba(37, 99, 235, .7);
  }
  .smbn-cta-call {
    color: #0f1e3d !important;
    background: radial-gradient(circle at 50% 30%, #f0d48e, #D4A84B 70%);
    box-shadow: 0 0 0 1px rgba(180, 136, 50, .3), 0 0 8px rgba(212, 168, 75, .6), 0 6px 16px -6px rgba(160, 118, 34, .7);
  }
  .smbn-cta:hover { transform: translateY(-1px); filter: brightness(1.05); }
  .smbn-cta-join:hover { box-shadow: 0 0 0 1px rgba(37, 99, 235, .3), 0 0 14px rgba(59, 130, 246, .7), 0 10px 20px -8px rgba(37, 99, 235, .8); }
  .smbn-cta-call:hover { box-shadow: 0 0 0 1px rgba(180, 136, 50, .35), 0 0 14px rgba(212, 168, 75, .75), 0 10px 20px -8px rgba(160, 118, 34, .8); }
  .smbn-cta:active { transform: translateY(1px); filter: brightness(.95); }
  .smbn-cta:focus-visible { outline: 2px solid #0f1e3d; outline-offset: 3px; }

  /* Mega panel: centered under the bar, 3 columns like LNCF (270 intro / groups / 290 feature card) */
  .smbn-mm {
    position: absolute; top: calc(100% + 6px); left: 50%; width: min(1160px, calc(100vw - 32px));
    max-height: calc(100vh - 86px); overflow: auto; overscroll-behavior: contain;
    opacity: 0; visibility: hidden; transform: translate(-50%, 8px); pointer-events: none;
    transition: opacity .22s cubic-bezier(.16, 1, .3, 1), transform .32s cubic-bezier(.16, 1, .3, 1), visibility 0s linear .32s;
    border-radius: 24px; background: #f6f8fc;
    box-shadow: 0 0 0 1px rgba(15, 30, 61, .1), 0 2px 6px rgba(10, 25, 55, .06), 0 40px 80px -36px rgba(10, 25, 55, .55), inset 0 1px 0 #ffffff;
    text-align: left;
  }
  /* hover bridge across the 6px gap so the panel does not close while the cursor travels down */
  .smbn-li.has-mm::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 8px; display: none; }
  .smbn-li.is-open::after { display: block; }
  .smbn-li.is-open > .smbn-mm {
    opacity: 1; visibility: visible; transform: translate(-50%, 0); pointer-events: auto;
    transition: opacity .22s cubic-bezier(.16, 1, .3, 1), transform .32s cubic-bezier(.16, 1, .3, 1), visibility 0s;
  }
  .smbn-mm-grid { display: grid; grid-template-columns: 270px minmax(0, 1fr) 290px; gap: 0; padding: 10px; min-height: 420px; }

  .smbn-mm-intro { display: flex; flex-direction: column; padding: 22px 20px 18px; }
  .smbn-mm-eyebrow {
    align-self: flex-start; margin: 0 0 14px; padding: 5px 10px; border-radius: 999px;
    background: rgba(212, 168, 75, .16); color: #8a6414; font-size: 10px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; line-height: 1.2;
  }
  .smbn-mm-title { margin: 0 0 12px; font-family: Georgia, "Times New Roman", serif; font-size: 22px; font-weight: 700; line-height: 1.25; letter-spacing: -.005em; color: #0f1e3d; }
  .smbn-mm-text { margin: 0; font-size: 14px; font-weight: 400; line-height: 1.55; color: #4d5d73; }
  .smbn-mm-all { margin-top: auto; padding-top: 18px; font-size: 13.5px; font-weight: 700; color: #2563eb !important; text-decoration: none !important; }
  .smbn-mm-all:hover { text-decoration: underline !important; }

  .smbn-mm-groups { display: grid; grid-template-columns: 1fr 1fr; align-content: start; padding: 10px 8px 8px; border-radius: 18px; background: #ffffff; box-shadow: 0 0 0 1px rgba(15, 30, 61, .05); }
  .smbn-mm-group { padding: 0 0 6px; min-width: 0; }
  .smbn-mm-group.is-wide { grid-column: 1 / -1; border-top: 1px solid #eef1f6; padding-top: 4px; margin-top: 2px; }
  .smbn-mm-group.is-wide .smbn-mm-links { display: grid; grid-template-columns: 1fr 1fr; }
  .smbn-mm-gh { margin: 0; padding: 8px 12px 6px; font-size: 10.5px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; color: #8592a6; }
  .smbn-mm-links { list-style: none; margin: 0; padding: 0; }
  .smbn-mm-links li { margin: 0; padding: 0; }
  .smbn-mm-a { display: flex; gap: 12px; padding: 9px 12px; border-radius: 14px; color: #0f1e3d !important; text-decoration: none !important; transition: background-color .15s ease; }
  .smbn-mm-ic {
    flex: 0 0 36px; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 11px;
    background: #ffffff; color: #2563eb; box-shadow: 0 0 0 1px rgba(15, 30, 61, .1), 0 1px 2px rgba(15, 30, 61, .06);
    transition: background-color .15s ease, color .15s ease, box-shadow .15s ease;
  }
  .smbn-mm-ic .smbn-ic { width: 18px; height: 18px; }
  .smbn-mm-tx { display: flex; flex-direction: column; gap: 3px; padding-top: 1px; min-width: 0; }
  .smbn-mm-t { font-size: 14px; font-weight: 700; line-height: 1.3; color: #0f1e3d; }
  .smbn-mm-d { font-size: 12.5px; font-weight: 400; line-height: 1.4; color: #5d6c82; }
  .smbn-badge { display: inline-block; vertical-align: 1px; margin-left: 4px; padding: 2px 7px; border-radius: 999px; background: #e7f8ee; color: #067647; font-size: 10px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
  .smbn-mm-a:hover, .smbn-mm-a:focus-visible { background: #f2f6ff; }
  .smbn-mm-a:hover .smbn-mm-ic, .smbn-mm-a:focus-visible .smbn-mm-ic { background: #2563eb; color: #ffffff; box-shadow: 0 4px 10px -4px rgba(37, 99, 235, .6); }
  .smbn-mm-a:hover .smbn-mm-t { color: #2563eb; }
  .smbn-mm-a:focus-visible { outline: 2px solid #2563eb; outline-offset: -2px; }
  .smbn-mm-a[aria-current="page"] .smbn-mm-t { color: #8a6414; }

  .smbn-mm-feature {
    position: relative; display: flex; align-items: flex-end; margin-left: 10px; border-radius: 18px; overflow: hidden;
    background: #0f1e3d; text-decoration: none !important; isolation: isolate;
  }
  .smbn-mm-feature img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform .5s ease; }
  .smbn-mm-feature::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(15, 30, 61, .05) 25%, rgba(15, 30, 61, .72) 60%, #0f1e3d 100%); }
  .smbn-mm-feature:hover img { transform: scale(1.04); }
  .smbn-mm-feature:focus-visible { outline: 3px solid #D4A84B; outline-offset: 2px; }
  .smbn-mm-fcopy { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 20px; }
  .smbn-mm-chip { padding: 5px 10px; border-radius: 999px; background: rgba(255, 255, 255, .14); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25); color: #ffffff; font-size: 10px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; line-height: 1.2; }
  .smbn-mm-ft { font-family: Georgia, "Times New Roman", serif; font-size: 20px; font-weight: 700; line-height: 1.25; color: #ffffff; }
  .smbn-mm-go { font-size: 13.5px; font-weight: 700; color: #ecd08f; }
}

/* 992-1199: tighter items, logo tile only, two-column panel (feature card dropped) so nothing wraps or scrolls sideways */
@media (min-width: 992px) and (max-width: 1199px) {
  .smbn-in { gap: 10px; padding: 0 12px; }
  .smbn-word { display: none; }
  .smbn-a { padding: 0 6px; font-size: 11px; letter-spacing: .02em; gap: 0; }
  .smbn-a .smbn-ic:not(.smbn-dn) { display: none; }
  .smbn-a::after { left: 6px; right: 6px; }
  .smbn-a-split { padding-right: 2px; }
  .smbn-a-split::after { right: 2px; }
  .smbn-caret { width: 18px; margin-right: 2px; }
  .smbn-toggle .smbn-dn { margin-left: 3px; }
  .smbn-ctas { gap: 8px; }
  .smbn-cta { padding: 0 11px; font-size: 12.5px; gap: 6px; }
  .smbn-mm-grid { grid-template-columns: 230px minmax(0, 1fr); min-height: 0; }
  .smbn-mm-feature { display: none; }
}

@media (min-width: 992px) and (prefers-reduced-motion: reduce) {
  .smbn-mm, .smbn-li.is-open > .smbn-mm, .smbn-a::after, .smbn-dn, .smbn-cta, .smbn-mm-feature img { transition: none !important; }
}

/* <=991px: the owner-approved mobile bar (logo, JOIN / SIGN IN, info, green call, navy/gold burger) stays exactly as
   built by smb-mobile-menu.js; only its frame changes to the LNCF look, a full-width white bar with a hairline
   instead of the floating rounded card. */
@media (max-width: 991px) {
  html.smbn-on body > .uui-navbar01_component.w-nav {
    top: 0 !important; margin-left: 0 !important; margin-right: 0 !important;
    width: 100% !important; max-width: 100% !important; border-radius: 0 !important;
    border-bottom: 1px solid rgba(15, 30, 61, .08) !important;
    box-shadow: 0 6px 18px -14px rgba(15, 30, 61, .45) !important;
  }
}