/*
 * Infobox / callout styling — "Option A": flat tint, accent edge, flat icon.
 *
 * Covers BOTH shapes with one set of rules:
 *   - legacy classic-editor markup:  <blockquote class="info|success|error">
 *   - the ix/infobox block:          <aside class="ix-infobox ix-infobox--info">
 *
 * Legacy markup cannot carry the .ix-el class, so the shared tokens in
 * tokens.css are out of reach here — the variant colours are declared locally.
 *
 * SPECIFICITY: the theme styles these at `.formatted-article blockquote.info`
 * (0,2,1) plus several responsive overrides at `.formatted-article
 * blockquote:where(.success,.info,.error)` (0,1,1) inside media queries. The
 * doubled `.info.info` below is a deliberate specificity bump to (0,3,1) so
 * these rules win regardless of stylesheet order OR breakpoint. It is not a
 * typo — do not "clean it up".
 */

/* ---------- variant palette ---------- */

.formatted-article blockquote.info.info,
.ix-infobox--info {
  --ix-box-tint: #f2f0fe;
  --ix-box-accent: #857bf5;
  --ix-box-icon: url(/wp-content/themes/ix-theme-snapshot/public/images/info--white.svg);
}

.formatted-article blockquote.success.success,
.ix-infobox--success {
  --ix-box-tint: #eaf7f0;
  --ix-box-accent: #1f9d63;
  --ix-box-icon: url(/wp-content/themes/ix-theme-snapshot/public/images/checkmark--white.svg);
}

.formatted-article blockquote.error.error,
.ix-infobox--error {
  --ix-box-tint: #fbedec;
  --ix-box-accent: #d2453c;
  --ix-box-icon: url(/wp-content/themes/ix-theme-snapshot/public/images/error--white.svg);
}

/* ---------- the box ---------- */

.formatted-article blockquote.info.info,
.formatted-article blockquote.success.success,
.formatted-article blockquote.error.error,
.ix-infobox {
  position: relative;
  margin: 32px 0;

  /* Left padding leaves room for the icon; the theme sets 5rem here (and
     5rem on top) at some breakpoints, both of which are replaced. */
  padding: 20px 24px 20px 56px;

  background: var(--ix-box-tint);
  border: 0;
  border-left: 3px solid var(--ix-box-accent);
  border-radius: 0;
  box-shadow: none;

  color: #121826;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 1.6;
  quotes: none;
}

/* Flat icon disc. Replaces the theme's gradient-and-drop-shadow circle,
   reusing the white SVGs the theme already ships. */
.formatted-article blockquote.info.info::before,
.formatted-article blockquote.success.success::before,
.formatted-article blockquote.error.error::before,
.ix-infobox::before {
  content: "";
  position: absolute;
  top: 22px;
  left: 20px;
  width: 22px;
  height: 22px;
  margin: 0;
  border: 0;
  border-radius: 999px;
  background-color: var(--ix-box-accent);
  background-image: var(--ix-box-icon);
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: 11px 11px;
  box-shadow: none;
}

/* The theme adds an opening curly quote to the first paragraph of any
   blockquote. Not wanted on a callout. */
.formatted-article blockquote.info.info p:first-of-type::before,
.formatted-article blockquote.success.success p:first-of-type::before,
.formatted-article blockquote.error.error p:first-of-type::before {
  content: none;
}

/* ---------- real-world content ----------
 *
 * Across the 842 existing callouts the dominant content is lists (1118 <li>),
 * then inline emphasis, then headings — and only 85 <p> in total, so most text
 * sits in bare text nodes. Spacing therefore has to be driven by the container
 * and by first/last-child resets rather than by paragraph rules.
 */

.formatted-article blockquote.info.info > :first-child,
.formatted-article blockquote.success.success > :first-child,
.formatted-article blockquote.error.error > :first-child,
.ix-infobox > :first-child {
  margin-top: 0;
}

.formatted-article blockquote.info.info > :last-child,
.formatted-article blockquote.success.success > :last-child,
.formatted-article blockquote.error.error > :last-child,
.ix-infobox > :last-child {
  margin-bottom: 0;
}

.formatted-article blockquote.info.info p,
.formatted-article blockquote.success.success p,
.formatted-article blockquote.error.error p,
.ix-infobox p {
  margin: 0 0 0.75em;
  font-weight: 400; /* theme sets 500 on callout paragraphs */
}

