/* ===== Smart Aussie Investor – Global UI (professional, grid-led, accessible) ===== */

/* Design tokens */
:root{
  --brand-700:#163b8c; --brand-600:#1b4db3; --brand-500:#2a6af2;
  --accent:#3ddc97;

  --bg:#f6f8fb; --panel:#ffffff; --ink:#121a2a; --ink-2:#3a475d;
  --muted:#6b7a92; --line:#e7edf5; --ring:rgba(42,106,242,.25);

  --shadow-lg: 0 16px 40px rgba(17,26,42,.12);
  --shadow-md: 0 8px 20px rgba(17,26,42,.08);

  --r-lg:16px; --r-md:12px; --r-sm:8px;
  --space-1:6px; --space-2:10px; --space-3:16px; --space-4:24px; --space-5:32px; --space-6:48px;
}

/* Dark mode */
@media (prefers-color-scheme: dark){
  :root{
    --bg:#0b1321; --panel:#0f1829; --ink:#e9eef8; --ink-2:#c9d4ea;
    --muted:#9db0cc; --line:#1e2a40;
    --brand-700:#1c4fb3; --brand-600:#2a6af2; --brand-500:#5f91ff;
    --shadow-lg: 0 16px 40px rgba(0,0,0,.45);
    --shadow-md: 0 8px 20px rgba(0,0,0,.35);
  }
}

