/* Custom CSS for CCBook */

/* ============================================================================
   CCBook Chapter Styles - Dark Theme
   ============================================================================ */

/* Remove margin-bottom from post-header */
.post-header {
  margin-bottom: 0 !important;
}

/* CCBook Page Mode - Hide redundant post-title in post-header (keep only h1 in post-body) */
.ccbook-page .post-header .post-title {
  display: none !important;
}

/* CCBook Page Mode - Different background color for post-header to distinguish from post-body */
.ccbook-page .post-header {
  background-color: rgba(76, 156, 232, 0.15) !important;
  padding: 0px !important;
  margin-bottom: 0 !important;
}

/* CCBook Chapter Pages Only - Add border and radius */
.ccbook-chapter-page .post-header {
  border-radius: 4px !important;
  border-left: 4px solid #4c9be8 !important;
}

/* CCBook Index Page - No border or radius (explicitly override) */
.ccbook-index-page .post-header {
  border-radius: 0 !important;
  border-left: none !important;
}

/* CCBook Page Mode - Optimized font sizes */
.ccbook-page h1 {
  font-size: 2em !important;
}

.ccbook-page h2 {
  font-size: 1.67em !important;
}

.ccbook-page h3 {
  font-size: 1.44em !important;
}

.ccbook-page h4 {
  font-size: 1.22em !important;
}

.ccbook-page h5 {
  font-size: 1.11em !important;
}

.ccbook-page h6 {
  font-size: 1em !important;
}

.ccbook-page p,
.ccbook-page li,
.ccbook-page td,
.ccbook-page th,
.ccbook-page div {
  font-size: 1em !important;
}

.ccbook-page code {
  font-size: 0.94em !important;
}

/* CCBook Page Mode - Compact spacing to match smaller font sizes */
.ccbook-page .ccbook-content-body h1 {
  margin-top: 15px !important;
  margin-bottom: 20px !important;
  padding-bottom: 10px !important;
}

.ccbook-page .ccbook-content-body h2 {
  margin-top: 25px !important;
  margin-bottom: 12px !important;
}

.ccbook-page .ccbook-content-body h3 {
  margin-top: 18px !important;
  margin-bottom: 10px !important;
}

.ccbook-page .ccbook-content-body h4 {
  margin-top: 15px !important;
  margin-bottom: 10px !important;
}

.ccbook-page .ccbook-content-body p {
  line-height: 1.7 !important;
  margin-bottom: 10px !important;
  padding-left: 10px !important;
}

/* Remove padding from paragraphs inside lists (they're already indented) */
.ccbook-page .ccbook-content-body li p {
  padding-left: 0 !important;
}

/* Remove padding from paragraphs inside divs with specific classes */
.ccbook-page .ccbook-content-body div[style] p {
  padding-left: 0 !important;
}

/* Keep padding for chapter-group paragraphs (index page) */
.ccbook-page .chapter-group p {
  padding-left: 10px !important;
}

.ccbook-page .ccbook-content-body ul,
.ccbook-page .ccbook-content-body ol {
  margin-left: 20px !important;
  margin-bottom: 12px !important;
  line-height: 1.7 !important;
}

.ccbook-page .ccbook-content-body li {
  margin-bottom: 6px !important;
}

.ccbook-page .ccbook-content-body table {
  margin: 15px 0 !important;
}

.ccbook-page .ccbook-content-body th,
.ccbook-page .ccbook-content-body td {
  padding: 8px !important;
}

.ccbook-page .ccbook-content-body pre {
  padding: 12px !important;
  margin: 12px 0 !important;
}

/* CCBook Page Mode - Center align standalone table containers (data tables) */
.ccbook-page .ccbook-content-body > div.table-container {
  display: block !important;
  text-align: center !important;
  margin: 15px auto !important;
}

.ccbook-page .ccbook-content-body > div.table-container table {
  display: inline-table !important;
  margin: 0 auto !important;
  width: auto !important;
}

/* CCBook Page Mode - Add padding-left to code blocks to align with text */
.ccbook-page .ccbook-content-body figure.highlight {
  padding-left: 10px !important;
  margin: 12px 0 !important;
  background-color: transparent !important;
  border: none !important;
  border-radius: 0 !important;
}

/* Override any nested background colors in code blocks */
.ccbook-page .ccbook-content-body figure.highlight > div,
.ccbook-page .ccbook-content-body figure.highlight .table-container {
  background-color: transparent !important;
  border: none !important;
  border-radius: 0 !important;
}

