/* CallCore Media - the things Elementor cannot express natively.
 *
 * Both rules below need a selector shape the atomic style system has no way to produce:
 * global classes are single-class selectors only, so a descendant or an id can never be
 * targeted from the Elementor UI. Colours read from the Elementor global variables, so
 * changing them in Site Settings > Variables still drives everything here. */

/* 1. Two colours in one <h1>.
 *    wp_kses strips class and style from inline tags inside a heading (only `id` survives),
 *    and the style renderer only emits class selectors. Keeping the whole headline in a
 *    single h1 matters for SEO, so the highlighted run is coloured by id instead of being
 *    split across two elements. */
#ccm-hero-hl {
	color: var(--green);
}

/* 2. Inline links inside body copy.
 *    Elementor ships `.e-heading-base a, .e-paragraph-base a { all: unset; cursor: pointer; }`,
 *    which flattens any <a> inside a heading or paragraph into plain text - so internal links
 *    written into prose are invisible to readers. This restores them as real hyperlinks.
 *    Specificity (0,2,1) beats Elementor's (0,1,1), so it wins regardless of load order.
 *    Applied via the `has-inline-links` global class, so it only affects copy meant to
 *    contain links. */
.elementor .has-inline-links a {
	color: var(--blue-link);
	text-decoration: underline;
	text-underline-offset: 2px;
	text-decoration-thickness: 1px;
	cursor: pointer;
	transition: color 0.2s;
}

.elementor .has-inline-links a:hover,
.elementor .has-inline-links a:focus-visible {
	color: var(--green-d);
}

/* 3. Blog post body copy -- blog-post-template.html, the `.article` rules.
 *    The single-post template renders the WordPress editor's content through Elementor's
 *    Post Content widget, so the markup inside it (h2, p, ul, blockquote, table, img...)
 *    does not exist until someone writes a post. Nothing in the builder can style elements
 *    it does not own, so the only way to make pasted content inherit the design is a
 *    descendant rule set. Scoped to the `article-body` global class, which is set on one
 *    container in the single-post template and nowhere else.
 *    Values are taken straight from the design file; colours read from the global variables. */

.elementor .article-body {
	font-family: var(--font-body, Inter), sans-serif;
	font-size: 17.5px;
	line-height: 1.75;
	color: #26324e;
}

.elementor .article-body > *:first-child { margin-top: 0; }
.elementor .article-body > *:last-child { margin-bottom: 0; }

