/* SEO sections under each tool page (html/web/content/_seo_macros.jinja2).

   The wrapper is a second .pdf-landing, so this file only adds what the
   landing stylesheet and styles.css don't already have: the --pdf-* tokens
   (light and dark), .section-head, .eyebrow and the FAQ block come from
   landing.css, and the card look is the landing privacy card, shared in
   styles.css under .pdf-seo-card. */

.pdf-landing.pdf-seo {
  --pdf-seo-on-primary: #ffffff;
  max-width: 1008px;
  margin: 0 auto;
  padding: 64px 24px 96px;
  display: flex;
  flex-direction: column;
  gap: 88px;
}

/* White on the dark theme's lighter red is under 3:1; ink on it clears 7:1. */
body.theme-dark .pdf-landing.pdf-seo {
  --pdf-seo-on-primary: #1b1110;
}

/* The landing caps its centred section heads at 660px; these start on the
   left edge of the column, so they use its full width like the text below. */
.pdf-seo .section-head {
  max-width: none;
  margin-bottom: 28px;
}

/* Section headings sit under the page's own h1 (46px), so they step down
   from the landing's section size rather than matching the h1. */
.pdf-seo .section-head h2 {
  font-size: clamp(26px, 3.2vw, 34px);
}

.pdf-seo .section-head .dek {
  font-size: 17px;
}

/* landing.css strips every link inside .pdf-landing down to plain text for
   its cards; links inside running copy have to read as links again. */
.pdf-seo
  :is(
    .pdf-seo-prose,
    .pdf-seo-card,
    .pdf-seo-steps,
    .pdf-seo-uses,
    .data-table,
    .collapse-content-inner
  )
  a {
  color: var(--pdf-primary-ink);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
  text-underline-offset: 3px;
}

.pdf-seo
  :is(
    .pdf-seo-prose,
    .pdf-seo-card,
    .pdf-seo-steps,
    .pdf-seo-uses,
    .data-table,
    .collapse-content-inner
  )
  a:hover {
  text-decoration-color: currentColor;
}

/* ---- Running text ---- */
.pdf-seo-prose {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.pdf-seo-prose p {
  margin: 0;
  font-size: 16px;
  line-height: 1.7;
  color: var(--pdf-ink-2);
}

/* ---- Text beside a panel ---- */
.pdf-seo-split {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 40px;
  align-items: center;
}

.pdf-seo-split .pdf-seo-prose {
  max-width: none;
}

/* ---- Card grids: two or three across, always full rows ---- */
.pdf-seo-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pdf-seo-grid--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* ---- Two lists in one card ---- */
.pdf-seo-card.pdf-seo-pair {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 20px;
  align-items: start;
}

.pdf-seo-card.pdf-seo-pair .pdf-seo-pair-title {
  grid-column: auto;
  grid-row: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--pdf-ink);
}

.pdf-seo-pair-title i {
  color: var(--pdf-primary);
}

.pdf-seo-pair ul {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 14px;
  line-height: 1.45;
  color: var(--pdf-ink-2);
}

/* The option a tool starts on. */
.pdf-seo-card.is-default {
  border-color: var(--pdf-primary);
}

.pdf-seo-badge {
  margin-left: 6px;
  vertical-align: middle;
  background: var(--pdf-tint);
  color: var(--pdf-primary-ink);
  border: 1px solid var(--pdf-tint-2);
}

/* ---- Steps: one light panel, numbered from the list itself ---- */
.pdf-seo-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin: 0;
  padding: 28px;
  list-style: none;
  counter-reset: pdf-seo-step;
  background: var(--pdf-surface-2);
  border: 1px solid var(--pdf-line);
  border-radius: 20px;
}

.pdf-seo-steps--4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.pdf-seo-steps li {
  counter-increment: pdf-seo-step;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.pdf-seo-steps li::before {
  content: counter(pdf-seo-step);
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  margin-bottom: 8px;
  border-radius: 10px;
  background: var(--pdf-primary);
  color: var(--pdf-seo-on-primary);
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 14px;
  font-weight: 600;
}

.pdf-seo-steps h3,
.pdf-seo-uses h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--pdf-ink);
}

