/*
 * Psychanatomy AEE Companion — front-end styling for the pipeline's
 * generated callout blocks (blue boxes + Key Takeaways). The Markdown→
 * Gutenberg converter (src/wp/blocks.ts) already emits the class names
 * below on every article; until this file existed, nothing rendered them
 * as anything other than a default WordPress blockquote.
 */

.psy-bluebox,
.psy-callout {
	margin: 1.75em 0;
	padding: 1.1em 1.4em;
	border: none;
	border-left: 4px solid #2b6cb0;
	border-radius: 6px;
	background: #eaf2fb;
	font-style: normal;
}

.psy-bluebox p,
.psy-callout p {
	margin: 0 0 0.6em;
	font-style: normal;
}

.psy-bluebox p:last-child,
.psy-callout p:last-child {
	margin-bottom: 0;
}

.psy-bluebox::before {
	display: block;
	font-size: 0.72em;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #2b6cb0;
	margin-bottom: 0.5em;
}

.psy-bluebox-validation::before { content: "A Note of Validation"; }
.psy-bluebox-clinicians-note::before { content: "Clinician's Note"; }
.psy-bluebox-emotional-snapshot::before { content: "Emotional Snapshot"; }
.psy-bluebox-reflection-prompt::before { content: "Reflection Prompt"; }
.psy-bluebox-silo-bridge::before { content: "Keep Reading"; }

/* Forward-looking box types (reflection prompt, silo bridge) get a calmer
   green accent instead of blue, to read as "next step" rather than
   "important note" — same box treatment, different emotional register. */
.psy-bluebox-reflection-prompt,
.psy-bluebox-silo-bridge {
	border-left-color: #2f855a;
	background: #eaf7f0;
}

.psy-bluebox-reflection-prompt::before,
.psy-bluebox-silo-bridge::before {
	color: #2f855a;
}

/* Key Takeaways callout — its own header text is already rendered inside
   (bold first line from the source markdown), so no ::before label here.
   Colors match WordPress core's own default "warning" yellow (the same
   pair used in wp-admin notices), not a custom brand color. */
.psy-callout {
	border-left-color: #dba617;
	background: #fff8e5;
}

.psy-callout ul {
	margin: 0;
	padding-left: 1.2em;
}

.psy-callout li {
	margin-bottom: 0.35em;
}

.psy-callout li:last-child {
	margin-bottom: 0;
}

/* Silver box — currently used only for the deterministically-injected
   forthcoming-resource placeholder on Silo Core Reference articles.
   Colors are a neutral gray (WordPress admin UI's own gray,
   #8c8f94/#f0f0f1), deliberately understated next to the blue/yellow
   content boxes since this one is a placeholder, not editorial content. */
.psy-silverbox {
	margin: 1.75em 0;
	padding: 1.1em 1.4em;
	border: none;
	border-left: 4px solid #8c8f94;
	border-radius: 6px;
	background: #f0f0f1;
	font-style: normal;
}

.psy-silverbox p {
	margin: 0;
	font-style: normal;
}

.psy-silverbox::before {
	display: block;
	font-size: 0.72em;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #50575e;
	margin-bottom: 0.5em;
}

.psy-silverbox-forthcoming-resource::before { content: "Coming Soon"; }

/* Type box — solid-color banner identifying an article's place in the
   pillar/silo hierarchy, matching the operator's existing UAP (purple) /
   SCR (gold) banners on the live site. Deliberately NOT the left-border
   card style the other boxes use — this is a full-width identity strip,
   not a callout. Core reference is the darker of the two shades
   (operator: "same color but a darker grade for the core reference"). */
.psy-typebox {
	margin: 1.5em 0;
	padding: 0.9em 1.4em;
	border: none;
	border-radius: 6px;
	text-align: center;
	font-style: normal;
	font-weight: 500;
	font-size: 1.02em;
}

.psy-typebox p {
	margin: 0;
	font-style: normal;
}

.psy-typebox-core-reference {
	background: #0B4F5C;
	color: #DFF3F7;
}

.psy-typebox-supporting {
	background: #17869C;
	color: #062327;
}

/* Set color on the <p> directly too, not just the blockquote — the theme's
   own .entry-content p rule targets the tag itself and otherwise beats the
   inherited value, regardless of what the blockquote's own color says
   (found live: core-reference box was rendering with black text). */
.psy-typebox-core-reference p {
	color: #DFF3F7;
}

.psy-typebox-supporting p {
	color: #062327;
}