/* Base */
*{box-sizing:border-box}
html,body{
  margin:0;padding:0;background:var(--bg);color:var(--ink);
  font:16px/1.65 ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji";
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img{max-width:100%;height:auto}
a{color:var(--brand-500);text-decoration:none}
a:hover{opacity:.9}

.container{max-width:1120px;margin:0 auto;padding:0 var(--space-3)}
.section{padding:var(--space-6) 0}
.grid{display:grid;gap:var(--space-4)}
.grid.cols-3{grid-template-columns:repeat(3,1fr)}
@media (max-width:960px){.grid.cols-3{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.grid.cols-3{grid-template-columns:1fr}}

/* Header / Nav */
.header{position:sticky;top:0;z-index:10;background:rgba(246,248,251,.9);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
@media (prefers-color-scheme: dark){.header{background:rgba(11,19,33,.8)}}
.nav{display:flex;align-items:center;gap:var(--space-4);padding:12px 0}
.brand{font-weight:800;letter-spacing:.2px;color:var(--ink)}
.nav .spacer{flex:1}
.btn{display:inline-block;padding:10px 14px;border-radius:12px;font-weight:600;border:1px solid var(--line);background:var(--brand-600);color:#fff;box-shadow:var(--shadow-md)}
.btn.ghost{background:transparent;color:var(--brand-500)}
.btn.pill{border-radius:999px}

/* Cards / Panels */
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-lg);padding:var(--space-5)}
.card.tight{padding:var(--space-4)}
.h1{font-size:2.25rem;line-height:1.2;margin:0 0 var(--space-2)}
.h2{font-size:1.35rem;margin:var(--space-4) 0 var(--space-2)}
.meta{color:var(--muted);font-size:.95rem}
.hr{height:1px;background:var(--line);margin:var(--space-4) 0}

/* Hero */
.hero{display:grid;gap:var(--space-5);align-items:center;padding:var(--space-6) 0}
.hero .title{font-size:2.6rem;line-height:1.15;margin:0}
.hero .lead{font-size:1.15rem;color:var(--ink-2);margin:.5rem 0 0}
@media (max-width:720px){.hero .title{font-size:2rem}}

/* Features */
.feature{display:flex;gap:var(--space-3);align-items:flex-start}
.feature .badge{width:38px;height:38px;border-radius:10px;background:linear-gradient(180deg,var(--brand-600),var(--brand-700));box-shadow:var(--shadow-md)}
.feature .text strong{display:block;margin-bottom:4px}

/* Footer */
.footer{color:var(--muted);font-size:.95rem;padding:var(--space-5) 0;margin-top:var(--space-6);border-top:1px solid var(--line)}
.footer a{color:var(--muted)}

/* === Forced theme overrides (user toggle wins over system) === */
:root[data-theme='light']{
  --bg:#f6f8fb; --panel:#ffffff; --ink:#121a2a; --ink-2:#3a475d;
  --muted:#6b7a92; --line:#e7edf5;
  --brand-700:#163b8c; --brand-600:#1b4db3; --brand-500:#2a6af2;
  --shadow-lg: 0 16px 40px rgba(17,26,42,.12);
  --shadow-md: 0 8px 20px rgba(17,26,42,.08);
}
:root[data-theme='dark']{
  --bg:#0b1321; --panel:#0f1829; --ink:#e9eef8; --ink-2:#c9d4ea;
  --muted:#9db0cc; --line:#1e2a40;
  --brand-700:#1c4fb3; --brand-600:#2a6af2; --brand-500:#5f91ff;
  --shadow-lg: 0 16px 40px rgba(0,0,0,.45);
  --shadow-md: 0 8px 20px rgba(0,0,0,.35);
}

/* === Floating theme toggle === */
#theme-toggle{
  position:fixed; right:18px; top:50%; transform:translateY(-50%);
  z-index:10000; background:var(--panel); color:var(--ink);
  border:1px solid var(--line); border-radius:999px;
  padding:10px 12px; box-shadow:var(--shadow-md); cursor:pointer;
  display:flex; align-items:center; gap:8px;
}
#theme-toggle:hover{ box-shadow:var(--shadow-lg); }
#theme-toggle .theme-icon{ font-size:18px; line-height:1; }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
@media (max-width: 900px){
  #theme-toggle{ top:auto; bottom:16px; right:16px; transform:none; }
}
@media (prefers-reduced-motion:no-preference){
  #theme-toggle.pulse{ animation:pulse .6s; }
  @keyframes pulse{ 0%{transform:scale(1)} 50%{transform:scale(1.07)} 100%{transform:scale(1)} }
}

/* === Forced theme overrides (user toggle wins over system) === */
:root[data-theme='light']{
  --bg:#f6f8fb; --panel:#ffffff; --ink:#121a2a; --ink-2:#3a475d;
  --muted:#6b7a92; --line:#e7edf5;
  --brand-700:#163b8c; --brand-600:#1b4db3; --brand-500:#2a6af2;
  --shadow-lg: 0 16px 40px rgba(17,26,42,.12);
  --shadow-md: 0 8px 20px rgba(17,26,42,.08);
}
:root[data-theme='dark']{
  --bg:#0b1321; --panel:#0f1829; --ink:#e9eef8; --ink-2:#c9d4ea;
  --muted:#9db0cc; --line:#1e2a40;
  --brand-700:#1c4fb3; --brand-600:#2a6af2; --brand-500:#5f91ff;
  --shadow-lg: 0 16px 40px rgba(0,0,0,.45);
  --shadow-md: 0 8px 20px rgba(0,0,0,.35);
}

/* === Floating theme toggle === */
#theme-toggle{
  position:fixed; right:18px; top:50%; transform:translateY(-50%);
  z-index:10000; background:var(--panel); color:var(--ink);
  border:1px solid var(--line); border-radius:999px;
  padding:10px 12px; box-shadow:var(--shadow-md); cursor:pointer;
  display:flex; align-items:center; gap:8px;
}
#theme-toggle:hover{ box-shadow:var(--shadow-lg); }
#theme-toggle .theme-icon{ font-size:18px; line-height:1; }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
@media (max-width: 900px){
  #theme-toggle{ top:auto; bottom:16px; right:16px; transform:none; }
}
@media (prefers-reduced-motion:no-preference){
  #theme-toggle.pulse{ animation:pulse .6s; }
  @keyframes pulse{ 0%{transform:scale(1)} 50%{transform:scale(1.07)} 100%{transform:scale(1)} }
}
/* SAI THEME TOGGLE */
:root {
  --toggle-size: 42px;
}
.theme-toggle {
  position: fixed; right: 16px; bottom: 16px; z-index: 9999;
  width: var(--toggle-size); height: var(--toggle-size);
  border-radius: 999px; border: 1px solid var(--line);
  background: var(--panel); color: var(--ink);
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-md); cursor: pointer; user-select: none;
}
.theme-toggle:hover { box-shadow: var(--shadow-lg); }
.theme-toggle svg { width: 22px; height: 22px; }
@media (max-width: 720px){
  .theme-toggle { right: 12px; bottom: 12px; }
}

