/*
Theme Name: Hobo Finance (Calm Ledger)
Template: blogus
Author: Hobo Finance
Description: Calm Ledger child theme for Hobo Finance. Modern, calculator-first design across the whole site. Revert any time by reactivating the Blogus parent theme.
Version: 0.2.0
*/

:root{--brand:#0B6E4F;--brand-ink:#085A40;--pos:#15924E;--warn:#B26A00;--neg:#C0392B;--bg:#F7F9F8;--surface:#FFFFFF;--border:#E5EAE8;--ink:#1C2B26;--muted:#5C6B66;--radius:16px;--shadow:0 1px 2px rgba(16,40,32,.06),0 8px 24px rgba(16,40,32,.06);--maxw:1140px;--readw:720px}
[data-theme="dark"]{--brand:#34D17F;--brand-ink:#2BB76C;--pos:#34D17F;--warn:#F4B740;--neg:#F1796B;--bg:#0E1714;--surface:#16211D;--border:#23332C;--ink:#E8EFEC;--muted:#9DB0A8;--shadow:0 1px 2px rgba(0,0,0,.4),0 8px 24px rgba(0,0,0,.35)}

/* Base */
body.hobo{font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;background:var(--bg);color:var(--ink);line-height:1.65;margin:0;-webkit-font-smoothing:antialiased}
.hobo h1,.hobo h2,.hobo h3,.hobo h4,.hobo .figure{font-family:'Plus Jakarta Sans','Inter',sans-serif;font-weight:800;letter-spacing:-.02em;line-height:1.18;color:var(--ink)}
.hobo a{color:var(--brand);text-decoration:none}
.hobo a:hover{text-decoration:underline}
.hobo .wrap{max-width:var(--maxw);margin:0 auto;padding:0 20px}
.hobo img{max-width:100%;height:auto}

/* Chrome: header */
.hobo .bar{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--surface) 88%,transparent);backdrop-filter:saturate(1.1) blur(8px);border-bottom:1px solid var(--border)}
.hobo .bar .wrap{display:flex;align-items:center;gap:18px;height:62px}
.hobo .brand{display:flex;align-items:center;gap:10px;font-family:'Plus Jakarta Sans';font-weight:800;font-size:19px;color:var(--ink)}
.hobo .brand:hover{text-decoration:none}
.hobo .brand .mark{width:30px;height:30px;flex:0 0 auto}
.hobo nav.main{display:flex;gap:22px;margin-left:auto}
.hobo nav.main a{color:var(--muted);font-weight:500;font-size:15px}
.hobo nav.main a:hover{color:var(--ink);text-decoration:none}
.hobo .toggle{background:var(--surface);border:1px solid var(--border);color:var(--ink);width:40px;height:40px;border-radius:10px;cursor:pointer;font-size:17px;line-height:1}
.hobo .toggle:hover{border-color:var(--brand)}
@media(max-width:760px){.hobo nav.main{gap:16px;font-size:14px}}

/* Article / page content */
.hobo .article{max-width:var(--readw);margin:0 auto;padding:34px 20px 10px}
.hobo .article.wide{max-width:var(--maxw)}
.hobo .crumbs{font-size:13px;color:var(--muted);margin-bottom:14px}
.hobo .crumbs a{color:var(--muted)}
.hobo .article h1.title{font-size:clamp(27px,4.4vw,40px);margin:0 0 12px}
.hobo .meta{display:flex;gap:14px;flex-wrap:wrap;color:var(--muted);font-size:13.5px;margin-bottom:8px}
.hobo .meta .tag{color:var(--brand);font-weight:700;text-transform:uppercase;letter-spacing:.04em;font-size:12px}
.hobo .hero-img{border-radius:var(--radius);overflow:hidden;margin:18px 0 6px;border:1px solid var(--border)}
.hobo .content{font-size:17px}
.hobo .content p{margin:0 0 18px}
.hobo .content h2{font-size:25px;margin:34px 0 12px}
.hobo .content h3{font-size:20px;margin:26px 0 10px}
.hobo .content ul,.hobo .content ol{margin:0 0 18px;padding-left:22px}
.hobo .content li{margin:6px 0}
.hobo .content strong{color:var(--ink)}
.hobo .content blockquote{margin:22px 0;padding:14px 18px;border-left:3px solid var(--brand);background:var(--surface);border-radius:0 10px 10px 0;color:var(--muted)}
.hobo .content table{width:100%;border-collapse:collapse;margin:18px 0;font-size:15px}
.hobo .content th,.hobo .content td{text-align:left;padding:10px;border-bottom:1px solid var(--border)}
.hobo .content img{border-radius:12px}
.hobo .content a{text-decoration:underline}

