/*
Theme Name: TheDividendCalc
Theme URI: https://thedividendcalc.com/
Author: TheDividendCalc.com
Description: A light, fast companion theme for TheDividendCalc.com. Matches the calculator plugin's design (IBM Plex type, deep-green palette, soft cards) so WordPress blog posts and standard pages look like part of the same site. Calculator pages themselves are rendered by the TheDividendCalc plugin and are unaffected by this theme.
Version: 1.3.3
Requires at least: 5.8
Tested up to: 6.7
Requires PHP: 7.4
License: GPL-2.0-or-later
Text Domain: thedividendcalc
*/

:root{
  color-scheme:light dark;
  --bg:#f3f6f2; --bg-band:#e9efe7; --card:#ffffff; --card-2:#fbfcfb;
  --ink:#132219; --ink-soft:#43544a; --ink-faint:#6d7f72;
  --line:#d9e2d8; --line-strong:#bccbbc;
  --green:#0c7a3e; --green-deep:#083d22; --green-soft:#e2f1e5;
  --amber:#c77f16; --amber-soft:#fdf0da;
  --shadow:0 1px 2px rgba(10,45,25,.06), 0 10px 30px -18px rgba(10,45,25,.25);
  --radius:14px;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#0f1712; --bg-band:#131e17; --card:#16211a; --card-2:#182420;
    --ink:#e7efe8; --ink-soft:#b3c2b6; --ink-faint:#84977f;
    --line:#26362a; --line-strong:#3b5140;
    --green:#35b368; --green-deep:#9fd8b4; --green-soft:#173626;
    --amber:#e0a33e; --amber-soft:#3a2c12;
    --shadow:0 1px 2px rgba(0,0,0,.35), 0 10px 30px -18px rgba(0,0,0,.6);
  }
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);
  font-family:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:var(--green);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%;height:auto}
.wrap{max-width:1180px;margin:0 auto;padding:0 20px}

/* ---------- header ---------- */
header.site{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--bg) 88%, transparent);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.wordmark{font-family:"IBM Plex Serif",serif;font-weight:700;font-size:21px;color:var(--ink);letter-spacing:-.01em;white-space:nowrap}
.wordmark:hover{text-decoration:none}
.wordmark .dot{color:var(--green)}
.wordmark .tld{color:var(--ink-faint)}
nav.main{display:flex;gap:22px;margin-left:auto;font-size:14.5px;font-weight:500;align-items:center}
nav.main ul{display:flex;gap:22px;list-style:none;margin:0;padding:0}
nav.main a{color:var(--ink)}
nav.main a:hover{color:var(--green);text-decoration:none}
.cta{display:inline-block;background:var(--green);color:#fff !important;font-weight:600;font-size:14.5px;
  padding:9px 16px;border-radius:999px;white-space:nowrap}
.cta:hover{background:var(--green-deep);text-decoration:none}
@media (max-width:820px){ nav.main ul{display:none} nav.main{gap:12px} }

/* ---------- blog hero ---------- */
.blog-hero{padding:44px 0 8px}
.blog-hero h1{font-family:"IBM Plex Serif",serif;font-size:34px;line-height:1.15;margin:0 0 8px;letter-spacing:-.01em}
.blog-hero p{color:var(--ink-soft);max-width:44em;margin:0}

/* ---------- post cards ---------- */
.post-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:20px;padding:26px 0 10px}
.post-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);overflow:hidden;display:flex;flex-direction:column}
.post-card .thumb{display:block;aspect-ratio:16/9;overflow:hidden;background:var(--bg-band)}
.post-card .thumb img{width:100%;height:100%;object-fit:cover;display:block}
.post-card .inner{padding:18px 20px 20px;display:flex;flex-direction:column;gap:8px;flex:1}
.post-card .cat{font-size:12px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--green)}
.post-card h2{font-family:"IBM Plex Serif",serif;font-size:20px;line-height:1.25;margin:0}
.post-card h2 a{color:var(--ink)}
.post-card h2 a:hover{color:var(--green);text-decoration:none}
.post-card .meta{font-size:13px;color:var(--ink-faint)}
.post-card .excerpt{color:var(--ink-soft);font-size:14.5px;margin:0;flex:1}
.post-card .more{font-weight:600;font-size:14.5px}

