/* ==========================================================================
   ShinyVale Wiki — custom Material for MkDocs theme
   Palette derived from the actual ShinyVale server logo (icy blue / white).
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap");

/* ---------- Light scheme: "shinyvale-light" ---------- */
[data-md-color-scheme="shinyvale-light"] {
  --md-primary-fg-color:        #0E7FBF;
  --md-primary-fg-color--light: #37BFF9;
  --md-primary-fg-color--dark:  #0B5D8C;
  --md-primary-bg-color:        #FFFFFF;
  --md-accent-fg-color:         #17A9E8;

  --md-default-bg-color:        #FBFDFF;
  --md-default-fg-color:        #16222E;
  --md-default-fg-color--light: #47586A;
  --md-default-fg-color--lighter: #7C8CA0;

  --md-typeset-a-color:         #0E7FBF;

  --shinyvale-surface:          #FFFFFF;
  --shinyvale-surface-2:        #EEF6FC;
  --shinyvale-border:           #D6E6F2;
  --shinyvale-shadow:           0 1px 2px rgba(14,50,80,0.06), 0 8px 24px -12px rgba(14,50,80,0.12);
}

/* ---------- Dark scheme: "shinyvale-dark" ---------- */
[data-md-color-scheme="shinyvale-dark"] {
  /* Note: --md-primary-fg-color drives more than the header — Material also uses it
     for outline-button text/borders, active nav/TOC highlights, etc. It must stay a
     bright, visible color here. The actual dark header/tabs backgrounds are set
     separately below with hardcoded hex values, so this doesn't affect those. */
  --md-primary-fg-color:        #56C6FF;
  --md-primary-fg-color--light: #8AD4FF;
  --md-primary-fg-color--dark:  #2E9FDE;
  --md-primary-bg-color:        #E9F6FF;
  --md-accent-fg-color:         #56C6FF;

  --md-default-bg-color:        #0B1017;
  --md-default-fg-color:        #E7F1FA;
  --md-default-fg-color--light: #A9BAC9;
  --md-default-fg-color--lighter: #718396;

  --md-typeset-a-color:         #56C6FF;

  --md-code-bg-color:           #121A24;
  --md-code-fg-color:           #DCE7F0;

  --shinyvale-surface:          #121A24;
  --shinyvale-surface-2:        #17222E;
  --shinyvale-border:           #23303F;
  --shinyvale-shadow:           0 1px 2px rgba(0,0,0,0.3), 0 12px 28px -14px rgba(0,0,0,0.55);
}

/* ---------- Typography ---------- */
body, .md-typeset {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.md-typeset code, .md-typeset pre, .md-typeset kbd {
  font-family: "JetBrains Mono", ui-monospace, Consolas, monospace;
}
.md-header__title, .md-nav__title {
  font-weight: 700;
}
.md-typeset h1 {
  font-weight: 800;
  letter-spacing: -0.01em;
}
.md-typeset h2 {
  font-weight: 700;
  letter-spacing: -0.005em;
}

/* ---------- Header / tabs: subtle icy gradient instead of flat fill ---------- */
[data-md-color-scheme="shinyvale-light"] .md-header {
  background: linear-gradient(135deg, #0E7FBF 0%, #1596D6 60%, #17A9E8 100%);
}
[data-md-color-scheme="shinyvale-light"] .md-tabs {
  background: linear-gradient(90deg, #0B5D8C 0%, #0E7FBF 100%);
}
[data-md-color-scheme="shinyvale-dark"] .md-header {
  background: #0B1017;
  border-bottom: 1px solid var(--shinyvale-border);
}
[data-md-color-scheme="shinyvale-dark"] .md-tabs {
  background: #0E1620;
  border-bottom: 1px solid var(--shinyvale-border);
}

/* ---------- Inline command code — make /commands pop ---------- */
.md-typeset code {
  border-radius: 4px;
  font-size: 0.85em;
  padding: 0.1em 0.45em;
}
[data-md-color-scheme="shinyvale-light"] .md-typeset code {
  background-color: var(--shinyvale-surface-2);
  color: #0B5D8C;
}
[data-md-color-scheme="shinyvale-dark"] .md-typeset code {
  background-color: #16222E;
  color: #7FD4FF;
}

/* ---------- Tables ---------- */
.md-typeset table:not([class]) {
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--shinyvale-border);
  box-shadow: none;
}
.md-typeset table:not([class]) th {
  background-color: var(--shinyvale-surface-2);
  font-family: "JetBrains Mono", monospace;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--md-default-fg-color--light);
}
.md-typeset table:not([class]) td code,
.md-typeset table:not([class]) th code {
  white-space: nowrap;
}

/* ---------- Homepage hero ---------- */
.sv-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.9rem;
  padding: 2.6rem 1rem 2.2rem;
  margin: -0.2rem -0.8rem 2.2rem;
  border-radius: 16px;
  background: linear-gradient(160deg, rgba(14,127,191,0.10), rgba(23,169,232,0.03));
  border: 1px solid var(--shinyvale-border);
}
.sv-hero img.sv-hero-logo {
  max-width: 340px;
  width: 70%;
  height: auto;
  filter: drop-shadow(0 6px 18px rgba(14,127,191,0.25));
}
.sv-hero p.sv-tagline-primary {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--md-default-fg-color);
  max-width: 42rem;
  margin: 0.2rem 0 0;
  letter-spacing: -0.01em;
}
[data-md-color-scheme="shinyvale-dark"] .sv-hero p.sv-tagline-primary {
  color: #F3F8FC !important;
}
.sv-hero p.sv-tagline {
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--md-default-fg-color--light);
  max-width: 46rem;
  margin: 0;
}
.sv-hero .sv-hero-actions {
  display: flex;
  gap: 0.7rem;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 0.4rem;
}
.sv-hero .sv-hero-actions .md-button {
  border-radius: 8px;
}

