/*
 * Shared site header for the marketing site and the Console.
 *
 * Two byte-identical copies are kept, because each app builds on its own:
 *   public/site-header.css                 (marketing, aperioflow.co.uk)
 *   dev/portal/src/app/site-header.css     (Console, console.aperioflow.co.uk)
 * Edit one, copy it over the other, and run `npm run check:header` from the repo root.
 *
 * Every size is fixed here (no inherited font-size or line-height) so the logo and
 * buttons sit at the same pixel position on both sites.
 */

/* Reserve the scrollbar's width on every page, so short pages (no scrollbar) and
   long pages (scrollbar) centre the header at the same x position. */
html { scrollbar-gutter: stable; }

/* Positioning. Fixed over the hero on marketing; sticky in normal flow on the Console. */
.site-header {
  position: fixed; top: 14px; left: 0; right: 0; z-index: 50;
  width: min(1200px, 100% - 24px);
  margin-inline: auto;
}
.site-header--sticky { position: sticky; margin-top: 14px; }

/* The pill bar itself. 58px tall: 10px + 36px button + 10px + 2px border. */
.site-nav {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 58px;
  padding: 10px 10px 10px 18px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  background: rgba(8, 10, 16, 0.55);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  font-size: 15px; line-height: 1.6;
  transition: background 0.3s, border-color 0.3s;
}
.site-nav.scrolled { background: rgba(8, 10, 16, 0.85); border-color: rgba(255, 255, 255, 0.16); }

/* Logo: mark + wordmark. */
.site-brand {
  display: flex; align-items: center; gap: 10px; flex-shrink: 0;
  color: #eef1f8; text-decoration: none;
  font-weight: 500; font-size: 19px; line-height: 1.6; letter-spacing: -0.02em;
  border-radius: 999px;
}
.site-brand svg { display: block; width: 26px; height: 26px; flex-shrink: 0; color: #eef1f8; }
.site-brand b {
  font-weight: 700;
  background: linear-gradient(100deg, #38e8ff 0%, #7c5cff 60%, #ff5ce1 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* Header buttons. 36px tall: 14px text + 2 x 10px padding + 2px border. */
.site-nav-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 18px;
  border: 1px solid transparent; border-radius: 999px;
  font-family: inherit; font-size: 14px; font-weight: 600; line-height: 1; letter-spacing: -0.01em;
  color: #eef1f8; background: none; white-space: nowrap; text-decoration: none; cursor: pointer;
  transition: transform 0.25s cubic-bezier(0.2, 0.7, 0.1, 1), box-shadow 0.25s, background 0.25s, border-color 0.25s;
}
.site-nav-btn--primary {
  background: #eef1f8; color: #05060a;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2), 0 8px 30px -8px rgba(56, 232, 255, 0.55);
}
.site-nav-btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.3), 0 14px 40px -8px rgba(56, 232, 255, 0.8);
}
.site-nav-btn--ghost { border-color: rgba(255, 255, 255, 0.16); background: rgba(255, 255, 255, 0.03); }
.site-nav-btn--ghost:hover { border-color: #38e8ff; background: rgba(255, 255, 255, 0.06); transform: translateY(-2px); }

@media (max-width: 640px) {
  .site-brand { font-size: 17px; }
}