/* ===== Base (light) theme tokens ===== */
:root {
  --bg: #ffffff;
  --fg: #0e1116;
  --muted: #6b7280;
  --border: #e5e7eb;
  --link: #2b6fff;
  --link-hover: #1d56d4;

  /* Surface system */
  --surface-bg: var(--bg);
  --surface-fg: var(--fg);
}

/* ===== Dark theme tokens (support multiple togglers) ===== */
:root.dark, html.dark, body.dark, [data-theme="dark"], [data-theme="dark"] body, .theme-dark {
  --bg: #0c0f14;
  --fg: #f5f7fa;
  --muted: #c7d0dd;
  --border: #2b3340;
  --link: #9bc1ff;
  --link-hover: #b0ceff;
}

/* ===== Defaults ===== */
html, body { background: var(--bg); }
body { color: var(--fg); }
a { color: var(--link); text-decoration: none; }
a:hover { color: var(--link-hover); text-decoration: underline; }
h1, h2, h3 { color: var(--link); }
strong { font-weight: 600; }

.readmore-bar {
  margin-top: 1.25rem; padding: .75rem 1rem;
  border: 1px solid var(--border); border-radius: 12px;
  background: color-mix(in oklab, var(--bg) 92%, black 8%);
  color: var(--muted); font-size: .95rem;
}
.readmore-bar a { font-weight: 600; }

