/* Tradiam Fact Sheets — front end
   Tradiam Asset Managers. Built by Shupav Group.
   Everything is scoped under .tfs so it cannot collide with the theme. */

.tfs {
  /* Tokens taken from the Tradiam site so the component reads as native. */
  --tfs-wrap: 1200px;
  --tfs-pad: 26px;
  --tfs-navy: #11172E;
  --tfs-navy-80: #1E2647;
  --tfs-deep: #070914;
  --tfs-on-deep: #ffffff;
  --tfs-ink: #11172E;
  --tfs-muted: #5A6075;
  --tfs-line: #E9E6DE;
  --tfs-line-soft: #EFEADF;
  --tfs-tint: #F6F3EC;
  --tfs-tint-deep: #EFEADF;
  --tfs-base: #FAF8F3;
  --tfs-surface: #ffffff;
  --tfs-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  font-family: var(--tfs-font);
  color: var(--tfs-ink);
  box-sizing: border-box;
}

/* The page builder rarely constrains a shortcode, so the component brings its
   own container on the site's 1200px grid. Pass container="no" to turn it off. */
.tfs-container {
  max-width: var(--tfs-wrap, 1200px);
  margin-inline: auto;
  padding-inline: var(--tfs-pad, 26px);
  padding-block: clamp(36px, 6vh, 72px);
}
.tfs-container > .tfs + .tfs { margin-top: clamp(32px, 5vh, 56px); }
@media (max-width: 600px) { .tfs { --tfs-pad: 18px; } }

.tfs *,
.tfs *::before,
.tfs *::after { box-sizing: inherit; }

/* Themes commonly normalise svg/img to width:100%, sometimes with !important.
   Every plugin icon is sized here, at a specificity that holds against that. */
.tfs .tfs-i {
  width: 1em !important;
  height: 1em !important;
  max-width: none !important;
  min-width: 0;
  flex: none;
  display: inline-block;
  vertical-align: middle;
}

/* ---- block heading ---- */
.tfs-block + .tfs-block { margin-top: 44px; }
.tfs-block-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 20px; flex-wrap: wrap;
  padding-bottom: 14px; margin-bottom: 22px;
  border-bottom: 1px solid var(--tfs-line);
}
.tfs-block-head h2 {
  margin: 0; font-size: clamp(21px, 2.4vw, 27px); font-weight: 800;
  letter-spacing: -0.015em; color: var(--tfs-deep); line-height: 1.2;
}
.tfs-block-head .tfs-sub { margin: 5px 0 0; font-size: 13.5px; color: var(--tfs-muted); }

/* The link out of a fund page into the full archive. A text link with a rule
   under it, rather than a bordered chip, because the heading above already
   carries the weight. */
.tfs-viewall {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13.5px; font-weight: 700; text-decoration: none;
  color: var(--tfs-navy); padding-bottom: 2px;
  border-bottom: 1.5px solid var(--tfs-tint-deep);
  transition: border-color .2s ease, gap .2s ease;
}
.tfs-viewall:hover,
.tfs-viewall:focus { border-bottom-color: var(--tfs-navy); gap: 11px; color: var(--tfs-navy); }
.tfs-viewall .tfs-i { width: 13px !important; height: 13px !important; }

/* ---- the plate ----
   A document is presented as a plate: the period is the headline, because that
   is what somebody scanning for the latest sheet is looking for, and the fund
   and currency sit under it as quiet metadata. The navy keyline down the left
   edge is the only ornament. */
