/*
Theme Name: TFB Ledger
Description: The guides of thefinancebase.com as part of The Finance Base itself (16-Oct-2026). The Finance Base's app draws the mast and the foot (/wp-chrome/). Keeps every platform hook: a literal head tag, wp_head, wp_body_open, wp_footer, the Phase3 offset, sidebar-1 "Article Sidebar" and sidebar-2 "Article Sidebar — Secondary", the primary and footer menus, .entry-content.article-content for the ad code and AAWP, and a rail at least 300 px wide.
Version: 1.0.0
Author: Yorker Media
Text Domain: tfb-ledger
*/

/* Colours, fonts and the mast come from the app's stylesheet (tokens on :root, dark under [data-theme] and the media query); the fallbacks
   below matter only while that stylesheet is missing. */
.tl-skip { position: absolute; left: -9999px; top: 8px; z-index: 50; padding: 8px 12px; border-radius: 8px; background: var(--sheet, #fff); color: var(--ink, #10201a); }
.tl-skip:focus { left: 16px; }
.tl-anchor { margin: 0; }
.tl-main { padding-bottom: 10px; }
.tl-path { margin: 22px 0 0; font-size: 0.86rem; color: var(--mute, #66756d); }
.tl-path a { color: inherit; }
.tl-over { margin: 0 0 12px; font: 700 0.74rem/1.2 var(--sans, sans-serif); letter-spacing: 0.22em; text-transform: uppercase; color: var(--copper-ink, #a8541c); }
.tl-over a { color: inherit; text-decoration: none; }
.tl-intro { margin: 14px 0 0; max-width: 64ch; font-size: 1.08rem; color: var(--ink-2, #34463d); }
.tl-intro p { margin: 0; }

/* the reading column and the rail: the column keeps the measure the guides had (about 720 px), the rail is wide enough for a 300 px unit */
.tl-body { display: grid; grid-template-columns: minmax(0, 720px) 320px; justify-content: space-between; gap: 40px; align-items: start; margin: 24px 0 0; }
.tl-body--alone { grid-template-columns: minmax(0, 760px); justify-content: start; }
@media (max-width: 1000px) { .tl-body { grid-template-columns: minmax(0, 1fr); } }
.tl-column { min-width: 0; }

/* a guide */
.tl-guide > header { padding: 0 0 20px; border-bottom: 2px solid var(--ink, #10201a); }
.tl-guide > header h1 { font-size: clamp(1.7rem, 3.2vw, 2.45rem); line-height: 1.12; }
.tl-meta { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 14px 0 0; font-size: 0.92rem; color: var(--mute, #66756d); }
.tl-meta a { color: var(--ink-2, #34463d); }
.tl-hero { margin: 22px 0 0; overflow: hidden; border-radius: var(--round, 12px); background: var(--forest-soft, #e3efe8); }
.tl-hero img { display: block; width: 100%; height: auto; }
.tl-hero figcaption { padding: 8px 12px; font-size: 0.84rem; color: var(--mute, #66756d); background: var(--sheet, #fff); }
.tl-guide .entry-content { margin: 26px 0 0; font-size: 1.07rem; line-height: 1.75; overflow-wrap: break-word; }
.entry-content h2, .entry-content h3, .entry-content h4 { margin: 1.7em 0 0.5em; }
.entry-content h2 { font-size: clamp(1.3rem, 2.4vw, 1.6rem); } .entry-content h3 { font-size: 1.2rem; } .entry-content h4 { font: 700 1.05rem var(--sans, sans-serif); }
.entry-content p, .entry-content ul, .entry-content ol { margin: 0 0 1.1em; }
.entry-content li { margin: 0.25em 0; }
.entry-content a { color: var(--forest, #0e4d37); }
.entry-content img { border-radius: 8px; }
.entry-content figure { margin: 1.4em 0; } .entry-content figcaption { font-size: 0.86rem; color: var(--mute, #66756d); }
.entry-content blockquote { margin: 1.4em 0; padding: 4px 0 4px 18px; border-left: 3px solid var(--copper, #e08a4a); color: var(--ink-2, #34463d); }
.entry-content code { padding: 0.1em 0.35em; border-radius: 5px; background: var(--forest-soft, #e3efe8); font-size: 0.92em; }
.entry-content pre { padding: 14px 16px; border-radius: 8px; background: var(--forest-soft, #e3efe8); overflow: auto; } .entry-content pre code { padding: 0; background: none; }
.entry-content table { width: 100%; margin: 1.4em 0; border-collapse: collapse; font-size: 0.96rem; }
.entry-content th, .entry-content td { padding: 9px 10px; border-bottom: 1px solid var(--rule, #dde4dc); text-align: left; vertical-align: top; }
.entry-content th { border-bottom: 2px solid var(--ink, #10201a); font-weight: 700; }
.page-links { margin: 1.4em 0 0; font-weight: 600; }
.tl-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 28px 0 0; }
.tl-tags a { padding: 4px 12px; border: 1px solid var(--rule-2, #c9d3c8); border-radius: 8px; font-size: 0.86rem; color: var(--ink-2, #34463d); text-decoration: none; }
.tl-tags a:hover { border-color: var(--forest, #0e4d37); color: var(--forest, #0e4d37); }
.tl-sponsor { margin: 32px 0 0; padding: 20px 22px; border: 1px dashed var(--copper-ink, #a8541c); border-radius: var(--round, 12px); background: var(--copper-soft, #fbeadc); }
.tl-sponsor p { margin: 0; color: var(--ink, #10201a); } .tl-sponsor .tl-over { margin-bottom: 8px; }
.tl-sponsor a { display: inline-block; margin: 14px 0 0; padding: 9px 16px; border-radius: 8px; background: var(--forest, #0e4d37); color: var(--on-forest, #f6f1e7); font-weight: 700; font-size: 0.92rem; text-decoration: none; }
.tl-sponsor a:hover { background: var(--forest-2, #0b3d2c); }
.tl-sponsor a.tl-sponsor-more { margin-left: 10px; padding: 9px 4px; background: none; color: var(--forest, #0e4d37); text-decoration: underline; }
.tl-sponsor a.tl-sponsor-more:hover { background: none; color: var(--ink, #10201a); }
.tl-turn { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 34px 0 0; }
.tl-turn a { display: block; padding: 14px 16px; border: 1px solid var(--rule, #dde4dc); border-radius: var(--round, 12px); background: var(--sheet, #fff); color: var(--ink, #10201a); font-weight: 600; line-height: 1.35; text-decoration: none; }
.tl-turn a:hover { border-color: var(--forest, #0e4d37); }
.tl-turn small { display: block; margin: 0 0 4px; font-weight: 400; font-size: 0.78rem; color: var(--mute, #66756d); }
.tl-turn .tl-newer { grid-column: 2; text-align: right; }
@media (max-width: 640px) { .tl-turn { grid-template-columns: 1fr; } .tl-turn .tl-newer { grid-column: 1; text-align: left; } }
.tl-more { margin: 42px 0 0; }
.tl-more h2 { padding: 0 0 10px; border-bottom: 2px solid var(--ink, #10201a); }

/* cards */
.tl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; margin: 18px 0 0; padding: 0; list-style: none; }
.tl-card a { display: flex; flex-direction: column; height: 100%; overflow: hidden; border: 1px solid var(--rule, #dde4dc); border-radius: var(--round, 12px); background: var(--sheet, #fff); color: var(--ink, #10201a); text-decoration: none; }
.tl-card a:hover { border-color: var(--forest, #0e4d37); }
.tl-pic { display: block; aspect-ratio: 16 / 9; background: var(--forest-soft, #e3efe8); }
.tl-pic img { display: block; width: 100%; height: 100%; object-fit: cover; }
.tl-card-body { display: flex; flex: 1; flex-direction: column; gap: 6px; padding: 14px 16px 16px; }
.tl-card-body b { font: 700 1rem/1.3 var(--serif, serif); }
.tl-card-body small { font-size: 0.8rem; color: var(--mute, #66756d); } .tl-card-body small:last-child { margin-top: auto; }
.tl-card-body .tl-sec { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--copper-ink, #a8541c); }

/* a listing's head */
.tl-head { padding: 30px 0 4px; }
.tl-menu, .tl-menu ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.tl-menu { margin: 18px 0 0; }
.tl-menu a { display: inline-block; padding: 7px 14px; border: 1px solid var(--rule-2, #c9d3c8); border-radius: 8px; color: var(--ink-2, #34463d); font-weight: 600; font-size: 0.9rem; text-decoration: none; }
.tl-menu a:hover, .tl-menu a[aria-current="page"] { border-color: var(--forest, #0e4d37); background: var(--forest-soft, #e3efe8); color: var(--forest, #0e4d37); }
.tl-find { display: flex; max-width: 560px; margin: 18px 0 0; }
.tl-find input { flex: 1; min-width: 0; height: 44px; padding: 0 16px; border: 1px solid var(--rule-2, #c9d3c8); border-right: 0; border-radius: 8px 0 0 8px; background: var(--sheet, #fff); color: var(--ink, #10201a); font: inherit; }
.tl-find button { height: 44px; padding: 0 18px; border: 0; border-radius: 0 8px 8px 0; background: var(--forest, #0e4d37); color: var(--on-forest, #f6f1e7); font-weight: 700; cursor: pointer; }
.tl-pages { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 30px 0 0; }
.tl-pages .page-numbers { min-width: 40px; padding: 8px 13px; border: 1px solid var(--rule-2, #c9d3c8); border-radius: 8px; color: var(--ink, #10201a); text-align: center; text-decoration: none; }
.tl-pages .page-numbers.current { border-color: var(--ink, #10201a); background: var(--ink, #10201a); color: var(--paper, #f5f7f2); }
.tl-pages .page-numbers.dots { border-color: transparent; }
.tl-none { margin: 24px 0 0; color: var(--ink-2, #34463d); }
.tl-count { margin: 0; color: var(--mute, #66756d); font-size: 0.94rem; }
.tl-column.ym-srch-wrap { max-width: none; margin: 0; padding: 0; }   /* the estate's search wrapper (ym-estate-search-results) pads itself; inside the column it must not */

/* the rail: widgets (ad units among them) stay plain, never framed; only the theme's own newest list is a card */
.tl-rail { display: grid; gap: 18px; min-width: 0; }
.tl-rail .widget { min-width: 0; max-width: 100%; }
.tl-rail .widget-title { margin: 0 0 12px; font: 700 0.76rem var(--sans, sans-serif); letter-spacing: 0.16em; text-transform: uppercase; color: var(--mute, #66756d); }
.tl-rail .wp-block-heading { margin: 0 0 12px; font: 700 0.76rem var(--sans, sans-serif); letter-spacing: 0.16em; text-transform: uppercase; color: var(--mute, #66756d); }
.tl-rail .wp-block-categories { margin: 0; padding: 0; list-style: none; }
.tl-rail .wp-block-categories li { padding: 9px 0; border-bottom: 1px solid var(--rule, #dde4dc); }
.tl-rail .wp-block-categories a { color: var(--ink, #10201a); font-weight: 600; font-size: 0.94rem; text-decoration: none; }
.tl-rail .wp-block-categories a:hover { color: var(--forest, #0e4d37); }
.tl-rail .widget_recent_entries ul { margin: 0; padding: 0; list-style: none; }
.tl-rail .widget_recent_entries li { padding: 9px 0; border-bottom: 1px solid var(--rule, #dde4dc); line-height: 1.35; }
.tl-rail .widget_recent_entries a { color: var(--ink, #10201a); font-weight: 600; font-size: 0.94rem; text-decoration: none; }
.tl-rail .widget_recent_entries a:hover { color: var(--forest, #0e4d37); }
.tl-rail .widget_recent_entries .post-date { display: block; margin-top: 2px; font-size: 0.76rem; color: var(--mute, #66756d); }
.tl-rail .tl-recent { padding: 18px; border: 1px solid var(--rule, #dde4dc); border-radius: var(--round, 12px); background: var(--sheet, #fff); }
.tl-recent ol { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.tl-recent a { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 12px; align-items: center; color: var(--ink, #10201a); text-decoration: none; }
.tl-recent img { width: 64px; height: 48px; object-fit: cover; border-radius: 6px; }
.tl-recent b { display: block; font-size: 0.92rem; line-height: 1.3; } .tl-recent small { display: block; margin-top: 2px; font-size: 0.76rem; color: var(--mute, #66756d); }
.tl-recent a:hover b { color: var(--forest, #0e4d37); }

/* comments */
.tl-comments { margin: 38px 0 0; padding: 24px 0 0; border-top: 1px solid var(--rule, #dde4dc); }
.tl-comment-list { margin: 0 0 20px; padding-left: 20px; }
.tl-comments textarea, .tl-comments input[type="text"], .tl-comments input[type="email"], .tl-comments input[type="url"] { width: 100%; padding: 10px 12px; border: 1px solid var(--rule-2, #c9d3c8); border-radius: 8px; background: var(--sheet, #fff); color: var(--ink, #10201a); font: inherit; }
.tl-comments .submit { padding: 10px 18px; border: 0; border-radius: 8px; background: var(--forest, #0e4d37); color: var(--on-forest, #f6f1e7); font-weight: 700; cursor: pointer; }

.tl-lost { padding: 60px 0 20px; }