/* ==========================================================================
   Scryglass site — the support index: article groups and the FAQ.
   Depends on tokens.css, site.css and components.css, in that order.
   ========================================================================== */

/* --- Hero ------------------------------------------------------------------
   The search field is the same affordance as the article sidebar's, one step
   larger — `.doc-search` under `.doc-search--lg`, results panel and all, in
   components.css. Only the hero it sits in belongs to this file.            */

.support-hero {
  display: flex;
  flex-direction: column;
  gap: 26px;
  padding: 64px var(--page-gutter);
  border-bottom: 1px solid var(--hairline);
}

.support-hero__title {
  font-size: 52px;
  font-weight: 700;
  letter-spacing: -.03em;
  color: var(--text-primary);
}

/* --- Article groups --------------------------------------------------------- */

.support-groups {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-bottom: 1px solid var(--hairline);
}

.support-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 40px var(--page-gutter);
  border-right: 1px solid var(--hairline);
}

.support-group:last-child {
  border-right: 0;
}

.support-group__title {
  font-size: 21px;
  font-weight: 700;
  color: var(--text-primary);
}

.support-group__links {
  display: flex;
  flex-direction: column;
  gap: 9px;
  font-size: 15px;
  color: var(--text-muted);
}

/* --- FAQ and the contact panel ----------------------------------------------
   <details> rows: closed by default, opened by the browser. The +/− is the
   summary's ::after, so the glyph cannot disagree with the row's state, and
   the whole thing works with scripting off.                                 */

.support-foot {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
}

.faq {
  padding: 52px var(--page-gutter);
  border-right: 1px solid var(--hairline);
}

.faq__title {
  margin: 0 0 22px;
  font-size: 26px;
  font-weight: 700;
  color: var(--text-primary);
}

.faq__list {
  display: flex;
  flex-direction: column;
}

.faq__item {
  padding: 18px 0;
  border-top: 1px solid var(--hairline);
}

.faq__item:last-child {
  border-bottom: 1px solid var(--hairline);
}

.faq__q {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  font-size: 16px;
  color: var(--text-primary);
  list-style: none;
  cursor: pointer;
}

.faq__q::-webkit-details-marker {
  display: none;
}

.faq__q::after {
  content: "+";
  color: var(--accent-pink);
}

.faq__item[open] .faq__q::after {
  content: "\2212"; /* minus sign, matching the design's glyph */
}

.faq__q:focus-visible {
  outline: 2px solid var(--accent-cyan);
  outline-offset: 3px;
}

.faq__a {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 10px;
}

.faq__a p {
  max-width: 520px;
  font-size: 15px;
  line-height: 1.65;
  color: var(--text-muted);
}

.faq__a a {
  color: var(--accent-cyan);
}

.stuck {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 52px var(--page-gutter);
  background: var(--bg-panel);
}

.stuck__title {
  font-size: 26px;
  font-weight: 700;
  color: var(--text-primary);
}

.stuck__body {
  font-size: 15px;
  line-height: 1.65;
  color: var(--text-muted);
}

.stuck__btn {
  align-self: flex-start;
  padding: 14px 22px;
}

.stuck__note {
  margin-top: 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 2;
  color: var(--text-dim);
}

.stuck__link {
  margin-top: 12px;
  padding-top: 16px;
  border-top: 1px solid var(--hairline);
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--accent-cyan);
}

/* --- Inline UI reference -----------------------------------------------
   The `ui` shortcode's `.ui` span (eleventy.config.js) is styled in
   article.css, scoped to `.doc`. This page doesn't load article.css or
   carry that ancestor, so the two colours it needs are repeated here,
   scoped to `.support`, and the same `.ui` rule is duplicated to match. */

.support {
  --ui-bg: #161320;       /* inline UI reference ground */
  --ui-border: #241F30;   /* inline UI reference outline */
}

.ui {
  padding: 1px 6px;
  background: var(--ui-bg);
  border: 1px solid var(--ui-border);
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--text-primary);
}

/* ==========================================================================
   WP9 — responsive
   See the breakpoint table at the foot of site.css. Nothing here matches at
   1240px or wider.
   ========================================================================== */

@media (max-width: 1239px) {
  .support-hero__title { font-size: clamp(30px, 4.21vw, 52px); }
}

@media (max-width: 900px) {
  .support-hero {
    gap: 20px;
    padding: 48px var(--page-gutter);
  }

  .support-groups { grid-template-columns: 1fr; }

  .support-group {
    padding: 30px var(--page-gutter);
    border-right: 0;
    border-bottom: 1px solid var(--hairline);
  }

  /* The section already draws its own bottom rule. */
  .support-group:last-child { border-bottom: 0; }

  .support-foot { grid-template-columns: 1fr; }

  .faq {
    padding: 40px var(--page-gutter);
    border-right: 0;
    border-bottom: 1px solid var(--hairline);
  }

  .stuck { padding: 40px var(--page-gutter); }
}

@media (max-width: 620px) {
  .faq__title,
  .stuck__title { font-size: 22px; }

  .support-group__title { font-size: 19px; }

  .stuck__btn { align-self: stretch; }
}