/* --------------------------------------------------------------------------
 * Indiott — GEO / Answer Engine Layer
 * Themed section for the answer-first summary, FAQ accordion and related links.
 * Uses the child theme's design tokens (graphite ink, paper, signal orange,
 * IBM Plex, hairline borders, 2px radius, no heavy shadows). The .ind-faq
 * accordion styling is inherited from the theme stylesheet.
 * ----------------------------------------------------------------------- */

.ind-geo {
  background: var(--paper);
  border-top: 1px solid var(--steel-100);
  padding: 72px 0;
}
.ind-geo .ind-container { max-width: 1180px; }

/* Answer-first block — a highlighted lead the answer engines can extract. */
.ind-geo__answer {
  max-width: 76ch;
  margin: 0 0 56px;
  padding: 2px 0 2px 22px;
  border-left: 2px solid var(--signal);
}
.ind-geo__answer .ind-kicker { color: var(--signal-press); margin: 0 0 8px; }
.ind-geo__answer h2 {
  font-size: clamp(21px, 2.4vw, 28px);
  line-height: 1.22;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0 0 14px;
}
.ind-geo__lead {
  font-size: clamp(16.5px, 1.5vw, 19px);
  line-height: 1.62;
  color: var(--steel-700);
  margin: 0;
}

/* Attribution + review date. Only ever rendered when `updated` is explicitly set
   and parses as a real, non-future date — see indiott_geo_updated(). */
.ind-geo__meta {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.04em;
  color: var(--steel-500);
  margin: 14px 0 0;
}

/* Hero variant — the answer sits directly under the H1 and above the problem
   paragraph, so the first passage on the page is the one worth extracting. Sized
   down from the standalone block so it supports the H1 rather than competing
   with it, and constrained to the hero copy column's measure. */
.ind-geo__answer--hero {
  max-width: 54ch;
  margin: 0 0 22px;
  padding: 12px 0 12px 18px;
}
.ind-geo__answer--hero .ind-kicker { margin: 0 0 6px; }
.ind-geo__answer--hero h2 {
  font-size: clamp(17px, 1.6vw, 19.5px);
  line-height: 1.34;
  font-weight: 600;
  margin: 0 0 8px;
}
.ind-geo__answer--hero .ind-geo__lead {
  font-size: 17px;
  line-height: 1.58;
  color: var(--ink);
}
.ind-geo__answer--hero .ind-geo__meta { margin-top: 10px; }


/* FAQ — reuses the theme's .ind-faq <details> styling. */
.ind-geo__faq > h2 {
  font-size: clamp(26px, 3vw, 34px);
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0 0 24px;
}

/* Related internal links. */
.ind-geo__links {
  margin-top: 44px;
  padding-top: 26px;
  border-top: 1px solid var(--steel-100);
}
.ind-geo__links-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--steel-500);
  margin: 0 0 12px;
}
.ind-geo__links ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 12px;
}
.ind-geo__links a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  border: 1px solid var(--steel-300);
  border-radius: var(--r);
  padding: 8px 13px;
  transition: border-color 0.18s var(--ease), color 0.18s var(--ease);
}
.ind-geo__links a::before {
  content: '\2192';
  color: var(--signal-press);
  font-family: var(--font-mono);
}
.ind-geo__links a:hover { border-color: var(--signal); color: var(--signal-press); }

@media (max-width: 640px) {
  .ind-geo { padding: 52px 0; }
  .ind-geo__answer { margin-bottom: 40px; }
  .ind-geo__answer--hero { margin-bottom: 20px; padding-left: 14px; }
}

/* Buying facts. Answer engines strip header and footer, so the trading identity,
   lead time and phone number are repeated here in body copy. Reads as a quiet
   spec list rather than a CTA — it is there to be extracted, not to shout. */
.ind-geo__buy {
  margin-top: 32px;
  padding-top: 26px;
  border-top: 1px solid var(--steel-100);
}
.ind-geo__buy ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
  max-width: 68ch;
}
.ind-geo__buy li {
  position: relative;
  padding-left: 16px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--steel-600, #4a5568);
}
.ind-geo__buy li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 5px;
  height: 1px;
  background: var(--steel-400, #94a3b8);
}
.ind-geo__buy a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.ind-geo__buy a:hover { color: var(--signal-press); }