/*
 * custom.css
 * grobauskas colour scheme for the Docsify Vue theme.
 * Supports light mode, dark mode (OS preference), and a manual toggle
 * (body[data-theme="dark"] / body[data-theme="light"]).
 */

/* ══════════════════════════════════════════════════════════════
   LIGHT MODE  (default)
   ══════════════════════════════════════════════════════════════ */
:root {
  /* typography */
  --font-sans: "Inter", "Aptos", "Segoe UI Variable", "Segoe UI", Roboto, "Helvetica Neue", Arial, system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", "Cascadia Code", "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;

  /* accent */
  --primary:       #EC0C21;   /* bright red                      */
  --primary-dark:  #701611;   /* dark red – hover / active       */
  --border:        #d7c9bc;   /* soft neutral border             */

  /* surfaces */
  --bg:            #f8f5f1;   /* warm neutral page background    */
  --bg-sidebar:    #2f3136;   /* cool charcoal sidebar           */
  --bg-code:       #f3ebe3;   /* inline code background          */
  --bg-pre:        #2b2b2b;   /* fenced code block               */

  /* text */
  --text:          #2f3640;   /* body text                       */
  --text-sidebar:  #ece6de;   /* sidebar link text               */
  --text-muted:    #5b6168;   /* blockquote / secondary text     */
  --text-em:       #252c34;   /* slightly darker emphasis text   */
  --text-code:     #2f3640;   /* inline code text                */
  --text-pre:      #e7e4df;   /* fenced code text                */
  --text-heading:  #5f231c;   /* h1 / h2 color                   */

  /* blockquote */
  --bg-blockquote:   #efe4db;
  --text-blockquote: #2f3640;

  /* table */
  --table-header-bg:   #EC0C21;
  --table-header-text: #fff;
  --table-stripe:      #f1e9e1;

  /* rules */
  --hr: #2b2b2b;

  /* toggle button */
  --toggle-bg:   #000;      /* black button in light mode      */
  --toggle-text: #fff;      /* white moon glyph                */
  --focus-ring:  #701611;   /* keyboard focus ring             */
  --toggle-icon: "☽";
}

/* ══════════════════════════════════════════════════════════════
   DARK MODE  — OS preference
   ══════════════════════════════════════════════════════════════ */
@media (prefers-color-scheme: dark) {
  :root {
    --primary:       #d39a33;
    --primary-dark:  #e3b15a;
    --border:        #5c4c3f;

    --bg:            #1d1e20;
    --bg-sidebar:    #17181a;
    --bg-code:       #2a2623;
    --bg-pre:        #15171a;

    --text:          #e2e0dc;
    --text-sidebar:  #e5e2dd;   /* sidebar text same as body in dark */
    --text-muted:    #b3ada6;
    --text-em:       #e2e0dc;
    --text-code:     #e2e0dc;
    --text-pre:      #e2e0dc;
    --text-heading:  #e0aa4e;   /* gold headings in body             */

    /* blockquote */
    --bg-blockquote:   #2a2521;
    --text-blockquote: #efe3d4;

    --table-header-bg:   #342c27;
    --table-header-text: #f0d4a2;
    --table-stripe:      #24262a;

    /* rules */
    --hr: #5c544d;

    --toggle-bg:   #d39a33;
    --toggle-text: #000;
    --focus-ring:  #e3b15a;
    --toggle-icon: "☀️";
  }
}

/* ══════════════════════════════════════════════════════════════
   DARK MODE  — manual override  (body[data-theme="dark"])
   ══════════════════════════════════════════════════════════════ */
body[data-theme="dark"] {
  --primary:       #d39a33;
  --primary-dark:  #e3b15a;
  --border:        #5c4c3f;

  --bg:            #1d1e20;
  --bg-sidebar:    #17181a;
  --bg-code:       #2a2623;
  --bg-pre:        #15171a;

  --text:          #e2e0dc;
  --text-sidebar:  #e5e2dd;   /* sidebar text same as body in dark */
  --text-muted:    #b3ada6;
  --text-em:       #e2e0dc;
  --text-code:     #e2e0dc;
  --text-pre:      #e2e0dc;
  --text-heading:  #e0aa4e;   /* gold headings in body             */

  /* blockquote */
  --bg-blockquote:   #2a2521;
  --text-blockquote: #efe3d4;

  --table-header-bg:   #342c27;
  --table-header-text: #f0d4a2;
  --table-stripe:      #24262a;

  /* rules */
  --hr: #5c544d;

  --toggle-bg:   #d39a33;
  --toggle-text: #000;
  --focus-ring:  #e3b15a;
  --toggle-icon: "☀️";
}

