/* =========================================
   WRITEUPS — CUSTOM STYLING
   Jekyll Chirpy 7.6
   ========================================= */


/* =========================================
   1. SIDEBAR
   ========================================= */

#sidebar {
  background: #101827 !important;
  border-right: 1px solid #26364d;
}

#sidebar .site-title {
  color: #f1f5f9 !important;
}

#sidebar .site-subtitle {
  color: #94a3b8;
}

#sidebar #avatar {
  border: 2px solid #3b82f6;
}


/* =========================================
   2. SIDEBAR NAVIGATION
   ========================================= */

#sidebar .nav-link:hover {
  color: #93c5fd;
}

#sidebar .nav-item.active .nav-link {
  color: #60a5fa;
}


/* =========================================
   3. HOMEPAGE ARTICLE CARDS
   ========================================= */

#post-list .card {
  border: 1px solid #293548;
  border-radius: 12px;

  transition:
    border-color 0.2s ease,
    transform 0.2s ease;
}

#post-list .card:hover {
  border-color: #3b82f6;
  transform: translateY(-3px);
}


/* =========================================
   4. MARKDOWN HEADINGS
   ========================================= */

/* H1 — Major sections */
.content h1 {
  color: #38bdf8;
  font-size: 1.8rem;
  font-weight: 700;

  border-left: 4px solid #38bdf8;
  padding-left: 14px;

  margin-top: 2.5rem;
  margin-bottom: 1.2rem;
}

/* H2 — Subsections */
.content h2 {
  color: #93c5fd;
  font-size: 1.45rem;
  font-weight: 650;

  border-left: 3px solid #60a5fa;
  padding-left: 12px;

  margin-top: 2rem;
  margin-bottom: 1rem;
}

/* H3 — Smaller sections */
.content h3 {
  color: #a5b4fc;
  font-size: 1.2rem;
  font-weight: 600;

  margin-top: 1.6rem;
  margin-bottom: 0.8rem;
}


/* =========================================
   5. INLINE CODE
   ========================================= */

/*
   Only style inline commands within paragraphs
   and list items.

   Do not style fenced code blocks.
*/

.content p > code,
.content li > code {
  color: #93c5fd;
  background-color: rgba(59, 130, 246, 0.10);

  padding: 0.15em 0.4em;
  border-radius: 4px;
}


/* =========================================
   6. FENCED CODE BLOCKS
   ========================================= */

/*
   Use Chirpy's original code-block styling.

   No custom rules for:
   - .highlight
   - pre
   - .rouge-code
   - .rouge-gutter
   - .code-header

   This preserves native terminal styling,
   syntax highlighting, spacing and copy buttons.
*/


/* =========================================
   7. SCREENSHOTS
   ========================================= */

.content img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
}

/* Obsidian's explicit alignment hints only; ordinary embeds keep normal flow. */
.content img.obsidian-image-left,
.content img.obsidian-image-right {
  display: block;
  float: none;
  max-width: min(100%, 28rem);
  height: auto;
  margin-top: 0.75rem;
  margin-bottom: 1rem;
}

.content img.obsidian-image-left {
  margin-left: 0;
  margin-right: auto;
}

.content img.obsidian-image-right {
  margin-left: auto;
  margin-right: 0;
}

/* Keep Chirpy highlighting and copy controls while making long lines scroll. */
.content .highlighter-rouge,
.content .highlight {
  max-width: 100%;
}

.content .highlight {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}

.content .highlight pre {
  white-space: pre;
  overflow-wrap: normal;
}

@media (max-width: 768px) {
  .content img.obsidian-image-left,
  .content img.obsidian-image-right {
    display: block;
    max-width: 100%;
    margin-top: 0.5rem;
    margin-bottom: 1rem;
  }
}


/* =========================================
   8. ACCESSIBILITY
   ========================================= */

@media (prefers-reduced-motion: reduce) {
  #post-list .card {
    transition: none;
  }

  #post-list .card:hover {
    transform: none;
  }
}


/* =========================================
   MARKDOWN TEXT EMPHASIS
   ========================================= */

/* Bold text — Lavender */
.content strong,
.content b {
  color: #c4b5fd;
  font-weight: 700;
}

/* Italic text — Light yellow */
.content em,
.content i:not([class]) {
  color: #fde68a;
}

/* Bold + Italic combined */
.content strong em,
.content em strong {
  color: #ddd6fe;
  font-weight: 700;
  font-style: italic;
}

/* ==========================================
   WRITEUPS — MAIN ARTICLE TITLE
   ========================================== */

article.px-1 > header > h1[data-toc-skip] {
  color: #38bdf8 !important;
  font-weight: 700 !important;
}

/* ==========================================
   WRITEUPS — DESKTOP SCALING (110%)
   ========================================== */

@media (min-width: 1200px) {
  body {
    zoom: 1.10;
  }
}

/* ==========================================
   WRITEUPS — SIDEBAR ALIGNMENT
   ========================================== */

@media (min-width: 1200px) {

  /* Shift profile avatar, title, and subtitle */
  #sidebar .profile-wrapper {
    transform: translateX(-12px);
  }

  /* Shift navigation menu */
  #sidebar .nav {
    transform: translateX(-12px);
  }
}