/* Headings — the theme's prose sizes (h2 at 2.25em) are far too large inside
   a callout, so they are brought down to a caption-like scale. */
.formatted-article blockquote.info.info :is(h2, h3, h4, h5),
.formatted-article blockquote.success.success :is(h2, h3, h4, h5),
.formatted-article blockquote.error.error :is(h2, h3, h4, h5),
.ix-infobox :is(h2, h3, h4, h5) {
  margin: 1.25em 0 0.4em;
  color: #121826;
  font-size: 1.0625em;
  font-weight: 600;
  line-height: 1.35;
}

.formatted-article blockquote.info.info :is(ul, ol),
.formatted-article blockquote.success.success :is(ul, ol),
.formatted-article blockquote.error.error :is(ul, ol),
.ix-infobox :is(ul, ol) {
  margin: 0.6em 0;
  padding-left: 1.35em;
}

.formatted-article blockquote.info.info li,
.formatted-article blockquote.success.success li,
.formatted-article blockquote.error.error li,
.ix-infobox li {
  margin: 0.25em 0;
  padding-left: 0.15em;
}

.formatted-article blockquote.info.info li::marker,
.formatted-article blockquote.success.success li::marker,
.formatted-article blockquote.error.error li::marker,
.ix-infobox li::marker {
  color: var(--ix-box-accent);
}

.formatted-article blockquote.info.info a,
.formatted-article blockquote.success.success a,
.formatted-article blockquote.error.error a,
.ix-infobox a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* <mark> appears 59 times. On a tinted panel the default yellow is muddy, so
   it gets a translucent white ground instead. */
.formatted-article blockquote.info.info mark,
.formatted-article blockquote.success.success mark,
.formatted-article blockquote.error.error mark,
.ix-infobox mark {
  padding: 0 0.15em;
  background: rgba(255, 255, 255, 0.75);
  color: inherit;
}

.formatted-article blockquote.info.info img,
.formatted-article blockquote.success.success img,
.formatted-article blockquote.error.error img,
.ix-infobox img {
  max-width: 100%;
  height: auto;
}

/* Nine callouts contain a nested table. Keep it plain so it does not fight the
   tint, and let it scroll rather than force the panel wider. */
.formatted-article blockquote.info.info table,
.formatted-article blockquote.success.success table,
.formatted-article blockquote.error.error table,
.ix-infobox table {
  display: block;
  width: 100%;
  margin: 0.75em 0;
  padding: 0;
  overflow-x: auto;
  border: 0;
  border-radius: 0;
  background: transparent;
  font-size: 0.9375em;
}

.formatted-article blockquote.info.info :is(td, th),
.formatted-article blockquote.success.success :is(td, th),
.formatted-article blockquote.error.error :is(td, th),
.ix-infobox :is(td, th) {
  padding: 6px 12px 6px 0 !important; /* theme: padding-left .75em !important */
  border: 0;
  background: transparent;
  vertical-align: top;
}

/* The theme styles <code>/<pre> as a full-width dark slab suited to the article
   body. Inside a callout that dominates the panel, so inline code is brought
   back to being inline, and code blocks are kept modest. */
.formatted-article blockquote.info.info code,
.formatted-article blockquote.success.success code,
.formatted-article blockquote.error.error code,
.ix-infobox code {
  display: inline;
  padding: 0.1em 0.35em;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 2px;
  color: inherit;
  font-size: 0.9em;
  white-space: normal;
}

.formatted-article blockquote.info.info pre,
.formatted-article blockquote.success.success pre,
.formatted-article blockquote.error.error pre,
.ix-infobox pre {
  margin: 0.75em 0;
  padding: 12px 14px;
  overflow-x: auto;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 2px;
  color: inherit;
  font-size: 0.9em;
}

.formatted-article blockquote.info.info pre code,
.formatted-article blockquote.success.success pre code,
.formatted-article blockquote.error.error pre code,
.ix-infobox pre code {
  display: block;
  padding: 0;
  background: none;
}

/* Editor-only notice when the block has no content yet. */
.ix-infobox__notice {
  margin: 32px 0;
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 14px;
  color: #857bf5;
}

@media (max-width: 1023px) {
  .formatted-article blockquote.info.info,
  .formatted-article blockquote.success.success,
  .formatted-article blockquote.error.error,
  .ix-infobox {
    padding: 18px 18px 18px 52px;
  }
}