/*
 * Elysian theme for the wiki (Wiki.js), matching elysianmc.world and the guide.
 *
 * Builds on Wiki.js's own dark mode (the loader in the wiki's Head HTML Injection
 * 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 pick Classic in the footer
 * get the wiki's normal bright look. Served from the guide's address with the rest of
 * the theme (https://info.elysianmc.world/theme/elysian/wiki.css), loaded after
 * fonts.css and common.css. Only CSS is changed, so it keeps working
 * across Wiki.js updates. Vuetify's colour classes use !important, hence the
 * !important on the rules that replace them.
 */

/* Page and night sky: the app is see-through so the sky shows around the content */
html.elysian-theme {
  background-color: var(--el-bg);
  color-scheme: dark;
}
html.elysian-theme body,
html.elysian-theme .v-application.theme--dark,
html.elysian-theme .v-application--wrap {
  background: transparent !important;
}
html.elysian-theme .v-application {
  font-family: var(--el-font-body);
  color: var(--el-text);
}
/* Vuetify's text styles name Roboto with !important */
html.elysian-theme .v-application .headline,
html.elysian-theme .v-application .title,
html.elysian-theme .v-application .subtitle-1,
html.elysian-theme .v-application .subtitle-2,
html.elysian-theme .v-application .body-1,
html.elysian-theme .v-application .body-2,
html.elysian-theme .v-application .caption,
html.elysian-theme .v-application .overline {
  font-family: var(--el-font-body) !important;
}
html.elysian-theme .v-application .theme--dark.v-divider {
  border-color: var(--el-line);
}
html.elysian-theme .v-application .theme--dark.v-card,
html.elysian-theme .v-application .theme--dark.v-list,
html.elysian-theme .v-menu__content .theme--dark.v-list {
  background-color: var(--el-surface);
}

/* Vuetify's blue accents in gold */
html.elysian-theme .v-application .primary--text,
html.elysian-theme .v-application .blue--text {
  color: var(--el-gold) !important;
  caret-color: var(--el-gold) !important;
}
html.elysian-theme .v-application .v-btn.primary,
html.elysian-theme .v-application .v-btn--fab {
  background-color: var(--el-gold) !important;
  border-color: var(--el-gold) !important;
  color: #1a1408 !important;
}
html.elysian-theme .v-application .v-snack__wrapper.primary {
  background-color: var(--el-surface-raised) !important;
  border: 1px solid var(--el-line-gold) !important;
  color: var(--el-text-strong);
}
html.elysian-theme .v-application .v-list-item--link::before {
  background-color: var(--el-gold);
}

/* Header: dark bar with a gold rule, like the main site's navigation */
html.elysian-theme .v-application .nav-header {
  background-color: rgba(17, 14, 11, 0.96) !important;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(200, 161, 95, 0.22) !important;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.34) !important;
}
html.elysian-theme .v-application .nav-header-inner {
  background-color: transparent !important;
}
html.elysian-theme .nav-header .v-toolbar__title {
  font-family: var(--el-font-heading);
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--el-gold-bright);
}
html.elysian-theme .nav-header .v-text-field--solo .v-input__slot {
  background-color: rgba(255, 255, 255, 0.04) !important;
  box-shadow: inset 0 0 0 1px var(--el-line-gold) !important;
}
html.elysian-theme .nav-header .v-text-field input {
  color: var(--el-text-strong);
}
html.elysian-theme .nav-header .v-text-field input::placeholder {
  color: var(--el-muted);
}

/* Navigation drawer: a dark glass panel, section names as small gold labels */
html.elysian-theme .v-application .v-navigation-drawer {
  background-color: rgba(17, 14, 11, 0.84) !important;
}
html.elysian-theme .v-application .v-navigation-drawer--temporary {
  background-color: rgba(17, 14, 11, 0.97) !important;
}
html.elysian-theme .v-application .v-navigation-drawer .v-list {
  background-color: transparent !important;
}
html.elysian-theme .v-application .v-navigation-drawer__border {
  background-color: var(--el-line-gold) !important;
}
html.elysian-theme .v-application .v-navigation-drawer .v-subheader {
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--el-gold);
}
html.elysian-theme .v-application .v-navigation-drawer .v-list-item__title {
  font-size: 0.86rem;
  font-weight: 400;
  color: var(--el-text-strong);
}
html.elysian-theme .v-application .v-navigation-drawer .v-icon {
  color: rgba(200, 161, 95, 0.75) !important;
}

/* Breadcrumbs and page title band, straight on the night sky. Wiki.js sets their
   greys under #root, so these rules name it too. */