/* Remove borders and radius from gutter and code areas */
.ccbook-page .ccbook-content-body figure.highlight .gutter pre,
.ccbook-page .ccbook-content-body figure.highlight .code pre {
  border: none !important;
  border-radius: 0 !important;
}

/* CCBook Page Mode - Remove internal padding/margins inside code blocks to save space */
.ccbook-page .ccbook-content-body figure.highlight table {
  margin: 0 !important;
}

.ccbook-page .ccbook-content-body figure.highlight td {
  padding: 0 !important;
}

.ccbook-page .ccbook-content-body figure.highlight pre {
  margin: 0 !important;
  padding: 6px 8px !important;
}

.ccbook-page .ccbook-content-body figure.highlight .gutter {
  padding-right: 1px !important;
}

/* Remove the extra padding from .code column to eliminate gap */
.ccbook-page .ccbook-content-body figure.highlight .code {
  padding-left: 0 !important;
}

/* Chapter intro box - dark theme */
.chapter-intro {
  background: rgba(76, 156, 232, 0.1) !important;
  border-left: 4px solid #4c9be8 !important;
  padding: 1.5em;
  margin: 0;
  border-radius: 4px;
  color: #f0e6d2 !important;
}

/* CCBook content body - Add left padding to headings and their description paragraphs */
.ccbook-content-body h1,
.ccbook-content-body h2,
.ccbook-content-body h3,
.ccbook-content-body h4,
.ccbook-content-body h5,
.ccbook-content-body h6 {
  padding-left: 10px !important;
}

/* Make all chapter/section heading borders more visible (increase opacity without changing thickness) */
.ccbook-content-body h2 {
  border-bottom: 2px solid rgba(76, 156, 232, 0.8) !important;
}

.ccbook-content-body h3 {
  border-bottom: 2px solid rgba(91, 192, 222, 0.8) !important;
}

/* Remove redundant border from links inside h3 headings */
.ccbook-content-body h3 a {
  border-bottom: none !important;
  transition: color 0.2s ease;
}

/* Add hover effect to make links clearly clickable */
.ccbook-content-body h3 a:hover {
  color: #5bc0de !important;
  text-decoration: underline;
}

/* Add padding to paragraphs that immediately follow headings (description paragraphs) */
.ccbook-content-body h1 + p,
.ccbook-content-body h2 + p,
.ccbook-content-body h3 + p,
.ccbook-content-body h4 + p,
.ccbook-content-body h5 + p,
.ccbook-content-body h6 + p {
  padding-left: 10px !important;
}

/* ============================================================================
   Mermaid Diagram Styling
   ============================================================================ */

/* IMPORTANT: Don't hide plaintext blocks completely - Mermaid.js needs to find them!
   Instead, we'll hide just the gutter (line numbers) and style after conversion */

/* Hide line numbers for plaintext code blocks (both mermaid and ASCII art diagrams) */
figure.highlight.plaintext .gutter,
figure.highlight.plaintext td.gutter,
figure.highlight.plaintext .gutter pre,
figure.highlight.plaintext td.gutter pre,
figure.highlight.plaintext table tr td.gutter,
figure.highlight.plaintext > table > tbody > tr > td.gutter {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  max-width: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
}

/* Clean styling for plaintext blocks - matching mermaid diagram style */
figure.highlight.plaintext {
  border: none !important;
  background: rgba(32, 55, 76, 0.5) !important;  /* Enhanced background to match mermaid diagrams */
  margin: 2em 0 !important;
  padding: 1.5em !important;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;  /* Subtle shadow for depth */
}

/* Remove inner table borders and padding */
figure.highlight.plaintext table {
  border: none !important;
  margin: 0 !important;
  border-collapse: collapse !important;
  background: transparent !important;
}

figure.highlight.plaintext table tr {
  border: none !important;
  background: transparent !important;
}

figure.highlight.plaintext td.code,
figure.highlight.plaintext table tr td.code {
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  width: 100% !important;
  display: block !important;
}

figure.highlight.plaintext td.code pre {
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: none !important;
}

/* After Mermaid.js converts to SVG, it wraps in a div with class="mermaid" */
/* This is when we want clean styling - matching plaintext diagram style */
.mermaid {
  border: none !important;
  background: rgba(32, 55, 76, 0.5) !important;  /* Enhanced background matching plaintext diagrams */
  margin: 2em auto !important;
  padding: 1.5em !important;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;  /* Subtle shadow for depth */
  display: block;
  text-align: center;
}

