/* ==========================================================================
   CCR Elementor — articles (blog posts)
   Article Header and Article Body, made for a Theme Builder "Single Post" template.
   Colors and type come from the tokens and color worlds in ccrx.css.
   ========================================================================== */

/* ---------- Article header ---------- */
.ccrx-ah { position: relative; overflow: hidden; background: var(--ccrx-surface, var(--ccrx-paper)); color: var(--ccrx-on, var(--ccrx-ink)); }
.ccrx-ah > .ccrx-strip { position: absolute; inset: 0 0 auto 0; z-index: 2; }
.ccrx-ah__wrap { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 22px; padding: 88px var(--ccrx-gutter) 64px; }
.ccrx-ah--center .ccrx-ah__wrap { align-items: center; text-align: center; }
.ccrx-ah__crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; letter-spacing: .02em; color: var(--ccrx-on-muted, var(--ccrx-muted)); }
.ccrx .ccrx-ah__crumbs a { color: inherit; text-decoration: none; }
.ccrx .ccrx-ah__crumbs a:hover, .ccrx .ccrx-ah__crumbs a:focus-visible { color: var(--ccrx-on, var(--ccrx-ink)); text-decoration: underline; text-underline-offset: 4px; }
.ccrx .ccrx-ah__crumbs a:last-child { color: var(--ccrx-em, var(--ccrx-accent)); }
.ccrx .ccrx-ah__title { margin: 0; max-width: 22ch; font-size: clamp(42px, 5.4vw, 80px); line-height: 1.03; letter-spacing: -.012em; color: inherit; text-wrap: balance; }
.ccrx .ccrx-ah__dek { margin: 0; max-width: 58ch; font-size: 20px; line-height: 1.6; color: var(--ccrx-on-soft, var(--ccrx-body)); text-wrap: pretty; }
.ccrx .ccrx-ah__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 6px 0 0; font-size: 14px; color: var(--ccrx-on-muted, var(--ccrx-muted)); font-variant-numeric: tabular-nums; }
.ccrx-ah__by { font-weight: 600; color: var(--ccrx-on, var(--ccrx-ink)); }
.ccrx-ah__dot { opacity: .6; }

/* Image under the title: it straddles the header color and the page below it. */
.ccrx-ah--inline.has-image { background: linear-gradient(var(--ccrx-surface, var(--ccrx-paper)), var(--ccrx-surface, var(--ccrx-paper))) top / 100% calc(100% - 160px) no-repeat; }
.ccrx-ah--inline.has-image .ccrx-ah__wrap { padding-bottom: 48px; }
.ccrx-ah__figure { position: relative; z-index: 1; padding: 0 var(--ccrx-gutter); }
.ccrx-ah--inline .ccrx-ah__media { position: relative; margin: 0; aspect-ratio: 16 / 8; overflow: hidden; border-radius: 20px; background: var(--ccrx-line); box-shadow: 0 24px 48px -28px rgba(11, 31, 51, .45); }
.ccrx .ccrx-ah__img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }

/* Image behind the title: words sit low on a darkened photo. */
.ccrx-ah--behind { display: flex; align-items: flex-end; min-height: 600px; --ccrx-em: var(--ccrx-yellow); }
.ccrx-ah--behind .ccrx-ah__media, .ccrx-ah--behind .ccrx-ah__shade { position: absolute; inset: 0; margin: 0; }
.ccrx-ah__shade { background: linear-gradient(0deg, var(--ccrx-ink) 0%, var(--ccrx-ink) 22%, color-mix(in srgb, var(--ccrx-ink) 30%, transparent) 100%); opacity: calc(var(--ccrx-ah-shade, 55) / 100 + .25); pointer-events: none; }
.ccrx-ah--behind .ccrx-ah__wrap { width: 100%; max-width: 1440px; margin: 0 auto; box-sizing: border-box; padding-top: 140px; }
.ccrx-ah--behind.has-image .ccrx-ah__title, .ccrx-ah--behind.has-image .ccrx-ah__dek { text-shadow: 0 1px 28px rgba(11, 31, 51, .35); }
.ccrx-ah--behind.no-image { min-height: 0; }

