/* cdsoft.css
 * Copyright (C) 2025-2026 CDSoft, Christophe Delord
 *
 * This file is licensed under the GNU Lesser General Public License v3.0.
 * See the LICENSE file or https://www.gnu.org/licenses/lgpl-3.0.html
 *
 * For further information you can visit
 * https://codeberg.org/cdsoft/cdsoft.css
 */

/* CSS variables for themes */
:root {
  /* Light theme */
  --bg-primary: #ffffff;
  --bg-secondary: #f8f9fa;
  --bg-accent: #e3f2fd;
  --text-primary: #212529;
  --text-secondary: #6c757d;
  --text-muted: #868e96;
  --border-color: #dee2e6;
  --border-accent: #90a4ae;
  --link-color: #1976d2;
  --link-hover: #1565c0;
  --header-bg: #e5e5e5;
  --header-text: #212529;
  --code-bg: #f8f9fa;
  --code-border: #e9ecef;
  --code-line-number-color: #a8a29e;
  --table-header-bg: #e3f2fd;
  --table-stripe: #f8f9fa;
  --shadow-color: rgba(0, 0, 0, 0.1);
  --toc-bg: rgba(248, 249, 250, 0.95);

  /* Light syntax highlighting */
  --syntax-keyword: #d73a49;
  --syntax-string: #032f62;
  --syntax-comment: #6a737d;
  --syntax-number: #005cc5;
  --syntax-function: #6f42c1;
  --syntax-operator: #d73a49;
  --syntax-variable: #e36209;

  /* GitHub Flavored Markdown admonitions (note, tip, important, warning, caution) */
  --admonition-note-color:      #1f6feb;
  --admonition-note-bg:         #0d1117;
  --admonition-tip-color:       #3fb950;
  --admonition-tip-bg:          #0d1117;
  --admonition-important-color: #8957e5;
  --admonition-important-bg:    #0d1117;
  --admonition-warning-color:   #d29922;
  --admonition-warning-bg:      #0d1117;
  --admonition-caution-color:   #f85149;
  --admonition-caution-bg:      #0d1117;

  --admonition-note-bg-tint:      rgba(31, 111, 235, 0.08);
  --admonition-tip-bg-tint:       rgba(63, 185, 80, 0.08);
  --admonition-important-bg-tint: rgba(137, 87, 229, 0.08);
  --admonition-warning-bg-tint:   rgba(210, 153, 34, 0.08);
  --admonition-caution-bg-tint:   rgba(248, 81, 73, 0.08);

}

/* Automatic dark theme */
@media (prefers-color-scheme: dark) {
  :root {
    --bg-primary: #1a1a1a;
    --bg-secondary: #2d2d2d;
    --bg-accent: #1e3a5f;
    --text-primary: #e0e0e0;
    --text-secondary: #b0b0b0;
    --text-muted: #888888;
    --border-color: #404040;
    --border-accent: #607d8b;
    --link-color: #64b5f6;
    --link-hover: #42a5f5;
    --header-bg: #3a3a3a;
    --header-text: #e0e0e0;
    --code-bg: #2d2d2d;
    --code-border: #404040;
    --code-line-number-color: #a8a29e;
    --table-header-bg: #1e3a5f;
    --table-stripe: #2d2d2d;
    --shadow-color: rgba(0, 0, 0, 0.3);
    --toc-bg: rgba(45, 45, 45, 0.95);

    /* Light syntax highlighting */
    --syntax-keyword: #ff6b6b;
    --syntax-string: #a8e6cf;
    --syntax-comment: #888888;
    --syntax-number: #74c0fc;
    --syntax-function: #c084fc;
    --syntax-operator: #ff6b6b;
    --syntax-variable: #ffd93d;
  }
}

@media (prefers-color-scheme: light) {
  :root {
    /* GitHub Flavored Markdown admonitions (note, tip, important, warning, caution) */
    --admonition-note-bg:      #ffffff;
    --admonition-tip-bg:       #ffffff;
    --admonition-important-bg: #ffffff;
    --admonition-warning-bg:   #ffffff;
    --admonition-caution-bg:   #ffffff;
  }
}