/* LIGHT manual override — wins over OS dark preference */
body[data-theme="light"] {
  --primary:       #EC0C21;
  --primary-dark:  #701611;
  --border:        #d7c9bc;

  --bg:            #f8f5f1;
  --bg-sidebar:    #2f3136;   /* charcoal sidebar */
  --bg-code:       #f3ebe3;
  --bg-pre:        #2b2b2b;

  --text:          #2f3640;
  --text-sidebar:  #ece6de;   /* light text on charcoal */
  --text-muted:    #5b6168;
  --text-em:       #252c34;
  --text-code:     #2f3640;
  --text-pre:      #e7e4df;
  --text-heading:  #5f231c;

  /* blockquote */
  --bg-blockquote:   #efe4db;
  --text-blockquote: #2f3640;

  --table-header-bg:   #EC0C21;
  --table-header-text: #fff;
  --table-stripe:      #f1e9e1;

  /* rules */
  --hr: #2b2b2b;

  --toggle-bg:   #000;
  --toggle-text: #fff;
  --focus-ring:  #701611;
  --toggle-icon: "🌙";
}

/* ══════════════════════════════════════════════════════════════
   APPLIED STYLES  (all reference variables – work in any mode)
   ══════════════════════════════════════════════════════════════ */

/* Override Docsify's hardcoded --theme-color green */
:root { --theme-color: var(--primary); }

body {
  font-family:         var(--font-sans);
  font-size:           16px;
  background-color:   var(--bg);
  color:              var(--text);
  line-height:        1.65;
  font-kerning:       normal;
  text-rendering:     optimizeLegibility;
  font-optical-sizing: auto;
}

.markdown-section {
  line-height: 1.7;
  font-feature-settings: "liga" 1, "calt" 1;
}

.markdown-section p,
.markdown-section li,
.markdown-section blockquote {
  max-width: 72ch;
}

.markdown-section hr {
  border: 0;
  border-top: 2px solid var(--hr);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}

/* ── Progress bar ─────────────────────────────────────────────── */
.progress { background-color: var(--primary); }

/* ── Search ───────────────────────────────────────────────────── */
.search a:hover,
.search .search-keyword { color: var(--primary); }

.search input {
  background-color: var(--bg-sidebar);
  color: var(--text-sidebar);
  border-color: var(--border);
}

.search input::placeholder {
  color: var(--text-sidebar);
  opacity: 0.8;
}

.search .results-panel,
.search .matching-post,
.search .matching-post a,
.search .matching-post h2,
.search .matching-post p,
.search .empty {
  color: var(--text-sidebar) !important;
}

.search .matching-post {
  border-bottom: 1px solid var(--border) !important;
}

body[data-theme="dark"] .search .results-panel,
body[data-theme="dark"] .search .matching-post,
body[data-theme="dark"] .search .matching-post a,
body[data-theme="dark"] .search .matching-post h2,
body[data-theme="dark"] .search .matching-post p,
body[data-theme="dark"] .search .empty {
  color: var(--text-sidebar) !important;
}

@media (prefers-color-scheme: dark) {
  body:not([data-theme="light"]) .search .results-panel,
  body:not([data-theme="light"]) .search .matching-post,
  body:not([data-theme="light"]) .search .matching-post a,
  body:not([data-theme="light"]) .search .matching-post h2,
  body:not([data-theme="light"]) .search .matching-post p,
  body:not([data-theme="light"]) .search .empty {
    color: var(--text-sidebar) !important;
  }
}

/* ── Navbar ───────────────────────────────────────────────────── */
.app-nav a:hover,
.app-nav a.active {
  color:         var(--primary);
  border-bottom: 2px solid var(--primary);
}

/* ── Sidebar ──────────────────────────────────────────────────── */
.sidebar,
.sidebar-toggle { background-color: var(--bg-sidebar); }

.sidebar > h1 a { color: var(--primary); }

body[data-theme="dark"] .sidebar > h1 a { color: var(--text-sidebar) !important; }

@media (prefers-color-scheme: dark) {
  body:not([data-theme="light"]) .sidebar > h1 a {
    color: var(--text-sidebar) !important;
  }
}

.sidebar ul li a          { color: var(--text-sidebar); }
.sidebar ul li a:hover,
.sidebar ul li.active > a { color: var(--primary); }

