/* ------------------------------------------------------------------ */
/* Shared site nav — the ONE navbar used by every page on              */
/* ai-visibility.sona.com (homepage, results, blog).                   */
/*                                                                     */
/* Pair it with /js/site-nav.js and the markup block documented at the  */
/* bottom of this file. Extracted from home.css so the nav has a single */
/* source of truth instead of a copy per page.                         */
/*                                                                     */
/* Requires: a Sona tokens stylesheet loaded first (either              */
/* /css/tokens.css or /sona-design-tokens/tokens.css — both define the  */
/* --sona-* primitives this file resolves against).                    */
/*                                                                     */
/* Self-contained by design: every alias it needs is (re)declared on    */
/* .sticky-head below rather than :root, so dropping this file into a   */
/* page cannot leak values into — or inherit broken ones from — that    */
/* page's own stylesheet.                                              */
/* ------------------------------------------------------------------ */

.sticky-head {
  /* Brand / core */
  --nav-navy: var(--sona-primary-400);
  --nav-navy-hover: var(--sona-primary-500);
  --nav-navy-mid: var(--sona-primary-300);
  --nav-gradient-navy: linear-gradient(
    279deg,
    var(--sona-primary-400) 6.59%,
    var(--sona-primary-700) 32.47%,
    var(--sona-primary-400) 49.58%,
    var(--sona-primary-700) 67.11%,
    var(--sona-primary-400) 93.41%
  );

  /* Surfaces */
  --nav-surface-light: var(--sona-primary-10);
  --nav-surface-card: var(--sona-surface-card);

  /* Pills / chips */
  --nav-pill-bg: var(--sona-primary-40);
  --nav-pill-border: var(--sona-primary-60);
  --nav-pill-hover: var(--sona-primary-50);

  /* Text */
  --nav-text-heading: var(--sona-text-heading);
  --nav-text-body: var(--sona-text-body);
  --nav-text-muted: var(--sona-text-muted);
  --nav-text-on-dark: var(--sona-text-on-dark-heading);
  --nav-text-announce: var(--sona-neutral-05);

  /* Borders */
  --nav-border-light: var(--sona-border-card);
  --nav-border-hair: var(--sona-border-hair);

  /* Layout / radii / shadow */
  --nav-max-content: 1440px;
  --nav-radius-pill: 9999px;
  --nav-radius-md: 8px;
  --nav-shadow-dropdown: 0px 4px 12px -2px rgba(10, 13, 18, 0.12);

  /* Motion / type */
  --nav-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --nav-dur: 200ms;
  --nav-font: "Satoshi", system-ui, -apple-system, "Segoe UI", sans-serif;

  position: sticky;
  top: 0;
  z-index: 100;
}

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

/* ------------------------------ Announcement ------------------------------ */

.sticky-head .announce {
  width: 100%;
  text-align: center;
  padding: 12px 16px;
  background: var(--nav-gradient-navy);
  color: var(--nav-text-announce);
  font-family: var(--nav-font);
  font-size: 14px;
}
.sticky-head .announce a { color: var(--nav-text-announce); font-weight: 500; text-decoration: none; }
.sticky-head .announce a:hover { color: var(--nav-text-announce); text-decoration: underline; }

/* --------------------------------- Navbar --------------------------------- */

.sticky-head .nav {
  width: 100%;
  max-width: 100vw;
  background: var(--nav-surface-light);
  border-bottom: 1px solid var(--nav-border-hair);
  padding: 0 clamp(16px, 6vw, 104px);
  position: relative;
  box-shadow: 0 1px 0 rgba(29, 45, 130, 0.02);
  font-family: var(--nav-font);
}
.sticky-head .nav-inner {
  max-width: var(--nav-max-content);
  margin: 0 auto;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.sticky-head .nav-logo { flex-shrink: 0; display: flex; }
.sticky-head .nav-logo img { height: 30px; width: auto; max-width: 100%; }

.sticky-head .nav-links,
.sticky-head .nav-actions { display: flex; align-items: center; gap: 8px; }

.sticky-head .nav-plain {
  display: inline-flex;
  align-items: center;
  padding: 8px 12px;
  border-radius: var(--nav-radius-pill);
  font-size: 14px;
  font-weight: 500;
  color: var(--nav-text-body);
  text-decoration: none;
  white-space: nowrap;
}
.sticky-head .nav-plain:hover { color: var(--nav-text-body); background: var(--nav-pill-bg); }

.sticky-head .nav-dd { position: relative; height: 64px; display: flex; align-items: center; }
.sticky-head .nav-dd-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 8px 12px;
  border-radius: var(--nav-radius-pill);
  border: none;
  background: transparent;
  color: var(--nav-text-body);
  font-size: 14px;
  font-weight: 500;
  font-family: var(--nav-font);
  cursor: pointer;
  white-space: nowrap;
  transition: background-color var(--nav-dur);
}
.sticky-head .nav-dd:hover .nav-dd-btn { background: var(--nav-pill-bg); }
.sticky-head .nav-dd-btn svg { transition: transform var(--nav-dur) var(--nav-ease); }
.sticky-head .nav-dd:hover .nav-dd-btn svg { transform: rotate(180deg); }

