/* =========================================================
   CSAP blog post template (Single Post v2)
   Ported from the editorial design hand-built in post 3082.
   ========================================================= */

/* The site sets overflow-x:hidden on <html> and <body>, which silently disables
   position:sticky (the table of contents sidebar). clip stops sideways scrolling
   the same way without creating a scroll container. Blog posts only. */
html:has(> body.single-post), body.single-post { overflow-x: clip; }

.csap-article {
  --ink: #002E5D;
  --muted: #4C5868;
  --blue: #176394;
  --line: #E5E9F0;
  --wash: #F2F7FB;
  width: 100%;
  color: var(--ink);
  font: 17px/1.8 "Poppins", Arial, sans-serif;
  overflow-wrap: break-word;
}
.csap-article, .csap-article * { box-sizing: border-box; }
.csap-article .ed-wrap { width: min(1240px, 100%); margin-inline: auto; padding-inline: 32px; }
.csap-article a { color: var(--blue); text-decoration: underline; text-underline-offset: 4px; }
/* The Elementor kit's global link color (#2381BF, 4.23:1) loads later with equal specificity; outrank it. */
.csap-article :is(.ed-body, .ed-tags) a:not(.ed-button) { color: var(--blue); -webkit-text-fill-color: var(--blue); }
.csap-article .ed-cta a:not(.ed-button) { color: #FFFFFF; -webkit-text-fill-color: #FFFFFF; }
.csap-article a:focus-visible { outline: 3px solid var(--blue); outline-offset: 5px; }
.csap-article [id] { scroll-margin-top: 130px; }

/* ---------- hero ---------- */
.csap-article.ed-hero {
  display: flex;
  align-items: center;
  min-height: 530px;
  padding: 64px 0;
  /* Solid fallback first: contrast checkers read background-color, not images. */
  background-color: #002E5D;
  background-image:
    linear-gradient(90deg, rgba(0,34,70,.98) 0%, rgba(0,46,93,.94) 35%, rgba(0,53,101,.88) 58%, rgba(0,63,111,.45) 78%, rgba(0,63,111,.16) 100%),
    var(--ed-hero-img, none);
  background-size: cover;
  background-position: center 20%;
}
.csap-article.ed-hero--plain { min-height: 0; }
.csap-article.ed-hero, .csap-article.ed-hero :is(h1, p, span, time) { color: #FFFFFF; -webkit-text-fill-color: #FFFFFF; }

.csap-article .ed-crumbs { margin: 0 0 20px; font: 13px/1.6 "Poppins", Arial, sans-serif; }
.csap-article .ed-crumbs, .csap-article .ed-crumbs span { color: #D5E4F1; -webkit-text-fill-color: #D5E4F1; }
.csap-article.ed-hero .ed-crumbs a { color: #FFFFFF; -webkit-text-fill-color: #FFFFFF; text-underline-offset: 3px; }
.csap-article.ed-hero a:focus-visible { outline-color: #FFFFFF; }

.csap-article .ed-kicker {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  margin: 0 0 24px;
  padding: 8px 16px;
  border-radius: 999px;
  background: #E4F1F9;
  color: #176394;
  -webkit-text-fill-color: #176394;
  font: 700 11px/1.5 "Montserrat", Arial, sans-serif;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
}
.csap-article .ed-kicker:hover { text-decoration: underline; }

.csap-article h1.ed-title {
  max-width: 760px;
  margin: 0 0 24px;
  padding: 0;
  font: 700 clamp(36px, 4.4vw, 56px)/1.12 "Montserrat", Arial, sans-serif;
  letter-spacing: -.035em;
  text-wrap: balance;
}
.csap-article .ed-deck { max-width: 660px; margin: 0 0 24px; font: 400 18px/1.7 "Poppins", Arial, sans-serif; }
.csap-article .ed-byline {
  max-width: 590px;
  padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,.35);
  font: 14px/1.7 "Poppins", Arial, sans-serif;
}
.csap-article .ed-byline p { margin: 0; }
.csap-article .ed-author-line a { color: #FFFFFF; -webkit-text-fill-color: #FFFFFF; font-weight: 700; text-decoration: none; }
.csap-article .ed-author-line a:hover { text-decoration: underline; }
.csap-article .ed-job { display: block; }
.csap-article .ed-meta { display: flex; flex-wrap: wrap; gap: 0 10px; margin-top: 4px; }
.csap-article .ed-meta span + span::before { content: "\2022" / ""; margin-right: 10px; }

/* ---------- layout: table of contents + body ---------- */
.csap-article .ed-layout {
  display: grid;
  /* Article text fills the column beside the table of contents (about 880px at 1440px wide). */
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 56px;
  padding-block: 48px 64px;
}
.csap-article .ed-layout--no-toc { grid-template-columns: minmax(0, 920px); justify-content: center; }

/* Sidebar: table of contents + topics. Pinned while reading; scrolls on its own if taller than the window. */
/* The table of contents scrolls inside the sidebar when needed, so the topics below it stay in view. */
.csap-article .ed-aside { position: sticky; top: 120px; align-self: start; display: flex; flex-direction: column; max-height: calc(100vh - 140px); }
.csap-article .ed-toc { flex: 0 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding-top: 18px; border-top: 1px solid var(--ink); }
.csap-article .ed-aside .ed-tags--aside { flex: none; }
.csap-article .ed-toc summary { display: block; list-style: none; cursor: default; }
.csap-article .ed-toc summary::-webkit-details-marker { display: none; }
.csap-article .ed-aside .ed-tags { margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--ink); }
/* One copy of the topics at a time: sidebar on desktop, end of article otherwise. */
.csap-article .ed-layout:not(.ed-layout--no-toc) .ed-tags--end { display: none; }
.csap-article .ed-toc-label, .csap-article .ed-tags-label {
  margin: 0 0 14px;
  font: 700 11px/1.5 "Montserrat", Arial, sans-serif;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink);
}
.csap-article .ed-toc ol { margin: 0; padding: 0; list-style: none; }
.csap-article .ed-toc li { margin: 0; border-bottom: 1px solid var(--line); }
.csap-article .ed-toc a { display: block; padding: 8px 0; color: var(--muted); font: 13.5px/1.45 "Poppins", Arial, sans-serif; text-decoration: none; }
.csap-article .ed-toc a:hover { color: var(--blue); text-decoration: underline; }

/* ---------- body (post content from the block or classic editor) ---------- */
.csap-article .ed-body { min-width: 0; line-height: 1.65; }
.csap-article .ed-body p { margin: 0 0 18px; padding: 0; color: var(--muted); font: inherit; }
.csap-article .ed-body h2 {
  margin: 44px 0 20px;
  padding: 0;
  color: var(--ink);
  font: 700 28px/1.35 "Montserrat", Arial, sans-serif;
  letter-spacing: -.025em;
  text-transform: none;
}
.csap-article .ed-body h3 { margin: 28px 0 14px; color: var(--ink); font: 700 20px/1.4 "Montserrat", Arial, sans-serif; text-transform: none; }
.csap-article .ed-body h4 { margin: 24px 0 12px; color: var(--ink); font: 700 17px/1.5 "Montserrat", Arial, sans-serif; }
.csap-article .ed-body > :first-child { margin-top: 0; }
.csap-article .ed-body :is(ul, ol) { margin: 0 0 24px; padding-left: 23px; }
.csap-article .ed-body ul { list-style: disc outside; }
.csap-article .ed-body li { margin: 0 0 6px; padding-left: 4px; color: var(--muted); }
.csap-article .ed-body strong { color: var(--ink); font-weight: 700; }
.csap-article .ed-body img { max-width: 100%; height: auto; }
.csap-article .ed-body blockquote { margin: 30px 0; padding: 20px 24px; border-left: 3px solid var(--blue); background: var(--wash); }
.csap-article .ed-body blockquote p { margin: 0; color: var(--ink); }
.csap-article .ed-body .csap-written-by { font-size: 15px; font-style: italic; }

.csap-article .ed-body table {
  width: 100%;
  margin: 0 0 24px;
  border-collapse: collapse;
  background: #FFFFFF;
  color: var(--muted);
  font: 15px/1.65 "Poppins", Arial, sans-serif;
}
.csap-article .ed-body :is(th, td) { padding: 15px 14px; border: 0; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.csap-article .ed-body thead th { background: var(--wash); color: var(--ink); font-weight: 700; }
.csap-article .ed-body tbody th { color: var(--ink); font-weight: 700; }

/* Content components kept from the hand-built design (used in post content). */
.csap-article .ed-summary { margin: 0 0 36px; padding-bottom: 30px; border-bottom: 1px solid var(--line); }
.csap-article .ed-body .ed-summary h2 { margin: 0 0 20px; font: 700 12px/1.5 "Montserrat", Arial, sans-serif; letter-spacing: .14em; text-transform: uppercase; }
/* No bullets: the blue rule above each item marks it, starting at the item's left edge. */
.csap-article .ed-body ul.ed-takeaways { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin: 0; padding: 0; list-style: none; }
.csap-article .ed-body .ed-takeaways li { margin: 0; padding: 14px 0 0; border-top: 3px solid var(--blue); font: 15px/1.6 "Poppins", Arial, sans-serif; }
.csap-article .ed-takeaways strong { display: block; margin-bottom: 2px; font-size: 17px; line-height: 1.45; }
.csap-article .ed-takeaways br { display: none; }
.csap-article .ed-exhibit { margin: 28px 0 32px; padding-top: 18px; border-top: 3px solid var(--ink); }
.csap-article .ed-exhibit figcaption { margin-bottom: 16px; font: 700 18px/1.5 "Montserrat", Arial, sans-serif; }
.csap-article .ed-exhibit small { display: block; margin-top: 12px; color: var(--muted); font: 13px/1.6 "Poppins", Arial, sans-serif; }
.csap-article .ed-callout { margin: 30px 0; padding: 20px 24px; border-left: 3px solid var(--blue); background: var(--wash); }
.csap-article .ed-body .ed-callout p { margin: 0; color: var(--ink); font-size: 19px; line-height: 1.65; }
.csap-article .ed-article-image { margin: 26px 0 30px; }
.csap-article .ed-article-image img { display: block; width: 100%; height: auto; }
.csap-article .ed-article-image figcaption { margin-top: 10px; padding-left: 14px; border-left: 2px solid var(--blue); color: var(--muted); font: 13px/1.65 "Poppins", Arial, sans-serif; }
.csap-article .ed-sources { margin-top: 36px; padding-top: 20px; border-top: 1px solid var(--line); }
.csap-article .ed-body .ed-sources h2 { margin: 0 0 14px; font: 700 12px/1.5 "Montserrat", Arial, sans-serif; letter-spacing: .12em; text-transform: uppercase; }
.csap-article .ed-body .ed-sources :is(p, li) { font: 13px/1.75 "Poppins", Arial, sans-serif; }

/* ---------- CTA, tags, author bio (supplied by the template) ---------- */
.csap-article .ed-cta { margin-top: 44px; padding: 32px; background: #002E5D; }
.csap-article .ed-body .ed-cta h2 { margin: 0 0 16px; color: #FFFFFF; -webkit-text-fill-color: #FFFFFF; font-size: 28px; }
.csap-article .ed-body .ed-cta p { color: #FFFFFF; -webkit-text-fill-color: #FFFFFF; font-size: 16px; }
.csap-article .ed-cta a { color: #FFFFFF; -webkit-text-fill-color: #FFFFFF; }
.csap-article .ed-cta a:focus-visible { outline-color: #FFFFFF; }
.csap-article .ed-cta .ed-button {
  display: inline-block;
  max-width: 100%;
  margin-top: 4px;
  padding: 13px 20px;
  border: 2px solid #FFFFFF;
  border-radius: 3px;
  background: #FFFFFF;
  color: #002E5D;
  -webkit-text-fill-color: #002E5D;
  font: 700 15px/1.5 "Montserrat", Arial, sans-serif;
  text-decoration: none;
  text-align: center;
}
.csap-article .ed-cta .ed-button:hover { text-decoration: underline; }

.csap-article .ed-tags { margin-top: 36px; padding-top: 20px; border-top: 1px solid var(--line); }
.csap-article .ed-tags ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.csap-article .ed-body .ed-tags li { margin: 0; padding: 0; }
.csap-article .ed-tags a {
  display: inline-block;
  padding: 6px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--blue);
  font: 600 13px/1.4 "Poppins", Arial, sans-serif;
  text-decoration: none;
}
.csap-article .ed-tags a:hover { border-color: var(--blue); text-decoration: underline; }

.csap-article .ed-author { display: flex; gap: 20px; align-items: flex-start; margin-top: 36px; padding: 24px; border: 1px solid var(--line); border-radius: 12px; }
.csap-article .ed-author img { flex: none; border-radius: 50%; }
.csap-article .ed-body .ed-author p { margin: 0 0 8px; font-size: 15px; }
.csap-article .ed-author-name a { color: var(--ink); font-weight: 700; text-decoration: none; }
.csap-article .ed-author-name .ed-job { color: var(--muted); font-weight: 400; }

/* ---------- related articles ---------- */
.csap-article.ed-related { padding: 64px 0; background: var(--wash); }
.csap-article.ed-related h2 { margin: 0 0 28px; color: var(--ink); font: 700 28px/1.35 "Montserrat", Arial, sans-serif; letter-spacing: -.025em; }
.csap-article .ed-related-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.csap-article .ed-related-card {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #FFFFFF;
}
.csap-article .ed-related-card img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; height: auto; }
.csap-article .ed-related-body { padding: 20px 22px 24px; }
.csap-article .ed-related-cat { margin: 0 0 8px; color: var(--blue); font: 700 11px/1.5 "Montserrat", Arial, sans-serif; letter-spacing: .1em; text-transform: uppercase; }
.csap-article .ed-related-card h3 { margin: 0 0 10px; font: 700 18px/1.4 "Montserrat", Arial, sans-serif; }
.csap-article .ed-related-card h3 a { color: var(--ink); text-decoration: none; }
/* The whole card is clickable through the title link. */
.csap-article .ed-related-card h3 a::after { content: ""; position: absolute; inset: 0; }
.csap-article .ed-related-card:hover h3 a { text-decoration: underline; }
.csap-article .ed-related-card:focus-within { outline: 3px solid var(--blue); outline-offset: 2px; }
.csap-article .ed-related-card h3 a:focus-visible { outline: none; }
.csap-article .ed-related-date { margin: 0; color: var(--muted); font: 13px/1.6 "Poppins", Arial, sans-serif; }

/* ---------- responsive ---------- */
@media (max-width: 980px) {
  /* Two-column layout only; posts without a table of contents keep their single column. */
  .csap-article .ed-layout:not(.ed-layout--no-toc) { grid-template-columns: 180px minmax(0, 1fr); gap: 36px; }
  .csap-article .ed-related-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .csap-article .ed-wrap { padding-inline: 22px; }
  .csap-article.ed-hero {
    min-height: 0;
    padding: 44px 0;
    background-image: linear-gradient(90deg, rgba(0,34,70,.96), rgba(0,46,93,.88)), var(--ed-hero-img, none);
    background-position: 60% top;
  }
  .csap-article h1.ed-title { max-width: 100%; font-size: 36px; }
  .csap-article .ed-kicker { padding: 8px 13px; font-size: 10px; letter-spacing: .06em; }
  .csap-article .ed-deck { font-size: 17px; }
  /* .ed-wrap.ed-layout outranks the tablet two-column rule above. */
  .csap-article .ed-wrap.ed-layout { grid-template-columns: 1fr; gap: 32px; padding-block: 30px 44px; }
  .csap-article .ed-aside { position: static; display: block; max-height: none; }
  .csap-article .ed-toc { overflow: visible; }
  .csap-article .ed-tags--aside { display: none; }
  .csap-article .ed-layout:not(.ed-layout--no-toc) .ed-tags--end { display: block; }
  /* Phones: the table of contents is one tappable "In this article" row. */
  .csap-article .ed-toc { padding: 0; border: 1px solid var(--line); border-radius: 8px; }
  .csap-article .ed-toc summary { display: flex; justify-content: space-between; align-items: center; margin: 0; padding: 14px 16px; cursor: pointer; }
  .csap-article .ed-toc summary::after { content: "+" / ""; font: 400 22px/1 "Poppins", Arial, sans-serif; color: var(--blue); }
  .csap-article .ed-toc details[open] summary::after { content: "\2212" / ""; }
  .csap-article .ed-toc summary:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
  .csap-article .ed-toc ol { padding: 0 16px 8px; }
  .csap-article .ed-toc li:last-child { border-bottom: 0; }
  .csap-article .ed-body { font-size: 16px; }
  .csap-article .ed-body h2 { margin-top: 34px; font-size: 25px; }
  .csap-article .ed-body ul.ed-takeaways, .csap-article .ed-related-grid { grid-template-columns: 1fr; gap: 20px; }
  .csap-article .ed-cta { padding: 26px 22px; }
  .csap-article .ed-body :is(th, td) { padding: 12px 9px; font-size: 14px; }
  .csap-article .ed-author { flex-direction: column; }
}
@media print {
  .csap-article .ed-aside, .csap-article.ed-related { display: none; }
  .csap-article .ed-layout { display: block; }
  .csap-article.ed-hero { min-height: 0; padding: 24px 0; background: #FFFFFF; }
  .csap-article.ed-hero, .csap-article.ed-hero :is(h1, p, span, time, a) { color: #002E5D; -webkit-text-fill-color: #002E5D; }
}
@media (forced-colors: active) {
  .csap-article.ed-hero, .csap-article .ed-kicker, .csap-article .ed-cta, .csap-article .ed-callout { background: Canvas !important; }
  .csap-article .ed-kicker { border: 1px solid CanvasText; }
}