/* ============================================================
   CCRF · Content typography
   Styles the standard editor output (.entry-content / .ccrf-prose).
   Mirrors the design system: Poppins, navy headings, hairline rules,
   4px shapes, red accents, blockquote options A & B.
   ============================================================ */

.ccrf-prose,
.entry-content {
  --content-maxw: 800px;
  font-family: "Poppins", system-ui, -apple-system, sans-serif;
  color: #4A5066;
  font-size: clamp(16px, 1.55cqi, 18px);
  line-height: 1.75;
  display: flow-root; /* contain floated (aligned) images */
}

/* Reading column — paragraphs & basic blocks constrained; media can break out. */
.ccrf-prose > *,
.entry-content > * {
  max-width: var(--content-maxw);
}
.ccrf-prose > .alignwide,
.entry-content > .alignwide { max-width: 1040px; }
.ccrf-prose > .alignfull,
.entry-content > .alignfull { max-width: none; }

/* ---------- Headings ---------- */
.ccrf-prose :is(h1, h2, h3, h4, h5, h6),
.entry-content :is(h1, h2, h3, h4, h5, h6) {
  font-family: "Poppins", system-ui, sans-serif;
  color: #283670;
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.18;
  margin: 1.8em 0 0.6em;
}
.ccrf-prose :is(h1, h2, h3, h4):first-child,
.entry-content :is(h1, h2, h3, h4):first-child { margin-top: 0; }

.ccrf-prose h1, .entry-content h1 { font-size: clamp(30px, 4.4cqi, 44px); }
.ccrf-prose h2, .entry-content h2 { font-size: clamp(25px, 3.4cqi, 34px); }
.ccrf-prose h3, .entry-content h3 { font-size: clamp(20px, 2.4cqi, 24px); }
.ccrf-prose h4, .entry-content h4 { font-size: clamp(17px, 1.9cqi, 19px); }
.ccrf-prose h5, .entry-content h5 { font-size: 16px; }
.ccrf-prose h6, .entry-content h6 {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #00B9DB;
}