* {
  box-sizing: border-box;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
  line-height: 1.6;
  color: var(--text-primary);
  background-color: var(--bg-primary);
  margin: 0 auto;
  padding: 0;
  font-size: 16px;
  max-width: 60em;
  text-align: justify;
}

.header {
  background-color: var(--header-bg);
  color: var(--header-text);
  box-shadow: 0 2px 4px var(--shadow-color);
  text-align: center;
}

.header nav {
  display: flex;
  align-items: center;
}

.header a {
  color: var(--link-color);
  text-decoration: none;
  padding: 0.25rem 0.25rem;
  font-weight: 600;
}

.header a:hover {
  color: var(--link-hover);
  background-color: var(--bg-accent);
}

.title {
  text-align: center;
  margin-bottom: 0.5em;
}

.subtitle {
  text-align: center;
}

.author {
  text-align: center;
}

.date {
  text-align: center;
}

#TOC {
  max-width: 33%;
  overflow-y: auto;
  background-color: var(--toc-bg);
  backdrop-filter: blur(10px);
  border: 2px solid var(--border-color);
  padding: 1.5rem;
  margin: 0em 0em 0em 1em;
  box-shadow: 0 4px 12px var(--shadow-color);
  float: right;
  clear: right;
  text-align: left;
}

#TOC ul {
  list-style-type: none;
  padding-left: 1em;
}

#TOC > ul {
  padding-left: 0;
}

#TOC li {
  margin: 0.3em 0;
}

#TOC a {
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 0.9rem;
  display: block;
  padding: 0.2rem 0;
  border-left: 3px solid transparent;
  padding-left: 0.5rem;
}

#TOC a:hover {
  color: var(--link-color);
  border-left-color: var(--link-color);
}

.content {
  line-height: 1.7;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 500;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
  line-height: 1.3;
}

h1 {
  font-size: 2rem;
  background: linear-gradient(135deg, var(--bg-accent), var(--bg-secondary));
  color: var(--text-primary);
  padding: 1rem 1rem;
  box-shadow: 0 2px 8px var(--shadow-color);
}

h2 {
  font-size: 1.5rem;
  background-color: var(--bg-accent);
  color: var(--text-primary);
  padding: 0.8rem 1rem;
}

h3 {
  font-size: 1.25rem;
  background-color: var(--bg-secondary);
  padding: 0.6rem 1rem;
}

h4, h5, h6 {
  color: var(--text-primary);
  border-bottom: 2px solid var(--border-color);
  padding: 0.3rem 1rem;
}

p {
  margin-bottom: 1rem;
}

a {
  color: var(--link-color);
  text-decoration: none;
}

a:hover {
  color: var(--link-hover);
  text-decoration: underline;
}

ul, ol {
  margin-bottom: 1rem;
  padding-left: 2rem;
}

li {
  margin-bottom: 0.3rem;
}

pre {
  background-color: var(--code-bg);
  border: 1px solid var(--code-border);
  border-radius: 6px;
  padding: 1.5rem;
  overflow-x: auto;
  margin: 1.5rem 0;
  font-family: 'Fira Code', 'SF Mono', Monaco, Inconsolata, 'Roboto Mono', Consolas, 'Courier New', monospace;
  font-size: 0.9rem;
  line-height: 1.4;
}

code {
  font-family: 'Fira Code', 'SF Mono', Monaco, Inconsolata, 'Roboto Mono', Consolas, 'Courier New', monospace;
  font-size: 0.9em;
  background-color: var(--code-bg);
  padding: 0.2rem 0.4rem;
  border-radius: 3px;
  border: 1px solid var(--code-border);
}

pre code {
  background: none;
  border: none;
  padding: 0;
}

