/* ============================================================
   mynkv.ca docs — custom Docsify theme override
   Light mode only. Warm, luxurious, typeset-book feel.
   Fonts: General Sans + Satoshi + Geist Mono
   Drop this AFTER the base Docsify theme CSS.
   ============================================================ */

/* --- Fonts ------------------------------------------------- */
@import url('https://api.fontshare.com/v2/css?f[]=satoshi@400,500,600,700&display=swap');
@import url('https://api.fontshare.com/v2/css?f[]=general-sans@500,600,700&display=swap');
@import url('https://cdn.jsdelivr.net/npm/geist@1/dist/fonts/geist-mono/style.css');

/* --- Color Palette -----------------------------------------
   Background:   #FDFCFA  (warm parchment white)
   Surface:      #F6F4F0  (sidebar, code blocks)
   Text:         #171412  (warm near-black)
   Text muted:   #71665C  (secondary, captions)
   Accent:       #7A5232  (burnt sienna — warm, confident)
   Accent hover: #634226  (darkened accent)
   Border:       #E6E0D8  (warm gray)
   Code bg:      #F0ECE6  (slightly warmer than surface)
   Code text:    #352C22  (warm dark brown)
   ----------------------------------------------------------- */

/* --- Docsify CSS Variable Overrides ------------------------ */
:root {
  --base-font-size:          16px;
  --base-font-family:        'Satoshi', -apple-system, sans-serif;
  --base-line-height:        1.7;
  --base-color:              #171412;
  --base-background-color:   #FDFCFA;

  --sidebar-width:           360px;
  --sidebar-background:      #F6F4F0;
  --sidebar-nav-link-color:  #171412;
  --sidebar-nav-link-color--active: #7A5232;
  --sidebar-nav-link-color--hover:  #7A5232;
  --sidebar-nav-pagelink-padding: 0.3em 0 0.3em 20px;
  --sidebar-border-color:    #E6E0D8;
  --sidebar-toggle-background: #F6F4F0;

  --link-color:              #7A5232;
  --link-color--hover:       #634226;
  --link-text-decoration:    none;
  --link-text-decoration--hover: underline;

  --heading-color:           #171412;
  --heading-font-weight:     600;

  --blockquote-border-color: #7A5232;

  --table-head-background:   #F6F4F0;

  --theme-color:             #7A5232;

  --cover-background-color:  #FDFCFA;

  --notice-tip-border-color: #7A5232;

  --search-background:       #F6F4F0;
  --search-result-keyword-color: #7A5232;
}

/* --- Base -------------------------------------------------- */
body {
  font-family: var(--base-font-family);
  color: var(--base-color);
  background: var(--base-background-color);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* --- Typography -------------------------------------------- */
.markdown-section h1,
.markdown-section h2,
.markdown-section h3,
.markdown-section h4,
.markdown-section h5,
.markdown-section h6 {
  font-family: 'General Sans', 'Satoshi', sans-serif;
  color: var(--heading-color);
  margin-top: 2.5em;
  margin-bottom: 0.6em;
}

.markdown-section h1 {
  font-size: 2.4rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  padding-bottom: 0.4em;
  border-bottom: 2px solid #E6E0D8;
}

.markdown-section h2 {
  font-size: 1.7rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  padding-bottom: 0.3em;
  border-bottom: 1px solid #E6E0D8;
}

.markdown-section h3 {
  font-size: 1.3rem;
  font-weight: 600;
}

.markdown-section h4 {
  font-family: 'Satoshi', sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #71665C;
}

.markdown-section p {
  margin: 1.2em 0;
  line-height: 1.75;
}

/* --- Content area spacing ---------------------------------- */
.markdown-section {
  max-width: 820px;
  padding: 2.5rem 3rem 4rem;
  margin: 0 auto;
}

/* --- Links ------------------------------------------------- */
.markdown-section a {
  color: var(--link-color);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease, color 0.2s ease;
}

.markdown-section a:hover {
  color: var(--link-color--hover);
  border-bottom-color: var(--link-color--hover);
}

/* --- Inline code ------------------------------------------- */
.markdown-section code:not([class*="lang-"]):not([class*="language-"]) {
  font-family: 'Geist Mono', 'SF Mono', monospace;
  font-size: 0.875em;
  background: rgba(122, 82, 50, 0.08);
  color: #7A5232;
  padding: 0.15em 0.4em;
  border-radius: 4px;
  font-weight: 500;
  border: none;
}

/* --- Code blocks ------------------------------------------- */
.markdown-section pre {
  background: #F0ECE6;
  border: 1px solid #E6E0D8;
  border-radius: 8px;
  padding: 1.25em 1.5em;
  margin: 1.8em 0;
  overflow-x: auto;
  position: relative;
}

.markdown-section pre code {
  font-family: 'Geist Mono', 'SF Mono', monospace;
  font-size: 0.85em;
  line-height: 1.65;
  color: #352C22;
  background: none;
  padding: 0;
  border: none;
  font-weight: 600;
}

/* Subtle language label on code blocks */
.markdown-section pre::after {
  content: attr(data-lang);
  position: absolute;
  top: 8px;
  right: 12px;
  font-family: 'Satoshi', sans-serif;
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #71665C;
  opacity: 0.5;
}

/* --- Tables ------------------------------------------------ */
.markdown-section table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.8em 0;
  font-size: 0.92em;
}

