@import url("./variables.css");

html { box-sizing: border-box; }
*, *::before, *::after { box-sizing: inherit; }

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg, video { display: block; max-width: 100%; }
a { color: var(--color-primary); text-decoration: none; }
/* Preserve each button's readable foreground when its hover background changes. */
a:hover { color: inherit; }
a.button-primary:hover,
a.home_hero_a:hover,
a[class*="_a"][style-hover*="background:var(--color-primary-hover)"]:hover {
  color: var(--color-on-dark) !important;
}
a.button-secondary:hover,
a.button-accent:hover {
  color: var(--color-text) !important;
}
.button:hover > span,
a.button-primary:hover > span,
a.home_hero_a:hover > span {
  color: inherit;
}

h1, h2, h3, h4, p { margin-top: 0; }
h1, h2, h3, h4 { letter-spacing: var(--tracking-tight); }
p { line-height: var(--leading-body); }

.page-wrapper { min-height: 100vh; overflow: clip; }
.padding-global { padding-inline: var(--page-padding); }
.container-large { width: 100%; max-width: var(--container-large); margin-inline: auto; }
.container-medium { width: 100%; max-width: var(--container-medium); margin-inline: auto; }
.container-small { width: 100%; max-width: var(--container-small); margin-inline: auto; }
.section-padding { padding-block: var(--section-padding); }

.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-label);
  color: var(--color-primary);
  text-transform: uppercase;
}

.text-muted { color: var(--color-text-soft); }
.text-subtle { color: var(--color-text-muted); }

:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
}


/* Client-First-style layout utilities */
.main-wrapper { width: 100%; }
.padding-global { padding-left: var(--page-padding); padding-right: var(--page-padding); }
.container-small { width: 100%; max-width: var(--container-small); margin-left: auto; margin-right: auto; }
.container-medium { width: 100%; max-width: var(--container-medium); margin-left: auto; margin-right: auto; }
.container-large { width: 100%; max-width: var(--container-large); margin-left: auto; margin-right: auto; }

.padding-section-small { padding-top: var(--space-12); padding-bottom: var(--space-12); }
.padding-section-medium { padding-top: var(--space-20); padding-bottom: var(--space-20); }
.padding-section-large { padding-top: var(--section-padding); padding-bottom: var(--section-padding); }

.margin-top-auto { margin-top: auto; }
.margin-bottom-0 { margin-bottom: 0; }
.margin-bottom-small { margin-bottom: var(--space-4); }
.margin-bottom-medium { margin-bottom: var(--space-8); }
.margin-bottom-large { margin-bottom: var(--space-12); }

.text-size-small { font-size: var(--text-sm); }
.text-size-regular { font-size: var(--text-base); }
.text-size-medium { font-size: var(--text-md); }
.text-size-large { font-size: var(--text-lg); }
.text-style-muted { color: var(--color-text-soft); }
.text-style-subtle { color: var(--color-text-muted); }
.text-style-mono { font-family: var(--font-mono); }

.heading-style-h1 { font-size: var(--text-display); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); font-weight: var(--font-weight-bold); }
.heading-style-h2 { font-size: clamp(1.75rem, 3vw, 2.5rem); line-height: 1.1; letter-spacing: -0.02em; font-weight: var(--font-weight-bold); }
.heading-style-h3 { font-size: var(--text-xl); line-height: 1.2; font-weight: var(--font-weight-bold); }

.display-flex { display: flex; }
.display-grid { display: grid; }
.align-center { align-items: center; }
.justify-between { justify-content: space-between; }
.flex-vertical { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }

.gap-small { gap: var(--space-3); }
.gap-medium { gap: var(--space-6); }
.gap-large { gap: var(--space-10); }

.hide { display: none !important; }
.overflow-hidden { overflow: hidden; }
.position-relative { position: relative; }


/* Unified site width — matches the shared navbar container */
:root {
  --site-content-width: calc(var(--container-large) - (var(--page-padding) * 2));
}

.site-container {
  width: min(var(--site-content-width), calc(100% - (var(--page-padding) * 2)));
  max-width: none;
  margin-left: auto;
  margin-right: auto;
}


