/* ============================================================
   EUDR guide page
   ============================================================ */

.guide { padding-block: 4rem; }

@media (min-width: 768px) {
  .guide { padding-block: 6rem; }
}

.guide__layout {
  display: -ms-grid;
  display: grid;
  gap: 3rem;
}

@media (min-width: 1024px) {
  .guide__layout { -ms-grid-columns: 260px minmax(0, 1fr); grid-template-columns: 260px minmax(0, 1fr); }

  .guide__toc {
    position: sticky;
    top: 7rem;
    -ms-grid-row-align: start;
        align-self: start;
  }
}

.guide__toc { font-size: 0.875rem; }

.guide__toc .eyebrow { margin-bottom: 0.75rem; }

.guide__toc-links {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  color: color-mix(in oklab, var(--color-foreground) 80%, transparent);
}

.guide__toc-links a:hover { color: var(--color-amber-timber); }

.guide__article {
  max-width: 48rem;
  display: -ms-grid;
  display: grid;
  gap: 3.5rem;
  color: var(--color-foreground);
}

.guide-lede {
  font-size: 1.125rem;
  line-height: 1.625;
  color: color-mix(in oklab, var(--color-foreground) 85%, transparent);
}

.guide-section {
  scroll-margin-top: 7rem;
}

.guide-section h2 {
  font-family: var(--font-serif);
  font-size: 1.5rem;
}

@media (min-width: 768px) {
  .guide-section h2 { font-size: 1.875rem; }
}

.guide-section__body {
  margin-top: 1rem;
  display: -ms-grid;
  display: grid;
  gap: 1rem;
  font-size: 15px;
  line-height: 1.625;
  color: color-mix(in oklab, var(--color-foreground) 90%, transparent);
}

/* Callouts */
.callout {
  border-radius: var(--radius-xl);
  border: 1px solid;
  padding: 1.25rem;
}

.callout--amber {
  border-color: color-mix(in oklab, var(--color-amber-timber) 30%, transparent);
  background: color-mix(in oklab, var(--color-amber-timber) 5%, transparent);
}

.callout--forest {
  border-color: color-mix(in oklab, var(--color-forest-deep) 20%, transparent);
  background: color-mix(in oklab, var(--color-forest-deep) 5%, transparent);
}

.callout__head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-serif);
}

.callout__icon { color: var(--color-amber-timber); }

.callout__body {
  margin-top: 0.5rem;
  font-size: 0.875rem;
  color: color-mix(in oklab, var(--color-foreground) 85%, transparent);
}

.callout__list {
  display: -ms-grid;
  display: grid;
  gap: 0.25rem;
}

/* Three pillars */
.pillars {
  display: -ms-grid;
  display: grid;
  gap: 1rem;
}

@media (min-width: 768px) {
  .pillars { -ms-grid-columns: (1fr)[3]; grid-template-columns: repeat(3, 1fr); }
}

.pillar {
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-border);
  background: oklch(1 0 0);
  padding: 1.25rem;
}

.pillar__head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--color-amber-timber);
}

.pillar__title {
  font-family: var(--font-serif);
  font-size: 1rem;
  color: var(--color-foreground);
}

.pillar__body {
  margin-top: 0.5rem;
  font-size: 0.875rem;
  color: color-mix(in oklab, var(--color-foreground) 85%, transparent);
}

/* Numbered filing steps */
.decimal-list {
  list-style: decimal;
  padding-left: 1.5rem;
  display: -ms-grid;
  display: grid;
  gap: 0.5rem;
}

/* Pre-shipment checklist */
.checklist {
  display: -ms-grid;
  display: grid;
  gap: 0.75rem;
}

.checklist__item {
  display: flex;
  gap: 0.75rem;
}

.checklist__icon {
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
  color: var(--color-amber-timber);
}

/* FAQ */
.guide-faq {
  display: -ms-grid;
  display: grid;
  gap: 1.5rem;
}

.guide-faq__q {
  font-family: var(--font-serif);
  font-size: 1.125rem;
}

.guide-faq__a {
  margin-top: 0.5rem;
  color: color-mix(in oklab, var(--color-foreground) 85%, transparent);
}

/* "How GTH helps" panel */
.guide-help {
  border-radius: 1rem;
  border: 1px solid var(--color-border);
  background: color-mix(in oklab, var(--color-muted) 40%, transparent);
  padding: 1.5rem;
}

@media (min-width: 768px) {
  .guide-help { padding: 2rem; }
}

.guide-help__head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.guide-help__icon { color: var(--color-amber-timber); }

.guide-help__title {
  margin-top: 0.75rem;
  font-family: var(--font-serif);
  font-size: 1.5rem;
}

.guide-help__body {
  margin-top: 0.75rem;
  color: color-mix(in oklab, var(--color-foreground) 85%, transparent);
}

.guide-help__actions {
  margin-top: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.guide-help__cta {
  padding-block: 0.625rem;
  font-size: 0.75rem;
}

.guide-help__link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: 9999px;
  border: 1px solid var(--color-border);
  padding: 0.5rem 1rem;
  font-size: 0.75rem;
  -webkit-transition: background-color 150ms ease;
  transition: background-color 150ms ease;
}

.guide-help__link:hover { background: oklch(1 0 0); }