custom.css

/* Raffel Docs Custom Styles */

/* Cover page */
section.cover {
  background: linear-gradient(135deg, #1e1b4b 0%, #0f0a1e 100%) !important;
}

section.cover.show {
  background: linear-gradient(135deg, #1e1b4b 0%, #0f0a1e 100%) !important;
}

/* Cover page code block */
section.cover pre {
  text-align: left !important;
  background: rgba(0, 0, 0, 0.3) !important;
  border-radius: 8px !important;
  padding: 1rem !important;
  margin: 1.5rem auto !important;
  max-width: 500px !important;
}

/* Fix sidebar toggle (hamburger menu) position */
.sidebar-toggle {
  position: fixed !important;
  top: 1rem !important;
  left: 1rem !important;
  bottom: auto !important;
  width: 40px !important;
  height: 40px !important;
  z-index: 999 !important;
}

/* Desktop: the sidebar is always visible, so the hamburger (☰) only overlaps
   the "Search docs" input. Hide it while the sidebar is open; it reappears
   when the sidebar is collapsed (body.close) so it can be reopened. */
@media screen and (min-width: 769px) {
  body:not(.close) .sidebar-toggle {
    display: none !important;
  }
}

/* Mobile: when the menu is open, the cover page must not overlap the sidebar.
   The cover (section.cover.show) renders full-viewport on top of the fixed
   sidebar, making the menu unreadable/unclickable. Hide it while the menu is
   open and keep the sidebar above everything. */
@media screen and (max-width: 768px) {
  body.close section.cover {
    display: none !important;
  }
  body.close .sidebar {
    z-index: 100 !important;
  }
}

/* Scroll conflict fix (desktop): before the sidebar becomes sticky it still
   has a fixed height + overflow-y:auto, so scrolling over it captures the
   wheel and the page stays put while moving from the cover into the docs.
   While not sticky, let the sidebar grow with its content so the whole page
   scrolls as one. Once sticky (fixed), it regains its own independent scroll. */
@media screen and (min-width: 769px) {
  body:not(.sticky) .sidebar {
    height: auto !important;
    overflow-y: visible !important;
  }
}
.sidebar {
  overscroll-behavior: contain;
}

/* GitHub corner: the octocat link is external, so the global
   a[target="_blank"]::after arrow (" ↗") leaks outside the triangle.
   Suppress it — the octocat already signals it's a GitHub link — and pin
   the corner flush to the top-right. */
.github-corner {
  top: 0 !important;
  right: 0 !important;
}
.github-corner::after {
  content: none !important;
}

/* Dark/Light theme toggle: it sat on top of the "words | min" reading-count
   span (float:right at the top of the content). Move it to a free spot — to
   the left of the GitHub corner and above the count. left:auto is required
   because the plugin sets left:10px on mobile, which would otherwise win over
   right and pin the toggle onto the hamburger (☰). */
#docsify-darklight-theme {
  position: fixed !important;
  top: 14px !important;
  left: auto !important;
  z-index: 2 !important;
}
@media screen and (min-width: 769px) {
  #docsify-darklight-theme {
    right: 100px !important;
  }
}
@media screen and (max-width: 768px) {
  /* On mobile the top-right holds the GitHub corner and the content's
     reading-count sits high and wide. Park the toggle next to the hamburger
     (☰) in the top-left instead, where there's free space. */
  #docsify-darklight-theme {
    left: 64px !important;
    right: auto !important;
    top: 16px !important;
  }
}

/* Hide reading time that may leak */
.markdown-section .reading-time,
.content .reading-time {
  display: none !important;
}

/* Hide app nav */
body.ready .app-nav {
  display: none !important;
}

/* Card grid for landing page */
.grid-3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  margin: 2rem 0;
}

.card {
  display: block;
  padding: 1.5rem;
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.1) 0%, rgba(139, 92, 246, 0.05) 100%);
  border: 1px solid rgba(139, 92, 246, 0.2);
  text-decoration: none;
  color: inherit;
  transition: transform 0.2s, box-shadow 0.2s;
}

.card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(139, 92, 246, 0.2);
  text-decoration: none;
}

.card h4 {
  margin: 0 0 0.5rem 0;
  color: var(--theme-color, #8b5cf6);
}

.card p {
  margin: 0;
  font-size: 0.9rem;
  opacity: 0.8;
}

/* Sidebar category labels */
.sidebar-nav li small {
  font-size: 0.7rem;
  opacity: 0.6;
  margin-left: 0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Code blocks */
.markdown-section pre {
  border-radius: 6px;
  padding: 1rem;
}

.markdown-section code {
  font-family: 'JetBrains Mono', 'SF Mono', monospace;
  font-size: 0.9em;
}

/* Tables */
.markdown-section table {
  border-collapse: collapse;
  width: 100%;
}

.markdown-section table th {
  background: rgba(139, 92, 246, 0.1);
  font-weight: 600;
}

.markdown-section table th,
.markdown-section table td {
  padding: 0.75rem 1rem;
  border: 1px solid rgba(139, 92, 246, 0.15);
}

/* Dark mode table */
body.dark .markdown-section table th {
  background: rgba(255, 255, 255, 0.05);
}

body.dark .markdown-section table th,
body.dark .markdown-section table td {
  border-color: rgba(255, 255, 255, 0.1);
}

/* Inline code in tables */
.markdown-section td code {
  white-space: nowrap;
  background: rgba(139, 92, 246, 0.1);
  padding: 0.1rem 0.4rem;
  border-radius: 3px;
  font-size: 0.85em;
}

/* Blockquotes as callouts */
.markdown-section blockquote {
  border-left: 4px solid var(--theme-color, #8b5cf6);
  background: rgba(139, 92, 246, 0.05);
  padding: 1rem 1.5rem;
  margin: 1.5rem 0;
  border-radius: 0 6px 6px 0;
}