/* Force theme via data attribute (overrides OS preference) */
:root[data-theme="dark"]{
  --bg:#0b1321; --panel:#0f1829; --ink:#e9eef8; --ink-2:#c9d4ea;
  --muted:#9db0cc; --line:#1e2a40;
  --brand-700:#1c4fb3; --brand-600:#2a6af2; --brand-500:#5f91ff;
  --shadow-lg: 0 16px 40px rgba(0,0,0,.45);
  --shadow-md: 0 8px 20px rgba(0,0,0,.35);
}
/* Allow explicit light override too (defaults already come from :root) */
:root[data-theme="light"]{ }

/* ===== SAI theme attribute overrides (so JS toggle wins) ===== */
:root[data-theme='light']{
  --bg:#f6f8fb; --panel:#ffffff; --ink:#121a2a; --ink-2:#3a475d;
  --muted:#6b7a92; --line:#e7edf5; --brand-700:#163b8c; --brand-600:#1b4db3; --brand-500:#2a6af2;
  --shadow-lg: 0 16px 40px rgba(17,26,42,.12);
  --shadow-md: 0 8px 20px rgba(17,26,42,.08);
}
:root[data-theme='dark']{
  --bg:#0b1321; --panel:#0f1829; --ink:#e9eef8; --ink-2:#c9d4ea;
  --muted:#9db0cc; --line:#1e2a40; --brand-700:#1c4fb3; --brand-600:#2a6af2; --brand-500:#5f91ff;
  --shadow-lg: 0 16px 40px rgba(0,0,0,.45);
  --shadow-md: 0 8px 20px rgba(0,0,0,.35);
}
/* ============================================================ */

/* ==== SAI: top-right, enlarged, high-contrast theme toggle ==== */
#sai-theme-toggle{
  position: fixed !important;
  top: 18px !important;
  right: 18px !important;

  /* ~2x size */
  width: 64px !important;
  height: 64px !important;
  border-radius: 16px !important;
  font-size: 26px !important;   /* for the ☀️ / 🌙 glyph */

  /* Contrast & depth so it never gets lost */
  background: var(--panel) !important;
  color: var(--ink) !important;
  border: 1px solid var(--line) !important;
  box-shadow:
    0 12px 28px rgba(0,0,0,.18),
    0 0 0 2px var(--ring);      /* subtle ring uses your brand/ring token */
  z-index: 2147483647 !important;

  display: grid !important;
  place-items: center !important;
}

#sai-theme-toggle:hover{
  box-shadow:
    0 16px 36px rgba(0,0,0,.22),
    0 0 0 2px var(--ring);
  transform: translateY(-1px);
}

#sai-theme-toggle:focus-visible{
  outline: 3px solid var(--ring);
  outline-offset: 2px;
}

/* On small screens, keep top-right but ease the size a touch */
@media (max-width:640px){
  #sai-theme-toggle{
    width: 56px !important;
    height: 56px !important;
    font-size: 24px !important;
    top: 14px !important;
    right: 14px !important;
  }
}

/* SAI theme toggle polish */
#sai-theme-toggle { outline: none; }
#sai-theme-toggle:focus-visible { box-shadow: 0 0 0 3px var(--ring), 0 6px 20px rgba(0,0,0,.22) !important; }
/* Slightly smaller on small screens so it never crowds the nav */
@media (max-width: 640px){
  #sai-theme-toggle { transform: scale(.9); right: 12px !important; }
}

/* SAI mark icon: inline favicon-style badge for feature headings */
.mark-icon{
  display:inline-block;
  width:26px; height:26px;
  margin-right:10px;
  vertical-align:-4px;
  background: url('/assets/favicon.svg') no-repeat center / contain;
  border-radius:6px;
  box-shadow: var(--shadow-md);
}
@media (min-width: 768px){
  .mark-icon{ width:28px; height:28px; }
}

