/* Callout.

   Every colour reads a custom property whose fallback is the value that was
   previously hardcoded, so an untouched callout looks exactly as it did.

   The warning tone used to be built from a literal #E4593B — a fixed orange
   with no relationship to the site palette, so every warning callout on every
   Anvil site was that same orange whatever the design. It now reads
   --anvil-warning, falling back to that orange only if the site defines
   nothing, and any callout can override it outright.
*/
.anvil-callout{
	display:flex;
	align-items:center;
	gap:var(--anvil-callout-gap, 16px);
	padding:var(--anvil-callout-pad, 20px 24px);
	border-radius:var(--anvil-callout-radius, 14px);
	border:1.5px solid;
	background:var(--anvil-callout-bg, var(--anvil-callout-tone-bg));
	border-color:var(--anvil-callout-border, var(--anvil-callout-tone-border));
	color:var(--anvil-callout-text, inherit);
}
.anvil-callout-brand{
	--anvil-callout-tone-bg:color-mix(in srgb, var(--anvil-primary) 8%, transparent);
	--anvil-callout-tone-border:color-mix(in srgb, var(--anvil-primary) 30%, transparent);
}
.anvil-callout-neutral{
	--anvil-callout-tone-bg:color-mix(in srgb, var(--anvil-ink) 5%, transparent);
	--anvil-callout-tone-border:color-mix(in srgb, var(--anvil-ink) 15%, transparent);
}
.anvil-callout-warning{
	--anvil-callout-tone-bg:color-mix(in srgb, var(--anvil-warning, #E4593B) 9%, transparent);
	--anvil-callout-tone-border:color-mix(in srgb, var(--anvil-warning, #E4593B) 32%, transparent);
}

.anvil-callout-ic{ font-size:var(--anvil-callout-icon-size, 26px); line-height:1; flex:0 0 auto; color:var(--anvil-callout-icon, inherit); display:inline-flex; align-items:center }
.anvil-callout-body{ flex:1 }
.anvil-callout-h{ font-weight:700; font-size:16px; margin-bottom:2px; color:var(--anvil-callout-heading, inherit) }
.anvil-callout-t{ opacity:.8; font-size:14.5px; line-height:1.5 }
.anvil-callout-btn{
	flex:0 0 auto;
	background:var(--anvil-callout-btn-bg, var(--anvil-primary));
	color:var(--anvil-callout-btn-text, #fff);
	padding:9px 18px;
	border-radius:var(--anvil-callout-btn-radius, 999px);
	font-weight:600; font-size:14px; text-decoration:none; white-space:nowrap;
}
.anvil-callout-btn:hover{ filter:brightness(.93) }

@supports not (background: color-mix(in srgb, red, blue)){
	.anvil-callout-brand{ --anvil-callout-tone-bg:rgba(0,0,0,.04); --anvil-callout-tone-border:rgba(0,0,0,.12) }
	.anvil-callout-neutral{ --anvil-callout-tone-bg:rgba(0,0,0,.04); --anvil-callout-tone-border:rgba(0,0,0,.12) }
	.anvil-callout-warning{ --anvil-callout-tone-bg:rgba(228,89,59,.08); --anvil-callout-tone-border:rgba(228,89,59,.3) }
}
@media(max-width:600px){ .anvil-callout{ flex-wrap:wrap } }