.sticky-head .nav-dd-wrap {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  padding-top: 4px;
  z-index: 50;
}
.sticky-head .nav-dd:hover .nav-dd-wrap { display: block; }
.sticky-head .nav-dd-wrap.center { left: 50%; transform: translateX(-50%); }

.sticky-head .nav-dd-menu {
  background: var(--nav-surface-card);
  border: 1px solid var(--nav-border-light);
  border-radius: var(--nav-radius-md);
  box-shadow: var(--nav-shadow-dropdown);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.sticky-head .dd-label { padding: 4px 12px; font-size: 14px; font-weight: 500; color: var(--nav-text-muted); }
.sticky-head .dd-link {
  display: flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: var(--nav-radius-pill);
  white-space: nowrap;
  font-size: 14px;
  font-weight: 500;
  color: var(--nav-text-heading);
  text-decoration: none;
  transition: background-color var(--nav-dur) var(--nav-ease);
}
.sticky-head .dd-link:hover { background: var(--nav-pill-bg); color: var(--nav-text-heading); }
.sticky-head .dd-link.active { background: var(--nav-navy-mid); color: var(--nav-text-on-dark); }
.sticky-head .dd-link.active:hover { color: var(--nav-text-on-dark); }
.sticky-head .dd-sep { border-top: 1px solid var(--nav-border-light); margin: 4px 0; }

.sticky-head .switcher-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border-radius: var(--nav-radius-pill);
  background: var(--nav-pill-bg);
  border: 1px solid var(--nav-pill-border);
  padding: 9px 12px;
  font-family: var(--nav-font);
  font-size: 14px;
  font-weight: 500;
  color: var(--nav-text-body);
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--nav-dur);
}
.sticky-head .nav-dd:hover .switcher-btn { background: var(--nav-pill-hover); }

.sticky-head .book-demo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 16px;
  border-radius: var(--nav-radius-pill);
  font-weight: 500;
  font-size: 14px;
  white-space: nowrap;
  text-decoration: none;
  background: var(--nav-navy);
  color: var(--nav-text-on-dark);
  transition: background-color var(--nav-dur) var(--nav-ease);
}
.sticky-head .book-demo:hover { background: var(--nav-navy-hover); color: var(--nav-text-on-dark); }

.sticky-head .nav-mobile-btn {
  display: none;
  padding: 8px;
  border: none;
  background: transparent;
  color: var(--nav-text-body);
  cursor: pointer;
}

.sticky-head .mobile-menu {
  display: none;
  border-top: 1px solid var(--nav-border-hair);
  padding: 12px 20px 20px;
  flex-direction: column;
  gap: 4px;
  font-family: var(--nav-font);
}
.sticky-head .mobile-menu.open { display: flex; }
.sticky-head .m-sec-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  color: var(--nav-text-body);
  font-family: var(--nav-font);
}
.sticky-head .m-sec-btn svg { transition: transform var(--nav-dur) var(--nav-ease); }
.sticky-head .m-sec.open .m-sec-btn svg { transform: rotate(180deg); }
.sticky-head .m-sec-items {
  display: none;
  flex-direction: column;
  gap: 2px;
  padding-left: 12px;
  border-left: 1px solid var(--nav-border-hair);
  margin-left: 4px;
  margin-bottom: 8px;
}
.sticky-head .m-sec.open .m-sec-items { display: flex; }
.sticky-head .m-sec-items a { padding: 6px 0; font-size: 13px; color: var(--nav-text-muted); text-decoration: none; }
.sticky-head .m-link { padding: 10px 0; font-size: 14px; font-weight: 500; color: var(--nav-text-body); text-decoration: none; }
.sticky-head .m-sep { border-top: 1px solid var(--nav-border-hair); margin: 8px 0; }
.sticky-head .mobile-menu .book-demo { margin-top: 8px; }

@media (max-width: 1099px) {
  .sticky-head .nav-links,
  .sticky-head .nav-actions { display: none !important; }
  .sticky-head .nav-mobile-btn { display: inline-flex !important; }
}

/* ---------------------------------------------------------------------------
   MARKUP CONTRACT — keep every page's <header class="sticky-head"> identical
   to the block in index.html. If a nav link changes, it must change in:
     public/index.html
     public/results.html
     public/blog/index.html
     public/blog/<slug>/index.html   (one per post)
   There is no build step or templating on this site, so the markup is
   duplicated by necessity — the CSS and JS below/beside it are not.
   --------------------------------------------------------------------------- */