/* ===================================================================
   KARKA DICTIONARY — Manuscript Design Overlay
   Applies parchment palette + warm typography to all dictionaries
   without changing structure or interactivity.
   =================================================================== */

:root{
  --leaf:#fdf6e3;
  --leaf-deep:#f4ecd8;
  --paper:#fffaf0;
  --ink:#3b2c14;
  --ink-soft:#5a4a32;
  --rule:#dcc89a;
  --gold:#b8860b;
  --gold-deep:#8a6708;
  --vermillion:#a83323;
  --vermillion-deep:#7a1f15;
  --indigo:#1a3a5e;
}

/* PAGE BACKGROUND ----------------------------------------------- */
body { background: var(--paper) !important; }

/* MAIN CONTENT TYPOGRAPHY --------------------------------------- */
main, [class*="max-w-6xl"], [class*="max-w-7xl"] {
  color: var(--ink);
}

/* HERO HEADER (font-playfair already used) ---------------------- */
h1[class*="font-[family-name"], 
h1[class*="font-playfair"],
[class*="text-4xl"] h1, h1[class*="text-4xl"],
[class*="text-5xl"] h1, h1[class*="text-5xl"] {
  font-family: "Cormorant Garamond", "Playfair Display", Georgia, serif !important;
  color: var(--ink) !important;
  font-weight: 600 !important;
  letter-spacing: -0.005em !important;
}

/* Eyebrow above title */
.text-amber-700, [class*="text-amber-700"] {
  color: var(--vermillion) !important;
}

/* Standfirst paragraph */
.text-gray-700 {
  color: var(--ink-soft) !important;
}

/* TERM CARDS ----------------------------------------------------- */
[class*="bg-white"]:not(header):not(button):not(input) {
  background: var(--leaf) !important;
  border-color: var(--rule) !important;
}
/* Slightly warmer hover */
[class*="hover:bg-gray-50"]:hover {
  background: var(--leaf-deep) !important;
}

/* Card borders */
[class*="border-gray-200"], [class*="border-gray-300"], [class*="border-gray-100"] {
  border-color: var(--rule) !important;
}

/* DIFFICULTY BADGES — manuscript palette ------------------------- */
.bg-emerald-100, [class*="bg-emerald-100"] {
  background: rgba(10,125,47,0.12) !important;
}
.text-emerald-700, [class*="text-emerald-700"] {
  color: #0a7d2f !important;
}
.bg-amber-100, [class*="bg-amber-100"] {
  background: rgba(184,134,11,0.18) !important;
}
.text-amber-700, [class*="text-amber-700"] {
  color: var(--gold-deep) !important;
}
.bg-rose-100, [class*="bg-rose-100"] {
  background: rgba(168,51,35,0.10) !important;
}
.text-rose-700, [class*="text-rose-700"] {
  color: var(--vermillion) !important;
}

/* CATEGORY BADGES ----------------------------------------------- */
[class*="bg-purple-100"], [class*="bg-indigo-100"], [class*="bg-blue-100"] {
  background: rgba(26,58,94,0.10) !important;
}
[class*="text-purple-700"], [class*="text-indigo-700"], [class*="text-blue-700"] {
  color: var(--indigo) !important;
}

/* SEARCH INPUT --------------------------------------------------- */
input[type="search"], input[type="text"][placeholder*="search" i], input[type="text"][placeholder*="Search"] {
  background: var(--paper) !important;
  border: 2px solid var(--rule) !important;
  color: var(--ink) !important;
  font-family: "Spectral", Georgia, serif !important;
  border-radius: 6px !important;
}
input[type="search"]:focus, input[type="text"]:focus {
  border-color: var(--vermillion) !important;
  box-shadow: 0 0 0 3px rgba(168,51,35,0.10) !important;
  outline: none !important;
}

/* FILTER PILLS / SELECT ----------------------------------------- */
select {
  background: var(--paper) !important;
  border: 1px solid var(--rule) !important;
  color: var(--ink) !important;
  font-family: "Spectral", Georgia, serif !important;
  border-radius: 6px !important;
}
button[class*="rounded-full"][class*="border"] {
  border-color: var(--rule) !important;
  background: var(--paper) !important;
  color: var(--ink) !important;
  font-family: "Spectral", Georgia, serif !important;
}
button[class*="rounded-full"][class*="bg-gray-900"],
button[class*="rounded-full"][class*="bg-purple-600"],
button[class*="rounded-full"][aria-pressed="true"] {
  background: var(--vermillion) !important;
  border-color: var(--vermillion) !important;
  color: #fffaf0 !important;
}

