/* Drake KB — Note / Important / Caution / Tip / Warning callout boxes.
 *
 * migration/transform.py normalises every MadCap callout to:
 *     <div class="kb-callout kb-callout-note">
 *       <p><span class="kb-callout-label">Note</span> body text…</p>
 *     </div>
 * (the container is sometimes a <p>, and the body is sometimes a <ul>).
 *
 * Look: pale tinted fill, thick colored left bar, a circular glyph at the left
 * and an uppercase bold label that sits inline at the start of the first line.
 * All glyphs are inline SVG data-URIs — no external assets, no icon fonts.
 *
 * Scoped to the article body, search results, and the block editor canvas
 * (`.editor-styles-wrapper` — callouts are not wrapped in `.betterdocs-entry-content`
 * while editing).
 *
 * WHY `.drake-search` IS A THIRD SCOPE
 * The search results page (mu-plugins/drake-kb-search/template.php) renders a TIP
 * box of search guidance, and it must look like every other TIP in the KB. The
 * alternative — a bespoke `.drake-search__tip` in search.css — would have had to
 * restate this file's geometry AND its three green hexes, including
 * --kb-callout-label: #2b6e33, which exists only because the natural green failed
 * WCAG AA at 3.13:1. Duplicating an accessibility fix is how it comes undone: the
 * next contrast pass would fix one copy. So the search page reuses the real
 * classes and the scope list grew by one instead.
 *
 * Purely additive: `.drake-search` exists only on the search results page, so
 * these selectors cannot match anything inside the 2,253 imported articles.
 */

