/* File: public/css/investing/resp-guide.css */
/* Colorful, friendly styling aligned with your RDSP look */

:root{
  --rb-ink:#101828;
  --rb-muted:#667085;
  --rb-border:#e5e7eb;
  --rb-bg:#ffffff;

  --rb-teal-50:#effaf7;   --rb-teal-200:#c9efe5;  --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);
  --rb-soft-shadow:0 10px 30px rgba(16,24,40,.06), 0 2px 10px rgba(16,24,40,.04);
}

/* Chips — colored variants to match sections */
.rb-resp .rb-chip{
  display:inline-flex; align-items:center; gap:.35rem;
  padding:.44rem .8rem; border-radius:999px; font-size:.9rem; font-weight:600;
  text-decoration:none; color:var(--rb-ink); background:#f3f4f6; border:1px solid var(--rb-border);
  transition:transform .08s ease, background .2s ease, border-color .2s ease;
}
.rb-resp .rb-chip:hover{ transform:translateY(-1px); background:#eceff3; }

.rb-resp .rb-chip--teal{    background:var(--rb-teal-50);    border-color:var(--rb-teal-200); }
.rb-resp .rb-chip--indigo{  background:var(--rb-indigo-50);  border-color:var(--rb-indigo-200); }
.rb-resp .rb-chip--mint{    background:var(--rb-mint-50);    border-color:var(--rb-mint-200); }
.rb-resp .rb-chip--sun{     background:var(--rb-sun-50);     border-color:var(--rb-sun-200); }
.rb-resp .rb-chip--blue{    background:var(--rb-blue-50);    border-color:var(--rb-blue-200); }
.rb-resp .rb-chip--rose{    background:var(--rb-rose-50);    border-color:var(--rb-rose-200); }
.rb-resp .rb-chip--sand{    background:var(--rb-sand-50);    border-color:var(--rb-sand-200); }

/* Sections */
.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; }

/* Accent header bands */
.rb-section__header{ padding:1.1rem 1.25rem; border-bottom:1px solid var(--rb-border); position:relative; }
.rb-section__title{
  margin:0; font-size:1.25rem; color:var(--rb-ink); font-weight:800; display:flex; align-items:center; gap:.6rem;
}
.rb-section__sub{ margin:.25rem 0 0; color:var(--rb-muted); }

/* Glow edge & subtle gradient line like RDSP */
.rb-accent--glow .rb-section__header::after{
  content:""; position:absolute; inset:auto 0 -1px 0; height:4px; opacity:.75;
  background:linear-gradient(90deg, rgba(99,102,241,.25), rgba(47,191,163,.25));
}

.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); }

/* Header icons with colored soft badges */
.rb-icon{
  display:inline-grid; place-items:center; width:1.9rem; height:1.9rem; border-radius:12px;
  background:#f3f4f6; box-shadow:inset 0 0 0 1px var(--rb-border);
}
.rb-icon i{ font-size:1rem; }
.rb-icon--teal{   background:var(--rb-teal-50);   box-shadow:inset 0 0 0 1px var(--rb-teal-200);   color:var(--rb-teal-400)}
.rb-icon--indigo{ background:var(--rb-indigo-50); box-shadow:inset 0 0 0 1px var(--rb-indigo-200); color:var(--rb-indigo-400)}
.rb-icon--mint{   background:var(--rb-mint-50);   box-shadow:inset 0 0 0 1px var(--rb-mint-200);   color:var(--rb-mint-400)}
.rb-icon--sun{    background:var(--rb-sun-50);    box-shadow:inset 0 0 0 1px var(--rb-sun-200);    color:var(--rb-sun-400)}
.rb-icon--blue{   background:var(--rb-blue-50);   box-shadow:inset 0 0 0 1px var(--rb-blue-200);   color:var(--rb-blue-400)}
.rb-icon--rose{   background:var(--rb-rose-50);   box-shadow:inset 0 0 0 1px var(--rb-rose-200);   color:var(--rb-rose-400)}
.rb-icon--sand{   background:var(--rb-sand-50);   box-shadow:inset 0 0 0 1px var(--rb-sand-200);   color:var(--rb-sand-400)}

