/* ============================================================
   Thistle & Moss — WriteFreely Custom Theme
   Drop this file at: /opt/writefreely/static/local/custom.css
   ============================================================ */

/* ── Palette ─────────────────────────────────────────────────
   Background:   #fef9f0  (warm cream)
   Card:         #f5ede0  (parchment)
   Card inner:   #fdfaf5  (near white)
   Accent/gold:  #b8924a  (antique gold)
   Text primary: #3a2e22  (dark walnut)
   Text muted:   #7a6a58  (warm taupe)
   Border:       #e0d4c0  (soft linen)
   ──────────────────────────────────────────────────────────── */

:root {
  --bg:        #fef9f0;
  --card:      #f5ede0;
  --card-in:   #fdfaf5;
  --gold:      #b8924a;
  --gold-dark: #9a7a3a;
  --text:      #3a2e22;
  --muted:     #7a6a58;
  --border:    #e0d4c0;
  --radius:    12px;
}

/* ── Base ──────────────────────────────────────────────────── */
body, html {
  background-color: var(--bg) !important;
  color: var(--text) !important;
  font-family: 'Georgia', 'Palatino Linotype', serif !important;
}

/* ── Navigation ────────────────────────────────────────────── */
nav#site-nav,
header nav,
.nav {
  background-color: var(--bg) !important;
  border-bottom: 1px solid var(--border) !important;
}

nav a, header a, .nav a {
  color: var(--muted) !important;
  font-family: -apple-system, 'Segoe UI', sans-serif !important;
  font-size: 0.9rem !important;
  letter-spacing: 0.02em;
}

nav a:hover, header a:hover {
  color: var(--gold) !important;
}

/* ── Site title / header ───────────────────────────────────── */
h1.site-title, #blog-title, .site-title {
  color: var(--gold) !important;
  font-family: 'Georgia', serif !important;
  letter-spacing: -0.01em;
}

/* ── Page headings ─────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  color: var(--gold) !important;
  font-family: 'Georgia', serif !important;
}

/* ── Body text ─────────────────────────────────────────────── */
p, li, td, th, blockquote {
  color: var(--text) !important;
  line-height: 1.8 !important;
}

/* ── Links ─────────────────────────────────────────────────── */
a {
  color: var(--gold) !important;
}

a:hover {
  color: var(--gold-dark) !important;
  text-decoration: underline;
}

/* ── Post / content cards ──────────────────────────────────── */
.post, article, .post-title,
.posts li, .post-list li {
  background: var(--card-in) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  padding: 1.5rem 2rem !important;
  margin-bottom: 1.25rem !important;
  box-shadow: 0 2px 8px rgba(58,46,34,0.07) !important;
}

/* ── Main content wrapper ──────────────────────────────────── */
#wrapper, main, .content, #content {
  background: var(--bg) !important;
}

/* ── Landing / instance home panel ────────────────────────── */
#instance-header, .site-header-content {
  background: var(--card) !important;
  border-radius: var(--radius) !important;
  padding: 2.5rem !important;
  border: 1px solid var(--border) !important;
  box-shadow: 0 4px 16px rgba(58,46,34,0.08) !important;
  text-align: center;
  margin-bottom: 2rem;
}

/* ── Buttons ────────────────────────────────────────────────── */
button, .btn, input[type="submit"],
a.btn, .button {
  background-color: var(--gold) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 24px !important;
  padding: 0.55rem 1.4rem !important;
  font-family: -apple-system, sans-serif !important;
  font-size: 0.9rem !important;
  cursor: pointer !important;
  transition: background 0.2s ease !important;
}

button:hover, .btn:hover, input[type="submit"]:hover {
  background-color: var(--gold-dark) !important;
}

/* ── Input fields ──────────────────────────────────────────── */
input[type="text"], input[type="email"],
input[type="password"], textarea, select {
  background: var(--card-in) !important;
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
  color: var(--text) !important;
  padding: 0.5rem 0.75rem !important;
}

input:focus, textarea:focus {
  border-color: var(--gold) !important;
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(184,146,74,0.2) !important;
}

/* ── Editor / writing pad ──────────────────────────────────── */
#post-text, .ProseMirror, #editor {
  background: var(--card-in) !important;
  color: var(--text) !important;
  caret-color: var(--gold) !important;
}

/* ── Dividers ───────────────────────────────────────────────── */
hr {
  border-color: var(--border) !important;
  opacity: 0.7;
}

/* ── Blockquotes ────────────────────────────────────────────── */
blockquote {
  border-left: 3px solid var(--gold) !important;
  background: var(--card) !important;
  padding: 0.75rem 1.25rem !important;
  border-radius: 0 8px 8px 0 !important;
  font-style: italic;
  color: var(--muted) !important;
}

/* ── Code ───────────────────────────────────────────────────── */
code, pre {
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
  border-radius: 6px !important;
  color: var(--text) !important;
  font-size: 0.88rem !important;
}

/* ── Footer ─────────────────────────────────────────────────── */
footer, #footer {
  background: var(--bg) !important;
  border-top: 1px solid var(--border) !important;
  color: var(--muted) !important;
  font-size: 0.85rem !important;
}

footer a {
  color: var(--muted) !important;
}

footer a:hover {
  color: var(--gold) !important;
}

/* ── Admin panel ─────────────────────────────────────────────── */
#admin-header, .admin-actions {
  background: var(--card) !important;
  border-bottom: 1px solid var(--border) !important;
}

/* ── Reader / local timeline ─────────────────────────────────── */
#reader header, .reader-header {
  background: var(--card) !important;
}

/* ── Muted / secondary text ──────────────────────────────────── */
.muted, .post-meta, time, .date {
  color: var(--muted) !important;
  font-size: 0.85rem !important;
}

/* ── Scrollbar (Webkit) ──────────────────────────────────────── */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: var(--bg);
}
::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--gold);
}