/* Native blog articles on the mirror (blog_articles.py). Loaded only on article pages.
   Uses the site's own custom properties so it sits in the existing design; nothing here restyles
   any captured page. The note ("callout") styles are blog_callout.css, appended after this file. */

.ff-art-byline {
  color: var(--color-text-light);
  font-size: var(--font-size-base);
  margin: 0;
}

.ff-art-byline strong {
  color: var(--color-black-light);
  font-weight: var(--font-weight-bold);
}

.ff-art-byline a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.ff-art-byline a:hover {
  color: var(--color-pink);
}

/* Author page (/authors/<slug>/): the site's default-page template, plus these. */
.ff-author {
  align-items: center;
  display: flex;
  gap: var(--spacing-xl);
}

.ff-author__avatar {
  align-items: center;
  background: #301f8c;
  border-radius: 50%;
  color: #fff;
  display: flex;
  flex: 0 0 auto;
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-bold);
  height: 96px;
  justify-content: center;
  letter-spacing: 0.03em;
  width: 96px;
}

.ff-author__role {
  color: var(--color-text-light);
  font-size: var(--font-size-xl);
  margin: 0;
}

.ff-author-list__item {
  flex: 1 1 0;
  min-width: 0;
}

.ff-author-list__date {
  color: var(--color-text-light);
  font-size: var(--font-size-base);
  margin-left: var(--spacing-xs);
  white-space: nowrap;
}

@media (max-width: 640px) {
  /* a narrow screen puts the date on its own line under the title */
  .ff-author-list__date {
    display: block;
    margin-left: 0;
  }
}

.ff-art-lead {
  color: var(--color-primary);
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-medium);
  line-height: 1.4;
  margin: 0;
}

.ff-art-hero,
.ff-art-fig {
  margin: 0;
}

.ff-art-hero img,
.ff-art-fig img {
  border-radius: var(--border-radius-card);
  display: block;
  height: auto;
  max-width: 100%;
  width: 100%;
}

.ff-art-fig figcaption {
  color: var(--color-text-light);
  font-size: var(--font-size-sm);
  margin-top: var(--spacing-xxs);
}

.ff-art-toc {
  background: var(--color-white-off);
  border-radius: var(--border-radius-card);
  padding: var(--spacing-xl) var(--spacing-2xl);
}

.ff-art-toc__title {
  color: var(--color-primary);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  margin: 0 0 var(--spacing-xs);
}

.ff-art-toc ol {
  font-size: var(--font-size-lg);
  margin: 0 0 0 20px;
}

.ff-art-toc a,
.BlogSingle-module--content--85e3d ul a,
.BlogSingle-module--content--85e3d ol a,
.BlogSingle-module--content--85e3d p a {
  color: var(--color-secondary);
}

.BlogSingle-module--content--85e3d h2,
.BlogSingle-module--content--85e3d h3 {
  color: var(--color-primary);
  margin-bottom: 0;
}

.BlogSingle-module--content--85e3d h2 {
  margin-top: var(--spacing-3xl);
  scroll-margin-top: 100px;
}

.BlogSingle-module--content--85e3d h3 {
  margin-top: var(--spacing-base);
}

.ff-cta {
  background: var(--color-white-off);
  border-radius: var(--border-radius-card);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
  margin: var(--spacing-base) 0;
  padding: var(--spacing-2xl);
}

.ff-cta__title {
  color: var(--color-primary);
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  margin: 0;
}

.ff-cta__text {
  margin: 0;
}

.ff-cta .Button-module--button--f49ff {
  align-self: flex-start;
}
/*
 * Financefinity article note ("callout"): standalone CSS for the static mirror.
 * Plain CSS, literal hex, px units (so it ignores the host page's root font size). Class names are all
 * prefixed ff-note, nothing else on the page is touched.
 *
 * Palette (Financefinity tokens):
 *   ultraviolet #301f8c   info tile and label       12.35:1 on white
 *   CTA magenta #d0168a   tip tile and label         5.04:1 on white
 *   danger      #b4123c   warning tile and label     6.79:1 on white
 *   night       #1a1052   body text                  16.94:1 on white
 *   hairline    #e4e0f5   lilac at about half strength on white
 *
 * Font: Greycliff CF if the page already loads it, otherwise Avenir Next / Segoe UI. To force the
 * host page's own font, set  --ff-note-font: inherit;  on .ff-note.
 *
 * Layout: 32px tile under 400px wide, 40px from 400px. Under 640px the text runs full width beneath
 * the tile row; from 640px it hangs in a column beside the tile.
 */

.ff-note,
.ff-note * {
  box-sizing: border-box;
}

.ff-note {
  --ff-note-tone: #301f8c;
  --ff-note-halo: rgba(48, 31, 140, 0.09);
  --ff-note-tile: 32px;
  display: grid;
  grid-template-columns: var(--ff-note-tile) minmax(0, 1fr);
  column-gap: 12px;
  align-items: start;
  margin: 32px 0;
  padding: 16px;
  background: #fff;
  border: 1px solid #e4e0f5;
  border-radius: 18px;
  box-shadow:
    0 1px 2px rgba(48, 31, 140, 0.04),
    0 14px 28px -22px rgba(48, 31, 140, 0.3);
  color: #1a1052;
  font-family: var(--ff-note-font, "greycliff-cf", "Greycliff CF", "Avenir Next", "Segoe UI", sans-serif);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.65;
  text-align: left;
  -webkit-font-smoothing: antialiased;
}

.ff-note--tip {
  --ff-note-tone: #d0168a;
  --ff-note-halo: rgba(208, 22, 138, 0.09);
}

.ff-note--warning {
  --ff-note-tone: #b4123c;
  --ff-note-halo: rgba(180, 18, 60, 0.09);
}

/* The tile is decorative: the SVG inside carries aria-hidden in the markup. */
.ff-note__tile {
  grid-column: 1;
  grid-row: 1;
  display: grid;
  place-items: center;
  width: var(--ff-note-tile);
  height: var(--ff-note-tile);
  border-radius: 10px;
  background: var(--ff-note-tone);
  color: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.24),
    0 0 0 4px var(--ff-note-halo);
  forced-color-adjust: none;
}

.ff-note__tile svg {
  display: block;
  width: 18px;
  height: 18px;
}

.ff-note__label {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  align-items: center;
  min-height: var(--ff-note-tile);
  margin: 0;
  padding: 0;
  color: var(--ff-note-tone);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ff-note__text {
  grid-column: 1 / -1;
  grid-row: 2;
  margin: 12px 0 0;
  padding: 0;
  font-size: inherit;
  line-height: inherit;
  text-wrap: pretty;
}

.ff-note__text a {
  color: #301f8c;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}

.ff-note__text a:hover {
  text-decoration-color: #dd1d93;
}

.ff-note a:focus-visible {
  outline: 3px solid #dd1d93;
  outline-offset: 2px;
}

@media (min-width: 400px) {
  .ff-note {
    --ff-note-tile: 40px;
    column-gap: 16px;
    padding: 18px 20px 20px;
  }
  .ff-note__tile {
    border-radius: 12px;
  }
  .ff-note__tile svg {
    width: 22px;
    height: 22px;
  }
}

@media (min-width: 640px) {
  .ff-note {
    padding: 22px 26px 24px;
  }
  .ff-note__text {
    grid-column: 2;
    margin-top: -4px;
  }
}

@media print {
  .ff-note {
    box-shadow: none;
    break-inside: avoid;
  }
}