/* Shared top-bar chrome for every page on the marketing site.
 *
 * The brand mark and the app CTA are the two things a visitor sees on every
 * page, so they are defined once here and loaded by both the landing page
 * (styles.css) and the server-rendered quotes pages (quotes.css). They had
 * drifted badly: the quotes wordmark's dot was 5px against the landing's 7px,
 * and the quotes "Join" button was a solid ink pill where the landing's is an
 * outlined one — so the same brand read as two different sites.
 *
 * Load this BEFORE the page stylesheet, so a page can still override layout
 * (the quotes topbar wraps and carries more links) without having to restate
 * the mark itself.
 *
 * Layout that legitimately differs — `.topbar` width and padding, `.topnav`
 * gaps, the quotes section's `aria-current` underline — stays in the page
 * stylesheets. Only identity lives here.
 */

/* The quotes stylesheet has no pulse token of its own; declaring it here keeps
   the shared rules self-contained on both pages. */
:root {
  --motion-pulse: 1200ms;
}

/* This stylesheet is also loaded inside <top-bar>'s shadow root. The page
   stylesheets retain their legacy .topbar layout, while the component keeps
   its full-width chrome self-contained. */
:host {
  display: block;
  width: 100%;
  position: relative;
  z-index: 10;
}

:host .topbar {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  width: 100%;
  min-height: 64px;
  padding: 10px 24px;
  background: rgba(244, 239, 230, 0.92);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--hairline);
}

:host .topnav {
  display: flex;
  align-items: center;
  gap: 4px 22px;
  flex-wrap: wrap;
  font-family: var(--font-body);
  font-size: 14px;
}

:host ::slotted(a[slot="link"]) {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--ink2);
  text-decoration: none;
  transition: color var(--motion-fast) var(--ease-out);
}

:host ::slotted(a[slot="link"]:hover) {
  color: var(--clay);
}

:host ::slotted([slot="wordmark-section"]) {
  margin-left: 7px;
  color: var(--ink2);
  font-family: var(--font-display);
  font-size: 21px;
  font-style: normal;
  font-weight: 400;
}

/* ── Wordmark ────────────────────────────────────────────────── */

.wordmark {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 21px;
  color: var(--ink);
  white-space: nowrap;
}

/* The quotes stylesheet underlines links on hover; the mark is not that kind
   of link. */
.wordmark:hover {
  color: var(--ink);
  text-decoration: none;
}

.wordmark .dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-left: 6px;
  border-radius: 50%;
  background: var(--clay);
  vertical-align: 6px;
}

.wordmark-svg {
  display: block;
  width: 145px;
  height: 28px;
  overflow: visible;
}

.wordmark-svg text {
  fill: currentColor;
  font-family: var(--font-display);
  font-size: 21px;
  font-style: italic;
  font-weight: 500;
}

.wordmark-svg circle {
  fill: var(--clay);
}

/* Section name after the product name — "sharpthought quotes". Lighter and
   upright, so it reads as a place within the product rather than part of the
   brand itself. */
.wordmark-section {
  font-style: normal;
  font-weight: 400;
  color: var(--ink2);
  margin-left: 7px;
}

/* ── App CTA ─────────────────────────────────────────────────── */

.topnav-app {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--hairline);
  border-radius: 12px;
  padding: 8px 15px;
  min-height: 44px;
  color: var(--ink);
}

.topnav-app:hover {
  border-color: var(--clay);
  text-decoration: none;
}

/* Avatar/icon hint, shown only once <top-bar> confirms a live session
   via the st_session_hint cookie (logged-out default: empty, collapsed). */
.topnav-app-avatar {
  display: none;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  flex: none;
  border-radius: 999px;
  overflow: hidden;
  background: var(--paper2);
  color: var(--ink2);
  /* Sizing for the fallback initial when there is no bundled avatar. */
  font-family: var(--font-body);
  font-size: 9px;
  font-weight: 700;
  line-height: 1;
}

.topnav-app-avatar img {
  display: block;
  width: 100%;
  height: 100%;
}

