/* টংখাতা — help centre, FAQ, blog and product pages (content.css).
   These pages ride on the shared tokens in styles.css, so unlike the homepage
   they follow the phone's dark mode. Layout only lives here. */

.doc-wrap { width: 100%; max-width: 1180px; margin: 0 auto; padding-inline: 28px; }
.doc-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 260px); gap: 48px; align-items: start; padding-block: 34px 72px; }

/* breadcrumb */
.crumbs { font-size: .88rem; color: var(--text-2); margin: 0 0 14px; }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; }
.crumbs li::after { content: "›"; margin-left: 6px; color: var(--border-strong); }
.crumbs li:last-child::after { content: ""; }
.crumbs a { color: var(--text-2); text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }

/* article */
.doc h1 { font-size: clamp(1.7rem, 3vw, 2.3rem); line-height: 1.3; margin: 0 0 10px; }
.doc .lede { font-size: 1.1rem; color: var(--text-2); margin: 0 0 8px; line-height: 1.8; }
.doc .meta { font-size: .85rem; color: var(--text-2); margin: 0 0 26px; }
.doc h2 { font-size: 1.35rem; line-height: 1.4; margin: 36px 0 10px; scroll-margin-top: 84px; }
.doc h3 { font-size: 1.1rem; line-height: 1.45; margin: 24px 0 6px; scroll-margin-top: 84px; }
.doc p, .doc li { font-size: 1.02rem; line-height: 1.85; }
.doc p { margin: 0 0 14px; }
.doc ul, .doc ol { margin: 0 0 16px; padding-left: 24px; }
.doc li { margin: 6px 0; }
.doc ol { counter-reset: none; }
.doc a { color: var(--brand-deep); }
.doc strong { color: var(--text); }
.doc blockquote { margin: 18px 0; padding: 2px 0 2px 18px; border-left: 3px solid var(--brand); color: var(--text-2); }
.doc table { width: 100%; border-collapse: collapse; margin: 18px 0; font-size: .96rem; }
.doc th, .doc td { border: 1px solid var(--border); padding: 9px 12px; text-align: left; vertical-align: top; }
.doc th { background: var(--surface-2); font-weight: 700; }
.doc .note { background: var(--brand-tint); border: 1px solid var(--border); border-radius: 14px;
  padding: 14px 18px; margin: 20px 0; }
.doc .note p:last-child { margin-bottom: 0; }
.doc-table-wrap { overflow-x: auto; }

/* on-page contents */
.toc { position: sticky; top: 92px; border: 1px solid var(--border); border-radius: 16px; padding: 18px 18px 16px;
  background: var(--card); }
.toc h2 { font-size: 1rem; margin: 0 0 10px; }
.toc ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.toc a { display: block; padding: 7px 8px; border-radius: 8px; font-size: .93rem; line-height: 1.5;
  color: var(--text-2); text-decoration: none; }
.toc a:hover { background: var(--surface-2); color: var(--text); }

/* related / index cards */
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; margin: 18px 0 0; list-style: none; padding: 0; }
.card-grid li { margin: 0; }
.dcard { display: block; height: 100%; background: var(--card); border: 1px solid var(--border); border-radius: 16px;
  padding: 18px 18px 16px; text-decoration: none; transition: transform .2s, box-shadow .2s; }
.dcard:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(190, 18, 60, .10); }
.dcard b { display: block; color: var(--text); font-size: 1.04rem; line-height: 1.45; margin-bottom: 4px; }
.dcard span { display: block; color: var(--text-2); font-size: .93rem; line-height: 1.6; }

.doc-faq { margin-top: 40px; }
.doc-faq details { border: 1px solid var(--border); border-radius: 14px; padding: 0 18px; margin-bottom: 10px; background: var(--card); }
.doc-faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center;
  gap: 14px; min-height: 58px; font-weight: 700; }
.doc-faq summary::-webkit-details-marker { display: none; }
.doc-faq summary::after { content: ""; width: 9px; height: 9px; flex: 0 0 auto; margin-top: -4px;
  border-right: 2px solid var(--brand); border-bottom: 2px solid var(--brand); transform: rotate(45deg); transition: transform .2s; }
.doc-faq details[open] summary::after { transform: rotate(-135deg); margin-top: 4px; }
.doc-faq .ans { padding-bottom: 16px; color: var(--text-2); line-height: 1.8; }
.doc-faq .ans p { margin: 0 0 10px; }

/* end-of-page call to action */
.doc-cta { margin-top: 44px; border: 1px solid var(--border); border-radius: 18px; padding: 22px 22px 24px;
  background: var(--surface-2); }
.doc-cta h2 { margin: 0 0 6px; font-size: 1.2rem; }
.doc-cta p { margin: 0 0 14px; color: var(--text-2); }
.doc-cta .row { display: flex; flex-wrap: wrap; gap: 10px; }
.doc-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 0 20px;
  border-radius: 12px; font-weight: 700; text-decoration: none; background: var(--brand); color: #FFFFFF; }
.doc-btn:hover { background: var(--brand-strong); }
.doc-btn--ghost { background: transparent; color: var(--brand-deep); border: 1.5px solid var(--brand); }
.doc-btn--ghost:hover { background: var(--brand-tint); }

@media (max-width: 900px) {
  .doc-grid { grid-template-columns: minmax(0, 1fr); gap: 30px; padding-block: 24px 56px; }
  .toc { position: static; }
}
@media (max-width: 560px) {
  .doc-wrap { padding-inline: 18px; }
  .doc p, .doc li { font-size: .99rem; line-height: 1.8; }
  .doc h2 { font-size: 1.22rem; margin-top: 30px; }
  .doc-cta .row { flex-direction: column; }
  .doc-btn { width: 100%; }
}