/*
 * Public navigation polish.
 * The cinematic landing page and the shared public-page shell use separate nav
 * components; keep both visually aligned without changing authentication routes.
 */

/* Clear owner-management entry points on desktop/public chrome. */
.lh-nav-login,
.saas-site-login {
  font-size: 0 !important;
  white-space: nowrap;
}

.lh-nav-login::after,
.saas-site-login::after {
  content: "Login";
  font-size: 12px;
  font-weight: 850;
  letter-spacing: -.01em;
}

.saas-site-login::after { font-size: 13px; }

.lh-nav-cta,
.saas-site-cta {
  gap: 7px !important;
  font-size: 0 !important;
  white-space: nowrap;
}

.lh-nav-cta > i,
.saas-site-cta > i {
  display: none !important;
}

.lh-nav-cta::before,
.saas-site-cta::before {
  content: "\f0e7";
  font-family: "Font Awesome 6 Free";
  font-size: 12px;
  font-weight: 900;
}

.lh-nav-cta::after,
.saas-site-cta::after {
  content: "Start Free";
  font-size: 12px;
  font-weight: 850;
}

.saas-site-cta::after { font-size: 13px; }

/* Management entry actions inside both mobile menus. */
.lh-mobile-menu a[href*="/login"],
.saas-site-mobile-menu a[href*="/login"] {
  margin-top: 5px;
  border: 1px solid rgba(148, 163, 184, .18);
  background: rgba(255, 255, 255, .035);
  font-size: 0 !important;
  text-align: center;
}

.lh-mobile-menu a[href*="/login"]::after,
.saas-site-mobile-menu a[href*="/login"]::after {
  content: "Login";
  font-size: 13px;
  font-weight: 850;
}