/* SAI feature badge override */
.feature .badge{
  width:28px; height:28px;
  background: url('/assets/favicon.svg') no-repeat center / contain;
  background-color: transparent;
  border-radius:8px;
  box-shadow: var(--shadow-md);
  flex: none;
}
@media (min-width: 768px){
  .feature .badge{ width:32px; height:32px; }
}

/* Utility: use this anywhere you want the same mark */
.badge-sai{
  width:28px; height:28px;
  background: url('/assets/favicon.svg') no-repeat center / contain;
  background-color: transparent;
  border-radius:8px;
  box-shadow: var(--shadow-md);
  display:inline-block;
}

/* SAI header theme fix */
:root[data-theme='light'] .header{
  /* match the overall page colour in light mode */
  background: var(--bg) !important;
  border-bottom: 1px solid var(--line) !important;
  box-shadow: none;
}
:root[data-theme='dark'] .header{
  /* keep a solid panel look in dark mode */
  background: var(--panel) !important;
  border-bottom: 1px solid var(--line) !important;
}

/* SAI header underline contrast */
:root[data-theme='light'] .header{
  background: var(--bg) !important;
  border-bottom: 2px solid #000 !important; /* crisp black line */
  box-shadow: none !important;
}
/* SAI: keep only the main theme toggle (hide header/nav versions) */
header [data-theme-toggle],
.site-header [data-theme-toggle],
.header [data-theme-toggle],
nav [data-theme-toggle] {
  display: none !important;
}
/* SAI: theme toggle dedupe reset + no-FoUC */
html body [data-theme-toggle]{
  display:inline-flex !important;   /* overrides header/nav hide */
  visibility:hidden;                /* JS will reveal the keeper */
}

/* SAI: hide duplicate theme toggle in the header only */
header .theme-toggle,
header .toggle-theme,
header [data-theme-toggle],
header [aria-label*="heme"],
header [aria-label*="ark"],
header [aria-label*="ight"] {
  display: none !important;
}
/* SAI: hide any theme toggle that lives in the header (keep footer/bottom one) */
:is(header, .site-header, .header, .topbar, [role="banner"]) #theme-toggle,
:is(header, .site-header, .header, .topbar, [role="banner"]) .theme-toggle,
:is(header, .site-header, .header, .topbar, [role="banner"]) .toggle-theme,
:is(header, .site-header, .header, .topbar, [role="banner"]) [data-theme-toggle],
:is(header, .site-header, .header, .topbar, [role="banner"]) [aria-label*="heme"],
:is(header, .site-header, .header, .topbar, [role="banner"]) [aria-label*="ark"],
:is(header, .site-header, .header, .topbar, [role="banner"]) [aria-label*="ight"] {
  display: none !important;
}
/* SAI: header/nav-only kill switch for duplicate theme toggles */
:is(header, nav, .site-header, .header, .topbar, .navbar, .nav, .masthead, .site-nav, .global-header, [role="banner"])
  :is(#theme-toggle, .theme-toggle, .toggle-theme, [data-theme-toggle], [aria-label*="heme"], [aria-label*="ark"], [aria-label*="ight"]) {
  display: none !important;
}

/* SAI: explicitly allow the bottom/primary toggle */
:is(footer, .footer, .site-footer, .back-row, .bottom, .bottom-bar, .page-actions, .sticky-actions)
  :is(#theme-toggle, .theme-toggle, .toggle-theme, [data-theme-toggle]) {
  display: inline-flex !important;
}
/* SAI: hide ALL theme toggles by default (belt-and-braces) */
:is(#theme-toggle, .theme-toggle, .toggle-theme, [data-theme-toggle],
    [aria-label*="heme"], [aria-label*="ark"], [aria-label*="ight"]) {
  display: none !important;
}

