/* Site-specific additions on top of the Webflow CSS (/css/webflow.css). Only what the static rebuild needs. */

/* spacing: an empty title section (Webflow leftover: no heading, text, image, link or list, only padding and maybe a
   wave decor) adds no padding. ?preview=1&gaps=orig (js/preview.js) shows the original padding for comparison. */
html:not(.pv-gaps-orig) .title_section:not(:has(h1, h2, h3, h4, h5, h6, p, img, a, li, button, form, iframe)) > .padding-global { padding-top: 0 !important; padding-bottom: 0 !important; }

/* pagination (new on /resources/all-articles/page/N; styled with the live button classes) */
.pagination { margin-top: 3rem; }
.pagination_row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.pagination_count { font-size: .875rem; opacity: .7; text-align: center; }
.pagination_spacer { min-width: 6rem; }

/* client-side search results */
.search_status { margin: 0 0 1rem; opacity: .7; }
.search_more { margin-top: 2rem; justify-content: center; }
.fs_accordion-1_content-2 { transition: height .3s ease; }

/* TOC wrapper stays empty until post.js fills it */
.fs-toc_link-content:empty { display: none; }

/* cookieconsent: keep the banner above Webflow's fixed nav */
#cc-main { z-index: 2147483000; }

/* post bodies: img width/height attributes (for CLS) must not distort the 100%-wide figure images */
.w-richtext img { height: auto; }

/* Products dropdown: three category columns (CRM, Gamification, AI) of compact rows:
   icon on the left, title and the description on the right. */
.nav-products-wrap .nav-cat-grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem; width: 100%; }
.nav-cat { display: flex; flex-direction: column; gap: .125rem; min-width: 0; }
.nav-cat-label {
  padding: 0 .75rem .5rem; margin-bottom: .25rem;
  border-bottom: 1px solid var(--base-color-neutral--neutral-lighter);
  color: var(--base-color-neutral--neutral-light);
  font-size: .75rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase;
}
.nav-cat .nav_link_wrap_box {
  width: 100%; display: grid; grid-template-columns: auto 1fr;
  grid-template-areas: "icon title" "icon desc";
  column-gap: .875rem; row-gap: .125rem; align-items: start;
  padding: .625rem .75rem; border-color: transparent;
}
.nav-cat .nav_link_wrap_box:hover, .nav-cat .nav_link_wrap_box.w--current { border-color: #c0c2cc66; }
.nav-cat .nav_link_text_wrap { display: contents; }
.nav-cat .nav_link_title { grid-area: title; line-height: 1.3; }
.nav-cat .nav_menu_icon { grid-area: icon; width: 2.5rem; height: 2.5rem; padding: .45rem; }
.nav-cat .nav_link_desc { grid-area: desc; }
.nav-cat .nav_link_wrap_box.hide { display: none; }
@media screen and (min-width: 992px) {
  .nav-products-wrap .nav-cat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 1.5rem; }
  /* Resources dropdown: two groups (Learn, Build & try) */
  .nav-products-wrap .nav-cat-grid.is-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Desktop nav dropdowns are position:fixed under the nav; when one is taller than the window
   (e.g. the grouped Products menu on a laptop screen) let it scroll inside instead of being cut off. */
@media screen and (min-width: 992px) {
  .dropdown_nav .dropdown_wrap.w--open {
    max-height: calc(100vh - 6.75rem);
    max-height: calc(100dvh - 6.75rem);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}

/* usage numbers row on /products/mcp-server: stack the cards on narrow screens */
@media screen and (max-width: 767px) {
  .card_slots_side_horizontal.mcp_stats { flex-flow: column; }
}

/* scroll cue (js/scroll-cue.js): a bobbing arrow at the bottom of the screen while the hero hides the content under it */
.scroll-cue {
  position: fixed; left: 50%; bottom: max(1.5rem, env(safe-area-inset-bottom)); z-index: 20; display: flex; align-items: center; justify-content: center;
  width: 2.75rem; height: 2.75rem; border-radius: 50%; color: #11ced7; text-decoration: none;
  background: rgba(23, 27, 42, .72); border: 1px solid rgba(17, 206, 215, .45); box-shadow: 0 .75rem 2rem rgba(0, 0, 0, .35), 0 0 0 4px rgba(17, 206, 215, .08);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  opacity: 0; visibility: hidden; transform: translate(-50%, 1rem); transition: opacity .35s, transform .35s, visibility 0s .35s;
}
.scroll-cue.is-visible { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition: opacity .5s .6s, transform .5s .6s, visibility 0s; }
.scroll-cue:hover { color: #fff; border-color: #11ced7; }
.scroll-cue svg { width: 1.25rem; height: 1.25rem; animation: scroll-cue-bob 1.6s ease-in-out infinite; }
@keyframes scroll-cue-bob { 0%, 100% { transform: translateY(-2px); } 50% { transform: translateY(3px); } }
@media (prefers-reduced-motion: reduce) { .scroll-cue svg { animation: none; } .scroll-cue, .scroll-cue.is-visible { transition: none; } }
@media print { .scroll-cue { display: none; } }