/* Make mermaid SVG diagrams centered and responsive */
.mermaid svg {
  display: block !important;
  margin: 0 auto !important;
  max-width: 100% !important;
  height: auto !important;
}

/* Make SVG edges (borders and lines) much thinner */
.mermaid svg .node rect,
.mermaid svg .node circle,
.mermaid svg .node ellipse,
.mermaid svg .node polygon,
.mermaid svg .node path {
  stroke-width: 0.25px !important;
}

/* Make connecting lines much thinner */
.mermaid svg .edgePath path,
.mermaid svg .flowchart-link,
.mermaid svg path.path {
  stroke-width: 0.25px !important;
}

/* Make arrow markers thinner to match line thickness */
.mermaid svg marker path {
  stroke-width: 0.25px !important;
}

/* Sequence diagram participant boxes - make them much smaller */
.mermaid svg .actor rect.actor-top,
.mermaid svg .actor rect.actor-bottom {
  height: 27px !important;
  width: 50px !important;
  transform: translate(25px, 18px) !important;
}

/* Adjust actor lines to start from smaller boxes */
.mermaid svg .actor-line {
  transform: translateY(-20px) !important;
}

/* Keep text centered in smaller boxes */
.mermaid svg .actor text {
  font-size: 12px !important;
}

/* Additional styling for mermaid in ccbook content */
.ccbook-content-body .mermaid {
  margin: 2em 0 !important;
}

/* Legacy support - in case some blocks use .highlight.mermaid class */
figure.highlight.mermaid .gutter {
  display: none !important;
}

/* ============================================================================
   Code Block Styling - Remove Double Borders
   ============================================================================ */

/* Remove inner borders from all code blocks */
figure.highlight table {
  border: none !important;
  margin: 0 !important;
  border-collapse: collapse !important;
  width: 100% !important;
}

figure.highlight table tr {
  border: none !important;
}

/* Line numbers (gutter) - minimize width and padding */
figure.highlight td.gutter {
  border: none !important;
  padding-right: 0.5em !important;  /* Reduced from default */
  width: auto !important;
  min-width: 0 !important;
}

figure.highlight td.gutter pre {
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Code area - use full available width */
figure.highlight td.code {
  border: none !important;
  width: 100% !important;
  padding-left: 0.5em !important;  /* Small gap from line numbers */
}

figure.highlight td.code pre {
  border: none !important;
  margin: 0 !important;
}

/* Ensure only outer figure has border - distinct from page background */
figure.highlight {
  background-color: #0d1117 !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  border-left: 3px solid #4c9be8 !important;
  border-radius: 6px !important;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.4) !important;
}

.chapter-group {
  margin: 2em 0;
}

/* CCBook index page sections - Dark theme */
.book-features {
  background: rgba(76, 156, 232, 0.15) !important;
  border-left: 4px solid #4c9be8 !important;
  padding: 1.5em;
  border-radius: 8px;
  margin: 2em 0;
  color: #f0e6d2 !important;
}

.learning-paths {
  background: rgba(223, 105, 25, 0.15) !important;
  border-left: 4px solid #df6919 !important;
  padding: 1.5em;
  border-radius: 8px;
  margin: 2em 0;
  color: #f0e6d2 !important;
}

.usage-guide {
  background: rgba(92, 184, 92, 0.15) !important;
  border-left: 4px solid #5cb85c !important;
  padding: 1.5em;
  border-radius: 8px;
  margin: 2em 0;
  color: #f0e6d2 !important;
}

.appendix-section {
  background: rgba(78, 93, 108, 0.15) !important;
  border-left: 4px solid #4e5d6c !important;
  padding: 1.5em;
  border-radius: 8px;
  margin: 2em 0;
  color: #f0e6d2 !important;
}

.book-footer {
  background: rgba(32, 55, 76, 0.5) !important;
  border-top: 3px solid #4c9be8 !important;
  padding: 2em;
  border-radius: 8px;
  margin: 3em 0;
  text-align: center;
  color: #f0e6d2 !important;
}

.chapter-footer {
  background: rgba(32, 55, 76, 0.5) !important;
  padding: 1.5em;
  border-radius: 8px;
  margin: 3em 0 1em 0;
  border-top: 3px solid #4c9be8 !important;
  color: #f0e6d2 !important;
}

/* ============================================================================
   Table of Contents (TOC) - Compact Styling
   ============================================================================ */

/* Make TOC more compact by reducing gaps and text size */
.post-toc {
  font-size: 13px !important;  /* Reduced from default (usually 14px) */
  line-height: 1.4 !important;  /* Tighter line spacing */
}