html.elysian-theme #root .v-application .v-main .v-toolbar.grey,
html.elysian-theme #root .v-application .v-main__wrap > .container.grey {
  background-color: transparent !important;
}
html.elysian-theme .v-application .v-main__wrap > .v-toolbar {
  border-bottom: 1px solid var(--el-line);
}
html.elysian-theme .v-application .v-breadcrumbs__item {
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--el-text);
}
html.elysian-theme .v-application .v-breadcrumbs__item:hover {
  color: var(--el-gold);
}
html.elysian-theme .v-application .v-breadcrumbs__divider,
html.elysian-theme .v-application .v-breadcrumbs .v-icon {
  color: var(--el-muted) !important;
}
html.elysian-theme .v-application .page-header-headings .headline {
  font-family: var(--el-font-heading) !important;
  font-size: 2.4rem !important;
  font-weight: 600;
  line-height: 1.15 !important;
  letter-spacing: 0.01em !important;
  color: var(--el-text-strong) !important;
}
html.elysian-theme .v-application .page-header-headings .caption {
  margin-top: 0.35rem;
  font-size: 0.8rem !important;
  line-height: 1.6;
  letter-spacing: 0.01em !important;
  color: var(--el-muted) !important;
}
html.elysian-theme .v-application .v-main__wrap > .v-divider {
  border-color: var(--el-line-gold);
}

/* Page content: a card for readable long-form text */
html.elysian-theme .v-application .contents {
  padding: 1.5rem 2.25rem 2.5rem;
  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);
  color: var(--el-text);
  font-size: 15px;
  line-height: 1.75;
}
html.elysian-theme .v-application .contents p,
html.elysian-theme .v-application .contents li {
  line-height: 1.75;
}
html.elysian-theme .v-application .contents h1,
html.elysian-theme .v-application .contents h2,
html.elysian-theme .v-application .contents h3,
html.elysian-theme .v-application .contents h4,
html.elysian-theme .v-application .contents h5,
html.elysian-theme .v-application .contents h6 {
  font-family: var(--el-font-heading);
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--el-text-strong);
  border-bottom-color: transparent;
}
html.elysian-theme .v-application .contents h1 {
  font-size: 2.5rem;
  line-height: 1.2;
}
html.elysian-theme .v-application .contents h2 {
  font-size: 1.9rem;
  line-height: 1.25;
}
html.elysian-theme .v-application .contents h3 {
  font-size: 1.45rem;
  line-height: 1.3;
}
html.elysian-theme .v-application .contents h4 {
  font-size: 1.2rem;
}
/* The rule under each heading, in gold instead of blue and grey */
html.elysian-theme .v-application .contents h1::after {
  background-image: linear-gradient(90deg, var(--el-gold), rgba(200, 161, 95, 0.4) 30%, rgba(200, 161, 95, 0));
}
html.elysian-theme .v-application .contents h2::after,
html.elysian-theme .v-application .contents h3::after {
  background-image: linear-gradient(90deg, rgba(200, 161, 95, 0.45), rgba(200, 161, 95, 0) 85%);
}
html.elysian-theme .v-application .contents strong {
  color: var(--el-text-strong);
}
html.elysian-theme .v-application .contents a:not(.toc-anchor):not(.is-invalid-page),
html.elysian-theme .v-application .comments-container a,
html.elysian-theme .v-application .v-footer a {
  color: #dcb56c;
}
html.elysian-theme .v-application .contents a:not(.toc-anchor):not(.is-invalid-page):hover {
  color: var(--el-gold-bright);
}
html.elysian-theme .v-application .contents .toc-anchor {
  color: var(--el-muted);
}
html.elysian-theme .v-application .contents hr {
  background-color: var(--el-line);
}
html.elysian-theme .v-application .contents code,
html.elysian-theme .v-application .contents pre {
  background-color: #1a1611;
  color: #e8d9bd;
}
html.elysian-theme .v-application .contents figure.image figcaption {
  background-color: rgba(255, 255, 255, 0.04);
  color: var(--el-muted);
}

/* Quotes and callouts: same meanings as Wiki.js's (info, success, warning, danger), in warmer tones */
html.elysian-theme .v-application .contents blockquote {
  background-color: rgba(200, 161, 95, 0.06);
  border-color: #4a3d28;
  color: var(--el-text);
}
html.elysian-theme .v-application .contents blockquote::before {
  color: var(--el-gold-bright);
}
html.elysian-theme .v-application .contents blockquote.is-info {
  background-color: rgba(111, 159, 196, 0.09);
  border-color: #3a5468;
  color: #b4cde0;
}
html.elysian-theme .v-application .contents blockquote.is-success {
  background-color: rgba(127, 174, 120, 0.09);
  border-color: #44603f;
  color: #b8d6b2;
}
html.elysian-theme .v-application .contents blockquote.is-warning {
  background-color: rgba(211, 154, 85, 0.1);
  border-color: #7a5a30;
  color: #e7c39a;
}
html.elysian-theme .v-application .contents blockquote.is-danger {
  background-color: rgba(208, 106, 94, 0.1);
  border-color: #743a33;
  color: #eab0a8;
}