.lh-mobile-menu a[href*="/register"],
.lh-mobile-menu a[href*="/signup"],
.saas-site-mobile-menu a[href*="/register"],
.saas-site-mobile-menu a[href*="/signup"] {
  border: 1px solid rgba(255, 255, 255, .15);
  color: #fff !important;
  background: linear-gradient(135deg, #6258f0, #8665ff) !important;
  box-shadow: 0 12px 28px rgba(98, 88, 240, .24);
  font-size: 0 !important;
  text-align: center;
}

.lh-mobile-menu a[href*="/register"]::after,
.lh-mobile-menu a[href*="/signup"]::after,
.saas-site-mobile-menu a[href*="/register"]::after,
.saas-site-mobile-menu a[href*="/signup"]::after {
  content: "Start Free";
  font-size: 13px;
  font-weight: 900;
}

/* Font Awesome Free does not consistently expose the Pro-style grid-2 glyph. */
.lh-page .fa-grid-2::before {
  content: "▦" !important;
  font-family: Arial, sans-serif !important;
  font-weight: 800 !important;
}

@media (max-width: 680px) {
  /* Cinematic landing: restore the brand that the page's older mobile rule hid. */
  html.librahub-cinematic .lh-nav {
    min-height: 64px !important;
    justify-content: space-between !important;
    gap: 8px !important;
    padding: 7px 8px 7px 10px !important;
    border-color: rgba(151, 170, 211, .18) !important;
    background:
      radial-gradient(circle at 8% 10%, rgba(124, 108, 255, .14), transparent 34%),
      rgba(3, 8, 21, .92) !important;
    box-shadow: 0 16px 44px rgba(0, 0, 0, .34), inset 0 1px 0 rgba(255, 255, 255, .07) !important;
    -webkit-backdrop-filter: blur(18px) saturate(125%) !important;
    backdrop-filter: blur(18px) saturate(125%) !important;
  }

  html.librahub-cinematic .lh-nav > .lh-brand {
    display: inline-flex !important;
    min-width: 0;
    max-width: 47%;
    flex: 0 1 auto;
    gap: 7px !important;
  }

  html.librahub-cinematic .lh-nav .lh-brand-mark {
    width: 39px !important;
    height: 39px !important;
    flex: 0 0 39px !important;
    padding: 3px;
    border: 1px solid rgba(255, 255, 255, .11) !important;
    border-radius: 13px !important;
    background: rgba(255, 255, 255, .055) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06) !important;
  }

  html.librahub-cinematic .lh-nav .lh-brand-book {
    width: 100% !important;
    height: 100% !important;
    filter: drop-shadow(0 6px 13px rgba(98, 87, 239, .35)) !important;
  }

  html.librahub-cinematic .lh-nav .lh-brand-copy {
    display: grid !important;
    min-width: 0;
  }

  html.librahub-cinematic .lh-nav .lh-brand-copy strong {
    overflow: hidden;
    font-size: 14.5px !important;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  html.librahub-cinematic .lh-nav .lh-brand-copy small {
    margin-top: 4px !important;
    overflow: hidden;
    color: #8e9bb5 !important;
    font-size: 7.5px !important;
    letter-spacing: .08em !important;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  html.librahub-cinematic .lh-nav-actions {
    min-width: 0;
    margin-left: auto;
    gap: 5px !important;
  }

  html.librahub-cinematic .lh-nav-login {
    display: none !important;
  }

  html.librahub-cinematic .lh-nav-cta {
    display: inline-flex !important;
    min-height: 40px !important;
    padding: 0 10px !important;
    border-radius: 12px !important;
  }

  html.librahub-cinematic .lh-nav-cta::before,
  html.librahub-cinematic .lh-nav-cta::after {
    font-size: 11px !important;
  }

  html.librahub-cinematic .lh-menu-toggle {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px;
    border-radius: 12px !important;
    background: rgba(255, 255, 255, .065) !important;
  }

  html.librahub-cinematic .lh-mobile-menu {
    inset: 82px 10px auto !important;
    padding: 12px !important;
    border-color: rgba(151, 170, 211, .17) !important;
    border-radius: 19px !important;
    background:
      radial-gradient(circle at 90% 0%, rgba(124, 108, 255, .13), transparent 32%),
      rgba(3, 8, 21, .97) !important;
    box-shadow: 0 24px 70px rgba(0, 0, 0, .42) !important;
  }

  html.librahub-cinematic .lh-mobile-menu a {
    min-height: 46px !important;
    line-height: 46px !important;
  }

  /* Match the landing page's white floating navigation on other public pages. */
  body.public-surface:not(.cinematic-landing-page) .saas-site-nav {
    width: calc(100% - 16px) !important;
    min-height: 68px !important;
    justify-content: space-between !important;
    gap: 8px !important;
    padding: 8px 9px 8px 11px !important;
    border: 1px solid rgba(99, 102, 241, .16) !important;
    border-radius: 20px !important;
    background:
      radial-gradient(circle at 10% 0%, rgba(99, 102, 241, .09), transparent 40%),
      rgba(255, 255, 255, .98) !important;
    box-shadow: 0 12px 34px rgba(15, 23, 42, .11), inset 0 1px 0 rgba(255, 255, 255, .98) !important;
  }

  body.public-surface:not(.cinematic-landing-page) .saas-site-nav > .saas-site-brand {
    display: inline-flex !important;
    min-width: 0;
    max-width: calc(100% - 56px) !important;
    flex: 0 1 auto;
    gap: 9px !important;
  }

  body.public-surface:not(.cinematic-landing-page) .saas-site-brand-mark {
    width: 43px !important;
    height: 43px !important;
    flex: 0 0 43px !important;
    padding: 4px !important;
    border: 1px solid rgba(99, 102, 241, .13) !important;
    border-radius: 14px !important;
    background: linear-gradient(145deg, #fff, #eef2ff) !important;
    box-shadow: 0 8px 20px rgba(99, 102, 241, .10) !important;
  }

  body.public-surface:not(.cinematic-landing-page) .saas-site-brand-copy {
    display: grid !important;
    min-width: 0;
  }

  body.public-surface:not(.cinematic-landing-page) .saas-site-brand-copy strong {
    overflow: hidden;
    color: #111827 !important;
    font-size: 17px !important;
    letter-spacing: -.04em !important;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body.public-surface:not(.cinematic-landing-page) .saas-site-brand-copy small {
    display: block !important;
    margin-top: 4px !important;
    overflow: hidden;
    color: #667085 !important;
    font-size: 8px !important;
    letter-spacing: .075em !important;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body.public-surface:not(.cinematic-landing-page) .saas-site-actions {
    min-width: 0;
    margin-left: auto;
  }

  body.public-surface:not(.cinematic-landing-page) .saas-site-login,
  body.public-surface:not(.cinematic-landing-page) .saas-site-cta {
    display: none !important;
  }

  body.public-surface:not(.cinematic-landing-page) .saas-site-menu-toggle {
    width: 43px !important;
    height: 43px !important;
    min-width: 43px;
    border: 1px solid rgba(99, 102, 241, .18) !important;
    border-radius: 13px !important;
    color: #4338ca !important;
    background: linear-gradient(145deg, #f8faff, #eef2ff) !important;
    box-shadow: 0 8px 18px rgba(99, 102, 241, .10) !important;
  }

  body.public-surface:not(.cinematic-landing-page) .saas-site-mobile-menu {
    inset: 86px 8px auto !important;
    max-height: calc(100svh - 98px);
    overflow-y: auto;
    padding: 14px !important;
    border: 1px solid rgba(99, 102, 241, .16) !important;
    border-radius: 22px !important;
    background:
      radial-gradient(circle at 96% 0%, rgba(99, 102, 241, .10), transparent 31%),
      linear-gradient(180deg, #fff, #f8fafc) !important;
    box-shadow: 0 24px 70px rgba(15, 23, 42, .18) !important;
  }

  body.public-surface:not(.cinematic-landing-page) .saas-site-mobile-menu a {
    min-height: 46px !important;
    color: #334155;
    line-height: 46px !important;
  }

  body.public-surface:not(.cinematic-landing-page) .saas-site-mobile-menu a:hover {
    color: #4338ca;
    background: #eef2ff;
  }

  body.public-surface:not(.cinematic-landing-page) .saas-site-mobile-menu a[href*="/login"] {
    border-color: #dbe3ef;
    color: #334155;
    background: #fff;
  }
}

@media (max-width: 390px) {
  html.librahub-cinematic .lh-nav .lh-brand-copy small {
    display: none !important;
  }

  html.librahub-cinematic .lh-nav > .lh-brand {
    max-width: 43% !important;
  }

  html.librahub-cinematic .lh-nav-cta {
    padding-inline: 8px !important;
  }
}