/* Answer pages: the hub and one page per question.
 *
 * Served from the assembly at:
 *   /_content/Bindingstone.WebKit/css/answers.css
 *
 * Load it AFTER base.css and AFTER the site's own stylesheet, and only on sites
 * that register an answer bank.
 *
 * A separate file rather than an addition to base.css, because base.css is
 * mechanics with zero brand opinions and this is a component. It reads only
 * from the token contract every client already defines (--ink, --paper,
 * --gutter, --wrap, --font-display, --section-pad) plus four common ones with
 * fallbacks (--action, --surface, --bord, --ink-2), so it inherits a client's
 * brand without knowing anything about it and still renders sanely on a site
 * that defines none of them.
 *
 * The measure is deliberately narrow. These pages are read, not scanned, and a
 * 42rem column is the width prose is legible at. Everything else on a
 * contractor site is a landing band; this is a document.
 */

.ans-narrow {
  width: min(100% - 2 * var(--gutter, 20px), var(--wrap-text, 42rem));
  margin-inline: auto;
}

/* ------------------------------------------------------------ breadcrumb -- */

.ans-crumbs {
  border-bottom: 1px solid rgba(128, 128, 128, .25);
  font-size: .85rem;
  padding-block: .7rem;
}

.ans-crumbs .wrap {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  align-items: baseline;
  color: var(--ink-2, #444);
}

.ans-crumbs a { color: inherit; text-decoration: none; }
.ans-crumbs a:hover { text-decoration: underline; }
.ans-crumbs span[aria-hidden] { opacity: .45; }

/* ------------------------------------------------------------------ head -- */

/* PAINT A FOREGROUND WHEREVER YOU PAINT A BACKGROUND.
   .ans-head and .ans-cta set a light background and let the text color
   inherit, which is right on a light site and invisible on a dark one. All
   American Concrete Coating is a dark navy site with light body text, so its
   answer pages shipped an H1 in cream on cream and a CTA band of white on
   white. Neither is visible in the source. Both are obvious in a screenshot.
   Every band that sets a background now sets its own ink.

   The borders below stopped reading --bord for the same class of reason: that
   token is a color on one client and a full "1px solid rgba(...)" shorthand on
   another, so "1px solid var(--bord)" is invalid on the second and the rule is
   dropped. A neutral gray reads on a light ground and on a dark one and needs
   no token at all. */
.ans-head {
  padding-block: clamp(2.25rem, 5vw, 3.75rem) clamp(1.5rem, 3vw, 2.25rem);
  background: var(--paper, #fff);
  color: var(--ink, #1c1c1e);
}

.ans-kick {
  font-family: var(--font-display, inherit);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--action, #1c1c1e);
  margin: 0 0 .6rem;
}

.ans-head h1 {
  font-size: clamp(1.75rem, 4.5vw, 2.6rem);
  margin: 0 0 1rem;
  text-wrap: balance;
  color: var(--ink, #1c1c1e);
}

/* THE ANSWER. First thing under the H1, one sentence, complete on its own.
   Set larger than the body on purpose: it is the sentence the page exists to
   deliver and the one an answer engine lifts. */
.ans-answer {
  font-size: clamp(1.08rem, 2.2vw, 1.3rem);
  line-height: 1.5;
  font-weight: 500;
  margin: 0;
  color: var(--ink, #1c1c1e);
}

.ans-count {
  margin: 1rem 0 0;
  font-size: .92rem;
  color: var(--ink-2, #444);
}

/* ----------------------------------------------------------------- bands -- */

.ans-band { padding-block: clamp(1.75rem, 3.5vw, 2.75rem); }
.ans-band--alt { background: var(--surface-2, rgba(0, 0, 0, .035)); }

.ans-band h2 {
  font-size: clamp(1.15rem, 2.6vw, 1.45rem);
  margin: 0 0 .85rem;
}

.ans-band h3 {
  font-size: 1.05rem;
  margin: 0 0 .35rem;
}

.ans-band p {
  margin: 0 0 1rem;
  max-width: 40rem;
}

.ans-band p:last-child { margin-bottom: 0; }

.ans-lede {
  color: var(--ink-2, #444);
}

/* ----------------------------------------------------------------- facts -- */

/* The numbers, together, in one block. This is what gets lifted when an engine
   wants a figure rather than a paragraph, and keeping them here instead of
   scattered through the prose is most of why these pages get quoted. */
.ans-facts {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: .55rem;
}

.ans-facts li {
  position: relative;
  padding-left: 1.15rem;
  line-height: 1.5;
}

.ans-facts li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .62em;
  width: .45rem;
  height: .45rem;
  background: var(--action, #1c1c1e);
}

/* ----------------------------------------------------- links and sources -- */

.ans-links,
.ans-src {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: .5rem;
}

.ans-links a,
.ans-src a {
  color: var(--action, #1c1c1e);
  font-weight: 600;
  text-decoration: none;
}

.ans-links a:hover,
.ans-src a:hover { text-decoration: underline; }

.ans-src { font-size: .92rem; color: var(--ink-2, #444); }

/* ------------------------------------------------------------------- hub -- */

.ans-list { display: grid; gap: 1.4rem; }

.ans-item {
  border-top: 1px solid rgba(128, 128, 128, .25);
  padding-top: 1.1rem;
}

.ans-item h3 { margin: 0 0 .35rem; }

.ans-item h3 a {
  color: var(--ink, #1c1c1e);
  text-decoration: none;
}

.ans-item h3 a:hover { color: var(--action, #1c1c1e); }

.ans-item p {
  margin: 0;
  color: var(--ink-2, #444);
}

/* ------------------------------------------------------------------- cta -- */

.ans-cta {
  background: var(--surface, var(--paper, #fff));
  color: var(--ink, #1c1c1e);
  border-top: 1px solid rgba(128, 128, 128, .25);
  padding-block: clamp(2rem, 4vw, 3rem);
}

.ans-cta h2,
.ans-cta p { color: var(--ink, #1c1c1e); }

.ans-cta__row {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin: 1.25rem 0 0;
}

.ans-btn {
  display: inline-block;
  padding: .8rem 1.4rem;
  background: var(--action, #1c1c1e);
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  border-radius: var(--radius-ctl, var(--radius, 0));
  border: 2px solid var(--action, #1c1c1e);
}

.ans-btn:hover { background: var(--action-deep, var(--action, #1c1c1e)); }

.ans-btn--ghost {
  background: transparent;
  color: var(--action, #1c1c1e);
}

.ans-btn--ghost:hover {
  background: var(--action, #1c1c1e);
  color: #fff;
}

/* ------------------------------------------------------------- hub jump -- */

/* The hub prints every answer sentence, which is what makes it quotable and
   what makes it long. On a phone that is thirty seven answers of scrolling
   before the last topic, so the topics get a jump list. */
.ans-jump {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: 1.5rem;
}

.ans-jump a {
  display: inline-flex;
  align-items: baseline;
  gap: .4rem;
  padding: .4rem .7rem;
  border: 1px solid rgba(128, 128, 128, .3);
  color: var(--ink, #1c1c1e);
  font-size: .9rem;
  text-decoration: none;
  border-radius: var(--radius-ctl, var(--radius, 0));
}

.ans-jump a:hover {
  border-color: var(--action, #1c1c1e);
  color: var(--action, #1c1c1e);
}

.ans-jump span {
  font-size: .78rem;
  color: var(--steel, #6b6b70);
}

/* Anchored headings must clear a sticky header. */
.ans-band[id] { scroll-margin-top: 5rem; }