/* PRIMARY CTA BUTTONS (Tools, Calculator, Explore) -------------- */
a[class*="bg-gray-900"], button[class*="bg-gray-900"] {
  background: var(--vermillion) !important;
  color: #fffaf0 !important;
  border-radius: 6px !important;
  font-family: "Inter", "Spectral", sans-serif !important;
  font-weight: 600 !important;
  transition: background 0.18s !important;
}
a[class*="bg-gray-900"]:hover, button[class*="bg-gray-900"]:hover {
  background: var(--vermillion-deep) !important;
}

/* TERM TITLE TYPOGRAPHY ----------------------------------------- */
[class*="font-semibold"][class*="text-gray-900"],
.font-semibold.text-gray-900 {
  color: var(--ink) !important;
  font-family: "Cormorant Garamond", Georgia, serif !important;
  font-weight: 600 !important;
}

/* ARROWS in term cards (→) — vermillion --------------------------- */
[class*="text-gray-400"]:has-text("→"),
.text-gray-400 {
  color: var(--vermillion) !important;
  opacity: 0.6;
}

/* HEADINGS (sections within page) -------------------------------- */
h2, h3, h4 {
  font-family: "Cormorant Garamond", Georgia, serif;
  color: var(--ink);
  letter-spacing: -0.005em;
}

/* MANUSCRIPT ORNAMENT — top of main content ---------------------- */
main > div:first-child::before,
[class*="max-w-6xl"]:first-of-type > header::before {
  content: "";
  display: block;
  height: 0;
}

/* WORD OF THE DAY card ------------------------------------------- */
[class*="bg-emerald-900"], [class*="bg-slate-900"], [class*="bg-gray-900"] {
  /* Already dark on the index — keep but tint to deep ink */
}

/* CATEGORY TILES (on the index page) ----------------------------- */
[class*="bg-blue-50"], [class*="bg-violet-50"], [class*="bg-emerald-50"],
[class*="bg-rose-50"], [class*="bg-yellow-50"], [class*="bg-purple-50"],
[class*="bg-indigo-50"], [class*="bg-amber-50"], [class*="bg-cyan-50"] {
  background: var(--leaf) !important;
  border: 1px solid var(--rule) !important;
}
[class*="bg-blue-50"]:hover, [class*="bg-violet-50"]:hover, [class*="bg-emerald-50"]:hover,
[class*="bg-rose-50"]:hover, [class*="bg-yellow-50"]:hover, [class*="bg-purple-50"]:hover,
[class*="bg-indigo-50"]:hover, [class*="bg-amber-50"]:hover, [class*="bg-cyan-50"]:hover {
  background: var(--leaf-deep) !important;
  border-color: var(--gold) !important;
}

/* MINI ICONS (emoji at start of titles) -------------------------- */
h1 [aria-hidden="true"], h2 [aria-hidden="true"] {
  margin-right: 12px;
}

/* TYPOGRAPHY base ----------------------------------------------- */
body, p, li, dd {
  font-family: "Spectral", Georgia, serif;
}

/* MANUSCRIPT FRAME on hero -------------------------------------- */
main > div:first-child > header,
[class*="max-w-6xl"] > header:first-child {
  position: relative;
  padding-bottom: 28px;
  margin-bottom: 32px;
}
main > div:first-child > header::after,
[class*="max-w-6xl"] > header:first-child::after {
  content: "❖ ❖ ❖";
  display: block;
  text-align: center;
  font-size: 12px;
  color: var(--gold);
  letter-spacing: 1.5em;
  margin-top: 16px;
  opacity: 0.7;
}

/* PAGINATION buttons -------------------------------------------- */
nav[aria-label*="agination"] button,
[class*="page"] button {
  background: var(--paper) !important;
  border: 1px solid var(--rule) !important;
  color: var(--ink) !important;
  font-family: "Cormorant Garamond", serif !important;
}
nav[aria-label*="agination"] button[aria-current="page"],
nav[aria-label*="agination"] button[aria-current="true"] {
  background: var(--vermillion) !important;
  color: #fffaf0 !important;
  border-color: var(--vermillion) !important;
}

/* SHADOW softening --------------------------------------------- */
[class*="shadow-sm"] {
  box-shadow: 0 1px 2px rgba(168,51,35,0.04) !important;
}
[class*="shadow-md"] {
  box-shadow: 0 2px 6px rgba(168,51,35,0.06) !important;
}
[class*="shadow-lg"] {
  box-shadow: 0 4px 12px rgba(168,51,35,0.08) !important;
}

/* EMOJI HEADINGS — slightly elevated ---------------------------- */
h1 [aria-hidden="true"]:first-child {
  display: inline-block;
  vertical-align: -2px;
}