/* DevPilot Blog Custom Overrides — loaded AFTER theme CSS */

/* ============================================================
   SIDEBAR — fix subtitle text wrapping + overflow
   ============================================================ */

#sidebar .site-subtitle {
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: unset !important;
  -webkit-line-clamp: unset !important;
  display: block !important;
  max-height: none !important;
  font-size: 0.85rem !important;
  line-height: 1.5 !important;
  padding: 0 0.5rem !important;
}

#sidebar .profile-wrapper {
  overflow: visible !important;
}

/* ============================================================
   FENCED CODE BLOCKS — dark background, clean rounded corners
   Only targets blocks with code-header (fenced blocks)
   ============================================================ */

.highlighter-rouge:has(.code-header) {
  background-color: #0d1117 !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
}

.code-header {
  background-color: #010409 !important;
  border-radius: 0 !important;
}

div.highlight {
  background-color: #0d1117 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

div.highlight pre {
  background-color: #0d1117 !important;
  border-radius: 0 !important;
  border: none !important;
}

div.highlight pre code {
  background-color: transparent !important;
  border: none !important;
}

/* ============================================================
   INLINE CODE — subtle, light, does NOT break text flow
   Targets <code> inside paragraphs, list items, headings
   ============================================================ */

.post-content code:not([class*="language-"]),
.post-content p > code,
.post-content li > code,
.post-content td > code,
.post-content a > code,
.post-content blockquote code {
  background-color: rgba(65, 105, 225, 0.08) !important;
  color: #4169E1 !important;
  border: 1px solid rgba(65, 105, 225, 0.15) !important;
  border-radius: 4px !important;
  padding: 2px 6px !important;
  font-size: 0.88em !important;
  font-weight: 500 !important;
  display: inline !important;
  box-shadow: none !important;
  white-space: normal !important;
  word-break: break-word !important;
}

/* Inline code that Chirpy wraps in .highlighter-rouge WITHOUT code-header */
.highlighter-rouge:not(:has(.code-header)) {
  background-color: rgba(65, 105, 225, 0.08) !important;
  color: #4169E1 !important;
  border: 1px solid rgba(65, 105, 225, 0.15) !important;
  border-radius: 4px !important;
  padding: 2px 6px !important;
  font-size: 0.88em !important;
  font-weight: 500 !important;
  display: inline !important;
  box-shadow: none !important;
}

.highlighter-rouge:not(:has(.code-header)) code {
  background-color: transparent !important;
  color: inherit !important;
  border: none !important;
  padding: 0 !important;
  font-size: inherit !important;
}

/* ============================================================
   Right sidebar collapse — expand content to fill space
   ============================================================ */

body.toc-hidden #panel-wrapper {
  display: none !important;
}

body.toc-hidden #tail-wrapper {
  max-width: 100% !important;
  flex: 0 0 100% !important;
}

body.toc-hidden #main-wrapper > .container {
  max-width: 100% !important;
  padding-right: 2rem !important;
}

/* On XL screens, also push the content wider */
@media (min-width: 1200px) {
  body.toc-hidden #main-wrapper {
    width: calc(100vw - 260px) !important; /* viewport minus left sidebar */
  }
}