/* zResetMap brand accent + dark theme, layered over the default Antora UI.
   Accent is the gold-to-orange from the <highlight> style: #FFD700 -> #FFA500. */

:root {
  --zrm-accent: #ffa500;
  --zrm-accent-2: #ffd700;
  /* Link color is tuned per theme for contrast: a readable goldenrod on light,
     bright gold on dark. The accent gradient itself is used where there's a fill. */
  --zrm-link: #b26b00;
  --zrm-link-hover: #8a5200;
}

html.dark {
  --zrm-link: #ffc93c;
  --zrm-link-hover: #ffd76a;
}

/* ---- Brand accent (both themes) ---- */

.doc a { color: var(--zrm-link); }
.doc a:hover { color: var(--zrm-link-hover); }
.toc .toc-menu a:hover { color: var(--zrm-link); }
.toc .toc-menu a.is-active { border-left-color: var(--zrm-accent); }

/* Primary button in the navbar: the gold-to-orange gradient with dark text. */
.navbar .button.is-primary {
  background: linear-gradient(135deg, var(--zrm-accent-2), var(--zrm-accent));
  border-color: transparent;
  color: #191919;
  font-weight: 600;
}
.navbar .button.is-primary:hover { filter: brightness(1.06); color: #191919; }

/* Theme toggle button sits in the (dark) navbar next to the links. */
.theme-toggle {
  background: none; border: none; cursor: pointer; color: inherit;
  font-size: 1.1rem; line-height: 1; padding: 0 .9rem; align-self: center;
}
.theme-icon-light { display: none; }
html.dark .theme-icon-light { display: inline; }
html.dark .theme-icon-dark { display: none; }

/* ---- Dark theme surfaces ---- */

html.dark { scrollbar-color: #4a4a52 #1b1b1f; }
html.dark body { background: #1b1b1f; color: #d7d7db; }
html.dark body * { scrollbar-color: #4a4a52 transparent; }

html.dark .nav,
html.dark .nav-panel-explore { background: #202024; }
html.dark .nav-panel-explore .components { background: #26262b; box-shadow: inset 0 1px 5px #17171a; }
html.dark .nav-menu h3.title { color: #c7c7cd; }
html.dark .nav-panel-explore .context { color: #a0a0a8; box-shadow: 0 -1px 0 #33333a; }

html.dark .toolbar { background: #202024; color: #a0a0a8; box-shadow: 0 1px 0 #33333a; }
html.dark .toolbar .edit-this-page a { color: #9a9aa2; }

html.dark .toc-menu { color: #a0a0a8; }
html.dark .toc .toc-menu h3 { color: #e3e3e6; }
html.dark .toc .toc-menu a { border-left-color: #33333a; }
html.dark .toc .toc-menu a.is-active { color: #e3e3e6; }
html.dark .toc .toc-menu a:focus { background: #26262b; }

html.dark .doc { color: #c7c7cd; }
html.dark .doc h1, html.dark .doc h2, html.dark .doc h3,
html.dark .doc h4, html.dark .doc h5, html.dark .doc h6 { color: #f2f2f4; }
html.dark .doc h1.sect0 { background: #26262b; }
html.dark .doc h2:not(.discrete) { border-bottom-color: #33333a; }

/* Inline code and code blocks. Syntax colors are flattened to a readable light
   gray in dark mode so nothing ends up dark-on-dark. */
html.dark .doc p code,
html.dark .doc thead code,
html.dark .doc .colist > table code { color: #e6e6ea; background: #26262b; }
/* The default UI paints the code background on the child <code> for highlighted
   blocks, and on <pre> for the rest. Both need darkening or a white box shows. */
html.dark .doc pre { color: #e6e6ea; }
html.dark .doc .listingblock pre:not(.highlight),
html.dark .doc .literalblock pre,
html.dark .doc pre.highlight > code {
  background: #26262b;
  box-shadow: inset 0 0 1.75px #17171a;
}
/* Dark syntax palette (VS Code Dark+ style) for highlight.js tokens. */
html.dark .doc pre code { color: #d4d4d4; }
html.dark .doc pre code .hljs-comment,
html.dark .doc pre code .hljs-quote { color: #6a9955; font-style: italic; }
html.dark .doc pre code .hljs-attr,
html.dark .doc pre code .hljs-attribute,
html.dark .doc pre code .hljs-meta { color: #9cdcfe; }
html.dark .doc pre code .hljs-string,
html.dark .doc pre code .hljs-symbol,
html.dark .doc pre code .hljs-bullet { color: #ce9178; }
html.dark .doc pre code .hljs-number,
html.dark .doc pre code .hljs-literal,
html.dark .doc pre code .hljs-type { color: #b5cea8; }
html.dark .doc pre code .hljs-keyword,
html.dark .doc pre code .hljs-selector-tag,
html.dark .doc pre code .hljs-name,
html.dark .doc pre code .hljs-tag { color: #569cd6; }
html.dark .doc pre code .hljs-title,
html.dark .doc pre code .hljs-section { color: #dcdcaa; }

/* Tables */
html.dark .doc table.tableblock,
html.dark .doc table.tableblock > * > tr > * { border-color: #33333a; }
html.dark .doc table.stripes-all > tbody > tr,
html.dark .doc table.stripes-even > tbody > tr:nth-of-type(2n),
html.dark .doc table.stripes-hover > tbody > tr:hover,
html.dark .doc table.stripes-odd > tbody > tr:nth-of-type(odd) { background: #232327; }
html.dark .doc table.tableblock > tfoot { background: linear-gradient(180deg, #26262b 0, #1b1b1f); }

/* Admonitions (NOTE/TIP/IMPORTANT). Keep the colored label, darken the body. */
html.dark .doc .admonitionblock td.content { background: #232327; color: #c7c7cd; }
html.dark .doc .admonitionblock td.content .title { color: #e3e3e6; }

/* Search box + the Lunr results dropdown */
html.dark #search-input { background: #26262b; color: #e3e3e6; border-color: #3a3a42; }
html.dark .search-result-dropdown-menu { background: #232327; border-color: #3a3a42; box-shadow: 0 8px 16px rgba(0,0,0,.5); }
html.dark .search-result-document-title { color: #f2f2f4; }
html.dark .search-result-document-hit a { color: #c7c7cd; }
html.dark .search-result-highlight { color: var(--zrm-accent-2); }

/* Mobile navbar dropdown (default UI leaves it light) */
html.dark .navbar-menu { background: #232327; }

/* ---- Footer ---- */
.footer {
  background: #f5f5f7; color: #5d5d5d; border-top: 1px solid #e1e1e1;
  padding: 1.75rem 1.5rem; font-size: .83333rem; line-height: 1.6;
}
.footer a { color: var(--zrm-link); text-decoration: none; }
.footer a:hover { color: var(--zrm-link-hover); }
.footer-inner {
  display: flex; flex-wrap: wrap; gap: 1rem 2rem;
  justify-content: space-between; align-items: center;
}
.footer-brand { display: flex; flex-direction: column; gap: .15rem; }
.footer-title {
  font-weight: 700; font-size: 1rem;
  background: linear-gradient(135deg, var(--zrm-accent-2), var(--zrm-accent));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; width: -webkit-fit-content; width: fit-content;
}
.footer-tag { color: #8e8e8e; }
.footer-links { display: flex; gap: 1.25rem; flex-wrap: wrap; }
.footer-legal {
  display: flex; gap: 1rem 1.5rem; flex-wrap: wrap;
  margin-top: 1rem; padding-top: .85rem; border-top: 1px solid rgba(0,0,0,.08);
  color: #8e8e8e;
}
.footer-legal a { color: inherit; text-decoration: underline; }

html.dark .footer { background: #161619; border-top-color: #33333a; color: #a0a0a8; }
html.dark .footer-tag, html.dark .footer-legal { color: #8a8a92; }
html.dark .footer-legal { border-top-color: rgba(255,255,255,.08); }

/* brand mark in the navbar */
.navbar-brand .brand-item { display: flex; align-items: center; gap: .5rem; }
.brand-logo { border-radius: .35rem; display: block; }
.hero-icon img { border-radius: 1.1rem; box-shadow: 0 10px 26px rgba(0,0,0,.18); }
html.dark .hero-icon img { box-shadow: 0 10px 26px rgba(0,0,0,.5); }