/* Callout Box — Note / Caution / Tip
 *
 * These rules are a deliberate, byte-for-byte copy of the sc-callout CSS the
 * site-core plugin prints inline in wp_head (site-core.php, the conditional
 * <style> guarded on post_content containing "sc-callout"). The block emits
 * the same sc-callout markup legacy content uses, so the two stylesheets must
 * agree exactly or a page holding both an old raw-HTML callout and a new block
 * would render them differently.
 *
 * Why duplicate rather than depend on the plugin's copy:
 *   - the plugin's <style> is gated on is_singular() AND the literal string
 *     "sc-callout" being in post_content. A page whose only callout is this
 *     block stores "<!-- wp:buytestosterone/callout -->" instead, so that gate
 *     never opens and the box would render unstyled.
 *   - the editor needs the same rules (see editor.css), and inline wp_head CSS
 *     cannot reach the editor iframe.
 * If the design is ever changed, change it here AND in site-core.php, or move
 * the plugin's legacy rules over to this file and drop them there.
 *
 * No media queries, on purpose. The box is already fluid at every width —
 * width:100% + box-sizing:border-box on the shell, a flex header, and padding
 * in px that reads correctly from 320px up. Adding breakpoints here would
 * change the current mobile and tablet rendering, which must not move.
 */

/* Base layer. v2 overrides the border, padding and radius below, but margin,
   font-size and line-height are inherited from here — so these rules are load
   bearing even though every box this block writes is a v2 box. */
.sc-callout {
	border-left: 4px solid;
	border-radius: 6px;
	padding: 12px 16px 12px 42px;
	margin: 16px 0;
	position: relative;
	font-size: .95em;
	line-height: 1.5;
}

.sc-callout::before {
	position: absolute;
	left: 14px;
	top: 12px;
	font-size: 1.1em;
	line-height: 1;
}

.sc-callout p {
	margin: 0;
}

.sc-callout-note {
	background: #eef6fc;
	border-color: #2b6cb0;
	color: #1a365d;
}

.sc-callout-note::before {
	content: "\1F4A1";
}

.sc-callout-warning {
	background: #fff8e6;
	border-color: #c05621;
	color: #7b341e;
}

.sc-callout-warning::before {
	content: "\26A0\FE0F";
}

/* v2 — the live design: rounded card, solid gradient header bar, body below. */
.sc-callout.sc-callout-v2 {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
	border-left: 0;
	padding: 0;
	border-radius: 24px;
	border: 1px solid;
	overflow: hidden;
	box-shadow: 0 4px 18px rgba( 0, 0, 0, .06 );
}

.sc-callout.sc-callout-v2::before {
	content: none;
}

.sc-callout-v2 .sc-callout-head {
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 13px 20px;
	font-weight: 700;
	font-size: 1.02em;
	color: #fff;
}

.sc-callout-v2 .sc-callout-head::before {
	font-size: 1.15em;
	line-height: 1;
}

.sc-callout-v2 .sc-callout-body {
	padding: 18px 20px;
}

.sc-callout-v2 .sc-callout-body p {
	margin: 0 0 10px;
	font-weight: 600;
}

.sc-callout-v2 .sc-callout-body p:last-child {
	margin-bottom: 0;
}

.sc-callout-note.sc-callout-v2 {
	border-color: #bcdcf5;
	background: #fbfdff;
	color: #1a365d;
}

.sc-callout-note.sc-callout-v2 .sc-callout-head {
	background: linear-gradient( 90deg, #1f6fb2, #4fa3dd );
}

.sc-callout-note.sc-callout-v2 .sc-callout-head::before {
	content: "\1F4A1";
}

.sc-callout-warning.sc-callout-v2 {
	border-color: #f0b3b3;
	background: #fdf1f1;
	color: #7a1414;
}

.sc-callout-warning.sc-callout-v2 .sc-callout-head {
	background: linear-gradient( 90deg, #b91c1c, #e5484d );
}

.sc-callout-warning.sc-callout-v2 .sc-callout-head::before {
	content: "\26A0\FE0F";
}

.sc-callout-fact.sc-callout-v2 {
	border-color: #a9d9b3;
	background: #f6fbf7;
	color: #1c4a2a;
}

.sc-callout-fact.sc-callout-v2 .sc-callout-head {
	background: linear-gradient( 90deg, #1f7a3d, #4caf6a );
}

.sc-callout-fact.sc-callout-v2 .sc-callout-head::before {
	content: "\2713";
}

.sc-callout-tip.sc-callout-v2 {
	border-color: #a3ddc9;
	background: #f5fbf9;
	color: #134a3a;
}

.sc-callout-tip.sc-callout-v2 .sc-callout-head {
	background: linear-gradient( 90deg, #0f766e, #34d399 );
}

.sc-callout-tip.sc-callout-v2 .sc-callout-head::before {
	content: "\1F4A1";
}

/* ---------------------------------------------------------------------------
 * Icon as a real element
 *
 * Legacy callouts get their icon from ::before on the header. A pseudo-element
 * cannot carry aria-hidden and cannot be toggled per box, so this block prints
 * the glyph as a real <span> instead and suppresses the pseudo-element for its
 * own boxes only — legacy raw-HTML callouts keep using ::before untouched.
 *
 * The result is pixel-identical: ::before was already a flex item in the
 * gap:9px header, so a span in the same position with the same font-size and
 * line-height occupies exactly the same box.
 *
 * Three classes here against the plugin's two means this wins on specificity
 * regardless of which stylesheet the browser sees last — block styles can be
 * enqueued after the plugin's inline wp_head <style>, so source order is not
 * something to rely on.
 * ------------------------------------------------------------------------ */
.wp-block-buytestosterone-callout.sc-callout.sc-callout-v2 .sc-callout-head::before {
	content: none;
}

.wp-block-buytestosterone-callout .sc-callout-icon {
	font-size: 1.15em;
	line-height: 1;
	flex: 0 0 auto;
}