/* post Page Styles */
.post-article {
  max-width: 800px;
  margin: 0 auto;
  background: white;
  color: black;
  overflow-wrap: break-word;
}

.post-article img{
  max-width: 100%;
}

.post-content h2 {
  font-size: 1.4rem;
  margin-top: 3rem;
  border-left: solid 5px #191970;
  padding: 0.25em 0.5em;
}

.post-content h3 {
  font-size: 1.2rem;
  margin-top: 2.5rem;
  margin-bottom: 1.2rem;
}


.article-content {
  line-height: 1.8;
}
  
  /* Left & Right Sidebars */
  .sidebar {
    width: 250px; /* Set the width of the sidebar */
    padding: 15px;
    background: #f4f4f4;
    border-radius: 5px;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
    box-sizing: border-box; /* Include padding in width calculation */
    transition: transform 0.3s ease, opacity 0.3s ease;
  }
  /*  flex-shrink: 0;*/
  
  /* Left Sidebar Collapsible */
  /* Base styles for the sidebar */
  .sidebar.left {
    padding: 10px;
    background-color: #f4f4f4;
    border-radius: 5px;
    box-sizing: border-box;
    transition: transform 0.3s ease; /* Smooth transition for sliding effect */
  }
  /* Right Sidebar */
  .sidebar.right {
    flex-shrink: 0;
  }
  
  /* Left Sidebar (TOC) Collapsible */
  #toc-sidebar {
    position: relative;
    transform: translateX(0); /* Default: visible */
  }
  
  #toggle-toc {
    background: black;
    color: white;
    border: none;
    padding: 8px 12px;
    cursor: pointer;
    border-radius: 5px;
    font-size: 14px;
    position: absolute;
    transform: rotate(0);
    transition: transform 0.3s ease;
    display: none;
  }
  
  
  .sidebar h3 {
    font-size: 18px;
    margin-bottom: 10px;
  }
  
  .sidebar ul {
    list-style: none;
    padding: 0;
  }
  
  .sidebar ul li {
    margin-bottom: 8px;
  }
  
  .sidebar ul li a {
    text-decoration: none;
    color: #0077b6;
  }
  
  .sidebar ul li a:hover {
    text-decoration: underline;
  }
  
  /* Media query for smaller screens */
  @media (max-width: 900px) {
    .post-container {
      flex-direction: column; /* Stack elements vertically */
  　}
  
    .post-center {
      margin: 0; /* Remove horizontal margin */
      width: 100%; /* Ensure main content takes full width */
    }
  
    .sidebar.right {
      width: 100%; /* Make the right sidebar take full width */
      max-width: 100%; /* Ensure it doesn't exceed the container width */
      margin-top: 20px; /* Add space between center and right sidebar */
      box-shadow: 0px;
      box-sizing: border-box; /* Include padding in width calculation */
    }
  
    .sidebar.left {
      display: none;
      position: fixed; /* Fix the sidebar to the left */
      height: 100%;
      top: 0;
      left: 0;
      z-index: 1000; /* Ensure it appears above other content */
      box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
    }
  
    .sidebar.left.active {
      visibility: visible;
      left: 0; /* Bring the sidebar back on-screen when active */
    }
  
    #toggle-toc {
        display: none; /* Show the toggle button on smaller screens */
        position: fixed; /* Fix the button to the top-left corner */
        top: 10px;
        left: 10px;
        z-index: 1001; /* Ensure it appears above the sidebar */
    }
  }
 
  
  
  .post-tags {
    margin-top: 20px;
    margin-bottom: 20px;
  }
  
  .post-tags ul {
    list-style: none;
    padding: 0;
  }
  
  .post-tags li {
    display: inline-block;
    background: #007bff;
    color: white;
    padding: 5px 10px;
    border-radius: 5px;
    margin-right: 5px;
    font-size: 14px;
  }
  
  .back-button {
    display: inline-block;
    margin-top: 20px;
    padding: 10px 15px;
    background: #007bff;
    color: white;
    text-decoration: none;
    border-radius: 5px;
  }
  
  .back-button:hover {
    background: #0056b3;
  }
  
 
  
  /* Social Media Section */
  .social-share {
    display: flex;
    gap: 10px; /* Space between buttons */
    padding: 5px;
    border-radius: 8px; /* Soft rounded corners */
  }
 
  
/*--list--*/
/* Sidebar spacing */
.pe-lg-4 {
  padding-right: 1.5rem !important;
}
.ps-lg-4 {
  padding-left: 1.5rem !important;
}
.px-lg-4 {
  padding-left: 1.5rem !important;
  padding-right: 1.5rem !important;
}

/* Card styling */
.card {
  border-radius: 0.5rem;
  transition: all 0.2s ease;
}

/* Hover effects */
.hover-bg:hover {
  background-color: rgba(var(--bs-primary-rgb), 0.1);
}
.hover-lift:hover {
  transform: translateY(-3px);
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1) !important;
}

/* Stretched link for entire card clickable */
.stretched-link::after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  content: "";
}

/* Responsive adjustments */
@media (max-width: 992px) {
  .pe-lg-4, .ps-lg-4, .px-lg-4 {
    padding: 0 !important;
  }
  
  aside {
    margin-bottom: 2rem;
  }
  
  .order-lg-1 {
    order: 1;
  }
  .order-lg-2 {
    order: 2;
  }
  .order-lg-3 {
    order: 3;
  }
}

/* Badge adjustments */
.badge {
  font-weight: 500;
  padding: 0.35em 0.65em;
}

/* Pagination active state */
.page-item.active .page-link {
  border-color: var(--bs-primary);
}


  
/* post top */
/* Featured Post */
.featured-post-image {
  height: 400px;
  background-size: cover;
  background-position: center;
}

/* Card hover effect */
.hover-lift {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.hover-lift:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0,0,0,0.1) !important;
}

/* Hover background for links */
.hover-bg:hover {
  background-color: rgba(255,255,255,0.1);
}

/* Stretched link positioning */
.stretched-link::after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  content: "";
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .featured-post-image {
    height: 250px;
  }
  
  .card-body {
    padding: 1.5rem;
  }
}