/* Tables */
html.elysian-theme .v-application .contents table {
  border-color: var(--el-line-gold);
}
html.elysian-theme .v-application .contents th,
html.elysian-theme .v-application .contents td {
  border-color: var(--el-line);
}
html.elysian-theme .v-application .contents th {
  background-color: rgba(200, 161, 95, 0.1);
  color: var(--el-text-strong);
}
html.elysian-theme .v-application .contents tr:nth-child(even) td {
  background-color: rgba(255, 255, 255, 0.02);
}

/* Infoboxes (the custom box on People pages) */
html.elysian-theme .v-application .contents .infobox {
  background: var(--el-surface-raised);
  border-color: var(--el-line-gold);
  box-shadow: var(--el-shadow);
}
html.elysian-theme .v-application .contents .infobox td {
  border-color: var(--el-line);
  background-color: transparent;
}
html.elysian-theme .v-application .contents .infobox figcaption {
  background-color: rgba(255, 255, 255, 0.03);
  border-top-color: var(--el-line);
  color: var(--el-muted);
}

/* Side cards: contents, tags, talk, last edited, share */
html.elysian-theme .v-application .page-col-sd .v-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 !important;
  box-shadow: var(--el-shadow) !important;
}
html.elysian-theme .v-application .page-col-sd .v-list,
html.elysian-theme .v-application .page-col-sd .v-toolbar {
  background-color: transparent !important;
}
html.elysian-theme #root .v-application .page-col-sd .overline {
  font-size: 0.68rem !important;
  font-weight: 500;
  letter-spacing: 0.2em !important;
  color: var(--el-gold) !important;
}
html.elysian-theme .v-application .page-col-sd .v-list-item__title {
  font-size: 0.84rem;
  font-weight: 400;
  color: var(--el-text-strong);
}
html.elysian-theme .v-application .page-col-sd .v-icon {
  color: rgba(200, 161, 95, 0.75) !important;
}
html.elysian-theme .v-application .page-col-sd .body-2 {
  color: var(--el-text-strong) !important;
}
html.elysian-theme .v-application .page-col-sd .caption {
  color: var(--el-muted) !important;
}
html.elysian-theme .v-application .page-col-sd .v-btn--outlined {
  color: var(--el-gold) !important;
  border-color: var(--el-line-gold) !important;
}
html.elysian-theme .v-application .page-col-sd .v-chip {
  background-color: rgba(200, 161, 95, 0.12) !important;
  border: 1px solid var(--el-line-gold) !important;
  color: var(--el-text-strong) !important;
}

/* Comments */
html.elysian-theme .v-application .comments-container {
  margin-top: 1.5rem;
  overflow: hidden;
  border: 1px solid var(--el-line);
  border-radius: 10px;
  box-shadow: var(--el-shadow);
}
html.elysian-theme .v-application .comments-header {
  background-color: rgba(200, 161, 95, 0.1);
  color: var(--el-text-strong);
}
html.elysian-theme .v-application .comments-header .v-icon {
  color: var(--el-gold) !important;
}
html.elysian-theme .v-application .comments-main {
  background-color: rgba(26, 22, 17, 0.95);
}
html.elysian-theme .v-application .comments-main .blue-grey--text {
  color: var(--el-muted) !important;
}

/* Footer and the legal line under it (Body HTML Injection) */
html.elysian-theme .v-application .v-footer {
  background-color: rgba(17, 14, 11, 0.92) !important;
  border-top: 1px solid var(--el-line-gold) !important;
}
html.elysian-theme .v-application .v-footer .caption {
  color: var(--el-muted) !important;
}
html.elysian-theme .elysian-legal {
  background: rgba(17, 14, 11, 0.92);
  font-family: var(--el-font-body);
  color: #8d8478;
}
html.elysian-theme .elysian-legal a {
  color: var(--el-gold);
}

/* Phones and small tablets: a tighter content card */
@media (max-width: 600px) {
  html.elysian-theme .v-application .contents {
    padding: 1rem 1.1rem 2rem;
  }
  html.elysian-theme .v-application .page-header-headings .headline {
    font-size: 2rem !important;
  }
}