/* ==========================================================================
   Zeal content styles: callouts, list styles, lead paragraph.
   Loaded on the front end and inside the block editor / classic editor so
   editors see exactly what visitors see. Uses literal colours (the editor
   doesn't load main.css tokens).

   Use in Gutenberg:  Group → Styles → "Callout · Tip" (is-style-callout-tip)
   Use in HTML / classic editor: <div class="callout callout--tip">…</div>
   ========================================================================== */

.callout,
.wp-block-group[class*="is-style-callout-"] {
	position: relative;
	margin: 2rem 0;
	padding: 1.1rem 1.35rem 1.1rem 3.6rem;
	border: 1px solid #c9dcf0;
	border-radius: 12px;
	background: #eef5fc;
	color: #1c2734;
	font-size: 1rem;
	line-height: 1.65;
}
.callout::before,
.wp-block-group[class*="is-style-callout-"]::before {
	content: "";
	position: absolute;
	left: 1.15rem;
	top: 1.15rem;
	width: 26px;
	height: 26px;
	background-color: #1e73be;
	-webkit-mask: var(--callout-icon) center / contain no-repeat;
	mask: var(--callout-icon) center / contain no-repeat;
}
.callout > :first-child, .wp-block-group[class*="is-style-callout-"] > :first-child { margin-top: 0; }
.callout > :last-child, .wp-block-group[class*="is-style-callout-"] > :last-child { margin-bottom: 0; }
.callout h2, .callout h3, .callout h4,
.wp-block-group[class*="is-style-callout-"] :is(h2, h3, h4) { margin: 0 0 0.35em; font-size: 1.08rem; letter-spacing: 0; }
.callout p, .wp-block-group[class*="is-style-callout-"] p { margin: 0 0 0.6em; }
.callout ul, .callout ol, .wp-block-group[class*="is-style-callout-"] :is(ul, ol) { margin: 0.4em 0 0; padding-left: 1.2em; }

/* Info (default): blue */
.callout, .callout--info, .wp-block-group.is-style-callout-info {
	--callout-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v6M12 7.5v.01'/%3E%3C/svg%3E");
}

/* Tip: amber */
.callout--tip, .wp-block-group.is-style-callout-tip {
	--callout-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18h6M10 21h4M12 3a6 6 0 0 0-3.5 10.9c.6.5 1 1.2 1 2.1h5c0-.9.4-1.6 1-2.1A6 6 0 0 0 12 3z'/%3E%3C/svg%3E");
	border-color: #f2dcb9; background: #fdf3e4;
}
.callout--tip::before, .wp-block-group.is-style-callout-tip::before { background-color: #b86f0a; }

/* Warning: red */
.callout--warning, .wp-block-group.is-style-callout-warning {
	--callout-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l10 18H2z'/%3E%3Cpath d='M12 10v5M12 18v.01'/%3E%3C/svg%3E");
	border-color: #f3c7c3; background: #fbeceb;
}
.callout--warning::before, .wp-block-group.is-style-callout-warning::before { background-color: #b42318; }

/* Good to know / success: green */
.callout--success, .wp-block-group.is-style-callout-success {
	--callout-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8 12.5l3 3 5-6'/%3E%3C/svg%3E");
	border-color: #bfe3cd; background: #e6f4ec;
}
.callout--success::before, .wp-block-group.is-style-callout-success::before { background-color: #1f7a45; }

/* Note: sand */
.callout--note, .wp-block-group.is-style-callout-note {
	--callout-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20h4L19 9l-4-4L4 16z'/%3E%3Cpath d='M13.5 6.5l4 4'/%3E%3C/svg%3E");
	border-color: #e5e1d9; background: #f6f3ee;
}
.callout--note::before, .wp-block-group.is-style-callout-note::before { background-color: #5b6876; }

/* Highlight: navy panel */
.callout--highlight, .wp-block-group.is-style-callout-highlight {
	--callout-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M12 3l2.8 5.7 6.2.9-4.5 4.4 1 6.2L12 17.3 6.5 20.2l1-6.2L3 9.6l6.2-.9z'/%3E%3C/svg%3E");
	border-color: #0e2a44; background: #0e2a44; color: rgb(255 255 255 / 88%);
}
.callout--highlight::before, .wp-block-group.is-style-callout-highlight::before { background-color: #f3b65f; }
.callout--highlight :is(h2, h3, h4, strong), .wp-block-group.is-style-callout-highlight :is(h2, h3, h4, strong) { color: #fff; }
.callout--highlight a, .wp-block-group.is-style-callout-highlight a { color: #f3b65f; }

/* Card: plain bordered box, no icon */
.wp-block-group.is-style-card, .content-card {
	margin: 2rem 0;
	padding: 1.35rem 1.5rem;
	border: 1px solid #e5e1d9;
	border-radius: 14px;
	background: #fff;
}
.wp-block-group.is-style-card > :first-child, .content-card > :first-child { margin-top: 0; }
.wp-block-group.is-style-card > :last-child, .content-card > :last-child { margin-bottom: 0; }

/* Lists ---------------------------------------------------------------- */
ul.is-style-checklist, ul.is-style-crosslist, ul.checklist, ul.crosslist { padding-left: 0 !important; list-style: none; }
ul.is-style-checklist li, ul.is-style-crosslist li, ul.checklist li, ul.crosslist li { position: relative; padding-left: 1.9em !important; }
ul.is-style-checklist li::before, ul.checklist li::before,
ul.is-style-crosslist li::before, ul.crosslist li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.2em;
	width: 1.2em;
	height: 1.2em;
	-webkit-mask: var(--list-icon) center / contain no-repeat;
	mask: var(--list-icon) center / contain no-repeat;
}
ul.is-style-checklist li::before, ul.checklist li::before {
	--list-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
	background-color: #1f7a45;
}
ul.is-style-crosslist li::before, ul.crosslist li::before {
	--list-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E");
	background-color: #b42318;
}
ul.is-style-checklist li::marker, ul.is-style-crosslist li::marker { content: none; }

/* Lead paragraph -------------------------------------------------------- */
p.is-style-lead, p.lead-text { font-size: 1.2rem; line-height: 1.6; color: #3a4654; }