/*
 * LiveHost unified site header.
 *
 * One header, three properties. Used by:
 *   livehost.com               (marketing layout)
 *   api.livehost.com           (developers layout)
 *   shopify-app.livehost.com   (Shopify Remix public routes)
 *
 * Class names are .site-header / .site-header-* — deliberately distinct
 * from Webflow's .nav-wrap / .navbar so the two never collide while we're
 * mid-migration off Webflow. Colours come from brand-tokens.css so theme
 * preview variants flow through automatically.
 *
 * Exposes --lh-header-offset so Tailwind layouts can do
 *   min-h-[calc(100vh-var(--lh-header-offset,0px)-…)]
 * without needing to know whether the theme-preview bar is also showing.
 */

:root {
  --lh-header-h: 56px;                 /* the floating pill's own height */
  --lh-header-gap: 14px;               /* gap above the pill */
  --lh-header-offset: calc(var(--lh-header-gap) + var(--lh-header-h) + 14px);
}
@media (min-width: 768px) {
  :root { --lh-header-h: 60px; --lh-header-gap: 18px; }
}

html body { padding-top: var(--lh-header-offset); }

/* Self-contained box model. The Rails consumers (marketing/api/apply/signup)
   inherit a global `box-sizing: border-box` from Tailwind's preflight, but the
   off-Rails Shopify app loads no such reset — so the pill rendered as
   content-box there (padding + border added to its width/height), making the
   bar wider/taller and shifting it between properties. Scope border-box to the
   header's own subtree so it renders identically everywhere regardless of the
   host page's CSS. No-op where a global reset already applies. */
.site-header, .site-header *, .site-header *::before, .site-header *::after,
.site-header-mobile, .site-header-mobile *, .site-header-mobile *::before, .site-header-mobile *::after {
  box-sizing: border-box;
}

/* Floating-pill header (matches the Webflow nav): a transparent fixed
   container holding a centred rounded capsule with a soft shadow. The
   container is pointer-events:none so the gaps around the pill don't
   swallow clicks; the pill itself re-enables them. */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 9000;
  padding: var(--lh-header-gap) 16px 0;
  box-sizing: border-box;
  background: transparent;
  border: none;
  pointer-events: none;
  font-family: 'Geist', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  /* Match the Webflow body tracking (site.css sets -0.03em on body, which the
     header inherits on the marketing layout). The apply/signup/developers
     layouts don't load site.css, so without this the header reverts to normal
     tracking and reads wider than on livehost.com. Set it on the header itself
     so it's identical across every property. */
  letter-spacing: -0.03em;
}

.site-header-inner {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 16px;
  height: var(--lh-header-h);
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 10px 0 22px;
  background: var(--lh-surface, #ffffff);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 999px;
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.10), 0 2px 6px rgba(0, 0, 0, 0.04);
}
@media (min-width: 768px) {
  .site-header-inner { gap: 20px; padding: 0 12px 0 26px; }
}