/* ---------- Nav card grid ---------- */
.sv-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 0.9rem;
  margin: 1.6rem 0 2rem;
}
.sv-card {
  display: block;
  padding: 1.1rem 1.25rem;
  border-radius: 10px;
  border: 1px solid var(--shinyvale-border);
  background: var(--shinyvale-surface);
  text-decoration: none !important;
  color: var(--md-default-fg-color) !important;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.sv-card:hover {
  border-color: var(--md-accent-fg-color);
  transform: translateY(-2px);
}
.sv-card .sv-card-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 700;
  font-size: 1.02rem;
  margin-bottom: 0.3rem;
  color: var(--md-primary-fg-color--light);
}
[data-md-color-scheme="shinyvale-dark"] .sv-card .sv-card-title {
  color: var(--md-accent-fg-color);
}
.sv-card .sv-card-desc {
  font-size: 0.87rem;
  color: var(--md-default-fg-color--light);
  line-height: 1.5;
}

/* ---------- Quick-command strip ---------- */
.sv-cmd-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 1rem 0 1.8rem;
}
.sv-cmd-strip code {
  font-size: 0.82rem;
  padding: 0.35em 0.7em;
}

/* ---------- Admonition tweaks: keep them calm, not neon ---------- */
.md-typeset .admonition,
.md-typeset details {
  border-radius: 8px;
  border-width: 1px;
}

/* Admonitions/callouts (!!! tip, !!! info, !!! warning, etc.) keep Material's own
   light, type-tinted background in BOTH themes — that background never became dark
   mode-aware. The broad dark-mode text rule above (.md-typeset p/li/etc.) doesn't
   know that, so it was putting light-on-light-callout text. Force dark text back on
   top of these specific light-background boxes, regardless of page theme. Higher
   selector specificity than the broad rule above, so this wins without needing
   source-order luck. */
.md-typeset .admonition,
.md-typeset details {
  color: #16222E;
}
.md-typeset .admonition p,
.md-typeset .admonition li,
.md-typeset details p,
.md-typeset details li {
  color: #16222E !important;
}
.md-typeset .admonition-title,
.md-typeset summary {
  color: #0F1922 !important;
  font-weight: 700;
}
.md-typeset .admonition a,
.md-typeset details a {
  color: #0B5D8C !important;
  text-decoration: underline;
}
.md-typeset .admonition a:hover,
.md-typeset details a:hover {
  color: #0E7FBF !important;
}

/* ---------- Dark-mode text-contrast safety net ----------
   Explicit, hardcoded colors (not just custom properties) for every element
   flagged as low-contrast, so the fix doesn't depend on exactly how far
   Material's own compiled CSS lets our variables cascade. */

/* Headings everywhere */
[data-md-color-scheme="shinyvale-dark"] .md-typeset h1,
[data-md-color-scheme="shinyvale-dark"] .md-typeset h2,
[data-md-color-scheme="shinyvale-dark"] .md-typeset h3,
[data-md-color-scheme="shinyvale-dark"] .md-typeset h4,
[data-md-color-scheme="shinyvale-dark"] .md-typeset h5,
[data-md-color-scheme="shinyvale-dark"] .md-typeset h6 {
  color: #F3F8FC !important;
}
[data-md-color-scheme="shinyvale-dark"] .md-typeset p,
[data-md-color-scheme="shinyvale-dark"] .md-typeset li,
[data-md-color-scheme="shinyvale-dark"] .md-typeset {
  color: #D7E3ED;
}
[data-md-color-scheme="shinyvale-dark"] .md-typeset a {
  color: #56C6FF;
}