/* ---------- Paragraphs & inline ---------- */
.ccrf-prose p, .entry-content p { margin: 0 0 1.15em; }
.ccrf-prose strong, .entry-content strong { color: #283670; font-weight: 700; }
.ccrf-prose em, .entry-content em { font-style: italic; }

/* Lead / standfirst paragraph */
.ccrf-prose .has-lead,
.ccrf-prose > p.is-style-lead,
.entry-content > p.is-style-lead {
  font-size: clamp(17px, 1.85cqi, 20px);
  line-height: 1.6;
  color: #283670;
  font-weight: 600;
}

/* ---------- Links ---------- */
.ccrf-prose a, .entry-content a {
  color: #EC2027;
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 2px;
  font-weight: 600;
}
.ccrf-prose a:hover, .entry-content a:hover { color: #d11820; }

/* ---------- Lists ---------- */
.ccrf-prose :is(ul, ol),
.entry-content :is(ul, ol) {
  margin: 0 0 1.2em;
  padding-left: 0;
  list-style: none;
}
.ccrf-prose li, .entry-content li {
  position: relative;
  padding-left: 28px;
  margin: 0 0 0.6em;
  line-height: 1.6;
}
.ccrf-prose ul > li::before,
.entry-content ul > li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 0.62em;
  width: 7px;
  height: 7px;
  background: #00B9DB;
  border-radius: 2px;
}
.ccrf-prose ol, .entry-content ol { counter-reset: ccrf-li; }
.ccrf-prose ol > li::before,
.entry-content ol > li::before {
  counter-increment: ccrf-li;
  content: counter(ccrf-li);
  position: absolute;
  left: 0;
  top: 0.05em;
  font-size: 13px;
  font-weight: 700;
  color: #283670;
  min-width: 18px;
}
.ccrf-prose li :is(ul, ol),
.entry-content li :is(ul, ol) { margin: 0.6em 0 0; }

/* ---------- Blockquote — Option A (red left rule) ---------- */
.ccrf-prose blockquote,
.entry-content blockquote {
  margin: 1.8em 0;
  padding: 6px 0 6px 26px;
  border-left: 3px solid #EC2027;
  color: #283670;
  font-size: clamp(19px, 2.2cqi, 24px);
  line-height: 1.4;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.ccrf-prose blockquote p,
.entry-content blockquote p { margin: 0 0 0.5em; }
.ccrf-prose blockquote cite,
.entry-content blockquote cite {
  display: block;
  margin-top: 12px;
  font-size: 14px;
  font-weight: 600;
  font-style: normal;
  color: #6F6557;
}

/* ---------- Blockquote — Option B (dark navy feature panel) ---------- */
.ccrf-prose blockquote.is-style-feature,
.entry-content blockquote.is-style-feature,
.ccrf-quote-feature {
  position: relative;
  border: none;
  background: #0E1A3D;
  color: #fff;
  border-radius: 4px;
  padding: clamp(34px, 4cqi, 56px) clamp(28px, 4cqi, 56px) clamp(30px, 3.5cqi, 48px);
  overflow: hidden;
  font-weight: 600;
}
.ccrf-prose blockquote.is-style-feature::before,
.entry-content blockquote.is-style-feature::before,
.ccrf-quote-feature::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(135deg, #13204A 0 18px, #0E1A3D00 0, #101d44 18px 36px);
  opacity: 0.5;
  pointer-events: none;
}
.ccrf-prose blockquote.is-style-feature::after,
.entry-content blockquote.is-style-feature::after,
.ccrf-quote-feature::after {
  content: "\201C";
  position: absolute;
  top: 6px;
  left: 18px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 120px;
  line-height: 1;
  color: #EC2027;
  opacity: 0.9;
}
.ccrf-prose blockquote.is-style-feature > *,
.entry-content blockquote.is-style-feature > *,
.ccrf-quote-feature > * { position: relative; }
.ccrf-prose blockquote.is-style-feature cite,
.entry-content blockquote.is-style-feature cite,
.ccrf-quote-feature cite { color: #9DA6CC; }

/* ---------- Media, figures, captions ---------- */
.ccrf-prose :is(img, figure),
.entry-content :is(img, figure) { border-radius: 4px; }
.ccrf-prose figure, .entry-content figure { margin: 1.8em 0; }
.ccrf-prose img, .entry-content img { display: block; height: auto; }
.ccrf-prose figcaption,
.entry-content figcaption {
  font-size: 13px;
  color: #6F6557;
  margin-top: 8px;
  line-height: 1.5;
}

/* ---------- Image alignment (classic editor + blocks) ---------- */
/* Applies to <img class="align*"> from TinyMCE and <figure class="...align*"> blocks. */
.ccrf-prose .alignleft,
.entry-content .alignleft,
.ccrf-prose img.alignleft,
.entry-content img.alignleft {
  float: left;
  margin: 0.4em 1.6em 1em 0;
  max-width: 50%;
  height: auto;
}
.ccrf-prose .alignright,
.entry-content .alignright,
.ccrf-prose img.alignright,
.entry-content img.alignright {
  float: right;
  margin: 0.4em 0 1em 1.6em;
  max-width: 50%;
  height: auto;
}
.ccrf-prose .aligncenter,
.entry-content .aligncenter,
.ccrf-prose img.aligncenter,
.entry-content img.aligncenter {
  display: block;
  float: none;
  margin-left: auto;
  margin-right: auto;
}
.ccrf-prose .alignnone,
.entry-content .alignnone,
.ccrf-prose img.alignnone,
.entry-content img.alignnone {
  float: none;
}

/* Captions ([caption] shortcode + figure) honour the same alignment. */
.ccrf-prose .wp-caption,
.entry-content .wp-caption { max-width: 100%; }
.ccrf-prose .wp-caption img,
.entry-content .wp-caption img { display: block; height: auto; }
.ccrf-prose .wp-caption-text,
.entry-content .wp-caption-text {
  font-size: 13px;
  color: #6F6557;
  margin-top: 8px;
  line-height: 1.5;
}

/* On narrow screens, let aligned images go full width to avoid cramped text. */
@media (max-width: 600px) {
  .ccrf-prose .alignleft, .entry-content .alignleft,
  .ccrf-prose .alignright, .entry-content .alignright,
  .ccrf-prose img.alignleft, .entry-content img.alignleft,
  .ccrf-prose img.alignright, .entry-content img.alignright {
    float: none;
    max-width: 100%;
    margin: 1em 0;
  }
}

/* ---------- Tables ---------- */
.ccrf-prose table, .entry-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.6em 0;
  font-size: 14.5px;
}
.ccrf-prose :is(th, td),
.entry-content :is(th, td) {
  border: 1px solid #E7E1D7;
  padding: 10px 14px;
  text-align: left;
}
.ccrf-prose th, .entry-content th {
  background: #283670;
  color: #fff;
  font-weight: 600;
}
.ccrf-prose tbody tr:nth-child(even),
.entry-content tbody tr:nth-child(even) { background: #FAF8F4; }

/* ---------- Code ---------- */
.ccrf-prose :is(code, pre),
.entry-content :is(code, pre) {
  font-family: "JetBrains Mono", ui-monospace, Menlo, monospace;
}
.ccrf-prose code, .entry-content code {
  font-size: 0.9em;
  background: #F4F2EC;
  color: #283670;
  padding: 1px 6px;
  border-radius: 3px;
}
.ccrf-prose pre, .entry-content pre {
  background: #0E1A3D;
  color: #E3E7F4;
  padding: 20px 22px;
  border-radius: 4px;
  overflow: auto;
  font-size: 13.5px;
  line-height: 1.6;
}
.ccrf-prose pre code, .entry-content pre code { background: none; color: inherit; padding: 0; }

/* ---------- Horizontal rule ---------- */
.ccrf-prose hr, .entry-content hr {
  border: none;
  height: 1px;
  background: #E7E1D7;
  margin: 2.4em 0;
}

/* ---------- Buttons inside content (core button block) ---------- */
.ccrf-prose .wp-block-button__link,
.entry-content .wp-block-button__link {
  background: #EC2027;
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  border-radius: 4px;
  padding: 14px 28px;
}
.ccrf-prose .wp-block-button.is-style-outline .wp-block-button__link,
.entry-content .wp-block-button.is-style-outline .wp-block-button__link {
  background: transparent;
  color: #283670;
  border: 1.5px solid #D7DAE6;
}

/* Spacing reset for first/last */
.ccrf-prose > *:last-child,
.entry-content > *:last-child { margin-bottom: 0; }