/* styles/sections/seo-callouts.css
 * Callouts and boxed content on the SEO pages (BRI-7775): callout, mistake and solution notes,
 * the monospace diagrams, the with/without example box and the coming-soon box. */
@layer sections {
  .seo-page :where(.callout, .mistake-card) {
    --callout-accent: var(--fern);
  }

  .seo-page :is(.callout, .mistake-card) {
    margin-block: var(--space-32);
    padding: var(--space-24);
    border-left: 4px solid var(--callout-accent);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
  }

  .seo-page .mistake-card {
    --callout-accent: var(--error);
  }

  /* The "With Brief" note in a feature section: the callout inset without the rule, as it
     rendered before the swap */
  .seo-page .feature-section .solution-card {
    margin-block: var(--space-32);
    padding: var(--space-24);
  }

  .seo-page .callout p,
  .seo-page :is(.mistake-card, .feature-section .solution-card) p {
    margin: var(--space-8) 0 0;
  }

  .seo-page :is(.mistake-card, .feature-section .solution-card) > :is(h3, h4) {
    margin: 0 0 var(--space-8);
    font-size: var(--t-h5-size);
    line-height: var(--t-h5-lh);
    letter-spacing: var(--t-h5-ls);
  }

  .seo-page .mistake-card > :is(h3, h4) {
    color: var(--error);
  }

  /* Box-drawing diagrams: a scrollable region, so the page never scrolls sideways */
  .seo-page :is(.diagram-box, .loop-diagram) {
    margin-block: var(--space-32);
    padding: var(--space-32);
    overflow-x: auto;
    border: 1px solid var(--rule-cell);
    border-radius: var(--radius-md);
    white-space: pre;
  }

  .seo-page .loop-diagram {
    text-align: center;
  }

  /* With and without context */
  .seo-page .example-box {
    margin-block: var(--space-32);
    padding: var(--space-24);
    border: 1px solid var(--rule-cell);
    border-radius: var(--radius-md);
  }

  .seo-page .example-box > :is(h3, h4) {
    margin: 0;
    color: var(--ink-55);
  }

  .seo-page .example-box blockquote {
    margin: var(--space-16) 0 0;
    padding-inline-start: var(--space-16);
    border-left: 3px solid var(--rule-edge);
    font-style: italic;
  }

  .seo-page .example-box.with-context blockquote {
    border-left-color: var(--fern);
  }

  /* Coming soon */
  .seo-page .coming-soon-box {
    margin-block: var(--space-32);
    padding: var(--space-48);
    border: 2px dashed var(--rule-edge);
    border-radius: var(--radius-lg);
    text-align: center;
  }

  .seo-page .coming-soon-box :where(p) {
    margin-inline: auto;
  }

  .seo-page .coming-soon-box > :is(h3, h4) {
    margin: 0;
  }

  .seo-page .coming-soon-box .btn {
    margin-top: var(--space-16);
  }
}