.site-header-brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  text-decoration: none;
  color: var(--lh-ink, #212121);
}
.site-header-brand:focus-visible {
  outline: 2px solid var(--lh-ink, #212121);
  outline-offset: 4px;
  border-radius: 4px;
}
.site-header-logo {
  height: 36px;
  width: auto;
  display: block;
}
@media (min-width: 768px) {
  .site-header-logo { height: 44px; }
}

/* "BETA" badge hugging the bottom-right corner of the logo — mirrors the
   corner badge on the app.livehost.com sidebar logo (black pill, white bold
   micro-text, nudged out past the corner). The wrap is the positioning
   context so the badge tracks the logo, not the whole brand link. */
.site-header-logo-wrap {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
}
.site-header-beta {
  position: absolute;
  bottom: 0;
  right: 0;
  transform: translate(33%, calc(25% - 4px));
  padding: 2px 4px;
  background: var(--lh-ink, #000);
  color: #fff;
  font-size: 9px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0.04em;
  white-space: nowrap;
  border-radius: 4px;
  pointer-events: none;
}

.site-header-nav {
  display: none;
  align-items: center;
  gap: 4px;
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.site-header-nav::-webkit-scrollbar { display: none; }
@media (min-width: 900px) {
  .site-header-nav { display: flex; gap: 8px; }
}

.site-header-link {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  height: 36px;
  font-size: 15px;
  font-weight: 500;
  color: var(--lh-ink-soft, #525252);
  text-decoration: none;
  border-radius: 8px;
  white-space: nowrap;
  transition: color 120ms, background 120ms;
}
.site-header-link:hover {
  color: var(--lh-ink, #212121);
  background: var(--lh-cream-2, #f0ece6);
}
.site-header-link[aria-current="page"] {
  color: var(--lh-ink, #212121);
  background: var(--lh-cream-2, #f0ece6);
}
.site-header-link:focus-visible {
  outline: 2px solid var(--lh-ink, #212121);
  outline-offset: 2px;
}

.site-header-cta-group {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  flex-shrink: 0;
}
.site-header-signin {
  display: none;
  align-items: center;
  padding: 0 12px;
  height: 36px;
  font-size: 15px;
  font-weight: 500;
  color: var(--lh-ink, #212121);
  text-decoration: none;
  border-radius: 8px;
  transition: background 120ms;
}
.site-header-signin:hover { background: var(--lh-cream-2, #f0ece6); }
.site-header-signin:focus-visible {
  outline: 2px solid var(--lh-ink, #212121);
  outline-offset: 2px;
}
@media (min-width: 640px) {
  .site-header-signin { display: inline-flex; }
}

/* Black pill CTA with an arrow-circle, matching the Webflow nav + the hero
   "For brands" button — the header's main "oomph". */
.site-header-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 6px 0 18px;
  height: 40px;
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  background: var(--lh-ink, #212121);
  border: none;
  border-radius: 999px;
  text-decoration: none;
  white-space: nowrap;
  transition: background 120ms, transform 120ms;
}
/* White arrow-circle + bold arrow SVG — matches the Webflow .primary-button
   ("Contact us" / "For brands") .button-icon-wrap exactly. */
.site-header-cta-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: #fff;
  color: var(--lh-ink, #212121);
  flex-shrink: 0;
}
.site-header-cta-icon svg { display: block; width: 16px; height: 16px; }
.site-header-cta:hover { background: #000; }
.site-header-cta:active { transform: translateY(1px); }
.site-header-cta:focus-visible {
  outline: 2px solid var(--lh-ink, #212121);
  outline-offset: 2px;
}

/* Mobile menu toggle — uses the CSS-only :target trick:
   the hamburger anchor links to #site-header-menu, which is shown via :target. */
.site-header-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  color: var(--lh-ink, #212121);
  text-decoration: none;
  cursor: pointer;
  background: transparent;
  border: none;
}
.site-header-toggle:hover { background: var(--lh-cream-2, #f0ece6); }
.site-header-toggle:focus-visible {
  outline: 2px solid var(--lh-ink, #212121);
  outline-offset: 2px;
}
@media (min-width: 900px) {
  .site-header-toggle { display: none; }
}

.site-header-mobile {
  display: none;
  position: fixed;
  top: calc(var(--lh-header-gap) + var(--lh-header-h) + 8px);
  left: 12px; right: 12px;
  z-index: 8999;
  background: var(--lh-surface, #ffffff);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 20px;
  box-shadow: 0 12px 34px rgba(0,0,0,0.12);
  padding: 8px 12px 16px;
}
.site-header-mobile:target { display: block; }
.site-header-mobile-link {
  display: block;
  padding: 12px 16px;
  font-size: 16px;
  font-weight: 500;
  color: var(--lh-ink, #212121);
  text-decoration: none;
  border-radius: 8px;
}
.site-header-mobile-link[aria-current="page"] { background: var(--lh-cream-2, #f0ece6); }
.site-header-mobile-link:hover { background: var(--lh-cream-2, #f0ece6); }
.site-header-mobile-close {
  display: block;
  text-align: center;
  padding: 12px;
  margin-top: 8px;
  font-size: 13px;
  color: var(--lh-ink-soft, #525252);
  text-decoration: none;
  border-radius: 8px;
}

/* Theme-preview bar (when active) sits above the site-header, pushing it
   down by 36px and adding to the body padding. */
body.lh-with-theme-preview { padding-top: calc(var(--lh-header-offset) + 36px); }
body.lh-with-theme-preview .site-header { top: 36px; }
body.lh-with-theme-preview .site-header-mobile { top: calc(var(--lh-header-gap) + var(--lh-header-h) + 36px + 8px); }