/**
 * Colored callout boxes for the "Update" / "Powertipp" / "Info" CKEditor 5
 * styles, applied to a <p class="callout callout--*">.
 *
 * A <p> is used rather than <blockquote> (which would be the more obvious
 * semantic container) because CKEditor 5's core "Style" plugin keeps its
 * dropdown entirely disabled for a style whose target element cannot
 * accept an arbitrary class in the current schema: <blockquote> is
 * already handled by the dedicated BlockQuote feature, which does not
 * compose with Style's class-attachment mechanism the same way <p> does
 * (confirmed live: the exact same style definitions targeting
 * <blockquote class="..."> left "Stile" permanently aria-disabled,
 * switching only the target tag to <p> made it work immediately). Since
 * this text format's "Ausrichtung" (alignment) feature already relies on
 * exactly this same class-on-<p> mechanism, <p> is the element this setup
 * is proven to support.
 *
 * The !important overrides below only target the three site-specific
 * classes. They are largely defensive - byte_theme's generic Tailwind
 * utility rules for the surrounding text wrapper only single out
 * <blockquote>/headings/tables/figures for special treatment, not <p> -
 * but keeping them costs nothing and guards against future wrapper
 * changes this module cannot control (byte_theme is a contrib theme it
 * must not edit directly). The accent border color and spacing are the
 * whole visual point of a callout, so border/padding are not left to
 * plain cascade order; border-left (a physical property) is used instead
 * of the logical border-inline-start-* purely so it would compete as the
 * same property as Tailwind's own border-l-4 utility, if that utility
 * were ever also applied to <p>.
 */

.callout {
  --callout-color: var(--border, #52525b);
  margin: 1.5rem 0 !important;
  max-width: none !important;
  padding: 1rem 1.25rem !important;
  border: 1px solid color-mix(in oklch, var(--callout-color) 45%, transparent) !important;
  border-left-width: 4px !important;
  border-radius: var(--radius, 0.5rem);
  background: color-mix(in oklch, var(--callout-color) 14%, transparent);
  box-shadow: var(--shadow-sm, 0 1px 3px 0 rgb(0 0 0 / 0.1));
  font-style: normal !important;
  font-size: 1rem !important;
  line-height: 1.6;
  color: var(--foreground, inherit);
}

.callout > *:first-child {
  margin-top: 0;
}

.callout > *:last-child {
  margin-bottom: 0 !important;
}

.callout::before {
  display: block;
  margin-bottom: 0.5rem;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--callout-color);
}

.callout--update {
  --callout-color: oklch(0.623 0.214 259.815); /* blau */
}
.callout--update::before {
  content: '🔔 Update';
}

.callout--tip {
  --callout-color: oklch(0.795 0.161 86.047); /* amber */
}
.callout--tip::before {
  content: '💡 Powertipp';
}

.callout--info {
  --callout-color: oklch(0.746 0.16 232.661); /* cyan */
}
.callout--info::before {
  content: 'ℹ️ Info';
}