/*
 * sn-category.css — software category archive (taxonomy-software-category.php)
 *
 * Loaded only on the software-category taxonomy archive, after theme.css and
 * sn-ui.css. The --sn-* palette it used to redeclare now comes from
 * sn-tokens.css at :root, shared with every other page type.
 */

/* Collapsible category intro. The full blob used to push the comparison table
   616px down the page; the lead stays open and the rest is one click away. */
.category_name_subtitle .sn-intro-more { margin-top: 10px; }

.category_name_subtitle .sn-intro-more > summary {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  font-size: 14.5px;
  color: var(--sn-blue, #2563eb);
  list-style: none;
  padding: 6px 0;
}

.category_name_subtitle .sn-intro-more > summary::-webkit-details-marker { display: none; }

.category_name_subtitle .sn-intro-more > summary::after {
  content: "";
  width: 16px;
  height: 16px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232563eb' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  transition: transform .2s ease;
}

.category_name_subtitle .sn-intro-more[open] > summary::after { transform: rotate(-180deg); }
.category_name_subtitle .sn-intro-more__body { padding-top: 4px; }

/* Sort control. Sits opposite the result count in the list header. */
.sn-sort {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
}

.sn-sort__label {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--sn-body, #475569);
  margin: 0;
  white-space: nowrap;
}

.sn-sort__select {
  appearance: none;
  border: 1px solid var(--sn-rule);
  border-radius: 9px;
  background-color: var(--sn-surface, #fff);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-size: 14px 14px;
  background-position: right 10px center;
  background-repeat: no-repeat;
  padding: 8px 32px 8px 12px;
  font-size: 14px;
  font-weight: 500;
  color: var(--sn-ink);
  cursor: pointer;
  min-height: 40px;   /* keeps the control above the 24px tap-target floor */
}

.sn-sort__select:focus-visible {
  outline: 2px solid var(--sn-blue, #2563eb);
  outline-offset: 1px;
}

.filter_and_count_main { gap: 12px; flex-wrap: wrap; }

/* Brand marks in the comparison table -- the row is far easier to scan by logo. */
.sn-ct__namelink {
  display: flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
}

.sn-ct__logo {
  flex: none;
  width: 28px;
  height: 28px;
  object-fit: contain;
  border-radius: 6px;
  background: var(--sn-surface-soft, #f8fafc);
}

@media (max-width: 575.98px) {
  .filter_and_count_main { align-items: flex-start; }
  .sn-sort { width: 100%; }
  .sn-sort__select { flex: 1; }
}

/* Plan qualifier reads as secondary to the figure it modifies. */
.tax-software-category .software_pricing .sn-plan-note {
  font-weight: 500;
  opacity: .82;
}

/* ==========================================================================
   2026-08-14 — measure, sticky filters, and the label voice.
   ========================================================================== */

/* The intro ran the full 1320px container: ~150 characters a line, roughly
   twice a comfortable measure. `text-align: justify` on top of that opened
   rivers between words at wide widths. */
.category_name_subtitle {
  max-width: var(--sn-measure);
  text-align: left;
  color: var(--sn-ink-soft);
  font-size: var(--sn-fs-prose);
  line-height: var(--sn-lh-prose);
}

.category_name_subtitle .sn-intro-more__body { max-width: var(--sn-measure); }

.category_listing_page_title .sn-ct__lead,
.sn-ct__lead { max-width: var(--sn-measure); }

/* The buyer's guide is the page's long-form writing, so it gets the prose
   measure — but on the prose column, not on the wrapper. The wrapper contains a
   two-column row (the table of contents beside the text), so capping it at 68ch
   squeezed the prose to 484px and left 570px of the container empty. */
.buyers_guide_tab {
  max-width: none;
  font-size: var(--sn-fs-prose);
  line-height: var(--sn-lh-prose);
  color: var(--sn-ink-soft);
}

.buyers_guide_tab .ns_toc_content_data { max-width: var(--sn-measure); }

.buyers_guide_tab h2 { margin-top: var(--sn-12); }
.buyers_guide_tab h3 { margin-top: var(--sn-8); }
.buyers_guide_tab p + p { margin-top: var(--sn-5); }

/* Table of contents: a rail, not a black-capped card. Sticky so it stays with
   the reader through a guide that runs several screens. */
.buyers_guide_tab .ns_toc_content_wrap { --bs-gutter-x: var(--sn-10); }

.ns-toc-card .card {
  border: 0;
  border-left: 1px solid var(--sn-rule);
  border-radius: 0;
  box-shadow: none;
  background: transparent;
}

.ns-toc-card .card-header {
  background: transparent !important;
  border: 0;
  padding: 0 0 var(--sn-4) var(--sn-5);
}

.ns-toc-card .card-header h2 {
  font-family: var(--sn-font-mono);
  font-size: var(--sn-fs-micro);
  font-weight: 500;
  letter-spacing: var(--sn-tr-micro);
  text-transform: uppercase;
  color: var(--sn-muted) !important;
}

.ns-toc-card .card-body { padding: 0 0 0 var(--sn-5); }

.ns_toc_list a {
  display: block;
  padding: var(--sn-2) 0;
  font-size: var(--sn-fs-sm);
  line-height: 1.45;
  color: var(--sn-ink-soft);
}

.ns_toc_list a:hover,
.ns_toc_list li.active > a { color: var(--sn-signal); }

.toc-sublist { border-left: 1px solid var(--sn-rule-soft); padding-left: var(--sn-3); margin-top: var(--sn-1); }

/* Bootstrap's 4/8 split gave the contents list 437px — far more than a list of
   links needs, and it pushed the prose past the middle of the page. A grid with
   a fixed rail is the right shape for a table of contents. */
@media (min-width: 1200px) {
  .buyers_guide_tab .ns_toc_content_wrap {
    display: grid;
    grid-template-columns: 250px minmax(0, 1fr);
    gap: var(--sn-10);
  }

  .buyers_guide_tab .ns_toc_content_list,
  .buyers_guide_tab .ns_toc_content_data {
    width: auto;
    max-width: none;
    flex: none;
    padding-inline: 0;
  }

  .buyers_guide_tab .ns_toc_content_data { max-width: var(--sn-measure); }

  .buyers_guide_tab .ns_toc_content_list {
    position: sticky;
    top: calc(var(--sn-header-h) + 24px);
    align-self: start;
    max-height: calc(100vh - var(--sn-header-h) - 48px);
    overflow-y: auto;
  }
}

/* The filter column is 3/12 of the row but its form is much shorter than the
   listing beside it, so past the first two or three products the left third of
   the page was empty white. Pinning the panel keeps the filters reachable and
   puts the space to work. */
@media (min-width: 1200px) {
  .category_sidebar .filter-wrapper {
    position: sticky;
    top: calc(var(--sn-header-h) + 16px);
    max-height: calc(100vh - var(--sn-header-h) - 32px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}

/* Section labels take the mono label voice used by the rail and the table head. */
.sn-sort__label,
.form-header .sn-panel-heading {
  font-family: var(--sn-font-mono);
  font-size: var(--sn-fs-micro);
  font-weight: 500;
  letter-spacing: var(--sn-tr-micro);
  text-transform: uppercase;
  color: var(--sn-muted);
}