/* ============================================================================
   BFG Coding Docs — Ghent University branding for Docsify
   UGent blue  #1E64C8   ·   accent yellow  #FFD200
   ========================================================================== */

:root {
  --ugent-blue: #1e64c8;
  --ugent-blue-dark: #003795;
  --ugent-blue-soft: #eef4fd;
  --ugent-yellow: #ffd200;
  --ink: #1f2937;
  --muted: #64748b;
  --border: #e2e8f0;

  /* Docsify theme hooks */
  --theme-color: var(--ugent-blue);
  --theme-color-dark: var(--ugent-blue-dark);

  /* Fonts */
  --body-font: "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, Helvetica, Arial, sans-serif;
  --heading-font: "Work Sans", var(--body-font);
  --code-font: "Source Code Pro", ui-monospace, SFMono-Regular, Menlo,
    Consolas, monospace;

  --base-font-family: var(--body-font);
  --base-color: var(--ink);
  --base-line-height: 1.65;

  --link-color: var(--ugent-blue);
  --content-max-width: 46rem;
}

/* ── Typography ───────────────────────────────────────────────────────────── */
body,
.markdown-section,
.sidebar,
.app-nav {
  font-family: var(--body-font);
}
.markdown-section h1,
.markdown-section h2,
.markdown-section h3,
.markdown-section h4,
.app-name-link,
section.cover h1,
section.cover .cover-main > p:last-child a {
  font-family: var(--heading-font);
  letter-spacing: -0.005em;
}
code,
kbd,
pre,
.markdown-section code,
.markdown-section pre,
.docsify-copy-code-button {
  font-family: var(--code-font);
}
/* <kbd> keyboard keys */
.markdown-section kbd {
  background: #f8fafc;
  border: 1px solid var(--border);
  border-bottom-width: 2px;
  border-radius: 5px;
  padding: 0.1em 0.45em;
  font-size: 0.82em;
  color: var(--ink);
}

/* ── Sidebar ──────────────────────────────────────────────────────────────── */
.sidebar {
  border-right: 1px solid var(--border);
}
.sidebar .app-name-link {
  color: var(--ugent-blue-dark);
  font-weight: 700;
}
.sidebar ul li a {
  color: #445;
}
.sidebar ul li.active > a {
  color: var(--ugent-blue);
  font-weight: 600;
  border-right: 3px solid var(--ugent-yellow);
}
.sidebar-nav > ul > li > p:first-child {
  color: var(--muted);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 700;
  margin: 1.4em 0 0.4em;
}
.sidebar-toggle-button {
  color: var(--ugent-blue);
}

/* ── Top navbar ───────────────────────────────────────────────────────────── */
/* Top-level items: dropdown labels are <p>; the Home link is <p><a>. */
.app-nav > ul > li > p,
.app-nav > ul > li > p > a {
  color: var(--ink);
  font-weight: 600;
}
.app-nav > ul > li > p > a:hover,
.app-nav > ul > li > p > a.active {
  color: var(--ugent-blue);
}
/* Dropdown items sit on a white popover → keep them dark. */
.app-nav > ul > li > ul a {
  color: var(--ink);
}
.app-nav > ul > li > ul a:hover {
  color: var(--ugent-blue);
}
/* On the home/cover page the navbar sits on dark blue → light top-level labels.
   Dropdown popovers keep their white background, so their links stay dark. */
body:has(section.cover.show) .app-nav > ul > li > p,
body:has(section.cover.show) .app-nav > ul > li > p > a {
  color: #fff;
}
body:has(section.cover.show) .app-nav > ul > li > p:hover,
body:has(section.cover.show) .app-nav > ul > li > p > a:hover {
  color: var(--ugent-yellow);
}

/* Logo in sidebar */
.sidebar > h1 img,
.app-name-link img {
  max-width: 130px;
}

