/* =========================================================
   DD Highlight Box — story-page callout component
   Loaded on the front end and inside the classic editor canvas
   (for the live preview) so both look identical.

   Colour and icon are supplied per box via the shortcode
   (heading, icon, color, layout attributes) — nothing here is
   a fixed preset. --dd-accent / --dd-accent-bg are set inline
   on .dd-hlbox by shortcode.php / hlbox-view.js.
   ========================================================= */

.dd-hlbox {
	--dd-accent: #1a56c4;      /* fallback if no colour supplied */
	--dd-accent-bg: #eef4ff;
	--dd-accent-border: #1a56c4;
	--dd-text: #1c2430;

	clear: both;
	margin: 28px 0;
	border-radius: 10px;
	background: var(--dd-accent-bg);
	border-left: 5px solid var(--dd-accent-border);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.dd-hlbox__inner {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: 18px 20px;
}

.dd-hlbox__icon {
	position: relative;
	flex: 0 0 34px;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--dd-accent);
	display: flex;
	align-items: center;
	justify-content: center;
}

.dd-hlbox__icon-glyph {
	color: #fff;
	font-size: 16px;
	font-weight: 700;
	line-height: 1;
}

.dd-hlbox__content {
	flex: 1 1 auto;
	min-width: 0;
}

.dd-hlbox__heading {
	margin: 0 0 6px;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.4px;
	text-transform: uppercase;
	color: var(--dd-accent);
}

.dd-hlbox__body {
	font-size: 16px;
	line-height: 1.65;
	color: var(--dd-text);
	word-wrap: break-word;
}

.dd-hlbox__body p {
	margin: 0 0 10px;
}

.dd-hlbox__body p:last-child {
	margin-bottom: 0;
}

.dd-hlbox__body a {
	color: var(--dd-accent);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.dd-hlbox__body strong {
	color: #000;
}

/* Quote icon gets an editorial, italic treatment for the body text */
.dd-hlbox--icon-quote .dd-hlbox__body {
	font-style: italic;
	font-size: 17px;
}

/* ---------- Layout: inset boxes float on wider screens ---------- */

@media (min-width: 782px) {
	.dd-hlbox--layout-inset-right {
		float: right;
		width: 38%;
		margin: 6px 0 20px 28px;
	}
	.dd-hlbox--layout-inset-left {
		float: left;
		width: 38%;
		margin: 6px 28px 20px 0;
	}
}

/* ---------- Responsive down-scaling ---------- */

@media (max-width: 781px) {
	.dd-hlbox--layout-inset-right,
	.dd-hlbox--layout-inset-left {
		float: none;
		width: 100%;
		margin: 24px 0;
	}
}

@media (max-width: 480px) {
	.dd-hlbox__inner {
		padding: 14px 16px;
		gap: 10px;
	}
	.dd-hlbox__icon {
		flex-basis: 28px;
		width: 28px;
		height: 28px;
	}
	.dd-hlbox__icon-glyph {
		font-size: 13px;
	}
	.dd-hlbox__heading {
		font-size: 13px;
	}
	.dd-hlbox__body {
		font-size: 15px;
	}
	.dd-hlbox--icon-quote .dd-hlbox__body {
		font-size: 16px;
	}
}

/* ---------- Editor canvas refinements ---------- */

.mce-content-body .dd-hlbox {
	cursor: default;
}