/* ── Calyx — Theme overrides ─────────────────────────────────────────────────
   Loads after style.css. Overrides CSS variables only — structure is shared.
   Calyx palette: warm parchment + forest green + amber.
──────────────────────────────────────────────────────────────────────────── */

/* ── Light mode overrides (scoped to Calyx page) ───────────────────────────── */
body.calyx-page {
  --bg-screen:      #F4F0E8;
  --bg-card:        #FDFAF4;
  --card-border:    #B5A882;
  --deep-blue:      #2C2416;
  --muted-slate:    #6B5F46;
  --btn-blue:       #4A7C59;
  --btn-blue-dk:    #2F5238;
  --neon-blue:      #C8832A;
  --nav-inactive:   #9A8C74;
  --shadow:         0 2px 16px rgba(44, 36, 22, 0.10);
  --shadow-card:    0 4px 24px rgba(44, 36, 22, 0.12);
}

/* ── Dark mode overrides (scoped to Calyx page) ────────────────────────────── */
html[data-theme="dark"] body.calyx-page {
  --bg-screen:      #131A12;
  --bg-card:        #1C2619;
  --card-border:    #3A5235;
  --deep-blue:      #E8E0CC;
  --muted-slate:    #8FA882;
  --btn-blue:       #7AB88A;
  --btn-blue-dk:    #4A7C59;
  --neon-blue:      #D4973E;
  --nav-inactive:   #5E7A55;
  --shadow:         0 2px 16px rgba(0, 0, 0, 0.40);
  --shadow-card:    0 4px 24px rgba(0, 0, 0, 0.50);
}

/* ── Flower background ──────────────────────────────────────────────────────── */
.cx-flower {
  position: fixed;
  top: 0;
  right: 0;
  height: 100vh;
  width: auto;
  max-width: 55vw;
  object-fit: cover;
  object-position: left top;
  opacity: 0.22;
  pointer-events: none;
  user-select: none;
  z-index: 0;
  transition: opacity 0.25s ease;
}

[data-theme="dark"] .cx-flower {
  opacity: 0.10;
  filter: saturate(0.6) brightness(0.8);
}

/* Ensure content sits above the flower */
.nav, .page-content, .footer { position: relative; z-index: 1; }

/* ── Calyx page layout ──────────────────────────────────────────────────────── */
.cx-section {
  padding: 3rem 0;
}

.cx-body-wrap {
  max-width: 620px;
}

.cx-body {
  font-size: 1.05rem;
  line-height: 1.78;
  color: var(--muted-slate);
  margin-bottom: 1.25rem;
}

/* ── Status card ────────────────────────────────────────────────────────────── */
.cx-status-card {
  margin-top: 2rem;
  background: var(--bg-card);
  border: 1px solid var(--card-border);
  border-left: 3px solid var(--neon-blue);
  border-radius: var(--radius-sm);
  padding: 1.25rem 1.5rem;
  box-shadow: var(--shadow-card);
}

.cx-status-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--neon-blue);
  display: block;
  margin-bottom: 0.6rem;
}

.cx-status-card p {
  font-size: 0.92rem;
  line-height: 1.7;
  color: var(--muted-slate);
  margin: 0;
}

.cx-status-card p + p {
  margin-top: 0.75rem;
}

/* ── Mobile ─────────────────────────────────────────────────────────────────── */
@media (max-width: 700px) {
  .cx-flower {
    position: fixed;
    top: auto;
    bottom: 0;
    height: 45vh;
    max-width: 100vw;
    opacity: 0.13;
  }
}

/* ── Reduced motion ─────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .cx-flower { transition: none; }
}