/* Calculator hub page body (the [page] templates) keep parent markup readable */
.hobo .page-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:24px;box-shadow:var(--shadow)}

/* Related / back link */
.hobo .backrow{max-width:var(--readw);margin:26px auto 0;padding:0 20px}
.hobo .pill{display:inline-flex;align-items:center;gap:7px;background:var(--surface);border:1px solid var(--border);border-radius:999px;padding:8px 15px;font-size:14px;font-weight:600;color:var(--ink)}
.hobo .pill:hover{border-color:var(--brand);text-decoration:none}

/* Footer */
.hobo footer.site{border-top:1px solid var(--border);margin-top:46px;padding:34px 0;background:var(--surface)}
.hobo footer.site .fgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
@media(min-width:760px){.hobo footer.site .fgrid{grid-template-columns:1.6fr repeat(3,1fr)}}
.hobo footer.site h4{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin:0 0 10px}
.hobo footer.site ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px}
.hobo footer.site ul a{color:var(--ink);font-size:13.5px;font-weight:400}
.hobo footer.site .foot-brand p{font-size:13px;color:var(--muted);margin:8px 0 0;max-width:260px}
.hobo footer.site .fine{margin-top:24px;padding-top:18px;border-top:1px solid var(--border);font-size:12px;color:var(--muted);display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between}
.hobo .disclaimer-strip{max-width:var(--readw);margin:30px auto 0;padding:14px 20px;font-size:12.5px;color:var(--muted);background:var(--surface);border:1px solid var(--border);border-radius:12px}

/* Accessibility: skip link + visible focus */
.hobo .skip{position:absolute;left:-9999px;top:0;background:var(--brand);color:#fff;padding:10px 16px;border-radius:0 0 10px 0;z-index:100}
.hobo .skip:focus{left:0}
.hobo a:focus-visible,.hobo button:focus-visible,.hobo input:focus-visible,.hobo select:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:6px}

/* Motion tokens (CSS): 180ms micro, 350ms normal, smooth easing. Transform/opacity only. */
.hobo .card,.hobo .pill,.hobo .chip,.hobo .toggle,.hobo nav.main a,.hobo .btn{transition:transform .18s cubic-bezier(.22,1,.36,1),box-shadow .18s ease,border-color .18s ease,color .18s ease,background .18s ease}
.hobo .card:active,.hobo .pill:active,.hobo .btn:active{transform:scale(.98)}
@keyframes hobo-rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.hobo .article,.hobo .page-card,.hobo .calc{animation:hobo-rise .35s cubic-bezier(.22,1,.36,1) both}

@media(prefers-reduced-motion:reduce){.hobo *,.hobo *::before,.hobo *::after{animation:none!important;transition:none!important}}