.sidebar ul li.active > a {
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

.sidebar strong,
.sidebar b,
.sidebar li > p {
  color: var(--text-sidebar) !important;
}

.sidebar-toggle span { background-color: var(--primary); }

/* ── Content ──────────────────────────────────────────────────── */
.content,
.markdown-section { color: var(--text); }

.markdown-section a       { color: var(--primary); }
.markdown-section a:hover { color: var(--primary-dark); text-decoration: underline; }

.markdown-section p a,
.markdown-section li a,
.markdown-section table a,
.markdown-section blockquote a {
  text-decoration: underline;
  text-underline-offset: 0.14em;
  text-decoration-thickness: 0.08em;
}

.markdown-section h1,
.markdown-section h2 {
  font-family:         var(--font-sans);
  font-weight:         700;
  line-height:         1.25;
  letter-spacing:      -0.012em;
  color:               var(--text-heading) !important;
  border-bottom-color: var(--border);
  text-wrap:           balance;
}

.markdown-section h3,
.markdown-section h4,
.markdown-section h5,
.markdown-section h6 {
  font-family:    var(--font-sans);
  font-weight:    650;
  line-height:    1.3;
  letter-spacing: -0.006em;
  color:          var(--text-heading) !important;
  text-wrap:      balance;
}

.markdown-section h1 > a,
.markdown-section h2 > a,
.markdown-section h3 > a,
.markdown-section h4 > a,
.markdown-section h5 > a,
.markdown-section h6 > a,
.markdown-section h1 > a > span,
.markdown-section h2 > a > span,
.markdown-section h3 > a > span,
.markdown-section h4 > a > span,
.markdown-section h5 > a > span,
.markdown-section h6 > a > span {
  color: var(--text-heading) !important;
}

/* vendor theme also colors <strong> the same as headings — override it */
.markdown-section strong { color: inherit !important; }

.markdown-section em {
  font-style: italic;
  font-weight: 500;
  color: var(--text-em, inherit);
}

/* ── Heading colours scoped directly to dark contexts ─────────── */
/* Belt-and-braces: higher specificity + hard value beats vendor   */
body[data-theme="dark"] .markdown-section h1,
body[data-theme="dark"] .markdown-section h2,
body[data-theme="dark"] .markdown-section h3,
body[data-theme="dark"] .markdown-section h4,
body[data-theme="dark"] .markdown-section h5,
body[data-theme="dark"] .markdown-section h6 {
  color: var(--text-heading) !important;
}

body[data-theme="dark"] .markdown-section h1 > a,
body[data-theme="dark"] .markdown-section h2 > a,
body[data-theme="dark"] .markdown-section h3 > a,
body[data-theme="dark"] .markdown-section h4 > a,
body[data-theme="dark"] .markdown-section h5 > a,
body[data-theme="dark"] .markdown-section h6 > a,
body[data-theme="dark"] .markdown-section h1 > a > span,
body[data-theme="dark"] .markdown-section h2 > a > span,
body[data-theme="dark"] .markdown-section h3 > a > span,
body[data-theme="dark"] .markdown-section h4 > a > span,
body[data-theme="dark"] .markdown-section h5 > a > span,
body[data-theme="dark"] .markdown-section h6 > a > span {
  color: var(--text-heading) !important;
}

@media (prefers-color-scheme: dark) {
  body:not([data-theme="light"]) .markdown-section h1,
  body:not([data-theme="light"]) .markdown-section h2,
  body:not([data-theme="light"]) .markdown-section h3,
  body:not([data-theme="light"]) .markdown-section h4,
  body:not([data-theme="light"]) .markdown-section h5,
  body:not([data-theme="light"]) .markdown-section h6 {
    color: var(--text-heading) !important;
  }

  body:not([data-theme="light"]) .markdown-section h1 > a,
  body:not([data-theme="light"]) .markdown-section h2 > a,
  body:not([data-theme="light"]) .markdown-section h3 > a,
  body:not([data-theme="light"]) .markdown-section h4 > a,
  body:not([data-theme="light"]) .markdown-section h5 > a,
  body:not([data-theme="light"]) .markdown-section h6 > a,
  body:not([data-theme="light"]) .markdown-section h1 > a > span,
  body:not([data-theme="light"]) .markdown-section h2 > a > span,
  body:not([data-theme="light"]) .markdown-section h3 > a > span,
  body:not([data-theme="light"]) .markdown-section h4 > a > span,
  body:not([data-theme="light"]) .markdown-section h5 > a > span,
  body:not([data-theme="light"]) .markdown-section h6 > a > span {
    color: var(--text-heading) !important;
  }
}

/* ── Inline code ──────────────────────────────────────────────── */
.markdown-section code {
  font-family:      var(--font-mono);
  font-size:        0.9em;
  background-color: var(--bg-code);
  border:           1px solid var(--border);
  color:            var(--text-code);
}

/* ── Code blocks ──────────────────────────────────────────────── */
.markdown-section pre {
  background-color: var(--bg-pre);
  max-width:        min(100%, 72ch);
  overflow-x:       auto;
}
.markdown-section pre > code {
  font-family:      var(--font-mono);
  font-size:        0.92rem;
  line-height:      1.6;
  background-color: transparent;
  border:           none;
  color:            var(--text-pre);
}

.sidebar,
.app-nav,
.search input {
  font-family: var(--font-sans);
}

/* ── Code Highlighting (token colors only) ───────────────────── */
.markdown-section pre code[class*="language-"],
.markdown-section pre[class*="language-"] code {
  color: #ffffff;
}

.markdown-section pre code .token.comment,
.markdown-section pre code .token.prolog,
.markdown-section pre code .token.doctype,
.markdown-section pre code .token.cdata {
  color: #7f8c98;
}

.markdown-section pre code .token.keyword,
.markdown-section pre code .token.operator,
.markdown-section pre code .token.atrule,
.markdown-section pre code .token.important {
  color: #c792ea;
}

.markdown-section pre code .token.string,
.markdown-section pre code .token.char,
.markdown-section pre code .token.attr-value {
  color: #c3e88d;
}

.markdown-section pre code .token.function,
.markdown-section pre code .token.method {
  color: #82aaff;
}

.markdown-section pre code .token.number,
.markdown-section pre code .token.constant,
.markdown-section pre code .token.boolean {
  color: #f78c6c;
}

.markdown-section pre code .token.class-name {
  color: #ffcb6b;
}

.markdown-section pre code .token.property,
.markdown-section pre code .token.attr-name {
  color: #9cc4ff;
}

.markdown-section pre code .token.tag,
.markdown-section pre code .token.selector {
  color: #f07178;
}

.markdown-section pre code .token.builtin,
.markdown-section pre code .token.variable,
.markdown-section pre code .token.punctuation {
  color: #d6deeb;
}

/* ── Blockquote ───────────────────────────────────────────────── */
.markdown-section blockquote {
  border-left: 4px solid var(--primary);
  background:  var(--bg-blockquote);
  color:       var(--text-blockquote);
}

/* ── Tables ───────────────────────────────────────────────────── */
.markdown-section table th {
  background-color: var(--table-header-bg);
  color:            var(--table-header-text);
  border-color:     var(--border);
}

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

.markdown-section table td,
.markdown-section table th {
  border-color: var(--border);
}

/* ── Pagination ───────────────────────────────────────────────── */
/* Plugin defaults to currentColor and dims the previous item to .3 opacity */
.pagination-item a {
  color:                var(--primary) !important;
  text-underline-offset: 0.14em;
}

.pagination-item--previous .pagination-item-title,
.pagination-item--previous .pagination-item-label,
.pagination-item--previous .pagination-item-subtitle {
  opacity: 1 !important;
  transition: opacity 0.2s;
}

.pagination-item a:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 3px;
}

