/*
 * Editor content typography — vestfin theme (2026-10-17).
 *
 * Applies ONLY inside a body wrapper that carries .vf-clean (added by the
 * partials when the stored HTML has no class/style attributes; see
 * inc/editor-content.php). Every element selector is wrapped in :where() so
 * the rules sit at specificity (0,1,0): above Tailwind preflight's element
 * resets, level with a utility class. Hand-built bodies never get .vf-clean,
 * and even if a utility is typed into clean content, Tailwind loads later and
 * wins the tie.
 *
 * Values mirror what the hand-built markup used: strategy bodies 20/30px
 * (18/24 ≤767, 16/24 ≤599), paragraphs mb-5 (20px), lists mb-4, section
 * sub-headings .section-subtitle 30px centred with 60/40 margins (22px mobile),
 * links #00808f underlined, tables as the blog/copyright tables.
 */

/* hero accent used by strategy-header / page-hero titles (previously an arbitrary utility in the markup) */
.text-orange { color: #ffa523; }

/* ---- base: any clean body ---------------------------------------------- */
.vf-clean { color: #003140; }
.vf-clean :where(p, ul, ol, table, figure, blockquote, img) { margin: 0 0 20px; }
.vf-clean :where(p:last-child, ul:last-child, ol:last-child, table:last-child, figure:last-child, img:last-child) { margin-bottom: 0; }
.vf-clean :where(ul) { list-style: disc; padding-left: 1.5em; }
.vf-clean :where(ol) { list-style: decimal; padding-left: 1.5em; }
.vf-clean :where(li) { margin: 0 0 8px; }
.vf-clean :where(li > ul, li > ol) { margin: 8px 0 0; }
.vf-clean :where(a) { color: #00808f; text-decoration: underline; text-underline-offset: 2px; }
.vf-clean :where(a:hover) { color: #003242; }
.vf-clean :where(strong, b) { font-weight: 700; }
.vf-clean :where(em, i) { font-style: italic; }
.vf-clean :where(sup) { font-size: 0.7em; line-height: 0; vertical-align: super; }
.vf-clean :where(img) { display: block; max-width: 100%; height: auto; }
.vf-clean :where(figcaption) { font-size: 14px; line-height: 20px; color: #406571; margin-top: 8px; }
.vf-clean :where(blockquote) { border-left: 3px solid #cacfc8; padding-left: 20px; font-style: italic; color: #4b6573; }
.vf-clean :where(hr) { border: 0; border-top: 1px solid #cacfc8; margin: 32px 0; }

/* headings inside a body (the section's own title is an h2 printed by the partial) */
.vf-clean :where(h2) { font-size: 30px; line-height: 1.27; font-weight: 700; margin: 48px 0 16px; }
.vf-clean :where(h3) { font-size: 22px; line-height: 1.35; font-weight: 700; margin: 36px 0 12px; }
.vf-clean :where(h4) { font-size: 18px; line-height: 1.4;  font-weight: 700; margin: 28px 0 8px; }
.vf-clean :where(h5, h6) { font-size: 16px; line-height: 1.5; font-weight: 700; margin: 24px 0 8px; }
.vf-clean :where(h2:first-child, h3:first-child, h4:first-child) { margin-top: 0; }

/* tables (the blog/copyright table treatment) */
.vf-clean :where(table) { width: 100%; border-collapse: collapse; border: 1px solid #c6d1d5; font-size: 18px; line-height: 26px; color: #003140; background: #fff; }
.vf-clean :where(th, td) { padding: 16px; border: 1px solid #d2d2d2; vertical-align: top; text-align: left; }
.vf-clean :where(th) { font-weight: 700; background: #dde9ed; color: #102f40; text-align: center; }
.vf-clean :where(td[colspan]) { text-align: center; font-weight: 700; color: #0d0f10; }
.vf-clean :where(td ul, td ol) { margin: 0; padding-left: 1.2em; }
.vf-clean :where(td li) { margin: 0 0 6px; font-size: 18px; line-height: 26px; }
@media (max-width: 767px) { .vf-clean :where(table) { font-size: 16px; line-height: 24px; } .vf-clean :where(td li) { font-size: 15px; line-height: 22px; } }

/* desktop/mobile image pairs: two <img>s, one shown per breakpoint */
.vf-clean :where(img.image-mobile) { display: none; }
@media (max-width: 767px) {
  .vf-clean :where(img.image-mobile) { display: block; }
  .vf-clean :where(img.image-desktop) { display: none; }
}

/* ---- strategy / fund pages: body text sizes the hand-built markup used ---- */
/* sizes go on the text elements, not the wrapper: the wrappers carry typography.css tokens
   (text-body-lg etc.) whose font-size is !important and would otherwise cap inheritance at 18px */
.content-section--strategy .vf-clean :where(p, li, td, th, dd, dt),
#how-it-works .vf-clean :where(p, li, td, th, dd, dt),
#how-to-invest .vf-clean :where(p, li, td, th, dd, dt) { font-size: 20px; line-height: 30px; }
.content-section--strategy .vf-clean :where(h3),
#how-it-works .vf-clean :where(h3) { font-size: 24px; line-height: 32px; font-weight: 700; margin: 32px 0 12px; }
/* the old ".section-subtitle" sub-heading: 30px/44px bold, left (22px/32px on phones); Target Income centres it
   with the 720px measure and 60/40 margins. !important because legacy page CSS also targets .section-subtitle. */
.vf-clean :where(h2.section-subtitle, h3.section-subtitle, h4.section-subtitle),
.content-section--strategy .article-body.vf-clean h2.section-subtitle,     /* (0,4,1): beats components/content-section.css's */
.content-section--strategy .article-body.vf-clean h3.section-subtitle,     /* `.content-section--strategy .article-body h3 {18.72px !important}` */
.content-section--strategy .article-body.vf-clean h4.section-subtitle {
  font-size: 30px !important; line-height: 44px !important; font-weight: 700 !important; text-align: left; margin: 40px 0 24px;
}
.vf-clean :where(h2.section-subtitle:first-child, h3.section-subtitle:first-child, h4.section-subtitle:first-child) { margin-top: 0; }
main.page-content:has(.strategy-page-menu--target-income-strategy) .vf-clean :where(h2.section-subtitle, h3.section-subtitle, h4.section-subtitle) {
  line-height: normal !important; text-align: center; max-width: 720px; margin: 60px auto 40px;
}
main.page-content:has(.strategy-page-menu--target-income-strategy) .vf-clean :where(h2.section-subtitle:first-child, h3.section-subtitle:first-child, h4.section-subtitle:first-child) { margin-top: 0; }
.vf-clean :where(ul.checkmark-list) { list-style: none; padding-left: 0; }
.vf-clean :where(ul.checkmark-list > li) { position: relative; padding-left: 30px; margin-bottom: 14px; }
.vf-clean :where(ul.checkmark-list > li)::before { content: "\2713"; position: absolute; left: 0; top: 0; color: #ffa523; font-weight: 700; font-size: 18px; line-height: 1.5; }
.vf-clean :where(.text-small), .vf-clean :where(.text-small p, .text-small li) { font-size: 14px; line-height: 20px; }
.vf-clean :where(.text-small p) { margin-bottom: 14px; }
.content-section--strategy .vf-clean :where(h4),
#how-it-works .vf-clean :where(h4) { font-size: 22px; line-height: 1.35; margin: 32px 0 12px; }
@media (max-width: 767px) {
  .content-section--strategy .vf-clean :where(p, li, td, th, dd, dt),
  #how-it-works .vf-clean :where(p, li, td, th, dd, dt),
  #how-to-invest .vf-clean :where(p, li, td, th, dd, dt) { font-size: 18px; line-height: 24px; }
}
@media (max-width: 599px) {
  .content-section--strategy .vf-clean :where(p, li, td, th, dd, dt),
  #how-it-works .vf-clean :where(p, li, td, th, dd, dt),
  #how-to-invest .vf-clean :where(p, li, td, th, dd, dt) { font-size: 16px; line-height: 24px; }
  .vf-clean :where(h2.section-subtitle, h3.section-subtitle, h4.section-subtitle),
  .content-section--strategy .article-body.vf-clean h2.section-subtitle,
  .content-section--strategy .article-body.vf-clean h3.section-subtitle,
  .content-section--strategy .article-body.vf-clean h4.section-subtitle { font-size: 22px !important; line-height: 32px !important; margin: 32px 0 16px; }
  main.page-content:has(.strategy-page-menu--target-income-strategy) .vf-clean :where(h2.section-subtitle, h3.section-subtitle, h4.section-subtitle) { line-height: normal !important; margin: 40px auto 24px; }
}

/* ---- FAQ answers ---------------------------------------------------------- */
.faq .answer .vf-clean :where(p, li, td, dd, dt),
.faq-accordion__answer.vf-clean :where(p, li, td, dd, dt) { font-size: 18px; line-height: 27px; }
@media (min-width: 600px) {
  .faq .answer .vf-clean :where(p, li, td, dd, dt),
  .faq-accordion__answer.vf-clean :where(p, li, td, dd, dt) { font-size: 20px; line-height: 30px; }
}
.faq .answer .vf-clean :where(h3, h4),
.faq-accordion__answer.vf-clean :where(h3, h4) { font-size: 1em; line-height: inherit; margin: 20px 0 8px; text-align: left; max-width: none; }

/* ---- definitions list produced from the old pop-overs ---------------------- */
.vf-clean :where(dl) { margin: 0 0 20px; }
.vf-clean :where(dt) { font-weight: 700; }
.vf-clean :where(dd) { margin: 0 0 12px; }