/* Reading progress: the brand strip, filled as far as the reader has got. */
.ccrx-ah__progress { position: fixed; z-index: 9999; top: var(--wp-admin--admin-bar--height, 0px); left: 0; right: 0; height: 3px; pointer-events: none; opacity: 0; transition: opacity .3s; }
.ccrx-ah__progress.is-on { opacity: 1; }
.ccrx-ah__progress span { display: block; height: 100%; background: linear-gradient(90deg, var(--ccrx-pink) 0 33.33%, var(--ccrx-cyan) 33.33% 66.66%, var(--ccrx-yellow) 66.66%); transform-origin: 0 50%; transform: scaleX(var(--ccrx-read, 0)); }

/* ---------- Article body ---------- */
.ccrx-article { --ccrx-measure: 720px; color: var(--ccrx-ink); }
.ccrx-article ::selection { background: var(--ccrx-yellow); color: var(--ccrx-ink); }
.ccrx-article__wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, var(--ccrx-measure)) minmax(0, 1fr); column-gap: 56px; padding: 72px var(--ccrx-gutter) 88px; }
.ccrx-article__wrap > * { grid-column: 2; min-width: 0; }
.ccrx-article--toc-side .ccrx-article__toc { grid-column: 1; grid-row: 1 / span 3; justify-self: end; align-self: start; position: sticky; top: calc(var(--wp-admin--admin-bar--height, 0px) + 112px); width: 100%; max-width: 240px; }

