@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap");

@font-face {
  font-family: "Menlo";
  src: url("../ttf/menlo-regular.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

body {
  background-color: #212121 !important;
  font-family: Roboto !important;
}

html {
  font-size: 100%;
  --ghost-accent-color: #49c0f8 !important;
}

.main-header-container {
  z-index: 1000;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  background-color: #1c1b1b !important;
}

/* Secondary Tag Navigation */
.tag-nav-container {
  z-index: 999;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  background-color: #1c1b1b !important;
}

.tag-nav {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  max-width: 67.625rem;
  width: 100%;
  margin: 0 auto;
  padding: 0 3rem 0 0;
  gap: 2rem;
  min-height: 3.5rem;
}

.tag-nav-item {
  position: relative;
}

.tag-nav-trigger {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.9375rem;
  font-weight: 500;
  padding: 1rem 0.5rem;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.2s ease;
  text-transform: capitalize;
}

.tag-nav-trigger:hover {
  color: rgba(255, 255, 255, 0.95);
}

.tag-nav-arrow {
  transition: transform 0.2s ease;
}

.tag-nav-item.is-open .tag-nav-arrow {
  transform: rotate(180deg);
}

.tag-nav-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #1c1b1b;
  border: 1px solid rgba(255, 255, 255, 0.1);
  min-width: 250px;
  display: none;
  z-index: 1000;
}

.tag-nav-item.is-open .tag-nav-dropdown {
  display: block;
}

.tag-nav-dropdown-content {
  padding: 0;
}

.tag-nav-post {
  display: block;
  padding: 0.75rem 1rem;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.tag-nav-post:hover {
  background-color: rgba(255, 255, 255, 0.03);
}

.tag-nav-post-title {
  display: block;
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.4;
}

.tag-nav-all {
  display: block;
  text-align: left;
  color: #49c0f8;
  font-size: 0.875rem;
  font-weight: 500;
  padding: 0.75rem 1rem;
  text-decoration: none;
  background-color: rgba(255, 255, 255, 0.02);
}

.tag-nav-all:hover {
  background-color: rgba(255, 255, 255, 0.05);
}

/* Mobile responsiveness */
@media (max-width: 67.625rem) {
  .tag-nav {
    padding: 0 1rem 0 0;
    gap: 1.5rem;
  }
}

@media (max-width: 768px) {
  .tag-nav-container {
    display: none;
  }
}

.main-open:hover {
  background-color: #e7e7e7 !important;
}

.site-content {
  background-color: #212121 !important;
}

.main-site-header {
  background-color: #1c1b1b !important;
  padding: 7.3125rem 1rem;
}

.main-site-title {
  color: #fff;
  text-align: center;
  font-family: "Tiny-SemoBold";
  font-size: 2.8125rem;
  font-style: normal;
  line-height: 3.125rem;
  margin-bottom: 0.3125rem;
}

.main-site-description {
  color: rgba(255, 255, 255, 0.5);
  text-align: center;
  font-size: 1rem;
  font-style: normal;
  font-weight: 500;
  line-height: 1.625rem; /* 162.5% */
  max-width: 27.5rem;
  margin: auto;
}

.main-container {
  max-width: 67.625rem;
  margin: 0 auto;
  width: 100%;
  padding-bottom: 2.45rem;
  padding-top: 5.25rem;
}

.main-footer {
  padding: 3rem;
  border-radius: 0.5rem;
  background-color: #1c1b1b;
  min-height: 22.5rem;
}

.main-footer-grid {
  display: grid;
  grid-template-columns: 3fr 1fr 1fr 1fr 1fr;
  gap: 3rem;
}

/* Products section with extra bottom margin */
.main-footer-products ul {
  margin-bottom: 2.5rem;
}

.main-company-info {
  color: #8f8e8e;
  font-size: 0.625rem;
  font-weight: 400;
  line-height: 1rem;
  letter-spacing: 0.1px;
}

.main-company-description {
  margin-bottom: 0.75rem;
  margin-top: 3rem;
}

.main-footer-links-grid {
  grid-column: 2 / span 4;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
}

.main-footer-section h3 {
  color: #fff !important;
  font-size: 0.875rem !important;
  font-family: Roboto !important;
  font-weight: 700 !important;
  line-height: 0.9187rem;
  margin-bottom: 1rem;
  margin-top: 0 !important;
}

.main-footer-section h3.main-footer-legal-title {
  margin-top: 1.5rem !important;
}

.main-footer-section ul {
  list-style: none;
  padding: 0;
}

.main-footer-section ul li {
  margin: 0;
  margin-bottom: 0.75rem;
  padding: 0;
  line-height: 1.05rem !important;
}

.main-footer-section ul li:last-child {
  margin-bottom: 0;
}

.main-footer-section ul li a {
  color: #8f8e8e;
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.05rem;
  transition: color 0.2s ease;
}

.main-footer-section ul li a:hover {
  color: #fff;
}

.main-footer-section ul li button {
  background: none;
  border: none;
  padding: 0;
  color: #8f8e8e;
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.05rem;
  transition: color 0.2s ease;
  cursor: pointer;
  text-align: left;
}

.main-footer-section ul li button:hover {
  color: #fff;
}

.main-social-links {
  display: flex;
  gap: 1.5rem;
  margin-top: 4rem;
}

.main-social-icon {
  color: #8f8e8e;
  transition: color 0.2s ease;
  width: 24px;
  height: 24px;
  display: inline-flex;
}

.main-social-icon:hover {
  color: #fff;
}

.main-copyright {
  margin-top: 2rem;
  color: #8f8e8e;
  font-size: 0.75rem;
}

.main-copyright p {
  margin: 0;
}

/* Decorative lines */
.main-decorative-lines {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 0 auto;
  padding: 0.5rem 0;
}

.main-line {
  height: 0.25rem;
  border-radius: 0.25rem;
  background: #49c0f8;
  margin: 0 auto;
}

.main-line-1 {
  width: calc(100% - 1.375rem);
  opacity: 1;
}
.main-line-2 {
  width: calc(100% - 7.625rem);
  opacity: 0.5;
}
.main-line-3 {
  width: calc(100% - 13.875rem);
  opacity: 0.2;
}
.main-line-4 {
  width: calc(100% - 20.75rem);
  opacity: 0.1;
}

.main-outer {
  padding-top: 3.625rem;
  padding-left: 0;
  padding-right: 0;
}

.main-posts-title {
  color: #fff !important;
  text-align: center;
  font-size: 2.1153rem;
  font-style: normal;
  font-weight: 700;
  line-height: 2.625rem;
  text-align: center;
  margin-bottom: 1.5rem;
}

.main-post-card-title {
  text-align: center;
  color: #fff !important;
  font-size: 2.0967rem !important;
  font-style: normal;
  font-weight: 700;
  line-height: 2.625rem !important;
  max-width: 39.875rem;
  margin: auto;
  margin-bottom: 1rem;
  padding: 0 1rem;
}

.main-post-feed {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3rem 2rem;
  margin-bottom: 3rem;
}

/* Reset grid-column span for post cards in main-post-feed to ensure 3 per row */
.main-post-feed .post-card {
  grid-column: span 1;
}

.main-post-card-content {
  padding: 2.5rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

@media (max-width: 1024px) {
  .main-post-feed {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .main-post-feed {
    grid-template-columns: 1fr;
  }
}

.main-author-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  color: white;
}

.main-author-image,
.main-author-avatar {
  width: 1.875rem;
  height: 1.875rem;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  background-color: #a6a6a6;
}

.main-author-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.main-author-info {
  display: flex;
  gap: 0.875rem;
  align-items: center;
  transition: all 0.3s;
}

.progress-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: transparent;
  z-index: 1000;
}

.progress-bar {
  height: 4px;
  background: #49c0f8;
  width: 0%;
  transition: width 0.2s ease-out;
}

.main-author-name:hover {
  color: rgba(255, 255, 255, 0.5);
}

/* Hover on image that affects author name */
.main-author-image:hover + .main-author-info .main-author-name {
  color: rgba(255, 255, 255, 0.5);
}

/* Add smooth transition for color change */
.main-author-name {
  transition: color 0.3s ease;
}

.main-author-name {
  color: #fff;
  text-align: center;
  font-family: "IBM Plex Sans";
  font-size: 1rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.375rem;
  position: relative;
}
.main-reviewer {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.main-author-name::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: rgba(255, 255, 255, 0.4);
  transition: all 0.3s ease;
}

.main-author-name:hover::after {
  background-color: rgba(255, 255, 255, 0.5); /* Same blue with 0.4 opacity */
}

.main-author-image:hover + .main-author-info .main-author-name::after {
  background-color: rgba(255, 255, 255, 0.5); /* Same blue with 0.4 opacity */
}

.main-post-date {
  color: #fff;
  text-align: center;
  font-family: "IBM Plex Sans";
  font-size: 1rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.375rem; /* 137.5% */
}

.main-author-initial {
  background-color: #4a5568;
  line-height: 1;
  width: 1.875rem;
  height: 1.875rem;
  border-radius: 50%;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem; /* Adjusted for smaller size */
  font-weight: 500;
  text-transform: uppercase;
}

.main-author-image {
  display: flex;
  justify-content: center;
  align-items: flex-end;
}

@media (max-width: 768px) {
  .main-author-header {
    padding: 0.75rem;
  }

  .main-author-image {
    width: 2.5rem;
    height: 2.5rem;
  }

  .main-author-info {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
  }

  .main-author-avatar {
    width: 2.375rem;
    height: 2.375rem;
  }

  .main-author-name,
  .main-post-date {
    font-size: 1.2rem;
  }
}

/* author */

.main-author-header-container {
  background: #1c1c1c;
}

.main-author-text {
  color: #fff;
  font-size: 0.7422rem;
  font-style: normal;
  font-weight: 700;
  line-height: 1.375rem; /* 185.263% */
  letter-spacing: 0.03rem;
  text-transform: uppercase;
  margin-bottom: 1rem;
}

.main-author-header-section {
  padding: 4rem 0;
  color: #ffffff;
  max-width: 53.5rem;
  margin: auto;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-gap: 1.875rem;
}

.main-posts-section {
  padding-top: 2.125rem;
}

.main-author-title {
  font-size: 2.8rem;
  font-weight: 700;
  margin: 0 0 1rem;
}

.main-author-bio,
.main-tag-desc {
  color: #fff;
  font-family: "IBM Plex Sans";
  font-size: 1.375rem;
  font-style: normal;
  font-weight: 400;
  line-height: 2.0625rem;
  margin-top: 3.125rem;
}

.main-social-link-tags {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.main-author-profile-image {
  width: 16rem;
  height: 16rem;
  border-radius: 50%;
  margin-bottom: 1rem;
  object-fit: cover;
  border-radius: 0.3125rem;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.main-author-social-link {
  color: #ffffff;
  background-color: #212121;
  width: 2.625rem;
  height: 2.625rem;
  text-decoration: none;
  transition: opacity 0.2s ease;
  padding: 0.3125rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

.main-author-social-link:hover {
  opacity: 1;
}

/* Pagination Styles */
.main-pagination {
  margin: 4rem 0;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
}

.page-link {
  color: #ffffff;
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 28px;
  padding: 0.375rem;
  min-width: 2.875rem;
  background-color: #1c1b1b;
  border-radius: 0.25rem;
  text-align: center;
  transition: all 0.2s ease;
}

.page-link:hover {
  background-color: #646464;
}

.page-link.current {
  background-color: #4d4d4d;
  color: white;
  font-weight: bold;
}

.page-link.current:hover {
  background-color: #4d4d4d;
}

.page-first,
.page-last {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 1rem;
}

.page-first svg,
.page-last svg {
  flex-shrink: 0;
}

.page-link.disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

/* Responsive Design */
@media (max-width: 768px) {
  .main-author-header {
    padding: 3rem 1rem;
  }

  .main-author-title {
    font-size: 2.2rem;
  }

  .main-author-bio,
  .main-tag-desc {
    font-size: 1.1rem;
    padding: 0 1rem;
  }
}

::selection {
  background: #6f6f6f;
  text-shadow: none;
}

.main-tag-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.main-tag-desc {
  text-align: center;
}

/* Specific h1 styling */
.gh-content > h1 {
  margin-top: 2.5em !important; /* Ensure this overrides other specificity rules */
  position: relative;
  padding-bottom: 0.25rem;
  font-size: 2.8rem;
  font-weight: 700;
}

/* Specific h2 styling */
.gh-content > h2 {
  margin-top: 2em !important; /* Ensure this overrides other specificity rules */
  position: relative;
  padding-bottom: 0.25rem;
  font-size: 2.4rem;
  font-weight: 700;
}

/* Specific h3 styling */
.gh-content > h3 {
  margin-top: 2em !important; /* Ensure this overrides other specificity rules */
  position: relative;
  padding-bottom: 0.25rem;
  font-size: 28px;
}
/* --- Container & General Layout --- */
.main-article {
  background-color: #1c1b1b;
  color: #fff;
  margin: 0 auto;
  padding: 2.5rem 1rem;
}

.gh-content {
  padding: 0 2rem;
  padding-top: 0.5rem;
  color: #fff;
}

.gh-content > [id]:not(:first-child) {
  margin: 0.7em 0 0;
}

/* --- Primary Tag & Featured Badge --- */
.main-article-tag {
  margin-bottom: 1rem;
}

.post-card-primary-tag {
  color: #fff;
  text-align: center;
  font-size: 0.7734rem;
  font-style: normal;
  font-weight: 700;
  line-height: 1; /* 177.778% */
  letter-spacing: 0.0313rem;
  text-transform: uppercase;
  margin-top: 1.125rem;
  transition: all 0.3s ease;
  margin-bottom: 1.5rem;
}

.post-card-primary-tag.with-hover:hover {
  opacity: 0.5;
}

.post-feature-image {
  margin: auto;
  object-fit: contain;
}

.main-post-icon {
  display: flex;
  justify-content: center;
  align-items: center;
}

.post-card-featured {
  margin-left: 1rem;
  color: #f66;
  font-weight: 600;
}

/* --- Title --- */
.main-article-title {
  color: #fff;
  text-align: center;
  font-size: 2.7954rem;
  font-style: normal;
  font-weight: 700;
  line-height: 3.375rem; /* 120.734% */
  margin-bottom: 1rem;
}

.main-article-byline {
  font-family: "IBM Plex Sans";
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  font-size: 1rem;
  margin-bottom: 0.25rem;
  line-height: 1;
}

.main-article-meta {
  font-size: 0.9rem;
  color: #aaa;
  margin-bottom: 1rem;
}

.main-byline-meta-date {
  font-size: 1rem;
  color: #fff;
}

.main-byline-reading-time {
  color: #fff;
  text-align: center;
  font-family: "IBM Plex Sans";
  font-size: 1rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.375rem; /* 137.5% */
}

/* --- Feature Image --- */
.main-article-image {
  margin: 2rem 0;
  text-align: center;
}

.main-article-image img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

/* --- Comments Section --- */
.main-article-comments {
  border-top: 1px solid #333;
  margin-top: 2rem;
  padding-top: 2rem;
}

.main-block {
  width: 5px;
  height: 5px;
  margin-left: 1rem;
  margin-right: 1rem;
  background-color: #fff;
}

.main-reading {
  display: flex;
  align-items: center;
}
.main-header {
  display: flex;
  justify-content: space-between;
  max-width: 67.625rem;
  width: 100%;
  align-items: center;
  min-height: 5rem;
  margin: auto;
  padding-right: 3rem;
}

@media (max-width: 67.625rem) {
  .main-header {
    padding: 0 1rem;
  }
}

.main-article-meta {
  font-family: "IBM Plex Sans";
  display: flex;
  text-align: center;
  justify-content: center;
  align-items: center;
  margin-top: 1.3125rem;
  line-height: 1;
}

.main-links {
  display: flex;
  align-items: center;
  gap: 1.75rem;
}

.main-link {
  color: #fff !important;
  font-size: 0.875rem;
  font-weight: 500;
}

.main-link:hover {
  color: #e7e7e7 !important;
}

.main-open {
  font-size: 0.875rem;
  color: #000 !important;
  font-weight: 500;
  background-color: #fff !important;
  padding: 0.625rem 1rem;
  border-radius: 0.3125rem;
  line-height: 0.9375rem;
  transition: all 0.2s ease;
}

.main-open:active {
  background-color: #d6d6d6 !important;
}

/* Updated mobile menu styles */
.main-hamburger {
  display: flex;
  flex-direction: column;
  display: none;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  width: 28px;
  height: 10px;
  position: relative;
  z-index: 100;
}

.main-hamburger span {
  display: block;
  position: absolute;
  height: 2px;
  width: 100%;
  background: #fff;
  border-radius: 1px;
  opacity: 1;
  left: 0;
  transform: rotate(0deg);
  transition: 0.25s ease-in-out;
}

.main-hamburger span:nth-child(1) {
  top: 0px;
}

.main-hamburger span:nth-child(2) {
  top: 8px;
}

.main-mobile-menu {
  display: none;
  position: fixed;
  top: 3.5rem; /* Matches header height */
  left: 0;
  right: 0;
  background: #1c1b1b;
  padding: 1rem 0rem;
  transform: translateY(-10px);
  transition: all 0.3s ease-in-out;
  z-index: 10;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.main-mobile-nav {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width: 67.625rem;
  margin: 0 auto;
  padding: 0 1rem;
}

.main-mobile-link {
  color: #fff !important;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.5;
  text-decoration: none;
}

.main-mobile-open {
  display: inline-block;
  font-size: 0.875rem;
  color: #000 !important;
  font-weight: 500;
  background-color: #fff !important;
  padding: 0.625rem 1rem;
  border-radius: 0.3125rem;
  line-height: 0.9375rem;
  width: fit-content;
}

@media (max-width: 768px) {
  .main-header {
    min-height: 3.5rem;
  }

  .main-links {
    display: none;
  }

  .main-hamburger {
    display: block;
  }

  .menu-open .main-mobile-menu {
    display: block;
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  .menu-open .main-hamburger span:nth-child(1) {
    top: 8px;
    transform: rotate(45deg);
  }

  .menu-open .main-hamburger span:nth-child(2) {
    transform: rotate(-45deg);
  }
}

code[class*="language-"],
pre[class*="language-"] {
  font-size: 0.875rem;
  line-height: 1.3125rem;
  letter-spacing: -0.01rem;
  font-family: "Menlo" !important;
}

pre[class*="language-"] {
  padding: 1.625rem 1.5rem;
  background-color: #1c1b1b;
  border-radius: 0.375rem;
}

.token.attr-name,
.token.builtin,
.token.char,
.token.inserted,
.token.selector,
.token.string {
  color: #ff2d55;
}

.token.atrule,
.token.attr-value,
.token.class-name,
.token.function {
  color: #49c0f8;
}

.token.keyword {
  color: #f27900;
}

.gh-content > blockquote:not([class]),
.gh-content > dl,
.gh-content > ol,
.gh-content > ul,
.gh-content > a {
  font-size: 1.125rem;
  line-height: 1.5;
  font-family: "IBM Plex Sans";
}

.gh-content > p {
  margin: 0 0 15px !important;
  padding: 0;
  font-size: 1.125rem;
  color: #fff;
  line-height: 1.6;
  font-family: "IBM Plex Sans", sans-serif;
}

/* Style for the first paragraph in content (optional) */
.gh-content > p:first-child {
  font-size: 1.375rem;
  margin-bottom: 20px !important;
}

/* Style for paragraphs in post holder */
.post-holder p {
  margin: 0 0 15px;
  text-align: left;
  font-family: "IBM Plex Sans", sans-serif;
}

.gh-content > p:first-child {
  font-family: "IBM Plex Sans";
  line-height: 1.5;
  font-size: 1.375rem;
}

h2 {
  color: #fff !important;
  font-size: 2.7588rem !important;
  font-style: normal;
  font-weight: 700;
  line-height: 3.375rem;
}

h3 {
  font-size: 28px !important;
  color: #ffffff !important;
}

/* These are table of contents styles */

.gh-content {
  position: relative;
}

.gh-sidebar {
  font-size: 0.9375rem;
  margin-top: 2.5rem !important;
  padding-top: 0.9375rem;
  width: 100%;
  margin-right: 2.125rem;
}

.contents-title {
  font-size: 0.9375rem;
  line-height: 1.125rem;
  font-weight: 700;
  margin-bottom: 0.375rem;
  padding-left: 1.25rem;
  font-family: "IBM Plex Sans";
  padding-left: 2rem;
}

.gh-toc > .toc-list {
  position: relative;
  padding-left: 0;
}

.toc-list {
  overflow: hidden;
  list-style: none;

  padding-right: 0;
}

.toc-link::before {
  display: none !important;
}

.toc-listis-collapsible {
  width: 100%;
  padding: 0;
  margin: 0 !important;
}

.toc-list-item {
  font-size: 0.9375rem;
  line-height: 1.25rem;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.8);
  font-family: "IBM Plex Sans";
  font-size: 0.9375rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.25rem; /* 133.333% */
  min-height: 1.75rem;
  display: flex;
  justify-content: center;
  align-items: start;
  flex-direction: column;
  padding-left: 0;
}

.toc-list-item a {
  text-decoration: none !important;
}

.toc-list .is-collapsible {
  border: none;
  margin-top: 0.5em;
}

.main-author-post {
  padding-top: 1rem;
  grid-column: main-start / main-end;
}

.bottom-info-about-author {
  display: none;
}

/* Add these styles to your CSS */
.mobile-toc-wrapper {
  display: none;
  background: #ffffff06;
  border-radius: 5px;
  padding-top: 1rem;
  padding-bottom: 0.75rem;
}

/* Hide sidebar TOC on all screen sizes */
.gh-sidebar {
  display: none !important; /* Hide original sidebar */
}

/* Show inline TOC on all screen sizes */
.mobile-toc-wrapper {
  display: block; /* Show inline TOC */
  margin-bottom: 2.5rem; /* Add spacing below TOC */
}

/* 
@media (max-width: 1299px) {
  .gh-sidebar {
    display: none;
  }
}


@media (min-width: 1300px) {
  .gh-sidebar {
    display: block;
  }

  .mobile-toc-wrapper {
    display: none;
  }
}


@media (max-width: 1299px) {
  .gh-sidebar.mobile-ready {
    display: block;
    position: static !important;
    width: 100% !important;
    margin-top: 0;
  }

  .gh-sidebar.mobile-ready .sticky-content {
    position: static !important;
    top: auto !important;
  }

  .gh-sidebar.mobile-ready .border-content {
    margin: 0 !important;
  }
}
 */

/* Desktop layout - removed sidebar positioning since TOC is now inline */
@media (min-width: 1300px) {
  /* Sidebar TOC is now hidden on all screen sizes - see above */

  /* Keep author section positioning */
  .main-section.gh-content .main-author-post {
    transform: translateX(1.875rem);
  }

  .bottom-info-about-author {
    display: block;
    margin-top: 1.5rem;
  }

  .main-author-post {
    grid-column: main-end / wide-end;
  }
}

svg path {
  transition: all 0.3s ease;
}

.main-author-social-link:hover svg path {
  fill: #49c0f8;
  fill-opacity: 1;
}

.author-social-link:hover svg path {
  fill: #49c0f8;
  fill-opacity: 1;
}

.toc-link {
  display: block !important;
  width: 100%;
  padding: 0.25rem 1.25rem;
  padding-left: 2rem;
}

.toc-link.is-active-link {
  background: rgba(73, 192, 248, 0.1);
}
.toc-link.is-active-link {
  color: #49c0f8;
  font-weight: 400;
}

.proxy-img {
  object-fit: cover;
  margin-bottom: 0.75rem;
  max-width: 15rem;
  width: 100%;
  height: 11.5625rem;
}

.post-author-profile-image {
  width: 5.3125rem;
  height: 5.3125rem;
  margin-bottom: 1.1875rem;
  object-fit: cover;
}

.gh-content blockquote:not([class]):before {
  left: min(-2vmin, -10px) !important;
}

.post-author-name {
  color: #fff;
  font-size: 1.0742rem !important;
  margin: 0;
  margin-bottom: 0.5rem;
  font-style: normal;
  font-weight: 700;
  line-height: 1.5rem; /* 139.636% */
}

.post-author-bio {
  color: rgba(255, 255, 255, 0.8);
  font-family: "IBM Plex Sans";
  font-size: 0.9375rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.375rem; /* 146.667% */
  margin-bottom: 1.125rem;
}

.author-social-links {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.author-social-link {
  height: max-content;
  display: flex;
  justify-content: center;
  align-items: center;
}

.get-proxy-btn {
  border-radius: 0.25rem;
  color: #49c0f8 !important;
  text-decoration: none !important;
  text-align: center;
  font-family: "IBM Plex Sans";
  font-size: 0.9375rem;
  font-style: normal;
  font-weight: 700;
  line-height: 1.125rem; /* 120% */
  letter-spacing: 0.0281rem;
  background: rgba(73, 192, 248, 0.1);
  padding: 0.75rem 0.5rem;
  width: 100%;
  cursor: pointer;
  font-family: inherit;
  line-height: 1;
  min-height: 2.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  max-width: 15rem;
}

.get-proxy-btn:hover {
  background: rgba(73, 192, 248, 0.2);
}

.email-input {
  border-radius: 0.1875rem;
  outline: 0.0625rem solid rgba(255, 255, 255, 0.05) !important;
  border: none;
  background: #1c1b1b;
  padding: 1rem 1rem;
  font-size: 1rem;
  font-family: inherit;
  line-height: 1.1;
  max-width: 15rem;
  width: 100%;
  margin-bottom: 1rem;
  transition: all 0.3s ease;
}

.main-title-nav {
  font-size: 1rem;
  color: #fff;
  font-family: "Tiny-SemoBold";
}

.email-input:focus {
  outline: 0.0625rem solid rgba(255, 255, 255, 0.2) !important;
}

.email-input-section {
  margin-top: 2.75rem;
  position: sticky;
  top: 3.75rem;
}

.proxy-text {
  color: #fff;
  font-family: "IBM Plex Sans";
  font-size: 0.9375rem;
  font-style: normal;
  margin-bottom: 0.75rem;
  font-weight: 700;
  line-height: 1.125rem; /* 120% */
}

.gh-content > * + * {
  margin-top: 1.5rem !important;
}

.gh-content .kg-card + :not(.kg-card),
.gh-content :not(.kg-card):not([id]) + .kg-card {
  margin-top: 1.5rem;
}

.kg-card img,
.kg-image-card img {
  background: rgba(0, 0, 0, 0.2);
  box-shadow: 0rem 0.0625rem 0.25rem 0rem rgba(0, 0, 0, 0.1),
    0rem 0rem 0.375rem 0rem rgba(0, 0, 0, 0.1),
    0rem 0.125rem 0.125rem -0.125rem rgba(0, 0, 0, 0.15);
}

figcaption {
  display: block;
  text-align: left;
  font-family: "IBM Plex Sans";
  color: #fff;
  font-size: 0.9375rem;
  padding: 0.25rem 0;
  padding-bottom: 0;
}

figcaption > * > * {
  color: #fff !important;
}

.gh-content table:not(.gist table) {
  font-family: "IBM Plex Sans";
}

.gh-content a {
  text-decoration: none !important;
  transition: all 0.3s ease;
}

.gh-content a:hover {
  opacity: 0.8;
}

.gh-content table:not(.gist table) td,
.gh-content table:not(.gist table) th {
  background-color: #1c1c1c;
  color: #fff;
  border: none;
  padding: 1.125rem !important;
  text-transform: capitalize;
}

.gh-content table:not(.gist table) td {
  font-weight: 700;
  padding: 1.125rem;
}

.gh-content table:not(.gist table) td:last-child,
.gh-content table:not(.gist table) td:first-child {
  background-image: none;
  background-color: #1c1c1c;
  color: #fff;
}

.gh-content table:not(.gist table) td:first-child {
  color: #fff;
}

.gh-content table:not(.gist table) td {
  font-family: "IBM Plex Sans";
  font-size: 1.125rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.8125rem;
  border-top: 1px solid rgba(221, 221, 221, 0.1);
}

.kg-callout-card {
  background-color: #49c0f81a !important;
  padding: 1.875rem !important;
}

.kg-callout-text {
  font-family: "IBM Plex Sans" !important;
  line-height: 1.8125rem !important;
  font-size: 1.125rem !important;
}

.main-author-profile-image.mobile {
  display: none;
}

.site-logo {
  display: inline-block;
  margin-right: auto;
  margin-left: 0;
}

.site-logo img {
  max-height: 40px; /* Adjust this value to match your design */
  width: auto;
  vertical-align: middle;
}

/* Paragraph styling for the entire site */
p {
  margin: 0 0 15px; /* Top, right/left, bottom margin */
  line-height: 1.6;
  font-family: "IBM Plex Sans", sans-serif;
}

/* Specific paragraph styling for content */
.gh-content > p {
  margin: 0 0 15px !important; /* Ensure this overrides other specificity rules */
  padding: 0;
  font-size: 1.125rem;
  color: #fff;
  line-height: 1.6;
  font-family: "IBM Plex Sans", sans-serif;
}

/* Style for the first paragraph in content (optional) */
.gh-content > p:first-child {
  font-size: 1.375rem;
  margin-bottom: 20px !important;
}

/* ===== LIST STYLING - SHARED PROPERTIES ===== */

/* Default list styling for both ordered and unordered lists */
.gh-content > ul,
.gh-content > ol {
  text-align: left;
  margin: 13px 0 18px !important;
  overflow: hidden;
  box-sizing: border-box;
  font-family: "IBM Plex Sans", sans-serif;
  color: #fff;
  font-size: 1.125rem;
  line-height: 1.6;
}

/* List items for both types of lists */
.gh-content > ul > li,
.gh-content > ol > li {
  margin-bottom: 8px;
  position: relative;
  padding-left: 5px;
}

/* Nested lists */
.gh-content > ul ul, 
.gh-content > ol ol, 
.gh-content > ul ol, 
.gh-content > ol ul {
  margin: 8px 0 8px 15px !important;
}

/* ===== UNORDERED LISTS (BULLET POINTS) ===== */

/* Unordered lists */
.gh-content > ul {
  padding: 0 0 0 7px;
  list-style-type: none; /* Remove default bullets */
}

/* List item markers (bullets) customization */
.gh-content > ul > li {
  list-style-type: none;
  padding-left: 20px;
  position: relative;
}

.gh-content > ul > li:before {
  content: "•";
  color: rgba(73, 192, 248, 0.8); /* Uses theme's accent color */
  position: absolute;
  left: 0;
  font-size: 1.2em;
}

/* Nested unordered list items */
.gh-content > ul ul > li {
  list-style-type: none;
  padding-left: 20px;
  position: relative;
}

.gh-content > ul ul > li:before {
  content: "◦"; /* Different bullet for nested lists */
  color: rgba(73, 192, 248, 0.7);
  position: absolute;
  left: 0;
  font-size: 1.2em;
}

/* ===== ORDERED LISTS (NUMBERED LISTS) ===== */

/* Ordered lists */
.gh-content > ol {
  padding: 0 0 0 7px;
  counter-reset: item; /* Reset counter for custom numbering */
  list-style-type: none; /* Remove default numbers */
}

/* Custom styling for ordered list items */
.gh-content > ol > li {
  counter-increment: item; /* Increment the counter */
  list-style-type: none;
  padding-left: 28px;
  position: relative;
}

.gh-content > ol > li:before {
  content: counter(item) "."; /* Add the number and period */
  color: rgba(73, 192, 248, 0.9); /* Uses theme's accent color */
  position: absolute;
  left: 0;
  font-weight: 600;
}

/* Nested ordered lists use different counter and styling */
.gh-content > ol ol {
  counter-reset: subitem;
}

.gh-content > ol ol > li {
  counter-increment: subitem;
  padding-left: 28px;
}

.gh-content > ol ol > li:before {
  content: counter(item) "." counter(subitem) ".";
}

/* ===== RESPONSIVE ADJUSTMENTS ===== */

@media (min-width: 768px) {
  .gh-content > ul {
    padding: 0 0 0 19px;
  }
  
  .gh-content > ol {
    padding: 0 0 0 22px;
  }
  
  .gh-content > ol > li {
    padding-left: 25px;
  }
  
  .gh-content > ul > li {
    padding-left: 22px;
  }
}

@media (max-width: 767px) {
  .gh-content > p,
  .gh-content > ul,
  .gh-content > ol {
    font-size: 1rem;
    margin: 0 0 12px !important;
  }
  
  .gh-content > p:first-child {
    font-size: 1.2rem;
    margin-bottom: 15px !important;
  }
  
  .gh-content > ul > li,
  .gh-content > ol > li {
    margin-bottom: 6px;
  }
}

/* Style for paragraphs and lists in post holder */
.post-holder p,
.post-holder ul,
.post-holder ol {
  margin: 0 0 15px;
  text-align: left;
  font-family: "IBM Plex Sans", sans-serif;
}

/* Add margin when image is directly followed by paragraph */
.gh-content img + p,
.gh-content figure + p,
.kg-image-card + p,
.kg-gallery-card + p {
  margin-top: 1.5rem !important; /* Adjust this value to increase/decrease the space */
}

/* Also handle when images are in figure elements or cards */
.gh-content figure img + figcaption + p,
.kg-image-card img + figcaption + p,
.kg-gallery-card img + figcaption + p {
  margin-top: 1.2rem !important;
}

/* Handle images in other card types */
.kg-card + p {
  margin-top: 1.5rem !important;
}

/* For images at the top of the article */
.gh-content > img:first-child + p,
.gh-content > figure:first-child + p,
.gh-content > .kg-image-card:first-child + p {
  margin-top: 1.8rem !important; /* Slightly larger margin for top images */
}

/* Adjust for mobile views */
@media (max-width: 767px) {
  .gh-content img + p,
  .gh-content figure + p,
  .kg-image-card + p,
  .kg-gallery-card + p,
  .kg-card + p {
    margin-top: 1.2rem !important; /* Slightly smaller margin on mobile */
  }
}

@media (min-width: 600px) {
  body, 
  p, 
  .gh-content > ul > li,
  .gh-content > ol > li {
    font-size: 18px;
    line-height: 29px;
  }
}

/* ===== TOC SPECIFIC STYLING ===== */

/* Explicitly preserve TOC styling */
.gh-sidebar .contents-title,
.mobile-toc-wrapper .contents-title {
  font-size: 0.9375rem;
  line-height: 1.125rem;
  font-weight: 700;
  margin-bottom: 0.375rem;
  padding-left: 1.25rem;
  font-family: "IBM Plex Sans";
}

/* Completely reset any custom styling for TOC-related elements */
.toc-list,
.toc-list li,
.toc-list-item,
.gh-toc,
.gh-toc > .toc-list {
  /* Explicitly set values to override our content list styling */
  margin: initial;
  padding: initial;
  list-style-type: initial;
}

/* Ensure TOC list items don't have the bullet styles */
.toc-list li:before,
.toc-list-item:before {
  content: none !important;
  display: none !important;
}

/* Restore original TOC list styling */
.toc-list {
  overflow: hidden;
  list-style: none;
  padding-right: 0;
}

.toc-list-item {
  font-size: 0.9375rem;
  line-height: 1.25rem;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.8);
  font-family: "IBM Plex Sans";
  min-height: 1.75rem;
  display: flex;
  justify-content: center;
  align-items: start;
  flex-direction: column;
  padding-left: 0;
}

.toc-link {
  display: block !important;
  width: 100%;
  padding: 0.25rem 1.25rem;
  padding-left: 2rem;
}

.toc-link.is-active-link {
  background: rgba(73, 192, 248, 0.1);
  color: #49c0f8;
  font-weight: 400;
}

/* ===== PRODUCT PREVIEW STYLING ===== */

/* Product preview wrapper - similar to TOC */
.product-preview-wrapper {
  display: block;
  background: #ffffff06;
  border-radius: 5px;
  padding-top: 1rem;
  padding-bottom: 0.75rem;
  margin-bottom: 2.5rem;
  margin-top: 2.5rem;
}

/* Product preview title */
.product-preview-title {
  font-size: 0.9375rem;
  line-height: 1.125rem;
  font-weight: 700;
  margin-bottom: 0.75rem;
  padding-left: 2rem;
  font-family: "IBM Plex Sans";
  color: rgba(255, 255, 255, 0.95);
  display: flex;
  align-items: center;
}

/* Product preview title icon container */
.product-preview-title-icon {
  display: inline-flex;
  align-items: center;
}

/* Product preview divider */
.product-preview-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.15);
  margin: 0.75rem 2rem;
  margin-bottom: 0.5rem;
}

/* Product preview list */
.product-preview-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* Individual product preview item */
.product-preview-item {
  font-size: 0.9375rem;
  line-height: 1.25rem;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.8);
  font-family: "IBM Plex Sans";
  min-height: 1.75rem;
  display: flex;
  align-items: start;
  padding-left: 0;
  margin-bottom: 0.5rem;
}

/* Product preview link */
.product-preview-link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  padding: 0.5rem 1.25rem;
  padding-left: 2rem;
  text-decoration: none;
  color: rgba(255, 255, 255, 0.8);
  transition: all 0.2s ease;
  border-radius: 3px;
}

.product-preview-link:hover {
  background: rgba(73, 192, 248, 0.15);
  color: #49c0f8;
}

/* Product preview icon image */
.product-preview-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  object-fit: contain;
}

/* Product preview text container */
.product-preview-text {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  flex: 1;
}

/* Product preview name */
.product-preview-name {
  font-size: 0.9375rem;
  line-height: 1.25rem;
  font-weight: 400;
  color: inherit;
}

/* Product preview description */
.product-preview-description {
  font-size: 0.875rem;
  line-height: 1.125rem;
  color: rgba(255, 255, 255, 0.6);
  font-weight: 400;
}

/* Product preview button */
.product-preview-button {
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 1rem;
  background: #49c0f8;
  color: #ffffff;
  font-size: 0.8125rem;
  font-weight: 600;
  border-radius: 4px;
  white-space: nowrap;
  transition: all 0.2s ease;
  margin-left: auto;
}

.product-preview-link:hover .product-preview-button {
  background: #3badeb;
  transform: translateX(2px);
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .main-footer {
    padding: 2rem 1.25rem;
    border-radius: 0.1875rem;
  }

  .main-footer-grid {
    display: flex;
    flex-direction: column;
    gap: 3rem;
  }

  .main-footer-section ul li {
    margin-bottom: 0.5rem;
  }

  .post-card-primary-tag {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
  }

  .gh-content > ul {
    padding-right: 0;
    padding-left: 1.5rem;
  }

  .main-footer-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .main-company-description {
    margin-top: 0;
  }

  .main-footer-links-grid {
    grid-column: 1;
    display: flex;
    flex-direction: column;
    gap: 2rem;
  }

  .main-post-card-title {
    font-size: 1.75rem !important;
    line-height: 1.25 !important;
  }

  .main-post-card-content {
    padding-top: 1.25rem !important;
    padding-bottom: 1.25rem !important;
  }

  .main-social-links {
    margin-top: 8rem;
  }

  .main-decorative-lines {
    display: none;
  }

  .main-author-header {
    padding: 1rem 0;
  }

  .main-article-title {
    font-size: 2.0967rem;
    font-style: normal;
    font-weight: 700;
    line-height: 2.5rem;
    margin-bottom: 1rem;
  }

  .main-article {
    padding-top: 1rem;
    padding-bottom: 2rem;
    border-bottom: 4px solid #49c0f8;
  }

  .main-author-profile-image {
    display: none;
  }

  .main-author-profile-image.mobile {
    display: block;
  }

  .main-post-icon svg {
    width: 4rem;
    height: 4rem;
  }

  .main-article-byline,
  .main-author-name,
  .main-article-meta,
  .main-post-date {
    font-size: 1rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.375rem;
  }

  .main-site-header {
    padding-top: 2rem;
    padding-bottom: 2rem;
  }

  .main-article-meta {
    margin-bottom: 0;
    margin-top: 1rem;
  }

  .main-outer,
  .main-container {
    padding-top: 2rem;
  }

  .main-author-header-section {
    grid-template-columns: 1fr;
    padding: 2rem 1rem;
  }
}

@media (max-width: 500px) {
  .main-site-title {
    font-size: 2.25rem;
    line-height: 1.5;
  }

  .main-author-bio,
  .main-tag-desc {
    padding: 0;
    margin-top: 1rem;
  }

  .email-input {
    max-width: 100%;
  }

  .gh-content {
    padding: 0 !important;
  }

  .main-site-description {
    font-size: 1rem;
    line-height: 1.5;
  }

  .post-feature-image {
    margin-bottom: 0.5rem;
  }
}

@media (max-width: 390px) {
  .main-site-title {
    font-size: 2rem;
    line-height: 1.5;
  }

  .main-site-description {
    font-size: 0.9rem;
    line-height: 1.5;
  }
}

.bottom-info-about-author {
  background: #1a1a1a;
  padding: 1.875rem;
  padding-bottom: 0;
  color: #fff;
}

.bottom-author-profile {
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
}

.bottom-author-profile-image {
  width: 14.5rem;
  height: 17.5rem;
  object-fit: cover;
}

.bottom-author-content {
  flex: 1;
  font-family: "IBM Plex Sans";
}

.bottom-article-label {
  color: rgba(255, 255, 255, 0.8);
  font-family: "IBM Plex Sans";
  font-size: 0.8125rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.375rem;
  margin-bottom: 0.25rem;
}

.bottom-author-name {
  color: #fff;
  margin: 0;
  font-size: 2rem !important;
  font-style: normal;
  margin-bottom: 1rem;
  font-weight: 700;
  line-height: 2.25rem !important;
  font-family: "IBM Plex Sans";
}

.bottom-author-bio {
  color: #dfdfdf;
  font-family: "IBM Plex Sans";
  font-size: 0.9375rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.375rem;
}

.bottom-social-links {
  display: flex;
  gap: 0.5rem;
  margin-top: 1rem;
}

.bottom-social-link {
  padding: 0.375rem;
  opacity: 0.7;
  transition: opacity 0.2s ease;
  width: 1.875rem;
  height: 1.875rem;
  border-radius: 0.1875rem;
  background: #131313;
  display: flex;
  justify-content: center;
  color: rgba(255, 255, 255, 0.5) !important;
  align-items: center;
}

.bottom-social-link:hover {
  opacity: 1;
  color: #49c0f8 !important;
}

.toc-list .toc-list {
  padding-left: 0 !important;
}

.toc-list .toc-list {
  padding-left: 0 !important;
}

.toc-list .toc-list .toc-list-item {
  padding-left: 0 !important;
}

.toc-list-item {
  margin-top: 0.5em !important;
}

.toc-list .is-collapsible {
  margin-top: 0 !important;
}

.px {
  padding: 0 2rem;
}

.gh-content > blockquote:not([class]) {
  font-style: normal !important;
  color: rgba(255, 255, 255, 0.7);
  font-size: 1rem;
  font-style: normal;
  font-weight: 700;
  line-height: 1.375rem; /* 137.5% */
  letter-spacing: 0.0313rem;
  text-transform: none !important;
  font-weight: normal;
}

.gh-content > blockquote:not([class]) strong {
  letter-spacing: 0.5px;
}

.gh-content blockquote:not([class]):before {
  display: none;
}

.code-block {
  margin: 1.5em 0;
  background: #1e1e1e;
  border-radius: 6px;
  overflow: hidden;
}

.code-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 1.25rem;
  padding-right: 0.35rem;
  background: #292726;
  height: 2.875rem;
}

.code-filename {
  color: #fff;
  font-family: "IBM Plex Sans";
  opacity: 0.8;
  font-size: 1rem;
  line-height: 1.5;
}

.copy-button {
  background: none;
  border: none;
  padding: 4px;
  cursor: pointer;
  color: #888;
  transition: color 0.2s;
}

.copy-button:hover {
  color: #fff;
}

.code-block pre {
  margin: 0;
  padding: 1em;
}