pre.numberSource code > span > a:first-child::before { color: var(--code-line-number-color); }
pre.numberSource { border-left: 1px solid var(--code-line-number-color); }
.sourceCode .kw { color: var(--syntax-keyword); font-weight: bold; } /* Keyword */
.sourceCode .dt { color: var(--syntax-keyword); } /* DataType */
.sourceCode .dv { color: var(--syntax-number); } /* DecVal */
.sourceCode .bn { color: var(--syntax-number); } /* BaseN */
.sourceCode .fl { color: var(--syntax-number); } /* Float */
.sourceCode .ch { color: var(--syntax-string); } /* Char */
.sourceCode .st { color: var(--syntax-string); } /* String */
.sourceCode .co { color: var(--syntax-comment); font-style: italic; } /* Comment */
.sourceCode .ot { color: var(--syntax-function); } /* Other */
.sourceCode .al { color: #ff0000; font-weight: bold; } /* Alert */
.sourceCode .fu { color: var(--syntax-function); } /* Function */
.sourceCode .er { color: #ff0000; font-weight: bold; } /* Error */
.sourceCode .wa { color: #60a0b0; font-weight: bold; font-style: italic; } /* Warning */
.sourceCode .cn { color: var(--syntax-number); } /* Constant */
.sourceCode .sc { color: var(--syntax-string); } /* SpecialChar */
.sourceCode .vs { color: var(--syntax-string); } /* VerbatimString */
.sourceCode .ss { color: var(--syntax-string); } /* SpecialString */
.sourceCode .im { color: var(--syntax-keyword); } /* Import */
.sourceCode .va { color: var(--syntax-variable); } /* Variable */
.sourceCode .cf { color: var(--syntax-keyword); font-weight: bold; } /* ControlFlow */
.sourceCode .op { color: var(--syntax-operator); } /* Operator */
.sourceCode .bu { color: var(--syntax-function); } /* BuiltIn */
.sourceCode .ex { color: var(--syntax-function); } /* Extension */
.sourceCode .pp { color: var(--syntax-keyword); font-weight: bold; } /* Preprocessor */
.sourceCode .at { color: var(--syntax-variable); } /* Attribute */
.sourceCode .do { color: var(--syntax-comment); font-style: italic; } /* Documentation */
.sourceCode .an { color: var(--syntax-comment); font-weight: bold; font-style: italic; } /* Annotation */
.sourceCode .cv { color: var(--syntax-comment); font-weight: bold; font-style: italic; } /* CommentVar */
.sourceCode .in { color: var(--syntax-comment); font-weight: bold; font-style: italic; } /* Information */

table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5rem 0;
  background-color: var(--bg-primary);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px var(--shadow-color);
}

thead {
  background-color: var(--table-header-bg);
}

th {
  padding: 1rem;
  text-align: left;
  font-weight: 600;
  color: var(--text-primary);
  border-bottom: 2px solid var(--border-accent);
}

td {
  padding: 0.8rem 1rem;
  border-bottom: 1px solid var(--border-color);
}

tbody tr:nth-child(even) {
  background-color: var(--table-stripe);
}

tbody tr:hover {
  background-color: var(--bg-accent);
}

/* Images shifted to the right */
.figure-right {
  float: right;
  margin: 0 0 1rem 2rem;
  max-width: 300px;
  text-align: center;
}

.figure-right img {
  max-width: 100%;
  height: auto;
  border-radius: 6px;
  box-shadow: 0 2px 8px var(--shadow-color);
}

.figure-right figcaption {
  font-size: 0.9rem;
  color: var(--text-secondary);
  margin-top: 0.5rem;
  font-style: italic;
}

/* Images shifted to the left */
.figure-left {
  float: left;
  margin: 0 2rem 1rem 0;
  max-width: 300px;
  text-align: center;
}

.figure-left img {
  max-width: 100%;
  height: auto;
  border-radius: 6px;
  box-shadow: 0 2px 8px var(--shadow-color);
}

.figure-left figcaption {
  font-size: 0.9rem;
  color: var(--text-secondary);
  margin-top: 0.5rem;
  font-style: italic;
}

img {
  max-width: 100%;
  height: auto;
  border-radius: 4px;
  margin: 1rem 0;
}

figure {
  margin: 1.5rem 0;
  text-align: center;
}

figcaption {
  font-size: 0.9rem;
  color: var(--text-secondary);
  margin-top: 0.5rem;
  font-style: italic;
}

blockquote {
  border-left: 4px solid var(--link-color);
  margin: 1.5rem 0;
  padding: 1rem 1.5rem;
  background-color: var(--bg-secondary);
  border-radius: 0 6px 6px 0;
  font-style: italic;
}

blockquote p:last-child {
  margin-bottom: 0;
}

/* GitHub Flavored Markdown admonitions (note, tip, important, warning, caution) */

.note,
.tip,
.important,
.warning,
.caution {
  border-left: 4px solid;
  border-radius: 0 6px 6px 0;
  margin: 1.0rem 0;
  padding: 0.5rem 1rem;
  font-style: normal;
}

.note     { border-color: var(--admonition-note-color);      background-color: var(--admonition-note-bg-tint); }
.tip      { border-color: var(--admonition-tip-color);       background-color: var(--admonition-tip-bg-tint); }
.important{ border-color: var(--admonition-important-color); background-color: var(--admonition-important-bg-tint); }
.warning  { border-color: var(--admonition-warning-color);   background-color: var(--admonition-warning-bg-tint); }
.caution  { border-color: var(--admonition-caution-color);   background-color: var(--admonition-caution-bg-tint); }

/* Title line inside each admonition */
.note      > .title,
.tip       > .title,
.important > .title,
.warning   > .title,
.caution   > .title {
  display: flex;
  align-items: center;
  gap: 0.4em;
  font-weight: 600;
  font-size: 0.95rem;
  margin: 0;
  font-style: normal;
}

.note      > .title { color: var(--admonition-note-color); }
.tip       > .title { color: var(--admonition-tip-color); }
.important > .title { color: var(--admonition-important-color); }
.warning   > .title { color: var(--admonition-warning-color); }
.caution   > .title { color: var(--admonition-caution-color); }

/* Icons via ::before pseudo-element */
.note      > .title::before { content: "ℹ️"; }
.tip       > .title::before { content: "💡"; }
.important > .title::before { content: "‼️"; }
.warning   > .title::before { content: "⚠️"; }
.caution   > .title::before { content: "🛑"; }

/* Last paragraph inside admonitions needs no bottom margin */
.note      > p:last-child,
.tip       > p:last-child,
.important > p:last-child,
.warning   > p:last-child,
.caution   > p:last-child {
  margin: 0;
}

hr {
  border: none;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--border-accent), transparent);
  margin: 2rem 0;
}

