/* Shared styles for the static build.
   Page-specific rules (resets, keyframes, breakpoints) are inlined in each page's <head>,
   matching the design source. This file holds cross-page additions only. */

/* hide scrollbars on the horizontal rails */
[data-carousel]::-webkit-scrollbar { display: none; }
[data-carousel] { -webkit-overflow-scrolling: touch; scrollbar-width: none; }

/* focus visibility for keyboard users */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid #4E8FE0;
  outline-offset: 2px;
}

/* ---------- Techstars announcement bar ----------
   No CSS is needed for the nav offset — the script writes a resolved pixel value to the
   nav's inline top. Leave the nav's authored inline style as-is: top:clamp(12px,1.6vw,22px).

   DO NOT add `transition:top` to [data-nav]. A transition on top pins the element at its
   start value in some engines, so the nav renders overlapping the bar even though both the
   inline and computed values are correct. Leave it off. */

/* Below 950px the full sentence cannot fit on one line, so the short label replaces it
   and the NEWS kicker + Techstars mark drop. */
@media (max-width:950px){
  [data-announce-news],[data-announce] img,[data-announce-copy]{display:none !important}
  [data-announce-short]{display:inline !important}
  [data-announce]>div{gap:10px !important}
}

/* <=420px: CTA becomes arrow-only and the label is the one shrinkable item, so the bar
   keeps its gutter and the x stays reachable down to 320px. */
@media (max-width:420px){
  [data-announce]{padding:10px 12px !important}
  [data-announce]>div{gap:8px !important;min-width:0}
  [data-announce] a{gap:9px !important;min-width:0}
  [data-announce-short]{font-size:.8rem !important;min-width:0;overflow:hidden;text-overflow:clip}
  [data-announce] a>span:last-child{padding:0 !important;width:30px;height:30px;justify-content:center;font-size:0 !important}
  [data-announce] a>span:last-child span{font-size:.9rem}
}

/* ---------- footer link columns ----------
   App / Company / Work with Navi / Get the app sit in one wrapping row; on phones they stack
   in that order. */
@media (max-width:760px){
  [data-footer-links]{flex-direction:column !important}
}
/* Tablets: the footer's right half is too narrow for four columns until ~1070px, so the brand
   block goes on top and the four columns share one full-width row, keeping Get the app rightmost.
   The cap leaves some slack above the measured 1070px in case a fallback font sets wider. */
@media (min-width:761px) and (max-width:1119px){
  footer>div:has(>[data-footer-links]){grid-template-columns:minmax(0,1fr) !important}
  [data-footer-links]{flex-wrap:nowrap !important}
}