/* Consistent 100px hero top spacing on every page and breakpoint. */
.is-first-section {
  padding-top: 100px !important;
}

/* Keep navigation, buttons and blog cards at their normal text colors on hover. */
.site-nav a:hover { color: inherit !important; }
.button:hover { color: inherit; }
a.button-primary:hover { color: var(--color-on-dark) !important; }
a.button-secondary:hover, a.button-accent:hover { color: var(--color-text) !important; }
.blog_blog-featured_a:hover { color: var(--color-bg) !important; }
.blog_blog-posts_a:hover { color: var(--color-text) !important; }
.site-nav a:hover *,
a.button:hover *,
.blog_blog-featured_a:hover *,
.blog_blog-posts_a:hover * { color: inherit !important; }

/* Hide inactive Pricing, Careers and Sign in navigation entries site-wide,
   including the shared navigation and mobile menus. Keep pages themselves intact. */
nav a:is([href*="/pricing"],[href*="/careers"],[href*="/signin"],[href*="/sign-in"],[href*="/SignIn"],[href="pricing"],[href="careers"],[href="signin"]),
header a:is([href*="/pricing"],[href*="/careers"],[href*="/signin"],[href*="/sign-in"],[href*="/SignIn"],[href="pricing"],[href="careers"],[href="signin"]),
.site-nav a:is([href*="/pricing"],[href*="/careers"],[href*="/signin"],[href*="/sign-in"],[href*="/SignIn"]),
[role="navigation"] a:is([href*="/pricing"],[href*="/careers"],[href*="/signin"],[href*="/sign-in"],[href*="/SignIn"]) {
  display: none !important;
}

/* Remove inactive links from the shared footer on every page. */
footer a:is([href*="pricing" i],[href*="career" i],[href*="sign-in" i],[href*="signin" i],[href*="sign_in" i]),
.site-footer a:is([href*="pricing" i],[href*="career" i],[href*="sign-in" i],[href*="signin" i],[href*="sign_in" i]),
[class*="footer"] a:is([href*="pricing" i],[href*="career" i],[href*="sign-in" i],[href*="signin" i],[href*="sign_in" i]) {
  display: none !important;
}

/* Consistent interactive typography: hovering must not recolor text. */
:where(a, button, [role="button"], [role="link"]):hover {
  color: inherit;
}
/* Preserve normal foreground colors of buttons, nav links and card titles. */
:where(.site-nav, nav, header, footer, .button, [class*="button"], [class*="cta"], [class*="card"], [class*="blog_blog-posts"], [class*="blog_blog-featured"]) :is(a,button):hover {
  color: inherit !important;
}
/* Inherit the same color from each element's own non-hover state,
   rather than overriding contrasting button/card child colors. */
:where(.site-nav, nav, header, footer, .button, [class*="button"], [class*="cta"], [class*="card"], [class*="blog_blog-posts"], [class*="blog_blog-featured"]) :is(a,button):hover :is(span,strong,b,em) {
  color: inherit !important;
}

/* Navbar beta CTA: keep white text readable on its blue background on hover. */
nav a[href*="/beta" i],
header a[href*="/beta" i],
.site-nav a[href*="/beta" i],
[role="navigation"] a[href*="/beta" i],
[class*="nav"] a[href*="/beta" i] {
  color: var(--color-on-dark, #fff) !important;
}
nav a[href*="/beta" i]:is(:hover,:focus-visible),
header a[href*="/beta" i]:is(:hover,:focus-visible),
.site-nav a[href*="/beta" i]:is(:hover,:focus-visible),
[role="navigation"] a[href*="/beta" i]:is(:hover,:focus-visible),
[class*="nav"] a[href*="/beta" i]:is(:hover,:focus-visible),
nav a[href*="/beta" i]:is(:hover,:focus-visible) *,
header a[href*="/beta" i]:is(:hover,:focus-visible) *,
.site-nav a[href*="/beta" i]:is(:hover,:focus-visible) *,
[class*="nav"] a[href*="/beta" i]:is(:hover,:focus-visible) * {
  color: var(--color-on-dark, #fff) !important;
}