.tfs-grid { display: grid; gap: 14px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tfs-grid.tfs-fill { display: flex; flex-wrap: wrap; }
.tfs-grid.tfs-fill > * { flex: 1 1 220px; min-width: 0; }

.tfs-plate {
  position: relative; display: flex; flex-direction: column;
  min-width: 0; padding: 20px 20px 18px;
  background: var(--tfs-surface);
  border: 1px solid var(--tfs-line-soft);
  border-top: 3px solid var(--tfs-navy);
  border-radius: 3px;
  transition: border-color .18s ease, background .18s ease, transform .18s ease;
}
.tfs-plate:hover { background: var(--tfs-tint); transform: translateY(-2px); }
.tfs-plate:hover { border-color: var(--tfs-line); border-top-color: var(--tfs-navy); }

/* The cycle label carries its job through size, weight and colour. Capitals and
   wide tracking are the template look and they slow the eye, so neither is used. */
.tfs-plate-cycle {
  font-size: 12px; font-weight: 700; letter-spacing: .005em;
  color: var(--tfs-muted);
}
.tfs-plate-period {
  margin: 7px 0 0; font-size: 22px; font-weight: 800; line-height: 1.18;
  letter-spacing: -0.015em; color: var(--tfs-deep);
}
.tfs-plate-fund {
  margin: 6px 0 0; font-size: 13.5px; line-height: 1.45; color: var(--tfs-muted);
}
.tfs-plate .tfs-tag { align-self: flex-start; margin-top: 13px; }

/* ---- the currency tag ----
   A ruled tag rather than a filled pill, so the plate keeps one accent colour and
   the currency reads as a label, not a status. KES and USD are ISO codes and are
   printed as such, which is not the same thing as setting words in capitals, so
   the tracking stays tight and no transform is applied. */
.tfs-tag {
  display: inline-block; padding: 3px 8px 2px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .02em;
  border: 1px solid currentColor; border-radius: 2px; line-height: 1.5;
}
.tfs-tag-kes { color: var(--tfs-navy); }
.tfs-tag-usd { color: var(--tfs-muted); }

/* ---- the action ----
   A text link with an arrow, not a button. The whole plate is the hit area. */
/* A theme that styles every button will paint this one on hover, and because it
   is a text link with no padding the words then sit against the fill. Every
   state is pinned here, at a weight that holds against the theme. */
.tfs .tfs-open,
.tfs .tfs-open:hover,
.tfs .tfs-open:focus,
.tfs .tfs-open:active,
.tfs .tfs-open:focus-visible {
  -webkit-appearance: none !important;
  appearance: none !important;
  display: inline-flex !important; align-items: center !important;
  gap: 7px; margin-top: 16px;
  padding: 2px 0 !important; border: 0 !important; border-radius: 0 !important;
  background: none !important; background-color: transparent !important;
  box-shadow: none !important; text-shadow: none !important;
  font-family: inherit !important; font-size: 13px !important;
  font-weight: 700 !important; line-height: 1.4 !important;
  letter-spacing: .005em !important; text-transform: none !important;
  text-decoration: none !important; min-height: 0 !important; height: auto !important;
  width: auto !important; cursor: pointer; align-self: flex-start;
  color: var(--tfs-navy) !important;
  transition: gap .2s ease, color .2s ease;
}
.tfs .tfs-open:hover,
.tfs .tfs-open:focus { color: var(--tfs-deep) !important; }
.tfs-open .tfs-i { width: 13px !important; height: 13px !important; }
.tfs-plate .tfs-open { margin-top: auto; padding-top: 16px; }
.tfs-plate:hover .tfs-open,
.tfs-line:hover .tfs-open { gap: 12px; }
.tfs .tfs-open:focus-visible { outline: 3px solid var(--tfs-navy) !important; outline-offset: 4px; }
/* the plate and the line are each one target */
.tfs-plate .tfs-open::after,
.tfs-line .tfs-open::after { content: ""; position: absolute; inset: 0; z-index: 1; }

/* ---- the ledger ----
   The list display is a ruled ledger: period in a fixed first column so the
   dates stack into a readable column, then the fund, then the currency. */
.tfs-list { border-top: 1px solid var(--tfs-line); }
.tfs-line {
  position: relative; display: grid; align-items: center; gap: 18px;
  grid-template-columns: 13rem minmax(0, 1fr) auto auto;
  padding: 15px 2px;
  border-bottom: 1px solid var(--tfs-line-soft);
  transition: background .16s ease;
}
/* the row's keyline matches the plate and runs along the top edge */
.tfs-line::before {
  content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 2px;
  background: var(--tfs-navy); transform: scaleX(0); transform-origin: 0 50%;
  transition: transform .2s ease;
}
.tfs-line:hover::before { transform: scaleX(1); }
.tfs-line:hover { background: var(--tfs-tint); }
.tfs-line:last-child { border-bottom: 0; }
.tfs-line-period {
  font-size: 15px; font-weight: 800; color: var(--tfs-deep);
  letter-spacing: -0.01em;
}
.tfs-line-fund { font-size: 13.5px; color: var(--tfs-muted); min-width: 0; }
.tfs-line .tfs-open { margin-top: 0; }

@media (max-width: 860px) {
  .tfs-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tfs-line {
    grid-template-columns: minmax(0, 1fr) auto;
    row-gap: 6px; padding-right: 0;
  }
  .tfs-line-period { grid-column: 1; }
  .tfs-line .tfs-tag { grid-column: 2; grid-row: 1; justify-self: end; }
  .tfs-line-fund { grid-column: 1 / -1; grid-row: 2; }
  .tfs-line .tfs-open { grid-column: 1 / -1; grid-row: 3; }
}
@media (max-width: 520px) {
  .tfs-grid { grid-template-columns: minmax(0, 1fr); }
  .tfs-grid.tfs-fill > * { flex: 1 1 100%; }
}

.tfs-empty {
  margin: 0; padding: 26px 22px; font-size: 14px; color: var(--tfs-muted);
  background: var(--tfs-tint); border-left: 3px solid var(--tfs-line);
}
.tfs-sep { height: 1px; background: var(--tfs-line); margin: 40px 0; }
.tfs-arch-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  padding-bottom: 12px; margin-bottom: 20px;
  border-bottom: 1px solid var(--tfs-line);
}
.tfs-arch-head h2 {
  margin: 0; font-size: clamp(20px, 2.2vw, 25px); font-weight: 800;
  letter-spacing: -0.015em; color: var(--tfs-deep);
}
.tfs-count {
  font-size: 13px; font-weight: 700; letter-spacing: .005em;
  color: var(--tfs-muted);
}

