/* Solutions overview: product category quick navigation.
 * Self-contained styles scoped to the solutions archive so the Products page
 * category rail can be reused without pulling in the full products CSS stack.
 * Source reference: assets/css/pages/products-layout.css + products-polish.css
 * (category-navigation component only). Layout is in-flow (no hero overlap
 * translate) because the solutions hero + section order already reserves space.
 */

body.post-type-archive-solution,
body.solutions-preview {
  --products-red: var(--c-brand);
  --products-ink: #101828;
  --products-line: #e3e8ef;
  --site-gutter: clamp(20px, 1.5vw, 32px);
}

/* Wrap: normal block flow inside the section shell. The component prints
 * `.products-container` which is a global full-width box; cap it to the same
 * width as the other solutions sections. */
body.post-type-archive-solution .solutions-category-nav-section,
body.solutions-preview .solutions-category-nav-section {
  padding: 0;
  width: 100%;
}

/* The category rail mirrors the Products page geometry: the card's vertical
 * midline sits exactly on the hero's bottom edge (half of the 112px card is
 * pulled up onto the hero, half hangs below). The overview-hero contract
 * floats the first section after the hero by --overview-hero-stats-overlap
 * (-50px, sized for the stats rail); the nav needs the full half-height
 * (56px), so this rule (id-level specificity) wins over that shared
 * contract regardless of stylesheet order. The hero is a sibling, so its
 * overflow:hidden clips only its own children and never the card. */
html body.post-type-archive-solution main#main-content .solutions-live-hero + .solutions-category-nav-section,
html body.solutions-preview main#main-content .solutions-live-hero + .solutions-category-nav-section {
  position: relative;
  z-index: 3;
  margin-top: -56px;
  padding: 0 0 8px;
}

/* Wrap: fills the section shell so the rail aligns with the portfolio and
 * process sections. The component's own `.products-container` gutter would
 * add inner padding; neutralize it here because the shell owns the margin. */
body.post-type-archive-solution .products-category-nav-wrap,
body.solutions-preview .products-category-nav-wrap {
  position: relative;
  z-index: 6;
  width: 100%;
  max-width: none;
  margin-inline: 0;
  padding-inline: 0;
  box-sizing: border-box;
}

body.post-type-archive-solution .products-category-nav-wrap .products-container,
body.solutions-preview .products-category-nav-wrap .products-container {
  width: 100%;
  max-width: none;
  margin-inline: 0;
  padding-inline: 0;
}

body.post-type-archive-solution .products-category-nav,
body.solutions-preview .products-category-nav {
  min-height: 112px;
  height: auto;
  display: flex;
  align-items: stretch;
  overflow-x: auto;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(16, 24, 40, .09);
  scrollbar-width: none;
  overscroll-behavior-inline: contain;
}

body.post-type-archive-solution .products-category-nav::-webkit-scrollbar,
body.solutions-preview .products-category-nav::-webkit-scrollbar {
  display: none;
}

body.post-type-archive-solution .products-category-nav-group,
body.solutions-preview .products-category-nav-group,
body.post-type-archive-solution .products-category-nav-children,
body.solutions-preview .products-category-nav-children {
  height: auto;
  min-height: 0;
  overflow: visible;
}

body.post-type-archive-solution .products-category-nav-item,
body.solutions-preview .products-category-nav-item {
  position: relative;
  min-width: 150px;
  flex: 1 0 150px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 18px 16px;
  color: #344054;
  font-size: var(--font-size-small, 15px);
  font-weight: var(--font-weight-semibold, 600);
  line-height: var(--line-height-tight, 1.25);
  text-align: center;
  overflow-wrap: anywhere;
  white-space: normal;
}

body.post-type-archive-solution .products-category-nav-item svg,
body.solutions-preview .products-category-nav-item svg {
  width: 24px;
  height: 24px;
}

body.post-type-archive-solution .products-category-nav-item.is-current,
body.solutions-preview .products-category-nav-item.is-current {
  color: var(--products-red);
}

body.post-type-archive-solution .products-category-nav-item.is-current::after,
body.solutions-preview .products-category-nav-item.is-current::after {
  content: '';
  position: absolute;
  inset: auto 26px 0;
  height: 3px;
  background: var(--products-red);
}

/* A category group owns one vertical column; child categories sit below it. */
body.post-type-archive-solution .products-category-nav-group,
body.solutions-preview .products-category-nav-group {
  display: flex;
  flex: 1 0 auto;
  min-width: 190px;
  flex-direction: column;
  align-items: stretch;
}

body.post-type-archive-solution .products-category-nav-group > .products-category-nav-item,
body.solutions-preview .products-category-nav-group > .products-category-nav-item {
  flex: 0 0 auto;
}

body.post-type-archive-solution .products-category-nav-children,
body.solutions-preview .products-category-nav-children {
  display: flex;
  flex-direction: column;
  margin: -4px 0 8px 22px;
  padding-left: 12px;
  border-left: 1px solid var(--products-line);
}

body.post-type-archive-solution .products-category-nav-children .products-category-nav-item.is-sub-item,
body.solutions-preview .products-category-nav-children .products-category-nav-item.is-sub-item {
  min-width: 0;
  flex: 0 0 auto;
  align-items: flex-start;
  padding: 8px 12px;
  color: #667085;
  font-size: var(--font-size-caption, 13px);
  font-weight: var(--font-weight-normal, 400);
  text-align: left;
}

body.post-type-archive-solution .products-category-nav-item.is-sub-item,
body.solutions-preview .products-category-nav-item.is-sub-item {
  padding-left: 36px;
  align-items: flex-start;
  text-align: left;
  min-width: 140px;
  font-weight: var(--font-weight-normal, 400);
  color: #667085;
}

body.post-type-archive-solution .products-category-nav-item.is-sub-item span,
body.solutions-preview .products-category-nav-item.is-sub-item span {
  padding-left: 4px;
}

body.post-type-archive-solution .products-category-nav-item.is-sub-item:hover,
body.post-type-archive-solution .products-category-nav-item.is-sub-item:focus,
body.solutions-preview .products-category-nav-item.is-sub-item:hover,
body.solutions-preview .products-category-nav-item.is-sub-item:focus {
  color: var(--products-red);
}

/* The rail overlaps the hero by 56px. At the narrow two-column transition,
 * reserve enough space below wrapped CTA rows so the rail never covers them. */
@media (min-width: 769px) and (max-width: 1180px) {
  html body.post-type-archive-solution .solutions-live-hero-grid,
  html body.solutions-preview .solutions-live-hero-grid {
    padding-bottom: 68px !important;
  }
}

/* Mobile: full-bleed rail inside the compact shell. The hero is taller and
 * space is tight, so the rail stops overlapping and returns to normal flow
 * (mirrors the Products page's ≤900px behavior of dropping the overlap). */
@media (max-width: 760px) {
  html body.post-type-archive-solution main#main-content .solutions-live-hero + .solutions-category-nav-section,
  html body.solutions-preview main#main-content .solutions-live-hero + .solutions-category-nav-section {
    margin-top: 0;
    padding: 28px 0 8px;
  }

  body.post-type-archive-solution .products-category-nav-item,
  body.solutions-preview .products-category-nav-item {
    min-width: 130px;
    flex-basis: 130px;
    padding: 14px 12px;
  }
}