/* ==========================================================================
   IndoSpiceHub — Knowledge Center Article Template
   Page-specific styles only. Header, footer, hero (incl. the charcoal tint
   variant), breadcrumb, buttons, FAQ accordion, and article/related-article
   cards all come from components.css and knowledge-center.css — nothing
   is redefined here. This file adds exactly what a long-form article needs
   that no other page on the site has: meta row, quick summary, sticky TOC,
   prose typography, comparison tables, two callout types, and prev/next
   pagination.
   ========================================================================== */

/* ---------- Article meta row (Reading Time + Published + Updated) ----------
   Sits beneath the hero subtitle. Reuses the icon+text visual language
   already established by .article-card__meta .time on the Knowledge
   Center listing page. */
.article-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}
.article-meta-row__item {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.875rem;
  color: var(--color-ivory);
  opacity: 0.85;
}
.article-meta-row__item svg { width: 16px; height: 16px; flex-shrink: 0; }

/* ---------- Quick Summary ----------
   A left-accented callout immediately after the hero — the same visual
   device as .rfq-response-note (contact.css), reused at article scale so
   a busy procurement reader gets the takeaway before the full read. */
.quick-summary {
  border-left: 2px solid var(--color-gold-500);
  background: var(--color-ivory-deep);
  padding: var(--space-4) var(--space-5);
}
.quick-summary__label {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-gold-600);
  margin-bottom: var(--space-2);
}
.quick-summary ul { display: flex; flex-direction: column; gap: 0.6rem; }
.quick-summary li {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  color: var(--color-charcoal-60);
  font-size: 0.9375rem;
  line-height: var(--leading-normal);
}
.quick-summary li::before {
  content: '';
  width: 14px; height: 1px;
  background: var(--color-gold-500);
  margin-top: 0.7em;
  flex-shrink: 0;
}

/* ---------- Article layout — sticky TOC + content ----------
   Single column on mobile and tablet. At 1024px+, a narrow sticky sidebar
   sits beside a reading-width content column. Below 1024px the TOC is
   a collapsible <details> element instead of disappearing outright, so
   mobile readers still get a jump-list — just not a persistent one. */
.article-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  align-items: start;
}
@media (min-width: 1024px) {
  .article-layout { grid-template-columns: 240px 1fr; gap: var(--space-8); }
}

/* ---------- Table of Contents ----------
   Mobile/tablet: a collapsible <details> (native, keyboard accessible,
   zero JS). Desktop (1024px+): the <summary> is hidden and the list
   becomes a persistent sticky sidebar. */
.article-toc {
  border: 1px solid var(--color-border);
  padding: var(--space-3) var(--space-4);
}
@media (min-width: 1024px) {
  .article-toc {
    position: sticky;
    top: 104px;
    border: none;
    padding: 0;
  }
}
.article-toc__summary {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-gold-600);
  cursor: pointer;
  list-style: none;
}
.article-toc__summary::-webkit-details-marker { display: none; }
.article-toc__summary::after {
  content: '';
  display: inline-block;
  width: 8px; height: 8px;
  margin-left: 0.5em;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform var(--duration-fast) var(--ease-standard);
}
.article-toc[open] .article-toc__summary::after { transform: rotate(-135deg); }
@media (min-width: 1024px) {
  .article-toc__summary { display: none; }
}
.article-toc__list {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  border-left: 1px solid var(--color-border);
  margin-top: var(--space-3);
  padding-left: var(--space-2);
}
@media (min-width: 1024px) {
  .article-toc__list { margin-top: 0; padding-left: var(--space-2); }
}
.article-toc__list a {
  display: block;
  font-size: 0.875rem;
  color: var(--color-charcoal-60);
  line-height: var(--leading-snug);
  border-left: 1px solid transparent;
  margin-left: calc(-1 * var(--space-2) - 1px);
  padding-left: var(--space-2);
  transition: color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard);
}
.article-toc__list a:hover,
.article-toc__list a:focus-visible {
  color: var(--color-forest-700);
  border-left-color: var(--color-gold-500);
}

/* ---------- Article prose ----------
   Typography for the main content column. Reuses the site's existing
   type scale and colors; only line-length and vertical rhythm are
   specific to long-form reading. */
.article-content { max-width: 72ch; }
.article-content > * + * { margin-top: var(--space-3); }

.article-content h2 {
  font-size: var(--text-h3);
  margin-top: var(--space-6);
  scroll-margin-top: 104px;
}
.article-content > h2:first-child { margin-top: 0; }