/* Embedded calculators: scoped so each calculator page fits the theme and inherits tokens + dark mode */
.hobo .hobocalc{max-width:680px;margin:0 auto}
.hobo .hobocalc *{box-sizing:border-box}
.hobo .hobocalc .calc{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:22px;box-shadow:var(--shadow)}
.hobo .hobocalc .calc h2{font-family:'Plus Jakarta Sans','Inter',sans-serif;font-weight:800;letter-spacing:-.02em;font-size:21px;line-height:1.2;margin:0 0 4px;display:flex;align-items:center;gap:9px;color:var(--ink)}
.hobo .hobocalc .emoji{width:40px;height:40px;display:grid;place-items:center;background:color-mix(in srgb,var(--brand) 12%,transparent);border-radius:10px;font-size:21px;flex:0 0 auto}
.hobo .hobocalc .sub{color:var(--muted);font-size:14px;margin:0 0 16px}
.hobo .hobocalc .field{margin-bottom:13px}
.hobo .hobocalc .field label{display:block;font-size:13.5px;font-weight:600;margin-bottom:5px;color:var(--ink)}
.hobo .hobocalc .hint{font-weight:400;color:var(--muted);font-size:12px}
.hobo .hobocalc .field input,.hobo .hobocalc .field select,.hobo .hobocalc input[type=number],.hobo .hobocalc input[type=text]{width:100%;border:1px solid var(--border);background:var(--bg);color:var(--ink);border-radius:10px;padding:11px 12px;font-size:15px;font-family:inherit;font-variant-numeric:tabular-nums}
.hobo .hobocalc .field input:focus,.hobo .hobocalc .field select:focus{outline:2px solid var(--brand);outline-offset:1px;border-color:var(--brand)}
.hobo .hobocalc .row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:520px){.hobo .hobocalc .row{grid-template-columns:1fr}}
.hobo .hobocalc .result{margin-top:16px;border-top:1px solid var(--border);padding-top:16px}
.hobo .hobocalc .result .lab{font-size:13px;color:var(--muted)}
.hobo .hobocalc .result .big,.hobo .hobocalc .big{font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;font-size:30px;color:var(--pos);margin:2px 0 4px;font-variant-numeric:tabular-nums}
.hobo .hobocalc .result .note,.hobo .hobocalc .note{font-size:13px;color:var(--muted)}
.hobo .hobocalc .figure{font-variant-numeric:tabular-nums}
.hobo .hobocalc .moneybar{display:flex;height:14px;border-radius:8px;overflow:hidden;border:1px solid var(--border);margin:12px 0 8px}
.hobo .hobocalc .moneybar span{display:block;height:100%}
.hobo .hobocalc .legend{display:flex;gap:14px;font-size:12px;color:var(--muted);flex-wrap:wrap}
.hobo .hobocalc .legend i{width:10px;height:10px;border-radius:3px;display:inline-block;margin-right:5px}
.hobo .hobocalc .src{font-size:12px;color:var(--muted);margin-top:14px;border-top:1px dashed var(--border);padding-top:10px}
.hobo .hobocalc .src a{color:var(--brand)}
.hobo .hobocalc .disclaimer{font-size:12px;color:var(--muted);margin:18px 0 0}
.hobo .hobocalc table{width:100%;border-collapse:collapse;font-size:14px;margin:10px 0}
.hobo .hobocalc th,.hobo .hobocalc td{text-align:left;padding:8px;border-bottom:1px solid var(--border)}

/* Calculator hub directory grid */
.hobo .chead{font-size:13px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin:24px 0 10px;font-family:'Plus Jakarta Sans',sans-serif}
.hobo .cgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
@media(min-width:720px){.hobo .cgrid{grid-template-columns:repeat(3,1fr)}}
.hobo .ccard{display:flex;flex-direction:column;gap:3px;background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:15px 16px;transition:transform .18s cubic-bezier(.22,1,.36,1),border-color .18s ease,box-shadow .18s ease}
.hobo .ccard:hover{border-color:color-mix(in srgb,var(--brand) 40%,var(--border));box-shadow:var(--shadow);transform:translateY(-2px);text-decoration:none}
.hobo .ccard b{font-weight:700;color:var(--ink);font-size:15px}
.hobo .ccard span{font-size:12.5px;color:var(--muted)}

/* Blog archive grid (interior pages) */
.hobo .posts{display:grid;grid-template-columns:1fr;gap:14px;margin-top:10px}
@media(min-width:680px){.hobo .posts{grid-template-columns:repeat(3,1fr)}}
.hobo .post{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;transition:transform .18s cubic-bezier(.22,1,.36,1),box-shadow .18s ease}
.hobo .post:hover{box-shadow:var(--shadow);transform:translateY(-2px);text-decoration:none}
.hobo .post .thumb{height:120px;background:linear-gradient(135deg,color-mix(in srgb,var(--brand) 30%,var(--surface)),color-mix(in srgb,var(--brand) 8%,var(--surface)));background-size:cover;background-position:center}
.hobo .post .pad{padding:16px;display:flex;flex-direction:column;gap:8px;flex:1}
.hobo .post .tag{font-size:11px;font-weight:700;color:var(--brand);text-transform:uppercase;letter-spacing:.05em}
.hobo .post h3{font-size:16px;margin:0;font-family:'Inter',sans-serif;font-weight:700;letter-spacing:0;line-height:1.3;color:var(--ink)}
