/* File: public/css/investing/rrsp-guide.css
   RRSP "Super Content" styling — matches RDSP/RESP system
   -------------------------------------------------------- */

/* --- Palette (soft, professional) --- */
:root{
  --rb-ink:#101828;
  --rb-muted:#667085;
  --rb-border:#e5e7eb;
  --rb-bg:#ffffff;

  --rb-teal-50:#effaf7;
  --rb-teal-200:#b9e8dc;
  --rb-teal-400:#2fbfa3;

  --rb-indigo-50:#eef2ff;
  --rb-indigo-200:#dfe3ff;
  --rb-indigo-400:#6366f1;

  --rb-mint-50:#f0fff4;
  --rb-mint-200:#d9f7df;
  --rb-mint-400:#22c55e;

  --rb-sun-50:#fff8eb;
  --rb-sun-200:#ffe7c2;
  --rb-sun-400:#f59e0b;

  --rb-blue-50:#eff6ff;
  --rb-blue-200:#d9e8ff;
  --rb-blue-400:#3b82f6;

  --rb-rose-50:#fff1f2;
  --rb-rose-200:#ffd6dc;
  --rb-rose-400:#f43f5e;

  --rb-sand-50:#faf7f2;
  --rb-sand-200:#efe4d6;
  --rb-sand-400:#c59a6d;

  --rb-card-shadow:0 6px 22px rgba(16,24,40,.08), 0 2px 6px rgba(16,24,40,.05);
}