.markdown-section table th {
  font-family: 'Satoshi', sans-serif;
  font-weight: 700;
  font-size: 0.8em;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #71665C;
  background: #F6F4F0;
  padding: 0.8em 1em;
  text-align: left;
  border-bottom: 2px solid #E6E0D8;
}

.markdown-section table td {
  padding: 0.75em 1em;
  border-bottom: 1px solid #E6E0D8;
  vertical-align: top;
}

.markdown-section table tr:last-child td {
  border-bottom: none;
}

.markdown-section table tr:hover td {
  background: rgba(122, 82, 50, 0.03);
}

/* --- Blockquotes ------------------------------------------- */
.markdown-section blockquote {
  border-left: 3px solid #7A5232;
  background: rgba(122, 82, 50, 0.04);
  padding: 1em 1.5em;
  margin: 1.8em 0;
  border-radius: 0 6px 6px 0;
  color: #71665C;
  font-style: italic;
}

.markdown-section blockquote p {
  margin: 0.4em 0;
}

/* --- Horizontal rules -------------------------------------- */
.markdown-section hr {
  border: none;
  border-top: 1px solid #E6E0D8;
  margin: 3em 0;
}

/* --- Sidebar ----------------------------------------------- */
.sidebar {
  background: var(--sidebar-background);
  border-right: 1px solid #E6E0D8;
  padding-top: 1.5rem;
  overflow-x: hidden;
}

.sidebar ul {
  white-space: normal;
  word-wrap: break-word;
}

.sidebar ul li a {
  font-family: 'Satoshi', sans-serif;
  font-size: 0.9em;
  font-weight: 500;
  color: #71665C;
  padding: 0.35em 0;
  transition: color 0.15s ease;
  white-space: normal;
  word-wrap: break-word;
}

.sidebar ul li a:hover,
.sidebar ul li.active > a {
  color: #7A5232;
  font-weight: 600;
}

.sidebar .sidebar-nav > ul > li > a {
  font-family: 'Satoshi', sans-serif;
  font-weight: 700;
  font-size: 0.8em;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #171412;
  margin-top: 1.2em;
}

/* App name / brand in sidebar */
.app-name-link {
  font-family: 'General Sans', 'Satoshi', sans-serif;
  font-weight: 600;
  font-size: 1.3em;
  color: #171412 !important;
  letter-spacing: -0.01em;
}

/* --- Search ------------------------------------------------ */
.search input {
  font-family: 'Satoshi', sans-serif;
  background: #FDFCFA;
  border: 1px solid #E6E0D8;
  border-radius: 6px;
  padding: 0.6em 1em;
  font-size: 0.9em;
  transition: border-color 0.2s ease;
}

.search input:focus {
  border-color: #7A5232;
  outline: none;
  box-shadow: 0 0 0 3px rgba(122, 82, 50, 0.1);
}

.search .matching-post {
  border-bottom: 1px solid #E6E0D8;
}

/* --- Lists ------------------------------------------------- */
.markdown-section ul,
.markdown-section ol {
  padding-left: 1.5em;
  margin: 1em 0;
}

.markdown-section li {
  margin: 0.4em 0;
  line-height: 1.7;
}

/* --- Docsify tip/warn/attention callouts ------------------- */
.markdown-section p.tip,
.markdown-section p.warn {
  border-radius: 6px;
  padding: 1em 1.25em;
  font-size: 0.92em;
}

.markdown-section p.tip {
  background: rgba(122, 82, 50, 0.06);
  border-left: 3px solid #7A5232;
}

/* --- Scrollbar (subtle) ------------------------------------ */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: #CEC8BF;
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: #ADA598;
}

/* --- Selection --------------------------------------------- */
::selection {
  background: rgba(122, 82, 50, 0.15);
  color: #171412;
}

/* --- Print ------------------------------------------------- */
@media print {
  .sidebar,
  .sidebar-toggle {
    display: none;
  }
  .markdown-section {
    max-width: 100%;
    padding: 0;
  }
}

/* --- Mobile ------------------------------------------------ */
@media (max-width: 768px) {
  .markdown-section {
    padding: 1.5rem 1.25rem 3rem;
  }
  .markdown-section h1 {
    font-size: 1.75rem;
  }
}