/* Hero */
[data-md-color-scheme="shinyvale-dark"] .sv-hero h1 {
  color: #FFFFFF !important;
}
[data-md-color-scheme="shinyvale-dark"] .sv-hero p.sv-tagline {
  color: #C9D8E4 !important;
}

/* Buttons — both the filled primary and the outlined secondary style */
[data-md-color-scheme="shinyvale-dark"] .md-typeset .md-button {
  color: #EAF6FF !important;
  border-color: #5C8CAA !important;
  background-color: transparent;
}
[data-md-color-scheme="shinyvale-dark"] .md-typeset .md-button:hover,
[data-md-color-scheme="shinyvale-dark"] .md-typeset .md-button:focus-visible {
  color: #08131C !important;
  background-color: #56C6FF !important;
  border-color: #56C6FF !important;
}
[data-md-color-scheme="shinyvale-dark"] .md-typeset .md-button--primary {
  color: #08131C !important;
  background-color: #56C6FF !important;
  border-color: #56C6FF !important;
}
[data-md-color-scheme="shinyvale-dark"] .md-typeset .md-button--primary:hover,
[data-md-color-scheme="shinyvale-dark"] .md-typeset .md-button--primary:focus-visible {
  background-color: #8AD4FF !important;
  border-color: #8AD4FF !important;
  color: #08131C !important;
}

/* Cards */
[data-md-color-scheme="shinyvale-dark"] .sv-card .sv-card-title {
  color: #56C6FF !important;
}
[data-md-color-scheme="shinyvale-dark"] .sv-card .sv-card-desc {
  color: #B9C8D6 !important;
}
[data-md-color-scheme="shinyvale-dark"] .sv-card {
  color: #D7E3ED !important;
}

/* Left sidebar + right-side "On this page" TOC (both use .md-nav) */
[data-md-color-scheme="shinyvale-dark"] .md-nav__title {
  color: #EAF2F8 !important;
}
[data-md-color-scheme="shinyvale-dark"] .md-nav__link {
  color: #A9BCCC !important;
}
[data-md-color-scheme="shinyvale-dark"] .md-nav__link:hover,
[data-md-color-scheme="shinyvale-dark"] .md-nav__link:focus {
  color: #FFFFFF !important;
}
[data-md-color-scheme="shinyvale-dark"] .md-nav__link--active,
[data-md-color-scheme="shinyvale-dark"] .md-nav__item--active > .md-nav__link,
[data-md-color-scheme="shinyvale-dark"] .md-nav__link[aria-current="page"] {
  color: #56C6FF !important;
  font-weight: 600;
}

/* Top tab bar: Welcome / Gameplay / Commands / Features / Rules / Help */
[data-md-color-scheme="shinyvale-dark"] .md-tabs__link {
  color: #C3D3E0 !important;
  opacity: 1 !important;
}
[data-md-color-scheme="shinyvale-dark"] .md-tabs__link:hover,
[data-md-color-scheme="shinyvale-dark"] .md-tabs__link--active {
  color: #FFFFFF !important;
}

/* Header title/icons */
[data-md-color-scheme="shinyvale-dark"] .md-header__title,
[data-md-color-scheme="shinyvale-dark"] .md-header__button {
  color: #EAF6FF !important;
}

/* Search box + placeholder */
[data-md-color-scheme="shinyvale-dark"] .md-search__input {
  color: #EAF2F8 !important;
  background-color: #16222E !important;
}
[data-md-color-scheme="shinyvale-dark"] .md-search__input::placeholder {
  color: #8497A8 !important;
  opacity: 1 !important;
}

/* Same safety net for light mode, so nothing regresses there either */
[data-md-color-scheme="shinyvale-light"] .sv-hero h1 {
  color: #0B1B28 !important;
}
[data-md-color-scheme="shinyvale-light"] .md-typeset .md-button--primary {
  color: #FFFFFF !important;
}
[data-md-color-scheme="shinyvale-light"] .md-typeset .md-button {
  color: #0B5D8C !important;
  border-color: #0B5D8C !important;
}

/* ---------- Footer ---------- */
/* Explicit per-scheme colors, not tied to --md-primary-fg-color (that token now has
   to stay a bright, visible blue for button/link legibility — see the dark scheme
   block above). */
[data-md-color-scheme="shinyvale-light"] .md-footer {
  background: linear-gradient(135deg, #0B5D8C 0%, #0E7FBF 100%);
}
[data-md-color-scheme="shinyvale-dark"] .md-footer {
  background: #0B1017;
  border-top: 1px solid var(--shinyvale-border);
}