/* ---------- pagination ---------- */
.pagination{padding:14px 0 8px}
.pagination .nav-links{display:flex;gap:8px;flex-wrap:wrap}
.page-numbers{display:inline-block;padding:8px 13px;border:1px solid var(--line);border-radius:10px;
  background:var(--card);color:var(--ink);font-weight:500;font-size:14.5px}
.page-numbers.current{background:var(--green);border-color:var(--green);color:#fff}
a.page-numbers:hover{border-color:var(--green);color:var(--green);text-decoration:none}

/* ---------- single article ---------- */
.article{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:34px 38px;margin:30px auto;max-width:none}
.article .cat{font-size:12.5px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--green)}
.article h1{font-family:"IBM Plex Serif",serif;font-size:32px;line-height:1.18;margin:8px 0 10px;letter-spacing:-.01em}
.article .meta{font-size:13.5px;color:var(--ink-faint);border-bottom:1px solid var(--line);padding-bottom:16px;margin-bottom:20px}
.article .featured{margin:0 0 22px}
.article .featured img{border-radius:10px;width:100%}
.entry-content{font-size:16.5px;line-height:1.65;color:var(--ink)}
.entry-content h2{font-family:"IBM Plex Serif",serif;font-size:24px;margin:30px 0 10px;line-height:1.25}
.entry-content h3{font-family:"IBM Plex Serif",serif;font-size:19.5px;margin:24px 0 8px}
.entry-content p{margin:0 0 14px}
.entry-content ul,.entry-content ol{margin:0 0 14px;padding-left:22px}
.entry-content li{margin-bottom:5px}
.entry-content blockquote{margin:18px 0;padding:12px 18px;border-left:3px solid var(--green);
  background:var(--green-soft);border-radius:0 10px 10px 0;color:var(--ink-soft)}
.entry-content table{border-collapse:collapse;width:100%;margin:16px 0;font-size:15px}
.entry-content th,.entry-content td{border:1px solid var(--line);padding:8px 10px;text-align:left}
.entry-content th{background:var(--bg-band)}
.entry-content code{font-family:"IBM Plex Mono",monospace;font-size:.92em;background:var(--bg-band);
  padding:1px 5px;border-radius:6px}
.entry-content pre{background:var(--green-deep);color:#e7efe8;padding:16px;border-radius:10px;overflow:auto}
.entry-content pre code{background:none;padding:0;color:inherit}
.entry-content img{border-radius:10px}
.tags{margin-top:22px;font-size:13.5px;color:var(--ink-faint)}
.tags a{display:inline-block;background:var(--bg-band);border:1px solid var(--line);border-radius:999px;
  padding:3px 11px;margin:0 6px 6px 0;color:var(--ink-soft)}
.post-nav{display:flex;justify-content:space-between;gap:16px;max-width:none;margin:0 auto 8px;font-weight:600;font-size:14.5px}
@media (max-width:640px){ .article{padding:24px 20px} .article h1{font-size:26px} .blog-hero h1{font-size:27px} }

/* ---------- comments ---------- */
.comments-area{max-width:none;margin:26px auto 0;background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius);box-shadow:var(--shadow);padding:26px 30px}
.comments-area h2,.comments-area h3{font-family:"IBM Plex Serif",serif}
.comment-list{list-style:none;margin:0;padding:0}
.comment-list li{border-top:1px solid var(--line);padding:14px 0}
.comment-meta{font-size:13px;color:var(--ink-faint)}
.comment-reply-link{font-size:13.5px;font-weight:600}
.comment-form input[type="text"],.comment-form input[type="email"],.comment-form input[type="url"],
.comment-form textarea{width:100%;padding:10px 12px;border:1px solid var(--line-strong);border-radius:10px;
  background:var(--card-2);color:var(--ink);font:inherit;font-size:15px}