.corner {
  position: fixed;
  top: 14px;
  right: -64px;
  background: #003399;
  color: #ffcc01;
  font-weight: 600;
  font-size: 12px;
  padding: 0px 4em;
  width: 200px;
  text-align: center;
  transform: rotate(45deg);
  box-shadow:
    inset 0 0 0 2px #ffcc01,
    0 2px 8px rgba(0,0,0,0.25);
  z-index: -1000;
  pointer-events: none;
}

@media (min-width: 112em) {
  #TOC {
    position: fixed;
    left: 0;
    top: 1rem;
    overflow-y: auto;
    max-height: 80vh;
    max-width: 24em;
  }
}

@media (max-width: 50em) {

  body {
    padding: 1em;
  }

  .header nav {
    flex-direction: column;
  }

  h1 {
    font-size: 1.8rem;
    padding: 0.8rem 1rem;
  }

  h2 {
    font-size: 1.5rem;
    padding: 0.6rem 1rem;
  }

  h3 {
    font-size: 1.2rem;
    padding: 0.4rem 1rem;
  }

  .figure-right {
    float: none;
    margin: 1rem auto;
    max-width: 100%;
  }

  pre {
    padding: 1rem;
    font-size: 0.8rem;
  }

  table {
    font-size: 0.9em;
  }

  th, td {
    padding: 8px 10px;
  }

}

@media (max-width: 42em) {
  #TOC {
    float: none;
    clear: none;
    max-width: 100%;
    margin: 0;
  }
}