/* =================================================================
   SEO CONTENT COMPONENT - BEM
   Reusable supporting content section for calculator and tool pages
   ================================================================= */

.seo-content {
  margin-top: 3rem;
  padding-top: 2.5rem;
  border-top: 1px solid var(--color-gray-200, #e5e7eb);
}

.seo-content__container {
  max-width: 800px;
  margin: 0 auto;
}

.seo-content__title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-gray-800, #1f2937);
  margin-bottom: 1rem;
  line-height: 1.3;
}

.seo-content__text {
  margin-bottom: 2rem;
}

.seo-content__text p {
  color: var(--color-gray-600, #4b5563);
  line-height: 1.7;
  margin-bottom: 1rem;
}

.seo-content__text p:last-child {
  margin-bottom: 0;
}

/* Feature cards grid */
.seo-content__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  margin-bottom: 2rem;
}

.seo-content__card {
  background: var(--bg-card-alt, #f9fafb);
  border: 1px solid var(--color-gray-200, #e5e7eb);
  border-radius: 8px;
  padding: 1.25rem;
}

.seo-content__card h3 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-gray-800, #1f2937);
  margin-bottom: 0.5rem;
}

.seo-content__card p {
  font-size: 0.9375rem;
  color: var(--color-gray-500, #6b7280);
  line-height: 1.6;
  margin: 0;
}

/* CTA links section */
.seo-content__cta-links {
  margin-bottom: 2.5rem;
  padding: 1.25rem;
  background: var(--bg-primary-light, #f0f9ff);
  border-radius: 8px;
  border-left: 4px solid var(--color-primary, #0ea5e9);
}

.seo-content__cta-links p {
  color: var(--color-gray-700, #374151);
  line-height: 1.6;
  margin: 0;
}

.seo-content__cta-links a {
  color: var(--color-primary-dark, #0284c7);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.seo-content__cta-links a:hover {
  color: var(--color-primary-darker, #0369a1);
}

/* FAQ within seo-content reuses the existing .faq BEM component from guides */
.seo-content .faq {
  margin-bottom: 0;
}

.seo-content .faq__question {
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--color-gray-800, #1f2937);
  margin-bottom: 0.5rem;
}

.seo-content .faq__answer {
  font-size: 0.9375rem;
  color: var(--color-gray-500, #6b7280);
  line-height: 1.7;
}

/* Data table */
.seo-content__table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1.5rem;
  font-size: 0.9375rem;
}

.seo-content__table th,
.seo-content__table td {
  padding: 0.75rem 1rem;
  text-align: left;
  border-bottom: 1px solid var(--color-gray-200, #e5e7eb);
}

.seo-content__table th {
  background: var(--bg-card-alt, #f9fafb);
  font-weight: 600;
  color: var(--color-gray-700, #374151);
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.025em;
}

.seo-content__table td {
  color: var(--color-gray-600, #4b5563);
}

.seo-content__table tbody tr:hover {
  background: var(--bg-card-alt, #f9fafb);
}

/* Nearby locations grid */
.seo-content__nearby {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1rem;
}

.seo-content__nearby-link {
  display: inline-block;
  padding: 0.375rem 0.75rem;
  background: var(--bg-card-alt, #f9fafb);
  border: 1px solid var(--color-gray-200, #e5e7eb);
  border-radius: 6px;
  color: var(--color-primary-dark, #0284c7);
  font-size: 0.875rem;
  text-decoration: none;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.seo-content__nearby-link:hover {
  background: var(--bg-primary-light, #f0f9ff);
  border-color: var(--color-primary, #0ea5e9);
}

/* Responsive */
@media (max-width: 768px) {
  .seo-content__grid {
    grid-template-columns: 1fr;
  }

  .seo-content__title {
    font-size: 1.25rem;
  }

  .seo-content__table {
    font-size: 0.8125rem;
  }

  .seo-content__table th,
  .seo-content__table td {
    padding: 0.5rem 0.625rem;
  }
}


/* The cost table is wider than a phone. A display:block table with
   width:100% just crushes its columns and never scrolls — so the table
   lives in a scroll WRAPPER, and on mobile keeps a min-width that forces
   it past the viewport, producing a real horizontal scroll with an edge
   fade (same pattern as the guide .table-wrapper). */
.seo-content__table-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 768px) {
  .seo-content__table-wrapper {
    position: relative;
  }

  .seo-content__table-wrapper::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 28px;
    background: linear-gradient(to left, rgb(15 23 42 / 0.12), transparent);
    pointer-events: none;
  }

  .seo-content__table {
    min-width: 34rem;
  }
}

/* Component showcase (non-production /__components) — give each section and
   its inline component variants breathing room so the visual baselines read
   cleanly and adjacent tap targets are separated. */
.showcase__item {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-md);
  align-items: center;
  margin-bottom: var(--spacing-2xl);
  padding-bottom: var(--spacing-lg);
  border-bottom: 1px solid var(--color-border-light);
}

.showcase__label {
  flex-basis: 100%;
  margin: 0;
  font-size: var(--font-size-lg);
  color: var(--color-text-light);
}