/*
 * Fnsoko theme layer on top of the Landor template (main.css stays untouched).
 * Only colours, the logo and Fnsoko-specific widgets live here. Layout, type, spacing and
 * motion come from the template itself.
 */
:root {
  --tp-theme-color: #0f2f36; /* template black -> Fnsoko deep ink (logo "Literacy Hub" family) */
  --tp-secoundery-color: #acd12d; /* template yellow -> Fnsoko lime ("Soko") */
  --tp-orange-color: #03a2ab; /* template orange accent -> Fnsoko teal ("fn") */
  --tp-body-color: #44504f;
  --tp-gray-color: #f3f6f4;
  --fn-teal: #03a2ab;
  --fn-lime: #acd12d;
  --fn-ink: #0f2f36;
}

/* Hardcoded template colours that bypass the variables */
.tp-linear-bg-2, .tp-linear-bg-3 { --tp-hard-lime: #acd12d; }

/* Logo: the Fnsoko mark is square, so size it by height */
.tp-header-logo img, .tp-offcanvas-logo img { height: 54px; width: auto; }
.fn-logo-lockup { display: inline-flex; align-items: center; gap: 12px; }
.fn-logo-lockup img { height: 54px; width: auto; }
.fn-logo-lockup b { font-size: 26px; font-weight: 800; letter-spacing: -0.03em; color: var(--tp-theme-color); line-height: 1; }
.fn-logo-lockup b i { font-style: normal; color: var(--fn-teal); }
.fn-logo-lockup small { display: block; font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #6b7a7c; margin-top: 4px; }
.tp-header-sticky .fn-logo-lockup img, .header-sticky .fn-logo-lockup img { height: 46px; }

/* Big footer wordmark (replaces the template's logo-big.png) */
.fn-footer-wordmark { font-weight: 800; letter-spacing: -0.06em; line-height: .8; font-size: clamp(90px, 22vw, 330px); color: var(--tp-theme-color); display: block; text-align: center; padding: 30px 0 10px; }
.fn-footer-wordmark i { font-style: normal; color: #fff; }

/* Template forms used by Fnsoko lead forms */
.tp-contect-box-input select { width: 100%; height: 60px; border: 1px solid rgba(15, 47, 54, .12); border-radius: 30px; padding: 0 25px; background: #fff; color: var(--tp-theme-color); appearance: none; }
.fn-form-note { font-size: 14px; color: #6b7a7c; }
.fn-form-error { color: #b42318; font-weight: 600; font-size: 14px; margin: 0 0 10px; }
.fn-form-success { padding: 26px 28px; border-radius: 20px; background: #f4f9e3; color: var(--tp-theme-color); font-weight: 600; }
.fn-form-success strong { display: block; font-size: 22px; margin-bottom: 6px; }
.fn-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

/* Disclaimer line under investing content */
.fn-disclaimer { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 22px; color: #6b7a7c; padding: 14px 18px; border-radius: 15px; background: var(--tp-gray-color); margin: 0; }
.fn-disclaimer svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 2px; color: var(--fn-teal); }

/* Rich text from the dashboard (articles, events, products) */
.fn-prose { font-size: 18px; line-height: 1.8; }
.fn-prose h2 { font-size: 34px; margin: 1.4em 0 .5em; }
.fn-prose h3 { font-size: 26px; margin: 1.3em 0 .5em; }
.fn-prose p, .fn-prose ul, .fn-prose ol { margin-bottom: 1em; }
.fn-prose ul, .fn-prose ol { padding-left: 1.3em; }
.fn-prose ul li { list-style: disc; }
.fn-prose ol li { list-style: decimal; }
.fn-prose a { color: var(--fn-teal); text-decoration: underline; text-underline-offset: 3px; }
.fn-prose img { border-radius: 20px; margin: 1.5em 0; max-width: 100%; height: auto; }
.fn-prose blockquote { margin: 1.5em 0; padding: 22px 28px; border-left: 4px solid var(--fn-lime); background: #f4f9e3; border-radius: 0 20px 20px 0; font-weight: 600; font-size: 22px; color: var(--tp-theme-color); }
.fn-prose table { width: 100%; border-collapse: collapse; margin: 1.5em 0; font-size: 16px; }
.fn-prose th, .fn-prose td { border: 1px solid rgba(15, 47, 54, .12); padding: 10px 14px; text-align: left; }
.fn-prose iframe { width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; border-radius: 20px; }

/* Placeholder marker for content Wanja still has to supply */
.fn-placeholder-flag { display: inline-block; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; color: #0f2f36; background: #f4f9e3; border-radius: 6px; padding: 2px 8px; }