/* ============================================================
   base.css — 黄历  ·  Shared foundation (every page)
   Includes: design tokens, reset, body, about-footer
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700&display=swap');

/* ============================================================
   DESIGN TOKENS
   ============================================================ */
:root {
  --red:        #C0392B;
  --red-dark:   #96281B;
  --red-light:  #F5B7B1;
  --gold:       #D4AC0D;
  --gold-light: #F9E79F;
  --ink:        #1A1A1A;
  --ink-soft:   #3D3D3D;
  --paper:      #FDF6E3;
  --paper-dark: #F5E6C8;
  --paper-mid:  #EDD9A3;
  --border:     #C4A35A;
  --green:      #1E8449;

  --font:       'Noto Serif SC', 'Songti SC', 'SimSun', serif;
  --card-w:     900px;
  --radius-lg:  14px;
}

/* ============================================================
   RESET & BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { height: 100%; }

body {
  font-family: var(--font);
  color: var(--ink);
  min-height: 100%;
  /* Warm earthy background — frames the card on wide screens.
     Info pages override this via .info-body in info-shared.css */
  background: linear-gradient(160deg, #B8935A 0%, #7A5020 100%);
  background-attachment: fixed;
  padding: 32px 16px 56px;
}

/* ============================================================
   ABOUT FOOTER  (appears on every page)
   ============================================================ */
.about-footer {
  padding: 20px 24px 22px;
  background: linear-gradient(180deg, var(--paper-dark) 0%, #EDD08A 100%);
  border-top: 2px solid var(--border);
  text-align: center;
}

.about-footer-inner {
  max-width: 580px;
  margin: 0 auto;
}

.about-footer-wordmark {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 4px;
  margin-bottom: 8px;
}
.about-wm-hl {
  font-size: 22px;
  font-weight: 700;
  color: var(--red);
  letter-spacing: -1px;
}
.about-wm-li {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink-soft);
  letter-spacing: 3px;
}
.about-wm-sep {
  font-size: 13px;
  color: var(--border);
  margin: 0 6px;
}
.about-wm-tagline {
  font-size: 13px;
  color: var(--ink-soft);
  letter-spacing: 0.5px;
}

.about-footer-desc {
  font-size: 12px;
  color: #6E5A38;
  line-height: 2;
  margin: 0 0 12px;
}

.about-features {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 5px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.about-features li {
  font-size: 11px;
  padding: 3px 11px;
  border: 1px solid var(--border);
  border-radius: 12px;
  color: var(--ink-soft);
  background: rgba(255, 255, 255, 0.5);
  letter-spacing: 0.3px;
}

/* ── Footer responsive ─────────────────────────────────────── */
@media (max-width: 599px) {
  .about-footer      { padding: 16px 16px 18px; }
  .about-wm-hl       { font-size: 19px; }
  .about-wm-li       { font-size: 13px; }
  .about-footer-desc { font-size: 11px; }
}

/* ── kn-* link styles (SidebarNav component, used in both sidebars) ── */
.kn-header {
  font-size: 18px;
  font-weight: 700;
  color: var(--red);
  letter-spacing: 4px;
  padding: 0 14px 14px;
  text-transform: uppercase;
  border-bottom: 1px solid var(--border);
  margin-bottom: 10px;
}

a.kn-header-link {
  display: block;
  text-decoration: none;
  color: var(--red);
}
a.kn-header-link:hover { color: var(--red-dark); }

.kn-group-title {
  font-size: 16px;
  font-weight: 700;
  color: #999;
  letter-spacing: 1px;
  padding: 10px 14px 4px;
  text-transform: uppercase;
}

.kn-link {
  display: block;
  font-size: 14px;
  color: var(--ink-soft);
  text-decoration: none;
  padding: 5px 14px 5px 20px;
  line-height: 1.4;
  border-left: 2px solid transparent;
  transition: color 0.15s, background 0.15s, border-color 0.15s;
  position: relative;
}
.kn-link:hover {
  color: var(--red);
  background: rgba(192, 57, 43, 0.07);
  border-left-color: var(--red);
}
.kn-link::before {
  content: '›';
  position: absolute;
  left: 10px;
  color: var(--border);
  font-size: 11px;
  transition: color 0.15s;
}
.kn-link:hover::before { color: var(--red); }

.kn-link.active {
  color: var(--red);
  background: rgba(192,57,43,0.07);
  border-left-color: var(--red);
}
.kn-link.active::before { color: var(--red); }

.kn-link.kn-sub {
  padding-left: 36px;
  font-size: 14px;
  color: #5c5c5c;
  border-left-color: transparent;
}
.kn-link.kn-sub::before { content: none; }
.kn-link.kn-sub:hover,
.kn-link.kn-sub.active {
  color: var(--red);
  background: rgba(192,57,43,0.07);
  border-left-color: var(--red);
}

.kn-link.kn-back { font-size: 14px; color: #999; }
.kn-link.kn-back:hover { color: var(--red); }

.kn-divider {
  height: 1px;
  background: var(--border);
  margin: 10px 14px;
  opacity: 0.6;
}