.comment-form input[type="submit"]{background:var(--green);color:#fff;border:0;border-radius:999px;
  padding:10px 20px;font-weight:600;cursor:pointer}

/* ---------- footer ---------- */
footer.site{margin-top:64px;background:var(--bg-band);border-top:1px solid var(--line);padding:44px 0 30px}
footer.site h4{font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint);margin:0 0 12px}
footer.site ul{list-style:none;margin:0;padding:0}
footer.site li{margin-bottom:7px;font-size:14.5px}
footer.site a{color:var(--ink-soft)}
footer.site .brand p{color:var(--ink-soft);font-size:14px;max-width:26em}
footer.site .legal{margin-top:30px;padding-top:16px;border-top:1px solid var(--line);
  font-size:13px;color:var(--ink-faint);display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap}

/* ---------- misc WP ---------- */
.screen-reader-text{position:absolute;left:-9999px}
.empty-note{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:26px;box-shadow:var(--shadow);margin:26px 0}

/* v1.1 logo lockup */
.wordmark.logo{display:inline-flex;align-items:center;gap:9px;text-decoration:none}
.wordmark.logo svg{flex:none;display:block}
.wordmark.logo .logo-text{font-weight:600;letter-spacing:-.02em}

/* ===== main menu: dropdowns + mega panel (v1.2.2) ===== */
header.site{position:relative;z-index:50}
nav.main ul.menu{display:flex;align-items:center;gap:2px;list-style:none;margin:0;padding:0}
nav.main ul.menu>li{position:relative}
nav.main .menu-link{display:inline-flex;align-items:center;gap:6px;background:none;border:0;font:inherit;font-size:.98rem;font-weight:600;color:var(--ink,#132219);padding:9px 12px;border-radius:10px;cursor:pointer;text-decoration:none;white-space:nowrap}
nav.main .menu-link:hover{background:#e9f2ea;color:#083d22}
nav.main .chev{font-size:.72em;transition:transform .15s ease}
nav.main li.open .chev,nav.main li:hover .chev{transform:rotate(180deg)}
nav.main .sub{position:absolute;top:calc(100% + 8px);left:0;min-width:262px;list-style:none;margin:0;background:var(--card,#fff);border:1px solid var(--line,#d9e2d8);border-radius:14px;box-shadow:0 18px 44px rgba(8,61,34,.16);padding:8px;display:none;z-index:70}
nav.main li:hover>.sub,nav.main li:focus-within>.sub,nav.main li.open>.sub{display:block}
nav.main .sub li{list-style:none}
nav.main .sub a{display:block;padding:8px 10px;border-radius:8px;color:var(--ink,#132219);text-decoration:none;font-weight:500;font-size:.96rem}
nav.main .sub a:hover{background:#eef5ee;color:#083d22}
nav.main .sub.mega{left:50%;transform:translateX(-50%);width:660px;max-width:92vw;display:none;grid-template-columns:1fr 1fr 1fr;gap:4px 20px;padding:18px}
nav.main li:hover>.sub.mega,nav.main li:focus-within>.sub.mega,nav.main li.open>.sub.mega{display:grid}
nav.main .mega-h{display:block;font-size:.7rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:#5c6f61;padding:2px 10px 6px}
nav.main .mega-col a{display:block;padding:7px 10px;border-radius:8px;color:var(--ink,#132219);text-decoration:none;font-weight:500;font-size:.96rem}
nav.main .mega-col a:hover{background:#eef5ee;color:#083d22}
nav.main ul.sub-menu{position:absolute;top:calc(100% + 8px);left:0;min-width:262px;max-height:70vh;overflow:auto;list-style:none;margin:0;background:var(--card,#fff);border:1px solid var(--line,#d9e2d8);border-radius:14px;box-shadow:0 18px 44px rgba(8,61,34,.16);padding:8px;display:none;z-index:70}
nav.main li:hover>ul.sub-menu,nav.main li:focus-within>ul.sub-menu,nav.main li.open>ul.sub-menu{display:block}
nav.main ul.sub-menu a{display:block;padding:8px 10px;border-radius:8px;color:var(--ink,#132219);text-decoration:none;font-weight:500;font-size:.96rem}
nav.main ul.sub-menu a:hover{background:#eef5ee;color:#083d22}
nav.main .menu-item-has-children>a::after{content:"\25BE";margin-left:6px;font-size:.72em}
.burger{display:none;margin-left:8px;background:var(--card,#fff);border:1px solid var(--line,#d9e2d8);border-radius:10px;width:42px;height:42px;padding:10px;cursor:pointer;flex-direction:column;justify-content:center;gap:5px}
.burger span{display:block;height:2px;background:var(--ink,#132219);border-radius:2px}
@media (max-width:1023px){
  .burger{display:inline-flex}
  header.site nav.main{display:none;position:absolute;top:100%;left:0;right:0;background:var(--card,#fff);border-bottom:1px solid var(--line,#d9e2d8);box-shadow:0 24px 44px rgba(8,61,34,.16);max-height:78vh;overflow:auto;padding:10px 16px 18px;margin:0}
  header.site.nav-open nav.main{display:block}
  nav.main ul.menu{flex-direction:column;align-items:stretch;gap:0}
  nav.main ul.menu>li{border-bottom:1px solid #eef2ee}
  nav.main .menu-link{width:100%;justify-content:space-between;padding:13px 8px;font-size:1.02rem}
  nav.main .sub,nav.main ul.sub-menu{position:static;display:none;box-shadow:none;border:0;border-radius:0;padding:0 0 8px 14px;min-width:0;max-height:none}
  nav.main li.open>.sub,nav.main li.open>ul.sub-menu{display:block}
  nav.main li:hover>.sub,nav.main li:hover>ul.sub-menu{display:none}
  nav.main li.open:hover>.sub,nav.main li.open:hover>ul.sub-menu{display:block}
  nav.main .sub.mega{width:auto;max-width:none;transform:none;grid-template-columns:1fr;padding:0 0 8px 14px}
  nav.main li.open>.sub.mega{display:block}
  header.site .cta{display:none}
}

/* ===== site logo image (v1.2.3) ===== */
.site-logo{height:50px;width:auto;display:block}
footer.site .site-logo{height:56px}
@media (max-width:640px){ .site-logo{height:42px} footer.site .site-logo{height:46px} }

/* Guide article visuals (v1.3.0) */
.entry-content .steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px;margin:22px 0}
.entry-content .step{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:18px}
.entry-content .step .n{font-family:"IBM Plex Serif",serif;font-size:28px;font-weight:700;color:var(--green);line-height:1}
.entry-content .step h3{margin:8px 0 6px;font-size:17px}
.entry-content .step p{margin:0;font-size:14.5px;color:var(--ink-soft)}
.entry-content .formula{background:#0f5132;color:#e7efe8;border-radius:12px;padding:18px 20px;font-family:"IBM Plex Mono",monospace;font-size:14.5px;line-height:1.95;margin:22px 0;overflow:auto}
.entry-content .formula .c{color:#9fd4ae}
.entry-content .viz-bars{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px;margin:22px 0}
.entry-content .vb-row{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.entry-content .vb-label{flex:0 0 104px;font-weight:600;font-size:14px}
.entry-content .vb-track{flex:1;background:#e9efe9;border-radius:6px;height:22px;overflow:hidden}
.entry-content .vb-fill{display:block;height:100%;background:var(--green);border-radius:6px}
.entry-content .vb-fill.alt{background:#57a773}
.entry-content .vb-val{flex:0 0 86px;text-align:right;font-weight:700;font-size:14.5px}
.entry-content .vb-note{font-size:13.5px;color:var(--ink-soft);margin:4px 0 0}


/* Header/footer parity with the calculator plugin (v1.3.1) */
header.site{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--bg) 88%, transparent);
        backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.bar{display:flex;align-items:center;gap:28px;height:62px}
.wordmark{font-family:"IBM Plex Serif",serif;font-weight:700;font-size:21px;color:var(--ink);letter-spacing:-.01em;white-space:nowrap}
.wordmark:hover{text-decoration:none}
.wordmark .dot{color:var(--green)}
.wordmark .tld{color:var(--ink-faint);font-size:15px;font-weight:600}
nav.main{display:flex;gap:22px;margin-left:auto;font-size:14.5px;font-weight:500}
nav.main a{color:var(--ink-soft)}
nav.main a:hover{color:var(--ink);text-decoration:none}
.bar .cta{background:var(--green);color:#fff;border:0;border-radius:9px;padding:8px 15px;font-weight:600;font-size:14px}
.bar .cta:hover{background:var(--green-deep)}
@media (prefers-color-scheme: dark){
  .bar .cta{color:#08130c}
}
@media (max-width:760px){
  nav.main{display:none}
  .bar{gap:14px}
}
section.block .sub{color:var(--ink-soft);max-width:46em;margin:0 0 26px;font-size:16.5px}
.cmp-panel .sub2{color:var(--ink-soft);font-size:14.5px;margin:0 0 18px}
footer.site{margin-top:64px;background:var(--bg-band);border-top:1px solid var(--line);padding:44px 0 30px}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:28px}
@media (max-width:860px){
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:480px){
  .foot-grid{grid-template-columns:1fr}
}
footer.site h4{font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint);margin:0 0 12px}
footer.site ul{list-style:none;margin:0;padding:0}
footer.site li{margin-bottom:8px;font-size:14px}
footer.site a{color:var(--ink-soft)}
footer.site a:hover{color:var(--ink)}
footer.site .brand p{color:var(--ink-soft);font-size:14px;max-width:26em}
.legal{border-top:1px solid var(--line);margin-top:32px;padding-top:18px;font-size:12.5px;color:var(--ink-faint);
        display:flex;flex-wrap:wrap;gap:8px 22px;justify-content:space-between}
.wordmark.logo{display:inline-flex;align-items:center;gap:9px;text-decoration:none}
.wordmark.logo svg{flex:none;display:block}
.wordmark.logo .logo-text{font-weight:600;letter-spacing:-.02em}
header.site{position:relative;z-index:50}
nav.main ul.menu{display:flex;align-items:center;gap:2px;list-style:none;margin:0;padding:0}
nav.main ul.menu>li{position:relative}
nav.main .menu-link{display:inline-flex;align-items:center;gap:6px;background:none;border:0;font:inherit;font-size:.98rem;font-weight:600;color:var(--ink,#132219);padding:9px 12px;border-radius:10px;cursor:pointer;text-decoration:none;white-space:nowrap}
nav.main .menu-link:hover{background:#e9f2ea;color:#083d22}
nav.main .chev{font-size:.72em;transition:transform .15s ease}
nav.main li.open .chev,nav.main li:hover .chev{transform:rotate(180deg)}
nav.main .sub{position:absolute;top:calc(100% + 8px);left:0;min-width:262px;list-style:none;margin:0;background:var(--card,#fff);border:1px solid var(--line,#d9e2d8);border-radius:14px;box-shadow:0 18px 44px rgba(8,61,34,.16);padding:8px;display:none;z-index:70}
nav.main li:hover>.sub,nav.main li:focus-within>.sub,nav.main li.open>.sub{display:block}
nav.main .sub li{list-style:none}
nav.main .sub a{display:block;padding:8px 10px;border-radius:8px;color:var(--ink,#132219);text-decoration:none;font-weight:500;font-size:.96rem}
nav.main .sub a:hover{background:#eef5ee;color:#083d22}
nav.main .sub.mega{left:50%;transform:translateX(-50%);width:660px;max-width:92vw;display:none;grid-template-columns:1fr 1fr 1fr;gap:4px 20px;padding:18px}
nav.main li:hover>.sub.mega,nav.main li:focus-within>.sub.mega,nav.main li.open>.sub.mega{display:grid}
nav.main .mega-h{display:block;font-size:.7rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:#5c6f61;padding:2px 10px 6px}
nav.main .mega-col a{display:block;padding:7px 10px;border-radius:8px;color:var(--ink,#132219);text-decoration:none;font-weight:500;font-size:.96rem}
nav.main .mega-col a:hover{background:#eef5ee;color:#083d22}
nav.main ul.sub-menu{position:absolute;top:calc(100% + 8px);left:0;min-width:262px;max-height:70vh;overflow:auto;list-style:none;margin:0;background:var(--card,#fff);border:1px solid var(--line,#d9e2d8);border-radius:14px;box-shadow:0 18px 44px rgba(8,61,34,.16);padding:8px;display:none;z-index:70}
nav.main li:hover>ul.sub-menu,nav.main li:focus-within>ul.sub-menu,nav.main li.open>ul.sub-menu{display:block}
nav.main ul.sub-menu a{display:block;padding:8px 10px;border-radius:8px;color:var(--ink,#132219);text-decoration:none;font-weight:500;font-size:.96rem}
nav.main ul.sub-menu a:hover{background:#eef5ee;color:#083d22}
nav.main .menu-item-has-children>a::after{content:"\25BE";margin-left:6px;font-size:.72em}
.burger{display:none;margin-left:8px;background:var(--card,#fff);border:1px solid var(--line,#d9e2d8);border-radius:10px;width:42px;height:42px;padding:10px;cursor:pointer;flex-direction:column;justify-content:center;gap:5px}
.burger span{display:block;height:2px;background:var(--ink,#132219);border-radius:2px}
@media (max-width:1023px){
  .burger{display:inline-flex}
  header.site nav.main{display:none;position:absolute;top:100%;left:0;right:0;background:var(--card,#fff);border-bottom:1px solid var(--line,#d9e2d8);box-shadow:0 24px 44px rgba(8,61,34,.16);max-height:78vh;overflow:auto;padding:10px 16px 18px;margin:0}
  header.site.nav-open nav.main{display:block}
  nav.main ul.menu{flex-direction:column;align-items:stretch;gap:0}
  nav.main ul.menu>li{border-bottom:1px solid #eef2ee}
  nav.main .menu-link{width:100%;justify-content:space-between;padding:13px 8px;font-size:1.02rem}
  nav.main .sub,nav.main ul.sub-menu{position:static;display:none;box-shadow:none;border:0;border-radius:0;padding:0 0 8px 14px;min-width:0;max-height:none}
  nav.main li.open>.sub,nav.main li.open>ul.sub-menu{display:block}
  nav.main li:hover>.sub,nav.main li:hover>ul.sub-menu{display:none}
  nav.main li.open:hover>.sub,nav.main li.open:hover>ul.sub-menu{display:block}
  nav.main .sub.mega{width:auto;max-width:none;transform:none;grid-template-columns:1fr;padding:0 0 8px 14px}
  nav.main li.open>.sub.mega{display:block}
  header.site .cta{display:none}
}
.site-logo{height:50px;width:auto;display:block}
footer.site .site-logo{height:56px}
@media (max-width:640px){
  .site-logo{height:42px}
  footer.site .site-logo{height:46px}
}