/* 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:16px; padding:1rem; background:var(--rb-bg);
  box-shadow:var(--rb-soft-shadow);
}
.rb-card__title{ font-size:1rem; font-weight:800; margin:0 0 .5rem; }

/* Soft colored cards per accent */
.rb-card--soft{ background:#fff; }
.rb-card--teal{   border-color:var(--rb-teal-200); }
.rb-card--indigo{ border-color:var(--rb-indigo-200); }
.rb-card--mint{   border-color:var(--rb-mint-200); }
.rb-card--sun{    border-color:var(--rb-sun-200); }
.rb-card--blue{   border-color:var(--rb-blue-200); }
.rb-card--rose{   border-color:var(--rb-rose-200); }
.rb-card--sand{   border-color:var(--rb-sand-200); }

.rb-callout{ display:flex; align-items:flex-start; gap:.75rem; background:#f8fafc; border-style:dashed; }

/* 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"; font-family:bootstrap-icons; position:absolute; left:0; top:.1rem; color:var(--rb-mint-400);
}
.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:800; 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:800; color:var(--rb-ink); }
.rb-defs dd{ margin:0; color:var(--rb-muted); }

/* FAQ removed per request */

/* Tables */
.rb-table{ border:1px solid var(--rb-border); border-radius:12px; 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-resp__mini-nav .card-body{ padding:.8rem 1rem; }

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

/* Stretch cards to balance content heights */
.rb-card--stretch{ display:flex; flex-direction:column; }
.rb-card--stretch > *{ margin-bottom:.75rem; }
.rb-card--stretch .rb-example-grid{ margin-top:auto; }

/* Example 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:800; margin:0 0 .25rem; }


/* Collapsible FAQ (accordion) */
.rb-faq--indent{ margin-left: 1rem; } /* left margin for nicer alignment */

.rb-acc + .rb-acc{ border-top:1px solid var(--rb-border); }
.rb-acc__header{
  width:100%; text-align:left; border:0; background:transparent; color:var(--rb-ink);
  padding:0.85rem 0.25rem 0.85rem 0; display:flex; align-items:center; gap:.6rem;
  font-weight:700; font-size:1rem; cursor:pointer;
}
.rb-acc__header:hover{ text-decoration:underline; }
.rb-acc__plus{
  display:inline-grid; place-items:center; width:1.5rem; height:1.5rem; border-radius:10px;
  font-weight:800; line-height:1; border:1px solid var(--rb-teal-200); background:var(--rb-teal-50);
}
.rb-acc__panel{
  padding:0 0 1rem 2rem; /* indent answers a bit more */
  color:var(--rb-ink);
}


/* for jump links */

/* JumpLinks (sticky, colorful, scrollable) */
.rb-jumps{ position:relative; }
.rb-jumps .rb-jumps__wrap{
  border-radius:16px; overflow:hidden; background:linear-gradient(180deg,#fff, #fafbff);
  box-shadow:var(--rb-card-shadow); border:1px solid var(--rb-border);
}
.rb-jumps .rb-jumps__rail{
  display:flex; gap:.5rem; overflow:auto; white-space:nowrap; padding:.6rem;
  scrollbar-width:thin;
}
.rb-jumps .rb-jumps__rail::-webkit-scrollbar{ height:8px; }
.rb-jumps .rb-jumps__rail::-webkit-scrollbar-thumb{ background:#d6dae3; border-radius:8px; }

.rb-jumps .rb-jumps__chip{
  display:inline-flex; align-items:center; gap:.45rem; padding:.55rem .8rem;
  border-radius:999px; text-decoration:none; font-weight:700; font-size:.92rem;
  color:var(--rb-ink); background:#f3f4f6; border:1px solid var(--rb-border);
  transition:transform .08s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.rb-jumps .rb-jumps__chip i{ font-size:1rem; opacity:.9; }
.rb-jumps .rb-jumps__chip:hover{ transform:translateY(-1px); background:#eceff3; }
.rb-jumps .rb-jumps__chip.is-active{
  background:var(--rb-teal-50); border-color:var(--rb-teal-200); box-shadow:0 0 0 3px rgba(47,191,163,.12) inset;
}

@media (min-width: 992px){
  /* Make JumpLinks stick under your main header */
  #resp-jumplinks{ position:sticky; top:70px; z-index: 3; }
}

/* Thin progress bar under the jumplinks */
.rb-jumps__progress{ height:3px; background:transparent; margin-top:.25rem; }
.rb-jumps__progress span{
  display:block; height:3px; width:100%; transform-origin:left center; transform:scaleX(0);
  background:linear-gradient(90deg, var(--rb-indigo-400), var(--rb-teal-400));
  border-radius:999px;
}