.post-toc ol {
  margin: 0 !important;
  padding-left: 1em !important;  /* Reduced indent */
}

.post-toc li {
  margin: 0.3em 0 !important;  /* Reduced from default (~0.5em) */
  padding: 0 !important;
}

/* Nested list items - even more compact */
.post-toc ol ol {
  margin-top: 0.2em !important;
  margin-bottom: 0.2em !important;
  padding-left: 0.8em !important;  /* Slightly less indent for sub-items */
}

.post-toc ol ol li {
  margin: 0.2em 0 !important;  /* Even tighter for nested items */
  font-size: 12px !important;  /* Slightly smaller for sub-items */
}

/* TOC links - compact spacing */
.post-toc a {
  display: inline-block;
  padding: 0.1em 0 !important;  /* Minimal padding */
  line-height: 1.3 !important;
}

/* Active link styling */
.post-toc .active > a {
  font-weight: 600 !important;
  border-left-width: 2px !important;
}

/* Third level and deeper - most compact */
.post-toc ol ol ol {
  padding-left: 0.6em !important;
}

.post-toc ol ol ol li {
  margin: 0.15em 0 !important;
  font-size: 11px !important;
}

/* ============================================================================
   CCBook Chapter Navigation - Sticky at Bottom (Compact Version)
   ============================================================================ */

/* Main container - account for footer height */
.main-inner {
  position: relative;
  max-height: calc(100vh - 60px);  /* Subtract footer height (60px) */
  min-height: calc(100vh - 60px);  /* Subtract footer height (60px) */
  overflow: hidden;  /* Prevent overflow */
}

/* Adjust main content when crypto sidebar is present */
body:has(.post-crypto-sidebar) .main-inner {
  margin-right: 250px;  /* Width of crypto sidebar + gap */
}

@media (max-width: 1400px) {
  body:has(.post-crypto-sidebar) .main-inner {
    margin-right: 230px;  /* Adjusted for smaller sidebar */
  }
}

@media (max-width: 1200px) {
  body:has(.post-crypto-sidebar) .main-inner {
    margin-right: 0;  /* Remove margin when sidebar is hidden */
  }
}

/* CCBook main container - also account for footer height */
.ccbook-main-container {
  max-height: calc(100vh - 60px);  /* Subtract footer height (60px) */
  height: calc(100vh - 60px);  /* Fixed height */
  overflow: hidden;  /* Prevent overflow */
}

/* Content area with scrollable body and fixed navigation */
.ccbook-content-area {
  display: flex;
  flex-direction: column;
  max-height: 100%;  /* Take full height of parent */
  height: 100%;  /* Take full height of parent */
  overflow: hidden;
}

/* Scrollable content body */
.ccbook-content-body {
  flex: 1;
  overflow-y: auto;
  padding-bottom: 2em;
}

/* Chapter navigation container - hidden for now */
.ccbook-chapter-nav-bottom {
  display: none;
}

/* Navigation buttons container */
.chapter-nav-buttons {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 100%;
  margin: 0;
  padding: 0;
  gap: 1.5em;
  height: 100%;
}

/* Navigation button styles - single line compact */
.prev-chapter-btn,
.next-chapter-btn {
  display: flex;
  align-items: center;
  gap: 0.6em;
  padding: 0;
  margin: 0;
  background: transparent;
  border: none;
  border-radius: 0;
  color: #f0e6d2;
  text-decoration: none;
  transition: all 0.3s ease;
  flex: 1;
  max-width: 45%;
  font-size: 13px;
}

.prev-chapter-btn:hover,
.next-chapter-btn:hover {
  background: rgba(76, 156, 232, 0.1);
  border: none;
  transform: none;
  box-shadow: none;
}

/* Hide the nav-label (上一章/下一章) */
.nav-label {
  display: none;
}

