/* Support guide pages (/tuki, /support) - kept intentionally small. The
 * templates now reuse the site's own components (.hero-sunset-simple,
 * .eyebrow, .soft-card, .document-sidebar, standard py-6/bg-pale section
 * alternation) instead of a parallel design system, so this file only
 * covers the things genuinely specific to support content: annotated
 * screenshots, the in-article table of contents, the mobile TOC disclosure,
 * and the search box/empty-state states the search widget toggles.
 * See doc/ai-memory/feature-tuki-support-rebuild-2026-09-30.md. */

/* Search box styling lives in custom.css now (.filter-search*) - shared
 * with /blogi's search, not support-specific. */

/* ---- Breadcrumbs - small, muted trail above the page heading. ---- */
.support-breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 1.25rem;
  color: var(--text-light);
  font-size: 0.88rem;
}

.support-breadcrumbs a {
  color: var(--blue-dark);
  text-decoration: none;
}

.support-breadcrumbs a:hover {
  text-decoration: underline;
}

.support-breadcrumbs [aria-current="page"] {
  color: var(--text-body);
  font-weight: 700;
}

/* ---- Article card (index + category grids) - same visual shape as
 * /blogi's own article cards (bg-white, rounded-4, 16:9 image), plus the
 * data attributes the search widget filters against. ---- */
.support-article-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.support-article-card img {
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.support-article-card-lead {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.support-empty-state {
  grid-column: 1 / -1;
}

/* ---- Table of contents indent for nested headings - document-sidebar-toc's
 * own default is a flat decimal list; deeper heading levels get a little
 * extra indent so the hierarchy reads. ---- */
.support-sidebar-toc li.support-toc-level-3,
.support-sidebar-toc li.support-toc-level-4,
.support-sidebar-toc li.support-toc-level-5,
.support-sidebar-toc li.support-toc-level-6 {
  padding-left: 0.8rem;
}

/* The mobile disclosure inherits the shared sticky document-sidebar style.
 * Explicitly keep it in document flow at every width below Bootstrap lg. */
@media (max-width: 991.98px) {
  .document-sidebar.support-mobile-toc {
    position: static;
    top: auto;
  }
}

/* Native <details> for the mobile-only TOC - keeps it in normal document
 * flow instead of needing its own show/hide JS. */
.support-mobile-toc > summary {
  cursor: pointer;
  font-weight: 800;
}

.support-mobile-toc[open] > summary {
  margin-bottom: 0.75rem;
}

.support-mobile-toc > summary:focus-visible {
  outline: 2px solid var(--blue-dark);
  outline-offset: 4px;
}

/* ---- Annotated screenshots - a figure containing a real screenshot plus
 * an absolutely-positioned SVG overlay (red dashed boxes drawn by the
 * import pipeline to call out specific UI elements). Genuinely new content,
 * not present anywhere else on the site. ---- */
.support-article-body figure.support-annotated-screenshot {
  position: relative;
  display: block;
  max-width: 100%;
  margin: 1.5rem auto;
}

.support-article-body figure.support-annotated-screenshot > img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
}

.support-article-body figure.support-annotated-screenshot > svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.support-article-body figure figcaption {
  margin-top: 0.5rem;
  color: var(--text-light);
  font-size: 0.85rem;
  text-align: center;
}

.support-article-body pre,
.support-article-body table {
  max-width: 100%;
  overflow-x: auto;
}

/* ---- Optional "reading-wide" layout: when a search/reading-focus toggle
 * is active, the article column expands into the sidebar's space instead
 * of the sidebar disappearing abruptly. ---- */
@media (min-width: 992px) {
  .support-detail-grid[data-reading-layout] > .support-article-col {
    transition: margin-left 800ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  .support-detail-grid.is-reading-wide > .support-article-col {
    margin-left: calc(-1 * var(--support-sidebar-space, 0px));
  }
}

@media (prefers-reduced-motion: reduce) {
  .support-detail-grid[data-reading-layout] > .support-article-col {
    transition: none;
  }
}