/* ── Headings & links ─────────────────────────────────────────────────────── */
.markdown-section h1 {
  color: var(--ugent-blue-dark);
}
.markdown-section h2 {
  color: var(--ugent-blue);
  border-bottom: 2px solid var(--ugent-blue-soft);
  padding-bottom: 0.25em;
  margin-top: 1.8em;
}
.markdown-section h3 {
  color: var(--ink);
}
/* Underline body links only — never the invisible heading anchor links */
.markdown-section a:not(.anchor) {
  color: var(--ugent-blue);
  text-decoration: none;
  border-bottom: 1px solid rgba(30, 100, 200, 0.28);
}
.markdown-section a:not(.anchor):hover {
  border-bottom-color: var(--ugent-blue);
}
.markdown-section h1 a,
.markdown-section h2 a,
.markdown-section h3 a,
.markdown-section h4 a,
.markdown-section a.anchor {
  border-bottom: none;
  color: inherit;
}

/* Numbered step lists get a subtle emphasis */
.markdown-section ol > li::marker {
  color: var(--ugent-blue);
  font-weight: 700;
}

/* ── Screenshots ──────────────────────────────────────────────────────────── */
.markdown-section img {
  display: block;
  max-width: min(100%, 700px);
  margin: 1.1em auto;
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 6px 22px rgba(15, 23, 42, 0.08);
  cursor: zoom-in;
}
/* An italic line immediately after an image acts as a caption */
.markdown-section img + em,
.markdown-section p > img + br + em {
  display: block;
  text-align: center;
  color: var(--muted);
  font-size: 0.85em;
  margin-top: -0.4em;
}

/* ── Inline & block code ──────────────────────────────────────────────────── */
.markdown-section code {
  color: var(--ugent-blue-dark);
  background-color: var(--ugent-blue-soft);
  border-radius: 4px;
}
.markdown-section pre {
  border: 1px solid var(--border);
  border-radius: 8px;
}
.markdown-section pre > code {
  color: #1e293b;
  background: transparent;
}

/* ── Tables ───────────────────────────────────────────────────────────────── */
.markdown-section table thead {
  background: var(--ugent-blue-soft);
}
.markdown-section tr:nth-child(2n) {
  background-color: #fafbfc;
}

/* ── Flexible-alert callouts (tip / note / warning / attention) ───────────── */
.markdown-section .alert {
  border-radius: 8px;
  border-width: 0 0 0 4px;
}

/* ── Cover page ───────────────────────────────────────────────────────────── */
section.cover.show {
  background: linear-gradient(135deg, #1e64c8 0%, #003795 100%) !important;
}
section.cover .cover-main,
section.cover .cover-main p,
section.cover .cover-main ul,
section.cover .cover-main li,
section.cover .cover-main strong {
  color: #fff;
}
section.cover .cover-main > p:last-child a {
  border-radius: 2rem;
  border-width: 2px;
}
section.cover .cover-main > p:last-child a:first-child {
  background: var(--ugent-yellow);
  border-color: var(--ugent-yellow);
  color: #1a2a4a;
}
section.cover .cover-main > p:last-child a:first-child:hover {
  background: #ffdd3c;
}
section.cover .cover-main > p:last-child a {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.7);
}
section.cover blockquote p {
  color: rgba(255, 255, 255, 0.92);
  font-size: 1.4rem;
}
/* The cover title text lives inside an <a class="anchor"> — force it light */
section.cover h1,
section.cover h1 a,
section.cover h1 a span,
section.cover h1 .anchor {
  color: #fff !important;
  border-bottom: none !important;
}
section.cover h1 small {
  color: var(--ugent-yellow) !important;
}

/* ── Footer (docsify-footer-enh) ──────────────────────────────────────────── */
.docsify-footer {
  border-top: 1px solid var(--border);
  color: var(--muted);
  font-size: 0.85em;
}
.docsify-footer span {
  color: var(--ugent-blue-dark);
  font-weight: 600;
}

/* ── Docsify-copy-code button ─────────────────────────────────────────────── */
.docsify-copy-code-button {
  background: var(--ugent-blue) !important;
  color: #fff !important;
  border-radius: 0 6px 0 6px !important;
}
.docsify-copy-code-button:hover {
  background: var(--ugent-blue-dark) !important;
}