/* ---- viewer ---- */
.tfs-viewer, .tfs-viewer * { box-sizing: border-box; }
/* The viewer is a side sheet rather than a centred dialog: a fact sheet is a
   tall portrait document, and a panel anchored to the edge gives it the full
   height of the window without the letterboxing a centred box forces. */
.tfs-viewer {
  position: fixed; inset: 0; z-index: 99999;
  --tfs-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  display: flex; align-items: stretch; justify-content: flex-end;
  padding: 0; background: rgba(26, 4, 4, 0.58);
  font-family: var(--tfs-font);
}
.tfs-viewer[hidden] { display: none !important; }
.tfs-viewer-panel {
  position: relative; background: #fff; border-radius: 0; overflow: hidden;
  width: min(840px, 100%); height: 100%;
  display: flex; flex-direction: column;
  box-shadow: -24px 0 70px -24px rgba(26, 4, 4, 0.55);
  animation: tfs-slide .26s cubic-bezier(.22,.61,.36,1) both;
}
@keyframes tfs-slide { from { transform: translateX(26px); opacity: .6 } to { transform: none; opacity: 1 } }
@media (prefers-reduced-motion: reduce) { .tfs-viewer-panel { animation: none } }
@media (max-width: 680px) {
  .tfs-viewer-panel { width: 100%; animation-name: tfs-rise; }
  @keyframes tfs-rise { from { transform: translateY(20px); opacity: .6 } to { transform: none; opacity: 1 } }
}
.tfs-viewer-bar {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 14px 14px 20px; background: var(--tfs-deep, #070914); color: #fff; flex: none;
  border-bottom: 3px solid #11172E;
}
.tfs-vt { flex: 1 1 auto; min-width: 0; }
.tfs-viewer-bar h2 {
  margin: 0; font-size: 15.5px; font-weight: 800; letter-spacing: -0.01em;
  color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tfs-vs { margin: 2px 0 0; font-size: 11.5px; opacity: 0.8; }
.tfs-viewer .tfs-viewer-bar .tfs-btn {
  -webkit-appearance: none !important;
  appearance: none !important;
  font-family: var(--tfs-font, inherit) !important;
  border-radius: 3px !important; cursor: pointer;
  display: inline-flex !important; align-items: center !important;
  justify-content: center !important; gap: 7px !important;
  font-size: 12.5px !important; font-weight: 800 !important;
  min-height: 40px !important; height: 40px !important;
  padding: 0 16px !important; margin: 0 !important;
  text-decoration: none !important; white-space: nowrap;
  text-transform: none !important; letter-spacing: normal !important;
  background: rgba(255, 255, 255, 0.14) !important; color: #fff !important;
  border: 1.5px solid rgba(255, 255, 255, 0.3) !important;
  box-shadow: none !important;
  transition: background 0.16s, border-color 0.16s;
}
.tfs-viewer .tfs-viewer-bar .tfs-btn:hover {
  background: rgba(255, 255, 255, 0.24) !important;
  border-color: rgba(255, 255, 255, 0.5) !important;
}
.tfs-viewer .tfs-viewer-bar .tfs-btn svg {
  width: 15px !important; height: 15px !important; display: block !important;
  flex: none !important; stroke: currentColor !important; fill: none !important;
}
.tfs-viewer .tfs-vclose {
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 40px !important; height: 40px !important;
  min-width: 40px !important; min-height: 40px !important;
  max-width: 40px !important; max-height: 40px !important;
  flex: 0 0 40px !important;
  padding: 0 !important; margin: 0 !important; border: 0 !important;
  border-radius: 50% !important; box-shadow: none !important;
  background: rgba(255, 255, 255, 0.16) !important;
  color: #fff !important; font-size: 0 !important; line-height: 1 !important;
  letter-spacing: normal !important; text-transform: none !important;
  display: inline-flex !important; align-items: center !important;
  justify-content: center !important; cursor: pointer;
  transition: background 0.16s;
}
.tfs-viewer .tfs-vclose:hover { background: rgba(255, 255, 255, 0.3) !important; }
.tfs-viewer .tfs-vclose svg {
  width: 18px !important; height: 18px !important;
  display: block !important; flex: none !important;
  stroke: currentColor !important; fill: none !important;
}
/* The tray behind the document, in a warm neutral rather than the blue-grey
   a PDF reader defaults to, so the viewer sits inside the brand. */
.tfs-viewer-body { flex: 1 1 auto; min-height: 0; background: #E9E6DE; }
.tfs-viewer-body iframe { display: block; width: 100%; height: 100%; border: 0; }
.tfs-viewer-bar .tfs-btn:focus-visible,
/* Both controls sit on the dark bar, where white is the ring with real
   contrast against it. */
.tfs-vclose:focus-visible { outline: 3px solid #fff !important; outline-offset: 2px; }

@media (max-width: 620px) {
  .tfs-viewer { padding: 0; }
  .tfs-viewer-panel { border-radius: 0; height: 100%; width: 100%; }
  .tfs-viewer-bar .tfs-btn span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
}

@media (prefers-reduced-motion: reduce) {
  .tfs *, .tfs-viewer * { transition: none !important; }
}

/* ---- a fact sheet's own page ---- */
.tfs-single-intro { margin: 0; font-size: 17px; line-height: 1.6; color: var(--tfs-ink); max-width: 62ch; }
.tfs-single-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 24px 0 0; }
.tfs-single-back { margin: 26px 0 0; font-size: 14px; }
.tfs-single-back a { color: var(--tfs-navy); font-weight: 500; }
.tfs .tfs-btn-lg {
  -webkit-appearance: none !important; appearance: none !important;
  display: inline-flex !important; align-items: center !important; gap: 9px;
  padding: 0 24px !important; min-height: 48px !important; height: 48px !important;
  border-radius: 999px !important; font-family: inherit !important;
  font-size: 15px !important; font-weight: 500 !important; line-height: 1 !important;
  letter-spacing: normal !important; text-transform: none !important;
  text-decoration: none !important; cursor: pointer; box-shadow: none !important;
}
.tfs .tfs-btn-lg.tfs-btn-view { background: var(--tfs-navy) !important; color: #fff !important; border: 1.5px solid var(--tfs-navy) !important; }
.tfs .tfs-btn-lg.tfs-btn-dl { background: transparent !important; color: var(--tfs-navy) !important; border: 1.5px solid var(--tfs-line) !important; }
.tfs .tfs-btn-lg.tfs-btn-dl:hover { border-color: var(--tfs-navy) !important; }
.tfs .tfs-btn-lg .tfs-i { width: 16px !important; height: 16px !important; }