/* Tiles */
.tilegrid{max-width:64rem;margin:0 auto;display:grid;grid-template-columns:1fr;gap:1rem;justify-items:center}
@media(min-width:640px){.tilegrid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.tilegrid{grid-template-columns:repeat(3,1fr)}}
.tile{display:inline-block;width:16rem;text-align:center;padding:.9rem 1rem;border-radius:16px;border:1px solid var(--border);background: var(--link); color:#fff}
.tile:active{opacity:.9}

/* ===== Surface system =====
   .surface   -> normal surface (inherits theme fg/bg)
   .surface--inverse -> dark surface (forces readable light fg)
*/
.surface { background: var(--surface-bg); color: var(--surface-fg); }
.surface a { color: var(--link); }
.surface--inverse {
  background: color-mix(in oklab, var(--bg) 10%, black 90%);
  color: #fff;
}
.surface--inverse h1, .surface--inverse h2, .surface--inverse h3,
.surface--inverse p,  .surface--inverse li, .surface--inverse strong { color: #fff !important; }
.surface--inverse a { color: #cfe0ff; }
.surface--inverse a:hover { color: #e4ecff; }

/* Normalize rogue inline colors in articles */
main [style*="color"], article [style*="color"], .post [style*="color"],
.content [style*="color"], .prose [style*="color"] { color: inherit !important; }
article, .post, .content, .prose { color: var(--fg); }
article h1, .post h1, .content h1, .prose h1,
article h2, .post h2, .content h2, .prose h2,
article h3, .post h3, .content h3, .prose h3 { color: var(--link) !important; }

/* Header + toggle */
header, .site-header{
  position: sticky; top: 0; z-index: 1000;
  background: var(--bg); padding-right: 3.25rem;
  border-bottom: 1px solid var(--border);
}
#theme-toggle, .theme-toggle, [data-role="theme-toggle"]{
  position: fixed; top: .75rem; right: calc(env(safe-area-inset-right, 0) + 1rem); z-index: 1100;
}

/* Anchor spacing */
.hero, .banner { scroll-margin-top: 5rem; }

/* Footer */
footer, .footer { color: var(--muted); }
footer a, .footer a { color: var(--link); }
footer a:hover, .footer a:focus { color: var(--link-hover); }

/* ===== Article typography (.prose) ===== */
.prose{
  max-width: 70ch;
  font-size: 1rem; line-height: 1.7;
  color: var(--fg);
}
.prose h1{font-size:1.875rem; line-height:1.2; font-weight:700; margin:1.6rem 0 .8rem; color:var(--heading)}
.prose h2{font-size:1.5rem;   line-height:1.25; font-weight:700; margin:1.4rem 0 .7rem; color:var(--heading)}
.prose h3{font-size:1.25rem;  line-height:1.3;  font-weight:600; margin:1.2rem 0 .6rem; color:var(--heading)}
.prose p, .prose li{margin: .65rem 0; color:inherit}
.prose strong{font-weight:600; color:inherit}
.prose em{font-style:italic}
.prose a{color:var(--link); text-decoration: none}
.prose a:hover{color:var(--link-hover); text-decoration: underline}
.prose hr{border:0; border-top:1px solid var(--border); margin:1.25rem 0}
.prose .callout{
  margin: .9rem 0; padding: .75rem .9rem; border-radius:12px;
  border:1px solid var(--border);
  background: color-mix(in oklab, var(--bg) 92%, black 8%);
}

/* Dark keeps the same scale and adjusts only colors via tokens */
:root.dark .prose, html.dark .prose, body.dark .prose,
[data-theme="dark"] .prose, .theme-dark .prose { color: var(--fg); }

/* === Fix landing features readability in DARK MODE only === */
:root.dark .feature .text,
html.dark  .feature .text,
body.dark  .feature .text,
[data-theme="dark"] .feature .text,
.theme-dark .feature .text {
  color: var(--fg) !important;        /* light body text */
}

:root.dark .feature .text .meta,
html.dark  .feature .text .meta,
body.dark  .feature .text .meta,
[data-theme="dark"] .feature .text .meta,
.theme-dark .feature .text .meta {
  color: var(--muted) !important;     /* muted subtext */
}

/* Optional: ensure the section heading uses the theme heading color in dark */
:root.dark h2.h2,
html.dark  h2.h2,
body.dark  h2.h2,
[data-theme="dark"] h2.h2,
.theme-dark h2.h2 {
  color: var(--heading) !important;
}
/* === Landing features: color via tokens (applies to BOTH themes) === */
.card.tight .feature .text { color: var(--fg) !important; }
.card.tight .feature .text .meta { color: var(--muted) !important; }

/* Keep the section heading on the same token system */
.card.tight h2.h2 { color: var(--heading) !important; }
/* === Feature cards / tiles (e.g., ASX Lingo, ETF Basics, $5k) ===
   Keep typography identical; only unify colors through tokens. */
.grid .card, .container .grid .card, a.card, .tile, .cards .card {
  color: var(--fg) !important;                      /* body text */
  border-color: var(--border);
}
.grid .card h1, .grid .card h2, .grid .card h3,
.container .grid .card h1, .container .grid .card h2, .container .grid .card h3,
a.card h1, a.card h2, a.card h3,
.tile h1, .tile h2, .tile h3,
.cards .card h1, .cards .card h2, .cards .card h3 {
  color: var(--heading) !important;                 /* headings */
}
.grid .card p, .grid .card .meta,
.container .grid .card p, .container .grid .card .meta,
a.card p, a.card .meta,
.tile p, .tile .meta,
.cards .card p, .cards .card .meta {
  color: var(--fg) !important;                      /* summaries */
}

/* Links inside cards/tiles should look like body copy by default */
.grid .card a, .container .grid .card a, a.card,
.tile a, .cards .card a {
  color: inherit !important;
  text-decoration: none;
}
.grid .card a:hover, .container .grid .card a:hover, a.card:hover,
.tile a:hover, .cards .card a:hover {
  text-decoration: underline;
}
/* Narrow fallback: homepage feature row after hero */
.section .container .grid a.card,
.section .container .grid a.card * {
  color: var(--fg) !important;
}
.section .container .grid a.card h3,
.section .container .grid a.card .title,
.section .container .grid a.card strong {
  color: var(--heading) !important;
}
.section .container .grid a.card .meta {
  color: var(--muted) !important;
}

/* === Reset: inverse helpers should never paint a solid background === */
.surface--inverse { background: inherit !important; }
.surface { background: inherit; } /* our helper should not force a bg */

/* Optional utility for truly dark art-directed sections (text-only) */
.on-dark, .on-dark * { color: #fff !important; }
:root[data-theme="dark"] .on-dark .meta { color: #c7d0dd !important; }
:root[data-theme="light"] .on-dark .meta { color: #6b7280 !important; }
/* === Global header/nav layout & active state (text-only) === */
.site-header .container.row{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}
.site-header .spacer{flex:1 1 auto}
.site-header .nav{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center}
.site-header .nav a{display:inline-flex;align-items:center;gap:.35rem}
.site-header .nav a[aria-current="page"]{
  opacity:1 !important; visibility:visible !important; pointer-events:none;
  outline:0; text-decoration:none;
  /* Optional subtle chip-ish highlight; text-only overrides, no bg color flip */
  border-color: var(--border);
}
.back-link{margin-left:.25rem}
.nav a[aria-current="page"]{display:inline-flex !important; opacity:1 !important; visibility:visible !important;}
/* --- Header layout (supports both .header and .site-header) --- */
.header, .site-header { position:sticky; top:0; z-index:1000; background:var(--bg); border-bottom:1px solid var(--border); }
.header .container.row, .site-header .container.row { display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; }
.header .spacer, .site-header .spacer { flex:1 1 auto; }
.header .nav, .site-header .nav { display:flex; gap:.5rem; flex-wrap:wrap; align-items:center; }
.header .brand, .site-header .brand { font-weight:700; color:var(--heading); text-decoration:none }

/* --- Tabs: consistent look; active stays visible; never filled --- */
.nav a { background:transparent !important; color:var(--fg); border:1px solid transparent; }
.nav a:hover { text-decoration:underline; }
.nav a[aria-current="page"]{
  display:inline-flex !important; visibility:visible !important; opacity:1 !important; pointer-events:none;
  background:transparent !important; box-shadow:none !important;
  color:var(--heading) !important; border-color:var(--border) !important; border-radius:999px;
}

/* Back link tone-down */
.back-link { opacity:.85 }
.nav a.active{ background:transparent !important; color:var(--heading) !important; box-shadow:none !important; }
/* === Nav tabs: consistent look & readable in both themes === */
.header .nav a,
.site-header .nav a,
.nav a {
  background: transparent !important;
  color: var(--fg) !important;
  box-shadow: none !important;
  border: 1px solid transparent; /* prevent layout shift */
}
.header .nav a:hover,
.site-header .nav a:hover,
.nav a:hover { text-decoration: underline; }

/* Active tab stays visible, never "filled", on-brand color */
.header .nav a[aria-current="page"],
.site-header .nav a[aria-current="page"],
.nav a[aria-current="page"]{
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: none;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--heading) !important;
  border-color: var(--border) !important;
  border-radius: 999px;
}

/* Kill any legacy 'active' class that forces a filled/dark look */
.header .nav a.active,
.site-header .nav a.active,
.nav a.active {
  background: transparent !important;
  color: var(--heading) !important;
  box-shadow: none !important;
}
/* Theme toggle placement */
#theme-toggle, .theme-toggle, [data-role="theme-toggle"]{
  position: fixed;
  top: .75rem;
  right: calc(env(safe-area-inset-right, 0) + 1rem);
  z-index: 1100;
}
/* ========= Centered header banner + tabs (layout only) ========= */
.header { position: sticky; top: 0; z-index: 1000; background: var(--bg); border-bottom: 1px solid var(--border); }

/* Stack the header into two clean rows: brand (center) then tabs/actions */
.header .container.row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  padding: .75rem 0 .6rem;
}

/* Brand as the banner headline (uses tokens so it works in both themes) */
.header .brand {
  font-weight: 800;
  font-size: 1.35rem;
  letter-spacing: .2px;
  line-height: 1.1;
  color: var(--heading);
  text-decoration: none;
  text-align: center;
}

/* Tabs centered below the brand */
.header .nav {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  margin-top: .15rem;
}

/* Actions row sits with the tabs; spacer is not needed in the stacked layout */
.header .spacer { display: none; }

/* Keep our consistent tab look & readable contrast (already added, repeated here for cohesion) */
.header .nav a { background: transparent !important; color: var(--fg) !important; box-shadow: none !important; border: 1px solid transparent; }
.header .nav a:hover { text-decoration: underline; }
.header .nav a[aria-current="page"]{
  display: inline-flex !important; visibility: visible !important; opacity: 1 !important; pointer-events: none;
  background: transparent !important; box-shadow: none !important;
  color: var(--heading) !important; border-color: var(--border) !important; border-radius: 999px;
}

/* Tone the Back link slightly so the brand stays visually primary */
.header .back-link { opacity: .85 }

/* Larger, airier banner on wide screens (still centered) */
@media (min-width: 960px) {
  .header .brand { font-size: 1.6rem; }
  .header .container.row { padding: .9rem 0 .7rem; }
}
:root[data-theme="dark"] .header .brand { text-shadow: 0 0 0 transparent; /* no glow, just preventing thin rendering */ }
/* ===== Banner-only header (name + icon watermark) ===== */
:root { --brand-mark: url('/assets/og-cover.svg'); }

.header.banner-only { position: sticky; top:0; z-index:1000; background:var(--bg); border-bottom:1px solid var(--border); }
.header.banner-only .container.row {
  display:flex; flex-direction:column; align-items:center; gap:.5rem; padding:.85rem 0 .7rem;
}
.header.banner-only .brand {
  font-weight:800; font-size:1.35rem; letter-spacing:.2px; line-height:1.1;
  color:var(--heading); text-decoration:none; text-align:center;
}
/* watermark */
.header.brandbg{ position:relative; overflow:hidden; }
.header.brandbg::before{
  content:""; position:absolute; inset:0;
  background-image: var(--brand-mark);
  background-repeat:no-repeat; background-position:center;
  background-size:64px; opacity:.08; pointer-events:none;
}
/* a bit larger on wide screens */
@media (min-width: 960px){
  .header.banner-only .brand{ font-size:1.55rem; }
  .header.brandbg::before{ background-size:76px; }
}

/* Hard-hide nav/back/CTA if any old header leaks through */
.header.banner-only .nav,
.header.banner-only .back-link,
.header.banner-only a.btn.pill[href*="welcome-to-smart-investing"] { display:none !important; }
/* Inline brand icon next to site name (works in light & dark) */
.header.banner-only .brand{ display:inline-flex; align-items:center; gap:.5rem; }
.brand-mark{
  width:28px; height:28px; flex:0 0 28px;
  background-image: var(--brand-mark);
  background-repeat:no-repeat; background-position:center; background-size:contain;
  border-radius:6px;
}
/* Slightly bigger on wide screens */
@media (min-width:960px){ .brand-mark{ width:32px; height:32px; flex-basis:32px; } }

/* Optional gentle nudge in dark mode if the bitmap is a bit dim */
:root[data-theme='dark'] .brand-mark{ filter: brightness(1.05) contrast(1.05); }
.header.brandbg::before{ display:none !important; }
/* Inline brand icon next to site name */
.header.banner-only .brand{ display:inline-flex; align-items:center; gap:.5rem; }
.brand-mark-img{
  width:28px; height:28px; object-fit:contain; border-radius:6px;
}
@media (min-width:960px){ .brand-mark-img{ width:32px; height:32px; } }

/* Remove the old background watermark to keep it clean */
.header.brandbg::before{ display:none !important; }

/* Make the theme toggle icon-only (no literal "Theme" text) */
.visually-hidden{ position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0 }
#theme-toggle{ position:fixed; top:.75rem; right:calc(env(safe-area-inset-right,0) + 1rem); z-index:1100;
  width:36px; height:36px; border-radius:999px; border:1px solid var(--border); background:var(--bg); }
#theme-toggle::before{ content:"☀️"; display:block; line-height:36px; text-align:center; }
:root[data-theme="dark"] #theme-toggle::before{ content:"🌙"; }
/* Back to Home button (pages only; not added to index) */
.back-home{
  position: fixed;
  top: .75rem;
  left: calc(env(safe-area-inset-left, 0) + 1rem);
  z-index: 1100;
  border: 1px solid var(--border);
  background: var(--bg);
}
@media (max-width: 480px){
  .back-home{ font-size: .9rem; padding: .35rem .6rem; }
}
/* Inline Back to Home inside the content area (consistent across pages) */
.back-home-inline{
  display:inline-flex; align-items:center; gap:.35rem;
  margin:.25rem 0 1rem;
  border:1px solid var(--border);
  background:var(--bg); color:var(--fg);
}
.back-home-inline:hover{ text-decoration: underline; }

/* (Guard) Hide any old fixed back pill if it still exists */
.back-home{ display:none !important; }
/* Back row sits right under the intro text */
.back-row{ margin-top: 10px; }
/* Header icon sizing guard (prevents post CSS from inflating it) */
.header .brand-mark-img{ width:32px!important; height:32px!important; object-fit:contain; border-radius:6px; display:inline-block }
/* Disable any old watermark style */
.header.brandbg::before{ display:none!important }
/* SAI header guard */
.header.banner-only::before{ display:none !important; }
.header::before{ display:none !important; }         /* belt-and-braces */
.header .brand-mark-img{ width:32px!important; height:32px!important; object-fit:contain; border-radius:6px; display:inline-block; vertical-align:middle }
.header{ padding:12px 0 }
/* SAI header guard v2 */
.header.banner-only::before{ display:none !important; }
.header::before{ display:none !important; }
.header{ padding:12px 0; }
.header .brand-mark-img{
  width:32px !important; height:32px !important;
  object-fit:contain; border-radius:6px; display:inline-block; vertical-align:middle;
}

/* ========== SAI hotfix: consistent header + no giant hero logo on blog ========== */
/* Keep brand icon small in the header only */
.header .brand-mark-img{ width:32px!important; height:32px!important; object-fit:contain; border-radius:6px }

/* Nuke any legacy header background/watermark */
.header.brandbg::before{ display:none!important; content:none!important; background:none!important }

/* Hide any "hero"/"watermark" blocks that appear at the top of blog posts */
main .hero,
main .page-hero,
main .post-hero,
main .hero-banner,
main .hero-logo,
main .brand-watermark,
main .watermark { display:none!important; }

/* If someone inlined the favicon as a hero image, hide that too (but only inside <main>) */
main img[src$="/assets/favicon.svg"],
main img[src$="assets/favicon.svg"] { display:none!important; }

/* Guard against oversized first-child images acting as accidental heroes */
main > img:first-child,
main > figure:first-child img { max-height:0!important; overflow:hidden!important; display:none!important; }

/* Slight top breathing room now that the hero is gone */
main, .section{ margin-top: 16px; }