/* Custom Typography Styling */

/* Medium-style typography - fully theme-aware */
.prose {
    /* Wide enough for code, narrow enough for reading */
    /* Adjust between 720px and 900px */
    max-width: 900px;
    
    /* Clean sans-serif that works for both */
    font-family: 'Open Sans', system-ui, sans-serif;
    
    /* Balanced line-height */
    /* Adjust this between 1.0 to 2.0. Default at 1.7 */
    line-height: 1.7;
    
    /* Readable size */
    /* Adjust this between 1 - 1.5 rem. Default at 1.125 rem*/
    font-size: 1.125rem; /* 18px */

    color: oklch(var(--bc)); /* DaisyUI theme-aware text */
}

.prose {
    font-family: 'Open Sans', Georgia, serif;
}

.prose :is(h1, h2, h3, h4, h5, h6) {
    font-family: 'Open Sans', system-ui, sans-serif;
}

/* Remove ALL heading decorations */
.prose :is(h1, h2, h3, h4, h5, h6) {
    border: none !important;
    border-bottom: none !important;
    border-top: none !important;
    text-decoration: none !important;
    padding-bottom: 0 !important;
    background: none !important;
    color: oklch(var(--bc)) !important;
}

/* Remove underlines from anchor links inside headings */
.prose :is(h1, h2, h3, h4, h5, h6) a {
    text-decoration: none !important;
    border: none !important;
    border-bottom: none !important;
    color: inherit !important;
}

/* Heading sizes */
.prose h1 {
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1.2;
    margin-top: 2rem;
    margin-bottom: 1rem;
}

.prose h2 {
    font-size: 2rem;
    font-weight: 600;
    line-height: 1.3;
    margin-top: 1.75rem;
    margin-bottom: 0.75rem;
}

.prose h3 {
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.4;
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
}

/* Paragraphs */
.prose p {
    margin-top: 1.25rem;
    margin-bottom: 1.25rem;
    color: oklch(var(--bc));
}

/* Links - theme-aware */
.prose a {
    color: oklch(var(--p));
    text-decoration: underline;
}

.prose a:hover {
    color: oklch(var(--pf));
}

/* Lists */
.prose ul, .prose ol {
    margin-top: 1rem;
    margin-bottom: 1rem;
    padding-left: 1.5rem;
}

.prose li {
    margin-bottom: 0.5rem;
    line-height: 1.75;
}

.prose ul li {
    list-style-type: disc;
}

.prose ol li {
    list-style-type: decimal;
}

/* Strong and emphasis */
.prose strong {
    font-weight: 600;
    color: oklch(var(--bc));
}

.prose em {
    font-style: italic;
}

/* Code blocks */
.prose code {
    padding: 0.125rem 0.25rem;
    font-size: 0.875em;
    font-family: monospace;
}

/* Make sure code blocks have enough right padding for the button */
.prose pre {
    position: relative;
    padding-right: 4rem !important; /* Space for button */
    overflow-x: auto;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}

/* Make sure pre blocks can contain positioned button */

.prose pre code {
    background: #272b33;
    padding: 0;
    color: #f8f8f2;
    border-radius: 0 !important;  /* Force zero in all themes */
}

.prose pre {
    position: relative;
    padding: 1.5rem;
    background: #282c34;
    border-radius: 0.0rem;  /* Keep rounded corners on container */
    overflow-x: auto;
    margin-top: 1rem;
    margin-bottom: 1rem;
}

/* Blockquotes */
.prose blockquote {
    border-left: 4px solid oklch(var(--p));
    padding-left: 1rem;
    margin-left: 0;
    margin-top: 1rem;
    margin-bottom: 1rem;
    font-style: italic;
    color: oklch(var(--bc) / 0.8);
}

/* Images */
.prose img {
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
    border-radius: 0.5rem;
    max-width: 100%;
    height: auto;
}

/* Horizontal rules */
.prose hr {
    border-color: oklch(var(--bc) / 0.2);
    margin-top: 2rem;
    margin-bottom: 2rem;
}

/* Tables */
.prose table {
    width: 100%;
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
    border-collapse: collapse;
}

.prose th {
    background-color: oklch(var(--b2));
    padding: 0.75rem;
    font-weight: 600;
    text-align: left;
    border-bottom: 2px solid oklch(var(--bc) / 0.2);
}

.prose td {
    padding: 0.75rem;
    border-bottom: 1px solid oklch(var(--bc) / 0.1);
}

