/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* Post body typography */
.post-body {
  font-size: 1.0625rem; /* 17px - slightly larger for readability */
  line-height: 1.7;
  color: #374151; /* gray-700 */
}

.post-body > :first-child { margin-top: 0; }
.post-body > :last-child { margin-bottom: 0; }

.post-body h1 { font-size: 1.875rem; font-weight: 700; line-height: 1.3; margin: 2rem 0 1rem; color: #111827; }
.post-body h2 { font-size: 1.5rem; font-weight: 600; line-height: 1.35; margin: 1.75rem 0 0.75rem; color: #111827; }
.post-body h3 { font-size: 1.25rem; font-weight: 600; line-height: 1.4; margin: 1.5rem 0 0.5rem; color: #111827; }

.post-body p { margin: 1.25rem 0; }

.post-body ul, .post-body ol { margin: 1.25rem 0; padding-left: 1.625rem; }
.post-body li { margin: 0.5rem 0; }
.post-body ul { list-style-type: disc; }
.post-body ol { list-style-type: decimal; }
.post-body li > ul, .post-body li > ol { margin: 0.5rem 0; }

.post-body a { color: #2563eb; text-decoration: underline; text-underline-offset: 2px; }
.post-body a:hover { color: #1d4ed8; }

.post-body img { max-width: 100%; height: auto; margin: 1.5rem 0; border-radius: 0.5rem; }

.post-body blockquote {
  border-left: 4px solid #d1d5db;
  padding-left: 1rem;
  margin: 1.5rem 0;
  font-style: italic;
  color: #4b5563;
}

.post-body pre { background: #1f2937; color: #f9fafb; padding: 1rem; border-radius: 0.5rem; overflow-x: auto; margin: 1.5rem 0; }
.post-body code { background: #f3f4f6; padding: 0.125rem 0.375rem; border-radius: 0.25rem; font-size: 0.875em; }
.post-body pre code { background: transparent; padding: 0; }

/* Dark mode styles */
@media (prefers-color-scheme: dark) {
  .post-body { color: #d1d5db; } /* gray-300 */
  .post-body h1, .post-body h2, .post-body h3 { color: #f3f4f6; } /* gray-100 */
  .post-body a { color: #60a5fa; } /* blue-400 */
  .post-body a:hover { color: #93c5fd; } /* blue-300 */
  .post-body blockquote { border-color: #4b5563; color: #9ca3af; } /* gray-600, gray-400 */
  .post-body pre { background: #111827; } /* gray-900 */
  .post-body code { background: #374151; color: #e5e7eb; } /* gray-700, gray-200 */
}

/* Safe area padding for native app */
body.native-app {
  padding-top: env(safe-area-inset-top);
}

/* Subtle scrollbar for hour bar */
.scrollbar-subtle {
  scrollbar-width: thin;
  scrollbar-color: rgba(156, 163, 175, 0.5) transparent;
}

.scrollbar-subtle::-webkit-scrollbar {
  height: 4px;
}

.scrollbar-subtle::-webkit-scrollbar-track {
  background: transparent;
}

.scrollbar-subtle::-webkit-scrollbar-thumb {
  background-color: rgba(156, 163, 175, 0.5);
  border-radius: 2px;
}

.scrollbar-subtle::-webkit-scrollbar-thumb:hover {
  background-color: rgba(156, 163, 175, 0.8);
}

@media (prefers-color-scheme: dark) {
  .scrollbar-subtle {
    scrollbar-color: rgba(107, 114, 128, 0.5) transparent;
  }

  .scrollbar-subtle::-webkit-scrollbar-thumb {
    background-color: rgba(107, 114, 128, 0.5);
  }

  .scrollbar-subtle::-webkit-scrollbar-thumb:hover {
    background-color: rgba(107, 114, 128, 0.8);
  }
}