/**
 * Kids Moral Stories — left sidebar theme (overrides ../../menus.css)
 * Forest / storybook palette: readable, warm accents for “moral” content.
 */

:root {
  --moral-sidebar-start: #0f3d3a;
  --moral-sidebar-mid: #1a5c52;
  --moral-sidebar-end: #24786a;
  --moral-sidebar-header-bg: #082a28;
  --moral-sidebar-header-border: #3fa896;
  --moral-sidebar-hover: #f0c674;
  --moral-sidebar-active: #e07c4c;
  --moral-sidebar-link: rgba(255, 255, 255, 0.92);
  --moral-sidebar-link-muted: rgba(255, 255, 255, 0.78);
}

[data-bs-theme="dark"] {
  --moral-sidebar-start: #0a2624;
  --moral-sidebar-mid: #123d36;
  --moral-sidebar-end: #1a5248;
  --moral-sidebar-header-bg: #051918;
  --moral-sidebar-header-border: #2d7a6e;
  --moral-sidebar-hover: #ffd88a;
  --moral-sidebar-active: #f4a574;
}

.page-wrapper .sidebar,
.sidebar {
  background: linear-gradient(
    to bottom,
    var(--moral-sidebar-start),
    var(--moral-sidebar-mid) 42%,
    var(--moral-sidebar-end)
  );
  color: #f8fffb;
  box-shadow: 4px 0 18px rgba(8, 42, 38, 0.28);
}

.sidebar-header {
  background-color: var(--moral-sidebar-header-bg);
  border-bottom: 2px solid var(--moral-sidebar-header-border);
}

.sidebar-header h3 {
  color: #fffef8;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.sidebar-header p {
  color: rgba(232, 248, 244, 0.88);
}

.sidebar-nav a {
  color: var(--moral-sidebar-link-muted);
}

.sidebar-nav a:hover,
.sidebar-nav a.active {
  background: rgba(240, 198, 116, 0.18);
  color: #fff;
  border-left-color: var(--moral-sidebar-hover);
}

.sidebar-nav a.active {
  background: rgba(224, 124, 76, 0.22);
  border-left-color: var(--moral-sidebar-active);
  font-weight: 600;
}

.external-links {
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.external-links h4 {
  color: rgba(255, 254, 248, 0.96);
}

.external-links a {
  color: var(--moral-sidebar-link-muted);
}

.external-links a:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  border-left-color: var(--moral-sidebar-hover);
}