/* =========================
   FAQ page (Getting Started)
   ========================= */

/* Page background like screenshot */
body {
  background: #f4f7fb;
}

/* Main block spacing */
.faq-block{
  padding-top: 28px;
  padding-bottom: 36px;
}

/* Big blue title */
.faq-block h2.header{
  margin: 8px 0 10px;
  font-weight: 800;
  letter-spacing: -0.02em;
  font-size: clamp(2.2rem, 4.2vw, 3.4rem);
  color: #1976d2 !important; /* strong blue */
}

/* Subtitle under title */
.faq-block > p.center{
  margin-top: 0;
  margin-bottom: 22px;
  font-size: 1.05rem;
  line-height: 1.55;
  color: #5f6b7a !important;
}

/* Collapsible container spacing */
.faq-block .collapsible{
  border: 0;
  box-shadow: none;
  margin: 0;
}

/* Each item “card” */
.faq-block .collapsible > li{
  margin: 14px 0;
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(16, 24, 40, 0.08);
  box-shadow: 0 6px 16px rgba(16, 24, 40, 0.08);
}

/* Header row */
.faq-block .collapsible-header{
  border: 0;
  background: #fff;
  padding: 18px 18px;
  font-weight: 600;
  font-size: 1.05rem;
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Left icon */
.faq-block .collapsible-header i.material-icons{
  font-size: 1.25rem;
  color: #1a73e8;
  margin-right: 6px; /* Materialize adds spacing; keep it nice */
}

/* Body area (light grey panel like screenshot) */
.faq-block .collapsible-body{
  border-top: 1px solid rgba(16, 24, 40, 0.08);
  background: #f3f6fb;
  padding: 22px 22px; /* readable side padding */
}

/* ✅ Left-align all body text */
.faq-block .collapsible-body span{
  display: block;
  text-align: left;
  color: #2d3748;
  line-height: 1.7;
  font-size: 1.02rem;
}

/* ✅ Lists: normal left aligned flow (not centered as a block) */
.faq-block .collapsible-body ol,
.faq-block .collapsible-body ul{
  display: block;
  text-align: left;
  margin: 12px 0 0;
  padding-left: 22px;
}

.faq-block .collapsible-body li{
  margin: 6px 0;
}

/* Mobile tightening */
@media (max-width: 600px){
  .faq-block .collapsible-header{ padding: 16px 14px; }
  .faq-block .collapsible-body{ padding: 18px 14px; }
}


/* =========================
   FAQ Table of Contents
   ========================= */

/* Smooth scroll for anchor jumps */
html {
  scroll-behavior: smooth;
}

/* If you have a sticky header, adjust this value */
:root{
  --faq-scroll-offset: 78px;
}

/* Prevent anchor target hiding under sticky header */
section[id^="section_"]{
  scroll-margin-top: var(--faq-scroll-offset);
}

.faq-toc{
  margin-top: 14px;
  margin-bottom: 14px;
}

.faq-toc-card{
  border-radius: 10px;
  box-shadow: 0 10px 24px rgba(16, 24, 40, 0.10);
}

.faq-toc-title{
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  font-size: 1.25rem;
  color: #1f2d3d;
  margin-bottom: 14px;
}

.faq-toc-title i{
  color: #1976d2;
}

.faq-toc-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.faq-toc-link{
  display: block;
  padding: 10px 12px;
  border-radius: 8px;
  background: #f3f6fb;
  border: 1px solid rgba(16, 24, 40, 0.08);
  color: #1a73e8;
  font-weight: 600;
  text-decoration: none;
  transition: transform .08s ease, box-shadow .08s ease, background .08s ease;
}

.faq-toc-link:hover{
  background: #eaf1ff;
  box-shadow: 0 6px 14px rgba(16, 24, 40, 0.10);
  transform: translateY(-1px);
}

.faq-toc-hint{
  margin-top: 14px;
  font-size: 0.95rem;
}

/* Responsive */
@media (max-width: 992px){
  .faq-toc-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px){
  .faq-toc-grid{ grid-template-columns: 1fr; }
}