/* Logic grid demo page (/logicgrid_demo). The generator shell itself uses the
   shared maze_demo / wordsearch / crossword styles; this file only holds the
   page's own SEO content block. */

/* ── SEO content below the generator (#2123) ──
   It sits inside the preview column (.cw-col), which scrolls on its own, so
   the block is reached by scrolling the column: the .maze-app-layout shell is
   overflow:hidden and anything after the row would be unreachable. */
.logicgrid-seo {
  max-width: 820px;
  width: 100%;
  margin: 2rem auto 1rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--mg-border);
  color: var(--mg-text);
  line-height: 1.6;
}

.logicgrid-seo .logicgrid-seo-heading {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--mg-text);
  margin: 1.5rem 0 0.75rem;
}

.logicgrid-seo .logicgrid-seo-heading:first-child {
  margin-top: 0;
}

.logicgrid-seo-steps {
  padding-left: 1.25rem;
  margin-bottom: 0;
}

.logicgrid-seo-steps li + li {
  margin-top: 0.35rem;
}

.logicgrid-seo-card,
.logicgrid-seo-note {
  height: 100%;
  padding: 1rem 1.25rem;
  border: 1px solid var(--mg-border);
  border-radius: var(--mg-radius-lg);
  background: var(--mg-surface);
}

.logicgrid-seo-note {
  height: auto;
  margin-top: 1rem;
  border-left: 4px solid var(--mg-primary);
}

.logicgrid-seo-card h3,
.logicgrid-seo-note h3,
.logicgrid-seo-faq-item h3 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--mg-text);
  margin-bottom: 0.5rem;
}

.logicgrid-seo-card h3 i,
.logicgrid-seo-note h3 i {
  color: var(--mg-primary);
  margin-right: 0.35rem;
}

.logicgrid-seo-card p,
.logicgrid-seo-note p,
.logicgrid-seo-faq-item p {
  color: var(--mg-text-muted);
  margin-bottom: 0;
}

.logicgrid-seo-faq-item + .logicgrid-seo-faq-item {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--mg-border);
}

/* ── Print ── */
@media print {
  .logicgrid-seo {
    display: none !important;
  }
}

/* #2208: Mixed themes / Difficulty ramp under the Download Book row. */
.lg-book-options {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
  width: 100%;
  color: var(--mg-text);
  font-size: 0.9rem;
}

.lg-book-options .form-check {
  margin-bottom: 0;
}