/* ---------------------------------------------------------------------- *
 * Additions to the fund landing pages (inc/fund-fixes.php). Its own file so a
 * cached older stylesheet can never affect it; the button's base look is the
 * plugin's own .ssf-btn (colors follow the page's light/dark design), this only
 * lays it out in the hero.
 * ---------------------------------------------------------------------- */

.ssf-hero__actions{ display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin-top:clamp(24px,2.6vw,34px); }
.ssf-fund .ssf-hero__actions .ss-factsheet-btn{
	display:inline-flex; align-items:center; gap:10px; padding:13px 24px 13px 20px;
	font-size:14.5px; line-height:1; letter-spacing:.01em;
	transition:background-color .15s ease, transform .15s ease;
}
/* The plugin's light-design button is white on #008fbd (3.7:1, under the 4.5 minimum at this size);
   navy text on the same blue is 5:1 and matches the dark design's pairing. */
.ssf-fund:not([data-ssf-theme="dark"]) .ssf-hero__actions .ss-factsheet-btn,
.ssf-fund:not([data-ssf-theme="dark"]) .ssf-hero__actions .ss-factsheet-btn:hover,
.ssf-fund:not([data-ssf-theme="dark"]) .ssf-hero__actions .ss-factsheet-btn:focus{ color:#0a1030; }
/* ...and on hover it lightens (the plugin darkens it to #005a9e, which would leave navy text at 2.6:1). */
.ssf-fund:not([data-ssf-theme="dark"]) .ssf-hero__actions .ss-factsheet-btn:hover,
.ssf-fund:not([data-ssf-theme="dark"]) .ssf-hero__actions .ss-factsheet-btn:focus{ background:#19a3d2; }
.ssf-hero__actions .ss-factsheet-btn svg{ flex:none; transition:transform .15s ease; }
.ssf-hero__actions .ss-factsheet-btn:hover svg,
.ssf-hero__actions .ss-factsheet-btn:focus-visible svg{ transform:translateY(2px); }
.ssf-hero__actions .ss-factsheet-btn:focus-visible{ outline:2px solid #fff; outline-offset:3px; }
@media (max-width:480px){
	.ssf-fund .ssf-hero__actions .ss-factsheet-btn{ width:100%; justify-content:center; }
}
@media (prefers-reduced-motion:reduce){
	.ssf-fund .ssf-hero__actions .ss-factsheet-btn,.ssf-hero__actions .ss-factsheet-btn svg{ transition:none; transform:none !important; }
}

/* Light design only was affected: the plugin's `.ssf-fund h1` (dark ink) outranks `.ssf-ticker`
   (white), leaving the big ticker dark on the navy hero. The hero is navy in both designs. */
.ssf-fund .ssf-hero .ssf-ticker{ color:var(--ssf-hero-text,#fff); }

/* Compliance copy on fund pages (inc/fund-fixes.php → ss_apply_fund_compliance). The performance note is a
   size larger than the 11.5px note it replaces, in bold italic and the full-strength text color; the
   footnote is plain, legible and sits under the section it belongs to. */
.ssf-note.ss-perf-disclosure{ font-size:13px; line-height:1.7; font-weight:700; font-style:italic; color:var(--ssf-ink); }
.ssf-note.ss-fund-footnote{ font-size:13px; line-height:1.65; margin-top:26px; max-width:68ch; }

/* Disclosures at the bottom of a fund page: larger (compliance), and the notes added under the chart / holdings / distributions. */
.ssf-section.ssf-disclosures p{ font-size:15px; line-height:1.65; }
.ssf-note.ss-fund-chartnote,.ssf-note.ss-fund-holdnote{ margin-top:10px; }