.topnav-app.st-logged-in .topnav-app-avatar {
  display: inline-flex;
}

.topnav-app.st-logged-in {
  font-weight: 500;
}

body.st-logged-in .topnav-app.st-logged-in {
  font-weight: 500;
}

/* ── Signed-in dot ───────────────────────────────────────────── */
/* Sage dot on the app link once a session cookie is present, pulsing gently
   to say "you are already signed in". Asserted by apps/web/src/styles.test.ts. */

@keyframes st-dot-pulse {
  0%, 100% { opacity: 0.55; transform: scale(0.9); }
  50%      { opacity: 1;    transform: scale(1.12); }
}

body.st-logged-in .topnav-app .topnav-app-avatar::after {
  content: "";
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--sage);
  box-shadow: 0 0 0 2px var(--ink);
}

body.st-logged-in .topnav-app .topnav-app-avatar {
  position: relative;
  animation: st-dot-pulse var(--motion-pulse) ease-in-out infinite;
}

.topnav-app.st-logged-in .topnav-app-avatar {
  position: relative;
  animation: st-dot-pulse var(--motion-pulse) ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  body.st-logged-in .topnav-app .topnav-app-avatar {
    animation: none;
  }

  :host ::slotted(a[slot="link"]) {
    transition: none;
  }

  .topnav-app.st-logged-in .topnav-app-avatar {
    animation: none;
  }
}

@media (max-width: 640px) {
  :host .topbar {
    min-height: 56px;
    padding: 6px 16px;
  }

  :host .topnav {
    gap: 2px 14px;
  }
}

/* One navigation layout across home, learning and the catalog. */
/* Reserve the closed header's space through upgrade and shadow stylesheet loading. */
top-bar:not(:defined), top-bar[data-styles-loading] { display:block; min-height:86px; }
:host { --font-body:"Manrope",system-ui,sans-serif; --font-display:"Newsreader",Georgia,serif; --ink:#292820; --ink2:#59584d; --clay:#a74f30; --hairline:rgba(41,40,32,.16); }
:host .topbar { max-width:1160px; margin:0 auto; padding:17px 28px; min-height:86px; background:transparent; gap:20px; flex-wrap:nowrap; }
:host .topnav { gap:25px; flex-wrap:nowrap; font-size:12px; }
:host ::slotted(a[aria-current="page"]) { color:var(--clay); text-decoration:underline; text-underline-offset:7px; }
:host ::slotted([slot="wordmark-section"]) { display:none; }
:host .topnav-app { box-sizing:border-box; color:#fbf7ef; background:var(--ink); border-color:var(--ink); border-radius:9px; min-height:44px; font:600 12px var(--font-body); text-decoration:none; padding:12px 17px; }
:host .topnav-app:hover { background:#454635; }
:host a:focus-visible,:host button:focus-visible,:host ::slotted(a:focus-visible) { outline:3px solid var(--clay); outline-offset:4px; }
.menu-toggle { display:none; border:1px solid var(--hairline); background:transparent; border-radius:8px; padding:10px 14px; font:500 12px var(--font-body); min-height:44px; color:var(--ink); }
.menu-toggle span { margin-left:8px; }
@media(max-width:760px) {
 top-bar:not(:defined), top-bar[data-styles-loading] { min-height:74px; }
 :host .topbar { flex-wrap:wrap; min-height:74px; padding:14px 22px; gap:10px; }
 .menu-toggle { display:block; cursor:pointer; }
 :host .topnav { display:none; flex-basis:100%; flex-direction:column; align-items:stretch; gap:2px; padding:12px 0 6px; }
 :host .topnav.is-open { display:flex; }
 :host ::slotted(a[slot="link"]) { padding:4px 0; }
 :host .topnav-app { margin-top:10px; justify-content:center; }
}

/* Desktop keeps the bar pinned while a long catalog scrolls under it.
   Phones are left alone on purpose: the open menu panel expands the bar
   to most of a short screen, and pinning that would leave nothing to
   read behind it. */
@media (min-width: 761px) {
  :host {
    position: sticky;
    top: 0;
  }
}