.ccrx-article .ccrx-article__content p:not(.ccrx-article__content .ccrx *), .ccrx-article .ccrx-article__content li:not(.ccrx-article__content .ccrx *) { font-family: var(--ccrx-sans); font-size: 18px; line-height: 1.75; color: var(--ccrx-body); }
.ccrx-article .ccrx-article__content p:not(.ccrx-article__content .ccrx *) { margin: 0 0 1.25em; text-wrap: pretty; }
.ccrx-article .ccrx-article__content h2:not(.ccrx-article__content .ccrx *), .ccrx-article .ccrx-article__content h3:not(.ccrx-article__content .ccrx *), .ccrx-article .ccrx-article__content .elementor-heading-title:not(.ccrx-article__content .ccrx *) { font-family: var(--ccrx-serif); font-weight: 400; letter-spacing: -.005em; color: var(--ccrx-ink); text-transform: none; text-wrap: balance; scroll-margin-top: calc(var(--wp-admin--admin-bar--height, 0px) + 112px); }
.ccrx-article .ccrx-article__content h2:not(.ccrx-article__content .ccrx *) { margin: 1.6em 0 .45em; font-size: clamp(32px, 3.4vw, 42px); line-height: 1.1; }
.ccrx-article .ccrx-article__content h3:not(.ccrx-article__content .ccrx *) { margin: 1.5em 0 .4em; font-size: clamp(26px, 2.6vw, 32px); line-height: 1.15; }
.ccrx-article .ccrx-article__content h4:not(.ccrx-article__content .ccrx *) { margin: 1.4em 0 .4em; font-family: var(--ccrx-sans); font-size: 18px; font-weight: 700; line-height: 1.35; color: var(--ccrx-ink); text-transform: none; letter-spacing: 0; }
.ccrx-article .ccrx-article__content a:not(.ccrx-article__content .ccrx *) { color: var(--ccrx-accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.ccrx-article .ccrx-article__content a:hover:not(.ccrx-article__content .ccrx *) { color: var(--ccrx-accent-hover); text-decoration-thickness: 2px; }
.ccrx-article .ccrx-article__content strong:not(.ccrx-article__content .ccrx *), .ccrx-article .ccrx-article__content b:not(.ccrx-article__content .ccrx *) { font-weight: 650; color: var(--ccrx-ink); }
.ccrx-article .ccrx-article__content ul:not(.ccrx-article__content .ccrx *), .ccrx-article .ccrx-article__content ol:not(.ccrx-article__content .ccrx *) { margin: 0 0 1.4em; padding-left: 1.35em; }
.ccrx-article .ccrx-article__content li:not(.ccrx-article__content .ccrx *) { margin: 0 0 .55em; padding-left: .25em; }
.ccrx-article .ccrx-article__content li::marker:not(.ccrx-article__content .ccrx *) { color: var(--ccrx-accent); }
.ccrx-article .ccrx-article__content blockquote:not(.ccrx-article__content .ccrx *) { position: relative; margin: 2em 0; padding: 0 0 0 1.4em; border: 0; font-family: var(--ccrx-serif); font-size: clamp(24px, 2.4vw, 30px); font-style: italic; line-height: 1.3; color: var(--ccrx-ink); }
.ccrx-article .ccrx-article__content blockquote::before:not(.ccrx-article__content .ccrx *) { content: "\201C"; position: absolute; left: -.05em; top: -.12em; font-size: 2.2em; line-height: 1; font-style: normal; color: var(--ccrx-pink); }
.ccrx-article .ccrx-article__content blockquote p:not(.ccrx-article__content .ccrx *) { margin: 0; font: inherit; color: inherit; }
.ccrx-article .ccrx-article__content img:not(.ccrx-article__content .ccrx *) { max-width: 100%; height: auto; border-radius: 16px; }
.ccrx-article .ccrx-article__content figure:not(.ccrx-article__content .ccrx *) { margin: 2em 0; }
.ccrx-article .ccrx-article__content figcaption:not(.ccrx-article__content .ccrx *) { margin-top: 10px; font-size: 14px; line-height: 1.5; color: var(--ccrx-muted); }
.ccrx-article .ccrx-article__content hr:not(.ccrx-article__content .ccrx *) { width: 72px; height: 3px; margin: 3em auto; border: 0; background: linear-gradient(90deg, var(--ccrx-pink) 0 33.33%, var(--ccrx-cyan) 33.33% 66.66%, var(--ccrx-yellow) 66.66%); }
.ccrx-article .ccrx-article__content table:not(.ccrx-article__content .ccrx *) { width: 100%; margin: 0 0 1.6em; border-collapse: collapse; font-size: 16px; font-variant-numeric: tabular-nums; }
.ccrx-article .ccrx-article__content th:not(.ccrx-article__content .ccrx *), .ccrx-article .ccrx-article__content td:not(.ccrx-article__content .ccrx *) { padding: 12px 8px; border-bottom: 1px solid var(--ccrx-line); text-align: left; vertical-align: top; }
/* CCR widgets placed in a post sit a little apart from the text around them. */
.ccrx-article__content .ccrx { margin-block: 1.5em; }

/* Table of contents. */
.ccrx-article__toc { font-family: var(--ccrx-sans); }
.ccrx-article--toc-top .ccrx-article__toc { margin-bottom: 40px; padding: 22px 24px; border-radius: 16px; background: var(--ccrx-paper); }
.ccrx .ccrx-article__toc-title { margin: 0 0 14px; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ccrx-muted); }
.ccrx .ccrx-article__toc-list { position: relative; margin: 0; padding: 0 0 0 16px; list-style: none; border-left: 1px solid var(--ccrx-line); }
.ccrx .ccrx-article__toc-list li { margin: 0; padding: 0; }
.ccrx .ccrx-article__toc-list li.is-sub { padding-left: 14px; }
.ccrx .ccrx-article__toc-list a { display: block; padding: 6px 0; font-size: 14px; line-height: 1.4; color: var(--ccrx-muted); text-decoration: none; transition: color .2s; }
.ccrx .ccrx-article__toc-list a:hover { color: var(--ccrx-ink); }
.ccrx .ccrx-article__toc-list a[aria-current="true"] { color: var(--ccrx-ink); font-weight: 600; }
/* One marker rides the rail to the section being read. */
.ccrx-article__toc-dot { position: absolute; left: -4px; top: 0; width: 7px; height: 7px; border-radius: 50%; background: var(--ccrx-accent); transform: translateY(var(--ccrx-toc-y, 0)); opacity: 0; transition: transform .35s cubic-bezier(.16, 1, .3, 1), opacity .2s; }
.ccrx-article__toc.has-active .ccrx-article__toc-dot { opacity: 1; }

/* After the article. */
.ccrx-article__foot { display: flex; flex-direction: column; gap: 20px; margin-top: 48px; padding-top: 28px; border-top: 1px solid var(--ccrx-line); }
.ccrx .ccrx-article__tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.ccrx .ccrx-article__tags a { display: inline-block; padding: 6px 14px; border-radius: 999px; background: var(--ccrx-paper); font-size: 14px; font-weight: 500; color: var(--ccrx-ink); text-decoration: none; }
.ccrx .ccrx-article__tags a:hover { background: #EFE9DD; }
.ccrx-article__share { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ccrx-article__share-label { margin-right: 6px; font-size: 14px; font-weight: 600; color: var(--ccrx-ink); }
.ccrx.ccrx-article .ccrx-article__share-btn { display: inline-flex; align-items: center; gap: 7px; height: 38px; margin: 0; padding: 0 14px; border: 1px solid var(--ccrx-line); border-radius: 999px; background: #fff; background-image: none; box-shadow: none; color: var(--ccrx-ink); font-family: var(--ccrx-sans); font-size: 14px; font-weight: 600; line-height: 1; letter-spacing: 0; text-transform: none; text-decoration: none; cursor: pointer; transition: border-color .15s, background-color .15s; }
.ccrx.ccrx-article .ccrx-article__share-btn:hover, .ccrx.ccrx-article .ccrx-article__share-btn:focus { border-color: var(--ccrx-ink); background-color: #fff; color: var(--ccrx-ink); }
.ccrx.ccrx-article .ccrx-article__share-btn:focus-visible { outline: 2px solid var(--ccrx-cyan); outline-offset: 2px; }
.ccrx.ccrx-article .ccrx-article__share-btn.is-done { border-color: var(--ccrx-east); color: var(--ccrx-east); }
.ccrx-article__share-btn .ccrx-icon { width: 15px; height: 15px; }

/* Closing call to action (the panel itself comes from the Call to Action styles). */
.ccrx-article__cta { padding: 0 var(--ccrx-gutter) 96px; }
.ccrx-article__cta .ccrx-cta__panel { max-width: 1100px; margin: 0 auto; }
.ccrx-article__cta .ccrx-cta__panel .ccrx-strip { position: absolute; inset: 0 0 auto 0; }
.ccrx-article__cta .ccrx-hd { margin-bottom: 0; }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
	.ccrx-article__wrap { grid-template-columns: minmax(0, 1fr); padding-top: 56px; }
	.ccrx-article__wrap > *, .ccrx-article--toc-side .ccrx-article__toc { grid-column: 1; grid-row: auto; }
	.ccrx-article--toc-side .ccrx-article__toc { position: static; justify-self: stretch; max-width: none; margin-bottom: 40px; padding: 22px 24px; border-radius: 16px; background: var(--ccrx-paper); }
	.ccrx-article__content, .ccrx-article__foot { max-width: var(--ccrx-measure); }
}
@media (max-width: 600px) {
	.ccrx-ah__wrap { padding-top: 56px; padding-bottom: 44px; gap: 16px; }
	.ccrx .ccrx-ah__dek { font-size: 18px; }
	.ccrx-ah--inline.has-image { background-size: 100% calc(100% - 80px); }
	.ccrx-ah--inline .ccrx-ah__media { aspect-ratio: 4 / 3; border-radius: 14px; }
	.ccrx-ah--behind { min-height: 480px; }
	.ccrx-article .ccrx-article__content p:not(.ccrx-article__content .ccrx *), .ccrx-article .ccrx-article__content li:not(.ccrx-article__content .ccrx *) { font-size: 17px; }
	.ccrx-article__cta { padding-bottom: 64px; }
}

/* ---------- Motion ---------- */
@media (prefers-reduced-motion: no-preference) {
	.ccrx-ah.is-ready .ccrx-ah__wrap > * { animation: ccrx-ah-in .7s cubic-bezier(.16, 1, .3, 1) both; animation-delay: calc(var(--i, 0) * 70ms); }
	.ccrx-ah.is-ready .ccrx-ah__media { animation: ccrx-ah-photo 1.1s cubic-bezier(.16, 1, .3, 1) both; }
	.ccrx-ah.is-ready > .ccrx-strip span { animation: ccrx-sweep .9s cubic-bezier(.22, .8, .24, 1) both; }
}
@media (prefers-reduced-motion: reduce) {
	.ccrx-article__toc-dot { transition: opacity .2s; }
}
@keyframes ccrx-ah-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes ccrx-ah-photo { from { opacity: 0; transform: scale(1.04); filter: saturate(.7); } to { opacity: 1; transform: none; filter: none; } }