/* Syntax Highlighting */
code {
    font-family: 'Fira Code', 'Consolas', 'Monaco', monospace;
    font-size: 85%;
    margin: 0;
    background-color: #272b33;
    color:#f8f8f2;
  }
  pre {
    margin: 0em 0;
    overflow: auto;
  }
  pre code {
    padding: 0;
    overflow: visible;
  }
  code{white-space: pre-wrap;}
  span.smallcaps{font-variant: small-caps;}
  span.underline{text-decoration: underline;}
  div.column{display: inline-block; vertical-align: top; width: 50%;}
  div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;}
  ul.task-list{list-style: none;}
  pre > code.sourceCode { white-space: pre; position: relative; }
  pre > code.sourceCode > span { display: inline-block; line-height: 1.25; }
  pre > code.sourceCode > span:empty { height: 1.2em; }
  .sourceCode { overflow: visible; }
  code.sourceCode > span { color: inherit; text-decoration: inherit; }

  pre.sourceCode { margin: 0em; }
  @media screen {
  div.sourceCode { overflow: auto; }
  }
  @media print {
  pre > code.sourceCode { white-space: pre-wrap; }
  pre > code.sourceCode > span { text-indent: -5em; padding-left: 5em; }
  }
  pre.numberSource code
    { counter-reset: source-line 0; }
  pre.numberSource code > span
    { position: relative; left: -4em; counter-increment: source-line; }
  pre.numberSource code > span > a:first-child::before
    { content: counter(source-line);
      position: relative; left: -1em; text-align: right; vertical-align: baseline;
      border: none; display: inline-block;
      -webkit-touch-callout: none; -webkit-user-select: none;
      -khtml-user-select: none; -moz-user-select: none;
      -ms-user-select: none; user-select: none;
      padding: 0 4px; width: 4em;
      color: #6272a4;
    }
  pre.numberSource { margin-left: 3em; border-left: 1px solid #6272a4;  padding-left: 4px; }
  div.sourceCode
    { color: #f8f8f2; background-color: #272b33; }
  @media screen {
  pre > code.sourceCode > span > a:first-child::before { text-decoration: underline; }
  }
  code span { color: #f8f8f2; } /* Normal */
  code span.al { color: #ff5555; font-weight: bold; } /* Alert */
  code span.an { color: #f1fa8c; font-weight: bold; } /* Annotation */
  code span.at { color: #d29b67; } /* Attribute */
  code span.bn { color: #bd93f9; } /* BaseN */
  code span.bu { color: #50fa7b; } /* BuiltIn */
  code span.cf { color: #c679dd; } /* ControlFlow */
  code span.ch { color: #f1fa8c; } /* Char */
  code span.cn { color: #d29b67; } /* Constant */
  code span.co { color: #5b626f; font-style: italic;} /* Comment */
  code span.cv { color: #ff79c6; font-weight: bold; } /* CommentVar */
  code span.do { color: #f8f8f2; } /* Documentation */
  code span.dt { color: #e5c17c; } /* DataType */
  code span.dv { color: #bd93f9; } /* DecVal */
  code span.er { color: #ff5555; font-weight: bold; } /* Error */
  /* code span.ex { } Extension */
  code span.fl { color: #e5c17c; } /* Float */
  code span.fu { color: #57b6c2; } /* Function */
  code span.im { color: #ff79c6; font-weight: bold; } /* Import */
  code span.in { color: #f8f8f2; font-weight: bold; } /* Information */
  code span.kw { color: #c679dd; } /* Keyword */
  code span.op { color: #abb2c0; } /* Operator */
  code span.ot { color: #61aeef; } /* Other */
  code span.pp { color: #ff79c6; } /* Preprocessor */
  code span.sc { color: #f1fa8c; } /* SpecialChar */
  code span.ss { color: #97c378; } /* SpecialString */
  code span.st { color: #97c378; } /* String */
  code span.va { color: #df6a73; } /* Variable */
  code span.vs { color: #97c378; } /* VerbatimString */
  code span.wa { color: #ffb86c; font-weight: bold; } /* Warning */

/* Copy button for code blocks */
.copy-code-button {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    padding: 0.25rem 0.75rem;
    font-size: 0.75rem;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 0.25rem;
    color: #abb2bf;
    cursor: pointer;
    transition: all 0.2s;
    z-index: 10;
}

.copy-code-button:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.3);
}

.copy-code-button.copied {
    background: rgba(152, 195, 121, 0.3);
    border-color: rgba(152, 195, 121, 0.5);
    color: #98c379;
}