/* ══════════════════════════════════════════════════
   Ghibli palette
   Parchment   #F6F0E4  bg
   Sage mint   #D8EAD3  cards
   Forest      #5A8F62  accent / links
   Deep forest #3A6647  hover
   Teal        #7BBDB8  borders / highlights
   Rose        #D4989E  tags
   Ink         #2E2820  text
   Mist        #7A6E65  secondary text
   Pill        #B8D4B0  nav bg
   ══════════════════════════════════════════════════ */

/* ── Custom cursor ── */
*, *::before, *::after {
  cursor: url('/images/cursor.png') 36 0, auto !important;
}

/* ── Reset & globals ── */
html { color-scheme: light !important; }
html.dark, html.dark * { color-scheme: light !important; }

*, *::before, *::after {
  box-sizing: border-box;
}

body,
html.dark body {
  background-color: #F6F0E4 !important;
  color: #2E2820 !important;
  font-family: 'Klee One', 'Hiragino Kaku Gothic ProN', cursive !important;
  line-height: 1.75 !important;
}

/* ══ TYPOGRAPHY ══ */

/* Fredoka for all headings and site title — the bubbly storybook feel */
.post-card-title {
  font-family: 'Vividly', sans-serif !important;
  font-weight: 400 !important;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Mogena', serif !important;
  color: #2E2820 !important;
  font-weight: 400 !important;
  letter-spacing: 0.02em !important;
}

p, li, span, time, blockquote, figcaption, .prose * {
  font-family: 'Lora', serif !important;
}

/* ══ HEADER ══ */

header,
html.dark header {
  background-color: #F6F0E4 !important;
  border-bottom: 1px solid rgba(160,190,155,0.6) !important;
  box-shadow: none !important;
}

/* Site title sparkle + Fredoka */
header a {
  font-family: 'Mogena', serif !important;
  font-weight: 400 !important;
  font-size: 1.6rem !important;
  color: #3A6647 !important;
  text-decoration: none !important;
  letter-spacing: 0.04em !important;
}

header a:hover {
  color: #5A8F62 !important;
}

/* ══ NAV PILLS ══ */

nav a,
html.dark nav a {
  font-family: 'Vividly', sans-serif !important;
  font-weight: 400 !important;
  font-size: 1.5rem !important;
  color: #3A6647 !important;
  background-color: #B8D4B0 !important;
  border-radius: 999px !important;
  padding: 5px 18px !important;
  text-decoration: none !important;
  transition: background-color 0.2s, color 0.2s, transform 0.15s !important;
  display: inline-block !important;
  border: none !important;
}

nav a:hover,
html.dark nav a:hover {
  background-color: #A0C89A !important;
  color: #2E4A30 !important;
  transform: translateY(-1px) !important;
}

/* ══ HOME PAGE ══ */

/* Description text on home */
.prose,
.prose p {
  font-family: 'Lora', serif !important;
  color: #2E2820 !important;
}

/* ══ POST LIST CARDS ══ */

/* Remove old card bg overrides, restyle entirely */
.bg-white,
html.dark .bg-white,
article.bg-white,
.dark\:bg-slate-900 {
  background-color: #F6F0E4 !important;
  border: 2px solid #C4A870 !important;
  border-radius: 16px !important;
  box-shadow: none !important;
  transition: transform 0.2s !important;
}


/* Card title in Fredoka */
.group h3,
.group h3 * {
  font-family: 'Bubblegum Sans', sans-serif !important;
  font-weight: 600 !important;
  font-size: 1.2rem !important;
  color: #2E2820 !important;
  letter-spacing: 0.02em !important;
}

.group:hover h3 {
  color: #3A6647 !important;
}

/* Date text */
time,
.text-gray-500,
.text-gray-400,
html.dark .text-gray-400 {
  font-family: 'Lora', serif !important;
  color: #7A6E65 !important;
  font-size: 0.85rem !important;
}

/* Read more arrow */
.text-blue-600,
[class*="text-blue"] {
  color: #5A8F62 !important;
  font-family: 'Lora', serif !important;
}

/* ══ YEAR BADGE ══ */

.year-indicator-badge {
  background: #5A8F62 !important;
  color: #F6F0E4 !important;
  border: none !important;
  box-shadow: 3px 3px 0px #3A6647 !important;
  font-family: 'Bubblegum Sans', sans-serif !important;
  font-weight: 600 !important;
  font-size: 1.1rem !important;
  letter-spacing: 0.04em !important;
}

