/* Font override layer — loaded after the theme stylesheet so it wins. */

/* Force dark or light when user overrides system preference */
@media (prefers-color-scheme: light) {
  html[data-theme="dark"] {
    color-scheme: dark;
    --force-dark: 1;
  }
}

@media (prefers-color-scheme: dark) {
  html[data-theme="light"] {
    color-scheme: light;
    --force-light: 1;
  }
}

html[data-theme="dark"] body {
  color: #e4e4e7 !important;
  background: #0a0a0a !important;
}

html[data-theme="dark"] body > header {
  background: #18181b !important;
  color: #fafafa !important;
  border-bottom: 1px solid #27272a !important;
}

html[data-theme="dark"] body > header h1 a,
html[data-theme="dark"] body > header nav a {
  color: #a1a1aa !important;
}

html[data-theme="dark"] body > header h1 a:hover,
html[data-theme="dark"] body > header nav a:hover {
  color: #60a5fa !important;
}

html[data-theme="dark"] main {
  background: transparent !important;
  box-shadow: none !important;
}

html[data-theme="dark"] .post-header h1 {
  color: #fafafa !important;
}

html[data-theme="dark"] .post-meta {
  color: #71717a !important;
  border-bottom-color: #27272a !important;
}

html[data-theme="dark"] .tag {
  background: #27272a !important;
  color: #a1a1aa !important;
  border: 1px solid #3f3f46 !important;
  box-shadow: none !important;
}

html[data-theme="dark"] .post-body {
  color: #d4d4d8 !important;
}

html[data-theme="dark"] .post-body h2,
html[data-theme="dark"] .post-body h3,
html[data-theme="dark"] .post-body h4 {
  color: #fafafa !important;
}

html[data-theme="dark"] .post-body code {
  background: #18181b !important;
  color: #fbbf24 !important;
  border: 1px solid #27272a !important;
}

html[data-theme="dark"] .post-body pre {
  background: #18181b !important;
  border-color: #27272a !important;
}

html[data-theme="dark"] .post-body a {
  color: #60a5fa !important;
  border-bottom-color: transparent !important;
}

html[data-theme="dark"] .post-body a:hover {
  color: #93c5fd !important;
  background: rgba(96,165,250,0.1) !important;
}

html[data-theme="dark"] .post-body blockquote {
  border-left-color: #60a5fa !important;
  background: #18181b !important;
  color: #a1a1aa !important;
}

html[data-theme="dark"] .post-body strong {
  color: #fafafa !important;
}

html[data-theme="dark"] .comments,
html[data-theme="dark"] .mastodon-comments,
html[data-theme="dark"] .recent-posts {
  border-top-color: #27272a !important;
}

html[data-theme="dark"] .comments h2,
html[data-theme="dark"] .mastodon-comments h2,
html[data-theme="dark"] .recent-posts h2,
html[data-theme="dark"] .mastodon-sidebar-section h2,
html[data-theme="dark"] .mastodon-sidebar-section h3 {
  color: #fafafa !important;
}

html[data-theme="dark"] .comments-content {
  background: #18181b !important;
  border-color: #27272a !important;
}

html[data-theme="dark"] .comments-content h4 {
  color: #e4e4e7 !important;
}

html[data-theme="dark"] .comments-content p {
  color: #a1a1aa !important;
}

html[data-theme="dark"] .mastodon-profile-card {
  background: #18181b !important;
  border-color: #27272a !important;
}