/* SAI: only show the primary/bottom toggle */
:is(footer, .footer, .site-footer, .back-row, .bottom, .bottom-bar, .page-actions, .sticky-actions)
  :is(#theme-toggle, .theme-toggle, .toggle-theme, [data-theme-toggle]) {
  display: inline-flex !important;
}
/* SAI: normalize page background across all pages */
:root {
  --sai-bg-dark: #0b2848; /* deep blue */
  --sai-bg-light: #ffffff;
}
html[data-theme="dark"], body[data-theme="dark"] { background-color: var(--sai-bg-dark) !important; }
html[data-theme="light"], body[data-theme="light"] { background-color: var(--sai-bg-light) !important; }

/* If theme attr isn't set yet, prefer user's system dark as fallback */
@media (prefers-color-scheme: dark) {
  html:not([data-theme]), body:not([data-theme]) { background-color: var(--sai-bg-dark) !important; }
}
/* SAI: temporarily disable ALL theme toggles sitewide */
:is(#theme-toggle, .theme-toggle, .toggle-theme, [data-theme-toggle],
    [aria-label*="heme"], [aria-label*="ark"], [aria-label*="ight"]) {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
/* SAI: normalize page background across all pages (prevents white gutters) */
:root {
  --sai-bg-dark: #0b2848; /* deep blue */
  --sai-bg-light: #ffffff;
}
html[data-theme="dark"], body[data-theme="dark"] {
  background-color: var(--sai-bg-dark) !important;
}
html[data-theme="light"], body[data-theme="light"] {
  background-color: var(--sai-bg-light) !important;
}
/* When theme attr isn't present yet, respect system dark as a fallback */
@media (prefers-color-scheme: dark) {
  html:not([data-theme]), body:not([data-theme]) {
    background-color: var(--sai-bg-dark) !important;
  }
}
/* Make common wrappers transparent so the body bg shows edge-to-edge */
main, .section, .container, .page, .content, .wrapper {
  background: transparent !important;
}
/* SAI: temporarily hide ALL theme toggles sitewide (UI only) */
:is(#theme-toggle, .theme-toggle, .toggle-theme, [data-theme-toggle],
    [aria-label*="heme"], [aria-label*="ark"], [aria-label*="ight"]) {
  display: none !important;
  visibility: hidden !important;
}
/* SAI: margin reset (prevents thin white band on some pages) */
html, body { margin: 0 !important; }

/* SAI: dark theme base text colours + links + muted meta */
:root{
  --sai-text-dark: #dfe6f5;
  --sai-text-dim-dark: #9fb4cc;
  --sai-link-dark: #9fc5ff;
  --sai-card-bg-dark: rgba(7,20,34,0.90);
}

/* When no explicit theme attr yet, respect system dark but still set text colour */
@media (prefers-color-scheme: dark) {
  html:not([data-theme]), body:not([data-theme]) { color: var(--sai-text-dark) !important; }
}

/* Explicit dark */
html[data-theme="dark"] body { color: var(--sai-text-dark) !important; }

/* Links + meta in dark */
html[data-theme="dark"] a,
body[data-theme="dark"] a,
html:not([data-theme]) a { color: var(--sai-link-dark) !important; }
.meta, .muted, .subtle { color: var(--sai-text-dim-dark) !important; }

/* Cards inherit readable text and keep a solid dark surface for contrast */
.card, article.card { color: inherit !important; background-color: var(--sai-card-bg-dark) !important; }

/* Header bar uses page background (avoids a light band) */
header, .site-header, .topbar, [role="banner"] { background: transparent !important; }
/* SAI: sitewide readable typography in dark */
main, .content, .section, .container, article, .card { color: var(--sai-text-dark) !important; }
h1, h2, h3, h4, h5, h6 { color: #e8f0ff !important; }
.card .meta, article .meta { color: var(--sai-text-dim-dark) !important; }

/* SAI: remove stray top borders/shadows that can look like a white strip */
header, .site-header, .topbar, [role="banner"] { border: 0 !important; box-shadow: none !important; }
/* SAI: ensure body copy is fully readable in dark */
main p, main li, article p, article li { color: var(--sai-text-dark) !important; }