.pdf-seo-steps p,
.pdf-seo-uses p {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--pdf-ink-2);
}

/* ---- Situations: two columns, a short accent bar over each ---- */
.pdf-seo-uses {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px 40px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pdf-seo-uses li {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 16px;
}

.pdf-seo-uses li::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 28px;
  height: 3px;
  border-radius: 3px;
  background: var(--pdf-primary);
}

/* ---- Link card to the neighbouring tool (base action card) ---- */
.pdf-seo .pdf-seo-route {
  flex-direction: row;
  align-items: center;
  padding: 22px 24px;
  background: var(--pdf-surface);
  border-color: var(--pdf-line);
  box-shadow: none;
}

.pdf-seo .pdf-seo-route + .pdf-seo-route {
  margin-top: 12px;
}

.pdf-seo .pdf-seo-route .action-card-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  font-size: 18px;
  opacity: 1;
  background: var(--pdf-tint);
  color: var(--pdf-primary);
}

.pdf-seo .pdf-seo-route .action-card-title {
  font-size: 16px;
  color: var(--pdf-ink);
}

.pdf-seo .pdf-seo-route .action-card-description {
  color: var(--pdf-ink-2);
}

.pdf-seo-route-go {
  flex: none;
  color: var(--pdf-primary);
  transition: transform 0.2s ease;
}

.pdf-seo .pdf-seo-route:hover .pdf-seo-route-go {
  transform: translateX(3px);
}

/* ---- Comparison table ----
   On phones the base table keeps a 720px width and scrolls sideways, which
   hides the later columns with nothing to say they are there. These tables are
   short and every cell carries its column name, so they stack instead: one
   block per row, each value under its label. */
.pdf-seo-table {
  margin: 0;
}

@media (max-width: 767px) {
  .pdf-seo .pdf-seo-table.data-table-wrap {
    overflow: visible;
  }

  .pdf-seo .pdf-seo-table .data-table {
    min-width: 0;
  }

  .pdf-seo .pdf-seo-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .pdf-seo .pdf-seo-table :is(tbody, tr, td) {
    display: block;
  }

  .pdf-seo .pdf-seo-table tr {
    padding: 14px 16px;
    border-bottom: 1px solid var(--pdf-line);
  }

  .pdf-seo .pdf-seo-table tr:last-child {
    border-bottom: 0;
  }

  /* Beats the base's first-column rules (left padding, column divider). */
  .pdf-seo .pdf-seo-table.data-table-wrap .data-table td {
    padding: 0;
    border: 0;
  }

  .pdf-seo .pdf-seo-table td + td {
    margin-top: 8px;
  }

  .pdf-seo .pdf-seo-table td + td::before {
    content: attr(data-label);
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--pdf-ink-2);
  }
}

/* ---- FAQ: the landing block, fitted to this column ----
   The landing centres it at 900px and the base caps the list at 820px; here it
   runs the full column, on the same edge as every other section. */
.pdf-seo .pdf-faq {
  max-width: none;
  margin: 0;
  padding: 0;
}

.pdf-seo .pdf-faq .section-head {
  margin-bottom: 24px;
}

.pdf-seo .pdf-faq .pdf-faq-group {
  max-width: none;
  margin-top: 0;
}

/* ---- Tablet and phone ---- */
@media (max-width: 860px) {
  .pdf-landing.pdf-seo {
    gap: 64px;
  }

  .pdf-seo-split {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }

  .pdf-seo-steps--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .pdf-seo-grid,
  .pdf-seo-steps {
    grid-template-columns: minmax(0, 1fr);
  }

  .pdf-seo-grid--2,
  .pdf-seo-steps--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .pdf-landing.pdf-seo {
    padding: 48px 16px 72px;
    gap: 56px;
  }

  .pdf-seo-grid--2,
  .pdf-seo-steps--4,
  .pdf-seo-uses {
    grid-template-columns: minmax(0, 1fr);
  }

  .pdf-seo-steps {
    padding: 22px 20px;
  }

  .pdf-seo .pdf-seo-route {
    padding: 18px;
  }
}

@media (max-width: 400px) {
  .pdf-seo-card.pdf-seo-pair {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 18px;
  }
}