/* ============================================================
   FAQ pages — /faq/, /faq/<audience>/, /faq/<audience>/<topic>/

   Deliberately not a separate visual identity. This file adds only what the
   FAQ has that no other page has: a question-and-answer rhythm, the on-page
   jump list, and the audience cards on the top hub. Everything else comes
   from styles.css, industries.css and content.css, so the FAQ looks like the
   rest of the site and changes with it.

   Colours are taken from the theme variables in styles.css wherever a surface
   or a piece of text inverts between themes. The neutral hairlines match the
   values already used by industries.css so the two files read as one hand.
   ============================================================ */

/* ---------- Top hub: one card per audience ---------- */
.faq-audience-grid {
  list-style: none;
  margin: 1.6em 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 18px;
}
.faq-audience a {
  display: block;
  height: 100%;
  border: 1px solid #e2e2e2;
  border-radius: 8px;
  padding: 20px 22px;
  text-decoration: none;
  background: var(--white);
  color: var(--black);
  transition: box-shadow .15s ease, border-color .15s ease, transform .15s ease;
}
.faq-audience a:hover {
  border-color: var(--brand-orange);
  box-shadow: 0 4px 14px rgba(0,0,0,.08);
  transform: translateY(-2px);
}
.faq-audience-label {
  display: block;
  font-size: 1.2rem;
  font-weight: 600;
  margin-bottom: .35em;
}
.faq-audience-blurb {
  display: block;
  font-size: .92rem;
  line-height: 1.45;
  color: #555;
  margin-bottom: .7em;
}
.faq-audience-count {
  display: block;
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--brand-orange);
}

/* ---------- Audience hub: grouped list of cluster pages ---------- */
.faq-hub-intro { margin-bottom: 2em; }

.faq-group { max-width: 760px; margin: 0 0 2.2em; }
.faq-group h2 {
  font-size: .82rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: #5b636d;
  margin: 0 0 .8em;
  padding-bottom: .5em;
  border-bottom: 1px solid #e2e2e2;
}
.faq-group-list { list-style: none; margin: 0; padding: 0; }
.faq-group-list li {
  padding: .75em 0;
  border-bottom: 1px solid #eee;
}
.faq-group-list li:last-child { border-bottom: 0; }
.faq-group-list a {
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--black);
  text-decoration: none;
}
.faq-group-list a:hover { color: var(--brand-orange); text-decoration: underline; }
.faq-group-desc {
  display: block;
  margin-top: .25em;
  font-size: .92rem;
  line-height: 1.45;
  color: #555;
}

/* ---------- Cluster page: on-page jump list ---------- */
.faq-contents {
  max-width: 760px;
  margin: 0 0 2.4em;
  padding: 1.1rem 1.3rem;
  border: 1px solid #dfe3e8;
  border-radius: 8px;
  background: #fbfcfd;
}
.faq-contents h2 {
  margin: 0 0 .7em;
  font-size: .78rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: #5b636d;
}
.faq-contents ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .45em;
}
.faq-contents a {
  color: #333;
  text-decoration: none;
  font-size: .95rem;
  line-height: 1.4;
  border-bottom: 1px solid transparent;
}
.faq-contents a:hover { color: var(--brand-orange); border-bottom-color: var(--brand-orange); }

/* ---------- Cluster page: the questions ---------- */
.faq-list { max-width: 760px; }
.faq-item { margin: 0 0 2em; scroll-margin-top: 1.5rem; }
.faq-item h2 {
  font-size: 1.18rem;
  line-height: 1.35;
  margin: 0 0 .6em;
  padding-top: 1.1em;
  border-top: 1px solid #e2e2e2;
}
.faq-item:first-child h2 { padding-top: 0; border-top: 0; }
.faq-item p { margin: 0 0 1em; }

/* ---------- Related pages, on both the hub and a cluster page ---------- */
.faq-related {
  max-width: 760px;
  margin: 2.4em 0 1.4em;
  padding: 1.1rem 1.3rem;
  border: 1px solid #dfe3e8;
  border-radius: 8px;
  background: #fbfcfd;
}
.faq-related h2 {
  margin: 0 0 .7em;
  font-size: .78rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: #5b636d;
}
.faq-related ul { margin: 0; padding-left: 1.1em; }
.faq-related li { margin-bottom: .4em; font-size: .95rem; }
.faq-related a { color: var(--brand-orange); font-weight: 600; text-decoration: none; }
.faq-related a:hover { text-decoration: underline; }

/* ---------- Dark themes ----------
   styles.css switches themes with a class on <body>, so the panels and
   hairlines that are fixed light neutrals above have to be restated here.
   Everything already using a theme variable needs no restatement. */
body.theme-dark .faq-audience a,
body.theme-dark-white .faq-audience a { border-color: #333; }
body.theme-dark .faq-audience-blurb,
body.theme-dark .faq-group-desc { color: #bbb; }
body.theme-dark .faq-group h2,
body.theme-dark .faq-contents h2,
body.theme-dark .faq-related h2 { color: #aab2bb; }
body.theme-dark .faq-group h2,
body.theme-dark .faq-group-list li,
body.theme-dark .faq-item h2 { border-color: #333; }
body.theme-dark .faq-contents,
body.theme-dark .faq-related { background: #151515; border-color: #333; }
body.theme-dark .faq-contents a { color: #ddd; }

@media (max-width: 600px) {
  .faq-audience-grid { grid-template-columns: 1fr; }
  .faq-contents, .faq-related { padding: 1rem; }
}