/* Year divider line */
.bg-gradient-to-r {
  background: linear-gradient(to right, #7BBDB8, transparent) !important;
}

/* ══ SECONDARY BG ══ */

.bg-gray-50,
html.dark .bg-gray-50,
[class*="bg-slate-700"],
.dark\:bg-slate-700,
.bg-gray-100,
html.dark .bg-gray-100 {
  background-color: transparent !important;
}

/* ══ ALL TEXT ══ */

body, div, p, li {
  color: #2E2820 !important;
}

/* protect scrapbook letter colors */
.title-letter { color: inherit !important; }

/* Charlotte home title — Mogena */
.charlotte-title {
  font-family: 'Mogena', serif !important;
  font-style: normal !important;
  font-weight: 400 !important;
}

.text-gray-700, .text-gray-600, .text-gray-500,
html.dark .text-gray-200, html.dark .text-gray-300,
[class*="text-slate"],
.text-gray-800,
html.dark .text-gray-800 {
  color: #2E2820 !important;
}

/* ══ LINKS ══ */

a,
.text-blue-600, .text-blue-500, .text-blue-700,
html.dark .text-blue-400, html.dark .text-blue-300 {
  color: #3A6647 !important;
}

a:hover {
  color: #5A8F62 !important;
}

/* External post title link */
a.external-post-link,
a.external-post-link:visited {
  color: #2E2820 !important;
  text-decoration: none !important;
}

a.external-post-link:hover {
  color: #3A6647 !important;
  text-decoration: underline !important;
}

/* ══ TAG CHIPS ══ */

.tag-chip,
html.dark .tag-chip {
  font-family: 'Lora', serif !important;
  background-color: #F0D5D8 !important;
  color: #7A3840 !important;
  border-radius: 999px !important;
  font-size: 0.78rem !important;
  padding: 3px 12px !important;
  border: 1px solid #D4989E !important;
}

.tag-chip:hover {
  background-color: #D4989E !important;
  color: #fff !important;
}

/* ══ BORDERS ══ */

.border-gray-200, .border-gray-100,
html.dark .border-slate-700,
html.dark .border-slate-800 {
  border-color: #7BBDB8 !important;
}

/* ══ CARD HOVER TINTS ══ */

.hover\:bg-blue-50\/30:hover,
.bg-blue-50,
.hover\:bg-gray-50:hover {
  background-color: #F5E8EA !important;
}

.hover\:border-blue-300:hover {
  border-color: #7BBDB8 !important;
}


/* ══ BLOCKQUOTE ══ */

.prose blockquote {
  font-family: 'Lora', serif !important;
  border-left: 4px solid #7BBDB8 !important;
  background-color: #E8F2E4 !important;
  color: #2E2820 !important;
  border-radius: 0 12px 12px 0 !important;
  padding: 1rem 1.25rem !important;
}

/* ══ PROSE ══ */

.prose a { color: #3A6647 !important; }
.prose a:hover { color: #5A8F62 !important; }

.prose code, .prose pre {
  font-family: 'Lora', serif !important;
  background-color: #D8EAD3 !important;
  color: #2E2820 !important;
  border-radius: 8px !important;
}

.prose h1, .prose h2, .prose h3, .prose h4 {
  font-family: 'Bubblegum Sans', sans-serif !important;
  color: #2E2820 !important;
}

/* ══ FOOTER ══ */

footer,
html.dark footer,
footer.bg-white,
footer [class*="bg-white"],
footer [class*="bg-gray"],
footer [class*="bg-slate"] {
  font-family: 'Lora', serif !important;
  color: #7A6E65 !important;
  background-color: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

footer a {
  color: #3A6647 !important;
}

/* ══ TOC ══ */

[class*="bg-gray-50"],
html.dark [class*="bg-slate-800"] {
  background-color: transparent !important;
  color: #2E2820 !important;
  border-color: #C4A870 !important;
  border-radius: 12px !important;
}

/* ══ PAGINATION ══ */

.dark\:bg-slate-900,
html.dark .dark\:bg-slate-900 {
  background-color: #D8EAD3 !important;
  color: #2E2820 !important;
  border-radius: 999px !important;
}

/* ══ SHADOWS ══ */

.shadow-sm {
  box-shadow: 2px 2px 0px #C8DFC4 !important;
}

.hover\:shadow-md:hover {
  box-shadow: 5px 5px 0px #B8D4B0 !important;
}

/* ══ HEADER SHADOW OVERRIDE ══ */

header.shadow-sm,
html.dark header.shadow-sm {
  box-shadow: none !important;
  border-bottom: 1px solid rgba(160,190,155,0.6) !important;
}

/* ══ RESPONSIVE ══ */

@media (max-width: 640px) {
  nav a,
  html.dark nav a {
    font-size: 1rem !important;
    padding: 4px 12px !important;
  }

  header a {
    font-size: 1.2rem !important;
  }

  /* Prevent horizontal overflow on small screens */
  body {
    overflow-x: hidden !important;
  }
}