.article-content h3 {
  font-size: var(--text-h5);
  margin-top: var(--space-5);
  scroll-margin-top: 104px;
}

.article-content p {
  color: var(--color-charcoal-60);
  font-size: var(--text-body-lg);
  line-height: var(--leading-normal);
}

.article-content ul,
.article-content ol {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding-left: 1.4rem;
}
.article-content ul { list-style: none; }
.article-content ul li {
  position: relative;
  color: var(--color-charcoal-60);
  font-size: var(--text-body-lg);
  line-height: var(--leading-normal);
}
.article-content ul li::before {
  content: '';
  position: absolute;
  left: -1.4rem;
  top: 0.75em;
  width: 14px; height: 1px;
  background: var(--color-gold-500);
}
.article-content ol { list-style: decimal; color: var(--color-charcoal-60); }
.article-content ol li { font-size: var(--text-body-lg); line-height: var(--leading-normal); padding-left: 0.3rem; }
.article-content ol li::marker { font-family: var(--font-display); color: var(--color-gold-600); font-weight: 600; }

.article-content a:not(.btn):not(.btn--text) {
  color: var(--color-forest-700);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--color-gold-500);
}
.article-content a:not(.btn):not(.btn--text):hover { color: var(--color-gold-600); }
.article-content strong { color: var(--color-charcoal); font-weight: 600; }

.article-content blockquote {
  border-left: 2px solid var(--color-gold-500);
  padding-left: var(--space-4);
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-h6);
  color: var(--color-forest-900);
  line-height: var(--leading-snug);
}

/* ---------- Comparison table ----------
   Hairline borders only, matching the brand's existing .spec-table /
   .who-grid__facts aesthetic. Horizontally scrollable rather than
   forced to squeeze or overflow the viewport. */
.article-table-wrap { overflow-x: auto; }
.article-table {
  width: 100%;
  min-width: 480px;
  border-collapse: collapse;
  font-size: 0.9375rem;
}
.article-table caption { text-align: left; font-size: 0.8125rem; color: var(--color-charcoal-60); margin-bottom: var(--space-2); }
.article-table th,
.article-table td { text-align: left; padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--color-border); }
.article-table th { font-family: var(--font-body); font-weight: 600; color: var(--color-forest-900); border-bottom: 2px solid var(--color-gold-500); white-space: nowrap; }
.article-table td { color: var(--color-charcoal-60); }

/* ---------- Callouts: Export Insight / Buyer Tip / Common Mistake ----------
   Same structural family (icon + label + content, left-accented block)
   so all three read as siblings — differentiated by icon and accent
   rather than an alarm palette this brand doesn't use. */
.callout { padding: var(--space-4) var(--space-5); border: 1px solid var(--color-border-dark); }
.callout__header { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-2); }
.callout__icon { width: 32px; height: 32px; flex-shrink: 0; display: grid; place-items: center; border-radius: 50%; }
.callout__icon svg { width: 16px; height: 16px; }
.callout__label { font-family: var(--font-body); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; margin: 0; }
.callout p, .callout li { color: var(--color-charcoal-60); font-size: 0.9375rem; line-height: var(--leading-normal); }
.callout ul { display: flex; flex-direction: column; gap: 0.5rem; margin-top: var(--space-2); }
.callout ul li { display: flex; gap: 0.6rem; align-items: flex-start; }
.callout ul li::before { content: '—'; color: var(--color-gold-500); flex-shrink: 0; }

.callout--insight { background: var(--color-forest-900); border-color: var(--color-border-dark); }
.callout--insight .callout__icon { background: var(--color-gold-500); color: var(--color-forest-900); }
.callout--insight .callout__label { color: var(--color-gold-200); }
.callout--insight p, .callout--insight li { color: var(--color-ivory); opacity: 0.85; }

.callout--tip { background: var(--color-ivory-deep); border-color: var(--color-border); border-left: 3px solid var(--color-gold-500); }
.callout--tip .callout__icon { background: var(--color-white); color: var(--color-gold-600); border: 1px solid var(--color-gold-500); }
.callout--tip .callout__label { color: var(--color-gold-600); }

.callout--mistake { background: var(--color-white); border-color: var(--color-border); border-left: 3px solid var(--color-forest-700); }
.callout--mistake .callout__icon { background: var(--color-ivory-deep); color: var(--color-forest-700); border: 1px solid var(--color-border); }
.callout--mistake .callout__label { color: var(--color-forest-700); }
.callout__item + .callout__item { margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--color-border); }
.callout__item h3 {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--color-charcoal);
  margin-bottom: 0.3rem;
}
.callout__item p { margin: 0; }

