/* ═══════════════════════════════════════════════════════
   wyrd.im — custom palette, typography, and overrides
   layered on top of the Hermit theme
   ═══════════════════════════════════════════════════════ */

/* ─── Google Fonts ─────────────────────────────────────
   Cinzel:        logotype, site title, nav
   IM Fell English: post titles, subheadings
   Spectral:      body, long-form reading
   ─────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700&family=IM+Fell+English:ital@0;1&family=Spectral:ital,wght@0,300;0,400;0,600;1,400&display=swap');

/* ─── Palette (dark-first) ─────────────────────────────
   #1a1815  warm near-black     background
   #e8e0d0  parchment/vellum    body text
   #a07820  dark gold           accent
   #4a6878  nordic water-blue   secondary accent
   #c89030  amber / firelight   links, hover
   #3d4e58  slate               borders, dividers
   #6b7d8c  muted slate         meta, dates, captions
   ─────────────────────────────────────────────────────── */

/* ─── Base ─────────────────────────────────────────────── */
html {
  background: #1a1815;
}

body,
button,
input,
select,
textarea {
  color: #e8e0d0;
  font-family: 'Spectral', Georgia, 'Times New Roman', serif;
  font-size: 18px;
  line-height: 1.75;
  letter-spacing: 0.01em;
}

/* ─── Headings ─────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  font-family: 'IM Fell English', Georgia, serif;
  color: #e8e0d0;
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: 0.01em;
}

/* ─── Site branding (header nav bar) ───────────────────── */
.site-branding a {
  font-family: 'Cinzel', serif;
  font-weight: 600;
  font-size: 1.1em;
  letter-spacing: 0.1em;
  color: #e8e0d0 !important;
  box-shadow: none !important;
  text-transform: lowercase;
}

.site-branding a:hover {
  color: #c89030 !important;
  box-shadow: none !important;
}

/* ─── Nav links ────────────────────────────────────────── */
.site-nav a,
#home-nav a {
  font-family: 'Cinzel', serif;
  font-size: 0.8em;
  letter-spacing: 0.14em;
  text-transform: lowercase;
  color: #e8e0d0;
  box-shadow: none !important;
}

.site-nav a:hover,
#home-nav a:hover {
  color: #c89030;
  box-shadow: none !important;
}

/* ─── Home splash ──────────────────────────────────────── */
h1#home-title {
  font-family: 'Cinzel', serif;
  font-weight: 700;
  font-size: 3.5em;
  letter-spacing: 0.2em;
  color: #e8e0d0;
  text-transform: lowercase;
}

p#home-subtitle {
  font-family: 'IM Fell English', Georgia, serif;
  font-style: italic;
  font-size: 1.15em;
  color: #6b7d8c;
  letter-spacing: 0.05em;
}

/* ─── Links ────────────────────────────────────────────── */
a {
  color: #c89030;
}

a:hover {
  color: #e8d090;
}

/* Override Hermit's box-shadow underline with amber */
.content a,
.post-item a {
  box-shadow: inset 0 -3px 0 rgba(200, 144, 48, 0.35) !important;
  color: #c89030;
}

.content a:hover,
.post-item a:hover {
  box-shadow: inset 0 -1.1em 0 rgba(200, 144, 48, 0.2) !important;
  color: #e8e0d0 !important;
}

/* Post title links — no underline gimmick, just color */
.post-title a,
h1.post-title a {
  box-shadow: none !important;
  color: #e8e0d0;
}

.post-title a:hover {
  color: #c89030 !important;
  box-shadow: none !important;
}

/* ─── Post list meta (dates, reading time) ─────────────── */
.post-item .meta,
.post-meta,
time,
.post-date {
  font-family: 'Spectral', Georgia, serif;
  font-style: italic;
  color: #6b7d8c;
  font-size: 0.9em;
}

/* ─── Content area ─────────────────────────────────────── */
.content,
.post-content {
  font-size: 1em;
  line-height: 1.8;
}

.content h1 { font-size: 1.9em; }
.content h2 { font-size: 1.5em; margin-top: 2em; }
.content h3 { font-size: 1.25em; margin-top: 1.6em; }

/* Paragraph spacing */
.content p {
  margin-bottom: 1.4em;
}

/* ─── Horizontal rules ─────────────────────────────────── */
hr {
  border: none;
  border-top: 1px solid #3d4e58;
  opacity: 0.7;
  margin: 2.5em 0;
}

/* ─── Blockquotes ──────────────────────────────────────── */
blockquote {
  border-left: 3px solid #4a6878;
  padding-left: 1.2em;
  color: #b8b0a0;
  font-style: italic;
  margin-left: 0;
}

/* ─── Code ─────────────────────────────────────────────── */
code {
  font-size: 0.88em;
  background: #12100e;
  padding: 0.15em 0.4em;
  border-radius: 3px;
  color: #c89030;
}

pre {
  background: #12100e !important;
  border-left: 3px solid #3d4e58;
  border-radius: 0 4px 4px 0;
}

pre code {
  background: transparent;
  color: #e8e0d0;
  padding: 0;
}

/* ─── Scrollbar ────────────────────────────────────────── */
::-webkit-scrollbar {
  background: #1a1815;
}

::-webkit-scrollbar-thumb {
  background: #3d4e58;
}

::-webkit-scrollbar-thumb:hover {
  background: #6b7d8c;
}

/* ─── Footer ───────────────────────────────────────────── */
footer,
#home-footer {
  color: #6b7d8c;
  font-size: 0.85em;
}

footer a,
#home-footer a {
  color: #6b7d8c;
  box-shadow: none !important;
}

footer a:hover,
#home-footer a:hover {
  color: #c89030;
  box-shadow: none !important;
}

/* ─── Light mode ───────────────────────────────────────── */
@media (prefers-color-scheme: light) {
  html                         { background: #f5efe0; }
  body, button, input, select, textarea { color: #1a1815; }
  h1, h2, h3, h4, h5, h6      { color: #1a1815; }

  .site-branding a             { color: #1a1815 !important; }
  .site-branding a:hover       { color: #8b6418 !important; }
  .site-nav a, #home-nav a     { color: #1a1815; }
  .site-nav a:hover, #home-nav a:hover { color: #8b6418; }

  h1#home-title                { color: #1a1815; }
  p#home-subtitle              { color: #4a6878; }

  a                            { color: #8b6418; }
  a:hover                      { color: #5a3e0a; }

  .content a, .post-item a {
    box-shadow: inset 0 -3px 0 rgba(139, 100, 24, 0.35) !important;
    color: #8b6418;
  }
  .content a:hover, .post-item a:hover {
    box-shadow: inset 0 -1.1em 0 rgba(139, 100, 24, 0.15) !important;
    color: #1a1815 !important;
  }

  .post-item .meta, .post-meta, time, .post-date { color: #4a6878; }

  blockquote                   { color: #4a5858; border-left-color: #4a6878; }

  code                         { background: #e0d8c8; color: #8b6418; }
  pre                          { background: #e0d8c8 !important; }
  pre code                     { color: #1a1815; }

  footer, #home-footer         { color: #4a6878; }
  footer a, #home-footer a     { color: #4a6878; }
  footer a:hover, #home-footer a:hover { color: #8b6418; }
}