:is(.editor-styles-wrapper, .betterdocs-entry-content, .drake-doc-main, .drake-search) .kb-callout {
  /* Per-type overrides only need to set these three custom properties. */
  --kb-callout-accent: var(--drake-blue, #1b75bc);
  --kb-callout-fill: var(--drake-blue-tint, #eaf2fa);
  --kb-callout-glyph: none;

  position: relative;
  box-sizing: border-box;
  margin: 1.15em 0;
  padding: 14px 20px 14px 52px;
  border-left: 6px solid var(--kb-callout-accent);
  border-radius: 3px;
  background-color: var(--kb-callout-fill);
  color: var(--drake-ink, #202124);
  font-family: var(--drake-font, inherit);
  font-size: 1rem;
  line-height: 1.6;
}

/* The circular glyph, pinned to the left gutter created by the padding. */
:is(.editor-styles-wrapper, .betterdocs-entry-content, .drake-doc-main, .drake-search) .kb-callout::before {
  content: "";
  position: absolute;
  top: 15px;
  left: 16px;
  width: 20px;
  height: 20px;
  background-color: var(--kb-callout-accent);
  background-image: var(--kb-callout-glyph);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 20px 20px;
  border-radius: 50%;
}

/* Body: kill the theme's paragraph margins so the box hugs its content. */
:is(.editor-styles-wrapper, .betterdocs-entry-content, .drake-doc-main, .drake-search) .kb-callout > :first-child {
  margin-top: 0;
}

:is(.editor-styles-wrapper, .betterdocs-entry-content, .drake-doc-main, .drake-search) .kb-callout > :last-child {
  margin-bottom: 0;
}

:is(.editor-styles-wrapper, .betterdocs-entry-content, .drake-doc-main, .drake-search) .kb-callout p {
  font-size: inherit;
  line-height: inherit;
}

:is(.editor-styles-wrapper, .betterdocs-entry-content, .drake-doc-main, .drake-search) .kb-callout ul,
:is(.editor-styles-wrapper, .betterdocs-entry-content, .drake-doc-main, .drake-search) .kb-callout ol {
  margin: 0.5em 0 0;
  padding-left: 1.4em;
}

:is(.editor-styles-wrapper, .betterdocs-entry-content, .drake-doc-main, .drake-search) .kb-callout > ul:first-child,
:is(.editor-styles-wrapper, .betterdocs-entry-content, .drake-doc-main, .drake-search) .kb-callout > ol:first-child {
  margin-top: 0.35em;
}

/* The label reads as a small-caps lead-in on the first line of the body.
 *
 * Coloured from --kb-callout-label, NOT --kb-callout-accent. The accent does
 * three jobs: the left bar, the glyph circle's fill, and this text. Only the
 * text carries a WCAG contrast requirement (4.5:1 for body size), and three of
 * the six variants failed it against their own pale fill — note 4.30, tip 3.13,
 * caution 2.56. Darkening the accent itself would have altered every bar and
 * glyph on the site to fix text, so each variant sets a label colour separately
 * and the bars keep Drake's exact hues. Falls back to the accent so a new
 * variant still renders if it forgets to set one. */
:is(.editor-styles-wrapper, .betterdocs-entry-content, .drake-doc-main, .drake-search) .kb-callout-label {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.85em;
  color: var(--kb-callout-label, var(--kb-callout-accent));
}

:is(.editor-styles-wrapper, .betterdocs-entry-content, .drake-doc-main, .drake-search) .kb-callout-label::after {
  content: "";
  display: inline-block;
  width: 0.35em;
}

/* A label-only container (no <p> wrapper, body is a list) still needs the label
 * on its own line rather than floating beside the first bullet. */
:is(.editor-styles-wrapper, .betterdocs-entry-content, .drake-doc-main, .drake-search) .kb-callout > .kb-callout-label {
  display: block;
}

/* --- Per type -------------------------------------------------------------
 * Glyphs: (i) note, (!) important/caution/warning, lightbulb-ish tip. Each is
 * a white shape on the accent-colored circle drawn by ::before.
 */

/* NOTE — Drake blue, pale blue fill, (i) */
:is(.editor-styles-wrapper, .betterdocs-entry-content, .drake-doc-main, .drake-search) .kb-callout-note {
  --kb-callout-accent: var(--drake-blue, #1b75bc);
  --kb-callout-fill: var(--drake-blue-tint, #eaf2fa);
  /* 4.30:1 on the fill; the darker brand blue is 6.03:1. */
  --kb-callout-label: var(--drake-blue-dark, #155e97);
  --kb-callout-glyph: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><circle cx="10" cy="5.6" r="1.35" fill="%23fff"/><rect x="8.75" y="8.4" width="2.5" height="7.2" rx="1.25" fill="%23fff"/></svg>');
}

/* IMPORTANT — near-black bar, pale yellow fill, (!) */
:is(.editor-styles-wrapper, .betterdocs-entry-content, .drake-doc-main, .drake-search) .kb-callout-important {
  --kb-callout-accent: #4a4a4a;
  --kb-callout-fill: #fdf8dc;
  --kb-callout-glyph: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><rect x="8.75" y="4.4" width="2.5" height="7.6" rx="1.25" fill="%23fff"/><circle cx="10" cy="14.6" r="1.4" fill="%23fff"/></svg>');
}

/* CAUTION — amber bar, pale amber fill, (!) */
:is(.editor-styles-wrapper, .betterdocs-entry-content, .drake-doc-main, .drake-search) .kb-callout-caution {
  --kb-callout-accent: #d68910;
  --kb-callout-fill: #fdf3e2;
  /* Amber on pale amber is only 2.56:1 — the worst of the six. 5.12:1. */
  --kb-callout-label: #96590a;
  --kb-callout-glyph: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><rect x="8.75" y="4.4" width="2.5" height="7.6" rx="1.25" fill="%23fff"/><circle cx="10" cy="14.6" r="1.4" fill="%23fff"/></svg>');
}

/* WARNING — red bar, pale red fill, (!) */
:is(.editor-styles-wrapper, .betterdocs-entry-content, .drake-doc-main, .drake-search) .kb-callout-warning {
  --kb-callout-accent: #c0392b;
  --kb-callout-fill: #fdecea;
  --kb-callout-glyph: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><rect x="8.75" y="4.4" width="2.5" height="7.6" rx="1.25" fill="%23fff"/><circle cx="10" cy="14.6" r="1.4" fill="%23fff"/></svg>');
}

/* TIP — green bar, very pale green fill, lightbulb */
:is(.editor-styles-wrapper, .betterdocs-entry-content, .drake-doc-main, .drake-search) .kb-callout-tip {
  --kb-callout-accent: #3f9c4b;
  --kb-callout-fill: #eaf7ec;
  /* 3.13:1 on the fill; this green is 5.62:1. */
  --kb-callout-label: #2b6e33;
  --kb-callout-glyph: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M10 3.6a4.1 4.1 0 0 0-2.3 7.5v1.3h4.6v-1.3A4.1 4.1 0 0 0 10 3.6z" fill="%23fff"/><rect x="8.3" y="13.4" width="3.4" height="1.3" rx="0.65" fill="%23fff"/><rect x="8.9" y="15.5" width="2.2" height="1.1" rx="0.55" fill="%23fff"/></svg>');
}

/* NEW — a handful of source articles use a "New" box; treat it like a note but
 * in Drake green so it reads as an addition rather than a warning. */
:is(.editor-styles-wrapper, .betterdocs-entry-content, .drake-doc-main, .drake-search) .kb-callout-new {
  --kb-callout-accent: #3f9c4b;
  --kb-callout-fill: #eaf7ec;
  /* 3.13:1 on the fill; this green is 5.62:1. */
  --kb-callout-label: #2b6e33;
  --kb-callout-glyph: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M10 4.2l1.5 3.1 3.4.5-2.5 2.4.6 3.4L10 12l-3 1.6.6-3.4-2.5-2.4 3.4-.5z" fill="%23fff"/></svg>');
}

/* Nested callouts (rare) shouldn't compound the indent. */
:is(.editor-styles-wrapper, .betterdocs-entry-content, .drake-doc-main, .drake-search) .kb-callout .kb-callout {
  margin-left: 0;
}

@media (max-width: 600px) {
  :is(.editor-styles-wrapper, .betterdocs-entry-content, .drake-doc-main, .drake-search) .kb-callout {
    padding: 12px 14px 12px 44px;
  }
  :is(.editor-styles-wrapper, .betterdocs-entry-content, .drake-doc-main, .drake-search) .kb-callout::before {
    left: 12px;
  }
}