/* ---------- Previous / Next article navigation ---------- */
.article-pagination {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--color-border);
  border: 1px solid var(--color-border);
}
@media (min-width: 640px) { .article-pagination { grid-template-columns: 1fr 1fr; } }
.article-pagination__link { display: flex; flex-direction: column; gap: 0.5rem; padding: var(--space-4); background: var(--color-white); transition: background var(--duration-fast) var(--ease-standard); }
.article-pagination__link:hover { background: var(--color-ivory-deep); }
.article-pagination__link--next { text-align: right; align-items: flex-end; }
.article-pagination__dir { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-gold-600); }
.article-pagination__dir svg { width: 14px; height: 14px; }
.article-pagination__title { font-family: var(--font-display); font-size: var(--text-h6); color: var(--color-charcoal); max-width: 32ch; }

/* ---------- Knowledge Center listing: async-loaded card grids ----------
   Used only on knowledge-center.html. Static, real HTML cards render
   immediately (see that page); knowledge-center.js may replace them
   with cards built from article-index.json once fetched. This class
   just marks the swap point — no visual difference from a plain grid. */
.js-article-grid[data-loading="true"] { opacity: 0.6; transition: opacity var(--duration-base) var(--ease-standard); }

/* ---------- Article closing CTA: lede line + benefit list ----------
   Extends the shared .cta-band component (components.css) for the
   article-ending "Speak with Our Export Team" block. Only additive —
   .cta-band itself is untouched, so every other page using it (product
   pages, export-capability, etc.) is unaffected. */
.cta-band__lede {
  font-size: 0.9375rem;
  letter-spacing: 0.02em;
  color: var(--color-gold-200);
  margin-bottom: var(--space-2);
}
.cta-band__list {
  list-style: none;
  display: inline-grid;
  gap: 0.5rem;
  margin: 0 auto var(--space-5);
  text-align: left;
  padding: 0;
}
@media (min-width: 640px) {
  .cta-band__list { grid-template-columns: repeat(2, auto); gap: 0.5rem 2rem; }
}
.cta-band__list li {
  position: relative;
  padding-left: 1.25rem;
  opacity: 0.9;
}
.cta-band__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 6px; height: 6px;
  background: var(--color-gold-500);
}

/* ---------- WhatsApp export-consultant cards (article CTA) ----------
   Same component used on contact.html (see css/contact.css); duplicated
   here at the same class names so article pages don't need to load an
   extra stylesheet. Keep both copies in sync if this pattern changes. */
.whatsapp-cards {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
}
@media (min-width: 640px) {
  .whatsapp-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .whatsapp-cards--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.whatsapp-card {
  padding: var(--space-5) var(--space-4);
  border: 1px solid var(--color-border);
  background: var(--color-white);
  text-align: center;
  transition: box-shadow var(--duration-base) var(--ease-standard), transform var(--duration-base) var(--ease-standard);
}
.whatsapp-card:hover { box-shadow: var(--shadow-hover); transform: translateY(-2px); }
.whatsapp-card__icon {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  margin: 0 auto var(--space-3);
  color: var(--color-gold-500);
}
.whatsapp-card__icon svg { width: 100%; height: 100%; }
.whatsapp-card__role {
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--color-gold-600);
  margin-bottom: var(--space-2);
}
.whatsapp-card__number {
  font-size: 0.9375rem;
  color: var(--color-charcoal-60);
  margin-bottom: var(--space-4);
}
.whatsapp-card__cta { width: 100%; }
.whatsapp-card__cta-icon { width: 18px; height: 18px; flex-shrink: 0; }

/* ==========================================================================
   SOURCE VERIFICATION PENDING MARKER
   Added during Knowledge Center article integration (see
   SOURCE-VERIFICATION-REPORT.md). Flags a claim in the article body that
   still carries an unresolved [Source Required] tag per ISEF-270 and has
   NOT been cleared for public/live publish. Discreet by design — visible
   enough for editorial review, not visually dominant, never deleted or
   replaced with an invented citation.
   ========================================================================== */
.source-pending {
  display: inline-block;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-charcoal-60, #6b6b66);
  background: var(--color-ivory, #F7F4EC);
  border: 1px solid var(--color-gold-200, #E4D3AE);
  border-radius: 3px;
  padding: 0.0625rem 0.375rem;
  margin-left: 0.375rem;
  vertical-align: middle;
  white-space: nowrap;
  cursor: help;
}