/* ── Sidebar profile links ───────────────────────────────────── */
.profile-card {
  text-align: center;
  padding: 1.2em 0 0.8em;
}

.profile-avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  display: block;
  margin: 0 auto 0.5em;
  border: 2px solid var(--border);
}

.profile-name {
  display: block;
  margin-bottom: 0.45em;
  color: var(--text-sidebar);
}

.social-links {
  display: flex;
  justify-content: center;
  gap: 0.6em;
  flex-wrap: wrap;
}

.social-link {
  color: var(--primary) !important;
  font-size: 0.85em;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
}

.social-link:hover {
  color: var(--primary-dark) !important;
  text-decoration: underline;
}

.social-link::before {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.3em;
  height: 1.3em;
  border-radius: 999px;
  border: 1px solid currentColor;
  font-size: 0.72em;
  font-weight: 700;
  line-height: 1;
}

.social-link.linkedin::before {
  content: "in";
}

.social-link.website::before {
  content: "www";
  font-size: 0.58em;
}

.social-link.email::before {
  content: "✉";
  font-size: 0.8em;
}

.social-link.teams::before {
  content: "\1F464\FE0E";
  font-size: 0.78em;
  font-family: "Segoe UI Symbol", "Apple Symbols", "Noto Sans Symbols 2", "Noto Sans Symbols", sans-serif;
}

/* ── Cover page ───────────────────────────────────────────────── */
section.cover .cover-main > p:last-child a {
  background-color: var(--primary);
  border-color:     var(--primary);
  color:            #fff;
}
section.cover .cover-main > p:last-child a:hover {
  background-color: var(--primary-dark);
}

/* ══════════════════════════════════════════════════════════════
   DARK MODE TOGGLE BUTTON
   ══════════════════════════════════════════════════════════════ */
#sf-theme-toggle {
  position:      fixed;
  top:           1.2rem;
  right:         1.2rem;
  z-index:       9999;
  width:         2.4rem;
  height:        2.4rem;
  border-radius: 50%;
  border:        none;
  cursor:        pointer;
  font-size:     1.1rem;
  line-height:   2.4rem;
  text-align:    center;
  background-color: var(--toggle-bg);
  color:            var(--toggle-text);
  box-shadow:   0 2px 8px rgba(0,0,0,0.3);
  transition:   background-color 0.2s;
}
#sf-theme-toggle:hover { opacity: 0.85; }

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}