/*
 * Elysian theme for the guide (BookStack), matching elysianmc.world.
 *
 * Builds on BookStack's own dark mode (the loader in Custom HTML Head Content
 * switches it on) and retunes it to Elysian's palette, fonts and night sky.
 * Every rule is scoped to html.elysian-theme, so visitors who turn the theme off
 * (footer switch) get BookStack's standard look.
 * Served by nginx at /theme/elysian/elysian.css (see _custom/nginx-guide-extra.conf).
 * Only CSS is changed, no BookStack templates, so it keeps working across
 * BookStack updates.
 */

/* Loaded after fonts.css (the fonts) and common.css (palette, night sky and the
   theme switch, shared with the wiki). */

/* BookStack's own variables, in the Elysian palette */
:root.elysian-theme {
  --font-body: var(--el-font-body);
  --font-heading: var(--el-font-heading);

  --color-primary: #c8a15f;
  --color-primary-light: rgba(200, 161, 95, 0.14);
  --color-link: #dcb56c;
  --color-page: #dcb56c;
  --color-book: #9cbf9f;
  --color-chapter: #d99a66;
  --color-bookshelf: #d58a7c;
  --color-page-draft: #b99ae0;
}

/* Page and night sky */
html.elysian-theme {
  background-color: var(--el-bg);
  color-scheme: dark;
}
html.elysian-theme body {
  background: transparent;
  color: var(--el-text);
}

/* Headings */
html.elysian-theme h1,
html.elysian-theme h2,
html.elysian-theme h3,
html.elysian-theme h4,
html.elysian-theme h5,
html.elysian-theme h6 {
  color: var(--el-text-strong);
  font-family: var(--font-heading);
  font-weight: 600;
  letter-spacing: 0.01em;
}
/* Sidebar section titles (Details, Actions, Page Navigation): small gold labels */
html.elysian-theme .tri-layout-left-contents h5,
html.elysian-theme .tri-layout-right-contents h5 {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--el-gold);
}

/* Header: dark bar with a gold rule, like the main site's navigation */
html.elysian-theme #header.primary-background {
  background-color: rgba(17, 14, 11, 0.92) !important;
  border-bottom: 1px solid rgba(200, 161, 95, 0.22);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.34);
}
html.elysian-theme #header .logo-text {
  font-family: var(--font-heading);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--el-gold-bright);
}
html.elysian-theme header .links a {
  font-size: 0.82rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--el-text-strong);
}
html.elysian-theme header .links a:hover {
  color: var(--el-gold);
  background: transparent;
}
html.elysian-theme .search-box input {
  background-color: rgba(255, 255, 255, 0.04);
  border-color: var(--el-line-gold);
  color: var(--el-text-strong);
}
html.elysian-theme .search-box input::placeholder {
  color: var(--el-muted);
}

/* Cards and panels */
html.elysian-theme .card,
html.elysian-theme .content-wrap.card,
html.elysian-theme .grid-card {
  background: linear-gradient(160deg, rgba(36, 31, 24, 0.96), rgba(26, 22, 17, 0.97));
  border: 1px solid var(--el-line);
  border-radius: 10px;
  box-shadow: var(--el-shadow);
}
html.elysian-theme .entity-list-item,
html.elysian-theme .grid-card .grid-card-footer {
  background-color: transparent;
}
html.elysian-theme .entity-list-item:hover,
html.elysian-theme .entity-list-item:focus,
html.elysian-theme .active-link-list a:hover,
html.elysian-theme .card-footer-link:hover,
html.elysian-theme button.card-footer-link:hover {
  background-color: rgba(200, 161, 95, 0.08);
}
html.elysian-theme .book-tree .sidebar-page-list .entity-list-item.selected {
  background-color: rgba(200, 161, 95, 0.12);
}

/* Text */
html.elysian-theme .text-muted {
  color: var(--el-muted) !important;
}
html.elysian-theme a {
  color: var(--color-link);
}
html.elysian-theme a:hover {
  color: var(--el-gold-bright);
}

/* Page content: readable long-form text */
html.elysian-theme .page-content {
  color: var(--el-text);
  font-size: 15px;
  line-height: 1.75;
}
html.elysian-theme .page-content h1 {
  font-size: 3rem;
  line-height: 1.1;
}
html.elysian-theme .page-content strong {
  color: var(--el-text-strong);
}
html.elysian-theme .page-content hr,
html.elysian-theme hr {
  background: var(--el-line);
}
html.elysian-theme blockquote {
  border-left-color: var(--el-gold);
  border-inline-start-color: var(--el-gold);
  background-color: rgba(200, 161, 95, 0.06);
  color: var(--el-text);
}
html.elysian-theme .code-base,
html.elysian-theme span.code,
html.elysian-theme code,
html.elysian-theme pre {
  background-color: #1a1611;
  border-color: var(--el-line);
  color: #e8d9bd;
}
html.elysian-theme table td,
html.elysian-theme table th {
  border-color: var(--el-line);
}
html.elysian-theme table th,
html.elysian-theme table thead td {
  background-color: rgba(200, 161, 95, 0.08);
  color: var(--el-text-strong);
}

/* Callouts: same meaning as BookStack's (info, success, warning, danger), in warmer tones */
html.elysian-theme .callout {
  border-radius: 0 6px 6px 0;
}
html.elysian-theme .callout.info {
  border-color: #6f9fc4;
  background-color: rgba(111, 159, 196, 0.09);
  color: #b4cde0;
}
html.elysian-theme .callout.success {
  border-color: #7fae78;
  background-color: rgba(127, 174, 120, 0.09);
  color: #b8d6b2;
}
html.elysian-theme .callout.warning {
  border-color: #d39a55;
  background-color: rgba(211, 154, 85, 0.1);
  color: #e7c39a;
}
html.elysian-theme .callout.danger {
  border-color: #d06a5e;
  background-color: rgba(208, 106, 94, 0.1);
  color: #eab0a8;
}

/* Breadcrumbs and buttons */
html.elysian-theme .breadcrumbs .icon-list-item {
  color: var(--el-text);
}
html.elysian-theme .button,
html.elysian-theme button.button {
  background-color: transparent;
  border: 1px solid var(--el-gold);
  color: var(--el-text-strong);
}
html.elysian-theme .button:hover,
html.elysian-theme button.button:hover {
  background-color: rgba(200, 161, 95, 0.1);
}

/* Bright or dark is chosen with the footer switch, so BookStack's own switch is hidden */
form[action$="/preferences/toggle-dark-mode"] {
  display: none !important;
}

/* Footer */
html.elysian-theme footer {
  border-top: 1px solid var(--el-line);
}
html.elysian-theme footer a {
  color: var(--el-gold);
}

/* Shelf and book cover backgrounds: deep tones that keep the cover art legible */
html.elysian-theme .bg-bookshelf {
  background-color: #8f4135 !important;
}
html.elysian-theme .bg-book {
  background-color: #3f5a46 !important;
}
html.elysian-theme .bg-chapter {
  background-color: #8a5530 !important;
}

/* Small lists (sidebars, book navigation) in the body font, which reads better small */
html.elysian-theme .tri-layout-left-contents .entity-list-item-name,
html.elysian-theme .tri-layout-right-contents .entity-list-item-name,
html.elysian-theme .book-tree .entity-list-item-name,
html.elysian-theme .sidebar-page-list .entity-list-item-name {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 0.9rem;
  letter-spacing: 0;
}

/* Phones: leave room for BookStack's floating "back to top" button so it doesn't
   cover the theme switch. */
@media (max-width: 600px) {
  body > footer {
    padding-bottom: 4.5rem;
  }
}