html[data-theme="dark"] .profile-name { color: #fafafa !important; }
html[data-theme="dark"] .profile-handle { color: #71717a !important; }
html[data-theme="dark"] .profile-bio { color: #a1a1aa !important; }

html[data-theme="dark"] .profile-stats {
  border-top-color: #27272a !important;
  border-bottom-color: #27272a !important;
}

html[data-theme="dark"] .profile-stats .stat strong { color: #fafafa !important; }
html[data-theme="dark"] .profile-stats .stat span { color: #71717a !important; }

html[data-theme="dark"] .mastodon-post {
  background: #18181b !important;
  border-color: #27272a !important;
}

html[data-theme="dark"] .mastodon-post .post-content { color: #d4d4d8 !important; }
html[data-theme="dark"] .mastodon-post .post-link { color: #60a5fa !important; }
html[data-theme="dark"] .mastodon-post .post-meta time { color: #71717a !important; }

html[data-theme="dark"] .mastodon-comment {
  background: #18181b !important;
  border-color: #27272a !important;
}

html[data-theme="dark"] .comment-author { color: #fafafa !important; }
html[data-theme="dark"] .comment-content { color: #d4d4d8 !important; }
html[data-theme="dark"] .comment-content a { color: #60a5fa !important; }
html[data-theme="dark"] .comment-date { color: #52525b !important; }
html[data-theme="dark"] .comment-username { color: #71717a !important; }

html[data-theme="dark"] .post-list li {
  background: #18181b !important;
  border-color: #27272a !important;
}

html[data-theme="dark"] .post-list a { color: #fafafa !important; }
html[data-theme="dark"] .post-list a:hover { color: #60a5fa !important; }
html[data-theme="dark"] .post-list .date { color: #71717a !important; }

html[data-theme="dark"] footer {
  background: #18181b !important;
  color: #71717a !important;
  border-top-color: #27272a !important;
}

/* Force light mode overrides */
html[data-theme="light"] body {
  color: #2d3748 !important;
  background: #f7fafc !important;
}

html[data-theme="light"] body > header {
  background: #ffffff !important;
  color: #2d3748 !important;
  border-bottom: 1px solid #e2e8f0 !important;
  box-shadow: none !important;
}

html[data-theme="light"] body > header h1 a {
  color: #2d3748 !important;
}

html[data-theme="light"] body > header nav a {
  color: #718096 !important;
}

html[data-theme="light"] body > header h1 a:hover,
html[data-theme="light"] body > header nav a:hover {
  color: #4299e1 !important;
}

html[data-theme="light"] main {
  background: #ffffff !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05) !important;
}

html[data-theme="light"] .post-header h1 { color: #1a202c !important; }
html[data-theme="light"] .post-meta { color: #718096 !important; border-bottom-color: #e2e8f0 !important; }

html[data-theme="light"] .tag {
  background: #edf2f7 !important;
  color: #4a5568 !important;
  border: none !important;
  box-shadow: none !important;
}

html[data-theme="light"] .post-body { color: #2d3748 !important; }

html[data-theme="light"] .post-body h2,
html[data-theme="light"] .post-body h3,
html[data-theme="light"] .post-body h4 { color: #1a202c !important; }

html[data-theme="light"] .post-body code {
  background: #edf2f7 !important;
  color: #e53e3e !important;
  border: none !important;
}

html[data-theme="light"] .post-body pre {
  background: #f7fafc !important;
  border-color: #e2e8f0 !important;
  box-shadow: none !important;
}

html[data-theme="light"] .post-body a { color: #4299e1 !important; }

html[data-theme="light"] .post-body blockquote {
  border-left-color: #4299e1 !important;
  background: transparent !important;
  color: #4a5568 !important;
}

html[data-theme="light"] .post-body strong { color: #1a202c !important; }

html[data-theme="light"] .comments,
html[data-theme="light"] .mastodon-comments,
html[data-theme="light"] .recent-posts { border-top-color: #e2e8f0 !important; }

html[data-theme="light"] .comments h2,
html[data-theme="light"] .mastodon-comments h2,
html[data-theme="light"] .recent-posts h2 { color: #1a202c !important; }

html[data-theme="light"] .comments-content {
  background: #f7fafc !important;
  border-color: #e2e8f0 !important;
}

html[data-theme="light"] .mastodon-profile-card {
  background: #ffffff !important;
  border-color: #e2e8f0 !important;
}

html[data-theme="light"] .post-list li {
  background: #f7fafc !important;
  border-color: #e2e8f0 !important;
  box-shadow: none !important;
}

html[data-theme="light"] .post-list a { color: #2d3748 !important; }
html[data-theme="light"] .post-list a:hover { color: #4299e1 !important; }

html[data-theme="light"] footer {
  background: #ffffff !important;
  color: #718096 !important;
  border-top-color: #e2e8f0 !important;
}

:root {
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-heading: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', monospace;
}

html:not([data-font]),
html[data-font="system"] {
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-heading: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

html[data-font="inter"] {
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-heading: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

html[data-font="source"] {
  --font-body: 'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-heading: 'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

html[data-font="roboto"] {
  --font-body: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-heading: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

html[data-font="merriweather"] {
  --font-body: 'Merriweather', Georgia, 'Times New Roman', serif;
  --font-heading: 'Merriweather', Georgia, 'Times New Roman', serif;
}

/* Apply font choices across all theme styles. */
body {
  font-family: var(--font-body) !important;
}

/* Justified paragraph text */
.post-body p,
.page-body p,
.post-body li,
.page-body li {
  text-align: justify !important;
}

h1, h2, h3, h4, h5, h6,
a,
.post-header h1,
body > header h1,
.post-list a,
.post-list h2,
.mastodon-sidebar-section h2,
.mastodon-sidebar-section h3,
.comments h2,
.recent-posts h2 {
  font-family: var(--font-heading) !important;
}

.post-body code,
.post-body pre code,
.post-body pre,
code,
pre {
  font-family: var(--font-mono) !important;
}

/* Header layout for theme/font controls */
.header-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.header-bar nav {
  margin-top: 0 !important;
}

.site-controls {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.site-controls label {
  font-size: 0.85rem;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: inherit;
}

.site-controls select {
  font-family: var(--font-body);
  font-size: 0.85rem;
  padding: 0.25rem 0.5rem;
  border-radius: 6px;
  border: 1px solid currentColor;
  background: transparent;
  color: inherit;
  cursor: pointer;
}

@media (max-width: 768px) {
  .header-bar {
    flex-direction: column;
    align-items: flex-start;
  }

  .site-controls {
    width: 100%;
    justify-content: flex-start;
  }
}

/* Hide dev controls on deployed (non-localhost) environments */
body.deployed .site-controls {
  display: none !important;
}