/* ---------- TOC Sidebar ---------- */
.blog-toc {
   position: sticky;
   top: 120px;
   max-height: calc(100vh - 140px);
   overflow-y: auto;
   padding-right: 10px;
}
.blog-toc .toc-title {
   font-size: 13px;
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: 1.2px;
   color: #888;
   margin-bottom: 18px;
   padding-bottom: 12px;
   border-bottom: 1px solid #eee;
}
.blog-toc .toc-list {
   list-style: none;
   padding: 0;
   margin: 0;
   border-left: 2px solid #eee;
}
.blog-toc .toc-list li { margin: 0; }
.blog-toc .toc-list a {
   display: block;
   padding: 9px 16px;
   color: #555;
   text-decoration: none;
   font-size: 14px;
   line-height: 1.45;
   border-left: 2px solid transparent;
   margin-left: -2px;
   transition: all 0.25s ease;
}
.blog-toc .toc-list a:hover {
   color: #000;
   background: #fafafa;
}
.blog-toc .toc-list a.active {
   color: #f57828;
   border-left-color: #f57828;
   font-weight: 600;
   background: #fff8f3;
}
.blog-toc::-webkit-scrollbar { width: 4px; }
.blog-toc::-webkit-scrollbar-thumb { background: #ddd; border-radius: 4px; }

/* ---------- Blog Content ---------- */
.blog-content {
   color: #444;
   font-size: 16px;
   line-height: 1.8;
}
.blog-content p { margin-bottom: 20px; }

.blog-content h2 {
   font-size: 28px;
   font-weight: 700;
   color: #1a1a1a;
   margin: 45px 0 20px;
   padding-bottom: 12px;
   border-bottom: 2px solid #f0f0f0;
   scroll-margin-top: 100px;
}
.blog-content h3 {
   font-size: 22px;
   font-weight: 600;
   color: #1a1a1a;
   margin: 32px 0 15px;
   scroll-margin-top: 100px;
}
.blog-content strong { color: #1a1a1a; font-weight: 700; }

/* Links — orange underline */
.blog-content a {
   color: #f57828;
   text-decoration: underline;
   text-decoration-color: #f57828;
   text-underline-offset: 3px;
   text-decoration-thickness: 1px;
   transition: all 0.2s ease;
}
.blog-content a:hover {
   color: #d96416;
   text-decoration-thickness: 2px;
}

/* Unordered lists */
.blog-content ul {
   list-style: none;
   padding-left: 0;
   margin: 20px 0 25px;
}
.blog-content ul li {
   position: relative;
   padding-left: 28px;
   margin-bottom: 12px;
   line-height: 1.7;
}
.blog-content ul li::before {
   content: "";
   position: absolute;
   left: 0;
   top: 10px;
   width: 8px;
   height: 8px;
   background: #f57828;
   border-radius: 50%;
   transition: transform 0.2s ease;
}
.blog-content ul li:hover::before { transform: scale(1.4); }

/* Ordered lists */
.blog-content ol {
   list-style: none;
   padding-left: 0;
   margin: 20px 0 25px;
   counter-reset: blog-counter;
}
.blog-content ol li {
   position: relative;
   padding-left: 40px;
   margin-bottom: 12px;
   line-height: 1.7;
   counter-increment: blog-counter;
}
.blog-content ol li::before {
   content: counter(blog-counter);
   position: absolute;
   left: 0;
   top: 0;
   width: 26px;
   height: 26px;
   background: #f57828;
   color: #fff;
   border-radius: 50%;
   font-size: 13px;
   font-weight: 700;
   display: flex;
   align-items: center;
   justify-content: center;
}

/* Nested lists */
.blog-content ul ul li::before {
   background: transparent;
   border: 2px solid #f57828;
   width: 7px;
   height: 7px;
}

/* Images */
.blog-content img {
   max-width: 100%;
   height: auto;
   border-radius: 8px;
   margin: 20px 0;
}

/* Blockquotes */
.blog-content blockquote {
   border-left: 4px solid #f57828;
   background: #fff8f3;
   padding: 20px 25px;
   margin: 25px 0;
   font-style: italic;
   color: #555;
   border-radius: 0 6px 6px 0;
}

html { scroll-behavior: smooth; }

@media (max-width: 991px) {
   .blog-content h2 { font-size: 24px; }
}

/* ---------- Blog Content ---------- */
.blog-content {
   color: #444;
   font-size: 16px;
   line-height: 1.7;  /* was 1.8 */
}

.blog-content p {
   margin-bottom: 12px;  /* was 20px */
}

/* Headings — less top space */
.blog-content h2 {
   font-size: 28px;
   font-weight: 700;
   color: #1a1a1a;
   margin: 30px 0 12px;  /* was 45px 0 20px */
   padding-bottom: 10px;
   border-bottom: 2px solid #f0f0f0;
   scroll-margin-top: 100px;
}

.blog-content h3 {
   font-size: 22px;
   font-weight: 600;
   color: #1a1a1a;
   margin: 22px 0 10px;  /* was 32px 0 15px */
   scroll-margin-top: 100px;
}

/* Unordered lists — tighter */
.blog-content ul {
   list-style: none;
   padding-left: 0;
   margin: 12px 0 16px;  /* was 20px 0 25px */
}

.blog-content ul li {
   position: relative;
   padding-left: 26px;
   margin-bottom: 6px;   /* was 12px */
   line-height: 1.6;     /* was 1.7 */
}

.blog-content ul li::before {
   content: "";
   position: absolute;
   left: 0;
   top: 9px;             /* was 10px */
   width: 7px;           /* was 8px */
   height: 7px;
   background: #f57828;
   border-radius: 50%;
   transition: transform 0.2s ease;
}

/* Ordered lists — tighter */
.blog-content ol {
   list-style: none;
   padding-left: 0;
   margin: 12px 0 16px;  /* was 20px 0 25px */
   counter-reset: blog-counter;
}

.blog-content ol li {
   position: relative;
   padding-left: 38px;
   margin-bottom: 6px;   /* was 12px */
   line-height: 1.6;
   counter-increment: blog-counter;
}

/* ---------- Tables ---------- */
.blog-content table {
   width: 100%;
   border-collapse: collapse;
   margin: 25px 0;
   font-size: 15px;
   background: #fff;
   border-radius: 8px;
   overflow: hidden;
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

/* Header row */
.blog-content table thead {
   background: linear-gradient(135deg, #f57828, #ff9354);
   color: #fff;
}

.blog-content table thead th {
   padding: 14px 18px;
   text-align: left;
   font-weight: 600;
   font-size: 14px;
   letter-spacing: 0.3px;
   text-transform: uppercase;
   border: none;
}

/* If no <thead>, style first row as header */
.blog-content table tr:first-child:not(thead tr) {
   background: linear-gradient(135deg, #f57828, #ff9354);
}
.blog-content table tr:first-child:not(thead tr) td {
   color: #fff;
   font-weight: 600;
   text-transform: uppercase;
   font-size: 14px;
   letter-spacing: 0.3px;
}

/* Body rows */
.blog-content table tbody tr,
.blog-content table tr {
   border-bottom: 1px solid #eee;
   transition: background 0.2s ease;
}

.blog-content table tbody tr:hover,
.blog-content table tr:hover {
   background: #fff8f3;  /* light orange tint on hover */
}

.blog-content table tbody tr:last-child {
   border-bottom: none;
}

/* Cells */
.blog-content table td {
   padding: 12px 18px;
   color: #444;
   line-height: 1.6;
   vertical-align: top;
   border: none;
}

/* First column emphasis (the "Feature" labels) */
.blog-content table td:first-child {
   font-weight: 600;
   color: #1a1a1a;
   background: #fafafa;
}

.blog-content table tbody tr:hover td:first-child,
.blog-content table tr:hover td:first-child {
   background: #fff0e6;
}

/* Zebra striping (optional — comment out if you don't like it) */
.blog-content table tbody tr:nth-child(even) {
   background: #fcfcfc;
}

/* Make tables horizontally scrollable on mobile */
.blog-content table {
   display: block;
   overflow-x: auto;
   white-space: nowrap;
}

@media (min-width: 768px) {
   .blog-content table {
      display: table;
      white-space: normal;
   }
}

/* Caption support (if you add <caption>) */
.blog-content table caption {
   caption-side: top;
   text-align: left;
   font-weight: 600;
   color: #1a1a1a;
   padding: 0 0 10px;
   font-size: 16px;
}

.blog-content hr {
   display: none;
}