/* Shared fixes and the social links row, loaded on every page. */

/* Mobile menu: the header's blur used to sit on .nav-bar itself, and a backdrop-filter makes
   an element the frame for its position:fixed children. The full-screen menu (inside the
   header) was then placed against the header, not the screen: after scrolling it opened
   off-screen or cropped, with page scrolling locked. The blur now sits on a layer behind
   the header instead, so the menu covers the screen wherever you are on the page. */
.nav-bar { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
.nav-bar::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.mobile-menu-overlay { height: 100vh; height: 100dvh; }

/* Social links (footer of every page) */
.hero-footer { flex-direction: column; gap: 14px; }
.va-social { display: flex; justify-content: center; align-items: center; gap: 10px; padding: 14px 16px 4px; flex-wrap: wrap; }
.va-social a {
  width: 38px; height: 38px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: #cbd5e1; border: 1px solid rgba(255, 255, 255, 0.12); background: rgba(255, 255, 255, 0.03);
  transition: color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.va-social a:hover, .va-social a:focus-visible { color: #d7ff3f; border-color: #d7ff3f; box-shadow: 0 0 12px rgba(215, 255, 63, 0.25); outline: none; }
.va-social a[aria-disabled="true"] { opacity: 0.55; cursor: default; }
.va-social svg { width: 17px; height: 17px; fill: currentColor; }
.footer .va-social { padding: 18px 16px 6px; }

/* Home and System Blueprints: overflow:hidden on the page wrapper stopped the sticky header from
   sticking, so after scrolling there was no menu button. clip trims the same overflow without
   breaking sticky. */
@supports (overflow: clip) {
  main.hero-wrapper { overflow: clip !important; }
  /* Same on the home page: overflow-x:hidden on both html and body made body a scroll box of
     its own, which also stops sticky. (The menu and chat locks set overflow-y, still honoured.) */
  html, body { overflow-x: clip !important; }
}
/* Footer: links to the industry pages */
.va-industries { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 6px 14px; padding: 16px 16px 0; font-size: 13px; color: #a1a1aa; }
.va-industries span { font-family: 'Space Mono', monospace; font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; }
.va-industries a { color: #d4ff00; text-decoration: none; }
.va-industries a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Brand colour language (from the promo video): coral = the problem, lime = solved.
   "html body" outranks the pages' own inline styles without touching them. */
html body .manual-val { color: var(--accent-coral, #ff6a3d); }
html body .block-problem strong { color: var(--accent-coral, #ff6a3d); }

/* Lime and coral are both brand colours: lime for what we fix, coral for the problem and as the second accent */
html body .lime-highlight { color: var(--accent-lime, #d4ff00); }
html body .coral-highlight { color: var(--accent-coral, #ff6a3d); text-shadow: 0 0 22px rgba(255, 106, 61, 0.35); }
html body .agent-card-coral .agent-card-tag { color: var(--accent-coral, #ff6a3d); background: rgba(255, 106, 61, 0.1); border-color: rgba(255, 106, 61, 0.25); }

/* About Us FAQ dropdown: stays inside the window and shows one question at a time; scroll for the next */
html body .nav-dropdown:not(.nav-dropdown-automations) > .dropdown-menu { right: 0 !important; left: auto !important; width: min(380px, calc(100vw - 32px)) !important; }
html body .nav-dropdown .faq-list { max-height: 150px; overflow-y: auto; scroll-snap-type: y mandatory; overscroll-behavior: contain; gap: 10px; padding-right: 4px; scrollbar-width: thin; scrollbar-color: rgba(212, 255, 0, 0.5) transparent; }
html body .nav-dropdown .faq-item { scroll-snap-align: start; min-height: 150px; box-sizing: border-box; }
html body .nav-dropdown:not(.nav-dropdown-automations) > .dropdown-menu::after { content: "Scroll for the next question \2193"; display: block; text-align: center; font-size: 11px; color: #71717a; margin-top: 10px; }