/* Show only chapter title in single line */
.nav-title {
  font-size: 13px;
  color: #f0e6d2;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Spacer for when prev/next doesn't exist */
.nav-spacer {
  flex: 1;
  max-width: 45%;
}

/* Icon styling - compact */
.prev-chapter-btn i,
.next-chapter-btn i {
  font-size: 12px;
  color: #4c9be8;
  flex-shrink: 0;
}

/* Responsive adjustments */
@media (max-width: 1200px) {
  .ccbook-chapter-nav-bottom {
    padding: 0.5em 1em;
  }

  .chapter-nav-buttons {
    gap: 1em;
  }

  .prev-chapter-btn,
  .next-chapter-btn {
    padding: 0.5em 0.8em;
    font-size: 12px;
  }

  .nav-title {
    font-size: 12px;
  }
}

@media (max-width: 768px) {
  .chapter-nav-buttons {
    flex-direction: column;
    gap: 0.5em;
  }

  .prev-chapter-btn,
  .next-chapter-btn,
  .nav-spacer {
    max-width: 100%;
    width: 100%;
  }
}

/* ============================================================================
   Crypto Widgets - News & Price Ticker (Right Sidebar for Posts)
   ============================================================================ */

/* Widget Title Styling */
.widget-title {
  font-size: 13px;  /* Reduced for narrower sidebar */
  font-weight: 600;
  color: #4c9be8;
  margin: 0;  /* Remove default h3 margin */
  margin-bottom: 0.8em;
  padding-top: 0.5em;  /* Small top padding */
  padding-bottom: 0.4em;
  border-bottom: 2px solid rgba(76, 156, 232, 0.3);
  display: flex;
  align-items: center;
  gap: 0.4em;
}

.widget-title i {
  font-size: 14px;  /* Reduced */
}

/* ============================================================================
   Crypto News Widget
   ============================================================================ */

.crypto-news-widget {
  background: transparent;  /* Remove background, use container background */
  padding: 0;  /* Remove padding */
  border-radius: 0;
  border: none;
}

.news-list {
  display: flex;
  flex-direction: column;
  gap: 0.6em;  /* Reduced gap */
}

.news-item {
  padding: 0.6em;  /* Reduced padding */
  background: rgba(18, 31, 43, 0.5);
  border-radius: 4px;
  border-left: 3px solid #4c9be8;
  transition: all 0.3s ease;
}

.news-item:hover {
  background: rgba(76, 156, 232, 0.1);
  transform: translateX(3px);
}

.news-item a {
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  gap: 0.3em;
}

.news-title {
  font-size: 11px;  /* Reduced */
  color: #f0e6d2;
  font-weight: 500;
  line-height: 1.4;
}

.news-source {
  font-size: 9px;  /* Reduced */
  color: #4c9be8;
  font-style: italic;
}

/* ============================================================================
   Crypto Price Widget
   ============================================================================ */

.crypto-price-widget {
  background: transparent;  /* Remove background, use container background */
  padding: 0;  /* Remove padding */
  border-radius: 0;
  border: none;
}

.price-list {
  display: flex;
  flex-direction: column;
  gap: 0.5em;  /* Reduced gap */
}

.price-item {
  padding: 0.5em;  /* Reduced padding */
  background: rgba(18, 31, 43, 0.5);
  border-radius: 4px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-left: 3px solid #4c9be8;
}

.price-item.loading {
  justify-content: center;
  border-left-color: rgba(76, 156, 232, 0.3);
}

.loading-text {
  color: #4c9be8;
  font-size: 12px;
  font-style: italic;
}

.crypto-name {
  font-size: 13px;
  font-weight: 600;
  color: #4c9be8;
}

.crypto-data {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.2em;
}

.crypto-price {
  font-size: 12px;
  color: #f0e6d2;
  font-weight: 500;
}

.crypto-change {
  font-size: 10px;
  font-weight: 600;
  padding: 0.2em 0.4em;
  border-radius: 3px;
}

.crypto-change.positive {
  color: #5cb85c;
  background: rgba(92, 184, 92, 0.1);
}

.crypto-change.negative {
  color: #d9534f;
  background: rgba(217, 83, 79, 0.1);
}

.price-item.error {
  justify-content: center;
  color: #d9534f;
  font-size: 12px;
  border-left-color: #d9534f;
}

/* ============================================================================
   Post Crypto Sidebar - Right Column Layout
   ============================================================================ */

.post-crypto-sidebar {
  position: fixed;
  right: 0;
  top: 40px;  /* Below header */
  width: 230px;  /* Reduced width to prevent overlap */
  height: calc(100vh - 50px);  /* Full height minus top offset */
  overflow-y: auto;
  background: transparent;  /* Transparent - background on container instead */
  /* border-top: 2px solid rgba(76, 156, 232, 0.5);  Separator between lang switcher and crypto sidebar */
  border-left: 2px solid rgba(76, 156, 232, 0.5);  /* Vertical separator line */
  z-index: 50;
  padding: 0;
  margin: 0;
  margin-right: 10px;
  margin-top: 10px;
  padding-top: 10px;  /* Space after top border */
  padding-left: 10px;  /* Space between separator and content */

  display: flex;
  flex-direction: column;
  gap: 1.5em;  /* Gap between widgets (news and price) */
}

/* Responsive adjustments */
@media (max-width: 1400px) {
  .post-crypto-sidebar {
    width: 220px;  /* Reduced width */
  }
}

@media (max-width: 1200px) {
  .post-crypto-sidebar {
    display: none;  /* Hide on smaller screens */
  }
}

/* ============================================================================
   Scrollbar Styling - Make scrollbars narrower and more subtle
   ============================================================================ */

/* Post mode - Make main content scrollbar narrower */
.main:not(.ccbook-three-column) .main-inner::-webkit-scrollbar {
  width: 1px !important;
}

.main:not(.ccbook-three-column) .main-inner::-webkit-scrollbar-track {
  background: transparent !important;
}

.main:not(.ccbook-three-column) .main-inner::-webkit-scrollbar-thumb {
  background: #FB923C !important;
  border-radius: 0px !important;
}

.main:not(.ccbook-three-column) .main-inner::-webkit-scrollbar-thumb:hover {
  background: #F59E0B !important;
}

/* CCBook page mode - Make main content scrollbar narrower with blue color to match header */
.main.ccbook-three-column .main-inner::-webkit-scrollbar {
  width: 1px !important;
}

.main.ccbook-three-column .main-inner::-webkit-scrollbar-track {
  background: rgba(76, 156, 232, 0.1) !important;
}

.main.ccbook-three-column .main-inner::-webkit-scrollbar-thumb {
  background: rgba(76, 156, 232, 0.6) !important;
  border-radius: 0px !important;
}

.main.ccbook-three-column .main-inner::-webkit-scrollbar-thumb:hover {
  background: rgba(76, 156, 232, 0.9) !important;
}

/* Firefox scrollbar - make thinner */
.main-inner {
  scrollbar-width: thin !important;
  scrollbar-color: #FB923C transparent !important;
}

/* ============================================================================
   Sidebar Spacing and Separator Improvements
   ============================================================================ */

/* Remove gap between sidebar and main content, add border separator instead */
.main.ccbook-three-column {
  grid-template-columns: minmax(240px, 240px) 1fr minmax(280px, 280px) !important;
}

/* Add right border to left sidebar as separator */
.main.ccbook-three-column .column {
  border-right: 2px solid rgba(76, 156, 232, 0.3) !important;
}

/* Add bottom border to site-brand-container for distinction */
.site-brand-container {
  border-bottom: 2px solid rgba(76, 156, 232, 0.3) !important;
}

/* Remove margin-top from sidebar-inner and add border-top as separator */
.sidebar-inner {
  margin-top: 0 !important;
  border-top: 2px solid rgba(76, 156, 232, 0.3) !important;
  padding-top: 12px !important;
}

/* ============================================================================
   Mobile Responsive - Sidebar Control Based on Orientation
   ============================================================================ */

/* Portrait mode on mobile: Hide sidebar, expand main content to full width */
@media (max-width: 991px) and (orientation: portrait) {
  /* Hide sidebar completely */
  .sidebar {
    display: none !important;
  }

  /* Hide sidebar toggle button */
  .sidebar-toggle {
    display: none !important;
  }

  /* Hide the entire .column (contains header + sidebar) to prevent space allocation
     The header functionality in mobile is handled by NexT's mobile header */
  .column {
    display: none !important;
  }

  /* Force .main to use block layout and full width */
  .main {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* .main-inner should take full width without any offset */
  .main-inner {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    /* padding: 10px 15px !important;  Normal padding, no extra top space needed */
    padding: 0px !important;  /* Normal padding, no extra top space needed */
    box-sizing: border-box !important;
  }

  /* Force post content to start from left edge */
  .post-block,
  .posts-expand {
    margin-left: 0 !important;
    padding-left: 0 !important;
  }

  /* Reset any padding on body */
  body {
    padding-left: 0 !important;
  }

  /* CCBook specific - hide the right sidebar (contains language switcher and TOC) */
  .ccbook-sidebar-right {
    display: none !important;
  }

  /* CCBook main container - adjust for mobile */
  .ccbook-main-container {
    display: block !important;
    width: 100% !important;
  }

  /* CCBook content area - full width on mobile */
  .ccbook-content-area {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* Landscape mode on mobile: Keep sidebar visible for navigation */
@media (max-width: 991px) and (orientation: landscape) {
  /* Allow sidebar to be toggled - use NexT's default behavior */
}