/* ================================================
   Typography-focused theme overrides
   ================================================ */

/* --- Color palette: clean white + near-black --- */
:root {
  --color-eureka: #444444;
  --color-primary-bg: #ffffff;
  --color-secondary-bg: #ffffff;
  --color-tertiary-bg: #f5f5f0;
  --color-primary-text: #1c1c1c;
  --color-secondary-text: #5a5a5a;
  --color-tertiary-text: #8a8a8a;
}

/* --- Base typography --- */
body {
  font-family: 'Lora', Georgia, 'Times New Roman', serif;
  font-size: 18px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* --- Simplified header: remove fixed positioning --- */
header.fixed {
  position: relative !important;
  box-shadow: none !important;
  border-bottom: 1px solid #ebebeb;
}

/* Remove top padding that compensated for fixed header */
main.flex-grow.pt-16 {
  padding-top: 0 !important;
}

/* Sans-serif for all UI / navigation elements */
header nav,
header nav *,
footer,
footer * {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
}

/* Site title in header */
header nav a.text-xl.font-bold {
  font-family: 'Lora', Georgia, serif;
  font-size: 1.1rem !important;
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* --- Narrow content column for comfortable reading --- */
.w-full.max-w-screen-xl {
  max-width: 820px;
}

/* --- Remove grid top padding --- */
.grid.gap-4.lg\:pt-12 {
  padding-top: 0 !important;
}

/* --- Remove card appearance from content areas --- */
.bg-secondary-bg.rounded {
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* --- Post title --- */
h1.font-bold.text-3xl {
  font-family: 'Lora', Georgia, serif !important;
  font-size: 2.2rem !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  letter-spacing: -0.02em;
  color: var(--color-primary-text) !important;
  margin-bottom: 0.5rem;
}

/* --- Article body typography --- */
.content {
  font-size: 1.08rem;
  line-height: 1.85;
}

.content h1 {
  font-size: 1.9rem !important;
  font-weight: 700 !important;
  border-bottom: none !important;
  padding-bottom: 0 !important;
  margin-top: 2.5rem !important;
  letter-spacing: -0.02em;
}

.content h2 {
  font-size: 1.5rem !important;
  font-weight: 600 !important;
  border-bottom: none !important;
  padding-bottom: 0 !important;
  margin-top: 2.5rem !important;
  letter-spacing: -0.01em;
}

.content h3 {
  font-size: 1.2rem !important;
  font-weight: 600 !important;
  margin-top: 2rem !important;
}

.content h4,
.content h5,
.content h6 {
  margin-top: 1.75rem !important;
  font-weight: 600 !important;
}

/* Links in content: inherit color, use underline */
.content a {
  color: inherit !important;
  text-decoration: underline !important;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: rgba(0, 0, 0, 0.25);
  transition: text-decoration-color 0.15s;
}

.content a:hover {
  color: inherit !important;
  text-decoration-color: rgba(0, 0, 0, 0.75) !important;
}

/* Blockquotes */
.content blockquote {
  font-style: italic;
  border-left: 3px solid #d4d4d0 !important;
  color: var(--color-secondary-text) !important;
  padding: 0.25rem 1.5rem !important;
  margin: 1.5rem 0;
}

/* Inline code */
.content code {
  font-size: 0.87em !important;
  background: #f3f3ee !important;
  color: #2a2a2a !important;
  border-radius: 3px;
  padding: 0.15em 0.45em !important;
}

/* Code blocks */
.content pre {
  background: #f3f3ee !important;
  border: 1px solid #e4e4de;
  border-radius: 4px;
}

/* --- Post metadata --- */
.flex.flex-wrap.flex-row.items-center.mt-2.text-tertiary-text {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 0.875rem;
  margin-top: 0.75rem !important;
}

/* --- Post list dividers --- */
.overflow-hidden.divide-y > div {
  padding-top: 1.75rem !important;
  padding-bottom: 1.75rem !important;
}

/* --- Footer --- */
footer {
  border-top: 1px solid #ebebeb;
}

/* --- Global link hover: stay dark, not teal --- */
a:hover {
  color: var(--color-primary-text) !important;
}

.selected-menu-item {
  color: var(--color-primary-text) !important;
  border-top-color: var(--color-primary-text) !important;
}

/* --- Dark mode adjustments --- */
.dark {
  --color-eureka: #aaaaaa;
  --color-primary-bg: #0f0f0f;
  --color-secondary-bg: #0f0f0f;
  --color-tertiary-bg: #1e1e1e;
  --color-primary-text: rgba(255, 255, 255, 0.88);
  --color-secondary-text: rgba(255, 255, 255, 0.65);
  --color-tertiary-text: rgba(255, 255, 255, 0.45);
}

.dark .content a {
  text-decoration-color: rgba(255, 255, 255, 0.25);
}

.dark .content a:hover {
  text-decoration-color: rgba(255, 255, 255, 0.8) !important;
}

.dark .content blockquote {
  border-left-color: #444 !important;
}

.dark .content code,
.dark .content pre {
  background: #1e1e1e !important;
  border-color: #2e2e2e;
}

.dark header.fixed {
  border-bottom-color: #222;
}

.dark footer {
  border-top-color: #222;
}