/* --- Basics --- */
.rb-rrsp .rb-chip{
  display:inline-flex; align-items:center; gap:.25rem;
  padding:.4rem .7rem; border-radius:999px; font-size:.9rem;
  text-decoration:none; color:var(--rb-ink); background:#f3f4f6; border:1px solid var(--rb-border);
}
.rb-rrsp .rb-chip:hover{ background:#eceff3; }

.rb-section{
  border-radius:18px; overflow:hidden; background:var(--rb-bg); border:1px solid var(--rb-border);
  box-shadow:var(--rb-card-shadow);
}
.rb-section + .rb-section{ scroll-margin-top:6rem; }

.rb-section__header{
  padding:1.1rem 1.25rem;
  border-bottom:1px solid var(--rb-border);
}
.rb-section__title{
  margin:0; font-size:1.25rem; color:var(--rb-ink); font-weight:700;
  display:flex; align-items:center; gap:.5rem;
}
.rb-section__sub{ margin:.25rem 0 0; color:var(--rb-muted); }

/* Accent header bands */
.rb-accent--teal   .rb-section__header{ background:var(--rb-teal-50);   border-bottom-color:var(--rb-teal-200); }
.rb-accent--indigo .rb-section__header{ background:var(--rb-indigo-50); border-bottom-color:var(--rb-indigo-200); }
.rb-accent--mint   .rb-section__header{ background:var(--rb-mint-50);   border-bottom-color:var(--rb-mint-200); }
.rb-accent--sun    .rb-section__header{ background:var(--rb-sun-50);    border-bottom-color:var(--rb-sun-200); }
.rb-accent--blue   .rb-section__header{ background:var(--rb-blue-50);   border-bottom-color:var(--rb-blue-200); }
.rb-accent--rose   .rb-section__header{ background:var(--rb-rose-50);   border-bottom-color:var(--rb-rose-200); }
.rb-accent--sand   .rb-section__header{ background:var(--rb-sand-50);   border-bottom-color:var(--rb-sand-200); }

/* Subtle glow option (used in titles) */
.rb-accent--glow .rb-section__header{
  position:relative;
}
.rb-accent--glow .rb-section__header:after{
  content:""; position:absolute; inset:auto 1rem -6px 1rem; height:6px; border-radius:999px;
  background:linear-gradient(90deg,var(--rb-indigo-400),var(--rb-teal-400));
  opacity:.12; filter:blur(2px);
}

/* Icon color helpers for headings */
.rb-icon{ display:inline-grid; place-items:center; width:1.6rem; height:1.6rem; border-radius:10px; background:#f3f4f6; }
.rb-icon--teal{   color:var(--rb-teal-400);   background:var(--rb-teal-50); }
.rb-icon--indigo{ color:var(--rb-indigo-400); background:var(--rb-indigo-50); }
.rb-icon--mint{   color:var(--rb-mint-400);   background:var(--rb-mint-50); }
.rb-icon--sun{    color:var(--rb-sun-400);    background:var(--rb-sun-50); }
.rb-icon--blue{   color:var(--rb-blue-400);   background:var(--rb-blue-50); }
.rb-icon--rose{   color:var(--rb-rose-400);   background:var(--rb-rose-50); }
.rb-icon--sand{   color:var(--rb-sand-400);   background:var(--rb-sand-50); }

/* Cards */
.rb-cardgrid{
  display:grid; gap:1rem; padding:1rem;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
}
.rb-card{
  border:1px solid var(--rb-border); border-radius:14px; padding:1rem; background:var(--rb-bg); box-shadow:0 2px 10px rgba(16,24,40,.04);
}
.rb-card__title{ font-size:1rem; font-weight:700; margin:0 0 .5rem; }
.rb-card--soft{ background:#fafbfc; }
.rb-card--stretch{ display:flex; flex-direction:column; }
.rb-card--stretch > *{ margin-bottom:.75rem; }
.rb-card--stretch .rb-example-grid{ margin-top:auto; }

/* Color-tinted cards (optional) */
.rb-card--teal{   background:linear-gradient(180deg,var(--rb-teal-50), #fff); }
.rb-card--mint{   background:linear-gradient(180deg,var(--rb-mint-50), #fff); }
.rb-card--sun{    background:linear-gradient(180deg,var(--rb-sun-50), #fff); }
.rb-card--blue{   background:linear-gradient(180deg,var(--rb-blue-50), #fff); }
.rb-card--rose{   background:linear-gradient(180deg,var(--rb-rose-50), #fff); }
.rb-card--sand{   background:linear-gradient(180deg,var(--rb-sand-50), #fff); }

/* Callout card */
.rb-callout{
  display:flex; align-items:flex-start; gap:.75rem; background:#f8fafc;
  border:1px dashed var(--rb-border); border-radius:12px; padding:1rem;
}

/* Lists */
.rb-list{ padding-left:1.1rem; margin:0; }
.rb-list li{ margin:.35rem 0; }
.rb-list--checks{ list-style:none; padding-left:0; }
.rb-list--checks li{
  position:relative; padding-left:1.6rem;
}
.rb-list--checks li::before{
  content:"\f26e"; /* bi-check2-circle */
  font-family:bootstrap-icons; position:absolute; left:0; top:.1rem; color:var(--rb-mint-400);
  font-style:normal; font-weight:normal; speak:never;
}
.rb-list--dots{ list-style:disc; }

/* Steps */
.rb-steps{ counter-reset:step; margin:0; padding:1rem 1.25rem; }
.rb-steps li{
  list-style:none; position:relative; padding-left:2.2rem; margin:.6rem 0;
}
.rb-steps li::before{
  counter-increment:step; content:counter(step);
  position:absolute; left:0; top:0; width:1.6rem; height:1.6rem; border-radius:999px;
  display:grid; place-items:center; font-weight:700; color:#fff; background:var(--rb-indigo-400);
}

/* Definition list */
.rb-defs{ display:grid; grid-template-columns:1fr 2fr; gap:.5rem 1rem; padding:1rem; }
.rb-defs dt{ font-weight:700; color:var(--rb-ink); }
.rb-defs dd{ margin:0; color:var(--rb-muted); }

/* Tables (if needed later) */
.rb-table{ border:1px solid var(--rb-border); border-radius:10px; overflow:hidden; }
.rb-table thead th{ background:#f8fafc; color:var(--rb-ink); border-bottom:1px solid var(--rb-border); }
.rb-table td, .rb-table th{ vertical-align:middle; }

/* Mini-nav card */
.rb-rrsp__mini-nav .card-body{ padding:.8rem 1rem; }

/* Responsive column helpers */
.rb-columns-2{
  display:grid; gap:1rem; padding:1rem;
  grid-template-columns:1fr; /* mobile default */
}
@media (min-width: 992px){
  .rb-columns-2{ grid-template-columns:1fr 1fr; }
}

/* Example helper boxes */
.rb-example-grid{
  display:grid; gap:.75rem;
  grid-template-columns:1fr;
}
@media (min-width: 576px){
  .rb-example-grid{ grid-template-columns:1fr 1fr; }
}
.rb-example{
  border:1px dashed var(--rb-border);
  border-radius:12px; padding:.75rem; background:#f8fafc;
}
.rb-example__title{ font-weight:700; margin:0 0 .25rem; }

/* --- OPTIONAL: chip color variants for in-page mini nav --- */
.rb-rrsp .rb-chip--teal{   background:var(--rb-teal-50);   border-color:var(--rb-teal-200); }
.rb-rrsp .rb-chip--indigo{ background:var(--rb-indigo-50); border-color:var(--rb-indigo-200); }
.rb-rrsp .rb-chip--mint{   background:var(--rb-mint-50);   border-color:var(--rb-mint-200); }
.rb-rrsp .rb-chip--sun{    background:var(--rb-sun-50);    border-color:var(--rb-sun-200); }
.rb-rrsp .rb-chip--rose{   background:var(--rb-rose-50);   border-color:var(--rb-rose-200); }
.rb-rrsp .rb-chip--blue{   background:var(--rb-blue-50);   border-color:var(--rb-blue-200); }
.rb-rrsp .rb-chip--sand{   background:var(--rb-sand-50);   border-color:var(--rb-sand-200); }

/* Make in-page anchors land below sticky header */
#rrsp-calculator-section { scroll-margin-top: 90px; } /* tweak to your header height */