.elementor .article-body p { font-size: 17.5px; line-height: 1.75; color: #26324e; margin: 0 0 20px; }

/* The opening paragraph, set larger. Add the `lead-p` class to the first paragraph block. */
.elementor .article-body p.lead-p {
	font-size: 20px;
	line-height: 1.6;
	color: var(--text);
	margin-bottom: 28px;
}

.elementor .article-body h2,
.elementor .article-body h3,
.elementor .article-body h4 {
	font-family: var(--font-heading, Poppins), sans-serif;
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1.14;
	color: var(--navy);
}

/* scroll-margin keeps a jump-link target clear of the top of the viewport. */
.elementor .article-body h2 { font-size: clamp(24px, 3vw, 30px); margin: 46px 0 14px; scroll-margin-top: 20px; }
.elementor .article-body h3 { font-size: 20px; margin: 30px 0 10px; scroll-margin-top: 20px; }
.elementor .article-body h4 { font-size: 17px; margin: 24px 0 8px; }

.elementor .article-body ul,
.elementor .article-body ol { margin: 0 0 22px 2px; padding-left: 24px; }
.elementor .article-body li { font-size: 17.5px; line-height: 1.7; color: #26324e; margin-bottom: 10px; }
.elementor .article-body ul li::marker { color: var(--green-d); }
.elementor .article-body ol li::marker { color: var(--green-d); font-family: var(--font-heading, Poppins), sans-serif; font-weight: 700; }
.elementor .article-body li > ul,
.elementor .article-body li > ol { margin-top: 10px; }

.elementor .article-body a {
	color: var(--navy);
	font-weight: 600;
	text-decoration: underline;
	text-decoration-color: var(--green-d);
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
	transition: color 0.2s;
}

.elementor .article-body a:hover,
.elementor .article-body a:focus-visible { color: var(--green-d); }

.elementor .article-body strong,
.elementor .article-body b { color: var(--navy); font-weight: 600; }

.elementor .article-body blockquote {
	margin: 30px 0;
	padding: 20px 28px;
	border-left: 4px solid var(--green);
	background: var(--alt);
	border-radius: 0 12px 12px 0;
	font-size: 20px;
	line-height: 1.55;
	color: var(--navy);
	font-style: italic;
}

.elementor .article-body blockquote p { font-size: inherit; line-height: inherit; color: inherit; margin: 0; }
.elementor .article-body blockquote cite {
	display: block;
	margin-top: 10px;
	font-style: normal;
	font-family: var(--font-heading, Poppins), sans-serif;
	font-size: 13.5px;
	color: var(--muted);
}

/* Key-takeaways panel. Give a Group block the additional CSS class `callout`. */
.elementor .article-body .callout {
	background: linear-gradient(135deg, #f3fbe6, #eefbf0);
	border: 1px solid rgba(143, 200, 28, 0.35);
	border-radius: 16px;
	padding: 24px 28px;
	margin: 32px 0;
}

.elementor .article-body .callout h4 {
	font-family: var(--font-heading, Poppins), sans-serif;
	font-size: 16px;
	color: var(--navy);
	margin: 0 0 12px;
	display: flex;
	align-items: center;
	gap: 9px;
}

.elementor .article-body .callout ul { margin: 0; padding-left: 20px; }
.elementor .article-body .callout li { margin-bottom: 8px; font-size: 16px; }
.elementor .article-body .callout > *:last-child { margin-bottom: 0; }

/* Mid-article CTA. Give a Group block the additional CSS class `inline-cta`. */
.elementor .article-body .inline-cta {
	background: var(--navy);
	border-radius: 16px;
	padding: 30px;
	margin: 38px 0;
	text-align: center;
	color: #fff;
}

.elementor .article-body .inline-cta h3 { color: #fff; font-size: 22px; margin: 0 0 8px; }
.elementor .article-body .inline-cta p { color: #CBD8E6; margin-bottom: 18px; font-size: 15.5px; }
.elementor .article-body .inline-cta > *:last-child { margin-bottom: 0; }

.elementor .article-body .inline-cta a {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font-family: var(--font-heading, Poppins), sans-serif;
	font-weight: 600;
	font-size: 15px;
	padding: 14px 26px;
	border-radius: 10px;
	background: var(--green);
	color: var(--green-ink);
	text-decoration: none;
	box-shadow: 0 10px 26px -12px rgba(143, 200, 28, 0.75);
	transition: 0.22s;
}

.elementor .article-body .inline-cta a:hover { background: var(--green-hover, #bcf34f); transform: translateY(-2px); color: var(--green-ink); }

/* In-article images and their captions. */
.elementor .article-body img { max-width: 100%; height: auto; display: block; border-radius: 14px; }
.elementor .article-body figure { margin: 32px 0; }
.elementor .article-body figcaption {
	margin-top: 10px;
	font-size: 13px;
	color: var(--muted);
	text-align: center;
}

.elementor .article-body hr { border: 0; border-top: 1px solid var(--line); margin: 42px 0; }

.elementor .article-body table { width: 100%; border-collapse: collapse; margin: 0 0 26px; font-size: 15px; }
.elementor .article-body th,
.elementor .article-body td { border: 1px solid var(--line); padding: 11px 13px; text-align: left; vertical-align: top; }
.elementor .article-body th {
	background: var(--alt);
	color: var(--navy);
	font-family: var(--font-heading, Poppins), sans-serif;
	font-weight: 600;
}

.elementor .article-body code { background: var(--alt); padding: 2px 6px; border-radius: 6px; font-size: 0.92em; color: var(--navy); }
.elementor .article-body pre {
	background: var(--ink);
	color: #E7F1FA;
	padding: 18px 20px;
	border-radius: 14px;
	overflow-x: auto;
	margin: 0 0 26px;
	font-size: 14px;
	line-height: 1.6;
}
.elementor .article-body pre code { background: none; padding: 0; color: inherit; }

@media (max-width: 767px) {
	.elementor .article-body,
	.elementor .article-body p,
	.elementor .article-body li { font-size: 16.5px; }
	.elementor .article-body p.lead-p { font-size: 18.5px; }
	.elementor .article-body .inline-cta { padding: 24px 20px; }
}