/* ══════════════════════════════════════════════════════════════════════
   TAVVLO HOME — header, matched to the Attio site header

   The nav was already a loose approximation (36px pill targets, 15px
   links, a 10px radius). This closes the gap to the measured original:
   the page gutter, the header's border and translucency, the logo size,
   the logo-to-links distance, the exact ghost hover colours, the action
   gap, and the announcement strip's type and shadow.

   Loaded after tavvlo-home.css so it wins on the rules it restates, and
   like that file it is only linked from index.html — the rest of the site
   keeps the existing header.

   What is deliberately NOT copied: the source's header is sticky and never
   leaves. This one stays position:absolute over the hero and scrolls away.
   Changing that would move the hero out from under it and change what the
   platform section's sticky nav has to clear, so it is left alone.
   ══════════════════════════════════════════════════════════════════════ */

:root{
  --tvn-white-100:#fff;
  --tvn-white-300:#f3f4f6;
  --tvn-white-400:#edeff3;
  --tvn-white-500:#e4e7ec;   /* subtle-stroke: the header rule */
  --tvn-black-200:#202124;
  --tvn-black-300:#232529;
  --tvn-black-400:#2e3238;
  --tvn-black-600:#505967;
}

/* ── announcement strip ────────────────────────────────────────────
   48px, black, 13px/20px centred, over a three-step shadow — the source
   lifts the strip off the header rather than butting them together. */
#tv-topbar{
  box-shadow:
    0px 1px 2px 0px rgba(0,0,0,.01),
    0px 2px 4px -1px rgba(0,0,0,.02),
    0px 4px 8px -2px rgba(0,0,0,.03);
}
#tv-topbar a{
  font-size:13px;
  line-height:20px;
  font-weight:400;
  letter-spacing:0;
}

/* ── header shell ─────────────────────────────────────────────────── */
[role="banner"]{
  background-color:rgba(255,255,255,.95);
  -webkit-backdrop-filter:blur(12px);
          backdrop-filter:blur(12px);
  border-bottom:1px solid var(--tvn-white-500);
}

/* The source runs its header on the same container as the page body:
   1440 capped, 24px gutters. The 72px gutter here pushed the logo a full
   48px further in than everything below it. */
[role="banner"] .container{max-width:1440px;padding:0 24px}
@media (max-width:991px){ [role="banner"] .container{padding:0 24px} }
@media (max-width:374px){ [role="banner"] .container{padding:0 16px} }

/* ── logo ─────────────────────────────────────────────────────────── */
.nav-logo-image{height:24px !important;width:auto}
/* The source pads the logo link and pulls the padding back out with a
   negative margin, so the hit target is larger than the mark without
   moving it off the gutter. */
[role="banner"] .nav-logo{
  display:inline-flex;align-items:center;
  padding:8px 4px;margin:-8px -4px;
  border-radius:12px;
}

/* 36px between the mark and the first link. The link wrapper already
   contributes 20px of its own, so this is the remainder. */
[role="banner"] .nav-menu{margin-left:16px}

/* ── links ────────────────────────────────────────────────────────── */
/* 6px between pills, as in the source. The existing 6px was set on
   .nav-menu, but the flex row that actually spaces the links is
   .nav-link-wrap inside it, and Webflow gives that one a 35px gap — which
   is why the links sat five times further apart than the original. */
[role="banner"] .nav-link-wrap{gap:6px}
/* Ghost buttons: no fill at rest, the pill appears on hover. */
[role="banner"] .nav-link{color:var(--tvn-black-400)}
[role="banner"] .nav-link:hover{
  background:var(--tvn-white-300);
  color:var(--tvn-black-300);
}
[role="banner"] .nav-link:active{
  background:var(--tvn-white-400);
  color:var(--tvn-black-200);
}
[role="banner"] .nav-link-text{color:inherit}

/* ── dropdown caret ───────────────────────────────────────────────── */
[role="banner"] .tv-nav-caret{
  width:18px;height:18px;flex:0 0 auto;
  margin-left:2px;
  color:currentColor;
  transition:translate .3s cubic-bezier(.33,1,.68,1);
}
[role="banner"] .w-dropdown-toggle.w--open .tv-nav-caret{
  translate:0 1px;
  transition-duration:.15s;
}
[role="banner"] .nav-link-dropdown .nav-link{
  display:inline-flex;align-items:center;
  padding:0 8px 0 12px;
}

/* ── action pair ──────────────────────────────────────────────────── */
[role="banner"] .nav-button-wrap-desktop{gap:10px}

/* ── mobile ───────────────────────────────────────────────────────── */
/* The source swaps its links for a 36px square ghost trigger below lg;
   ours already has one, so it only needs the matching shape. */
@media (max-width:991px){
  [role="banner"] .menu-button-wrap{
    width:36px;height:36px;border-radius:10px;
    display:inline-flex;align-items:center;justify-content:center;
  }
  [role="banner"] .nav-icon-button-wrap{gap:10px}
}